/**
 * AJOCA 2026 Template - Custom Styles
 * Site-specific customizations that replicate the original AJOCA design
 */

/* Force fluid layout globally */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl, .body-wrapper, #sp-main-body { max-width: 100% !important; width: 100% !important; }

/* ==========================================================================
   Preloader
   ========================================================================== */

.sp-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #7cd6f0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.sp-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none !important;
}

/* ==========================================================================
   AJOCA Specific Colors & Branding
   ========================================================================== */

/* Main background image for certain views */
.com-rendezvous #sp-main-body,
.com_rendezvous #sp-main-body,
.com_monrendezvous #sp-main-body,
.view-registration #sp-main-body {
    background-image: url('/images/photos-colorees/mission_locale-mlcoa-trouver_emplois.webp');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    color: var(--ajoca-white);
}

/* Article pages - cyan/blue background like production */
.com_content.view-article,
body.com_content.view-article {
    background-color: #7cd6f0;
}

.com_content.view-article #sp-main-body {
    background-color: #7cd6f0;
    min-height: 100vh;
    padding-top: 120px;
}

.com_content.view-article .com-content-article,
.com_content.view-article .item-page {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 50px;
    background-color: #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

/* Article title */
.com_content.view-article .page-header h1,
.com_content.view-article h1.article-title,
.com_content.view-article .item-page > h1:first-child {
    font-family: 'Expletus Sans', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 20px;
    line-height: 1.2;
}

/* Article content */
.com_content.view-article .item-page,
.com_content.view-article .com-content-article__body {
    color: #000;
    font-size: 1rem;
    line-height: 1.7;
}

.com_content.view-article .item-page p {
    margin-bottom: 1em;
}

.com_content.view-article .item-page a {
    color: #0345bf;
    text-decoration: underline;
}

.com_content.view-article .item-page ul {
    margin-left: 20px;
    margin-bottom: 1em;
}

/* Hide article info/meta on article view for cleaner look */
.com_content.view-article .article-info,
.com_content.view-article .com-content-article__info {
    display: none;
}

/* Footer on article pages */
.com_content.view-article #sp-footer {
    background-color: rgba(0, 0, 0, 0.3);
}

.com_content.view-article .footer-copyright {
    background-color: transparent;
    color: #fff;
}

.com_content.view-article .footer-copyright a {
    color: #fff;
}

/* ==========================================================================
   FLUID LAYOUT - Full Width with NO Container Constraints
   ========================================================================== */

/* Global fluid layout reset - FORCE full width */
body.com_monrendezvous,
body.com-rendezvous,
body.com_rendezvous {
    overflow-x: hidden;
}

.body-wrapper {
    max-width: 100% !important;
    width: 100% !important;
}

body.com_monrendezvous .body-wrapper,
body.com-rendezvous .body-wrapper,
body.com_rendezvous .body-wrapper {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
}

/* Remove ALL container constraints */
body.com_monrendezvous .container,
body.com_monrendezvous .container-fluid,
body.com_monrendezvous .container-lg,
body.com_monrendezvous .container-md,
body.com_monrendezvous .container-sm,
body.com_monrendezvous .container-xl,
body.com_monrendezvous .container-xxl,
body.com-rendezvous .container,
body.com-rendezvous .container-fluid,
body.com_rendezvous .container,
body.com_rendezvous .container-fluid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Main body - no padding */
body.com_monrendezvous #sp-main-body,
body.com-rendezvous #sp-main-body,
body.com_rendezvous #sp-main-body {
    padding: 0 !important;
    margin: 0 !important;
}

/* Row - no gutters for full-width layout */
body.com_monrendezvous .row,
body.com-rendezvous .row,
body.com_rendezvous .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.com_monrendezvous .row > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Header - keep some padding for logo and menu */
body.com_monrendezvous #sp-header .container-fluid,
body.com_monrendezvous #sp-header .container {
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

body.com_monrendezvous #form-rdv {
    margin-left: 15%;
    margin-top: 15vh;
}

.view-registration #sp-bottom {
    display: none;
}

/* ==========================================================================
   Header Customizations
   ========================================================================== */

/* Header main styling */
#sp-header {
    position: absolute;
    width: 100%;
    z-index: 100;
}

.header-main {
    background: transparent !important;
    min-height: 80px;
    position: relative;
}

/* Transparent header by default */
#sp-header:not(.header-sticky) {
    background: transparent !important;
}

#sp-header:not(.header-sticky) .nav-link,
#sp-header:not(.header-sticky) .menu-item > a {
    color:#fff;
}

/* ==========================================================================
   Menu Styling - Match Production (ajoca.bzh)
   ========================================================================== */

/* Center menu absolutely in viewport */
#sp-header .header-main .row {
    position: static;
}

#sp-header #sp-logo {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

#sp-header #sp-menu {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50%;
    transform: translateY(-50%);
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#sp-header #sp-menu.col {
    flex: none !important;
}

#sp-menu .navbar {
    justify-content: center;
    width: 100%;
}

#sp-menu .navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

#sp-menu .navbar-nav > .nav-item {
    margin: 0;
    position: relative;
}

/* Add "/" dividers after each menu item (not social icons) */
#sp-menu .navbar-nav:not(.social-icons) > .nav-item:not(.item-150)::after {
    content: "/";
    color: rgba(255, 255, 255, 0.6);
    padding: 0 8px;
    font-size: 14px;
}

