/* ============================================================
   Formation — component styles
   Scope: #formation .formation-page  (prevents theme collisions)
   All selectors are prefixed — safe to use across multiple sites.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   COLOR TOKENS — BassinSE orange palette
   ───────────────────────────────────────────────────────────── */
#formation {
    --primary-btn:  #f28c1b;  /* --red (site orange)            */
    --primary-dark: #c96d0a;  /* darkened orange — hover states */
    --primary-light: #fef4e8; /* --light-red                    */
    --black-text:   #1d1d1d;  /* --black                        */
    --gray-text:    #6d6d6d;  /* --dark-3                       */
}

/* ─────────────────────────────────────────────────────────────
   TITLE SECTION
   ───────────────────────────────────────────────────────────── */

#formation{
    margin-top: 150px;
    margin-bottom: 100px;
}

#formation .formation-title-content {
    text-align: center;
}

#formation .formation-title-content h1{
    color: var(--black) !important;
    font-weight: 400 !important;
    font-size: 45px !important;
    line-height: 55px !important;
}

#formation .formation-title-content h2{
    color: var(--new-blue);
    font-weight: 400;
    margin-top: 16px;
    font-size: 21px;
    line-height: 33px;
}

/* ─────────────────────────────────────────────────────────────
   VIEW SWITCHER (list / grid toggle)
   ───────────────────────────────────────────────────────────── */

#formation .formation-page .formations__view-switcher {
    display: flex;
    justify-content: flex-end;
    gap: .3rem;
    margin-bottom: .75rem;
}

#formation .formation-page .formations__view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--primary-btn, #186DB2);
    border-radius: .35rem;
    background: transparent;
    color: var(--primary-btn, #186DB2);
    cursor: pointer;
    transition: background .15s, color .15s;
    font-size: .8rem;
    line-height: 1;
}

#formation .formation-page .formations__view-btn:hover {
    background: var(--primary-light, #e2f1ff);
}

#formation .formation-page .formations__view-btn--active {
    background: var(--primary-btn, #186DB2);
    color: #fff;
}

#formation .formation-page .formations__view-btn i {
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   FILTER BAR
   ───────────────────────────────────────────────────────────── */

#formation .formation-page .formations__filter-bar {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin-bottom: 1.5rem;
}

/* Row 1 — category pills */
#formation .formation-page .formations__category-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* Row 2 — date selects + search button */
#formation .formation-page .formations__date-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

