/**
 * 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.jpg');
    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;
}

/* 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.jpg');
    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.jpg');
    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;}
}