#sp-menu .navbar-nav > .nav-item > .nav-link {
    color: #fff;
    font-size: 14px;
    padding: 8px 5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* Dropdown arrow for parent items */
#sp-menu .navbar-nav > .nav-item.dropdown > .nav-link::after,
#sp-menu .navbar-nav > .nav-item.parent > .nav-link::after {
    content: "";
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    transform: rotate(45deg);
    margin-left: 5px;
    margin-bottom: 2px;
}

#sp-menu .navbar-nav > .nav-item > .nav-link:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* Hide duplicate social media menu items (they have icons already) */
#sp-menu .navbar-nav > .item-154,
#sp-menu .navbar-nav > .item-155,
#sp-menu .navbar-nav > .item-226,
#sp-menu .navbar-nav > .item-324 {
    display: none !important;
}

/* FAQ styling - no special styling, just regular link */
#sp-menu .navbar-nav > .item-191 > .nav-link {
    color: #fff;
}

/* NOUVEAU RDV button - hidden from menu (using standalone button instead) */
#sp-menu .navbar-nav > .item-150 {
    display: none !important;
}

/* Standalone Nouveau RDV Button */
.btn-nouveau-rdv {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 1000;
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 0;
    padding: 10px 24px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.btn-nouveau-rdv:hover {
    background: #fff;
    color: #000;
    text-decoration: none;
}

.btn-nouveau-rdv i {
    font-size: 16px;
}

/* Sticky header - adjust button colors */
#sp-header.header-sticky .btn-nouveau-rdv {
    color: #000;
    border-color: #000;
}

#sp-header.header-sticky .btn-nouveau-rdv:hover {
    background: #000;
    color: #fff;
}

/* Mobile: hide standalone button (offcanvas menu has it) */
@media (max-width: 991.98px) {
    .btn-nouveau-rdv {
        display: none;
    }
}

/* Dropdown menus - Compact like production */
#sp-menu .navbar-nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: none;
    border-radius: 0;
    padding: 15px 0;
    min-width: 200px;
    z-index: 1000;
    list-style: none;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    margin-top: 0;
    padding-top: 20px;
}

/* Bridge gap between menu item and dropdown for hover accessibility */
#sp-menu .navbar-nav .nav-item.dropdown::before,
#sp-menu .navbar-nav .nav-item.parent::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
}

/* Show dropdown on hover */
#sp-menu .navbar-nav .nav-item.dropdown:hover > .dropdown-menu,
#sp-menu .navbar-nav .nav-item.parent:hover > .dropdown-menu {
    display: block;
}

/* Ensure parent menu items have position relative for dropdown positioning */
#sp-menu .navbar-nav > .nav-item.dropdown,
#sp-menu .navbar-nav > .nav-item.parent,
#sp-menu .sp-megamenu-parent > li.sp-has-child {
    position: relative;
}

/* Helix/SP Page Builder megamenu support */
#sp-menu .sp-megamenu-parent > li.sp-has-child > .sp-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 200px;
    z-index: 1000;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    padding-top: 10px;
}

#sp-menu .sp-megamenu-parent > li.sp-has-child:hover > .sp-dropdown {
    display: block;
}

/* Bridge for SP megamenu */
#sp-menu .sp-megamenu-parent > li.sp-has-child::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
}

#sp-menu .navbar-nav .dropdown-menu .nav-item {
    display: block;
    margin: 0;
    padding: 0;
}

#sp-menu .navbar-nav .dropdown-menu .nav-item::after {
    display: none;
}

#sp-menu .navbar-nav .dropdown-menu .nav-link {
    color: #333 !important;
    padding: 6px 20px;
    display: block;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
    transition: all 0.2s ease;
}

#sp-menu .navbar-nav .dropdown-menu .nav-link:hover {
    background: transparent;
    color: #0345bf !important;
    padding-left: 25px;
    text-decoration: none;
}

/* Remove trailing slashes */
#sp-menu .social-icons .nav-item:last-child::after,
#sp-menu .navbar-nav > .item-191::after {
    display: none;
}

/* Social icons - fixed position to not affect menu centering */
#sp-menu .social-icons {
    position: fixed;
    right: 195px;
    top: 26px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 1000;
}

/* Social icon items */
#sp-menu .social-icons .nav-item {
    display: flex !important;
    margin: 0;
}

/* Remove any ::after dividers from social icons */
#sp-menu .social-icons .nav-item::after {
    display: none !important;
    content: none !important;
}

#sp-menu .social-icons .nav-link {
    padding: 5px;
    color: #fff;
    font-size: 20px;
}

#sp-menu .social-icons .nav-link:hover {
    opacity: 0.7;
}

/* Hide social icons on mobile */
@media (max-width: 991.98px) {
    #sp-menu .social-icons {
        display: none !important;
    }
}

/* Sticky header - social icons color */
#sp-header.header-sticky .social-icons .nav-link {
    color: #000;
}

/* Logo adjustments */
#sp-header .logo {
    margin-top: 0.5em;
}

[data-device="phone"] #sp-header .logo-img {
    display: none;
}

/* Sticky header white background */
#sp-header.header-sticky {
    background: var(--ajoca-white) !important;
    height: var(--ajoca-header-height);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#sp-header.header-sticky .nav-link,
#sp-header.header-sticky .menu-item > a {
    color: var(--ajoca-black) !important;
}