/* ── Category filter pills ──────────────────────────────────── */
#formation .formation-page .formations__filter {
    padding: .35rem 1rem;
    border: 2px solid var(--primary-btn, #186DB2);
    border-radius: 2rem;
    background: var(--white, #fff);
    color: var(--primary-btn, #186DB2);
    cursor: pointer;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1.4;
    transition: background .15s, color .15s, box-shadow .15s;
}

#formation .formation-page .formations__filter:hover {
    background: var(--primary-light, #e2f1ff);
}

#formation .formation-page .formations__filter--active {
    background: var(--primary-btn, #186DB2);
    border-color: var(--primary-btn, #186DB2);
    color: #fff;
    box-shadow: 0 2px 4px rgba(96,97,112,.16);
}

/* ── Date selects ────────────────────────────────────────────── */
#formation .formation-page .formations__select {
    padding: .35rem .7rem;
    padding-right: 1.9rem;
    border: 2px solid var(--primary-btn, #186DB2);
    border-radius: 2rem;
    background: var(--white, #fff) !important;
    color: var(--primary-btn, #186DB2) !important;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23186DB2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .55rem center !important;
}

#formation .formation-page .formations__select:focus {
    outline: 2px solid var(--primary-btn, #186DB2);
    outline-offset: 2px;
}

/* ── Search button ───────────────────────────────────────────── */
#formation .formation-page .formations__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 2px solid var(--primary-btn, #186DB2);
    border-radius: 50%;
    background: var(--primary-btn, #186DB2);
    color: #fff;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}

#formation .formation-page .formations__search-btn:hover {
    background: var(--primary-dark, #0e4d80);
    border-color: var(--primary-dark, #0e4d80);
}

#formation .formation-page .formations__search-btn i {
    font-size: .8rem;
    color: #fff !important;
    line-height: 1;
}

/* ── Category dropdown (mobile only — hidden on desktop) ────── */
#formation .formation-page .formations__category-select {
    display: none;
}

/* ── No-results message ──────────────────────────────────────── */
#formation .formation-page .formations__no-results {
    padding: 1rem;
    border-radius: .5rem;
    background: var(--light-1, #f5f5f5);
    color: var(--gray-text, #747F85);
    font-size: .875rem;
    font-style: italic;
    text-align: center;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   ACCORDION LIST
   ───────────────────────────────────────────────────────────── */

#formation .formation-page .formations__list {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

/* ── Accordion card ──────────────────────────────────────────── */
#formation .formation-page .formation {
    border: 1px solid var(--primary-dark, #96c5e8);
    border-radius: .55rem;
    background: var(--white, #fff);
    box-shadow: 0 0 1px rgba(40,41,61,.06), 0 .5px 2px rgba(96,97,112,.12);
    overflow: hidden;
    transition: box-shadow .2s;
}

#formation .formation-page .formation:hover {
    box-shadow: 0 2px 8px rgba(96,97,112,.16);
}

/* ─────────────────────────────────────────────────────────────
   ACCORDION HEADER (always visible)
   ───────────────────────────────────────────────────────────── */

#formation .formation-page .formation__header {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .75rem 1rem .75rem 1rem;
    min-height: 3rem;
}

#formation .formation-page .formation__summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1;
    min-width: 0;
}

/* Category pill inside the row */
#formation .formation-page .formation__category {
    flex-shrink: 0;
    display: inline-block;
    padding: .18rem .65rem;
    border-radius: 1rem;
    background: var(--primary-light, #e2f1ff);
    color: var(--primary-btn, #186DB2);
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
    line-height: 1.5;
    min-width: 9rem;
    text-align: center;
}

/* Title + short description group */
#formation .formation-page .formation__meta {
    display: flex;
    flex-direction: column;
    gap: .08rem;
    min-width: 0;
}

/* Title — single line, ellipsis on desktop */
#formation .formation-page .formation__title {
    display: block;
    font-size: .95rem;
    font-weight: 700;
    color: var(--black-text, #3C3D3B);
    margin: 0;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Short description — single line, ellipsis */
#formation .formation-page .formation__short-description {
    display: block;
    margin: 0;
    font-size: .78rem;
    font-weight: 400;
    color: var(--gray-text, #747F85);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Period date badge in header ─────────────────────────────── */
#formation .formation-page .formation__period {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--primary-btn, #186DB2);
    line-height: 1.4;
    margin-top: .1rem;
}

#formation .formation-page .formation__period i {
    font-size: .65rem;
    flex-shrink: 0;
    opacity: .85;
}

/* ── Toggle button ───────────────────────────────────────────── */
#formation .formation-page .formation__toggle {
    flex-shrink: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 2px solid var(--primary-btn, #186DB2);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    color: var(--primary-btn, #186DB2);
    line-height: 1;
    transition: background .15s;
}

#formation .formation-page .formation__toggle:hover {
    background: var(--primary-light, #e2f1ff);
}

#formation .formation-page .formation__chevron {
    width: .95rem;
    height: .95rem;
    display: block;
    stroke: var(--primary-btn, #186DB2);
    transition: transform .25s ease;
}

#formation .formation-page .formation--open .formation__chevron {
    transform: rotate(180deg);
}

/* ─────────────────────────────────────────────────────────────
   ACCORDION BODY (collapsible)
   ───────────────────────────────────────────────────────────── */

#formation .formation-page .formation__body {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .85rem 1rem 1rem;
    border-top: 1px solid var(--light-1, #efefef);
}

/* ─────────────────────────────────────────────────────────────
   FIELD TYPES — body content
   ───────────────────────────────────────────────────────────── */

/* ── Plain text ──────────────────────────────────────────────── */
#formation .formation-page .formation__field--text {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--black-text, #3C3D3B);
}

/* ── HTML / WYSIWYG ──────────────────────────────────────────── */
/*
 * Full reset of inherited theme styles within WYSIWYG blocks.
 * Drupal CKEditor can produce: p, ul, ol, li, h2-h6, strong, em,
 * u, a, blockquote, table, th, td, br, hr, sub, sup, code, pre.
 */
#formation .formation-page .formation__field--html {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--black-text, #3C3D3B);
}

#formation .formation-page .formation__field--html p {
    margin: 0 0 .65em;
    line-height: 1.75;
}

#formation .formation-page .formation__field--html p:last-child {
    margin-bottom: 0;
}

#formation .formation-page .formation__field--html ul,
#formation .formation-page .formation__field--html ol {
    margin: .3em 0 .65em 1.4em;
    padding: 0;
}

