/* ==========================================================================
   Local overrides for checklists.opquast.com
   Loaded AFTER the opquast-v2 CDN stylesheets in base_front.html, so selectors
   with equal specificity still win by cascade order. Rules here were
   originally in checklists/static/opquast-theme/css/style.css, which Phase 1
   stopped linking when the v2 CDN replaced the local theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumb <ol> wrapper reset. __base_cl.html now wraps <li> items in
   <ol class="c-breadcrumb__list"> to satisfy HTML5 (element `li` not allowed
   as direct child of `nav`).

   The parent <nav class="c-breadcrumb"> uses `display: flex` (from CDN).
   Before the <ol> wrap, <li> were direct flex children — flex ignores
   inter-element whitespace, so items packed gap-free. After wrapping, the
   <ol> is the sole flex item and the <li> inside it would fall back to
   inline-block layout with ~3.6px whitespace gaps per item (breaking the
   ±1px visual-parity target).

   Fix: make the <ol> itself a flex container. <li> become direct flex
   children again (gap-free). `flex-wrap: wrap` covers the narrow-viewport
   case where the CDN switches items to display:block (≤49.99em). All other
   <ol> browser defaults (list-style, padding, margin) are neutralised so
   the wrapper is visually transparent.

   Scoped via descendant selector so it never touches other <ol> on the site.
   -------------------------------------------------------------------------- */
.c-breadcrumb > .c-breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   nav-top__links <ul> wrapper. Same HTML5 validity fix as the breadcrumb:
   the CDN template previously emitted <li> as direct children of <nav>,
   which Nu HTML Checker rejects. Wrapping in <ul> satisfies HTML5, and
   `display: contents` makes the <ul> transparent to the parent nav's
   flex layout so the <li> remain effective flex children (CDN rules
   `.nav-top__links li` use descendant combinators so they keep matching).
   Browser support: Chrome/Edge/Firefox/Safari 13+ — fine for our audience.
   -------------------------------------------------------------------------- */
.nav-top__links > .nav-top__links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: contents;
}

/* --------------------------------------------------------------------------
   Sticky certification CTA on criterion pages (#opq-sticky-sidebar).
   Mirrors the pre-v2 production appearance: hidden <hr>, compact headings,
   dark-navy pill button. The `criterion_promo` HTML is an opaque blob served
   by the SSO platform, so we restyle it from the outside.
   -------------------------------------------------------------------------- */
@media (min-width: 50em) {
    .c-opposite-toc-right {
        display: flex;
        align-items: flex-start;
        flex-direction: row-reverse;
        padding-bottom: 3rem;
    }

    #opq-sticky-sidebar {
        position: sticky;
        top: 24px;
        flex-shrink: 0;
        width: 320px;
        max-width: 320px;
        background: #FFFFFF;
        border: 1.5px solid #E1E1E1;
        border-radius: 12px;
        overflow: hidden;
        padding: 0;
        margin-top: 1rem;
    }

    .c-opposite-toc-right .c-opposite-toc__content {
        width: 72.95374%;
    }
}

@media (min-width: 72.5em) {
    #opq-sticky-sidebar {
        margin-left: 4.16667rem;
        margin-right: 0;
    }

    .c-opposite-toc-right .c-opposite-toc__content {
        width: 69.03915%;
    }
}

@media (max-width: 49.99em) {
    .c-opposite-toc-right {
        margin-bottom: 2rem;
    }

    #opq-sticky-sidebar {
        background: #F0F4F8;
        border: 1.5px solid #E1E1E1;
        border-radius: 12px;
        padding: 0;
        margin-bottom: 2rem;
        overflow: hidden;
    }
}

#opq-sticky-sidebar hr {
    display: none;
}

#opq-sticky-sidebar h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #112f42;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

#opq-sticky-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #374151;
}

#opq-sticky-sidebar li {
    padding: 4px 0;
    border-bottom: 1px solid #F0F4F8;
}

