/* ============================================================
   Mia Pro — Design System partagé (toutes les pages)
   ============================================================ */

/* ── Base ── */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 300 !important;
    letter-spacing: -0.02em !important;
}
p, .paragraph-regular, .paragraph-large, .paragraph-small {
    font-weight: 300 !important;
}
.nav-link, .w-nav-link {
    font-weight: 400 !important;
    font-size: 14px !important;
}
.search-button, .button-primary, .w-button {
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* ── Variables de marque ── */
:root {
    --mia-accent:      #778fed;
    --mia-accent-dark: #5a72d6;
    --mia-cta:         #d4e34e;
    --mia-dark:        #222222;

    /* Oskard design tokens */
    --sep:             rgba(0, 0, 0, 0.08);
    --bg-primary:      #ffffff;
    --bg-secondary:    #f5f5f7;
    --bg-tertiary:     #ebebed;
    --label-primary:   #1d1d1f;
    --label-secondary: #6e6e73;
    --label-tertiary:  #aeaeb2;
    --radius-xl:       28px;
    --radius-lg:       16px;
    --radius-md:       12px;
    --radius-sm:        8px;
}

/* ── Logo ── */
.navbar .logo {
    height: 30px !important;
    width: auto !important;
    max-width: none !important;
    transform: scale(2);
    transform-origin: left center;
}
.footer-logo {
    height: 32px !important;
    width: auto !important;
    max-width: none !important;
    filter: invert(1);
    transform: scale(1.8);
    transform-origin: left center;
}

/* ── Couleurs primaires ── */
.button-primary,
input.button-primary[type="submit"],
.search-button {
    background-color: #d4e64c !important;
    color: #111111 !important;
    border-color: #d4e64c !important;
}
.button-primary:hover,
.search-button:hover {
    background-color: #bece3a !important;
    border-color: #bece3a !important;
}
.text-color-primary { color: var(--mia-accent) !important; }
a       { color: var(--mia-accent); }
a:hover { color: var(--mia-accent-dark); }
.header-badge-light, .blog-category, .job-category {
    background-color: rgba(119, 143, 237, 0.12) !important;
    color: var(--mia-accent-dark) !important;
}
.header-company-span {
    color: var(--mia-accent) !important;
    font-weight: 600;
}
.w-webflow-badge { display: none !important; }

/* ── Bannière annonce — masquée sur toutes les pages ── */
.banner-announcement { display: none !important; }

/* ── Typographie — échelle Apple ── */
h2 { font-size: 42px !important; line-height: 54px !important; font-weight: 300 !important; }
h3 { font-size: 32px !important; line-height: 44px !important; font-weight: 300 !important; }
h4 { font-size: 28px !important; line-height: 40px !important; font-weight: 300 !important; }
h5 { font-size: 20px !important; line-height: 28px !important; font-weight: 300 !important; }
p, .paragraph-regular { font-size: 16px !important; line-height: 22px !important; font-weight: 300 !important; }
.paragraph-small, .paragraph-small * { font-size: 14px !important; line-height: 20px !important; font-weight: 300 !important; }

/* ── Navbar — floating island avec gouttières #222222 ── */
body {
    padding-top: 0 !important;
    background-color: #110a4b !important;
}
.navbar.w-nav {
    max-width: 1140px !important;
    margin: 0 auto !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--sep) !important;
    box-shadow: none !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
.nav-link.w-nav-link   { border-radius: var(--radius-sm) !important; }
.menu-button.w-nav-button { border-radius: var(--radius-sm) !important; }

/* ── Fonds blancs pour couvrir le body #222222 ── */
.section-header        { position: relative; background: #110a4b !important;
                         padding-top: 48px !important; padding-bottom: 72px !important; }
.section-regular       { background-color: #ffffff !important; }
.neutral-100           { background-color: #f9f9fb !important; }
.blog-section          { background-color: #ffffff !important; }
.footer-section        { background-color: #ffffff !important; }
.section-small         { background-color: #ffffff !important; }
.browse-header-section { background-color: #ffffff !important; }
.browse-wrap           { background-color: #ffffff !important; }
.section-about-header  { background-color: #110a4b !important; }
.section-companies     { background-color: #ffffff !important; }

/* ── Bande hero company ── */
.section-about-header { position: relative !important; }
.about-header-bg { background-color: #110a4b !important; }
.section-about-header .container-regular { position: relative; z-index: 1; }

/* ── Bande hero (fond #110a4b sur section, blanc en dessous via ::after) ── */
.section-header::after {
    content: '';
    position: absolute;
    top: 356px; left: 0; right: 0; bottom: 0;
    background: #ffffff;
    z-index: 0;
}
@media (max-width: 767px) {
    .section-header::after { top: 456px; }
}
.section-header .container-regular { position: relative; z-index: 1; }
.header-title-grid { margin-bottom: 48px !important; }
.section-header h2,
.section-header p,
.section-header .header-badge > div { color: #fff !important; }
.section-header a { color: var(--mia-accent) !important; }
.section-header .header-badge-light,
.section-header .header-badge-light div {
    background-color: #d4e34d !important;
    color: #000 !important;
}
.section-header .header-badge { background-color: #222222 !important; }
.section-header .header-badge > div:last-child { color: #fff !important; }

/* ── Search bar — deux champs ── */
.search-two-fields {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}
.search-two-fields .search-input-wrapper { flex: 1; }
.search-city-wrapper {
    border-left: 1px solid #e0e0e0;
    padding-left: 16px;
}
.search-city-wrapper svg.icon-regular {
    width: 20px; height: 20px;
    color: #888; flex-shrink: 0;
}
@media (max-width: 767px) {
    .search-two-fields { flex-wrap: wrap; }
    .search-city-wrapper { border-left: none; border-top: 1px solid #e0e0e0; }
}

/* ── Supprimer toutes les ombres ── */
* { box-shadow: none !important; }
.job-card-wrap:hover,
.job-card:hover { box-shadow: 0 0 0 1px var(--sep) !important; }

/* ── Inputs ── */
.w-input, .search-field    { border: 1px solid var(--sep) !important;
                              border-radius: var(--radius-md) !important; }
.w-input:focus,
.search-field:focus        { border-color: #778fed !important; outline: none !important; }

/* ── Arrondis — système 4 niveaux Oskard ── */

/* Formulaires */
.search.w-form             { border-radius: var(--radius-lg) !important; }
.button-primary,
.search-button,
input[type="submit"].w-button { border-radius: var(--radius-lg) !important; }

/* XL (28px) */
.cta-block                 { border-radius: var(--radius-xl) !important; }

/* LG (16px) */
.job-border                { border-radius: var(--radius-lg) !important;
                             border: 1px solid var(--sep) !important; }
.job-card-wrap, .job-card,
.card-regular              { border-radius: var(--radius-lg) !important;
                             border: 1px solid var(--sep) !important; }
.company-card              { border-radius: var(--radius-lg) !important;
                             border: 1px solid var(--sep) !important; }
.blog-card                 { border-radius: var(--radius-lg) !important;
                             border: 1px solid var(--sep) !important;
                             overflow: hidden !important; }
.blog-card-thumbnail       { border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
                             overflow: hidden !important; }
.testimonial-content-wrap,
.testimonial-image-wrap    { border-radius: var(--radius-lg) !important; }
.feature-image-wrap        { border-radius: var(--radius-lg) !important; overflow: hidden !important; }
.header-image-wrap         { border-radius: var(--radius-lg) !important; overflow: hidden !important; }
@media (min-width: 992px) {
    .header-image-wrap { border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important; }
    .section-header { padding-bottom: 120px !important; }
    .header-title-grid { margin-bottom: 100px !important; }

}

/* MD (12px) */
.header-badge              { border-radius: var(--radius-md) !important; }
.icon-wrap-regular         { border-radius: var(--radius-md) !important; overflow: hidden; }
.job-company-wrap .icon-wrap-regular img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.form-text-field.w-input   { border-radius: var(--radius-md) !important; }
.company-card-employees    { border-radius: var(--radius-md) !important; }
.cta-icon-wrapper          { border-radius: var(--radius-md) !important; }

/* SM (8px) */
.header-badge-light        { border-radius: var(--radius-sm) !important; }
.job-category, .job-hours,
.blog-category             { border-radius: var(--radius-sm) !important; }
.banner-button             { border-radius: var(--radius-sm) !important; }
.logo-wrap                 { border-radius: var(--radius-sm) !important; }
.logo-wrap img             { filter: invert(0.55); }
.partnership-text-wrap     { border-radius: var(--radius-sm) !important; }

/* Circulaire */
.company-arrow-l, .company-arrow-r,
.blog-slider-left-button, .blog-slider-right-button,
.testimonial-slider-left-button,
.testimonial-slider-right-button { border-radius: 50% !important; }
.footer-social-link        { border-radius: 50% !important; }