/* Uses your existing BDA-conform CSS. If you already have /assets/css/main.css deployed, you can keep it.
   Included here as a minimal header/footer alignment assurance only. */
    :root {
        --header-h: 5.0em;
        --footer-h: 0.0em;
        --brand: #0d6efd;
        --brand-2: #0d6efd;
    }

    html,
    body {
        height: 100%;
        overflow-x: hidden
    }

    body {
        padding-top: calc(var(--header-h));
        /* padding-bottom: calc(var(--footer-h) + 1.25rem); */
        margin: 0;
        background: #fff
    }

    #header-band {
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--header-h);
        background: url("/assets/img/band.jpg") center/cover no-repeat;
        color: #fff;
        text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10000
    }

    #header-band .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        margin: 0
    }

    .header-badges {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: .35rem .9rem;
        text-align: center;
        font-weight: 700;
        font-size: 1.05rem;
        line-height: 1.25;
        width: 100%;
        margin: 0
    }

    .header-badges .badge-item {
        flex: 1 1 320px;
        min-width: 260px;
        white-space: normal;
        overflow-wrap: anywhere;
        margin: 0
    }

    .section {
        margin-bottom: 2rem
    }

    .section-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        margin-bottom: .5rem
    }

    .section-title h2 {
        margin: 0;
        color: var(--brand-2);
        font-weight: 700
    }

    .section-rule {
        height: 2px;
        opacity: .35;
        background-color: currentColor;
        border: 0
    }

    .section-body {
        margin-left: clamp(.75rem, 2vw, 2rem)
    }

    .section-body.with-rail {
        border-left: 2px solid rgba(13, 110, 253, .25);
        padding-left: clamp(.75rem, 1.5vw, 1.25rem);
        margin-left: clamp(.5rem, 1.5vw, 1.25rem)
    }

    .pdf-icon {
        max-width: 28px;
        height: auto
    }

    .doc-thumb {
        max-width: 64px;
        height: auto;
        border-radius: 6px
    }

    table.table th,
    table.table td {
        vertical-align: middle
    }

    section[aria-labelledby="eval-title"] table.table th,
    section[aria-labelledby="eval-title"] table.table td {
        color: var(--brand-2);
        vertical-align: top;
        padding-top: .35rem
    }

    #footer-band {
        /* position: fixed; */
        bottom: 0;
        left: 0;
        width: 100%;
        min-height: var(--footer-h);
        /* background: url("/assets/img/band.jpg") center/cover no-repeat; */
        color: #fff;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        border-top: 1px solid rgba(255, 255, 255, .25);
        z-index: 10000;
        margin-top: 0
    }

    #footer-band .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        margin: 0
    }

    #footer-band p {
        margin: 0
    }

    .ds-logo {
        border-radius: 12px;
        max-width: 100%;
        height: auto
    }

    .ds-text-justify {
        text-align: justify
    }

    .ds-th {
        width: 33%
    }

    .ds-th-25 {
        width: 25%
    }

    .blanc-casse {
        color: rgb(175, 185, 197)
    }

    #intro-title {
        color: var(--brand)
    }

    @media (min-width: 992px) {
        :root {
            --header-h: 4em
        }
    }

    @media (max-width: 575.98px) {
        #header-band {
            position: sticky;
            top: 0;
            height: var(--header-h);
            min-height: var(--header-h);
            padding: 0;
            margin-top: 0
        }

        body {
            padding-top: 0 !important
        }

        .doc-thumb {
            width: 36px;
            max-width: 36px;
            height: 36px;
            object-fit: cover;
            border-radius: 6px
        }

        .pdf-icon {
            width: 20px;
            max-width: 20px;
            height: auto
        }

        section[aria-labelledby="ressources-title"] .row>.col-2 {
            flex: 0 0 auto;
            width: auto
        }

        table.table th,
        table.table td {
            padding: .35rem .4rem;
            font-size: .925rem
        }

        .section-body,
        .section-body.with-rail {
            margin-left: .75rem;
            padding-left: .75rem;
            border-left-width: 2px
        }

        section[aria-labelledby="eval-title"] .table-responsive {
            width: 100%;
            margin: 0;
            padding: 0 .25rem
        }
    }

    @media (max-width: 992px) {
        .header-badges .badge-item {
            flex: 1 1 420px;
            min-width: 280px;
            margin: 0
        }
    }

    main,
    .section:first-of-type,
    .container:first-of-type {
        margin-top: 1rem
    }

    #footer-textual {
        margin-top: 0 !important;
        border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, .1))
    }

    #footer-textual .container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--footer-h);
        padding: 0;
        text-align: center
    }

    #footer-textual .footer-oneline,
    #footer-textual .d-md-none {
        line-height: 1.4
    }

    @media (min-width: 992px) {
        #header-band {
            height: 4.0em !important;
        }
    }



    /* Course cards */
    .course-article {
        border-left: 4px solid #0d8bd1;
        border-top: none;
        border-right: none;
        border-bottom: none;
        background: var(--bs-body-bg, #fff);
        border-radius: .75rem;
        padding: 1rem 1rem .75rem;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    }


    .course-article .course-title {
        margin: 0 0 .25rem 0;
        font-weight: 700;
        line-height: 1.25;
    }

    .course-article .course-summary {
        margin: 0 0 .75rem 0;
        color: var(--bs-secondary-color, #6c757d);
        font-size: .95rem;
    }

    .course-article ul.compact-list {
        margin: 0 0 .75rem 1.1rem;
    }

    .course-article ul.compact-list li {
        margin: .15rem 0;
    }