/*
 * Mobile responsive fixes.
 * The original CSS is desktop-first with font-size 35-40px and padding 100px
 * everywhere. Before the <meta viewport> was added (12 mai 2026), mobile
 * browsers zoomed out the 980px viewport so it "looked OK".
 * Once viewport=device-width was set, defaults became 1:1 and broke the layout.
 * This file scales down typography, padding, and positioned elements below 1000px.
 */

/* ================================================================
   ALL VIEWPORTS — bottom-nav + marketing footer baseline
   The legacy app.css gives the bottom-nav 170px height / 35px font /
   80px svg / 33.33% width per child (4 children = overflow).
   These rules apply at every viewport so desktop is not catastrophic.
   ================================================================ */
footer.bottom-nav-footer {
    height: 64px !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    position: fixed !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    border-top: 1px solid #e5e5e5 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;
    z-index: 100 !important;
}
footer.bottom-nav-footer > div {
    width: 25% !important;
    max-width: 25% !important;
    min-width: 0 !important;
    flex: 0 0 25% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}
footer.bottom-nav-footer > div > a,
footer.bottom-nav-footer > div > span {
    font-size: 11px !important;
    text-align: center !important;
    line-height: 1.15 !important;
    gap: 2px !important;
    padding: 4px 4px !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
footer.bottom-nav-footer > div > a > img,
footer.bottom-nav-footer > div > a > svg,
footer.bottom-nav-footer > div > span > svg,
footer.bottom-nav-footer .link-footer > svg,
footer.bottom-nav-footer .link-footer > img {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    flex: 0 0 auto !important;
}
footer.bottom-nav-footer #image-profile-footer {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border-width: 2px !important;
}
footer.bottom-nav-footer .link-footer {
    padding: 0 4px !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
footer.bottom-nav-footer .link-footer p,
footer.bottom-nav-footer p {
    font-size: 11px !important;
    margin: 2px 0 0 !important;
    line-height: 1.15 !important;
    padding: 0 !important;
    text-align: center !important;
    max-width: 100% !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 500 !important;
}
/* The legacy active state painted whole div blue; keep it but constrain. */
footer.bottom-nav-footer .activeblock,
footer.bottom-nav-footer .activeblock a,
footer.bottom-nav-footer .activeblock a svg path {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
footer.bottom-nav-footer .activeblock {
    background-color: #0C8CE9 !important;
}
/* Reserve clearance for the fixed bottom-nav on its pages */
body main {
    padding-bottom: 64px;
}
body:has(footer.marketing-footer) main {
    padding-bottom: 0 !important;
}

/* Marketing footer — stack on every viewport, links visible, no overflow */
footer.marketing-footer {
    position: static !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 22px 24px !important;
    gap: 12px !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
footer.marketing-footer > div,
footer.marketing-footer .footer-left,
footer.marketing-footer .footer-right {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 18px !important;
    text-align: center !important;
    flex-direction: row !important;
}
footer.marketing-footer .footer-left { order: 2; font-size: 13px !important; }
footer.marketing-footer .footer-right { order: 1; font-size: 14px !important; }
footer.marketing-footer .footer-left > span {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-align: center !important;
}
footer.marketing-footer .footer-right a {
    font-size: 14px !important;
    padding: 4px 0 !important;
    white-space: nowrap !important;
}

@media (max-width: 999px) {

    /* ============================================================
       GLOBAL — kill any horizontal scroll from desktop-sized elements
       ============================================================ */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* ============================================================
       STICKY HEADER (mobile) — always visible, no auto-hide
       ============================================================ */
    header {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
        background-color: #ffffff !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    /* Kill the auto-hide behavior entirely (legacy CSS class) */
    body.header-hidden header {
        transform: none !important;
    }

    /* ============================================================
       HEADER (top bar: logo / search / cart / bell / lang)
       ============================================================ */
    header {
        padding: 8px 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px;
    }
    header > div:first-child {
        flex: 0 0 auto;
        max-width: 140px;
    }
    header > div:first-child a {
        display: flex;
        align-items: center;
    }
    #header-logo-left {
        top: 0 !important;
        left: 0 !important;
        width: auto !important;
        max-height: 36px !important;
        height: auto !important;
        position: static !important;
    }
    #header-logo-right {
        display: none !important; /* secondary text logo, redundant on mobile */
    }
    .sub-header {
        margin-top: 0 !important;
        flex: 1 1 auto;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 4px;
    }
    .sub-header > div {
        padding-right: 0 !important;
        width: auto !important;
        gap: 8px !important;
        align-items: center !important;
    }
    .social-logos.phone,
    .social-logos.desktop {
        display: none !important;
    }
    .sub-header-svg {
        gap: 8px !important;
        display: flex !important;
        align-items: center !important;
    }
    .sub-header-svg img {
        width: 24px !important;
        height: 24px !important;
        object-fit: contain;
    }
    .cart-icone-container {
        position: relative !important;
    }
    #count-cart-item {
        position: absolute !important;
        top: -6px !important;
        right: -6px !important;
        background-color: #0C8CE9 !important;
        color: white !important;
        border-radius: 50% !important;
        min-width: 16px !important;
        height: 16px !important;
        font-size: 10px !important;
        padding: 0 4px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .custom-select {
        position: relative !important;
        flex: 0 0 auto;
    }
    .selected-option {
        width: auto !important;
        height: 32px !important;
        font-size: 12px !important;
        padding: 4px 8px !important;
        background-color: #F2F2F2 !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    .lang-png {
        width: 18px !important;
        height: auto !important;
    }
    .lang-selector {
        font-size: 12px !important;
        width: auto !important;
        height: 32px !important;
        padding: 0 8px !important;
    }
    .custom-select ul.options {
        font-size: 13px !important;
        right: 0 !important;
        left: auto !important;
    }
    .custom-select ul.options li a {
        padding: 6px 10px !important;
    }
    .lang-png-select {
        width: 18px !important;
    }

    /* (Bottom-nav + marketing footer rules now live at the top of this
       file so they apply at all viewports, not just mobile.) */

    /* ============================================================
       LEVEL / MODULE / CHAPTER / FREE-LESSON CARDS
       Common .lesson-section + .lesson-item structure
       ============================================================ */
    .ariane-container {
        padding: 12px 16px !important;
    }
    .breadcrumb {
        display: flex !important;
        flex-wrap: wrap;
        gap: 4px;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .breadcrumb-item,
    .breadcrumb-item a {
        font-size: 14px !important;
    }
    .header-page {
        padding: 12px 16px !important;
    }
    .hook-slogant-lesson-page {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin: 0;
    }

    .lesson-section {
        padding: 0 16px 48px !important;
        flex-direction: column !important;
        gap: 18px !important;
        min-height: unset !important;
        display: flex !important;
    }
    .lesson-item {
        position: relative !important;
        flex-direction: row !important;
        height: auto !important;
        min-height: 130px !important;
        margin-top: 0 !important;
        width: 100% !important;
        overflow: visible !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    .link-item {
        min-height: 130px !important;
        height: auto !important;
        align-items: stretch !important;
    }
    .lesson-image-item {
        width: 35% !important;
        height: auto !important;
        min-height: 130px !important;
        border-bottom-left-radius: 20px !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 0 !important;
        background-position: center center !important;
    }
    .lesson-data-item {
        width: 65% !important;
        height: auto !important;
        padding: 12px 12px 28px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 6px;
    }
    .lesson-header-item {
        height: auto !important;
    }
    .lesson-title-item {
        font-size: 16px !important;
        font-weight: 600;
        line-height: 1.2 !important;
        display: block;
    }
    .lesson-description-item {
        font-size: 13px !important;
        margin-top: 6px !important;
        line-height: 1.35 !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .lesson-footer-item {
        height: auto !important;
        margin-top: 8px;
        gap: 6px;
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap;
    }
    .lessons-pts,
    .lessons-duration {
        font-size: 12px !important;
        padding: 4px 10px !important;
        border-radius: 10px !important;
        margin: 0 !important;
        line-height: 1.2;
    }

    /* Price tag + eye logo: anchor to card, no negative-bottom desktop trick */
    .lesson-footer-right {
        position: absolute !important;
        right: 8px !important;
        bottom: -14px !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        display: flex !important;
        gap: 8px;
        align-items: center;
        z-index: 3;
    }
    .price-add-to-cart {
        position: relative !important;
        height: 34px !important;
        padding: 0 12px 0 0 !important;
        margin: 0 !important;
        font-size: 14px !important;
        right: auto !important;
        bottom: auto !important;
        border-radius: 18px !important;
        display: flex !important;
        align-items: center !important;
    }
    .price-add-to-cart a {
        width: auto !important;
    }
    .price-add-to-cart > span:last-child {
        white-space: nowrap;
    }
    .cart-svg-container {
        width: 30px !important;
        height: 30px !important;
        left: 0 !important;
        bottom: 0 !important;
        padding: 6px 8px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .cart-svg-container svg {
        width: 16px;
        height: 16px;
    }
    .eye-wrapper {
        width: 38px !important;
    }
    .eye-logo-lesson {
        width: 38px !important;
        height: 38px !important;
        padding: 4px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    }
    .clap-lesson {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        padding: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center;
    }
    .clap-lesson img {
        width: 24px !important;
        height: auto;
    }

    /* ============================================================
       CART SIDE-PANEL (slide-in from right)
       ============================================================ */
    #side-cart {
        width: 92% !important;
        right: -92% !important;
        height: calc(100% - 68px) !important; /* match shrunk footer */
    }
    #side-cart.opened,
    #side-cart.open {
        right: 0 !important;
    }
    .header-side-cart {
        height: 60px !important;
        align-items: center;
    }
    .header-side-cart-title {
        font-size: 18px !important;
        font-weight: 600;
    }
    .close-side-cart {
        padding-right: 16px !important;
    }
    .close-side-cart svg {
        width: 28px !important;
        height: 28px !important;
    }
    .cart-item {
        height: auto !important;
        min-height: 80px !important;
        padding: 10px !important;
        gap: 6px;
        align-items: center;
    }
    .img-item {
        width: 22% !important;
    }
    .img-item img {
        width: 56px !important;
        height: 56px !important;
        border-radius: 50%;
        object-fit: cover;
    }
    .details-item {
        width: 42% !important;
        font-size: 13px !important;
        padding: 0 4px;
    }
    .subtitle-item {
        font-size: 11px !important;
    }
    .price-item {
        width: 22% !important;
        font-size: 14px !important;
    }
    .delete-item {
        width: 14% !important;
    }
    .svg-delete-cart-item {
        width: 22px !important;
        height: 22px !important;
    }
    .no-cart-item-text {
        font-size: 16px !important;
        margin: 24px 16px !important;
    }
    .footer-side-cart {
        height: 60px !important;
        width: 92% !important;
    }
    .footer-side-cart div {
        font-size: 14px !important;
    }
    .checkout-button-cart a {
        font-size: 14px !important;
    }
    #side-cart ul {
        padding: 12px !important;
    }
    .cb-svg {
        width: 18px !important;
        height: 18px !important;
        margin-right: 6px !important;
    }

    /* ============================================================
       MY-PROFILE (Mi Espacio) page
       ============================================================ */
    .top-header-profile {
        height: 110px !important;
    }
    .top-header-profile .left-side svg,
    .top-header-profile .right-side svg,
    .bottom-header-profile .bottom-header-profile-right-side svg {
        width: 32px !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        position: relative !important;
    }
    .top-header-profile .left-side span,
    .top-header-profile .right-side span {
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
    }
    .label-top-header-profile {
        font-size: 12px !important;
        text-align: center;
    }
    .nbr-top-header-profile {
        font-size: 24px !important;
    }
    .label-bottom-header-profile-right-side {
        font-size: 12px !important;
        right: 0 !important;
        top: 0 !important;
    }
    .bottom-header-profile {
        height: 90px !important;
    }
    .image-container {
        height: 0px !important;
    }
    #image-profile {
        width: 110px !important;
        left: 0 !important;
        border-radius: 60px !important;
    }
    .profile-nav {
        height: 50px !important;
    }
    .profile-nav div {
        font-size: 13px !important;
        gap: 4px;
        padding: 0 4px;
        text-align: center;
    }
    .profile-nav div svg {
        width: 18px !important;
        height: 18px !important;
    }
    .settings-nav div {
        font-size: 13px !important;
    }
    .settings-nav div svg {
        width: 18px !important;
    }
    .button-privacy {
        font-size: 14px !important;
        padding: 10px 18px !important;
        margin-top: 16px !important;
    }
    #profile-details,
    #profile-settings {
        min-height: unset !important;
    }
    /* Profile sub-sections "intraining / completed / recommanded / notstarted" */
    .intraining-section h2 {
        font-size: 18px !important;
        margin: 16px 12px 8px !important;
    }
    .intraining-section.completed,
    .intraining-section.recommanded,
    .intraining-section.notstarted {
        margin-top: 12px !important;
    }
}