:root {
    /* Couleurs */
    --footer-bg          : #A47764;
    --footer-text        : #FFFFFF;
    --footer-text-light  : #F0F0E5;
    --footer-text-muted  : rgba(240, 240, 229, 0.6);
    --footer-bottom-bg   : rgba(0, 0, 0, 0.1);

    /* Layout */
    --footer-maxw        : 1920px;
    --footer-x           : clamp(40px, 5vw, 80px);
    --footer-y           : clamp(30px, 4vw, 60px);
    --footer-gap         : clamp(40px, 6vw, 80px);

    /* Typographie */
    --footer-title-font  : 'Satisfy', cursive;
    --footer-text-font   : 'Poppins', sans-serif;
    --footer-title-size  : 25px;
    --footer-link-size   : 15px;
    --footer-bottom-size : 14px;
    --footer-line-height : 28px;

    /* Espacements */
    --footer-menu-gap    : 0;
    --footer-bottom-y    : 15px;
    --reassurance-gap    : 40px;
}


/* ================================================================================ */
/* ===== Base ===== */
/* ================================================================================ */
.footer {
    color      : var(--footer-text);
    position   : relative;
    overflow   : hidden;
    width      : 100%;
    max-width  : 100% !important;
    background : transparent;
}


/* ================================================================================ */
/* ===== Réassurances ===== */
/* ================================================================================ */
.footer__reassurances {
    padding    : 40px var(--footer-x);
    background : var(--footer-bg);
}

.footer__reassurances-inner {
    display         : flex;
    justify-content : center;
    align-items     : center;
    gap             : var(--reassurance-gap);
    max-width       : var(--footer-maxw);
    margin-inline   : auto;
}

.footer__reassurance {
    display     : flex;
    align-items : center;
    gap         : 15px;
}

.footer__reassurance-icon {
    flex-shrink : 0;
    width       : 48px;
    height      : 48px;
}

.footer__reassurance-text {
    display        : flex;
    flex-direction : column;
    gap            : 0;
}

.footer__reassurance-text p {
    font-family    : var(--footer-text-font);
    font-size      : 16px;
    font-weight    : 500;
    line-height    : 20px;
    color          : var(--footer-text-light);
    text-transform : uppercase;
    margin         : 0;
    padding        : 0;
}

.footer__separator {
    flex-shrink : 0;
    width       : 1px;
    height      : 66px;
    background  : var(--footer-text-light);
}


/* ================================================================================ */
/* ===== Main Footer ===== */
/* ================================================================================ */
.footer__main {
    position       : relative;
    padding-bottom : 60px;
    background     : var(--footer-bg);
}

.footer__inner {
    position      : relative;
    z-index       : 1;
    width         : 100%;
    max-width     : var(--footer-maxw);
    padding       : var(--footer-y) var(--footer-x);
    margin-inline : auto;
}


/* ================================================================================ */
/* ===== Layout principal avec logo à gauche ===== */
/* ================================================================================ */
.footer__content {
    display     : flex;
    align-items : flex-start;
    gap         : clamp(60px, 8vw, 120px);
}


/* ================================================================================ */
/* ===== Colonnes en flex ===== */
/* ================================================================================ */
.footer__cols {
    display         : flex;
    flex            : 1;
    justify-content : space-between;
    gap             : var(--footer-gap);
}

.footer__col {
    flex : 1;
}


/* ================================================================================ */
/* ===== Titres ===== */
/* ================================================================================ */
.footer-menu__title,
.footer-menu__title span {
    font-family   : var(--footer-title-font);
    font-size     : var(--footer-title-size);
    font-weight   : 400;
    font-style    : normal;
    line-height   : normal;
    color         : var(--footer-text);
    display       : block;
    margin-top    : 0;
    margin-bottom : 20px;
}


/* ================================================================================ */
/* ===== Menus WP ===== */
/* ================================================================================ */
.footer-menu,
.footer-menu ul {
    margin     : 0;
    padding    : 0;
    list-style : none;
}

.footer-menu > li,
.footer-menu__item {
    margin : 0 0 var(--footer-menu-gap);
}

.footer-menu a,
.footer-menu__link {
    font-family     : var(--footer-text-font);
    font-size       : var(--footer-link-size);
    font-weight     : 400;
    line-height     : var(--footer-line-height);
    color           : var(--footer-text);
    text-decoration : none;
    display         : block;
}

.footer-menu a:hover,
.footer-menu__link:hover {
    opacity : 0.8;
}

.footer-menu--categories {
    column-count : 2;
    column-gap   : 24px;
}

