:root {
            --color1: black;
             --color2: #27c7d8;
            --font1: "Montserrat", sans-serif;
            --font2: 'Open Sans', sans-serif;
        }
        
        footer {
          border-top: 1px solid #ddd;
          font-family: var(--font1);
          font-size: 0.875rem;
          width: 100% !important;
        }
        #footerContainer{
          width: 100% !important;
            margin: 0;
  padding: 0;
  display: block;
        }
        footer h5 {
          font-family: var(--font1);
          font-weight: 600;
          font-size: 1.1rem;
        }

        footer p {
          font-size: 0.85rem;
        }

        footer a {
          color: inherit;
          text-decoration: none;
          transition: all 0.3s ease;
        }

        footer a:hover {
          text-decoration: none;
          /* scale: 1.1; */
          color: var(--color2);
        }

        /* Styles pour les icônes SVG */
        footer svg {
          fill: #000000;
          transition: all 0.3s ease;
        }

        footer a:hover svg {
          fill: var(--color2);
          transform: scale(1.3);
        }

        /* Style pour le bouton d'envoi */
        footer .btn-primary {
          transition: all 0.3s ease;
          border-radius: 6px;
          padding: 6px 16px;
          font-family: var(--font2);
          font-weight: 500;
          font-size: 0.875rem;
          background-color: var(--color1);
          border: none !important;
        }

        footer .btn-primary:hover {
          transform: scale(1.05);
          background-color: var(--color2);
          border-color: var(--color1);
        }

        /* Input newsletter */
        footer .form-control {
          border-radius: 6px;
          font-family: var(--font2);
          font-size: 0.600rem;
          border: none;
        }
        footer .footer_btn{
          border: 1px solid rgb(223, 223, 223);
          /* overflow: hidden; */
          border-radius: 8px;
          background-color: white;
            transition: all 0.3s ease;
        }

        /* Section footer bottom */
        footer .footer-bottom {
          position: relative;
          width: 100%;
          padding: 3rem 0 2rem 0;
          margin-top: 2rem;
        }

        /* Ligne horizontale qui traverse tout le footer */
        footer .footer-bottom::before {
          content: "";
          position: absolute;
          top: 1.5rem;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(
            90deg,
            transparent 0%,
            #ddd 10%,
            #ddd 90%,
            transparent 100%
          );
          z-index: 1; /* Passe derrière le cercle */
        }

        /* Conteneur pour centrer le cercle */
        footer .circle-container {
          position: relative;
          z-index: 2; /* Au-dessus de la ligne */
          display: flex;
          justify-content: center;
          margin-bottom: 1.5rem;
        }

        /* Cercle avec flèche */
        footer .circle-link {
          position: relative;
          z-index: 3; /* Au-dessus de tout */
          display: flex;
          align-items: center;
          justify-content: center;
          width: 45px;
          height: 45px;
          border-radius: 50%;
          background-color: var(--color1);
          color: white;
          text-decoration: none;
          font-weight: bold;
          font-size: 1.3rem;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          transition: all 0.3s ease;
          border: 3px solid #f8f9fa;
        }

        footer .circle-link:hover {
          background-color: var(--color2);
          transform: scale(1.1);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
          color: white;
        }

        /* Texte de copyright */
        .footer-note {
          margin: 0;
          width: 100%;
          text-align: center;
          font-size: 0.75rem;
          color: #6c757d;
          font-family: var(--font2);
          position: relative;
          z-index: 2; /* Au-dessus de la ligne */
        }
        footer .col-md-4{
          padding: 0 4vw !important;
        }
        footer img{
          margin-top: 0.5vw !important;
          width: 70% !important;
          max-width: 100% !important;
        }
        #logo_footer{
          display: flex !important;
          flex-direction: column !important;
          align-items: center !important;
          justify-content: center !important;
        }
        /* Responsive pour petits écrans */
        @media (max-width: 768px) {
          .footer-note {
            text-align: center;
            padding: 0 1rem;
          }
          
          .footer-bottom {
            padding: 2.5rem 0 1.5rem 0;
          }
          
          .footer-bottom::before {
            top: 1.25rem;
          }
          footer img{
             width: 50% !important;
            max-width: 50% !important;
          }
        }

/* Effet soulignement animé — appliqué à tous les <a> dans le footer */
footer a {
  position: relative;
  display: inline-block;        /* nécessaire pour centrer le trait sous le texte */
  padding-bottom: 4px;
  text-decoration: none;
  color: inherit;
}

footer a:not(.circle-link)::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--color2);
  transform: translateX(-50%);
  transition: width 260ms cubic-bezier(.2,.9,.3,1);
}

footer a:hover::after,
footer a:focus-visible::after {
  width: 50%; /* % de la largeur du texte — changez en 100% si vous préférez */
}

/* Optionnel : élargir le trait sur les grands écrans */
@media(min-width: 992px) {
  footer a:hover::after { width: 60%; }
}
.social_link a{
  padding-bottom: 10px;
}