/* ============================================================
   alter-footer-v3.css — Footer responsive (Lot 5h-2 + auto-deploy e2e v2)
   ------------------------------------------------------------
   Source: custom.css l.644-757 (FOOTER MOBILE block).
   Scope:  @media (max-width: 991.98px) only.
   Owner:  theme stream (feat/theme-v1).
   Notes:  D-009 — no nested comment delimiters in this header.
   ============================================================ */

@media (max-width: 991.98px) {

    /*FOOTER MOBILE*/
    /* Forcer l'empilage vertical des colonnes magasins (Paris, Île-de-France,
       France & DOM, Belgique). .links-container est inline-flex en desktop,
       sans cet override les .links-block restent côte-à-côte en colonnes
       ultra-étroites (rendu illisible iPhone). */
    .links-container {
        display: block;
        width: 100%;
    }
    .links-block {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    #alter-footer {
        flex-wrap: wrap;
        padding: 32px 16px 0 16px;
        justify-content: start;
        align-items: start
    }

    .alter-footer-item {
        width: 50%;
        max-width: 50%;
        flex: 0 0 50%;
        box-sizing: border-box;
        padding: 16px 5px
    }
    /* En-dessous de 600px (iPhone, iPhone Mini), la grille 50% rend les
       4 reassurance items (Paiement / Livraison / Expédition / Retrait)
       trop étroits → titres tronqués. Repli en 1 colonne. */
    @media (max-width: 600px) {
        .alter-footer-item {
            width: 100%;
            max-width: 100%;
            flex: 0 0 100%;
            padding: 12px 4px;
        }
    }

    #alter-footer-container {
        width: 100%;
    }

    /* Liens footer : empilage vertical en mobile (corrige rendu inline régressé) */
    .footer-container .links ul,
    .links-block ul {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .alter-footer-item h3 {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .alter-footer-item p {
        font-size: 14px
    }

    .footer-container {
        padding: 32px 16px
    }

    .links-container i {
        color: var(--as-amaranth)
    }

    .footer-container .links .h3 {
        line-height: 1rem;
        font-weight: 400
    }

    .alter-footer-container {
        margin-top: 0
    }

    .alter-footer-container img {
        margin: 16px 32px
    }

    .logo-footer {
        width: 100px;
        max-width: 100%
    }

    #footer {
        padding-top: 0
    }

    #links-block-3 {
        text-align: center
    }

    .links .title {
        border: none;
        padding: 8px 0
    }

    .footer-container .links ul {
        background: none
    }

    .last-container-foooter-first-part {
        width: 100%
    }

    .footer-container .links ul > li a {
        color: var(--as-white);
        font-weight: 400
    }

    .footer-container .links ul > li {
        border: none;
        background: none;
        color: var(--as-white);
        padding: 8px 0
    }

    .footer-container .links {
        margin-bottom: 32px
    }

    /* Old mobile footer classes removed — now handled by alterfooterlinks module CSS */

    /* ============================================================
       Footer store-groups (altershops module) — collapse styling.
       Bootstrap pattern: aria-expanded is toggled on every click,
       whereas the .collapsed class only appears after the 2nd click.
       Driving the icon swap from aria-expanded keeps the behavior
       correct from the very first interaction.
       ============================================================ */
    .links-block .title.hidden-md-up {
        cursor: pointer;
        padding: 12px 0;
        border-bottom: 1px solid var(--as-grey-500);
    }

    .links-block .title.hidden-md-up .h3 {
        font-size: 16px;
        font-weight: 500;
        color: var(--as-white);
        margin: 0;
    }

    .links-block .title.hidden-md-up .navbar-toggler .material-icons {
        font-size: 24px;
        color: var(--as-amaranth);
        line-height: 1;
        vertical-align: middle;
    }

    .links-block .title[aria-expanded="true"] .material-icons.add {
        display: none;
    }

    .links-block .title[aria-expanded="true"] .material-icons.remove {
        display: inline-block;
    }

    .footer-container .links .links-block ul[id^="footer_sub_menu_altershops_"] > li {
        padding: 0;
    }

    .links-block ul[id^="footer_sub_menu_altershops_"] li a {
        display: block;
        padding: 12px 16px;
        font-size: 14px;
        line-height: 1.4;
        color: var(--as-white);
    }

    .links-block + .links-block {
        margin-top: 8px;
    }

}

/* -----------------------------------------------------------
   Lot 8b — FOOTER DESKTOP migration from custom.css
   - All footer base rules + 7 @media (min-width: 992px) wrappers
     (custom.css ex-l.308-440, ~131 l. including comments).
   - Pattern Lot 6g-2 cascade-fix preserved : desktop overrides
     wrapped in @media (min-width: 992px), mobile rules above.
   - Bootstrap .collapse.show fix scoped to footer kept verbatim.
   Pattern: D-009 (no nested comment delimiters in this header).
   ----------------------------------------------------------- */

#alter-footer {
    display: flex;
    max-width: 100%;
    margin: 0 auto;
}

@media (min-width: 992px) {
    #alter-footer {
        justify-content: space-between;
        align-items: center;
        padding: 32px 64px;
    }
}

@media (min-width: 992px) {
    .alter-footer-item {
        width: 252px;
        max-width: 25%
    }
}

.alter-footer-item h3 {
    font-weight: 500;
    line-height: 26px
}

