/* Styles partagés entre les pages du site */

:root {
  --brand-green: #1BBC9B;
  --brand-green-rgb: 27 188 155;
  --brand-green-dark: #17A38B;
}

/* Reset pour les boutons déclencheurs de contact (sémantiquement <button>, visuellement identiques aux anciens <a>) */
:where(button[data-contact-trigger]) {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  line-height: inherit;
  text-align: inherit;
}

/* Paragraphe d'introduction dans les sections hero */
.hero-desc {
  font: normal normal normal 18px/21px Arial;
}


/* Utilitaires verts */
.text-teal { color: #1BBC9B !important; }
.bg-teal { background-color: #1BBC9B !important; }
.border-teal { border-color: #1BBC9B !important; }
.fill-teal { fill: #1BBC9B !important; }
.stroke-teal { stroke: #1BBC9B !important; }
.hover\:text-teal:hover { color: #1BBC9B !important; }
.hover\:bg-teal:hover { background-color: #1BBC9B !important; }

/* Lien de navigation actif (page courante) */
.nav-active {
  color: #1BBC9B !important;
  border-bottom: 3px solid #1BBC9B;
  padding-bottom: calc(0.5rem - 3px);
}

/* Icône home active sur la page d'accueil */
.home-active {
  border-bottom: 3px solid #1BBC9B;
  padding-top: 0.5rem;
  padding-bottom: calc(0.5rem - 3px);
}

/* Coins inférieurs carrés pour que le soulignement soit identique
   aux liens texte (pas d'arrondi hérité de .rounded), aussi bien en
   desktop (#navLinks) qu'en mobile (header icônes) */
.home-active,
.contact-nav {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Bouton contact actif dans le header quand la modale est ouverte */
.contact-active {
  border-bottom: 3px solid #1BBC9B;
  padding-bottom: calc(0.5rem - 3px);
}

/* Icône contact active dans le header quand la modale est ouverte */
#siteHeader .contact-nav.contact-nav-active,
body.contact-modal-open #siteHeader .contact-nav {
  color: #1BBC9B !important;
}

#siteHeader .contact-nav.contact-nav-active svg,
body.contact-modal-open #siteHeader .contact-nav svg {
  fill: #1BBC9B !important;
}

/* Modale de contact Brevo partagée */
#fg-overlay .contact-form-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 30px;
}

#fg-overlay .contact-form-shell .sib-container--large {
  margin: 0 auto;
  padding: 0 8px;
}

#fg-overlay .contact-form-shell .sib-form-block {
  overflow: visible;
}

#fg-overlay .contact-form-shell .sib-form-message-panel {
  max-width: 720px;
  margin: 0 auto 8px;
  padding: 8px 12px;
  border-width: 1px;
  border-style: solid;
  display: flex;
  align-items: center;
  gap: 8px;
}

#fg-overlay .contact-form-shell .sib-form-message-panel .sib-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

#fg-overlay .contact-form-shell .sib-form-message-panel .sib-notification__icon {
  fill: currentColor;
}

#fg-overlay .contact-form-shell .sib-form-message-panel__text {
  display: flex;
  align-items: center;
  gap: 8px;
}

#fg-overlay .contact-form-shell .input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #C0CCD9;
  border-radius: 3px;
  font-size: 14px;
  font-family: Helvetica, sans-serif;
  box-sizing: border-box;
}

#fg-overlay .contact-form-shell select.input {
  appearance: auto;
}

#fg-overlay .contact-form-shell textarea.input {
  min-height: 100px;
  resize: vertical;
}

#fg-overlay .contact-form-shell .input--hidden {
  display: none;
}

#fg-overlay .contact-form-shell .entry__error {
  display: none;
}

#fg-overlay .contact-form-shell .entry__choice label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

#fg-overlay .contact-form-shell .sib-form-block__button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

#fg-overlay .contact-form-shell .sib-form-block__button:disabled,
#fg-overlay .contact-form-shell .sib-form-block__button.is-disabled {
  cursor: not-allowed;
  background-color: #9fb9b2 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  opacity: 0.75;
  box-shadow: none;
}

#fg-overlay .contact-form-shell .sib-form-block__button svg {
  width: 16px;
  height: 16px;
  display: none;
}

#fg-overlay .contact-form-shell .sib-captcha {
  min-height: 0;
}

#fg-overlay .contact-form-shell .g-recaptcha {
  min-height: 78px;
}

@media (max-width: 767px) {
  /*
    Ajustements mobiles globaux:
    - On réduit la hauteur visuelle du hero pour laisser de l'espace utile au contenu.
    - On recentre légèrement le bloc texte du hero sous le header fixe.
    - Les classes mobile-overlap-* servent a piloter finement la remontée des cartes
      selon chaque page, sans casser l'alignement desktop.
  */

  /* Centrage vertical du hamburger et des icônes contact dans le header mobile */
  #siteHeader nav > div.md\:hidden,
  #siteHeader nav > button#hamburger {
    align-self: center !important;
    margin-top: 0 !important;
  }
  #siteHeader nav > div.md\:hidden {
    align-items: center !important;
  }
  .mobile-hero-70svh {
    min-height: 100svh !important;
  }

  /* Décalage léger du texte hero pour éviter les collisions avec les blocs suivants. */
  .mobile-hero-copy-shift {
    margin-top: 0 !important;
    transform: translateY(-3vh);
  }

  /* Décalage spécifique du hero des fonds pour laisser le texte sous le logo sur mobile. */
  .fonds-hero-copy {
    margin-top: 6rem !important;
    transform: translateY(0) !important;
  }

  /* Sur la page fonds, la première carte chevauche le hero et le bloc gris. */
  .fonds-panel-grid.mobile-overlap-14rem {
    margin-top: -14rem !important;
  }

  /* Utilitaires de remontée verticale des cartes/panels en mobile. */
  .mobile-overlap-6rem {
    margin-top: -6rem !important;
  }

  .mobile-overlap-11rem {
    margin-top: -11rem !important;
  }

  .mobile-overlap-7rem {
    margin-top: -7rem !important;
  }

  .mobile-overlap-8rem {
    margin-top: -8rem !important;
  }

  .mobile-overlap-9rem {
    margin-top: -9rem !important;
  }

  .mobile-overlap-10rem {
    margin-top: -10rem !important;
  }

  .mobile-overlap-12rem {
    margin-top: -12rem !important;
  }

  .mobile-overlap-14rem {
    margin-top: -14rem !important;
  }

  .mobile-overlap-16rem {
    margin-top: -16rem !important;
  }

  .mobile-overlap-14-5rem {
    margin-top: -14.5rem !important;
  }

  #fg-overlay .contact-modal-panel {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
  }

  #fg-overlay .contact-form-shell {
    padding: 30px 30px 28px !important;
  }

  #fg-overlay .contact-close-btn {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
  }

}