.com-users.view-login {background-image:url('/images/tous-ensemble.webp');background-size:cover;background-position:center center;}
.com-users.view-login #sp-main-body {background-color:rgba(0,0,0,0.3)}
.com-users.view-login #sp-main-body * {color:#FFF;}
.com-users-login__options.list-group a {background-color:#000;}
/* ================================================================
   Carried over from the sphere template style (custom_css param)
   ================================================================ */
h2 {color:#062b5f!important;}
#sp-main-body .container, #sp-before-footer .container {        max-width: 1320px;}

#sp-main-body h1, #sp-main-body h2, #sp-main-body h3, #sp-main-body h4 {color:#062B5F}

#sp-before-footer .container h3 {font-size:1.66rem;}
#sp-before-footer .container ul li a {font-size:1rem!important;}

#sp-before-footer ul li a {
    display: inline-block;
    font-weight: 600;
    font-size: 1.2rem!important;
color:#FFF!important
}

#sp-before-footer h3 {color:#fff!important;margin-top:2rem;}

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    font-size: 1.6rem;
}
#sp-header {
    height: 60px;
    width: 100%;
    position: relative;
    z-index: 99;
    animation: spFadeIn 0.5s;
    margin-top: 0px !important;
padding: 0.5rem 0;height:auto;
}

.sp-megamenu-parent>li>a, .sp-megamenu-parent>li>span {
    display: inline-block;
    padding: 0 0.5rem!important;
    line-height: 60px;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

@media screen and (max-width: 1630px) {
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    font-size: 1.2rem!important;
}
}


@media screen and (max-width: 1330px) {
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    font-size: 1rem!important;
}
}
.sp-dropdown-inner {min-width:20rem}
#sp-menu ul li ul li {padding:0.25rem 0.5 rem;}
#sp-menu ul li ul a {font-size:1.1rem!important;}

#sp-footer-b .item-101039.menu-parent {display:none;}


/* Modifs megamenu oacom */
#sp-header .container {
 border-bottom: 0px;
    max-width: 100%
    padding: 0;
    margin: 0;
}
    .sp-menu-full.container {
        width: 100vw!important;
    }

.sp-menu-item.sp-has-child:hover .sp-dropdown-mega.sp-menu-full {
position:fixed;top:8vh;left:0!important;right:0!important;max-width:100vw!important;padding:0;margin:0;
}
div.mod_dropfiles_search .box-search-filter #Category_container {
    margin-top: 0px;
}
/* ================================================================
   Carried over from the <style> block hardcoded in sphere/index.php
   ================================================================ */
.dropfiles-content-table.colstyle .mediaTableMenu.mediaTableMenuClosed {display:none!important;}

@media (max-width: 576px) {
    .logo-image {
        height: 60px;
    }

	h1 {font-size:2rem!important;}
}

@media only screen and (max-width: 720px) {
    .dropfiles-container .dropfiles-container-table {
        margin-left: 0px;
    }

}
a h2 {color:#062B5F}
h2 a {color:#062B5F}
a h3, a h4 {
    color: #062B5F!important;
}

.fs-6 {font-size:0.9rem;}

.blog-item {margin-bottom:1.5rem;}

body .sppb-btn.sppb-btn-default:hover, body .sppb-btn.sppb-btn-default:focus, body .sppb-btn.sppb-btn-default:active, body .sppb-btn.sppb-btn-primary:hover, body .sppb-btn.sppb-btn-primary:focus, body .sppb-btn.sppb-btn-primary:active, body .sppb-btn.btn-primary:hover, body .sppb-btn.btn-primary:focus, body .sppb-btn.btn-primary:active, body .btn.sppb-btn-default:hover, body .btn.sppb-btn-default:focus, body .btn.sppb-btn-default:active, body .btn.sppb-btn-primary:hover, body .btn.sppb-btn-primary:focus, body .btn.sppb-btn-primary:active, body .btn.btn-primary:hover, body .btn.btn-primary:focus, body .btn.btn-primary:active {
    background-color: #ce2a22!important;
    border-color: #ce2a22!important;
    color: #000000;
}
#btnsearchbelow, #mod_btnsearchbelow { background-color: #ce2a22!important;}
.article-list-img img, .article-intro-image img {border-radius:1rem;}
/* ================================================================
   Off-canvas menu — hidden until opened.
   ================================================================ */
.offcanvas-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 320px;
    max-width: 85vw;
    background: #fff;
    z-index: 10000;
    overflow-y: auto;
    padding: 3rem 1.5rem 2rem;
    transition: transform .3s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .15);
}
.offcanvas-menu:not(.active) { visibility: hidden; }