/* Sticky header - menu dividers darker */
#sp-header.header-sticky #sp-menu .navbar-nav:not(.social-icons) > .nav-item:not(.item-150)::after {
    color: rgba(0, 0, 0, 0.4);
}

/* Sticky header - dropdown arrows black */
#sp-header.header-sticky #sp-menu .navbar-nav > .nav-item.dropdown > .nav-link::after,
#sp-header.header-sticky #sp-menu .navbar-nav > .nav-item.parent > .nav-link::after {
    border-color: black;
}

/* Social icons in menu */
.fa-instagram::before,
.fa-facebook::before,
.fa-linkedin::before {
    color: var(--ajoca-white) !important;
}

.header-sticky .fa-instagram::before,
.header-sticky .fa-facebook::before,
.header-sticky .fa-linkedin::before {
    color: var(--ajoca-black) !important;
}

/* ==========================================================================
   Offcanvas Menu Customizations
   ========================================================================== */

.offcanvas {
    background-color: var(--ajoca-black) !important;
}

.offcanvas .offcanvas-inner {
    background: transparent !important;
}

.offcanvas a {
    color: var(--ajoca-white) !important;
}

.offcanvas .btn-primary {
    width: 100%;
    background-color: var(--ajoca-black);
    color: var(--ajoca-white) !important;
    text-align: center;
}

/* Offcanvas Legal Menu - match main menu styles */
.offcanvas-body > ul.oamenu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offcanvas-body > ul.oamenu > li.has-children {
    position: relative;
}

.offcanvas-body > ul.oamenu .menu-item-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.offcanvas-body > ul.oamenu .menu-item-wrapper > a {
    font-size: 20px;
    font-weight: 500;
    color: #fff !important;
    padding: 10px 0 10px 20px;
    line-height: 36px;
    letter-spacing: -0.3px;
    text-decoration: none;
    flex: 1;
}

.offcanvas-body > ul.oamenu .menu-item-wrapper > a:hover {
    color: #E8642B !important;
}

.offcanvas-body > ul.oamenu .menu-toggle {
    background: transparent;
    border: none;
    color: #fff;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
}

.offcanvas-body > ul.oamenu .menu-toggle:hover {
    color: #E8642B;
}

.offcanvas-body > ul.oamenu .menu-toggle i {
    transition: transform 0.3s ease;
}

.offcanvas-body > ul.oamenu .menu-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.offcanvas-body > ul.oamenu .nav-child.submenu {
    list-style: none;
    padding: 0 0 0 15px;
    margin: 0;
    display: none;
}

.offcanvas-body > ul.oamenu .nav-child.submenu.show {
    display: block;
}

.offcanvas-body > ul.oamenu .nav-child.submenu > li > a {
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 8px 0;
    display: block;
    text-decoration: none;
}

.offcanvas-body > ul.oamenu .nav-child.submenu > li > a:hover {
    color: #E8642B !important;
}

/* Offcanvas body layout */
#offcanvasMenu .offcanvas-body {
    position: relative !important;
    min-height: 100%;
    padding-bottom: 140px !important; /* Space for social icons and button */
}


/* Offcanvas Nouveau RDV Button - only in offcanvas sidebar */
#offcanvasMenu .offcanvas-body > .btn-nouveau-rdv {
    display: block;
    position: absolute !important;
    bottom: 20px !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    background-color: #EFBF04;
    color: #fff !important;
    text-align: center;
    padding: 15px 20px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0;
    transition: all 0.3s ease;
}

#offcanvasMenu .offcanvas-body > .btn-nouveau-rdv:hover,
#offcanvasMenu .offcanvas-body > .btn-nouveau-rdv:focus {
    background-color: #D4A904;
    color: #fff !important;
    text-decoration: none;
}

/* Adjust social icons position to be above button */
#offcanvasMenu .offcanvas-body > .offcanvas-social {
    position: absolute !important;
    bottom: 80px !important;
    left: 0 !important;
    right: 0 !important;
    padding: 0 20px !important;
}

/* Mobile header info */
#mobileHeader {
    display: none;
}

[data-device="phone"] #mobileHeader {
    display: block;
    color: var(--ajoca-white);
    font-style: normal;
    font-weight: 700;
    position: absolute;
    left: 50px;
    right: 50px;
}

#mobileHeader .localisation {
    font-size: 10px;
    display: block;
    clear: both;
    margin-top: -5px;
    letter-spacing: 1px;
}

/* ==========================================================================
   Navigation Menu Customizations
   ========================================================================== */

nav.sp-megamenu-wrapper {
    width: 100%;
}

nav.sp-megamenu-wrapper ul {
    float: left;
    text-align: left;
    width: 100%;
}

nav.sp-megamenu-wrapper li:last-child {
    float: right;
}

/* Menu underline effect */
.sp-megamenu-parent > li > a::before,
.sp-megamenu-parent > li > span::before {
    content: "";
    position: absolute;
    top: calc(50% + 15px);
    left: 15px;
    right: 100%;
    height: 3px !important;
    background-color: var(--ajoca-white) !important;
    transition: 0.3s;
}

.header-sticky .sp-megamenu-parent > li > a::before,
.header-sticky .sp-megamenu-parent > li > span::before {
    background-color: var(--ajoca-black) !important;
}

/* Dropdown overflow fix */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    overflow: hidden;
}

/* ==========================================================================
   Super Title Styles (Large Hero Text)
   ========================================================================== */

.super-title h2 {
    font-size: 120px;
    font-weight: 700;
    line-height: 1.1;
}