#formation .formation-page .formation__field--html li {
    margin-bottom: .3em;
    line-height: 1.6;
}

#formation .formation-page .formation__field--html strong,
#formation .formation-page .formation__field--html b {
    font-weight: 700;
}

#formation .formation-page .formation__field--html em,
#formation .formation-page .formation__field--html i {
    font-style: italic;
}

#formation .formation-page .formation__field--html u {
    text-decoration: underline;
}

#formation .formation-page .formation__field--html s,
#formation .formation-page .formation__field--html del {
    text-decoration: line-through;
}

#formation .formation-page .formation__field--html sup {
    font-size: .7em;
    vertical-align: super;
}

#formation .formation-page .formation__field--html sub {
    font-size: .7em;
    vertical-align: sub;
}

#formation .formation-page .formation__field--html a {
    color: var(--primary-btn, #186DB2);
    text-decoration: underline;
    word-break: break-word;
    font-weight: 500;
}

#formation .formation-page .formation__field--html a:hover {
    color: var(--primary-dark, #0e4d80);
}

/* WYSIWYG headings — smaller than page headings, clear hierarchy */
#formation .formation-page .formation__field--html h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--black-text, #3C3D3B);
    margin: .8em 0 .3em;
    line-height: 1.3;
}

#formation .formation-page .formation__field--html h3 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--black-text, #3C3D3B);
    margin: .7em 0 .3em;
    line-height: 1.3;
}

#formation .formation-page .formation__field--html h4,
#formation .formation-page .formation__field--html h5,
#formation .formation-page .formation__field--html h6 {
    font-size: .875rem;
    font-weight: 700;
    color: var(--black-text, #3C3D3B);
    margin: .6em 0 .25em;
    line-height: 1.3;
}

#formation .formation-page .formation__field--html blockquote {
    margin: .5em 0;
    padding: .4em .85em;
    border-left: 3px solid var(--primary-btn, #186DB2);
    color: var(--gray-text, #747F85);
    font-style: italic;
    font-size: .85rem;
    line-height: 1.65;
}

#formation .formation-page .formation__field--html hr {
    border: none;
    border-top: 1px solid var(--light-1, #efefef);
    margin: .75em 0;
}

#formation .formation-page .formation__field--html code {
    font-family: monospace;
    font-size: .8rem;
    background: var(--light-1, #f5f5f5);
    padding: .1em .35em;
    border-radius: .25rem;
}

#formation .formation-page .formation__field--html pre {
    font-family: monospace;
    font-size: .8rem;
    background: var(--light-1, #f5f5f5);
    padding: .6em .8em;
    border-radius: .35rem;
    overflow-x: auto;
    line-height: 1.5;
}

/* Tables — scrollable on mobile */
#formation .formation-page .formation__field--html .table-wrapper,
#formation .formation-page .formation__field--html table {
    max-width: 100%;
}

#formation .formation-page .formation__field--html table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
    line-height: 1.5;
    margin: .5em 0;
}

#formation .formation-page .formation__field--html th,
#formation .formation-page .formation__field--html td {
    padding: .3em .55em;
    border: 1px solid var(--light-1, #efefef);
    text-align: left;
    vertical-align: top;
}

#formation .formation-page .formation__field--html th {
    background: var(--primary-light, #e2f1ff);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .02em;
}

/* ── Date ────────────────────────────────────────────────────── */
#formation .formation-page .formation__field--date {
    font-size: .8rem;
    font-weight: 400;
    color: var(--gray-text, #747F85);
    line-height: 1.5;
}

#formation .formation-page .formation__field--date time i {
    color: var(--primary-btn, #186DB2);
    font-size: .72rem;
    margin-right: .2em;
}

/* ── Datetime ─────────────────────────────────────────────────── */
#formation .formation-page .formation__field--datetime {
    font-size: .8rem;
    font-weight: 400;
    color: var(--gray-text, #747F85);
    line-height: 1.5;
}

#formation .formation-page .formation__field--datetime time i {
    color: var(--primary-btn, #186DB2);
    font-size: .72rem;
    margin-right: .2em;
}

/* ── Link ────────────────────────────────────────────────────── */
#formation .formation-page .formation__field--link a {
    font-size: .875rem;
    font-weight: 500;
    color: var(--primary-btn, #186DB2);
    text-decoration: underline;
    word-break: break-word;
}

#formation .formation-page .formation__field--link a:hover {
    color: var(--primary-dark, #0e4d80);
}