/* Closed state. Kept at single-class specificity so the .active rule below
   can win — an `html:not([dir=rtl]) .offcanvas-menu` selector outranks
   `.offcanvas-menu.active` and pins the panel off-screen. */
.offcanvas-menu            { inset-inline-end: 0; transform: translateX(100%); }
[dir="rtl"] .offcanvas-menu { transform: translateX(-100%); }

.offcanvas-menu.active,
[dir="rtl"] .offcanvas-menu.active { transform: translateX(0); visibility: visible; }

.offcanvas-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 9999;
}
.offcanvas-menu .close-offcanvas {
    position: absolute;
    top: .75rem;
    right: 1rem;
    font-size: 1.25rem;
    color: #252525;
    line-height: 1;
}
.offcanvas-menu ul { list-style: none; margin: 0; padding: 0; }
.offcanvas-menu li { position: relative; border-bottom: 1px solid rgba(0, 0, 0, .07); }
.offcanvas-menu li a { display: block; padding: .7rem 2rem .7rem 0; color: #252525; font-weight: 600; }
.offcanvas-menu li a:hover { color: #ec430f; }
.offcanvas-menu ul ul { padding-left: 1rem; }
.offcanvas-menu ul.collapse:not(.show) { display: none; }
.offcanvas-menu .offcanvas-menu-toggler {
    position: absolute; top: .4rem; right: 0; width: 2rem; height: 2rem;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.offcanvas-menu .offcanvas-menu-toggler .close { display: none; }
.offcanvas-menu .offcanvas-menu-toggler:not(.collapsed) .open  { display: none; }
.offcanvas-menu .offcanvas-menu-toggler:not(.collapsed) .close { display: inline; }
body.offcanvas-active { overflow: hidden; }

/* Pre-loader */
.sp-pre-loader {
    position: fixed; inset: 0; z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    background: #fff; transition: opacity .4s ease;
}
.sp-pre-loader.is-hidden { opacity: 0; pointer-events: none; }

/* Back-to-top */
.sp-scroll-up {
    position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 10060;
    width: 2.5rem; height: 2.5rem; border-radius: 50%;
    background: #062b5f; color: #fff;
    display: none; align-items: center; justify-content: center;
}
.sp-scroll-up:hover { background: #ec430f; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .offcanvas-menu, .sp-pre-loader { transition: none; }
}

/* ================================================================
   Section backgrounds — fixed here, since the layout is defined
   in index.php.
   ================================================================ */
#sp-before-footer { background-color: #062B5F; color: #fff; }
#sp-before-footer h3,
#sp-before-footer .sp-module-title { color: #fff; }
#sp-before-footer a { color: #fff; }
#sp-before-footer a:hover { color: #ec430f; }
#sp-before-footer .container,
#sp-bottom .container { padding-top: 1rem; padding-bottom: 1rem; }

#sp-bottom { background-color: #062B5F; color: #fff; }
#sp-bottom a { color: rgba(255, 255, 255, .75); }
#sp-bottom a:hover { color: #fff; }
#sp-bottom .sp-copyright { text-align: center; font-size: .8rem; padding: .5rem 0; }

/* ================================================================
   ARTICLE — measured bulletin layout
   Single left-aligned column so it lines up with the page heading
   (the old col-md-7 + empty col-md-5 pair is gone). Type roles reuse
   faces already self-hosted: Fira Sans for display and body, Fira
   Sans Condensed as the utility face for eyebrow, dateline and file
   metadata — the same face as the nav, so articles speak in the
   site's voice.

   Attachment selectors are deliberately deeper than Dropfiles' own
   (.dropfiles-single-file .dropfiles-file-link), because its
   stylesheet loads AFTER this one.
   ================================================================ */

.com-content.view-article {
    --art-navy:  #062B5F;
    --art-accent:#ec430f;
    --art-ink:   #252525;
    --art-muted: #5c6b7e;   /* blue-biased grey, not neutral */
    --art-rule:  #dfe4ec;   /* hairline, tinted toward the navy */
    --art-wash:  #f2f5f9;   /* cool paper for document blocks */
    --art-measure: 54ch;   /* ~770px — the measure the site already used */
}

.com-content.view-article .article-measure,
.com-content.view-article .article-header {
    max-width: var(--art-measure);
    margin-inline: 0 auto;   /* left-aligned, matches the page heading */
}

.com-content.view-article .article-header {
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--art-rule);
    margin-bottom: 2.25rem;
}

.com-content.view-article .article-eyebrow {
    font-family: 'Fira Sans Condensed', 'Fira Sans', Arial, sans-serif;
    font-size: .8rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--art-accent);
    margin: 0 0 .55rem;
}

.com-content.view-article .article-header h1,
.com-content.view-article .article-header h2 {
    font-family: 'Fira Sans', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 1.15rem + 1.8vw, 2.6rem);
    line-height: 1.14; letter-spacing: -.015em;
    color: var(--art-navy);
    text-wrap: balance;
    margin: 0;
}

