/* ==============================
   FOOTER COMPACT
   ============================== */

.site-footer {
    background-color: var(--color-sapin);
    color: #F7F7F5;
    font-size: 0.9rem;
    margin-top: auto;
    padding-block: var(--space-lg);
}

.site-footer .container {
    text-align: center;
}

/* Stack vertical */

.site-footer__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

/* Ligne identité */

.site-footer__identity {
    margin: 0;
    color: rgba(247, 247, 245, 0.95);
}

.site-footer__identity strong {
    font-weight: 600;
}

/* Ligne contact */

.site-footer__contact {
    margin: 0;
    color: rgba(247, 247, 245, 0.85);
    font-size: 0.9rem;
}

.site-footer__contact a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
    color: #FFFFFF;
    border-color: rgba(247, 247, 245, 0.7);
}

/* Navigation */

.site-footer__nav {
    margin-top: var(--space-xs);
}

.site-footer__nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
}

.site-footer__nav-list li {
    margin-top: 0;
}

.site-footer__nav-list a {
    color: rgba(247, 247, 245, 0.9);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 400;
    position: relative;
    padding-block: 0.15rem;
    transition: color 0.2s ease;
}

.site-footer__nav-list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.15rem;
    margin-inline: auto;
    width: 0;
    height: 1px;
    background-color: #FFFFFF;
    transition: width 0.2s ease;
}

.site-footer__nav-list a:hover,
.site-footer__nav-list a:focus-visible {
    color: #FFFFFF;
}

.site-footer__nav-list a:hover::after,
.site-footer__nav-list a:focus-visible::after {
    width: 100%;
}

/* Crédits */

.site-footer__credits {
    margin: var(--space-xs) 0 0;
    font-size: 0.85rem;
    color: rgba(247, 247, 245, 0.8);
}

.site-footer__credits a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.site-footer__credits a:hover,
.site-footer__credits a:focus-visible {
    color: #FFFFFF;
    border-color: rgba(247, 247, 245, 0.7);
}

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

@media (min-width: 768px) {
    .site-footer {
        padding-block: var(--space-md);
    }

    .site-footer__stack {
        gap: var(--space-xs);
    }
}