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

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

.home-title {
    text-decoration-line: underline;
    text-decoration-style: double;
    text-decoration-color: #004AAD;
}

/* =========================
   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)
}

/* Layout container */
.subscribe-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;  /* autorise retour à la ligne si besoin */
}

/* Mobile : empilement vertical */
@media (max-width: 768px) {
    .subscribe-row {
        flex-direction: column;
        align-items: center;
    }
}

.circle-btn {
    /* Taille & forme */
    width: 140px;
    max-width: 80vw;
    aspect-ratio: 1 / 1;    /* force la forme carrée, donc cercle avec border-radius */
    height: auto;           /* permet à height de s'ajuster */
    border-radius: 50%;           /* empêche l’écrasement en flex */

    /* Couleurs */
    background-color: #004AAD;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;

    /* Centrage contenu */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Texte */
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;

    /* Interaction */
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    /* Animation */
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
    
    flex-shrink: 0;
}


.circle-btn:hover {
    background-color: #003a8c;
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.circle-btn:active {
    transform: scale(0.96);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.circle-btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.6);
    outline-offset: 4px;
}


@media (max-width: 768px) {
    .circle-btn {
        width: min(140px, 80vw);
        font-size: 14px;
    }
}


/* 🔘 Clic (desktop + mobile) */
.circle-btn:active {
    transform: scale(0.96);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


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

@media (max-width: 768px) {
    .footer-phone a[href^="tel"] {
        color: #78808d !important;
        -webkit-text-fill-color: #78808d;
    }
}

@media (max-width: 768px) {
    .footer-address {
        margin-bottom: 8px;
    }
}

/* =========================
   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;
  }
}