@media screen and (max-width: 1400px) {
    .super-title h2 {
        font-size: 105px !important;
    }
}

@media screen and (max-width: 1000px) {
    .super-title h2 {
        font-size: 85px !important;
    }
}

@media screen and (max-width: 800px) {
    .super-title h2 {
        font-size: 65px !important;
    }
}

@media screen and (max-width: 600px) {
    .super-title h2 {
        font-size: 45px !important;
    }
}

/* ==========================================================================
   Conseiller (Advisor) Styles
   ========================================================================== */

.conseiller {
    width: 14%;
    margin: 1%;
    padding: 1%;
    background-color: #ddd;
    display: block;
    float: left;
    height: 250px;
}

.conseiller p {
    margin-top: 65%;
    display: block;
    width: 100%;
    line-height: 2em;
}

.conseiller p a {
    display: block;
    margin: auto;
    border: 5px solid var(--ajoca-white);
    line-height: 2em;
    color: var(--ajoca-white);
    text-align: center;
}

/* ==========================================================================
   Locations (Lieux de rencontre)
   ========================================================================== */

.lieux-de-rencontre {
    display: block;
    clear: both;
    overflow: hidden;
    text-align: center;
}

.lieu-de-rencontre {
    width: 29%;
    margin: 1%;
    padding: 1%;
    display: inline-block;
    height: 350px;
}

.lieu-de-rencontre p {
    margin-top: 65%;
    display: block;
    width: 100%;
    line-height: 2em;
}

.lieu-de-rencontre p a {
    display: block;
    margin: auto;
    border: 5px solid var(--ajoca-white);
    line-height: 2em;
    color: var(--ajoca-white);
    text-align: center;
}

[data-device="phone"] .lieu-de-rencontre {
    width: 80%;
    margin: 9%;
    height: auto;
}

[data-device="phone"] .lieu-de-rencontre p {
    margin-top: 0;
}

/* ==========================================================================
   Appointment Booking Styles (Rendezvous)
   ========================================================================== */

#datesproposees {
    width: 40%;
    position: absolute;
    left: 0;
    top: 5%;
}

#slots {
    width: 60%;
    position: absolute;
    left: 0%;
    top: 5%;
    margin-top: 30vh;
}

ul.prochains {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.prochains li {
    font-size: 1em;
    line-height: 1.5em;
    text-align: left;
    border: 1px solid #eee;
    padding: 5px 12px;
    margin-bottom: 3px;
    background-color: var(--ajoca-white);
    color: var(--ajoca-black);
    overflow: hidden;
    transition: all 0.3s ease;
}

ul.prochains li:hover {
    transform: scale(1.05);
}

ul.prochains li.next {
    background-color: transparent;
    color: var(--ajoca-white);
    border: 0;
}

ul.prochains li i {
    font-size: 2em;
    color: #666;
    float: left;
    display: block;
    margin-right: 15px;
}

#slots ul.prochains li {
    width: 31%;
    margin: 1%;
    float: left;
    font-size: 11px;
    background: var(--ajoca-black);
    color: var(--ajoca-white);
    border: 0;
    display: none;
}

#slots ul.prochains li:nth-child(-n+9) {
    display: block;
}

#slots ul.prochains li:nth-child(3n+1) {
    clear: left;
}

/* Confirmation modal */
#confirmation {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: none;
}

#confirmation .window {
    width: 25%;
    background-color: var(--ajoca-white);
    color: var(--ajoca-black);
    padding: 5%;
    margin: auto;
    margin-top: 15vh;
}

#confirmation .window i {
    font-size: 10vh;
    display: block;
    margin: auto;
    text-align: center;
    color: green;
}

#confirmation .window p {
    color: var(--ajoca-black);
    font-size: 2vh;
    line-height: 2.5vh;
}

[data-device="phone"] #confirmation .window {
    width: 100%;
    height: 100vh;
    margin-top: 0;
    padding: 2rem;
}

[data-device="phone"] #confirmation h2 {
    font-size: 2em;
    text-align: center;
    width: 100%;
}

/* ==========================================================================
   Calendar Styles (DPCalendar)
   ========================================================================== */

.com-dpcalendar.view-event {
    min-height: 100vh;
    background-image: url('/images/photos-colorees/mission-locale-fond-colore-aout-01.webp');
    background-size: cover;
}

/* Hide early morning slots */
*[data-time="00:00:00"],
*[data-time="00:30:00"],
*[data-time="01:00:00"],
*[data-time="01:30:00"],
*[data-time="02:00:00"],
*[data-time="02:30:00"],
*[data-time="03:00:00"],
*[data-time="03:30:00"],
*[data-time="04:00:00"],
*[data-time="04:30:00"],
*[data-time="05:00:00"],
*[data-time="05:30:00"],
*[data-time="06:00:00"],
*[data-time="06:30:00"],
*[data-time="07:00:00"],
*[data-time="07:30:00"] {
    display: none;
}

.fc-daygrid-body {
    display: none;
}

/* ==========================================================================
   Question Form Styles
   ========================================================================== */

.bloc_questions {
    display: none;
    min-height: 80vh;
}

.bloc_questions h2 {
    font-size: 1em;
    color: var(--ajoca-white);
}

.question {
    display: none;
    margin-top: 20vh;
    text-align: center;
}

.question h3 {
    text-align: center;
    background: var(--ajoca-black);
    color: var(--ajoca-white);
    padding: 5px 12px;
    display: inline-block;
}