/* ── Email ───────────────────────────────────────────────────── */
#formation .formation-page .formation__field--email a {
    font-size: .875rem;
    font-weight: 500;
    color: var(--primary-btn, #186DB2);
    text-decoration: underline;
    word-break: break-all;
}

#formation .formation-page .formation__field--email a:hover {
    color: var(--primary-dark, #0e4d80);
}

/* ── Number ──────────────────────────────────────────────────── */
#formation .formation-page .formation__field--number {
    font-size: .875rem;
    font-weight: 600;
    color: var(--black-text, #3C3D3B);
    font-variant-numeric: tabular-nums;
}

/* ── Boolean ─────────────────────────────────────────────────── */
#formation .formation-page .formation__field--boolean span {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: .4rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.5;
}

#formation .formation-page .formation__field--boolean-true span {
    background: #d4edda;
    color: #155724;
}

#formation .formation-page .formation__field--boolean-false span {
    background: var(--light-1, #efefef);
    color: var(--gray-text, #747F85);
}

/* ── File / PDF ──────────────────────────────────────────────── */
#formation .formation-page .formation__field--file a.formation__file-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--primary-btn, #186DB2);
    text-decoration: none;
    word-break: break-word;
    line-height: 1.4;
}

#formation .formation-page .formation__field--file a.formation__file-link:hover {
    text-decoration: underline;
    color: var(--primary-dark, #0e4d80);
}

#formation .formation-page .formation__field--file .formation__file-size {
    color: var(--gray-text, #747F85);
    font-weight: 400;
    font-size: .78rem;
}

/* ─────────────────────────────────────────────────────────────
   GRID VIEW  (.formations[data-view="grid"])
   ───────────────────────────────────────────────────────────── */

/* Grid container — 3 columns desktop, equal height by default */
#formation .formation-page .formations[data-view="grid"] .formations__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: stretch;
}

/* When any card is open: switch to align-items start so other cards don't stretch */
#formation .formation-page .formations[data-view="grid"] .formations__list.has-open-card {
    align-items: start;
}

/* Each card: flex column, position anchor for the footer toggle */
#formation .formation-page .formations[data-view="grid"] .formation {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
    padding-bottom: 3.2rem; /* fixed footer zone — same on every card */
}

/* Header in grid mode — stack vertically, no ellipsis */
#formation .formation-page .formations[data-view="grid"] .formation__header {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: .85rem 1rem;
    min-height: unset;
}

#formation .formation-page .formations[data-view="grid"] .formation__summary {
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    width: 100%;
}

/* Title — wrap freely in grid mode */
#formation .formation-page .formations[data-view="grid"] .formation__title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    font-size: .9rem;
}

/* Short description — always 3 lines tall; truncate with … if longer */
#formation .formation-page .formations[data-view="grid"] .formation__short-description {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: .75rem;
    line-height: 1.4;
    min-height: calc(3 * 1.4 * .75rem); /* 3.15rem — reserves 3 lines even if text is shorter */
}

/* Period date in grid mode — slightly larger, more space */
#formation .formation-page .formations[data-view="grid"] .formation__period {
    margin-top: .15rem;
}

/* Toggle button in grid mode — fixed at bottom-right of header (same position on all cards) */
#formation .formation-page .formations[data-view="grid"] .formation__toggle {
    display: flex !important;
    position: absolute;
    bottom: .7rem;
    right: .7rem;
    margin-top: 0;
}

/* Body in grid mode — same styles, just no top border override needed */
#formation .formation-page .formations[data-view="grid"] .formation__body {
    border-top: 1px solid var(--light-1, #efefef);
}

/* Hover lift on grid cards */
#formation .formation-page .formations[data-view="grid"] .formation:hover {
    box-shadow: 0 4px 12px rgba(96,97,112,.18);
    transform: translateY(-1px);
    transition: box-shadow .2s, transform .2s;
}

#formation .formation-page .formations[data-view="grid"] .formation--open {
    transform: none;
}


