/* Couleurs générales */
body {
   margin: 0;
   font-family: "Montserrat", sans-serif;
}

/* Footer */
footer {
   background-color: #231F20; /* Couleur du fond */
   color: #FFFBE7; /* Couleur du texte */
   padding: 20px;
   position: relative;
   display: flex;
   justify-content: space-between; /* Distribue les éléments sur toute la largeur */
   align-items: center;
}

/* Logo */
.footer-logo {
   position: absolute;
   left: 2rem; /* Position fixe du logo à gauche */
   top: 50%;
   transform: translateY(-50%); /* Centre verticalement le logo */
}

.footer-logo img {
   width: 150px; /* Taille du logo */
   max-width: 100%;
}

/* Container principal */
.footer-container {
   display: flex;
   justify-content: flex-start; /* Aligne les sections à gauche */
   align-items: center;
   gap: 115px;
   padding: 22px 54px 22px 234px;
}

/* Informations */
.footer-info {
   align-items: center;
}


/* Liste des liens */
.footer-info ul {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   align-items: center;
}

.footer-info ul li{
   text-align: left;
}
.footer-info ul li a {
   text-decoration: none;
   color: #FFFBE7;
   font-weight: bold;
   display: block; /* S'assure que l'élément <a> prend toute la largeur du parent */
   text-align: left; /* Aligne le texte à gauche */
}


.footer-info ul li a:hover {
   text-decoration: underline;
}

/* Contact Section */
.footer-contact {
   display: flex;
   flex-direction: column; /* Colonne pour séparer chaque ligne */
   gap: 1rem; /* Espacement entre les lignes */
}

.footer-contact .contact {
   font-weight: bold; /* Espacement entre le titre et les items */
}

.footer-contact .contact-item {
   display: flex;
   align-items: center; /* Centre verticalement les icônes et le texte */
   gap: 6px;
}

.footer-contact img {
   width: 20px; /* Taille des icônes */
}

.footer-contact .num,
.footer-contact .adress {
   margin: 0; /* Supprime les marges par défaut des textes */
   font-size: 1rem; /* Ajuste la taille de la police */
}


/* Réseaux Sociaux */
.footer-socials {
   display: flex;
   justify-content: center;
   gap:46px;
}

.footer-socials a img {
   width: 45px;
   opacity: 1;
   transition: opacity 0.3s;
}

.footer-socials a img:hover {
   opacity: 0.8;
}

/* Pattes SVG */
.footer-paws {
   position: absolute;
   top: 0;
   right: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
}

.footer-paws img {
   position: absolute;
   width: 40px;
   transform: rotate(45deg);
}

/* Positions aléatoires pour les pattes à droite */
.footer-paws img:nth-child(1) {
   top: 5%;
   right: 10%;
}

.footer-paws img:nth-child(2) {
   top: 25%;
   right: 5%;
}

.footer-paws img:nth-child(3) {
   top: 50%;
   right: 15%;
}

.footer-paws img:nth-child(4) {
   top: 65%;
   right: 8%;
}

.footer-paws img:nth-child(5) {
   top: 22%;
   right: 12%;
}

.footer-paws img:nth-child(6) {
   top: 40%;
   right: 9%;
}

.footer-paws img:nth-child(7) {
   top: 55%;
   right: 6%;
}

.footer-paws img:nth-child(8) {
   top: 55%;
   right: 12%;
}

.footer-paws img:nth-child(9) {
   top: 27%;
   right: 15%;
}

.footer-contact img {
   width: 20px; /* Ajuste la taille de l'icône */
   margin-right: 0.5rem; /* Espacement entre l'icône et le texte */
 }
 
 @media (max-width: 768px) {
   /* Général */
   body {
     margin: 0;
     font-family: "Montserrat", sans-serif;
   }

   /* Footer */
   footer {
      width: 90.1%; /* Largeur du footer */
      padding: 20px;
      display: flex;
      flex-direction: column; /* Aligne tout verticalement */
      align-items: center; /* Centrer les éléments */
      justify-content: center;
   }

   /* Logo */
   .footer-logo {
     position: relative; /* Met à jour la position du logo */
     top: 0;
     left: 0;
     transform: none;
     width: 120px; /* Redimensionne le logo pour mobile */
     margin-bottom: 10px; /* Ajoute un espacement sous le logo */
   }

   .footer-logo img {
     width: 100%;
     max-width: 100%;
   }
   /* Container principal */
   .footer-container {
     display: flex;
     flex-direction: column; /* Aligne les sections en colonne */
     gap: 40px;
     width: 100%;
     align-items: center;
     padding: 10px;
     text-align: center;
   }

 /* Informations */
.footer-info {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center; /* Centrer les éléments horizontalement */
   gap: 1rem; /* Espacement entre les éléments */
 }
 
 .footer-info ul {
   display: flex;
   flex-direction: row; /* Aligne les éléments horizontalement */
   gap: 1rem; /* Espacement entre les éléments de la liste */
 }
 
 .footer-info ul li {
   text-align: left;
 }
 
 .footer-info ul li a {
   text-decoration: none;
   color: #FFFBE7;
   font-weight: bold;
   text-align: left; /* Aligne le texte des liens à gauche */
 }
 

   .footer-info ul li a:hover {
     text-decoration: underline;
   }

   /* Contact Section */
   .footer-contact {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     text-align: center;
   }

   .footer-contact .contact {
     font-weight: bold;
   }

   .footer-contact .contact-item {
     display: none;
   }
   /* Réseaux Sociaux */
   .footer-socials {
     display: flex;
     justify-content: space-between;
     gap: 10px;
     width: 50%;
   }

   .footer-socials a img {
     width: 33px;
     opacity: 1;
     transition: opacity 0.3s;
   }

   .footer-socials a img:hover {
     opacity: 0.8;
   }

   /* Pattes SVG */
   .footer-paws {
     display: none; /* Masque les pattes sur mobile */
   }

   .footer-contact .contact {
     font-weight: bold;
     margin-bottom: -0.1rem;
   }
   
   /* Masquer le logo */
   .footer-logo {
     display: none; /* Cacher le logo pour mobile */
   }
}