/* ==========================================================================
        FOOTER
     ========================================================================== */

:root {
    --stan-footer-stack-gap: clamp(0.6rem, 1.6vw, 1.4rem);
    --stan-footer-menu-gap: clamp(1.2rem, 3vw, 3rem);
    --stan-footer-cats-gap: clamp(.9rem, 2vw, 1.6rem);
    --stan-footer-reseaux-gap: clamp(1rem, 2vw, 1.4rem);
    --stan-footer-logo-w: 50%;
}

/* Wrapper = même largeur que header */
.stancreation-footer-contenu {
    max-width: var(--container);
    margin: 0 auto;
    padding: 5% var(--gutter) 0 var(--gutter);
    box-sizing: border-box;
}

.stancreation-footer-cadre {
    padding: 10% 0;
    box-sizing: border-box;
}

/* ======================================================
         GRILLE STRUCTURELLE
         LOGO | SPACER AUTO | INFOS
      ====================================================== */
.stancreation-footer-grille {
    align-items: start;
    width: 100%;
}

/* ======================================================
         COLONNE LOGO — COLLÉE À GAUCHE
      ====================================================== */
.stancreation-footer-logo-bloc {
    justify-self: start;
    width: max-content;
}

.stancreation-footer-logo {
    width: var(--stan-footer-logo-w);
    height: auto;
    display: block;
    opacity: .95;
    pointer-events: none;
}

/* ======================================================
         COLONNE INFOS — COLLÉE À DROITE
      ====================================================== */
.stancreation-footer-colonne-infos {
    justify-self: end;
    width: max-content;
    /* 🔴 CRUCIAL */
    display: block;
}

/* Stack interne (menu → catégories → réseaux → bas) */
.stancreation-footer-infos {
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: var(--stan-footer-stack-gap);
}

/* ======================================================
           MENU (WP) — 1 ligne alignée à droite
        ====================================================== */
.stancreation-footer-colonne-menu {
    width: 100%;
}

.stancreation-footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* ✅ à droite */
    align-items: baseline;
    gap: var(--stan-footer-menu-gap);
}

.stancreation-footer-menu li {
    margin: 0;
    padding: 0;
}

.stancreation-footer-menu a {
    display: inline-block;
    width: max-content;
    position: relative;

    color: #000;
    text-decoration: none;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(1.2rem, 2.2vw, 2rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
    opacity: .95;
    transition: opacity .2s ease;
}

.stancreation-footer-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.25rem;
    width: 100%;
    height: .25rem;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.stancreation-footer-menu a:hover::after {
    transform: scaleX(1);
}

/* ======================================================
           CATÉGORIES — 1 ligne alignée à droite
        ====================================================== */
.stancreation-footer-categories {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    /* ✅ à droite */
    align-items: baseline;
    gap: var(--stan-footer-cats-gap);
}

.stancreation-footer-categories li {
    margin: 0;
    padding: 0;
}

.stancreation-footer-categories-lien {
    display: inline-block;
    width: max-content;
    position: relative;

    color: rgba(0, 0, 0, .9);
    text-decoration: none;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(.85rem, 1.2vw, 1rem);
    line-height: 1.2;
    opacity: .9;
    transition: opacity .2s ease;
}

.stancreation-footer-categories-lien::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.15rem;
    width: 100%;
    height: .18rem;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}

.stancreation-footer-categories-lien:hover::after {
    transform: scaleX(1);
}

/* ======================================================
           RÉSEAUX — à droite
        ====================================================== */
.stancreation-footer-reseaux {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--stan-footer-reseaux-gap);
    width: 100%;
}

.stancreation-footer-reseau {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: rgba(0, 0, 0, .9);
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;

    transition: opacity .2s ease, transform .2s ease;
}

.stancreation-footer-reseau i {
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
}

.stancreation-footer-reseau:hover {
    opacity: .7;
}

/* ======================================================
         BAS — alignement droite
      ====================================================== */