.com-content.view-article .article-dateline {
    font-family: 'Fira Sans Condensed', 'Fira Sans', Arial, sans-serif;
    font-size: .92rem; color: var(--art-muted);
    margin: .9rem 0 0;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem;
}
.com-content.view-article .article-dateline .sep { color: var(--art-rule); }

/* ---- Body rhythm ---- */
.com-content.view-article .com-content-article__body {
    font-size: 1.05rem; line-height: 1.72; color: var(--art-ink);
}
.com-content.view-article .com-content-article__body > * + * { margin-top: 1.15rem; }
.com-content.view-article .com-content-article__body h2,
.com-content.view-article .com-content-article__body h3,
.com-content.view-article .com-content-article__body h4 {
    color: var(--art-navy); line-height: 1.25;
    margin-top: 2.3rem; margin-bottom: .55rem; text-wrap: balance;
}
.com-content.view-article .com-content-article__body h2 { font-size: 1.55rem; font-weight: 700; }
.com-content.view-article .com-content-article__body h3 { font-size: 1.28rem; font-weight: 600; }
.com-content.view-article .com-content-article__body ul,
.com-content.view-article .com-content-article__body ol { padding-left: 1.35rem; list-style: revert; }
.com-content.view-article .com-content-article__body li + li { margin-top: .35rem; }
.com-content.view-article .com-content-article__body a {
    color: var(--art-accent);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em;
}
.com-content.view-article .com-content-article__body img { border-radius: .5rem; }
.com-content.view-article .com-content-article__body blockquote {
    border-left: 3px solid var(--art-accent);
    padding: .2rem 0 .2rem 1.1rem; margin-left: 0; color: var(--art-muted);
}

