/* footer-fixes.css — overrides ciblés du footer pimento.fr.
 * Aligné DESIGN.md (palette B/N + rouge brick #B20511, Sofia Pro,
 * spacing éditorial, font-weight 300+).
 * Chargé après main.min.css → priorité naturelle.
 */

/* 1. Titres footer-primary-nav servis en <h3> en prod (le CSS d'origine
 *    cible .footer-primary-nav h4 et ne s'applique donc plus). */
.footer-primary-nav h3 {
    position: relative;
    color: #000;
    font-weight: 300;
    font-size: 1.5rem;
    margin: 0 0 30px 0;
    font-family: "Sofia Pro Extra", Helvetica, Arial, sans-serif;
}
.footer-primary-nav h3:after {
    background: #000;
    bottom: -10px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 30px;
}
.footer-primary-nav h3 + p {
    font-family: "Sofia Pro Extra", Helvetica, Arial, sans-serif;
}

/* 2. Cluster diamant (CMS block footer_diamant_cluster — déployé 2026-04-30,
 *    aucune règle CSS n'existait pour ces classes). */
.footer-cluster-nav {
    padding: 40px 0;
    border-bottom: 1px solid #e6e6e6;
}
.footer-cluster-diamant h3 {
    position: relative;
    color: #000;
    font-weight: 300;
    font-size: 1.4rem;
    margin: 24px 0 30px 0;
    font-family: "Sofia Pro Extra", Helvetica, Arial, sans-serif;
}
.footer-cluster-diamant h3:first-child {
    margin-top: 0;
}
.footer-cluster-diamant h3:after {
    background: #000;
    bottom: -10px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 30px;
}
.footer-cluster-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    column-count: 2;
    column-gap: 32px;
}
.footer-cluster-list li {
    padding: 6px 0;
    break-inside: avoid;
}
.footer-cluster-list a {
    color: #000;
    font-weight: 300;
    font-size: 0.95rem;
    text-decoration: none;
    transition: color 0.15s ease;
    font-family: "Sofia Pro", Helvetica, Arial, sans-serif;
}
.footer-cluster-list a:hover,
.footer-cluster-list a:focus {
    color: #B20511;
    text-decoration: underline;
}
@media (max-width: 767px) {
    .footer-cluster-list {
        column-count: 1;
    }
    .footer-cluster-nav {
        padding: 24px 0;
    }
}

/* 3. Newsletter (.upline) — meilleur contraste bouton et label. */
.footer-container .upline label {
    font-weight: 400;
    color: #000;
    font-size: 1rem;
}
.footer-container .upline form .btn {
    background: #000;
    color: #fff;
    border: 1px solid #000;
    padding: 10px 24px;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.footer-container .upline form .btn:hover,
.footer-container .upline form .btn:focus {
    background: #B20511;
    border-color: #B20511;
    color: #fff;
}

/* 4. Footer secondary nav (legal links) — lisibilité (font-weight 100 → 400). */
.footer-secondary-nav a,
.footer-secondary-nav p {
    font-weight: 400;
    color: #000;
}

/* 5. Social icon Instagram (SVG inline ajouté dans footer.phtml). */
.footer-container .upline .social .social-instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #B20511;
    line-height: 1;
    padding: 0 5px;
}
.footer-container .upline .social .social-instagram svg {
    width: 26px;
    height: 26px;
    display: block;
}
.footer-container .upline .social .social-instagram:hover,
.footer-container .upline .social .social-instagram:focus {
    color: #000;
}