/* =========================
   Variables
========================= */
:root {
  --crs-blue: #143c73;
}

/* =========================
   HEADER TITLE
========================= */
/* Desktop + tablette */
@media (min-width: 769px) {
  .header-title {
    margin-top: 72px;
  }
}

/* =========================
   SOCIAL ICONS – DESKTOP
========================= */
.social-icons-yapla {
  position: absolute;
  top: calc(50% + 76px);
  right: 60px;
  transform: translateY(-50%);
  display: flex;
  gap: 16px;
  z-index: 9999;
}

/* Icônes */
.social-icons-yapla a {
  width: 40px;
  height: 40px;
  background-color: var(--crs-blue);
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none;
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.social-icons-yapla a:hover {
  transform: scale(1.1);
  background-color: #0f2f5c;
}

/* =========================
   CARD INFO ACCUEIL
========================= */
.info-card {
  background-color: #ffffff;
  padding: 40px 48px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(20, 60, 115, 0.08)
}

/* =========================
   FOOTER EMAIL
========================= */
.footer-email a {
  color: #78808d;
}

/* =========================
   CONTENEUR FORMULAIRE
========================= */
.zone-contact .content.contact {
  max-width: 720px;       /* largeur confortable */
  margin: 16px auto;         /* centrage horizontal */
  margin-bottom: 36px;
  background-color: #ffffff;
  padding: 40px 48px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(20, 60, 115, 0.08)
}

/* Mobile – padding plus compact */
@media (max-width: 768px) {
  .zone-contact .content.contact {
    padding: 28px 20px;
  }
}

/* =========================
   TITRE FORMULAIRE
========================= */
.zone-contact .content.contact h1 {
  text-align: center;
  margin-bottom: 32px;
}


/* =========================
   FORMULAIRE – RESET BOOTSTRAP
========================= */
.zone-contact .form-horizontal .form-group {
  display: block;
  margin-bottom: 20px;
}

/* Label au-dessus */
.zone-contact .form-horizontal .control-label {
  display: block;
  float: none;
  width: 100%;
  text-align: left;
  margin-bottom: 6px;
}

/* Conteneur input */
.zone-contact .form-horizontal .form-group > div {
  width: 100%;
  float: none;
}

/* Inputs & textarea alignés */
.zone-contact input.form-control,
.zone-contact textarea.form-control {
  width: 100%;
}

/* Hauteur textarea */
.zone-contact textarea.form-control {
  min-height: 152px;
}


/* =========================
   BOUTON ENVOYER FORMULAIRE
========================= */
.zone-contact .crm-footer-frame {
  display: flex;
  justify-content: flex-end; /* bouton à droite */
  margin-top: 24px;
}


/* =========================
   MOBILE – HEADER CENTRÉ
========================= */
@media (max-width: 768px) {

  /* Forcer l'empilement et le centrage */
  .zone-header,
  .zone-html {
    text-align: center;
  }

  /* Annuler le positionnement absolu */
  .social-icons-yapla {
    position: static;
    transform: none;
    justify-content: center;
    margin-top: 16px;
    margin-bottom: 24px;
    right: auto;
    gap: 12px;
  }

  /* Icônes un peu plus petites */
  .social-icons-yapla a {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }

  /* Logo centré */
  .mod-header-container {
    justify-content: center;
    margin-bottom: 8px;
  }

  /* Réduire l'espace au-dessus du titre */
  .zone-html h1:first-of-type {
    margin-top: -18px;
  }

  .mod-header-part__left {
    justify-content: center;
  }
}