/*
 * German site-level layout overrides.
 *
 * The English root.css keeps the standard site container compact. German
 * labels and contact text are longer, so German pages need a slightly wider
 * centered container on large screens. Keep these rules scoped to html[lang="fr"]
 * so the shared English layout and shared assets stay unchanged.
 */
html[lang="fr"] {
    --de-container-xl: 1320px;
    --de-container-xxl: 1440px;
    --de-container-wide: 1560px;
}

/*
 * Rebuild the German container ladder after the shared CSS files have loaded.
 * The widths follow the same idea as public/assets/css/root.css, but add a
 * German-only large-desktop step for longer navigation and footer copy.
 */
html[lang="fr"] .container,
html[lang="fr"] .container-sm,
html[lang="fr"] .container-md,
html[lang="fr"] .container-lg,
html[lang="fr"] .container-xl,
html[lang="fr"] .container-xxl,
html[lang="fr"] .container-xxxl,
html[lang="fr"] .container-xxxxl {
    width: 100%;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    html[lang="fr"] .container,
    html[lang="fr"] .container-sm {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    html[lang="fr"] .container,
    html[lang="fr"] .container-md,
    html[lang="fr"] .container-sm {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    html[lang="fr"] .container,
    html[lang="fr"] .container-lg,
    html[lang="fr"] .container-md,
    html[lang="fr"] .container-sm {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    html[lang="fr"] .container,
    html[lang="fr"] .container-lg,
    html[lang="fr"] .container-md,
    html[lang="fr"] .container-sm,
    html[lang="fr"] .container-xl {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    html[lang="fr"] .container,
    html[lang="fr"] .container-lg,
    html[lang="fr"] .container-md,
    html[lang="fr"] .container-sm,
    html[lang="fr"] .container-xl,
    html[lang="fr"] .container-xxl {
        max-width: var(--de-container-xl);
    }
}

@media (min-width: 1600px) {
    html[lang="fr"] .container,
    html[lang="fr"] .container-lg,
    html[lang="fr"] .container-md,
    html[lang="fr"] .container-sm,
    html[lang="fr"] .container-xl,
    html[lang="fr"] .container-xxl,
    html[lang="fr"] .container-xxxl {
        max-width: var(--de-container-xxl);
    }
}

@media (min-width: 1900px) {
    html[lang="fr"] .container,
    html[lang="fr"] .container-lg,
    html[lang="fr"] .container-md,
    html[lang="fr"] .container-sm,
    html[lang="fr"] .container-xl,
    html[lang="fr"] .container-xxl,
    html[lang="fr"] .container-xxxl,
    html[lang="fr"] .container-xxxxl {
        max-width: var(--de-container-wide);
    }
}

/*
 * German footer layout.
 *
 * The footer keeps the dark background full width, but all real content stays
 * inside the German container above. The grid replaces the English
 * 3/2/2/2/3 Bootstrap distribution because German labels need more balanced
 * column widths.
 */
html[lang="fr"] .footer-area .footer-top {
    padding-top: var(--space-3xl);
    background-color: var(--footer-bg);
}

@media (min-width: 1200px) {
    html[lang="fr"] .footer-area .footer-top .row {
        display: grid;
        grid-template-columns:
            minmax(0, 1.05fr)
            minmax(0, 1fr)
            minmax(0, 0.82fr)
            minmax(0, 0.78fr)
            minmax(0, 1.25fr);
        row-gap: var(--space-2xl);
        column-gap: var(--space-xl);
        align-items: start;
        max-width: 100%;
        min-width: 0;
    }

    html[lang="fr"] .footer-area .footer-top .row > [class*="col-"] {
        width: auto;
        max-width: none;
        min-width: 0;
        padding-top: 0 !important;
    }
}

html[lang="fr"] .footer-area .widget-item {
    min-width: 0;
}

html[lang="fr"] .footer-area .footer-logo {
    padding-bottom: var(--space-xl);
}

html[lang="fr"] .footer-area .footer-logo img {
    max-width: 180px;
    height: auto;
}

html[lang="fr"] .footer-area .short-desc {
    max-width: 360px;
    color: var(--footer-link);
    font-size: var(--font-size-base);
    line-height: 1.75;
}

html[lang="fr"] .footer-area .widget-title {
    margin-bottom: var(--space-xl) !important;
    color: var(--text-white);
    font-size: var(--font-size-xl);
    line-height: 1.25;
}

/*
 * Align the chevron and text in each link. This keeps wrapped German labels
 * visually attached to their own icon instead of drifting under the previous
 * column.
 */
html[lang="fr"] .footer-area .widget-list-item li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: var(--space-sm);
    align-items: start;
    padding-bottom: var(--space-md);
}

html[lang="fr"] .footer-area .widget-list-item li i {
    margin-top: 0.35em;
    color: var(--primary-color);
    font-size: var(--font-size-sm);
    line-height: 1;
}

html[lang="fr"] .footer-area .widget-list-item li a {
    color: var(--footer-link);
    font-size: var(--font-size-base);
    line-height: 1.45;
    overflow-wrap: anywhere;
    hyphens: auto;
}

html[lang="fr"] .footer-area .widget-list-item li a:hover {
    color: var(--footer-link-hover);
}

/*
 * Contact information is the widest footer content. Keep the icon in the
 * first grid cell and all copy in the second grid cell.
 */
html[lang="fr"] .footer-area .widget-contact-info ul li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: var(--space-sm);
    align-items: start;
    padding-bottom: var(--space-md);
    color: var(--footer-link);
    font-size: var(--font-size-base);
    line-height: 1.55;
    overflow-wrap: anywhere;
}

html[lang="fr"] .footer-area .widget-contact-info ul li i {
    margin-top: 0.2em;
    color: var(--footer-link);
    font-size: var(--font-size-xl);
    line-height: 1;
}

html[lang="fr"] .footer-area .widget-contact-info .contact-text {
    min-width: 0;
}

html[lang="fr"] .footer-area .widget-contact-info .contact-line {
    display: block;
}

html[lang="fr"] .footer-area .widget-contact-info a {
    color: var(--footer-link);
    overflow-wrap: anywhere;
}

html[lang="fr"] .footer-area .widget-contact-info a:hover {
    color: var(--footer-link-hover);
}

html[lang="fr"] .footer-area .footer-bottom {
    background-color: var(--nav-bg);
}

html[lang="fr"] .footer-area .copyright-text {
    margin-bottom: 0;
    color: var(--footer-text);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    text-align: center;
}

html[lang="fr"] .footer-area .copyright-text a {
    color: var(--footer-text);
}

html[lang="fr"] .footer-area .copyright-text a:hover {
    color: var(--footer-link-hover);
}

/*
 * Tablets cannot hold five footer columns cleanly. Use a balanced two-column
 * grid while keeping the brand and contact blocks full width.
 */
@media (min-width: 768px) and (max-width: 1199.98px) {
    html[lang="fr"] .footer-area .footer-top .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-2xl) var(--space-xl);
    }

    html[lang="fr"] .footer-area .footer-top .row > [class*="col-"] {
        width: auto;
        max-width: none;
        padding-top: 0 !important;
    }

    html[lang="fr"] .footer-area .footer-top .row > [class*="col-"]:first-child,
    html[lang="fr"] .footer-area .footer-top .row > [class*="col-"]:last-child {
        grid-column: span 2;
    }

    html[lang="fr"] .footer-area .short-desc {
        max-width: 620px;
    }
}

@media (max-width: 767.98px) {
    html[lang="fr"] .footer-area .footer-top {
        padding-top: var(--space-2xl);
    }

    html[lang="fr"] .footer-area .footer-top .row {
        row-gap: var(--space-xl);
    }

    html[lang="fr"] .footer-area .footer-logo {
        text-align: left;
    }

    html[lang="fr"] .footer-area .widget-title {
        margin-bottom: var(--space-md) !important;
    }

    html[lang="fr"] .footer-area .short-desc,
    html[lang="fr"] .footer-area .widget-list-item li a,
    html[lang="fr"] .footer-area .widget-contact-info ul li {
        font-size: var(--font-size-sm);
    }
}