/* ---- Attachments: the payload of these articles ---- */
.com-content.view-article .com-content-article__body .dropfiles-single-file {
    float: none !important;
    width: 100% !important;
    margin: 1.4rem 0 !important;
    overflow: visible;
}
.com-content.view-article .com-content-article__body .dropfiles-single-file .dropfiles-file-link {
    display: flex !important;
    align-items: center;
    gap: 1rem;
    float: none !important;
    width: 100%;
    margin: 0 !important;
    padding: .95rem 1.15rem !important;
    background: var(--art-wash) !important;
    border: 1px solid var(--art-rule) !important;
    border-radius: .6rem !important;
    box-shadow: none !important;
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.com-content.view-article .com-content-article__body .dropfiles-single-file .dropfiles-file-link::before {
    content: "\f019";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900; font-size: .95rem;
    flex: 0 0 2.4rem; height: 2.4rem;
    display: grid; place-items: center;
    background: var(--art-accent); color: #fff;
    border-radius: .45rem;
}
.com-content.view-article .com-content-article__body .dropfiles-single-file .dropfiles-file-link:hover,
.com-content.view-article .com-content-article__body .dropfiles-single-file .dropfiles-file-link:focus-visible {
    background: #fff !important;
    border-color: var(--art-navy) !important;
    transform: translateY(-1px);
}
.com-content.view-article .com-content-article__body .dropfiles-single-file .dropfiles-file-link:focus-visible {
    outline: 2px solid var(--art-accent); outline-offset: 2px;
}
.com-content.view-article .com-content-article__body .dropfiles-single-file .droptitle {
    display: block;
    font-family: 'Fira Sans', Arial, sans-serif;
    font-weight: 600 !important; font-size: 1rem; line-height: 1.35;
    color: var(--art-navy) !important;
}
.com-content.view-article .com-content-article__body .dropfiles-single-file .dropinfos,
.com-content.view-article .com-content-article__body .dropfiles-single-file .dropinfos b {
    font-family: 'Fira Sans Condensed', 'Fira Sans', Arial, sans-serif;
    font-size: .85rem; font-weight: 400 !important;
    color: var(--art-muted) !important;
}
.com-content.view-article .com-content-article__body .dropfiles-single-file br { display: none; }

@media (prefers-reduced-motion: reduce) {
    .com-content.view-article .com-content-article__body .dropfiles-single-file .dropfiles-file-link { transition: none; }
    .com-content.view-article .com-content-article__body .dropfiles-single-file .dropfiles-file-link:hover { transform: none; }
}

/* ---- Share + print actions ---------------------------------- */
.com-content.view-article .article-header .article-dateline { margin-bottom: 0; }

.com-content.view-article .article-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1rem;
}
.com-content.view-article .article-action {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    display: inline-grid;
    place-items: center;
    padding: 0;
    background: #fff;
    color: var(--art-navy);
    border: 1px solid var(--art-rule);
    border-radius: .45rem;
    cursor: pointer;
    text-decoration: none;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.com-content.view-article .article-action:hover {
    color: #fff;
    background: var(--art-accent);
    border-color: var(--art-accent);
}
.com-content.view-article .article-action:focus-visible {
    outline: 2px solid var(--art-accent);
    outline-offset: 2px;
}
.com-content.view-article .article-action.is-done {
    color: #fff;
    background: var(--art-navy);
    border-color: var(--art-navy);
}
.com-content.view-article .article-action svg { display: block; }

/* Toast for "link copied" */
.lbvb-toast {
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(.5rem);
    background: var(--art-navy, #062B5F);
    color: #fff;
    font-family: 'Fira Sans Condensed', 'Fira Sans', Arial, sans-serif;
    font-size: .9rem;
    padding: .55rem 1rem;
    border-radius: .4rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 10050;
}
.lbvb-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .com-content.view-article .article-action,
    .lbvb-toast { transition: none; }
}

/* ---- Print ---------------------------------------------------- */
@media print {
    #sp-header, #sp-before-footer, #sp-bottom, .offcanvas-menu, .offcanvas-overlay,
    .sp-scroll-up, .article-actions, .sp-pre-loader, #sp-header-search,
    [class*="consent"], [id*="consent"], .oui4all, #oui4all { display: none !important; }

    .com-content.view-article .article-measure,
    .com-content.view-article .article-header { max-width: none; }

    body { background: #fff !important; font-size: 11.5pt; }
    .com-content.view-article .article-header h1 { font-size: 20pt; }
    .com-content.view-article .com-content-article__body { font-size: 11.5pt; line-height: 1.5; }

    /* Attachments can't be clicked on paper — print the URL instead. */
    .com-content.view-article .dropfiles-single-file .dropfiles-file-link {
        border: 1px solid #999 !important;
        background: #fff !important;
        page-break-inside: avoid;
    }
    .com-content.view-article .dropfiles-single-file .dropfiles-file-link::before { display: none; }
    .com-content.view-article .dropfiles-single-file .dropfiles-file-link::after {
        content: " (" attr(href) ")";
        font-size: 8.5pt;
        color: #555;
        word-break: break-all;
    }
    a { text-decoration: none !important; color: #000 !important; }
}

/* A bottom-docked consent banner sits over the back-to-top button and
   swallows the click. While one is on screen, lift the button clear of it. */
body.has-bottom-banner .sp-scroll-up { bottom: calc(1.5rem + var(--lbvb-bottom-banner, 5rem)); }

/* ================================================================
   MEMBER SPACE — /mon-espace
   A navy identity band, then a two-column dashboard. Card treatment
   matches the article attachments so the two pages feel related.
   ================================================================ */

.com-users.view-profile {
    --ms-navy:  #062B5F;
    --ms-accent:#ec430f;
    --ms-ink:   #252525;
    --ms-muted: #5c6b7e;
    --ms-rule:  #dfe4ec;
    --ms-wash:  #f2f5f9;
}

.com-users.view-profile #sp-component { width: 100%; }

/* ---- Identity band ---- */
.member-hero {
    background: var(--ms-navy);
    color: #fff;
    border-radius: .75rem;
    padding: 2rem 2.25rem;
    margin-bottom: 2rem;
    display: grid;
    gap: .35rem;
}
.member-eyebrow {
    font-family: 'Fira Sans Condensed', 'Fira Sans', Arial, sans-serif;
    font-size: .8rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: #ffb59c;                 /* accent, lightened to hold on navy */
    margin: 0;
}
.member-hero .member-name {
    font-family: 'Fira Sans', Arial, sans-serif;
    font-weight: 900;
    font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.4rem);
    line-height: 1.12; letter-spacing: -.015em;
    color: #fff; margin: 0;
}
.member-meta {
    font-family: 'Fira Sans Condensed', 'Fira Sans', Arial, sans-serif;
    font-size: .95rem;
    color: rgba(255,255,255,.75);
    display: flex; flex-wrap: wrap; gap: .4rem 1rem;
}
.member-meta .member-role {
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 2rem;
    padding: .05rem .7rem;
}
.member-hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }

.btn-member {
    display: inline-flex; align-items: center;
    font-family: 'Fira Sans', Arial, sans-serif;
    font-weight: 600; font-size: .95rem;
    padding: .55rem 1.1rem;
    border-radius: .4rem;
    text-decoration: none;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.btn-member--ghost { background: var(--ms-accent); border: 1px solid var(--ms-accent); color: #fff; }
.btn-member--ghost:hover { background: #fff; color: var(--ms-navy); border-color: #fff; }
.btn-member--quiet { background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; }
.btn-member--quiet:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-member:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- Dashboard grid ---- */
.member-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
@media (max-width: 991.98px) {
    .member-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .member-hero { padding: 1.5rem 1.35rem; }
}

.member-section-title {
    font-family: 'Fira Sans', Arial, sans-serif;
    font-weight: 700; font-size: 1.5rem;
    color: var(--ms-navy);
    margin: 0 0 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--ms-rule);
}

.member-empty {
    background: var(--ms-wash);
    border: 1px dashed var(--ms-rule);
    border-radius: .6rem;
    padding: 1.5rem;
    color: var(--ms-muted);
    margin: 0;
}

/* ---- Aside cards ---- */
.member-aside { display: grid; gap: 1.25rem; }
.member-card {
    background: var(--ms-wash);
    border: 1px solid var(--ms-rule);
    border-radius: .6rem;
    padding: 1.25rem 1.35rem;
}
.member-card-title {
    font-family: 'Fira Sans Condensed', 'Fira Sans', Arial, sans-serif;
    font-size: .82rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--ms-muted);
    margin: 0 0 .85rem;
}
.member-links { list-style: none; margin: 0; padding: 0; }
.member-links li + li { border-top: 1px solid var(--ms-rule); }
.member-links a {
    display: block;
    padding: .6rem 0;
    color: var(--ms-navy);
    font-weight: 600;
    text-decoration: none;
}
.member-links a:hover { color: var(--ms-accent); }
.member-links a:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }

/* Modules dropped into the aside inherit the card's quiet styling */
.member-card .sp-module-title,
.member-card h3 {
    font-family: 'Fira Sans Condensed', 'Fira Sans', Arial, sans-serif;
    font-size: .82rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
    color: var(--ms-muted);
}
.member-card ul { list-style: none; margin: 0; padding: 0; }
.member-card ul li + li { border-top: 1px solid var(--ms-rule); }
.member-card ul a { display: block; padding: .55rem 0; color: var(--ms-navy); font-weight: 600; text-decoration: none; }
.member-card ul a:hover { color: var(--ms-accent); }

@media (prefers-reduced-motion: reduce) {
    .btn-member { transition: none; }
}

/* The member name sits on the navy band, so it must beat the global
   `#sp-main-body h1 { color:#062B5F }` rule — which is an ID selector. */
#sp-main-body .member-hero .member-name,
#sp-main-body .member-hero .member-eyebrow { color: #fff; }
#sp-main-body .member-hero .member-eyebrow { color: #ffb59c; }

/* ================================================================
   FEATURE POSITION (#sp-feature)
   A full-width action bar above the page content. Previously
   unstyled, so it read as loose text floating at the top.
   ================================================================ */
#sp-feature {
    background: #f2f5f9;
    border-bottom: 1px solid #dfe4ec;
    padding: .65rem 0;
}
#sp-feature .sp-module { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
#sp-feature .sp-module-title {
    font-family: 'Fira Sans Condensed', 'Fira Sans', Arial, sans-serif;
    font-size: .78rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase;
    color: #5c6b7e;
    margin: 0;
}
#sp-feature .sp-module-content { flex: 1 1 auto; }
#sp-feature ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .4rem .5rem;
}
#sp-feature ul li { margin: 0; }
#sp-feature ul a {
    display: inline-flex; align-items: center;
    font-family: 'Fira Sans', Arial, sans-serif;
    font-size: .9rem; font-weight: 600;
    color: #062B5F;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 2rem;
    padding: .3rem .9rem;
    text-decoration: none;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}
