/* ==========================================================================
   PIED DE PAGE — utile : plan du site, contact, légal, langue.
   ========================================================================== */

.pied {
    position: relative;
    padding-top: var(--esp-xl);
    border-top: 1px solid var(--filet);
    font-size: var(--fs-legende);
}

.pied__haut {
    row-gap: var(--esp-l);
    padding-bottom: var(--esp-xl);
}

.pied__signature {
    display: grid;
    gap: var(--esp-m);
    align-content: start;
}

.pied__logo {
    --logo-trait: 20px;
    width: 4.5rem;
    height: 4.5rem;
    transition: rotate var(--dur-lente) var(--ease-sticker);
}

/* Détail caché : le monogramme salue quand on le survole. */
.pied__signature:hover .pied__logo {
    rotate: -14deg;
}

.pied__baseline {
    font-family: var(--f-display);
    font-size: clamp(1.75rem, 1.3rem + 2.2vw, 3.25rem);
    font-weight: 800;
    line-height: 0.95;
    text-transform: uppercase;
    text-wrap: balance;
}

.pied__baseline em {
    font-family: var(--f-italique);
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    color: var(--accent);
}

.pied__titre {
    margin-bottom: var(--esp-s);
    color: var(--discret);
}

.pied__colonne ul {
    display: grid;
    gap: 0.2rem;
}

.pied__colonne a,
.pied__colonne span {
    display: inline-block;
    padding-block: 0.4rem;   /* zone tactile ≥ 44 px avec l'interlignage */
}

.pied__zone {
    max-width: 28ch;
    padding-top: 0.4rem;
    color: var(--discret);
}

.pied__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-s) var(--esp-m);
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding: var(--esp-m) var(--marge) calc(var(--esp-m) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--filet);
    color: var(--discret);
}

.pied__bas a {
    color: var(--texte);
}

.pied__haut-de-page {
    padding-block: 0.75rem;
}

@media (min-width: 48em) {
    .pied__signature {
        grid-column: 1 / -1;
    }
    .pied__colonne {
        grid-column: span 3;
    }
    .pied__colonne:last-child {
        grid-column: span 2;
    }
}

@media (min-width: 64em) {
    .pied__signature {
        grid-column: 1 / span 4;
    }
    .pied__colonne:nth-child(2) {
        grid-column: 5 / span 2;
    }
    .pied__colonne:nth-child(3) {
        grid-column: 7 / span 3;
    }
    .pied__colonne:last-child {
        grid-column: 10 / span 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pied__logo {
        transition: none;
    }
}