.question p {
    color: var(--ajoca-white);
    text-align: center;
    padding-top: 2em;
}

.question p a {
    color: var(--ajoca-white);
}

/* Radio button styling */
.rad-label {
    display: flex;
    align-items: center;
    border-radius: 100px;
    padding: 14px 16px;
    margin: 10px 0;
    cursor: pointer;
    transition: 0.3s;
    width: 20%;
    float: left;
}

[data-device="phone"] .rad-label {
    width: 100% !important;
}

.rad-label:hover,
.rad-label:focus-within {
    background: hsla(0, 0%, 80%, 0.14);
}

.rad-input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.rad-design {
    width: 22px;
    height: 22px;
    border-radius: 100px;
    background: linear-gradient(to right bottom, hsl(154, 97%, 62%), hsl(225, 97%, 62%));
    position: relative;
}

.rad-design::before {
    content: '';
    display: inline-block;
    width: inherit;
    height: inherit;
    border-radius: inherit;
    background: hsl(0, 0%, 90%);
    transform: scale(1.1);
    transition: 0.3s;
}

.rad-input:checked + .rad-design::before {
    transform: scale(0);
}

.rad-text {
    color: var(--ajoca-white);
    margin-left: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 900;
    transition: 0.3s;
}

.rad-input:checked ~ .rad-text {
    color: hsl(0, 0%, 40%);
}

.rad-label:hover .rad-text {
    color: var(--ajoca-white);
    background-color: var(--ajoca-black);
    padding: 0 12px;
}

/* Custom select styling */
.bloc_questions select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    box-shadow: none;
    border: 0 !important;
    background: var(--ajoca-white);
}

.bloc_questions .select {
    position: relative;
    display: flex;
    width: 20em;
    height: 3em;
    line-height: 3;
    background: var(--ajoca-white);
    overflow: hidden;
    border-radius: 1.5em;
    margin: auto;
}

.bloc_questions .select::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 1em;
    background: #eee;
    cursor: pointer;
    pointer-events: none;
    transition: 0.25s all ease;
}

.bloc_questions .select:hover::after {
    color: #f39c12;
}

/* ==========================================================================
   Autocomplete Styles
   ========================================================================== */

ul.ui-autocomplete {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-width: 500px;
}

ul.ui-autocomplete li {
    background-color: var(--ajoca-white);
    padding: 5px 12px;
    margin: 0;
    line-height: 120%;
    transition: all 0.5s;
}

ul.ui-autocomplete li a {
    color: var(--ajoca-black);
    line-height: 120%;
}

ul.ui-autocomplete li:hover {
    background-color: var(--ajoca-black);
}

ul.ui-autocomplete li:hover a {
    font-weight: 700;
    transform: scale(1.1);
    color: var(--ajoca-white);
}

/* ==========================================================================
   OSServices Booking (Legacy)
   ========================================================================== */

.com-osservicesbooking #sp-main-body {
    background-image: url('/images/photos-colorees/mission_locale-mlcoa-trouver_emplois.webp');
    background-size: cover;
    min-height: 100vh;
}

.com-osservicesbooking #sp-main-body h1 {
    text-align: center;
    color: var(--ajoca-white);
    margin-top: 4em;
}

#osbcontainer p {
    color: var(--ajoca-white);
    text-align: center;
}

#osbcontainer #maincontentdiv {
    display: none;
}

#calendardivleft {
    margin: auto;
}

/* ==========================================================================
   Scroll to Top Button
   ========================================================================== */

.sp-scroll-up,
.back-to-top {
    bottom: 70px !important;
    right: 20px !important;
}

/* ==========================================================================
   Footer Customizations
   ========================================================================== */

#sp-footer a {
    color: #FFF
}

#sp-footer a:hover {
    color: var(--ajoca-black) !important;
    font-weight: 700;
}

/* Footer copyright links - same color as text */
.footer-copyright a {
    color: inherit;
    text-decoration: none;
}

.footer-copyright a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Logo Toggle States
   ========================================================================== */

.top_logo {
    display: block;
}

.header-sticky .top_logo {
    display: none;
}

.content_logo {
    display: none;
}

.header-sticky .content_logo {
    display: block;
}

/* ==========================================================================
   Mobile Device Specific
   ========================================================================== */

[data-device="phone"] {
    background-color: rgb(124, 214, 240);
}

[data-device="phone"] #sp-logo {
    margin: 0;
    padding: 0.5rem 0;
}

[data-device="phone"].com-rendezvous #sp-main-body {
    height: auto;
    color: var(--ajoca-white);
    padding-bottom: 15rem;
}

[data-device="phone"] #datesproposees {
    width: 100%;
    position: relative;
}

[data-device="phone"] #datesproposees li {
    display: none;
}

[data-device="phone"] #datesproposees li:first-child {
    display: block;
    font-size: 3em;
}

[data-device="phone"] #slots {
    width: 100%;
    position: relative;
    margin-top: 0 !important;
}

[data-device="phone"] #slots ul.prochains li {
    background-color: var(--ajoca-black);
    color: var(--ajoca-white);
    text-align: center;
    border: 0;
    width: 100% !important;
}

[data-device="phone"] ul.prochains {
    padding: 0;
}

[data-device="phone"] h2 {
    font-size: 1em;
    background-color: var(--ajoca-white);
    padding: 5px;
    color: var(--ajoca-black);
    display: inline-block;
}

