/* Styles pour le bouton "Faites un don" en mode mobile et tablette */

/* Masquer le bouton dans la navbar normale sur mobile et tablette */
@media (max-width: 991.98px) {
  .navbar-nav .nav-item:last-child {
    display: none !important;
  }
  
  /* Créer un bouton fixe en bas de la navbar */
  .navbar-brand::after {
    content: none !important;
  }
  
  /* Rendre la navbar fixe en haut de l'écran */
  .ftco-navbar-light,
  .ftco-navbar-light.scrolled,
  .ftco-navbar-light.sleep,
  .ftco-navbar-light.awake {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 1030;
    padding: 0 15px !important;
    box-shadow: none;
    height: 55px;
    display: flex;
    align-items: center;
    background: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
  }

  /* Centrer verticalement logo + menu dans la barre blanche */
  .ftco-navbar-light > .container-fluid {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .ftco-navbar-light .navbar-brand {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0;
    margin-bottom: 0;
  }

  .ftco-navbar-light .navbar-toggler {
    padding-top: 0;
    padding-bottom: 0;
    align-self: center;
  }
  
  /* Forcer la couleur rose pour le texte du logo en permanence */
  .brand-text, .brand-text .line1, .brand-text .line2 {
    color: #ff0a54 !important;
  }
  
  /* Désactiver les animations et transitions de la navbar */
  .ftco_navbar * {
    transition: none !important;
    animation: none !important;
  }
  
  /* Style du menu mobile */
  .navbar-collapse {
    background-color: white !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    width: 100% !important;
    left: 0 !important;
    top: 100px !important; /* 55px (navbar) + 45px (donation button) to avoid overlapping the first item */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Ajuster les éléments du menu */
  .navbar-nav {
    padding: 10px 0 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  /* Ajuster le positionnement des éléments du menu */
  .navbar-nav .nav-item > .nav-link,
  .navbar-nav .dropdown > .nav-link {
    padding: 12px 0 12px 20px !important;
    font-family: 'Work Sans', Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 23px !important;
    color: rgb(51, 51, 51) !important;
  }
  
  /* Espacement entre les éléments du menu */
  .navbar-nav .nav-item,
  .navbar-nav .dropdown {
    margin: 0 !important;
  }
  
  /* Style des éléments du menu déroulant */
  .navbar-nav .dropdown-menu {
    border: none !important;
    background-color: transparent !important;
    padding-left: 35px !important;
  }
  
  .navbar-nav .dropdown-item {
    padding-left: 5px !important;
    font-family: 'Work Sans', Arial, sans-serif !important;
    color: rgb(51, 51, 51) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 23px !important;
  }
  
  /* Cacher le bouton de don original dans le menu */
  .navbar-nav .nav-item:last-child {
    display: none !important;
  }
  
  /* Ajouter un bouton de don en bas du menu */
  .navbar-collapse.show ~ .mobile-donation-button {
    top: auto !important;
    bottom: 0 !important;
    position: fixed !important;
    margin: 0 !important;
    font-weight: 600 !important;
  }
  
  /* Ajuster la hauteur du menu pour laisser de la place au bouton */
  .navbar-collapse.show {
    padding-bottom: 45px !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
  }
  
  /* Désactiver les changements de couleur lors du défilement */
  .hero-section .brand-text, .hero-section .brand-text .line1, .hero-section .brand-text .line2,
  .navbar-scrolled .brand-text, .navbar-scrolled .brand-text .line1, .navbar-scrolled .brand-text .line2 {
    color: #ff0a54 !important;
  }
  
  /* Bouton de don fixe sous la navbar */
  .mobile-donation-button {
    display: block;
    width: 100%;
    background-color: #ff0a54;
    color: #ffffff !important;
    text-align: center;
    padding: 12px 0;
    font-family: 'Work Sans', Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 23px !important;
    position: fixed;
    top: 55px; /* Coller exactement sous la navbar */
    left: 0;
    right: 0;
    z-index: 1031; /* Juste au-dessus de la navbar (1030) */
    margin: 0;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .mobile-donation-button a {
    color: #ffffff !important;
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
  }

  .mobile-donation-button a:hover,
  .mobile-donation-button a:focus {
    color: #ffffff !important;
    text-decoration: none;
  }
  
  /* Ajouter un espace pour le contenu sous la navbar fixe et le bouton */
  body {
    padding-top: 100px; /* Hauteur de la navbar (55px) + hauteur du bouton (45px) */
  }
  
  /* Ajuster la position des sections hero pour éviter qu'elles ne soient cachées */
  .hero-wrap, .hero-wrap-2 {
    margin-top: -30px;
  }
}

/* Styles pour écrans plus grands (desktop) */
@media (min-width: 992px) {
  .mobile-donation-button {
    display: none;
  }
  
  body {
    padding-top: 0; /* Réinitialiser le padding sur desktop */
  }
  
  .hero-wrap, .hero-wrap-2 {
    margin-top: 0; /* Réinitialiser la marge sur desktop */
  }
}