/* ======================================================================================
   FOOTER.CSS – Composant de pied de page
   Auteur                : Renaud
   Création              : 03 novembre 2025
   Dernière modification : 20 novembre 2025
   Description :
      • Styles pour le pied de page du site, incluant le logo, les réseaux sociaux, etc.
   ======================================================================================= */

/* ======================================================================================
   FOOTER-CONTENT.CSS
   Style "Premium Dark" : Fond sombre, typographie soignée et contrastes forts.
   ======================================================================================= */

.footer-content {
    /* Fond très sombre pour le contraste (presque noir) */
    background-color: var(--color-gris-030); 
    color: #b0b0b0; /* Gris clair pour le texte, plus doux que le blanc pur */
    
    /* Espacement généreux pour faire "aéré" */
    padding: 4rem 2rem 2rem; 
    margin-top: auto;
    
    /* Bordure supérieure colorée (Rappel de la marque) */
    border-top: 4px solid var(--color-logo-default);
    
    /* Grid Layout */
    display: grid;
    grid-template-columns: 1fr; /* Mobile d'abord */
    gap: 3rem;
    text-align: center;
}

/* ==========================================================================
   TYPOGRAPHIE & TITRES
   ========================================================================== */

/* Les titres de colonnes (H3) */
.footer-heading {
    font-family: var(--font-headings);
    color: #FFF; /* Titre en blanc pur */
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase; /* Majuscules pour le style "Label" */
    letter-spacing: 2px; /* Espacement des lettres */
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

/* Petite ligne décorative sous les titres (Optionnel mais joli) */
.footer-heading::after {
    content: "";
    display: block;
    width: 40px;
    height: 2px;
    background-color: var(--color-logo-default);
    margin: 0.5rem auto 0; /* Centré */
}

/* Texte courant */
.footer-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 350px;
    margin: 0 auto 1.5rem; /* Centré */
}

/* ==========================================================================
   LIENS DE NAVIGATION
   ========================================================================== */

.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-list li {
    margin-bottom: 0.8rem;
}

.footer-nav-list a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-nav-list a:hover {
    color: #FFF; /* Devient blanc au survol */
    transform: translateX(5px); /* Petit décalage vers la droite */
    color: var(--color-link-default); /* Ou prend la couleur bleue */
}

/* ==========================================================================
   RÉSEAUX SOCIAUX (Style "Bulles")
   ========================================================================== */

.social-list {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 0;
    list-style: none;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.05); /* Fond translucide subtil */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%; /* Cercle parfait */
    transition: all 0.3s ease;
}

.social-icon {
    width: 20px;
    height: 20px;
    filter: invert(1) brightness(100); /* Force les icônes noires en blanc */
    opacity: 0.7;
    transition: opacity 0.3s;
}

.social-link:hover {
    background-color: var(--color-logo-default); /* Fond bleu au survol */
    border-color: var(--color-logo-default);
    transform: translateY(-3px); /* Monte légèrement */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.social-link:hover .social-icon {
    opacity: 1;
}

/* ==========================================================================
   LOGO & COPYRIGHT
   ========================================================================== */

.footer-block--logo {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centré sur mobile */
}

/* Correctif lien footer */
.footer-logo-link {
    display: block;
    line-height: 0;
    margin-bottom: 1.5rem;
}

.footer-logo-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 180px; /* Un peu plus petit que le header souvent */
    max-height: var(--logo-image-height);
    
    /* Bordure identique au Header */
    border: 2px solid transparent; 
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
    
    /* Si ton logo est noir et le fond footer foncé, tu peux forcer un fond blanc au logo : */
    /* background-color: rgba(255,255,255, 0.9); */
    /* padding: 5px; */
}

/* Comportement au survol (Identique Header) */
.footer-logo-link:hover .footer-logo-img,
.footer-logo-link:focus .footer-logo-img {
    border-color: var(--color-orange-120); /* Bleu */
    /* Si tu veux qu'il soit plus lumineux sur fond sombre : */
    /* box-shadow: 0 0 10px var(--color-logo-hover-shadow); */
}

.footer-logo-link:active .footer-logo-img {
    border-color: var(--color-logo-active); /* Rouge */
    transform: scale(0.98);
}

/* Ajustement Desktop */
@media (min-width: 900px) {
    .footer-block--logo {
        align-items: flex-start; /* Aligné à gauche sur PC */
    }
}























.footer-copyright {
    grid-column: 1 / -1;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Ligne de séparation très fine */
    font-size: 0.85rem;
    color: #666;
}

.footer-copyright a {
    color: #888;
    text-decoration: none;
}

/* ==========================================================================
   MEDIA QUERIES (DESKTOP)
   ========================================================================== */

@media (min-width: 900px) {
    .footer-content {
        grid-template-columns: 1.5fr 1fr 1fr; /* Logo plus large, puis nav, puis social */
        text-align: left; /* Alignement gauche sur PC */
        padding: 5rem 4rem 2rem;
    }

    .footer-desc, 
    .footer-heading::after {
        margin: 0.5rem 0 0 0; /* Alignement gauche */
    }
    
    .social-list {
        justify-content: flex-start; /* Alignement gauche des icônes */
    }

    .footer-nav-list a:hover {
        padding-left: 5px; /* Accentue l'effet de mouvement */
        transform: none;
    }
}