/* ==========================================================================
   PIED DE PAGE — port de la section 13 du design V4.
   Chargée sur toutes les pages par inc/assets.php, après style.css.

   Balisage : inc/footer.php. Racine : .gmparts-footer (pas .site-footer,
   voir inc/footer.php). Tout ce qui est à l'intérieur garde les noms de
   classes du design.

   Mêmes règles que header.css : aucune couleur, ombre, rayon, police ni
   espacement en dur ; jetons :root de style.css, et jetons locaux --ft-*
   ci-dessous pour les dimensions que le design écrit en dur.

   Points de rupture : le design ne définit AUCUNE règle de pied de page
   à 1100, 1024, 768 ou 520. Sa grille en auto-fit passe seule de quatre
   colonnes à une selon la largeur ; les bandes suivantes sont en flex
   avec retour à la ligne. Rien à ajouter sans inventer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. JETONS LOCAUX DU PIED DE PAGE
   -------------------------------------------------------------------------- */
:root {
    --ft-col-min:      220px;   /* largeur minimale d'une colonne         */
    --ft-logo-w:        76px;   /* logo (75 dans le masthead, 76 ici)      */
    --ft-chip-min-w:    48px;   /* pilule transporteur ou paiement         */
    --ft-chip-h:        30px;
    --ft-colophon-min-h: 40px;
    --ft-line:           1px;   /* bordures                                */
}

/* --------------------------------------------------------------------------
   1. RACINE ET COLONNES
   -------------------------------------------------------------------------- */
.gmparts-footer {
    background: var(--bench);
}

/* Grille pleine largeur, comme le design : pas de largeur maximale ici,
   seulement les gouttières. Les colonnes se répartissent d'elles-mêmes. */
.site-footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--ft-col-min), 1fr));
    gap: var(--sp-40) var(--sp-32);
    padding: var(--sp-64) var(--gutter) var(--sp-40);
}

.gmparts-footer h2 {
    font-size: var(--fs-13);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-footer);
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
}

.site-footer__col img {
    width: var(--ft-logo-w);
    height: auto;
}

/* Repli sans logo : le nom du site, en texte. État absent du design. */
.site-footer__logo-text {
    color: var(--ink);
    font-size: var(--fs-15);
    font-weight: var(--fw-medium);
}

/* Lignes de contact : icône grise, texte encre, vert au survol. */
.footer-contact {
    display: flex;
    align-items: center;
    gap: var(--sp-10);
    font-size: var(--fs-14);
    color: var(--ink);
}

.footer-contact:hover {
    color: var(--action);
    text-decoration: none;
}

.footer-contact svg {
    color: var(--grey);
    flex: none;
}

/* Horaires : gris, comme le style en ligne du design. */
.footer-contact--hours {
    color: var(--grey);
}

/* Colonnes de menu. wp_nav_menu écrit un <ul> là où le design mettait
   les liens à nu : la liste reprend l'espacement de la colonne. */
.site-footer__links ul {
    display: flex;
    flex-direction: column;
    gap: var(--sp-12);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__links a {
    font-size: var(--fs-14);
    color: var(--grey);
    transition: color var(--ease);
}

.site-footer__links a:hover {
    color: var(--ink);
    text-decoration: none;
}

.gmparts-footer address {
    font-style: normal;
    font-size: var(--fs-14);
    color: var(--grey);
    line-height: var(--lh-address);
}

.site-footer__legal {
    font-family: var(--mono);
    font-size: var(--fs-12);
    color: var(--grey);
    line-height: var(--lh-legal);
}

/* --------------------------------------------------------------------------
   2. TRANSPORTEURS ET MOYENS DE PAIEMENT
   -------------------------------------------------------------------------- */
.methods {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-24) var(--sp-48);
    padding: 0 var(--gutter) var(--sp-40);
    max-width: var(--wrap);
    margin: 0 auto;
}

.methods__group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-10);
}

.methods__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-8);
}

.methods__list span {
    min-width: var(--ft-chip-min-w);
    height: var(--ft-chip-h);
    padding: 0 var(--sp-10);
    background: var(--paper);
    border: var(--ft-line) solid var(--line);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: var(--fs-11);
    font-weight: var(--fw-medium);
    color: var(--grey);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. COLOPHON
   -------------------------------------------------------------------------- */
.colophon {
    background: var(--slate);
    color: var(--on-dark);
    font-size: var(--fs-12);
}

.colophon__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8) var(--sp-16);
    min-height: var(--ft-colophon-min-h);
}

.colophon a {
    color: var(--on-dark);
}

.colophon a:hover {
    color: var(--paper);
}

/* Liens légaux : le design les sépare par « · » dans un paragraphe ;
   wp_nav_menu les écrit en liste, le séparateur est rendu par le CSS.
   white-space: pre garde les espaces autour du point, comme le texte
   du design. */
.colophon__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.colophon__links li + li::before {
    content: " · ";
    white-space: pre;
}