/* ==========================================================================
   INGEFLEX FRAMEWORK — CSS GLOBAL
   Fichier : assets/css/ingeflex.css
   Version : 1.1.0
   ========================================================================== */

/* ==========================================================================
   01 — DESIGN SYSTEM : VARIABLES GLOBALES
   ========================================================================== */

:root {
    --ing-color-primary: #02246A;
    --ing-color-primary-hover: #0A3A8A;
    --ing-color-accent: #16C6D8;

    --ing-color-title: #0B2545;
    --ing-color-text: #4A5568;
    --ing-color-text-light: #6B7280;

    --ing-color-white: #FFFFFF;
    --ing-color-bg-soft: #F5F8FC;
    --ing-color-bg-blue: #EEF7FD;

    --ing-color-border: #DCE6F1;
    --ing-radius-sm: 8px;
    --ing-radius-md: 16px;

    --ing-shadow-soft: 0 15px 30px -20px rgba(2, 36, 106, 0.35);
    --ing-shadow-menu:
        0 18px 45px -18px rgba(2, 36, 106, 0.35),
        0 6px 16px -10px rgba(2, 36, 106, 0.22);

    --ing-container: 1280px;
    --ing-reading-width: 760px;

    --ing-transition: 220ms ease;
}

/* ==========================================================================
   02 — SOCLE TYPOGRAPHIQUE
   ========================================================================== */

body {
    color: var(--ing-color-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--ing-color-title);
}

/* ==========================================================================
   03 — BOUTONS GLOBAUX
   ========================================================================== */

.wp-block-button__link,
.kb-button,
.wp-element-button,
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    transition:
        background-color var(--ing-transition),
        border-color var(--ing-transition),
        color var(--ing-transition),
        transform var(--ing-transition),
        box-shadow var(--ing-transition);
}

.wp-block-button__link:focus-visible,
.kb-button:focus-visible,
.wp-element-button:focus-visible,
button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible {
    outline: 3px solid rgba(22, 198, 216, 0.55);
    outline-offset: 3px;
}

/* ==========================================================================
   04 — BOUTONS INGEFLEX : COULEURS DE MARQUE
   ========================================================================== */

body .kb-button,
body .wp-block-button__link,
body .wp-element-button,
body input[type="submit"] {
    border-color: var(--ing-color-primary) !important;
    background-color: var(--ing-color-primary) !important;
    color: var(--ing-color-white) !important;
}

body .kb-button:hover,
body .wp-block-button__link:hover,
body .wp-element-button:hover,
body input[type="submit"]:hover {
    border-color: var(--ing-color-primary-hover) !important;
    background-color: var(--ing-color-primary-hover) !important;
    color: var(--ing-color-white) !important;

    transform: translateY(-2px);
    box-shadow: 0 12px 24px -14px rgba(2, 36, 106, 0.55);
}

body .ing-btn--secondary,
body .ing-btn--secondary.kb-button,
body .ing-btn--secondary .kb-button {
    border-color: var(--ing-color-primary) !important;
    background-color: transparent !important;
    color: var(--ing-color-primary) !important;
}

body .ing-btn--secondary:hover,
body .ing-btn--secondary.kb-button:hover,
body .ing-btn--secondary .kb-button:hover {
    border-color: var(--ing-color-primary) !important;
    background-color: var(--ing-color-primary) !important;
    color: var(--ing-color-white) !important;
}

/* ==========================================================================
   05 — HEADER ET NAVIGATION DESKTOP
   Version 1.1.0
   ========================================================================== */

body .site-header,
body .site-main-header-wrap,
body .site-header-row-container-inner,
body .site-header-upper-inner-wrap,
body .site-header-main-section {
    background-color: var(--ing-color-white) !important;
}

body .primary-menu-container,
body .primary-menu-container ul.menu,
body .primary-menu-container ul.menu > li,
body .primary-menu-container ul.menu > li > a,
body .main-navigation,
body .main-navigation a {
    font-family: Manrope, sans-serif !important;
}

