/* ============================================
   FORMULAIRES - Système harmonisé AEM77
   Styles génériques pour tous les formulaires
   ============================================ */

/* --------------------------------------------
   1. STRUCTURE DE BASE
   -------------------------------------------- */

/* Grille 2 colonnes pour les champs courts */
.form_grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  align-items: start;
}

/* Groupe de champ */
.form_groupe {
  margin-bottom: 15px;
}

/* Section du formulaire */
.form_section h3 {
  position: relative;
  font-size: 16px;
  color: var(--couleur-theme, #622081);
  margin: 0 0 15px 0;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--couleur-theme, #622081);
}

/* --------------------------------------------
   2. LABELS ET MENTIONS
   -------------------------------------------- */

.form_groupe label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  color: #333;
  margin-bottom: 5px;
}

.obligatoire {
  color: #b12e2e;
}

.facultatif {
  font-weight: normal;
  color: #888;
}

.caracteres_min {
  font-weight: normal;
  font-size: 13px;
  color: #888;
}

/* --------------------------------------------
   3. CHAMPS DE SAISIE
   -------------------------------------------- */

.form_groupe input[type="text"],
.form_groupe input[type="email"],
.form_groupe input[type="tel"],
.form_groupe input[type="number"],
.form_groupe input[type="date"],
.form_groupe select,
.form_groupe textarea {
  width: 100%;
  height: 42px;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.form_groupe textarea {
  height: auto;
  resize: vertical;
  min-height: 80px;
  overscroll-behavior: contain;
}

.form_groupe input:focus,
.form_groupe select:focus,
.form_groupe textarea:focus {
  outline: none;
  border-color: var(--couleur-theme, #622081);
}

/* --------------------------------------------
   4. CHECKBOXES
   -------------------------------------------- */

.form_checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 15px;
}

.form_checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
}

.form_checkbox label {
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.form_checkbox label a {
  color: var(--couleur-theme, #622081);
  font-weight: 600;
}

.form_checkbox label a:hover {
  text-decoration: underline;
}

/* --------------------------------------------
   5. ÉVALUATIONS (étoiles)
   -------------------------------------------- */

/* Grille 2 colonnes pour les évaluations */
.form_grille_evaluations {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Bloc évaluation : voir styles.css (.encadre_evaluation) */

/* Étoiles d'évaluation */
.form_etoiles {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 3px;
}

.form_etoiles input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form_etoiles label {
  font-size: 24px;
  color: #ccc;
  cursor: pointer;
  transition: color 0.2s ease;
}

.form_etoiles label:hover,
.form_etoiles label:hover ~ label,
.form_etoiles input[type="radio"]:checked ~ label {
  color: #f5a623;
}

/* --------------------------------------------
   6. SÉLECTEUR TYPE CONTACT
   -------------------------------------------- */

.type_contact_wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.type_contact_label {
  font-weight: 600;
  font-size: 15px;
  color: #333;
}

.type_selector {
  display: flex;
  gap: 15px;
}

.type_card {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.type_card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.type_card_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  transition: all 0.2s ease;
  background: #fff;
}

.type_card:hover .type_card_inner {
  border-color: #ccc;
}

.type_card_icon {
  font-size: 26px;
  margin-bottom: 6px;
}

.type_card_label {
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  color: #333;
}

/* Question sélectionnée */
.type_card input:checked + .type_card_inner.type_question {
  border-color: var(--couleur-theme);
  background: color-mix(in srgb, var(--couleur-theme) 8%, transparent);
}

.type_card input:checked + .type_card_inner.type_question .type_card_icon,
.type_card input:checked + .type_card_inner.type_question .type_card_label {
  color: var(--couleur-theme);
}

/* Réclamation sélectionnée */
.type_card input:checked + .type_card_inner.type_reclamation {
  border-color: #d4a017;
  background: rgba(212, 160, 23, 0.08);
}

.type_card input:checked + .type_card_inner.type_reclamation .type_card_icon,
.type_card input:checked + .type_card_inner.type_reclamation .type_card_label {
  color: #b8890f;
}

/* Messages dynamiques */
.type_message {
  padding: 15px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  display: none;
}

.type_message p {
  margin: 0;
}

.type_message p + p {
  margin-top: 5px;
}

.type_message_titre {
  font-weight: 600;
}

.type_message.active {
  display: block;
}

.type_message_default {
  background: #f8f8f8;
  color: #666;
}

.type_message_question {
  background: color-mix(in srgb, var(--couleur-theme) 10%, transparent);
  border-left: 3px solid var(--couleur-theme);
  color: var(--couleur-theme);
}

.type_message_reclamation {
  background: rgba(212, 160, 23, 0.1);
  border-left: 3px solid #d4a017;
  color: #8a6b0a;
}

/* Variante info (visible, couleur thème) */
.type_message_info {
  display: block;
  background: color-mix(in srgb, var(--couleur-theme) 10%, transparent);
  border-left: 3px solid var(--couleur-theme);
  margin-bottom: 15px;
}

/* --------------------------------------------
   7. TEXTES ET INFOS
   -------------------------------------------- */

/* Texte légal italique */
.form_legal_italic {
  font-size: 13px;
  font-style: italic;
  color: #888;
  line-height: 1.5;
  margin-top: 15px;
}

.form_legal_italic a {
  color: var(--couleur-theme, #622081);
}

/* Liste des engagements (réclamation) */
.form_liste_engagements {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
}

.form_liste_engagements li {
  font-size: 14px;
  color: #555;
  padding: 0px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.check_engagement {
  color: #28a745;
  font-weight: bold;
  font-size: 16px;
}

/* Infobulle */
.info_bulle {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 8px;
  background: #333;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  padding: 12px 15px;
  border-radius: 6px;
  max-width: 350px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.info_bulle::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 20px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #333;
}

.info_bulle.visible {
  display: block;
}

/* --------------------------------------------
   8. VALIDATION / ERREURS
   -------------------------------------------- */

/* Compteur de caractères */
.compteur_caracteres {
  display: block;
  font-size: 13px;
  color: #b12e2e;
  margin-top: 5px;
  text-align: right;
}

.compteur_caracteres.compteur_ok {
  color: #28a745;
}

/* Champs en erreur */
.champ_erreur {
  border-color: #b12e2e !important;
}

.evaluation_erreur {
  border-color: #b12e2e !important;
}

.checkbox_erreur label {
  color: #b12e2e;
}

/* --------------------------------------------
   RESPONSIVE
   -------------------------------------------- */

@media (max-width: 950px) {
  .form_grille {
    grid-template-columns: 1fr;
    gap: 0px;
  }

  .form_grille_evaluations {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .form_etoiles label {
    font-size: 20px;
  }

  .type_selector {
    flex-direction: column;
  }

  .type_card_inner {
    flex-direction: row;
    padding: 12px 15px;
    gap: 10px;
  }

  .type_card_icon {
    margin-bottom: 0;
    font-size: 22px;
  }
}