body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 00px;
        }
        h2 {
            text-align: center;
            color: #333;
        }
        .form-container {
            max-width: 600px;
            margin: 20px auto;
            background: #fff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        label {
            display: block;
            margin: 12px 0 6px;
            font-weight: bold;
            color: #444;
        }
        input, textarea, select {
            width: 100%;
            padding: 12px;
            margin: 5px 0 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }
        
        input[type="text"], input[type="email"], input[type="number"], textarea, select {
    width: 100%;
    padding: 12px;
    margin: 5px 0 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
}

input[type="checkbox"] {
    width: auto;
    margin: 0 5px 0 0;
    vertical-align: middle;
}
        
        select {
            height: auto;
        }
        button {
            width: 100%;
            padding: 12px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        .ai-suggestion {
            margin: 5px 0;
            padding: 8px;
            background-color: #e9f5ff;
            border-left: 4px solid #007bff;
            border-radius: 4px;
        }
        
        
        
          /* ==== Styles pour le dropdown personnalisé ==== */
        .dropdown {
            position: relative; 
            display: inline-block; 
            margin: 5px 0 15px 0;
            width: 100%;
        }
        .dropdown-label {
            /* Aspect du “bouton” qui ouvre/ferme la liste */
            display: block;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #f9f9f9;
            cursor: pointer;
            user-select: none;
        }
        .dropdown-label:hover {
            background: #f0f0f0;
        }
        .dropdown-content {
            position: absolute; 
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            width: 100%;
            max-height: 250px;
            overflow-y: auto;
            display: none; /* Caché par défaut */
            z-index: 999; /* Pour passer par-dessus les autres éléments */
        }
        .dropdown-content label {
            display: block;
            margin: 0;         /* On gère la marge autrement si besoin */
            padding: 8px 10px;
        }
        .dropdown-content input[type="checkbox"] {
            margin-right: 6px;
        }
        /* Pour fermer la liste quand on clique ailleurs */
        .dropdown.open .dropdown-content {
            display: block;
        }
        .dropdown-selected {
            font-style: italic;
            color: #666;
        }
        

.required-asterisk::after {
    content: " *";
    color: red;
  }
        

.dropdown-select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: white;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

  .dropdown-select option {
    color: #000; /* Aussi pour les options de la liste */
  }

.dropdown-select:focus {
  outline: none;
  border-color: #000;
  box-shadow: 0 0 3px rgba(0, 123, 255, 0.5);
}

.bouton-style {
  background-color: #000;      /* noir */
  color: #00ff66;              /* vert vif */
  border: none;
  padding: 10px 20px;
  font-size: 1.2rem;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.bouton-style:hover {
  background-color: #222;      /* noir éclairci */
}