.footer-menu--categories .footer-menu__item {
    break-inside : avoid;
}


/* ================================================================================ */
/* ===== Réseaux sociaux ===== */
/* ================================================================================ */
.footer__social {
    margin-top : 20px;
}

.footer-social-menu {
    display    : flex;
    gap        : 12px;
    margin     : 0;
    padding    : 0;
    list-style : none;
}

.footer-social-menu li {
    margin : 0;
}

.footer-social-menu a {
    color           : var(--footer-text);
    display         : flex;
    justify-content : center;
    align-items     : center;
    width           : 32px;
    height          : 32px;
    transition      : all 0.3s ease;
    border-radius   : 50%;
    background      : rgba(255, 255, 255, 0.1);
}

.footer-social-menu a:hover {
    transform  : scale(1.1);
    background : rgba(255, 255, 255, 0.2);
}

.footer-social-menu img,
.footer-social-menu svg {
    width  : 18px;
    height : 18px;
    filter : brightness(0) invert(1);
}


/* ================================================================================ */
/* ===== Logo ===== */
/* ================================================================================ */
.footer__logo {
    flex-shrink : 0;
    width       : 200px;
    max-width   : 200px;
}

.footer__logo img {
    width      : 100%;
    max-width  : 200px;
    height     : auto;
    object-fit : contain;
}


/* ================================================================================ */
/* ===== Bas de page ===== */
/* ================================================================================ */
.footer__bottom {
    font-family     : var(--footer-text-font);
    font-size       : var(--footer-bottom-size);
    font-weight     : 400;
    color           : var(--footer-text-muted);
    position        : absolute;
    bottom          : 0;
    left            : 0;
    z-index         : 2;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    gap             : 20px;
    width           : 100%;
    padding         : var(--footer-bottom-y) var(--footer-x);
    background      : transparent;
}

.footer__bottom p {
    margin : 0;
}

.footer__bottom a {
    color           : var(--footer-text-muted);
    text-decoration : none;
}

.footer__bottom a:hover {
    color : var(--footer-text-light);
}

.menu-item i._mi{
    margin-top: 3px;
}


/* ================================================================================ */
/* ===== Responsive ===== */
/* ================================================================================ */
@media (max-width : 1200px) {
    .footer__content {
        gap : 60px;
    }

    .footer__cols {
        gap : 40px;
    }

    .footer__logo {
        width     : 200px;
        max-width : 200px;
    }
}

@media (max-width : 1024px) {
    .footer__reassurances-inner {
        flex-wrap : wrap;
        gap       : 30px;
    }

    .footer__separator {
        display : none;
    }

    .footer__content {
        flex-direction : column;
        align-items    : center;
        gap            : 40px;
    }

    .footer__logo {
        width     : 200px;
        max-width : 200px;
    }

    .footer__cols {
        flex-wrap : wrap;
        gap       : 40px;
        width     : 100%;
    }

    .footer__col {
        flex : 0 0 calc(50% - 20px);
    }
}

@media (max-width : 768px) {
    .footer__reassurances {
        padding : 80px 20px 30px 20px;
    }

    .footer__reassurances-inner {
        flex-direction : column;
        gap            : 25px;
    }

    .footer__reassurance {
        justify-content : center;
        width           : 100%;
        max-width       : 300px;
    }

    .footer__content {
        gap : 30px;
    }

    .footer__logo {
        width     : 200px;
        max-width : 200px;
    }

    .footer__cols {
        flex-direction : column;
        gap            : 30px;
    }

    .footer__col {
        flex      : 1 1 100%;
        max-width : 100%;
    }

    .footer__bottom {
        text-align     : center;
        flex-direction : column;
        gap            : 10px;
        padding-bottom : 20px;
    }

    .footer__inner {
        border-top : 1px solid rgba(255, 255, 255, 0.2);
    }
}

@media (max-width : 480px) {
    .footer__reassurance-icon {
        width  : 40px;
        height : 40px;
    }

    .footer__reassurance-text p {
        font-size : 14px;
    }

    .footer-menu__title,
    .footer-menu__title span {
        font-size : 22px;
    }

    .footer-menu a,
    .footer-menu__link {
        font-size : 14px;
    }


    .footer__bottom {
        font-size : 12px;
    }
}

/* Bouton contact fixe */
.contact-fab {
    position   : fixed;
    bottom     : 6px;
    right      : 12px;
    z-index    : 9999;
    display    : block;
    width      : 88px;
    height     : 88px;
    transition : transform 0.2s ease, opacity 0.2s ease;
}

.contact-fab:hover {
    transform : scale(1.1);
    opacity   : 0.9;
}
