/* ============================================================
   forms.css — Style unifié pour tous les formulaires Icube
   Référence : inscription_presentiel.php
   Appliqué à : inscription_presentiel, inscription_virtuel,
                inscription_exposants, inscription_newsletter,
                question_icube
   ============================================================ */

/* ==== Conteneur principal (toutes variantes de classes) ==== */
.inscription-container,
main.insc-exp,
.qc-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 32px 28px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
  box-sizing: border-box;
}

/* ==== Titres ==== */
.inscription-container h1,
.inscription-container h2,
main.insc-exp h1,
main.insc-exp h2,
.qc-container h2 {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #222;
}

/* ==== Texte d'introduction ==== */
.inscription-container p.intro,
main.insc-exp p.intro {
  text-align: center;
  color: #555;
  margin-bottom: 2rem;
  line-height: 1.5;
}

/* ==== Messages erreur / succès ==== */
.inscription-container .error,
.inscription-container .alert-error,
main.insc-exp .alert.alert-error,
.qc-container .alert.alert-error,
.alert-error {
  background: #ffe6e6;
  border: 1px solid #ffcccc;
  padding: 1rem;
  border-radius: 6px;
  color: #a00;
  margin-bottom: 1.5rem;
}

.inscription-container .success,
.inscription-container .alert-success,
main.insc-exp .alert.alert-success,
.qc-container .alert.alert-success,
.alert-success {
  background: #e6ffea;
  border: 1px solid #b3ffcc;
  padding: 1rem;
  border-radius: 6px;
  color: #080;
  margin-bottom: 1.5rem;
}

/* ==== Formulaire ==== */
.inscription-container form,
main.insc-exp form,
.qc-container form,
form.form-virtuel-vertical {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ==== Labels ==== */
.inscription-container label,
main.insc-exp label,
.qc-container label,
form.form-virtuel-vertical label {
  font-weight: 600;
  font-size: 0.95rem;
  color: #333;
  display: block;
  margin-bottom: 0.2rem;
}

/* ==== Champs (input, select, textarea) ==== */
.inscription-container input,
.inscription-container select,
.inscription-container textarea,
main.insc-exp input,
main.insc-exp select,
main.insc-exp textarea,
.qc-container input:not([type="checkbox"]),
.qc-container select,
.qc-container textarea,
form.form-virtuel-vertical input,
form.form-virtuel-vertical select,
form.form-virtuel-vertical textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  background: #fff;
  color: #222;
  transition: border-color 0.2s;
  font-family: inherit;
}

.inscription-container input:focus,
.inscription-container select:focus,
.inscription-container textarea:focus,
main.insc-exp input:focus,
main.insc-exp select:focus,
main.insc-exp textarea:focus,
.qc-container input:focus,
.qc-container select:focus,
.qc-container textarea:focus,
form.form-virtuel-vertical input:focus,
form.form-virtuel-vertical select:focus,
form.form-virtuel-vertical textarea:focus {
  border-color: #4aa3df;
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 163, 223, 0.15);
}

/* ==== Textarea ==== */
.inscription-container textarea,
main.insc-exp textarea,
.qc-container textarea,
form.form-virtuel-vertical textarea {
  min-height: 8rem;
  resize: vertical;
}

/* ==== Bouton soumettre ==== */
.inscription-container button[type="submit"],
main.insc-exp button[type="submit"],
.qc-container button[type="submit"],
form.form-virtuel-vertical button[type="submit"],
form.form-virtuel-vertical .cta-button,
.qc-container .btn-submit {
  align-self: center;
  padding: 0.75rem 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background-color: #4aa3df;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  margin-top: 0.5rem;
}

.inscription-container button[type="submit"]:hover,
main.insc-exp button[type="submit"]:hover,
.qc-container button[type="submit"]:hover,
form.form-virtuel-vertical .cta-button:hover,
.qc-container .btn-submit:hover {
  background-color: #388ec2;
}

.inscription-container button[type="submit"]:active,
main.insc-exp button[type="submit"]:active,
form.form-virtuel-vertical .cta-button:active {
  transform: scale(0.98);
}

/* ==== Note de bas de formulaire ==== */
.inscription-container .footer-note,
main.insc-exp .footer-note {
  text-align: center;
  color: #888;
  font-size: 0.85rem;
  margin-top: 1.5rem;
}

/* ==== Spécifique question_icube : fieldset sujets ==== */
.qc-container fieldset.qc-sujets {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 1rem 1.25rem;
}

.qc-container fieldset.qc-sujets legend {
  font-weight: 600;
  color: #333;
  padding: 0 0.5rem;
}

.qc-container label.qc-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  cursor: pointer;
  margin-bottom: 0.4rem;
}

.qc-container label.qc-checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: #4aa3df;
}

/* ==== Spécifique inscription_virtuel : bloc marketing ==== */
.intro-marketing {
  max-width: 800px;
  margin: 2rem auto 1rem;
  background: #f0f8ff;
  border-left: 4px solid #4aa3df;
  border-radius: 0 8px 8px 0;
  padding: 1.5rem 1.75rem;
  color: #333;
}

.intro-marketing h1 {
  font-size: 1.6rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #222;
}

.intro-marketing p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  color: #555;
}

/* ==== reCAPTCHA centré ==== */
.g-recaptcha {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0;
}

/* ==== Responsive mobile ==== */
@media (max-width: 600px) {
  .inscription-container,
  main.insc-exp,
  .qc-container {
    margin: 16px;
    padding: 20px 16px;
  }

  .inscription-container h1,
  main.insc-exp h1,
  .qc-container h2 {
    font-size: 1.5rem;
  }

  .intro-marketing {
    margin: 1rem;
  }
}