[data-device="phone"] h4 {
    font-size: 1em;
    text-align: center;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media screen and (max-width: 1400px) {
    #datesproposees {
        position: relative !important;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #slots {
        position: relative !important;
        width: 100%;
        margin: 0;
        padding: 0;
        left: 0 !important;
    }

    #slots ul.prochains li {
        width: 31% !important;
        margin: 1%;
        float: left;
        font-size: 11px;
    }
}

@media screen and (max-width: 800px) {
    #sp-bottom {
        display: none;
    }
}

/* ==========================================================================
   RGPD Consent Styles (Global)
   ========================================================================== */

.rgpd-consent {
    margin-top: 1rem;
}

.rgpd-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.rgpd-checkbox-wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: #0345bf;
}

.rgpd-checkbox-wrapper label {
    font-size: 0.9rem;
    color: #333;
    cursor: pointer;
    line-height: 1.4;
    margin-bottom: 0;
    display: inline;
}

.rgpd-info-icon {
    display: inline-flex;
    align-items: center;
    cursor: help;
    color: #0345bf;
    font-size: 0.9rem;
    margin-left: 4px;
    vertical-align: middle;
    position: relative;
}

.rgpd-info-icon i {
    transition: color 0.2s;
}

.rgpd-info-icon:hover i,
.rgpd-info-icon:focus i {
    color: #022e8a;
}

.rgpd-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 450px;
    height: fit-content;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    background: #333;
    color: #fff;
    font-size: 0.85rem;
    line-height: 1.6;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10000;
    text-align: left;
}

.rgpd-info-icon:hover .rgpd-tooltip,
.rgpd-info-icon:focus .rgpd-tooltip {
    opacity: 1;
    visibility: visible;
}

/* Tooltip appended to body via JS for proper centering */
.rgpd-tooltip-body {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
}

/* Link styling in tooltip */
.rgpd-tooltip a,
.rgpd-tooltip-body a {
    color: #fff;
    text-decoration: underline;
    font-weight: 500;
}

.rgpd-tooltip a:hover,
.rgpd-tooltip-body a:hover {
    color: #fff;
    text-decoration: none;
    opacity: 0.85;
}

.rgpd-error {
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: #fff5f5;
    border-radius: 6px;
    border-left: 3px solid #dc3545;
}

@media (max-width: 768px) {
    .rgpd-checkbox-wrapper label {
        font-size: 0.85rem;
    }
    .rgpd-tooltip {
        width: 90vw;
    }
}

#tarteaucitronIcon {display:none!important;}
header .social-icons i {font-size:2rem;transform:scale(0.8);transition:all 1s;}
header .social-icons i:hover {font-size:2rem;transform:scale(1);transition:all 1s;}


@media (max-width: 1400px) {
    ul.social-icons {display:none!important;}
}

@media (min-width: 1401px) {
 #sp-menu li a {font-size:1.2rem!important;}
 .question {margin-top:40vh!important;}
}

/* ==========================================================================
   Mobile RDV Button (next to burger menu)
   ========================================================================== */

.btn-rdv-mobile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #000 !important;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-rdv-mobile:hover,
.btn-rdv-mobile:focus {
    background: #f0f0f0;
    color: #000 !important;
    text-decoration: none;
}

.btn-rdv-mobile i {
    font-size: 14px;
}

/* Sticky header - adjust mobile RDV button (orange on white header) */
#sp-header.header-sticky .btn-rdv-mobile {
    background: #E8642B;
    color: #fff !important;
}

#sp-header.header-sticky .btn-rdv-mobile:hover,
#sp-header.header-sticky .btn-rdv-mobile:focus {
    background: #d55a25;
}

/* Offcanvas toggler styling */
.offcanvas-toggler {
    color: #fff;
    padding: 8px;
}

#sp-header.header-sticky .offcanvas-toggler {
    color: #000;
}

.com_sppagebuilder.view-page, .com_blocks.view-layout {background-color:#18517B}

/** Hack pour page d'accueil **/
/** Jérôme **/

body.itemid-101 .sppb-addon-title {
    display: none;
}

body.itemid-101 #sppb-addon-1764153356105 .titre-container h2, body.itemid-101 .sppb-1764153356105 .titre-container h2 {
    color:#000;
}

body.itemid-101 #sp-header:not(.header-sticky) #sp-menu .nav-item:not(:last-child)::after {
    color: black !important;
}
body.itemid-101 #sp-header:not(.header-sticky) #sp-menu .nav-link,
body.itemid-101 #sp-header:not(.header-sticky) #sp-menu .menu-item > a {
    color: black !important;
}
body.itemid-101 #sp-menu .navbar-nav > .nav-item.dropdown > .nav-link::after,
body.itemid-101 #sp-menu .navbar-nav > .nav-item.parent > .nav-link::after {
    content: "";
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    transform: rotate(45deg);
    margin-left: 5px;
    margin-bottom: 2px;
}
body.itemid-101 .fa-instagram::before,
body.itemid-101 .fa-facebook::before,
body.itemid-101 .fa-linkedin::before {
    color: black !important;
}
body.itemid-101 #sp-menu .social-icons .nav-link {
    color: #000;
}
body.itemid-101 .btn-nouveau-rdv {
    color: #000000;
    border: 2px solid #000000;
}
body.itemid-101 .btn-nouveau-rdv:hover {
    background: #fff;
    color: #000;
}
body.itemid-101 #sp-logo lottie-player {
    filter: brightness(0);
}
body.itemid-101 #sp-header:not(.header-sticky) #sp-menu .nav-link::before,
body.itemid-101 #sp-header:not(.header-sticky) #sp-menu .menu-item > a::before {
    background-color: black !important;
}