@media (min-width: 992px) {
    .alter-footer-item h3 {
        margin: 16px 0;
        font-size: 20px
    }
}

.alter-footer-item p {
    color: var(--as-grey-500);
    line-height: 24px;
}

@media (min-width: 992px) {
    .alter-footer-item p {
        font-size: 16px
    }
}

.alter-footer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap
}

@media (min-width: 992px) {
    .alter-footer-container {
        margin: 32px 0 64px 0
    }
}

@media (min-width: 992px) {
    .alter-footer-container img {
        margin: 0 50px
    }
}

.footer-container {
    background: linear-gradient(180deg, var(--as-black) 0%, var(--as-grey-900) 100%);
}

@media (min-width: 992px) {
    .footer-container {
        padding: 64px
    }
}

.footer-container .h3, .footer-container .h4 {
    color: var(--as-amaranth);
    font-size: 14px;
}

.footer-container li a {
    color: var(--as-white);
    font-size: 14px;
    margin-top: 12px
}

.footer-container li a:is(:hover, :focus-visible) {
    color: var(--as-white);
    text-decoration-line: underline;
    text-decoration-color: var(--as-amaranth);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

@media (min-width: 992px) {
    .footer-container .links {
        margin-bottom: 50px
    }
    /* Note: les règles desktop .footer-ul-links 5-col vivent dans
       alter-footer-desktop-grid.css (cache bust CDN, ec3fa5ad+30b61dff). */
}

.links-block {
    min-width: 0;
}

@media (min-width: 992px) {
    .links-block {
        flex: 1 1 0%
    }
}

.links-container {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%
}

.logo-footer {
    margin-bottom: 50px
}

.footer-container .links-block-3 li a {
    font-weight: 700
}

.footer-container ul.collapse.show,
#footer_sub_menu_3.collapse.show {
    display: block;
}

/* ============================================================
   Sub-footer (réseaux sociaux) + last-container (légaux + disclaimer)
   Restauré 2026-05-04 : contenu retiré en 37d85dfd au profit d'un
   module alterfooterlinks jamais livré. Mobile : empilage vertical.
   ============================================================ */

.sub-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--as-grey-800, #2a2a2a);
}

.social-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.social-footer a {
    display: inline-flex;
    align-items: center;
}

.social-footer img {
    width: 60px;
    height: 60px;
    display: block;
}

/* Footer-ul-links — desktop 1-row grid (Main Links + Shops Links côte-à-côte) */
@media (min-width: 992px) {
    .footer-ul-links {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 64px;
        align-items: start;
    }
    .footer-ul-links > .links-block,
    .footer-ul-links > .links {
        flex: initial;
        width: auto;
    }
}

/* Typo Brockmann — Main Links column (catégories sous logo) */
@media (min-width: 992px) {
    .footer-container .links-block ul li a {
        font-family: 'Brockmann', sans-serif;
        font-weight: 600;
        font-size: 16px;
        line-height: 1.5;
        letter-spacing: -0.01em;
        color: var(--as-grey-100, #ededf3);
        margin-top: 0;
    }
    .footer-container .links-block ul {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    /* Headers colonne magasin (Paris/IDF/France/Belgique/Suisse) */
    .footer-container .links .h3,
    .footer-container .links-container h3 {
        font-family: 'Brockmann', sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: -0.01em;
        text-transform: uppercase;
        color: var(--as-amaranth);
        margin-bottom: 16px;
    }
    /* Items colonne magasin */
    .footer-container .links-container li a,
    .footer-container .links ul li a {
        font-family: 'Brockmann', sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: -0.01em;
        color: var(--as-grey-100, #ededf3);
    }
    .footer-container .links-container li,
    .footer-container .links ul li {
        margin: 0;
        padding: 3px 0;
    }
}

.last-container-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 2px solid var(--as-amaranth, #e62249);
}

.last-container-foooter-first-part {
    flex: 1 1 60%;
    min-width: 0;
}

.last-container-foooter-second-part {
    flex: 0 1 auto;
}

.copyright-container {
    font-family: 'Brockmann', sans-serif;
    font-weight: 500;
    color: var(--as-grey-100, #ededf3);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}

.menu-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.menu-bottom a {
    font-family: 'Brockmann', sans-serif;
    font-weight: 500;
    color: var(--as-grey-100, #ededf3);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.01em;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.menu-bottom a:hover,
.menu-bottom a:focus-visible {
    text-decoration-color: var(--as-amaranth);
}

.disclaimer-footer {
    display: flex;
    align-items: center;
    gap: 32px;
}

.disclaimer-footer p {
    margin: 0;
    font-family: 'Brockmann', sans-serif;
    font-weight: 500;
    color: var(--as-grey-100, #ededf3);
    font-size: 16px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-align: right;
}

.disclaimer-icons {
    display: flex;
    gap: 16px;
}

.disclaimer-icons img {
    width: 60px;
    height: 60px;
    display: block;
}

@media (max-width: 991.98px) {
    .sub-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .last-container-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .last-container-foooter-first-part,
    .last-container-foooter-second-part {
        flex: 1 1 100%;
        width: 100%;
    }

    .menu-bottom {
        flex-direction: column;
        gap: 8px;
    }

    .disclaimer-footer {
        justify-content: flex-start;
    }
}