/* ============================================
   WAB OS — le pied de page (partagé)
   Une seule bande, nette, sur papier blanc : « WAB. » en mini-touches
   (le logo de la barre du haut, dessin de desk-keys.css) et la phrase
   du studio ; les pages ; les expertises ; le contact (l'adresse,
   l'heure de Lausanne, le délai de réponse). Une ligne de mentions
   dessous. Au téléphone : le logo, le contact, puis les deux colonnes
   de liens côte à côte.
   ============================================ */

.foot {
    margin-top: clamp(56px, 7vw, 96px);
    padding: clamp(40px, 5vw, 56px) 0 24px;
    border-top: var(--hair) solid var(--line);
    background: var(--paper);
    font-size: var(--t-small);
}

.foot__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "brand brand"
        "contact contact"
        "pages expertise"
        "bar bar";
    gap: 32px 24px;
}

/* ── Le logo et la phrase du studio ── */
.foot__brand {
    grid-area: brand;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.foot__logo {
    display: inline-flex;
    border-radius: var(--r-ctl);
}

/* Sélecteur appuyé : desk-keys.css, chargé après, fixe sinon la taille. */
.foot .foot__keys {
    --key: 34px;
    gap: 4px;
}

/* La frappe d'ouverture est celle du premier écran, pas du pied de page. */
.foot .foot__keys .key__face {
    animation: none;
}

.foot__pitch {
    max-width: 30ch;
    line-height: 1.5;
    color: var(--ink-muted);
}

/* ── Les colonnes de liens ── */
.foot__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.foot__col[aria-label='Pages'] {
    grid-area: pages;
}

.foot__col[aria-label='Expertises'] {
    grid-area: expertise;
}

.foot__label {
    margin-bottom: 8px;
    font-family: var(--font-mono);
    font-size: var(--t-cap);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-faint);
}

.foot__col a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: oklch(0 0 0 / 0);
    text-underline-offset: 0.25em;
    transition: text-decoration-color var(--dur-1) var(--ease-out);
}

@media (hover: hover) {
    .foot__col a:hover {
        text-decoration-color: var(--line-strong);
    }
}

/* ── Le contact ── */
.foot__contact {
    grid-area: contact;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.foot__mail {
    font-size: 1.125rem;
    font-weight: var(--w-medium);
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 0.2em;
    transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}

@media (hover: hover) {
    .foot__mail:hover {
        color: var(--klein-text);
        text-decoration-color: var(--klein);
    }
}

.foot__meta {
    margin-top: 6px;
    color: var(--ink-muted);
}

.foot__meta time {
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* ── Les mentions ── */
.foot__bar {
    grid-area: bar;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 24px;
    padding-top: 20px;
    border-top: var(--hair) solid var(--line);
    font-size: var(--t-cap);
    color: var(--ink-faint);
}

/* Sur ordinateur : une seule rangée de quatre colonnes. */
@media (min-width: 900px) {
    .foot__grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr);
        grid-template-areas:
            "brand pages expertise contact"
            "bar bar bar bar";
        gap: 40px 32px;
    }
}