/* ============================================================
   FOOTER SEVY CRÉATIONS BOIS - VERSION ULTRA AGRESSIVE
   Dernière modification : 2026-04-29 15:20
   ============================================================ */

/* ✅ FORCER LE PARENT À NE PAS METTRE LE FOOTER À CÔTÉ */
.site-content,
.ast-container,
#content {
    display: block !important;
    flex-direction: column !important;
}

/* ✅ SORTIR LE FOOTER DU FLUX COMPLÈTEMENT */
.sevy-footer {
    background: linear-gradient(135deg, #2c1810 0%, #1a0f0a 100%);
    color: #f5f1ed;
    padding: 3rem 2rem 1.5rem; /* ✅ Réduit pour footer plus compact */
    
    /* FORCER POSITION */
    position: relative;
    width: 100vw !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 4rem !important; /* ✅ Réduit de 6rem à 4rem */
    clear: both !important;
    display: block !important;
    
    /* Au cas où il y a du flex/grid */
    grid-column: 1 / -1 !important;
    flex-basis: 100% !important;
    order: 9999 !important; /* Toujours en dernier */
}

.sevy-footer,
.sevy-footer * {
    box-sizing: border-box;
}

.sevy-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        #d4a574 0%, 
        #b8905f 25%, 
        #d4a574 50%, 
        #b8905f 75%, 
        #d4a574 100%
    );
}

/* WeatherCloud sticker — desktop only */
.sevy-footer .footer-weathercloud {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 12px;
    overflow: hidden;
}

.sevy-footer .footer-weathercloud img {
    display: block;
    height: 52px;
    width: auto;
}

@media (max-width: 960px) {
    .sevy-footer .footer-weathercloud {
        display: none !important;
    }
}

/* Container principal */
.footer-in {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem; /* ✅ Réduit de 4rem à 3rem */
    padding-bottom: 2rem; /* ✅ Réduit de 3rem à 2rem */
    border-bottom: 1px solid rgba(212, 165, 116, 0.2);
}

/* Colonne branding (logo + contact) */
.footer-branding {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Logo et tagline */
.footer-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #d4a574;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.footer-sub {
    color: #b8905f;
    font-size: 0.95rem;
    margin: 0;
    font-style: italic;
}

/* Contact rapide (téléphone + WhatsApp) */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.footer-contact-link {
    color: #f5f1ed;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-contact-link:hover {
    color: #d4a574;
    transform: translateX(4px);
}

.footer-contact-link.whatsapp:hover {
    color: #25D366; /* Couleur WhatsApp */
}

/* Navigation footer */
.footer-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem 2rem;
    align-content: start;
}

.footer-nav a {
    color: #f5f1ed;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    padding: 0.5rem 0;
    display: block;
    position: relative;
}

.footer-nav a::before {
    content: '→';
    position: absolute;
    left: -1.2rem;
    opacity: 0;
    transition: all 0.3s ease;
    color: #d4a574;
}

.footer-nav a:hover {
    color: #d4a574;
    padding-left: 1.2rem;
}

.footer-nav a:hover::before {
    opacity: 1;
    left: 0;
}

/* Liens sociaux dans la navigation */
.footer-nav .footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-nav .footer-social-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Pas de flèche pour les réseaux sociaux */
.footer-nav .footer-social-link::before {
    display: none;
}

.footer-nav .footer-social-link:hover {
    padding-left: 0;
}

/* ✅ Couleurs natives au survol */
.footer-nav .footer-social-link[href*="facebook"]:hover {
    color: #1877F2; /* Bleu Facebook */
}

.footer-nav .footer-social-link[href*="instagram"]:hover {
    color: #E4405F; /* Rose Instagram */
}

/* Alternative : dégradé Instagram (optionnel) */
.footer-nav .footer-social-link[href*="instagram"]:hover svg {
    fill: url(#instagram-gradient);
}

/* Définition du dégradé Instagram (à ajouter dans le SVG si besoin) */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .footer-nav .footer-social-link[href*="instagram"]:hover {
        background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

/* Bas du footer (copyright + liens légaux) */
.footer-bas {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 1.5rem; /* ✅ Réduit de 2rem à 1.5rem */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 0.9rem;
    color: rgba(245, 241, 237, 0.7);
}

.footer-bas nav {
    display: flex;
    gap: 2rem;
}

.footer-bas a {
    color: rgba(245, 241, 237, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.9rem;
}

.footer-bas a:hover {
    color: #d4a574;
}

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

@media (max-width: 768px) {
    .sevy-footer {
        padding: 2.5rem 1.5rem 1.5rem;
        margin-top: 4rem !important;

        /* Évite le footer tronqué sur mobile (100vw + marges négatives) */
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .footer-in {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "brand brand"
            "nav nav";
        gap: 2rem;
        padding-bottom: 2rem;
    }

    /* Le 1er bloc (logo + tagline) doit être tout en haut */
    .footer-in > div:first-child {
        grid-area: brand;
        text-align: left;
    }

    .footer-nav {
        grid-area: nav;
    }
    
    .footer-branding {
        text-align: center;
        align-items: center;
        gap: 0.8rem;
    }
    
    .footer-logo {
        font-size: 1.3rem;
    }
    
    .footer-contact {
        align-items: center;
        gap: 0.5rem;
    }
    
    .footer-contact-link {
        font-size: 0.85rem;
    }
    
    .footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem 1.5rem;
    }
    
    .footer-bas {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        padding-top: 1.5rem;
    }
    
    .footer-bas nav {
        flex-direction: column;
        gap: 0.8rem;
    }
}

@media (max-width: 480px) {
    .footer-in {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }

    .footer-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem 1.1rem;
    }

    .footer-nav a {
        min-width: 0;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
    }
    
    .footer-nav a:hover {
        padding-left: 0;
    }
    
    .footer-nav a::before {
        display: none;
    }
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sevy-footer {
    animation: fadeInUp 0.6s ease-out;
}

/* Effet de brillance sur le trait supérieur */
@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.sevy-footer::before {
    background-size: 200% 100%;
    animation: shimmer 8s linear infinite;
}