#opq-sticky-sidebar li:last-child {
    border-bottom: none;
}

#opq-sticky-sidebar .c-btn,
#opq-sticky-sidebar .l-btn {
    display: block;
    padding: 12px 16px;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    text-decoration: none;
    background-color: #112f42;
    border: 2px solid #D25148;
    border-radius: 50px;
    box-sizing: border-box;
    line-height: 1.3;
}

#opq-sticky-sidebar .c-btn:hover,
#opq-sticky-sidebar .l-btn:hover {
    background-color: #D25148;
}

/* --------------------------------------------------------------------------
   Criterion content spacing. The CDN `opquast-rules.css` gives `.c-rule-content`
   a top margin (--opq-spacing-lg ≈ 32px), designed for pages where the
   content follows a grid gap. On our criterion pages it stacks with the
   hero's own margin-bottom, leaving a ~72px gap before "Objectif". Scope the
   override to the criterion toc wrapper so other pages using `.c-rule-content`
   (if any appear later) keep the CDN default.
   -------------------------------------------------------------------------- */
.c-opposite-toc-right .c-rule-content {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Premium content marker (Avis de l'expert). Visible for staff/superadmin
   and certified users.
   -------------------------------------------------------------------------- */
.c-rule-premium {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    border: 1.5px solid #E1E1E1;
    border-left: 4px solid #D25148;
    border-radius: 8px;
    background: #FCFBF7;
}

.c-rule-premium__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #FFFFFF;
    background: #D25148;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.c-rule-premium__badge-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.c-rule-premium__title {
    margin-top: 0.75rem;
}

.connexion h1 {
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
}

@media (max-width: 768px) {

    table#rules-container tbody tr.c-rules-table__row {
        border-radius: 12px !important;
        background: var(--opq-navy, #112f42) !important;
        padding: 15px;
    }

    table#rules-container tbody tr.c-rules-table__row:nth-child(even) {
        background: var(--opq-navy-light, #254356) !important;
    }

    table#rules-container tbody tr.c-rules-table__row .c-rules-table__cell {
        background-color: transparent !important;
    }

    table#rules-container tbody,
    table#rules-container tbody tr,
    table#rules-container tbody td,
    table#rules-container tbody th,
    table#rules-container tbody thead,
    tbody {
        display: block !important;
    }

    table#rules-container tbody td {
        width: 100% !important;
    }

    table#rules-container tbody td.c-rules-table__cell.c-rules-table__cell--numero {
        display: inline-block !important;
        width: auto !important;
    }

    table#rules-container tbody a.c-rules-table__link {
        display: inline-block;
        width: auto;
    }

    table#rules-container tbody tr:first-child td:first-of-type,
    tr:first-child th:first-of-type {
        border-top: none;
    }

    .c-rules-toolbar__count {
        white-space: normal !important;
        flex-shrink: 1 !important;
    }

    .c-rules-toolbar__toggle.js-rules-filters-toggle {
        flex-shrink: 1 !important;
    }
}

/* --------------------------------------------------------------------------
   Filter-toggle button now wraps the rules count (cl_detail.html). The CDN
   styles `.c-rules-toolbar__toggle` for an icon-only chevron; we extend the
   click target to cover the "245 règles affichées" label too. Keeping native
   <button> semantics preserves aria-expanded/-controls; the chevron stays
   aria-hidden and the visible text becomes the accessible name.
   -------------------------------------------------------------------------- */
.c-rules-toolbar__toggle.js-rules-filters-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 0.25rem 0.5rem !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: inherit !important;
    font: inherit !important;
    cursor: pointer !important;
    overflow: visible !important;
}

/* The icon-only override resets border/background, so re-assert a visible
   keyboard-focus ring (the UA default outline can be swallowed by the reset). */
.c-rules-toolbar__toggle.js-rules-filters-toggle:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}