body .primary-menu-container ul.menu > li > a,
body .main-navigation .primary-menu-container > ul > li.menu-item > a {
    color: var(--ing-color-primary) !important;

    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;

    text-decoration: none !important;

    transition:
        color var(--ing-transition),
        background-color var(--ing-transition);
}

body .primary-menu-container ul.menu > li > a:hover,
body .primary-menu-container ul.menu > li.current-menu-item > a,
body .primary-menu-container ul.menu > li.current-menu-ancestor > a,
body .main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
    color: var(--ing-color-accent) !important;
}

body .primary-menu-container .dropdown-nav-toggle,
body .primary-menu-container .kadence-svg-iconset {
    color: currentColor !important;
}

body .primary-menu-container ul.sub-menu {
    min-width: 240px;

    padding: 10px !important;

    border: 1px solid var(--ing-color-border) !important;
    border-radius: 10px !important;

    background-color: var(--ing-color-bg-soft) !important;

    box-shadow: var(--ing-shadow-menu) !important;
}

body .primary-menu-container ul.sub-menu li a {
    display: flex !important;
    align-items: center !important;

    min-height: 44px;
    padding: 10px 13px !important;

    border-radius: 7px !important;

    background-color: transparent !important;
    color: var(--ing-color-primary) !important;

    font-family: Manrope, sans-serif !important;
    font-size: 15px !important;
    font-weight: 550 !important;
    line-height: 1.4 !important;

    transition:
        background-color var(--ing-transition),
        color var(--ing-transition),
        transform var(--ing-transition),
        box-shadow var(--ing-transition);
}

body .primary-menu-container ul.sub-menu li a:hover,
body .primary-menu-container ul.sub-menu li.current-menu-item > a,
body .primary-menu-container ul.sub-menu li.current-menu-ancestor > a {
    background-color: var(--ing-color-white) !important;
    color: var(--ing-color-primary-hover) !important;

    transform: translateX(3px);
    box-shadow: 0 5px 14px -10px rgba(2, 36, 106, 0.45);
}

body .primary-menu-container ul.sub-menu .dropdown-nav-toggle,
body .primary-menu-container ul.sub-menu .kadence-svg-iconset {
    color: currentColor !important;
}

body .site-header .header-button,
body .site-header .header-button-wrap .button,
body .site-header .kadence-header-button {
    border: 1px solid var(--ing-color-primary) !important;
    border-radius: var(--ing-radius-sm) !important;

    background-color: var(--ing-color-primary) !important;
    color: var(--ing-color-white) !important;

    font-family: Manrope, sans-serif !important;
    font-weight: 700 !important;
}

body .site-header .header-button:hover,
body .site-header .header-button-wrap .button:hover,
body .site-header .kadence-header-button:hover {
    border-color: var(--ing-color-primary-hover) !important;
    background-color: var(--ing-color-primary-hover) !important;
    color: var(--ing-color-white) !important;

    transform: translateY(-1px);
}

/* ==========================================================================
   06 — NAVIGATION MOBILE
   ========================================================================== */

body .mobile-navigation,
body .popup-drawer,
body .drawer-inner {
    background-color: var(--ing-color-white) !important;
}

body .mobile-navigation ul li a,
body .popup-drawer .menu-item a {
    color: var(--ing-color-primary) !important;

    font-family: Manrope, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
}

body .mobile-navigation ul li a:hover,
body .mobile-navigation ul li.current-menu-item > a,
body .popup-drawer .menu-item a:hover {
    color: var(--ing-color-accent) !important;
}

body .menu-toggle-open,
body .mobile-toggle-open-container .menu-toggle-open,
body .menu-toggle-close,
body .drawer-toggle {
    color: var(--ing-color-primary) !important;
}

/* ==========================================================================
   07 — HERO INGEFLEX
   Version 1.2 responsive
   ========================================================================== */

.hero-ingeflex {
    --hero-image-width: 830px;
    --hero-image-top: 10px;
    --hero-image-right: -170px;

    position: relative;
    min-height: 540px;
    padding: 35px 0 40px;
}

.hero-copy {
    position: relative;
    z-index: 20;
}

