/* ==========================================================================
   public_fr.css — French site style adjustments
   Loaded after public.css. Adjusts layout for longer French text while
   maintaining the same visual style as the English site (mjdfit.com).
   Key fixes: nav spacing, dropdown auto-width, footer no-wrap, button
   overflow prevention, responsive adaptations at all breakpoints.
   ========================================================================== */

/* ===== 1. Navigation (desktop, >= 992px) ===== */

/* French nav words are significantly longer than English
   (e.g. "Personnalisation" vs "Customization",
         "À propos de nous" vs "About Us",
         "Contactez-nous" vs "Contact Us")
   Reduce right margin and font-size to prevent overflow / wrapping. */
.nav_right > div {
    margin-right: 50px;
    font-size: 16px;
}

/* 7th item = "Contactez-nous" — extra margin separates it from
   search & lang buttons (original: 141px, reduced for French). */
.nav_right > div:nth-child(7) {
    margin-right: 95px;
}

/* Dropdown: auto-size to fit long French item names on a single line.
   Longest item: "Correcteur de colonne vertébrale" (32 chars ~ 310px).
   Original min-width 252px is too narrow; switch to max-content. */
.tootip2 {
    min-width: auto;
    width: max-content;
    max-width: 380px;
}

/* Reinforce single-line display for dropdown items */
.tootip2_item {
    white-space: nowrap;
}

/* ===== 2. Header top bar ===== */

/* "MJD s'engage profondément dans le domaine du Pilates" is longer
   than the English tagline. Allow graceful truncation on narrow screens. */
.header_tops_con_left {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ===== 3. Footer (desktop, >= 992px) ===== */

/* Adjust grid column ratios — first three columns (link lists) can be
   slightly narrower; contact-info and form columns get proportionally
   more space for longer French address text. */
.footer_bottom {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 0.82fr) minmax(0, 0.82fr) minmax(0, 1.2fr) minmax(0, 1.1fr);
    gap: 20px;
}

/* Increase max-width so the address column has enough room
   (original 287px was too tight for the long French address). */
.footer_bottom_item {
    max-width: 340px;
}

/* Footer section titles — never wrap
   ("À propos de nous", "Contactez-nous", etc.) */
.footer_bottom_item_tit {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Long French address text — allow proper word wrapping */
.footer_bottom_item_addressItems {
    word-break: break-word;
    white-space: normal;
}

/* Submit button — auto-width for "Envoyer" (original fixed 100px
   could clip text at smaller font sizes). */
.footer_bottom_item_btn {
    width: auto;
    min-width: 110px;
    padding: 11px 24px;
}

/* ===== 4. Buttons & CTAs ===== */

/* Product card "Learn More" / "En savoir plus" button —
   doesn't use .btn class, so add nowrap explicitly. */
.productsBanner_list_item_info_btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure all .btn elements never wrap (reinforcement) */
.btn {
    white-space: nowrap;
}

/* ===== 5. Product list sidebar (desktop) ===== */

/* French category names can be long — allow word breaking */
.p_l_item,
.p_l_item2 {
    word-break: break-word;
}

/* ===== 6. Responsive — max-width 1700px ===== */

@media (max-width: 1700px) {
    .nav_right > div {
        margin-right: 36px;
    }

    .nav_right > div:nth-child(7) {
        margin-right: 70px;
    }
}

/* ===== 7. Responsive — max-width 1400px ===== */

@media (max-width: 1400px) {
    .nav_right > div {
        margin-right: 26px;
        font-size: 15px;
    }

    .nav_right > div:nth-child(7) {
        margin-right: 48px;
    }

    .header_tops_con_left {
        font-size: 13px;
    }

    .footer_bottom {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.15fr) minmax(0, 1.05fr);
        gap: 14px;
    }

    .footer_bottom_item {
        max-width: 300px;
    }

    .footer_bottom_item_tit {
        font-size: 17px;
    }

    .tootip2 {
        max-width: 350px;
    }

    .tootip2_item {
        font-size: 15px;
    }
}

/* ===== 8. Responsive — max-width 1200px ===== */

@media (max-width: 1200px) {
    .nav_right > div {
        margin-right: 16px;
        font-size: 14px;
    }

    .nav_right > div:nth-child(7) {
        margin-right: 28px;
    }

    .header_tops_con_left {
        font-size: 12px;
    }

    .footer_bottom {
        grid-template-columns: minmax(0, 0.78fr) minmax(0, 0.78fr) minmax(0, 0.78fr) minmax(0, 1.08fr) minmax(0, 1fr);
        gap: 10px;
    }

    .footer_bottom_item {
        max-width: 280px;
    }

    .footer_bottom_item_tit {
        font-size: 16px;
        margin-bottom: 14px;
    }

    .tootip2 {
        max-width: 320px;
    }

    .tootip2_item {
        font-size: 14px;
    }

    /* Product card button — allow text to shrink on narrow cards */
    .productsBanner_list_item_info_btn {
        font-size: 13px;
        padding: 6px 14px;
    }
}

/* ===== 9. Mobile — max-width 991px ===== */

@media (max-width: 991px) {
    /* Reset header top bar — allow wrapping on mobile */
    .header_tops_con_left {
        max-width: 100%;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Mobile nav: long French items may need to wrap */
    .mobile_nav_item {
        font-size: 14px;
        word-break: break-word;
        white-space: normal;
    }

    .mobile_nav_subitem {
        font-size: 13px;
        word-break: break-word;
        white-space: normal;
    }

    .mobile_nav_subitem2 {
        font-size: 12px;
        word-break: break-word;
    }

    /* Mobile nav width — slightly wider to fit French text */
    .mobile_nav {
        width: min(86vw, 340px);
    }

    .footer_bottom_item_tit {
        font-size: 16px;
    }

    /* Reset footer item max-width on mobile (full-width accordion) */
    .footer_bottom_item {
        max-width: unset;
    }
}

/* ===== 10. Mobile — max-width 575px ===== */

@media (max-width: 575px) {
    /* Submit button full-width on small screens */
    .footer_bottom_item_btn {
        width: 100%;
    }

    .mobile_nav_item {
        font-size: 13px;
    }

    .mobile_nav_subitem {
        font-size: 12px;
    }

    .mobile_nav {
        width: 100%;
    }

    /* Product card button — full width, centered */
    .productsBanner_list_item_info_btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        font-size: 13px;
    }

    /* Btn font-size adjustment for small screens */
    .btn {
        padding: 6px 22px;
        font-size: 13px;
    }
}

/* ===== 11. Mobile — max-width 359px ===== */

@media (max-width: 359px) {
    .mobile_nav_item {
        font-size: 12px;
        padding: 10px 12px;
    }

    .mobile_nav_subitem {
        font-size: 11px;
        padding: 8px 12px 8px 26px;
    }

    .btn {
        padding: 5px 18px;
        font-size: 12px;
    }
}