/* ===== Contact moderne ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Le fond reste dans general.css normalement,
   mais au cas où : */

/* Titre */
.content h1 {
  margin-top: 20px;
  color: #00e6ff;
  font-size: 3rem;
  text-align: center;
  letter-spacing: 1px;
}

.content h2 {
  margin-top: 10px;
  margin-bottom: 30px;
  color: white;
  text-align: center;
  font-size: 1.8rem;
  text-decoration: none;
}

/* Container de la carte */
.container1 {
  width: min(720px, 92%);
  margin: 0 auto 60px auto;
}

/* Carte formulaire */
form#contact {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(8px);
}

/* Fieldset */
form#contact fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 18px 0;
}

form#contact legend {
  font-weight: 900;
  color: #ff2c9c;
  font-size: 0.95rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Une "ligne" de champ */
.input-container {
  text-align: left;
  margin: 14px 0;
}

/* Labels */
.input-container label {
  display: block;
  font-weight: 700;
  color: #2b2b2b;
  margin-bottom: 8px;
}

/* Inputs, select, textarea */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(245, 245, 255, 0.85);
  font-size: 1rem;
  outline: none;
  transition: 0.2s ease;
}

/* Focus clean */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  border-color: rgba(255, 44, 156, 0.5);
  box-shadow: 0 0 0 4px rgba(255, 44, 156, 0.15);
  background: white;
}

/* Textarea */
textarea {
  min-height: 160px;
  resize: vertical;
}

/* Les icônes en background (si tes images existent) */
.nom {
  background-image: url("images/profile.png");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px;
  padding-left: 44px;
}

.email {
  background-image: url("images/email.png");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px;
  padding-left: 44px;
}

.pwd {
  background-image: url("images/padlock.png");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px;
  padding-left: 44px;
}

/* Erreurs */
.erreur {
  display: block;
  margin-top: 8px;
  font-size: 0.9rem;
  color: #ff2a2a;
  font-weight: 700;
}

/* Select plus clean */
select {
  cursor: pointer;
}

/* Radios alignés propre */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 44, 156, 0.08);
  border: 1px solid rgba(255, 44, 156, 0.15);
  padding: 10px 12px;
  border-radius: 999px;
}

.radio-item input {
  transform: scale(1.1);
}

/* Bouton submit moderne */
input[type="submit"] {
  width: 100%;
  padding: 14px 18px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 900;
  font-size: 1.05rem;
  color: #fff;
  background: linear-gradient(135deg, #ff2c9c, #ff7bd5);
  box-shadow: 0 14px 30px rgba(255, 44, 156, 0.25);
  transition: 0.2s ease;
}

input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(255, 44, 156, 0.32);
}

/* Tooltip ballon (si tu utilises balloon.css) */
.tooltip {
  --balloon-color: #00e6ff;
  --balloon-font-size: 16px;
}