#sp-feature ul a:hover { color: #fff; background: #ec430f; border-color: #ec430f; }
#sp-feature ul a:focus-visible { outline: 2px solid #ec430f; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #sp-feature ul a { transition: none; } }

/* ================================================================
   OUI SEARCH — header autocomplete dropdown
   Restyled at template level (not in the module) so a module update
   doesn't wipe it. The shipped styling used a pale-yellow #fff3cd
   highlight and inherited the 1.6rem body size, which read badly.
   ================================================================ */

.mod-oui-search {
    --os-navy:  #062B5F;
    --os-accent:#ec430f;
    --os-ink:   #252525;
    --os-muted: #5c6b7e;
    --os-rule:  #dfe4ec;
    --os-wash:  #f2f5f9;
    font-size: 1rem;                 /* don't inherit the 1.6rem body size */
    width: 100%;
    /* the module ships max-width:400px, which crops long French headlines */
    max-width: 34rem;
}
.mod-oui-search.mod-oui-search { max-width: 34rem; }

/* Input */
.mod-oui-search .oui-search-input {
    font-family: 'Fira Sans', Arial, sans-serif;
    font-size: 1rem;
    color: var(--os-ink);
    border: 1px solid var(--os-rule);
    border-radius: .45rem;
    padding: .6rem .9rem;
}
.mod-oui-search .oui-search-input:focus {
    border-color: var(--os-navy);
    box-shadow: 0 0 0 3px rgba(6, 43, 95, .12);
    outline: none;
}