/* ─────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────── */
.page-template-formation-page .footer-brusano .footer-widget {
    background-color: #fff;
    background-image: url('https://www.brusano.brussels/layout/uploads/2023/03/Trace-3-2.png');
    background-size: cover;
    height: 450px;
    padding-top: 180Px !important;
    width: 100%;
    background-position: top;
    margin-top: 50px;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — mobile  (≤ 640px)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* Title section */
    #formation .formation-title-content h1{
        font-size: 30px !important;
        line-height: 44px !important;
    }

    #formation .formation-title-content h2{
        font-size: 17px !important;
        line-height: 25px !important;
    }

    /* Filter bar — compact the gap slightly */
    #formation .formation-page .formations__filter-bar {
        gap: .5rem;
        margin-bottom: 1.1rem;
    }

    /* Category pills row — hidden on mobile, replaced by the dropdown */
    #formation .formation-page .formations__category-row {
        display: none;
    }

    #formation .formation-page .formations__filter {
        font-size: .68rem;
        padding: .3rem .85rem;
        flex: 0 0 auto;
    }

    /* Category dropdown — full-width styled select, mobile only */
    #formation .formation-page .formations__category-select {
        display: block;
        width: 100%;
        padding: .55rem 2.2rem .55rem 1rem;
        border: 2px solid var(--primary-btn, #186DB2);
        border-radius: 2rem;
        background: var(--white, #fff);
        color: var(--primary-btn, #186DB2);
        font-size: .78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        cursor: pointer;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23186DB2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right .85rem center;
        text-align: center;
        text-align-last: center; /* centre the selected option text */
    }

    #formation .formation-page .formations__category-select:focus {
        outline: 2px solid var(--primary-btn, #186DB2);
        outline-offset: 2px;
    }

    /* Date row */
    #formation .formation-page .formations__date-row {
        gap: .35rem;
    }

    #formation .formation-page .formations__select {
        font-size: .68rem;
        padding: .3rem .65rem;
        padding-right: 1.75rem;
    }

    /* Accordion header — allow title to wrap on small screens */
    #formation .formation-page .formation__header {
        padding: .65rem .75rem;
        gap: .6rem;
        align-items: flex-start;
    }

    #formation .formation-page .formation__summary {
        gap: .55rem;
        align-items: flex-start;
    }

    /* Category pill — hide on very small screens if too long */
    #formation .formation-page .formation__category {
        font-size: .62rem;
        padding: .15rem .55rem;
    }

    /* Title — allow 2-line wrap instead of hard ellipsis */
    #formation .formation-page .formation__title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .9rem;
    }

    /* Short description — keep single-line truncation */
    #formation .formation-page .formation__short-description {
        font-size: .73rem;
    }

    /* Toggle button — slightly smaller */
    #formation .formation-page .formation__toggle {
        width: 1.7rem;
        height: 1.7rem;
        flex-shrink: 0;
        margin-top: .1rem;
    }

    #formation .formation-page .formation__chevron {
        width: .85rem;
        height: .85rem;
    }

    /* Body */
    #formation .formation-page .formation__body {
        padding: .7rem .75rem .85rem;
        gap: .5rem;
    }

    /* Field type sizes on mobile */
    #formation .formation-page .formation__field--html {
        font-size: .825rem;
        line-height: 1.7;
    }

    #formation .formation-page .formation__field--html h2 {
        font-size: .925rem;
    }

    #formation .formation-page .formation__field--html h3 {
        font-size: .875rem;
    }

    #formation .formation-page .formation__field--html h4,
    #formation .formation-page .formation__field--html h5,
    #formation .formation-page .formation__field--html h6 {
        font-size: .825rem;
    }

    /* Tables — horizontal scroll on mobile */
    #formation .formation-page .formation__field--html table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: .75rem;
    }

    #formation .formation-page .formation__field--text,
    #formation .formation-page .formation__field--link a,
    #formation .formation-page .formation__field--email a,
    #formation .formation-page .formation__field--number,
    #formation .formation-page .formation__field--file a.formation__file-link {
        font-size: .825rem;
    }

    #formation .formation-page .formation__field--date,
    #formation .formation-page .formation__field--datetime {
        font-size: .75rem;
    }

    #formation .formation-page .formations__no-results {
        font-size: .825rem;
    }

    /* List view: pill stacks above meta on mobile */
    #formation .formation-page .formations[data-view="list"] .formation__summary {
        flex-wrap: wrap;
    }

    #formation .formation-page .formations[data-view="list"] .formation__category {
        flex-basis: 100%;
        min-width: unset;
        text-align: left;
    }

    /* Grid: 2 columns on tablet */
    #formation .formation-page .formations[data-view="grid"] .formations__list {
        grid-template-columns: repeat(2, 1fr);
        gap: .75rem;
    }
}

@media (max-width: 480px) {
    /* Grid: 1 column on mobile */
    #formation .formation-page .formations[data-view="grid"] .formations__list {
        grid-template-columns: 1fr;
    }
}