.stancreation-footer-bas {
    display: flex;
    align-items: center;
    width: 100%;
    /* ✅ nécessaire pour pousser à droite */

    font-family: "Poppins", system-ui, sans-serif;
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    font-weight: 100;
    letter-spacing: 0em;
    color: rgba(0, 0, 0, .6);
}

/* Mentions légales poussées à droite */
.stancreation-footer-mentions {
    margin-left: auto;
    /* ✅ clé */

    font-size: clamp(0.7rem, 0.95vw, 0.8rem);
    font-weight: 200;
    letter-spacing: 0em;
    text-transform: none;

    color: rgba(0, 0, 0, .45);
    text-decoration: none;
    transition: opacity .2s ease;
}

.stancreation-footer-mentions:hover {
    opacity: .8;
}

/* ==========================================================================
         FOOTER — RESPONSIVE <= 900px (style overlay : tout à gauche)
         ========================================================================== */

@media (max-width: 900px) {

    :root {
        --stan-footer-stack-gap: clamp(0.9rem, 3vw, 1.4rem);
        --stan-footer-menu-gap: clamp(1rem, 3.5vw, 2rem);
        --stan-footer-cats-gap: clamp(.7rem, 3vw, 1.2rem);
        --stan-footer-reseaux-gap: clamp(.9rem, 3vw, 1.2rem);

        /* logo plus grand en mobile si tu veux */
        --stan-footer-logo-w: 50%;
    }

    .stancreation-footer-cadre {
        padding: 10% 0;
    }

    .stancreation-footer-contenu {
        padding: 10% 8% 10% 8%;
    }

    /* Grille -> colonne unique */
    .stancreation-footer-grille {
        grid-template-columns: 1fr;
        row-gap: clamp(1.2rem, 5vw, 2rem);
    }

    /* Logo collé à gauche */
    .stancreation-footer-logo-bloc {
        justify-self: start;
    }

    /* Infos full width, tout à gauche */
    .stancreation-footer-colonne-infos {
        justify-self: start;
        width: 100%;
    }

    .stancreation-footer-infos {
        width: 100%;
        align-items: flex-start;
        text-align: left;
    }

    /* Menu / catégories : wrap mais alignés à gauche */
    .stancreation-footer-menu {
        justify-content: flex-start;
    }

    .stancreation-footer-categories {
        justify-content: flex-start;
    }

    /* Réseaux : à gauche */
    .stancreation-footer-reseaux {
        justify-content: flex-start;
    }

    /* Bas : reste une ligne, mentions à droite */
    .stancreation-footer-bas {
        width: 100%;
        justify-content: space-between;
    }

    .stancreation-footer-mentions {
        margin-left: 0;
        /* space-between gère */
        text-align: right;
    }
}


/* ==========================================================================
           VARIANTE BIO (tout blanc)
           -> tu as déjà : <footer class="stancreation-footer stancreation-footer--bio">
           ========================================================================== */

.stancreation-footer.stancreation-footer--bio {
    color: #fff;
}

.stancreation-footer.stancreation-footer--bio .stancreation-footer-menu a,
.stancreation-footer.stancreation-footer--bio .stancreation-footer-categories-lien,
.stancreation-footer.stancreation-footer--bio .stancreation-footer-reseau,
.stancreation-footer.stancreation-footer--bio .stancreation-footer-reseau i {
    color: #fff;
}

.stancreation-footer.stancreation-footer--bio .stancreation-footer-bas {
    color: rgba(255, 255, 255, .7);
}

.stancreation-footer.stancreation-footer--bio .stancreation-footer-mentions {
    color: rgba(255, 255, 255, .5);
}

/* SVG footer blanc sur BIO */
.stancreation-footer.stancreation-footer--bio .stancreation-footer-hero-svg svg,
.stancreation-footer.stancreation-footer--bio .stancreation-footer-hero-svg svg * {
    stroke: #fff !important;
    fill: #fff !important;
}