.c-rules-toolbar__toggle.js-rules-filters-toggle > .c-rules-toolbar__count {
    display: inline !important;
}

.c-rules-toolbar__toggle.js-rules-filters-toggle[aria-expanded="true"] .c-rules-toolbar__icon {
    transform: rotate(180deg);
}

.c-rules-toolbar__toggle.js-rules-filters-toggle .c-rules-toolbar__icon {
    transition: transform 0.15s ease-in-out;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .c-rules-toolbar__toggle.js-rules-filters-toggle .c-rules-toolbar__icon {
        transition: none;
    }
}

/* ==========================================================================
   Dark-mode contrast fixes for cl_detail.html.
   Scoped via [data-theme="dark"] set on <html> by the opquast-v2 bootstrap.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumb: links and current-page span render in muted teal on dark navy,
   below WCAG AA. Force pure white text (and white separators if any).
   -------------------------------------------------------------------------- */
[data-theme="dark"] .c-breadcrumb,
[data-theme="dark"] .c-breadcrumb__link,
[data-theme="dark"] .c-breadcrumb__item,
[data-theme="dark"] .c-breadcrumb__item[aria-current="page"] > span {
    color: #ffffff !important;
}

[data-theme="dark"] .c-breadcrumb__link:hover,
[data-theme="dark"] .c-breadcrumb__link:focus {
    color: #ffffff !important;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Rules toolbar labels — "Chercher / filtrer", the "245 règles affichées"
   count inside the toggle button, and any filter panel legends. Force white
   text in dark mode for legibility on the navy background.
   -------------------------------------------------------------------------- */
[data-theme="dark"] .c-rules-toolbar__label,
[data-theme="dark"] .c-rules-toolbar__count,
[data-theme="dark"] .c-rules-toolbar__toggle.js-rules-filters-toggle,
[data-theme="dark"] .c-rules-filters__legend,
[data-theme="dark"] .c-rules-filters__checkbox > span {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Rule "cards" (table rows). Per design decision: keep the light-mode look
   in dark mode — dark navy card with white text and pale blue tags. The CDN
   dark-mode CSS lightens both the card background and the text; we force
   the light-mode colors back so the cards keep their hi-contrast appearance.
   -------------------------------------------------------------------------- */
[data-theme="dark"] table#rules-container tbody tr.c-rules-table__row,
[data-theme="dark"] table#rules-container tbody tr.c-rules-table__row > td.c-rules-table__cell,
[data-theme="dark"] table#rules-container tbody tr.c-rules-table__empty,
[data-theme="dark"] table#rules-container tbody tr.c-rules-table__empty > td {
    background-color: #112f42 !important;
    color: #ffffff !important;
}

[data-theme="dark"] table#rules-container tbody tr.c-rules-table__row:nth-child(even),
[data-theme="dark"] table#rules-container tbody tr.c-rules-table__row:nth-child(even) > td.c-rules-table__cell {
    background-color: #1a3a52 !important;
}

[data-theme="dark"] table#rules-container tbody tr.c-rules-table__row .c-rules-table__link {
    color: #ffffff !important;
}

[data-theme="dark"] table#rules-container tbody tr.c-rules-table__row td.c-rules-table__cell--tags {
    /* #C7D6E6 clears WCAG AA (>= 4.5:1) on BOTH row backgrounds (#112f42 and
       the striped even-row #1a3a52); the previous #B4C8DC dropped to ~4.3:1
       on the lighter even rows. */
    color: #C7D6E6 !important;
}

[data-theme="dark"] table#rules-container tbody tr.c-rules-table__row .c-rules-table__link:hover,
[data-theme="dark"] table#rules-container tbody tr.c-rules-table__row .c-rules-table__link:focus {
    color: #F0A99C !important;
}

