footer {
--footer-bg: white;
--footer-logo-max-width: 152px;
--footer-logo-min-width: 100px;
--footer-link-color: black;
--footer-link-hover-color: #4d4d4dc7;
--footer-link-bg: var(--light);
--footer-ling-hover-bg: var(--light);
--footer-link-gap: 5px;
--footer-gap: 0 30px;
--footer-link-padding: 0.2rem 0;
--footer-social-gap: 10px;
--footer-body-max-width: 700px;
}

footer {
margin-top: 7rem;
margin-bottom: 2rem;
}

.footer-container {
background: var(--footer-bg);
}

footer li {
margin-bottom: 0.5rem;
}

footer .logo-footer {
display: flex;
align-items: center;
justify-content: center;
}

footer .logo-footer img {
width: 100%;
max-width: var(--footer-logo-max-width);
min-width: var(--footer-logo-min-width);
}

footer .social-link {
display: flex;
align-items: center;
background: none;
padding: var(--footer-link-padding);
gap: var(--footer-social-gap);
}

footer .social-link li {
margin-bottom: 0;
}

footer .social-link a {
font-size: 16px;
color: var(--dark);
display: flex;
justify-content: center;
align-items: center;
}

footer .social-link i {
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
padding: 8px;
color: var(--dark);
border-radius: 50%;
width: 30px;
height: 30px;
background: white;
border: 1px solid var(--dark);
}

footer .social-link a:hover {
background-color: var(--bg-light);
color: var(--dark);
}

footer #tarteaucitronManager,
footer a {
color: var(--footer-link-color);
transition: all ease 0.2s; /* text-transform: uppercase; */
line-height: 1rem;
}

footer .time {
text-transform: unset;
}

footer .address span {
line-height: 20px;
/* font-size: 14px; */
}

footer #tarteaucitronManager:hover,
footer a:hover {
cursor: pointer;
color: var(--footer-link-hover-color);
}

footer .footer-body > * {
display: flex;
flex-direction: column;
gap: var(--footer-link-gap);
}

footer .slot > li > a {
display: flex;
padding: var(--footer-link-padding);
background: none;
white-space: nowrap;
color: var(--footer-link-color) !important;
}

footer .slot > li > a:hover {
background: var(--footer-link-hover-bg);
color: var(--footer-link-hover-color) !important;
}

footer .slot > li > a > i {
display: flex;
justify-content: center;
width: 20px;
padding-right: 12px;
}

footer .footer-link-title {
padding: 15px 0;
font-family: var(--title-font);
position: relative; /* text-transform: uppercase; */
color: var(--footer-link-color);
font-weight: 600;
}

footer .footer-link-title span {
position: relative;
padding-bottom: 10px;
}
/* footer .footer-link-title span:after {
    content   : "";
    position  : absolute;
    bottom    : 4px;
    left      : 0;
    width     : 100%;
    height    : 1px;
    background: var(--footer-link-color);
} */
/* ------------- GRID ------------- */

.footer-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 20px;
grid-auto-flow: row;
grid-template-areas: "logo logo logo" "slot-1 slot-2 slot-3 ";
max-width: var(--footer-body-max-width);
border: 2px solid #DEAE78;
}

.footer-container .logo {
grid-area: logo;
margin-top: -7rem;
}

.footer-container .logo .subtitle .lettrine {
font-weight: 500;
}

.footer-container .logo .subtitle .lettrine {
font-size: 20px;
color: var(--color-3);
}

.footer-container .logo span {
color: white;
text-align: center;
font-weight: 300;
margin-top: 1rem;
}

.footer-container .slot-1 {
grid-area: slot-1;
padding: 2rem 1rem 2rem 3rem;
}

.footer-container .slot-2 {
grid-area: slot-2;
padding: 2rem 0;
}

.footer-container .slot-3 {
grid-area: slot-3;
padding: 2rem 0;
}
@media(max-width:991px) {
.footer-container {
grid-template-rows: auto auto;
grid-template-areas: "logo logo logo " "slot-1 slot-2 slot-3 ";
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
}

.footer-container .slot-1,
.footer-container .slot-2,
.footer-container .slot-3,
.footer-container .slot-4 {
padding: 1.5rem;
}
}
@media(max-width:767px) {
.footer-container {
grid-template-rows: auto auto auto;
grid-template-areas: "logo logo" "slot-1 slot-2" "slot-3 slot-4";
grid-template-columns: 1fr 1fr;
gap: 0;
}

.footer-container .slot-1 {
padding: 1rem 0 0 2rem;
}

.footer-container .slot-2 {
padding: 1rem 2rem 0 0;
}

.footer-container .slot-3 {
padding: 0 0 2rem 2rem;
}

.footer-container .slot-4 {
padding: 0 2rem 0 0;
}
}
@media(max-width:575px) {
.footer-container .slot-1 {
padding: 1rem 2rem 0;
}

.footer-container .slot-2 {
padding: 0 2rem;
}

footer {
margin: 7rem 15px 1rem 15px !important;
}

.footer-container .slot-3 {
padding: 0 0 2rem 2rem;
}

.footer-container {
display: flex;
flex-direction: column;
width: 100%;
}
}

main {
overflow-x: hidden;
}