/* ============================
   Styles pour la page Contact
   ============================ */

/* Bande floue (header contact) */
.detail-header-contact {
  display: flex;
  align-items: center;           /* centre verticalement tous les enfants */
  justify-content: space-between;/* espace entre back-contact et contact1 */
  flex-wrap: nowrap;             /* on reste sur une seule ligne */
  padding: 1rem 2rem;            /* ajuste la hauteur de la bande */
  background: #1d311066;
  backdrop-filter: blur(10px);
  border-radius: 8px;
}

/* Lien « Retour à l'accueil » */
.back-contact {
  margin: 0;                     /* on supprime le margin-top */
}

/* Bloc central email + icônes */
.contact1 {
  flex: 1;                       /* prend tout l’espace restant */
  display: flex;
  flex-direction: column;        /* email au-dessus, icônes en dessous */
  align-items: center;           /* centre horizontalement le contenu */
  margin: 0;
  padding: 0;
  color: #fff;
}

.contact1 h1 {
  margin: 0;                     /* pas de marge inutile */
}

/* Liens sociaux (LinkedIn + AssessFirst) */
.social-links {
  display: flex;
  align-items: center;           /* aligne verticalement les icônes */
  justify-content: center;       /* centre horizontalement */
  gap: 10px;                     /* espace entre les icônes */
  margin-top: 0.5rem;            /* petit espace sous l’email */
}

/* Style LinkedIn */
.fa-linkedin {
  color: #c5c5c5;
  font-size: 2rem;
  transition: transform 0.3s ease;
}
.fa-linkedin:hover {
  transform: scale(1.2);
}

/* Si vous voulez harmoniser la taille du logo AssessFirst */
.assessfirst-logo {
  width: 2rem;
  height: auto;
  transition: transform 0.3s ease;
}
.assessfirst-logo:hover {
  transform: scale(1.2);
}

/* ============================
   Partie formulaire de contact
   ============================ */
.contact2 {
  margin: auto;
  max-width: 800px;
  padding: 2rem;
  background: rgba(17, 34, 39, 0.9);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  text-align: center;
  color: var(--text-color);
}

.contact2 p {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: #ccc;
}

.contact2 form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  text-align: left;
}

.contact2 form .form-group {
  margin-bottom: 1rem;
}

.contact2 .form-action {
  text-align: center;
  margin-top: 1rem;
}

.contact2 button[type="submit"] {
  background: var(--secondary-color);
  border: none;
  padding: 0.8rem 2rem;
  color: #fff;
  font-size: 1rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.contact2 button[type="submit"]:hover {
  background: #008ccf;
  transform: scale(1.05);
}

.contact2 a {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.3s;
}

.contact2 a:hover {
  color: #fff;
}