/* --------------------------------------------------------------------------
   "Whole card clickable" — extend the click target to the entire row using
   the stretched-link pattern. The rubrique link's ::before is absolutely
   positioned and stretched over the row. The three text links (rubrique,
   numéro, libellé) all resolve to the SAME criterion-redirect href, so the
   numéro and libellé links are raised above the overlay (z-index) to stay
   individually clickable while every empty pixel of the row navigates to the
   criterion. The tags cell is plain text (no link) and intentionally sits
   under the overlay: clicking it also navigates — the design choice here is
   "click anywhere on the row → go", at the cost of tag-text selection. If
   selectable tags are needed later, replace this with a JS row handler that
   guards on active text selection.
   -------------------------------------------------------------------------- */
table#rules-container tbody tr.c-rules-table__row {
    position: relative;
    cursor: pointer;
}

table#rules-container tbody tr.c-rules-table__row .c-rules-table__cell--rubrique .c-rules-table__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

table#rules-container tbody tr.c-rules-table__row .c-rules-table__cell--numero .c-rules-table__link,
table#rules-container tbody tr.c-rules-table__row .c-rules-table__cell--libelle .c-rules-table__link {
    position: relative;
    z-index: 2;
}

/* --------------------------------------------------------------------------
   Criterion-detail page (cr_detail.html): keep the light-mode appearance in
   dark mode for the hero header (.c-rule-hero) and the sticky certification
   sidebar (#opq-sticky-sidebar). The CDN dark-mode CSS lightens both
   backgrounds and dims the text, killing contrast (white-on-light hero,
   washed-out sidebar). Force the light-mode colors back.
   -------------------------------------------------------------------------- */
[data-theme="dark"] .c-rule-hero,
[data-theme="dark"] .c-rule-hero .c-rule-hero__content,
[data-theme="dark"] .c-rule-hero .c-rule-hero__title,
[data-theme="dark"] .c-rule-hero .c-rule-hero__subtitle {
    background-color: #112f42 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .c-rule-hero .c-rule-hero__tags,
[data-theme="dark"] .c-rule-hero .c-rule-hero__tags-list,
[data-theme="dark"] .c-rule-hero .c-rule-hero__tags a {
    color: #B4C8DC !important;
}

[data-theme="dark"] #opq-sticky-sidebar,
[data-theme="dark"] #opq-sticky-sidebar h2,
[data-theme="dark"] #opq-sticky-sidebar ul,
[data-theme="dark"] #opq-sticky-sidebar li {
    background-color: #112f42 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] #opq-sticky-sidebar li {
    border-bottom-color: #254356 !important;
}

[data-theme="dark"] #opq-sticky-sidebar .c-btn,
[data-theme="dark"] #opq-sticky-sidebar .l-btn {
    background-color: #FFFFFF !important;
    color: #112f42 !important;
    border-color: #D25148 !important;
}

[data-theme="dark"] #opq-sticky-sidebar .c-btn:hover,
[data-theme="dark"] #opq-sticky-sidebar .l-btn:hover {
    background-color: #D25148 !important;
    color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   Inline <code> / <pre> blocks inside the criterion prose (.s-cms area).
   The CDN dark-mode CSS keeps the code's light background but switches the
   text to teal/cyan, giving very low contrast. Force navy text on the light
   chip so it stays legible — matches the light-mode appearance.
   -------------------------------------------------------------------------- */
[data-theme="dark"] .s-cms code,
[data-theme="dark"] .s-cms pre,
[data-theme="dark"] .s-cms pre code {
    background-color: #F0F4F8 !important;
    color: #112f42 !important;
}

/* --------------------------------------------------------------------------
   Licence page (cl_licence.html). The CDN dark-mode lightens the .c-licence
   permission/condition cards but switches their text to a near-white, killing
   contrast. Force navy text on the existing pale chip background.
   -------------------------------------------------------------------------- */
[data-theme="dark"] .c-licence__item,
[data-theme="dark"] .c-licence__item h3,
[data-theme="dark"] .c-licence__item p {
    color: #112f42 !important;
}