/*
 * 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;
}

/* ================================================================
   GLOBAL SAFETY NET — apply at every viewport. Prevent long words
   (ES "fraccionamiento", FR "anticonstitutionnellement", etc.)
   from creating horizontal overflow on dynamic title containers.
   ================================================================ */
h1, h2, h3, h4, h5, h6,
.preview-description-title,
.lesson-title-item,
.hook-slogant,
.hook-slogant-lesson-page,
.hook-slogant-insection {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ================================================================
   LESSON-DETAILS VIDEO CLICK CAPTURE — touch scroll fix.
   The .video-click-capture is a transparent overlay (position:
   absolute, height: 84%) that catches tap-to-play on the Vimeo
   iframe. Without touch-action, the browser also routes vertical
   swipe gestures to the overlay (intercepted by JS) instead of
   scrolling the page. touch-action: pan-y lets the browser keep
   ownership of vertical scrolling while taps still reach JS.
   ================================================================ */
.video-click-capture {
    touch-action: pan-y !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;
        align-items: center !important;
        justify-content: center !important;
    }
    #count-cart-item:empty {
        display: none !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.cart-open,
    #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;
    }
    .cart-svg-img {
        width: 24px !important;
        height: 24px !important;
        margin-right: 8px !important;
    }
    .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;
    }
    /* Cart drawer footer — spécificité boostée avec #side-cart car cart.blade.php
       a font-size: 50px !important sur .checkout-button-cart a en inline (chargé
       après mobile-fix.css dans le body, donc gagne par source order à spec égale).
       Le prefix #side-cart porte la spec à 0,1,1,2 vs inline 0,0,1,2 → on gagne. */
    #side-cart .footer-side-cart,
    .footer-side-cart {
        height: 60px !important;
        width: 92% !important;
    }
    #side-cart .footer-side-cart div,
    .footer-side-cart div {
        font-size: 14px !important;
    }
    #side-cart .checkout-button-cart a,
    .checkout-button-cart a {
        font-size: 14px !important;
    }

    /* Toastify (CDN base : .toastify { font-size: 39px; padding: 58px 60px;
       min-height: 100px } sans !important dans app.css). On gagne facilement. */
    body .toastify {
        font-size: 14px !important;
        padding: 12px 16px !important;
        min-height: auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px auto !important;
        border-radius: 8px !important;
        line-height: 1.4 !important;
        box-shadow: 0 6px 20px rgba(10, 22, 40, 0.18) !important;
    }
    body .toastify .toast-close {
        font-size: 18px !important;
        padding: 0 !important;
        margin-left: 8px !important;
        opacity: 0.8 !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;
        /* Rod 23/05/2026 — Privacy tab "disparait" en FR/ES car "Confidentialité"
           (14 chars) et "Privacidad" + SVG ne tiennent pas dans 33.33% sur mobile
           narrow → overflow et tab tronqué/caché. Fix : flex équitable + text
           tronqué proprement avec ellipsis si vraiment trop long. */
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        padding: 0 4px !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        gap: 4px !important;
    }
    .settings-nav div svg {
        width: 18px !important;
        flex-shrink: 0 !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;
    }

    /* ============================================================
       LESSON-DETAILS + PACK-DETAILS — preview-description-title
       Override the inline <style> font-size: 40px / 54px and add
       word-break to handle long ES words like "fraccionamiento".
       ============================================================ */
    .preview-description-title,
    .video-details-preview .price {
        font-size: 22px !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        hyphens: auto !important;
    }
    .video-section {
        min-height: 0 !important;
        height: auto !important;
    }
    .video-details-preview {
        padding: 24px 16px !important;
        min-height: unset !important;
    }
    .video-details-preview p {
        font-size: 15px !important;
        line-height: 1.45 !important;
        margin-top: 16px !important;
        margin-bottom: 24px !important;
        min-height: unset !important;
    }
    .svg-pack svg {
        width: 32px !important;
        margin-right: 10px !important;
        flex-shrink: 0;
    }

    /* Lesson-link-list (pack-details + lesson-details related-lessons) */
    .lesson-link-list-container {
        margin-top: 16px !important;
    }
    .lesson-link-list {
        gap: 8px !important;
    }
    .lesson-link-list li {
        min-width: 100% !important;
    }
    .lesson-link-list li a {
        font-size: 14px !important;
        padding: 10px 12px !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* CTA buttons fluid (override inline width: 430px) */
    .right-footer-preview,
    .footer-details-preview {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .footer-details-preview div {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    .right-footer-preview button,
    .start-training-button {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        padding: 14px 18px !important;
        border-radius: 10px !important;
        justify-content: center !important;
    }
    .right-footer-preview button svg,
    .start-training-button svg {
        width: 20px !important;
        height: 20px !important;
        margin-right: 6px !important;
        flex-shrink: 0;
    }

    /* ============================================================
       LIST PAGES — .breadcrumb-item parent (mobile-fix already
       covers .breadcrumb-item a but not the parent's 30px).
       ============================================================ */
    .breadcrumb-item,
    .breadcrumb-item.active {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    /* ============================================================
       HOOK SLOGANT VARIANTS (mobile-fix already covers
       .hook-slogant-lesson-page, here we cover the other variants)
       ============================================================ */
    .hook-slogant,
    .hook-slogant-insection {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin: 0 16px !important;
        padding: 0 !important;
        word-break: break-word;
    }

    /* ============================================================
       MEGA AUDIT 20/05/2026 — bugs résiduels Rod
       ============================================================ */

    /* --- LISTING PAGES — tap-sticky iOS + h2 ghost --- */
    .lesson-item:hover,
    .lesson-item:focus,
    .lesson-item:active {
        transform: none !important;
    }
    .lesson-section h2,
    .recomanded-section h2 {
        font-size: 18px !important;
    }

    /* --- LESSON-DETAILS progress bar trop haute --- */
    .progress-bar-container {
        height: 8px !important;
    }

    /* --- PACKS PAGE — classes orphelines (héritage home.css desktop 4K) --- */
    .lesson-section .swiper-slide {
        height: 200px !important;
        width: 100% !important;
    }
    .title-cover-lesson {
        font-size: 18px !important;
        margin-top: 8px !important;
    }
    .category-cover-lesson,
    .pack-price-footer {
        font-size: 14px !important;
        padding: 4px 8px !important;
    }
    .footer-slide-swiper-2 {
        height: auto !important;
        padding: 12px 16px !important;
    }
    .price-pack {
        padding: 4px 8px !important;
    }
    .price-pack svg {
        width: 36px !important;
        height: 36px !important;
    }
    .svg-pack-play {
        width: 14px !important;
        height: 14px !important;
    }

    /* --- MY-PROFILE — 7 bugs restants --- */
    /* Bug 8 : carte Account text wrappe (Quentin\nIsrael) */
    .profile-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }
    .profile-row-value {
        max-width: 100% !important;
        text-align: left !important;
        word-break: break-word !important;
    }
    /* Bug 10 : Edit form 50px */
    #edit-content form .input input,
    #edit-content form .input select {
        height: 44px !important;
        font-size: 16px !important;
        padding: 0 14px !important;
    }
    #edit-content form .input label,
    #preferences-content form .input label {
        font-size: 13px !important;
    }
    #edit-content button[type="submit"],
    #preferences-content button[type="submit"] {
        font-size: 16px !important;
        padding: 12px 18px !important;
        height: auto !important;
        min-height: 44px !important;
    }
    /* Bug 11 : logout-btn */
    .logout-btn a {
        font-size: 15px !important;
        padding: 12px 18px !important;
    }
    /* Bug 15 : padding 90px partout dans les content panels */
    #edit-content,
    #preferences-content,
    #privacy-content,
    #general-content,
    #orders-content {
        padding: 16px !important;
    }
    /* Bug 16 : h3 50px */
    #edit-content h3,
    #preferences-content h3,
    #privacy-content h3 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }
    /* Bug 17 : level-preference cards 400px height */
    #preferences-content .level-preference {
        width: 100% !important;
        flex: 0 0 100% !important;
        height: auto !important;
        min-height: 180px !important;
        max-height: 220px !important;
    }
    .footer-level-preference {
        font-size: 14px !important;
        height: auto !important;
        min-height: 44px !important;
        padding: 8px 12px !important;
    }
    .check-level-preference {
        width: 36px !important;
        height: 36px !important;
        right: -8px !important;
        bottom: -8px !important;
    }
    /* Bug 19 : pencil edit photo profile mal placé */
    .custom-file-input {
        width: 36px !important;
        height: 36px !important;
        right: 50% !important;
        bottom: -18px !important;
        transform: translateX(50%) !important;
        margin-right: -55px !important;
    }
    .custom-file-input svg {
        width: 18px !important;
        height: 18px !important;
    }
    /* Bug 14 : tableau Orders 5 colonnes 25% débordent — passage en carte verticale */
    .order-header {
        display: none !important;
    }
    .order-items {
        flex-direction: column !important;
    }
    .order-line-header {
        flex-direction: column !important;
        gap: 6px !important;
        padding: 12px !important;
        border: 1px solid #E5E7EB;
        border-radius: 8px;
        margin-bottom: 8px;
    }
    .order-line-header > div {
        width: 100% !important;
        height: auto !important;
        font-size: 13px !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .order-line-header > div::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6B7280;
        font-size: 12px;
    }

    /* --- CHECKOUT PAGE — page entièrement non-patchée mobile --- */
    .section-checkout-process {
        margin-top: 20px !important;
    }
    .checkout-overview {
        width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }
    .checkout-overview form,
    form {
        width: 100% !important;
        margin: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .checkout-overview tr,
    .section-checkout-process tr {
        font-size: 13px !important;
    }
    .checkout-overview th,
    .checkout-overview td,
    .section-checkout-process th,
    .section-checkout-process td {
        padding: 8px 6px !important;
        font-size: 13px !important;
    }
    .total {
        font-size: 18px !important;
    }
    #currency-selector {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }
    #currency-selector label {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
    #currency {
        width: auto !important;
        font-size: 14px !important;
        margin-left: 8px !important;
        height: 36px !important;
        padding: 0 8px !important;
    }
    .group {
        font-size: 14px !important;
        padding: 12px !important;
        padding-bottom: 12px !important;
        padding-top: 12px !important;
        margin-top: 16px !important;
    }
    .group label {
        height: auto !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-top: 8px !important;
        margin-left: 0 !important;
        line-height: 1.3 !important;
        gap: 4px !important;
    }
    .group label > span {
        width: 100% !important;
        text-align: left !important;
        font-size: 13px !important;
        margin-right: 0 !important;
        font-weight: 600 !important;
    }
    .group input,
    .group .field,
    .group .InputElement,
    input,
    .field {
        font-size: 16px !important; /* 16px critique : empêche le zoom iOS */
        height: 44px !important;
        padding: 8px 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .section-checkout-process button[type="submit"],
    .checkout-overview button[type="submit"],
    button.btn-pay,
    #payment-form button {
        font-size: 16px !important;
        padding: 14px 18px !important;
        min-height: 44px !important;
        width: 100% !important;
    }

    /* --- THANK-YOU — message d'en-tête desktop-only inline --- */
    .thankyou-message {
        font-size: 24px !important;
        padding: 24px 16px 12px !important;
        text-align: center;
    }
    .thankyou-message p {
        font-size: 15px !important;
        margin-top: 8px !important;
        line-height: 1.5 !important;
        padding: 0 16px !important;
    }

    /* --- SUBSCRIPTION-SUCCESS + CANCEL-CONFIRM — padding/margin excessifs --- */
    .subscription-success-container,
    .cancel-success-container {
        padding: 36px 20px !important;
        margin: 32px 16px !important;
    }
}