@charset "utf-8";

/*
===================================================================
    FOOTER
    Zone claire (logo, labels, coordonnées)
    puis barre legale noire, comme l'ancien site.
===================================================================
*/

footer {
    margin-top: var(--space-6);
}

/* ===============================
 *  ZONE CLAIRE
=============================== */
.footerMain {
    background: var(--bg-footer);
    padding: var(--space-3) 0;
    font-size: .875rem;
    color: var(--neutral-black);
}

/* COLONNE 1 (logo + réseaux) et COLONNE 2 (labels + coordonnées) : centrées comme sur l'ancien site */
.footer-brand,
.footer-infos {
    text-align: center;
}

.footerMain .logo {
    width: 100%;
    max-width: 350px;
    margin: var(--space-2) 0 0;
}

.footerMain a,
.footerMain a:link,
.footerMain a:visited {
    color: var(--neutral-dark);
}

.footerMain a:hover,
.footerMain a:focus {
    color: var(--primary-main);
}

/* RESEAUX SOCIAUX */
.footer-social {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: var(--space-3);
}

.footer-social img {
    width: 18px;
    height: 18px;
    filter: var(--fill-svg-neutral-2x-dark);
    transition: filter var(--transition-base);
}

.footer-social a:hover img {
    filter: var(--fill-svg-primary-main);
}

/* LABELS PARTENAIRES */
.footer-labels {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: var(--space-3) 0 var(--space-5);
}

.footer-labels img {
    max-height: 84px;
    width: auto;
}

/* le SVG Amanda n'a pas de dimensions intrinseques : largeur calee sur celle du label FNAIM */
.footer-labels .label-amanda {
    width: 92px;
    height: auto;
}

/* COORDONNEES */
.footer-address {
    font-style: normal;
    font-size: .8125rem;
    line-height: 1.6;
    margin: 0;
}

.footer-address strong {
    display: block;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--neutral-black);
}

/* ===============================
 *  BARRE LEGALE
=============================== */
.footerBottom {
    background: var(--bg-footer-bottom);
    color: var(--neutral-light);
    padding: 1.125rem 0 var(--space-3);
    font-size: .8125rem;
    font-weight: 300;
    line-height: 1.6;
    text-align: center;
}

.footerBottom a,
.footerBottom a:link,
.footerBottom a:visited,
.footerBottom .link-button {
    color: var(--neutral-light);
}

.footerBottom a:hover,
.footerBottom a:focus,
.footerBottom .link-button:hover,
.footerBottom .link-button:focus {
    color: #FFF;
}

/* les liens se repartissent en colonnes de largeur egale, comme les .col de l'ancien site */
.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-legal-links li {
    flex: 0 0 50%;
}

.footer-legal-links a,
.footer-legal-links .link-button {
    display: block;
    padding: .688rem 0;
}

/* <button> présenté comme les liens voisins (« Paramètres des cookies ») */
.footer-legal-links .link-button {
    width: 100%;
    background: none;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
    text-align: inherit;
}

.footer-copyright {
    color: #FFF;
    margin: var(--space-2) 0 0;
}

/*
===================================================================
    Medium devices (tablets, 768px and up)
===================================================================
*/
@media (min-width: 768px) {
    .footer-legal-links li {
        flex: 1 1 0;
    }
}

/*
===================================================================
    Large devices (desktop, 992px and up)
===================================================================
*/
@media (min-width: 992px) {
    /* les 2 colonnes sont côte à côte : pas de gouttiere verticale, comme sur l'ancien site */
    .footerMain .row {
        --bs-gutter-y: 0;
    }
}