/* -------------------------------------------------------- */
/* footer.css – FINAL STABLE + CLEAN RESPONSIVE             */
/* -------------------------------------------------------- */

footer {
   background-color: #111;
   color: #eee;

   text-align: center;

   padding: 20px 0;
   font-size: 1em;

   /* stabilité */
   position: relative;
   z-index: 1;
}

/* ========================= */
/* LIENS */
/* ========================= */

footer a {
   font-size: 1.3em;
   color: #1e90ff;

   text-decoration: underline;

   display: inline-block;
   margin: 0 5px;

   transition: color 0.3s ease;

   /* stabilité */
   transform: translateZ(0);
}

footer a:hover {
   color: #0066B9;
}

/* ========================= */
/* SOCIAL */
/* ========================= */

.footer-social {
   margin-top: 10px;

   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
}

.footer-social a {
   text-decoration: none;
   margin: 10px;
}

/* ========================= */
/* ICONS */
/* ========================= */

.footer-social img {
    width: 40px;
    height: auto;
/*  height: 30px; */

    vertical-align: middle;

    filter: brightness(0.9);

    transition: transform 0.2s ease, filter 0.3s ease;

   /* stabilité GPU */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.footer-social img:hover {
    transform: scale(1.25) translateZ(0);
    filter: brightness(1.3);
}

/* ========================= */
/* TEXTE */
/* ========================= */

footer p {
    margin: 20px 0 0;
    line-height: 1.5;
}

/* ======================================================== */
/* ====================== RESPONSIVE ======================= */
/* ======================================================== */

/* -------- TABLET -------- */
@media (max-width: 1024px) {

footer {
    padding: 18px 0;
    font-size: 0.95em;
    }

.footer-social img {
    width: 28px;
    height: auto;
/*  height: 22px; */
    }

}

/* -------- MOBILE -------- */
@media (max-width: 768px) {

footer {
    padding: 15px 0;
    font-size: 0.95em;
    }

.footer-social img {
    width: 25px;
    height: auto;
/*  height: 22px; */
    }

}

/* -------- SMALL MOBILE -------- */
@media (max-width: 480px) {

footer {
    padding: 12px 0;
    font-size: 0.9em;
    }

footer a {
    display: block;
    margin: 5px 0;
    }

.footer-social img {
    width: 22px;
    height: auto;
/*  height: 22px; */
    }

}