/* Site tools, bottom left: accessibility (oui4all) above cookies. */
.ajoca-tools { position: fixed; left: 16px; bottom: 16px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.ajoca-tools__btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 2px solid #fff; border-radius: 50%;
  color: #fff; background: var(--ajoca-primary, #0345bf); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); cursor: pointer;
  transition: background .15s, transform .15s;
}
.ajoca-tools__btn:hover, .ajoca-tools__btn[aria-expanded="true"] { background: var(--ajoca-secondary, #044cd0); }
.ajoca-tools__btn:hover { transform: scale(1.06); }
.ajoca-tools__btn:focus-visible { outline: 3px solid var(--ajoca-primary, #0345bf); outline-offset: 3px; }
.has-consent-button .ck-icon, .has-consent-button #tarteaucitronIcon { display: none !important; }
@media (max-width: 767.98px) { .ajoca-tools { left: 12px; bottom: 12px; gap: 8px; } .ajoca-tools__btn { width: 40px; height: 40px; } }
@media print { .ajoca-tools { display: none; } }

/* Blocks pages: content in the same centred column as SP Page Builder rows (the rule above makes every .container full width) */
.blocks-layout .container{max-width:100%!important;padding-left:15px;padding-right:15px}
@media (min-width:576px){.blocks-layout .container{max-width:540px!important}}
@media (min-width:768px){.blocks-layout .container{max-width:720px!important}}
@media (min-width:992px){.blocks-layout .container{max-width:960px!important}}
@media (min-width:1200px){.blocks-layout .container{max-width:1140px!important}}
@media (min-width:1400px){.blocks-layout .container{max-width:1320px!important}}

/* ==========================================================================
   Account pages (login, logout, reset, remind): a centred card on the site blue
   ========================================================================== */
body.com_users{background-color:#18517B}
.com_users #sp-component{padding:calc(var(--ajoca-header-height) + 56px) 16px 72px}
.com_users #system-message-container{max-width:460px;margin:0 auto 16px}
.com_users #system-message-container joomla-alert{border:0;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.18);font-style:normal}
.ajoca-account,.com_users .com-users-logout,.com_users .com-users-reset,.com_users .com-users-remind,.com_users .com-users-registration,.com_users .com-users-profile{max-width:460px;margin:0 auto}
.ajoca-account__card,.com_users .com-users-logout,.com_users .com-users-reset,.com_users .com-users-remind,.com_users .com-users-registration,.com_users .com-users-profile{background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.25);padding:40px 36px 32px;color:var(--ajoca-text)}
.ajoca-account__head{text-align:center;margin-bottom:28px}
.ajoca-account__icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#e8f0f7;color:#18517B;margin-bottom:14px}
.ajoca-account__title,.com_users .page-header h1{font-family:var(--ajoca-font-heading);font-size:28px;line-height:1.2;margin:0 0 8px;color:#18517B}
.ajoca-account__intro{margin:0;color:var(--ajoca-text-light);font-size:15px;font-style:normal}
.ajoca-account__image{display:block;max-width:100%;height:auto;margin:16px auto 0;border-radius:12px}
.ajoca-account fieldset{border:0;margin:0;padding:0}
.ajoca-account .control-group,.com_users .control-group{margin-bottom:18px}
.ajoca-account .control-label,.com_users .control-label{margin-bottom:6px}
.ajoca-account .control-label label,.com_users .control-label label,.com_users .form-label{font-size:14px;font-weight:600;font-style:normal;color:var(--ajoca-text)}
.ajoca-account .star,.com_users .star{color:#cb3d3f}
.com_users .form-control{border:1px solid #c9d3de;border-radius:10px;padding:10px 14px;line-height:24px;font-size:16px;background:#fff;transition:border-color .15s,box-shadow .15s}
.com_users .form-control:focus{border-color:#18517B;box-shadow:0 0 0 3px rgba(24,81,123,.18);background:#fff}
.com_users .input-group .form-control{border-top-right-radius:0;border-bottom-right-radius:0}
.com_users .input-group .input-password-toggle{border:1px solid #c9d3de;border-left:0;border-radius:0 10px 10px 0;background:#f3f6f9;color:#18517B;padding:0 14px}
.com_users .input-group .input-password-toggle:hover{background:#e8f0f7}
.ajoca-account__remember{margin:4px 0 22px;font-size:15px;font-style:normal}
.ajoca-account__remember .form-check-input{width:18px;height:18px;margin-top:3px;border-color:#9fb0c2}
.ajoca-account__remember .form-check-input:checked{background-color:#18517B;border-color:#18517B}
.ajoca-account__submit,.com_users .btn-primary{display:block;width:100%;padding:13px 20px;border:0;border-radius:10px;background:#e97b05;color:#fff;font-size:16px;font-weight:600;font-style:normal;letter-spacing:.3px;transition:background-color .15s}
.ajoca-account__submit:hover,.ajoca-account__submit:focus-visible,.com_users .btn-primary:hover{background:#0b8c8a;color:#fff}
.ajoca-account__submit:focus-visible,.ajoca-account__alt:focus-visible,.ajoca-account__links a:focus-visible{outline:3px solid #18517B;outline-offset:2px}
.ajoca-account__or{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--ajoca-text-light);font-size:13px;font-style:normal;text-transform:uppercase;letter-spacing:.08em}
.ajoca-account__or::before,.ajoca-account__or::after{content:"";flex:1;height:1px;background:#e1e6ec}
.ajoca-account__alt{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px 16px;border:1px solid #c9d3de;border-radius:10px;background:#fff;color:#18517B;font-size:15px;font-style:normal}
.ajoca-account__alt:hover{background:#f3f6f9;border-color:#18517B;color:#18517B}
.ajoca-account__alt-icon,.ajoca-account__alt .icon{display:inline-flex;width:20px;height:20px;flex:none}
.ajoca-account__alt-icon svg{width:100%;height:100%;fill:currentColor}
.ajoca-account__links{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;margin:24px 0 0;padding:20px 0 0;border-top:1px solid #e1e6ec;font-size:14px}
.ajoca-account__links a{color:#18517B;font-style:normal;text-decoration:underline;text-underline-offset:3px}
.ajoca-account__links a:hover{color:#e97b05}
.com_users .form-control-feedback{display:block;margin-top:4px;font-size:13px;font-weight:400;color:#cb3d3f}
.com_users .form-control.invalid{border-color:#cb3d3f}
.ajoca-account__alt{text-transform:none;font-weight:600}
@media (max-width:575.98px){.com_users #sp-component{padding:calc(var(--ajoca-header-height-mobile) + 32px) 28px 56px}.ajoca-account__card,.com_users .com-users-logout,.com_users .com-users-reset,.com_users .com-users-remind{padding:32px 22px 24px}}

/* No sideways scroll on phones: the off-screen menu and the main row's gutters reached past the screen edge */
html, body { overflow-x: clip; }

/* SP Page Builder rules for the classes still used in raw HTML (articles, layouts, mod_oajson): buttons, grid, alignment.
   Its stylesheet left with the page builder; extracted from SPPB 6.6.2 sppagebuilder.css, only these classes. */
.sppb-text-center{text-align:center}
.sppb-row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}
.sppb-col-md-12,.sppb-col-md-6{position:relative;width:100%;min-height:1px;padding-right:15px;padding-left:15px}
@media (min-width:992px){.sppb-col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.sppb-col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}
.sppb-btn{display:inline-block;font-weight:400;text-align:center;white-space:pre-line;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;padding:8px 12px;font-size:16px;line-height:1.25;border-radius:4px;transition:all .15s ease-in-out;cursor:pointer}
.sppb-btn:focus,.sppb-btn:hover{text-decoration:none}
.sppb-btn:focus{outline:0;box-shadow:0 0 0 3px rgba(0,123,255,.25)}
.sppb-btn:disabled{opacity:.65}
.sppb-btn:active{background-image:none}
.sppb-btn-primary{color:#fff;background-color:#3071ff;border-color:#3071ff}
.sppb-btn-primary:hover{color:#fff;background-color:#1e58d6;border-color:#1e58d6}
.sppb-btn-primary:focus{color:#fff;box-shadow:0 0 0 3px rgba(48,113,255,.5)}
.sppb-btn-primary:disabled{background-color:#3071ff;border-color:#3071ff;color:#fff}
.sppb-btn-primary:active{background-color:#1e58d6;background-image:none;border-color:#1e58d6}
.sppb-btn-square{border-radius:0}

/* Social board (com_flux): the photo behind it, as on the old site (it was hard-coded in com_flux's stylesheet) */
body.com_flux #sp-main-body {
    background: #e8a4ab url('/images/2021/02/27/mloca-connexion.webp') center right / cover fixed no-repeat;
}


/* Social board (com_flux 1.2.1+): the component is neutral, AJOCA's look lives here (it used to be hard-coded in com_flux's stylesheet) */
body.com_flux #sp-main-body { min-height: 100vh; }
body.com_flux #sp-component { max-width: 1000px; margin: 0 auto; padding: 2rem; }
body.com_flux .com-flux { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body.com_flux .com-flux.flux-board { margin-top: 15vh; }
body.com_flux .flux-board-title {
    font-size: 5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    font-family: 'Expletus Sans', 'Impact', sans-serif;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
body.com_flux .flux-board-subtitle {
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 5vh;
    font-family: 'Expletus Sans', sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
/* two-column wall of cards showing only picture, 3 lines of text and the share buttons */
body.com_flux .flux-grid { column-count: 2; }
body.com_flux .flux-filters,
body.com_flux .flux-item-header,
body.com_flux .flux-read-more,
body.com_flux a.flux-item-link,
body.com_flux .flux-item-footer { display: none !important; }
body.com_flux .flux-item-text {
    flex: 1;
    max-height: 4.5em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
@media (max-width: 768px) {
    body.com_flux .flux-grid { column-count: 1; }
    body.com_flux .flux-board-title { font-size: 2.5rem; }
}
@media (max-width: 576px) {
    body.com_flux #sp-component { padding: 1rem; }
    body.com_flux .flux-board-title { font-size: 2rem; }
    body.com_flux .flux-board-subtitle { font-size: 1.125rem; }
    body.com_flux .flux-item-content { padding: 1rem; }
}

/* Very large headings (Scootéleck'tro…): a word wider than its box breaks inside it instead of running past the edge (no hyphenation of words that fit) */
.blocks-layout :is(h1, h2, h3) { overflow-wrap: break-word; }