.hero-title {
    max-width: 560px;
    margin-bottom: 24px;

    font-size: clamp(54px, 4vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.hero-subtitle {
    max-width: 600px;
    margin-bottom: 32px;

    font-size: 18px;
    line-height: 1.65;
}

.hero-visual {
    position: relative;
    min-height: 480px;
}

.hero-image {
    position: absolute;
    top: var(--hero-image-top);
    right: var(--hero-image-right);

    width: var(--hero-image-width);
    max-width: none;

    z-index: 5;
    pointer-events: none;
}

.hero-image img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: contain;
}

.hero-trust {
    position: relative;
    z-index: 20;

    width: 100%;
    max-width: 650px;

    margin-top: 60px !important;
    margin-bottom: 0 !important;
}

.hero-trust > .kt-row-column-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;

    width: 100%;
    gap: 32px !important;
}

.hero-trust > .kt-row-column-wrap > .wp-block-kadence-column {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
}

.hero-trust h2,
.hero-trust h3,
.hero-trust h4,
.hero-trust p {
    margin: 0 !important;

    font-size: 20px !important;
    line-height: 1.3 !important;
    font-weight: 600;

    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

.hero-ingeflex + .wp-block-kadence-rowlayout,
.hero-ingeflex + .wp-block-kadence-rowlayout > .kt-row-column-wrap {
    margin-top: 0 !important;
}

@media (max-width: 1024px) {

    .hero-ingeflex {
        min-height: auto;
        padding: 40px 0 30px;
    }

    .hero-title {
        font-size: clamp(44px, 6vw, 58px);
        line-height: 1;
    }

    .hero-visual {
        display: flex;
        align-items: flex-start;
        justify-content: center;

        width: 100%;
        max-width: 100%;
        min-height: 0;

        margin-top: 24px;
        overflow: visible;
    }

    .hero-image {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;

        display: block !important;

        width: 100% !important;
        max-width: 700px !important;
        height: auto !important;

        margin: 0 auto !important;

        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: none;
    }

    .hero-image img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        aspect-ratio: auto !important;
        object-fit: contain !important;

        visibility: visible !important;
        opacity: 1 !important;
    }

    .hero-trust {
        max-width: 100%;
        margin-top: 42px !important;
    }

    .hero-trust > .kt-row-column-wrap {
        gap: 24px !important;
    }
}

@media (max-width: 767px) {

    .hero-ingeflex {
        min-height: auto;
        padding: 30px 0 25px;
    }

    .hero-copy {
        width: 100%;
    }

    .hero-title {
        max-width: 100%;

        font-size: clamp(38px, 11vw, 48px);
        line-height: 1;
        letter-spacing: -0.035em;
    }

    .hero-subtitle {
        max-width: 100%;

        font-size: 17px;
        line-height: 1.55;
    }

    .hero-visual {
        display: flex !important;
        align-items: flex-start;
        justify-content: center;

        width: 100%;
        max-width: 100%;
        min-height: 0;

        margin-top: 24px;
        overflow: visible !important;
    }

    .hero-image {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;

        display: block !important;

        width: 110% !important;
        max-width: 540px !important;
        min-width: 0 !important;
        height: auto !important;

        margin: 0 auto !important;
        transform: translateX(-5%) !important;

        visibility: visible !important;
        opacity: 1 !important;
    }

    .hero-image img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        aspect-ratio: auto !important;
        object-fit: contain !important;
        object-position: center !important;

        visibility: visible !important;
        opacity: 1 !important;
    }

    .hero-trust {
        max-width: 100%;
        margin-top: 26px !important;
    }

    .hero-trust > .kt-row-column-wrap {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .hero-trust h2,
    .hero-trust h3,
    .hero-trust h4,
    .hero-trust p {
        font-size: 18px !important;
    }
}

/* ==========================================================================
   08 — ACCESSIBILITÉ : MOUVEMENTS RÉDUITS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================================
   FIN — INGEFLEX FRAMEWORK CSS GLOBAL
   Version : 1.1.0
   ========================================================================== */