/* ============================================================
   FICHIER : assets/css/footer.css
   Pied de page - vague décorative, colonnes, boutons flottants
   ============================================================ */

.site-footer {
    position: relative;
    background: linear-gradient(180deg, var(--ocean-dark), var(--ocean-deepest));
    color: var(--ocean-foam);
    padding-top: 60px;
    overflow: hidden;
}
.footer-wave { position: absolute; top: -1px; left: 0; width: 100%; line-height: 0; transform: translateY(-99%); }
.footer-wave svg { width: 100%; height: 90px; }
.footer-wave path { fill: var(--ocean-dark); }

.footer-main { padding-bottom: 40px; }
.footer-logo img { height: 56px; margin-bottom: 18px; filter: brightness(0) invert(1); }
.footer-desc { color: rgba(202,240,248,.75); font-size: .93rem; margin-bottom: 20px; }
.footer-socials { display: flex; gap: 12px; }
.footer-socials a {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.08); color: var(--white); transition: var(--transition-base);
}
.footer-socials a:hover { background: linear-gradient(135deg, var(--ocean-teal), var(--accent-coral)); transform: translateY(-4px); }

.footer-title { color: var(--white); font-size: 1.05rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; }
.footer-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: linear-gradient(90deg, var(--ocean-teal), var(--accent-gold)); border-radius: 3px; }

.footer-links li, .footer-contact li { margin-bottom: 12px; font-size: .92rem; }
.footer-links a { color: rgba(202,240,248,.8); display: flex; align-items: center; gap: 8px; }
.footer-links a:hover { color: var(--accent-gold); padding-left: 4px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; color: rgba(202,240,248,.85); }
.footer-contact li i { color: var(--ocean-teal); margin-top: 4px; }
.footer-contact a { color: rgba(202,240,248,.85); }
.footer-contact a:hover { color: var(--accent-gold); }

.footer-divider { border-color: rgba(255,255,255,.12); margin: 30px 0 20px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-bottom: 26px; font-size: .84rem; color: rgba(202,240,248,.65); }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a:hover { color: var(--accent-gold); }

/* --- Bouton WhatsApp flottant --- */
.whatsapp-float {
    position: fixed; bottom: 26px; left: 26px; z-index: 1200;
    width: 60px; height: 60px; border-radius: 50%;
    background: #25D366; color: var(--white); display: flex; align-items: center; justify-content: center;
    font-size: 1.7rem; box-shadow: 0 10px 30px rgba(37,211,102,.5);
    animation: pulseGlow 2.4s infinite;
}
.whatsapp-float:hover { color: var(--white); transform: scale(1.08); }

/* --- Bouton retour en haut --- */
.back-to-top {
    position: fixed; bottom: 26px; right: 26px; z-index: 1200;
    width: 50px; height: 50px; border-radius: 50%; border: none;
    background: linear-gradient(135deg, var(--ocean-teal), var(--ocean-navy)); color: var(--white);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    box-shadow: var(--shadow-soft); opacity: 0; visibility: hidden; transform: translateY(20px);
    transition: var(--transition-base);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { filter: brightness(1.1); }

@media (max-width: 576px) {
    .whatsapp-float { width: 52px; height: 52px; font-size: 1.4rem; left: 18px; bottom: 18px; }
    .back-to-top { width: 44px; height: 44px; right: 18px; bottom: 18px; }
}