/* === Footer — ultra sobre, centré ========================================= */
:root {
    --ft-bg: #1e1712;
    /* fond sombre */
    --ft-fg: #ffffff;
    /* texte */
    --ft-muted: #ffffffcc;
    /* texte adouci */
    --ft-border: #ffffff22;
    /* trait fin */
}

.ft {
    background: var(--ft-bg);
    color: var(--ft-fg);
    border-top: 1px solid var(--ft-border);
    padding: clamp(28px, 5vw, 44px) 0;
    text-align: center;
}

/* Marque */
.ft-brand {
    display: inline-block;
    margin-bottom: clamp(12px, 2vw, 16px);
}

.ft-logo {
    display: block;
    width: clamp(140px, 18vw, 220px);
    /* une seule dimension => pas de déformation */
    height: auto;
    /* ratio préservé */
    margin: 0 auto;
}

/* Nav courte (peu de texte) */
.ft-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(10px, 2vw, 18px);
    margin: 6px 0 10px;
}

.ft-nav a {
    color: var(--ft-fg);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .02em;
    opacity: .88;
}

.ft-nav a:hover,
.ft-nav a:focus-visible {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
    outline: none;
}

/* Réseaux (icônes seules, sans pastille) */
.ft-social {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.ft-ic {
    display: inline-grid;
    place-items: center;
    padding: 4px;
}

.ft-ic svg {
    width: 18px;
    height: 18px;
    fill: var(--ft-fg);
    opacity: .9;
}

.ft-ic:hover svg,
.ft-ic:focus-visible svg {
    opacity: 1;
    outline: none
}

/* Confort */
.ft a {
    -webkit-tap-highlight-color: transparent
}

@media (prefers-reduced-motion:reduce) {
    .ft * {
        transition: none !important
    }
}