/* Panel */
.mod-oui-search .oui-search-results {
    background: #fff;
    border: 1px solid var(--os-rule);
    border-radius: .6rem;
    box-shadow: 0 12px 34px -12px rgba(6, 43, 95, .35);
    max-height: 26rem;
    overflow: auto;
    overscroll-behavior: contain;
    z-index: 10070;               /* above the sticky header */
}

/* Items */
.mod-oui-search .oui-search-result-item {
    border-bottom: 1px solid var(--os-rule);
    transition: background .14s ease;
}
.mod-oui-search .oui-search-result-item:last-child { border-bottom: 0; }
.mod-oui-search .oui-search-result-item:hover,
.mod-oui-search .oui-search-result-item:focus-within { background: var(--os-wash); }
.mod-oui-search .oui-search-result-item.featured { border-left: 3px solid var(--os-accent); }

.mod-oui-search .oui-search-result-title {
    font-family: 'Fira Sans', Arial, sans-serif;
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--os-navy);
}
.mod-oui-search .oui-search-result-category {
    font-family: 'Fira Sans Condensed', 'Fira Sans', Arial, sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    /* brand orange is only 3.91:1 on white — too low for an 11px label.
       This darker shade keeps the accent and reaches 5.51:1 (AA). */
    color: #c2350b;
}
.mod-oui-search .oui-search-result-introtext {
    font-size: .87rem;
    line-height: 1.5;
    color: var(--os-muted);
}
.mod-oui-search .oui-search-result-image img { border-radius: .35rem; }

/* Matched term — solid contrast instead of the washed-out yellow */
.mod-oui-search .oui-search-highlight {
    background: rgba(236, 67, 15, .14);
    color: var(--os-navy);
    font-weight: 700;
    border-radius: .15rem;
    padding: 0 .1em;
    box-decoration-break: clone;
}

/* Status text */
.mod-oui-search .oui-search-looking,
.mod-oui-search .oui-search-no-results,
.mod-oui-search .oui-search-loading {
    font-family: 'Fira Sans Condensed', 'Fira Sans', Arial, sans-serif;
    font-size: .9rem;
    color: var(--os-muted);
}

/* Scrollbar */
.mod-oui-search .oui-search-results::-webkit-scrollbar { width: 10px; }
.mod-oui-search .oui-search-results::-webkit-scrollbar-thumb {
    background: #c9d3e0; border-radius: 10px; border: 3px solid #fff;
}
.mod-oui-search .oui-search-results { scrollbar-color: #c9d3e0 #fff; scrollbar-width: thin; }

@media (prefers-reduced-motion: reduce) {
    .mod-oui-search .oui-search-result-item { transition: none; }
}

/* Header search panel spans the header width; on phones the dropdown
   must not run past the viewport. */
@media (max-width: 991.98px) {
    #sp-header-search { padding-inline: 0; }
    .mod-oui-search { max-width: 100%; }
    .mod-oui-search .oui-search-results { max-height: 60vh; }
}