/* ─────────────────────────────────────────────────────────────
   foot.css — le pied de page, en une seule feuille.

   Même décision que nav.css le 16/07, pour la même raison, un étage plus bas :
   le site a deux feuilles concurrentes (style.css / top.css, jamais les deux)
   et elles ne stylaient PAS le même footer.
     · style.css  → .site-foot-inner en grid 2fr 3fr (2 colonnes), fait pour la
                    version « logo + nav » des pages Beaux-Arts. Ignore h4, ul,
                    li, a et .site-foot-bottom → le partial y sortait avec des
                    puces et sur deux colonnes au lieu de quatre.
     · top.css    → grid 2fr 1fr 1fr 1fr, fait pour le partial.
   Résultat : /agenda/, /news/ et /setsumeikai/ servaient déjà un footer cassé
   (partial + style.css), sans que personne l'ait vu.

   Plutôt que de fusionner les deux feuilles, le partial apporte son style avec
   lui — il est donc TOUJOURS correct, quelle que soit la feuille de la page.
   Chargée par lib/partials/footer.php lui-même, après elles → elle gagne à
   spécificité égale.

   Toutes les variables utilisées ici existent dans style.css ET top.css
   (vérifié le 17/07) : pas de fallback nécessaire, à la différence de nav.css.
   ───────────────────────────────────────────────────────────── */

.site-foot {
    background: var(--c-navy);
    color: #C9C9C9;
    padding: 60px 32px 40px;
    margin-top: 100px;
}

/* Trois colonnes : la marque, les portes du site, Chocolat! について. C'est le
   markup du partial ; style.css imposait 2fr 3fr et les tassait deux par deux.
   ⚠️ Compté sur le markup : le partial n'a plus que deux colonnes de liens
   depuis le dégraissage du 04/08 (les rubriques du menu en sont sorties). Une
   quatrième piste ici laisserait une colonne vide à droite. */
.site-foot-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.site-foot h4 {
    font-family: var(--serif);
    color: var(--c-ocre-soft);
    font-size: 1.05rem;
    margin-bottom: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; }   /* sans ça : des puces */
.site-foot li { margin-bottom: 8px; font-size: 0.88rem; }
.site-foot a { color: #C9C9C9; text-decoration: none; }
.site-foot a:hover { color: var(--c-ocre-soft); }

.site-foot-brand { display: block; }
.site-foot-brand p { font-size: 0.88rem; color: #A5A5A5; max-width: 320px; }

/* SNS & plateformes d'écoute (02/08) — rangée sous la marque : d'abord où
   écouter (Apple/Spotify), puis où suivre. Icônes SVG inline monochromes. */
.site-foot-sns {
    display: flex; flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 18px;
}
/* Deux lignes (choix Bob 02/08) : écoute (Apple/Spotify) puis SNS. */
.site-foot-sns + .site-foot-sns { margin-top: 10px; }
.site-foot-sns a {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.78rem; color: #A5A5A5;
}
.site-foot-sns a:hover { color: var(--c-ocre-soft); }
.site-foot-sns svg { width: 15px; height: 15px; flex: none; }

.site-foot-bottom {
    max-width: var(--max-w);
    margin: 50px auto 0;
    padding-top: 24px;
    border-top: 1px solid #34465A;
    font-size: 0.78rem;
    color: #889;
    text-align: center;
}
.site-foot-legal {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px;
    margin-bottom: 16px;
}
.site-foot-legal a {
    color: #B9C2CC; font-size: 0.82rem;
    border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.site-foot-legal a:hover { color: var(--c-ocre-soft); border-color: var(--c-ocre-soft); }

/* Le breakpoint du site est 880px (style.css, top.css, nav.css et top.js) :
   les cinq doivent bouger ensemble. Ici on passe à deux colonnes, comme top.css
   le faisait déjà pour ses pages. */
@media (max-width: 880px) {
    .site-foot { padding: 46px 20px 34px; margin-top: 70px; }
    .site-foot-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
    .site-foot-brand { grid-column: 1 / -1; }
}