.elementor-20 .elementor-element.elementor-element-a39b296{--display:flex;--margin-top:-9px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-20 .elementor-element.elementor-element-a910fc0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-20 .elementor-element.elementor-element-a13f8d3{--display:flex;--margin-top:8px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-20 .elementor-element.elementor-element-456981f{--display:flex;}.elementor-20 .elementor-element.elementor-element-9d44c74{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-20 .elementor-element.elementor-element-7975161{--display:flex;--margin-top:-25px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-20 .elementor-element.elementor-element-1243617{--display:flex;--margin-top:-27px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-20 .elementor-element.elementor-element-4eae2c0{--display:flex;--margin-top:-22px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-20 .elementor-element.elementor-element-da1367c{--display:flex;--margin-top:-21px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-20 .elementor-element.elementor-element-ce81f46{--display:flex;--margin-top:-25px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-20 .elementor-element.elementor-element-bbb323a{--display:flex;--margin-top:-21px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}body.elementor-page-20{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}@media(max-width:767px){.elementor-20 .elementor-element.elementor-element-a910fc0{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 17px) 0px;padding:0px 0px 22px 0px;}.elementor-20 .elementor-element.elementor-element-a13f8d3{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}/* Start custom CSS for html, class: .elementor-element-a6f62b2 *//* =========================================================
   RESET
========================================================= */

.why-hq-x,
.why-hq-x *,
.why-hq-x *::before,
.why-hq-x *::after {
    box-sizing: border-box;
}

.why-hq-x h2,
.why-hq-x h3,
.why-hq-x p {
    margin: 0;
}

.why-hq-x a {
    text-decoration: none;
}


/* =========================================================
   ROOT
========================================================= */

.why-hq-x {
    --wh-blue: #1267a5;
    --wh-blue-dark: #07456f;
    --wh-blue-deep: #063b5f;
    --wh-red: #ef4d3d;
    --wh-green: #42b868;
    --wh-text: #112b40;
    --wh-muted: #6c7f8f;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 105px 0 110px;

    font-family: Arial, Helvetica, sans-serif;

    background:
        radial-gradient(
            circle at 8% 13%,
            rgba(18,103,165,.08),
            transparent 20%
        ),
        radial-gradient(
            circle at 92% 85%,
            rgba(239,77,61,.06),
            transparent 20%
        ),
        linear-gradient(
            180deg,
            #f6fbff 0%,
            #edf6fb 100%
        );
}


/* BACKGROUND GRID */

.why-hq-x::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    opacity: .025;
    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(18,103,165,.7) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(18,103,165,.7) 1px,
            transparent 1px
        );

    background-size: 55px 55px;
}


/* LARGE WORD */

.why-hq-x::after {
    content: "WHY";
    position: absolute;
    z-index: -3;
    left: -55px;
    bottom: -35px;

    color: rgba(18,103,165,.035);

    font-size: 260px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -18px;

    pointer-events: none;
}


/* =========================================================
   GLOWS
========================================================= */

.why-hq-x__glow {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(90px);
}

.why-hq-x__glow--1 {
    width: 380px;
    height: 380px;
    left: -160px;
    top: 200px;
    background: rgba(31,146,213,.11);
}

.why-hq-x__glow--2 {
    width: 330px;
    height: 330px;
    right: -120px;
    bottom: 70px;
    background: rgba(239,77,61,.08);
}


/* =========================================================
   CONTAINER
========================================================= */

.why-hq-x__container {
    width: min(1250px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.why-hq-x__heading {
    max-width: 800px;
    margin: 0 auto 58px;
    text-align: center;
}

.why-hq-x__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 18px;
    padding: 10px 14px;

    border-radius: 999px;
    border: 1px solid rgba(18,103,165,.15);

    background: rgba(255,255,255,.82);
    color: var(--wh-blue);

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.1px;
}

.why-hq-x__eyebrow span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wh-red);
}

.why-hq-x .why-hq-x__heading h2 {
    color: var(--wh-text) !important;

    font-size: clamp(44px, 5vw, 64px) !important;
    font-weight: 900 !important;
    line-height: .98 !important;
    letter-spacing: -3px !important;
}

.why-hq-x .why-hq-x__heading h2 span {
    color: var(--wh-blue) !important;
}

.why-hq-x .why-hq-x__heading p {
    max-width: 680px;
    margin: 20px auto 0 !important;

    color: var(--wh-muted) !important;

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


/* =========================================================
   QUICK GRID
========================================================= */

.why-hq-x__quick-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;

    margin-bottom: 32px;
}

.why-hq-x__quick-card {
    min-height: 165px;
    padding: 24px;

    border-radius: 22px;

    background: rgba(255,255,255,.88);
    border: 1px solid rgba(18,103,165,.09);

    box-shadow: 0 14px 38px rgba(19,61,91,.055);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.why-hq-x__quick-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 48px rgba(19,61,91,.10);
}

.why-hq-x__quick-card strong {
    display: block;
    margin-bottom: 10px;

    color: var(--wh-text);

    font-size: 17px;
    font-weight: 900;
}

.why-hq-x .why-hq-x__quick-card p {
    color: var(--wh-muted) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}


/* =========================================================
   MAIN GRID
========================================================= */

.why-hq-x__main-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}


/* =========================================================
   MAIN CARD
========================================================= */

.why-hq-x__main-card {
    position: relative;
    overflow: hidden;

    min-height: 320px;

    /* IMPORTANT :
       espace supplémentaire en bas pour les tags / métriques */
    padding: 30px 30px 82px;

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(249,252,254,.97)
        );

    border: 1px solid rgba(18,103,165,.09);

    box-shadow: 0 20px 55px rgba(19,60,90,.075);

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.why-hq-x__main-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 30px 70px rgba(19,60,90,.13);
}


/* =========================================================
   FEATURED
========================================================= */

.why-hq-x__main-card--featured {
    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(255,255,255,.09),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #1378b3 0%,
            #0b5f91 48%,
            #08486f 100%
        ) !important;

    border-color: rgba(255,255,255,.12) !important;

    box-shadow:
        0 28px 70px
        rgba(8,72,111,.22) !important;
}

.why-hq-x__main-card--featured::before {
    content: "";
    position: absolute;

    width: 180px;
    height: 180px;

    right: -70px;
    top: -70px;

    border-radius: 50%;

    background: rgba(255,255,255,.07);
}

@media (min-width: 1001px) {
    .why-hq-x__main-card--featured {
        transform: translateY(-14px);
    }
}


/* =========================================================
   ICON
========================================================= */

.why-hq-x__icon {
    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 28px;

    border-radius: 17px;

    color: var(--wh-red);
    background: #fff0ed;

    border: 1px solid rgba(239,77,61,.12);
}

.why-hq-x__icon svg {
    width: 28px;
    height: 28px;
}

.why-hq-x__main-card--featured .why-hq-x__icon {
    color: #ffffff !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
}


/* =========================================================
   TITLES
========================================================= */

.why-hq-x .why-hq-x__main-card h3 {
    margin-bottom: 13px !important;

    color: var(--wh-text) !important;

    font-size: 23px !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: -.8px !important;
}

.why-hq-x .why-hq-x__main-card--featured h3 {
    color: #ffffff !important;
}


/* =========================================================
   CARD TEXT
========================================================= */

.why-hq-x .why-hq-x__main-card p {
    color: var(--wh-muted) !important;

    font-size: 15px !important;
    line-height: 1.65 !important;
}

.why-hq-x .why-hq-x__main-card--featured p {
    color: rgba(255,255,255,.80) !important;
}


/* =========================================================
   TAGS
========================================================= */

.why-hq-x__mini-tags {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 26px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.why-hq-x__mini-tags span {
    padding: 8px 10px;

    border-radius: 999px;

    background: #edf6fb;
    color: var(--wh-blue);

    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   METRIC
========================================================= */

.why-hq-x__mini-metric {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 24px;

    padding-top: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    border-top: 1px solid rgba(18,103,165,.10);
}

.why-hq-x__mini-metric strong {
    color: var(--wh-blue);

    font-size: 24px;
    font-weight: 900;
}

.why-hq-x__mini-metric span {
    color: var(--wh-muted);

    font-size: 12px;
    font-weight: 700;
}

.why-hq-x__main-card--featured .why-hq-x__mini-metric {
    border-top: 1px solid rgba(255,255,255,.14) !important;
}

.why-hq-x__main-card--featured .why-hq-x__mini-metric strong {
    color: #ffffff !important;
}

.why-hq-x__main-card--featured .why-hq-x__mini-metric span {
    color: rgba(255,255,255,.75) !important;
}


/* =========================================================
   LINK
========================================================= */

.why-hq-x__mini-link {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 28px;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: var(--wh-blue) !important;

    font-size: 13px;
    font-weight: 900;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.why-hq-x__bottom {
    margin-top: 25px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 20px 22px;

    border-radius: 22px;

    border: 1px solid rgba(18,103,165,.10);

    background: rgba(255,255,255,.9);

    box-shadow:
        0 14px 38px
        rgba(20,62,91,.055);
}

.why-hq-x__bottom > div {
    display: flex;
    align-items: center;
    gap: 13px;
}

.why-hq-x__bottom-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    color: #ffffff;
    background: var(--wh-blue);

    font-weight: 900;
}

.why-hq-x__bottom p small {
    display: block;

    margin-bottom: 5px;

    color: #95a5af;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.why-hq-x__bottom p strong {
    display: block;

    color: var(--wh-text);

    font-size: 14px;
    font-weight: 900;
}

.why-hq-x__bottom > a {
    min-height: 50px;

    padding: 6px 7px 6px 20px;

    display: inline-flex;
    align-items: center;

    gap: 15px;

    border-radius: 999px;

    color: #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--wh-red),
            #dd3327
        );

    font-size: 13px;
    font-weight: 900;

    box-shadow:
        0 12px 26px
        rgba(221,51,39,.18);
}

.why-hq-x__bottom > a span {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.16);

    font-size: 16px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .why-hq-x__quick-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .why-hq-x__main-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .why-hq-x__main-card--featured {
        transform: none;
    }

    /* ESPACE BAS CORRIGÉ */
    .why-hq-x__main-card {
        min-height: 340px;
        padding: 30px 30px 90px;
    }

    .why-hq-x__mini-tags {
        bottom: 28px;
    }

    .why-hq-x__mini-metric {
        bottom: 26px;
    }

    .why-hq-x__mini-link {
        bottom: 28px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .why-hq-x {
        padding: 70px 0 75px;
    }

    .why-hq-x__container {
        width: calc(100% - 28px);
    }

    .why-hq-x__heading {
        margin-bottom: 40px;
    }

    .why-hq-x .why-hq-x__heading h2 {
        font-size: 40px !important;
        letter-spacing: -2px !important;
    }

    .why-hq-x .why-hq-x__heading p {
        font-size: 16px !important;
    }

    .why-hq-x__eyebrow {
        font-size: 10px;
    }


    /* QUICK CARDS */

    .why-hq-x__quick-grid {
        grid-template-columns: 1fr;
    }

    .why-hq-x__quick-card {
        min-height: auto;
        padding: 22px;
    }

    .why-hq-x__quick-card strong {
        font-size: 17px;
    }

    .why-hq-x .why-hq-x__quick-card p {
        font-size: 15px !important;
    }


    /* MAIN CARDS */

    .why-hq-x__main-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .why-hq-x__main-card {
        /*
         * IMPORTANT :
         * espace contrôlé pour éviter que
         * les éléments du bas touchent la carte
         */
        min-height: 330px;
        padding: 26px 26px 88px;
    }

    .why-hq-x__main-card--featured {
        transform: none !important;
    }

    .why-hq-x__icon {
        margin-bottom: 22px;
    }

    .why-hq-x .why-hq-x__main-card p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }


    /* TAGS : PETIT ESPACE EN BAS */

    .why-hq-x__mini-tags {
        left: 26px;
        right: 26px;

        /*
         * 24px = espace visible sous les badges
         */
        bottom: 24px;

        gap: 7px;
    }

    .why-hq-x__mini-tags span {
        padding: 8px 10px;
        font-size: 11px;
    }


    /* METRIC : PETIT ESPACE EN BAS */

    .why-hq-x__mini-metric {
        left: 26px;
        right: 26px;

        /*
         * garde un petit espace sous 24/24
         */
        bottom: 22px;

        padding-top: 14px;
    }

    .why-hq-x__mini-metric strong {
        font-size: 25px;
    }

    .why-hq-x__mini-metric span {
        font-size: 12px;
    }


    /* LINK */

    .why-hq-x__mini-link {
        left: 26px;
        right: 26px;
        bottom: 24px;

        font-size: 13px;
    }


    /* BOTTOM CTA */

    .why-hq-x__bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .why-hq-x__bottom p small {
        font-size: 9px;
    }

    .why-hq-x__bottom p strong {
        font-size: 13px;
    }

    .why-hq-x__bottom > a {
        width: 100%;
        justify-content: space-between;
        font-size: 13px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .why-hq-x .why-hq-x__heading h2 {
        font-size: 35px !important;
    }

    .why-hq-x__main-card {
        min-height: 325px;

        /*
         * assez d'espace pour le contenu inférieur,
         * mais sans créer un grand vide
         */
        padding:
            24px
            22px
            84px;
    }

    .why-hq-x__mini-tags {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }

    .why-hq-x__mini-metric {
        left: 22px;
        right: 22px;
        bottom: 20px;
    }

    .why-hq-x__mini-link {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0658894 *//* =========================================================
   RESET
========================================================= */

.journey-x,
.journey-x *,
.journey-x *::before,
.journey-x *::after {
    box-sizing: border-box;
}

.journey-x h2,
.journey-x h3,
.journey-x p {
    margin: 0;
}

.journey-x a {
    text-decoration: none;
}


/* =========================================================
   ROOT
========================================================= */

.journey-x {

    --jx-blue: #1267a5;
    --jx-blue-dark: #07466f;
    --jx-blue-deep: #0c2d43;

    --jx-red: #ef4939;
    --jx-green: #42b868;

    --jx-text: #112b3f;
    --jx-muted: #6c7f8f;

    position: relative;

    isolation: isolate;

    overflow: hidden;

    padding: 80px 0 85px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:

        radial-gradient(
            circle at 10% 15%,
            rgba(18,103,165,.09),
            transparent 20%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(239,73,57,.06),
            transparent 22%
        ),

        linear-gradient(
            180deg,
            #f8fcff 0%,
            #edf6fb 100%
        );
}


/* =========================================================
   GRID BACKGROUND
========================================================= */

.journey-x::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: -4;

    opacity: .025;

    background-image:

        linear-gradient(
            rgba(18,103,165,.7) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(18,103,165,.7) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;
}


/* PLUS DE GROS "03" DÉCORATIF */

.journey-x::after {
    content: none;
}


/* =========================================================
   GLOWS
========================================================= */

.journey-x__glow {

    position: absolute;

    z-index: -2;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}


.journey-x__glow--1 {

    width: 380px;
    height: 380px;

    left: -150px;
    top: 220px;

    background:
        rgba(30,147,215,.12);
}


.journey-x__glow--2 {

    width: 350px;
    height: 350px;

    right: -140px;
    bottom: 80px;

    background:
        rgba(239,73,57,.08);
}


/* =========================================================
   CONTAINER
========================================================= */

.journey-x__container {

    width:
        min(
            1320px,
            calc(100% - 36px)
        );

    margin:
        0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.journey-x__heading {

    max-width: 820px;

    margin:
        0 auto
        52px;

    text-align: center;
}


/* EYEBROW AGRANDI */

.journey-x__eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 14px;

    padding:
        9px 13px;

    border-radius:
        999px;

    border:
        1px solid
        rgba(18,103,165,.15);

    background:
        rgba(255,255,255,.8);

    color:
        var(--jx-blue);

    font-size: 11px;

    font-weight: 900;

    letter-spacing:
        1.1px;
}


.journey-x__eyebrow span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--jx-red);
}


/* =========================================================
   H2 : TAILLE CONSERVÉE
========================================================= */

.journey-x
.journey-x__heading
h2 {

    color:
        var(--jx-text) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        clamp(
            38px,
            4vw,
            54px
        ) !important;

    font-weight:
        900 !important;

    line-height:
        .98 !important;

    letter-spacing:
        -2.4px !important;
}


.journey-x
.journey-x__heading
h2 span {

    color:
        var(--jx-blue) !important;
}


/* DESCRIPTION AGRANDIE */

.journey-x
.journey-x__heading
p {

    max-width: 650px;

    margin:
        18px auto
        0 !important;

    color:
        var(--jx-muted) !important;

    font-size:
        17px !important;

    line-height:
        1.65 !important;
}


/* =========================================================
   TRACK
========================================================= */

.journey-x__track {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    align-items: stretch;

    gap: 22px;

    padding-top: 52px;
}


/* =========================================================
   CONNECTING LINE
========================================================= */

.journey-x__line {

    position: absolute;

    top: 28px;

    left: 16%;
    right: 16%;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            rgba(18,103,165,.15),
            var(--jx-blue),
            rgba(18,103,165,.15)
        );

    z-index: 0;
}


/* =========================================================
   STEP
========================================================= */

.journey-x__step,
.journey-x__step--1,
.journey-x__step--2,
.journey-x__step--3 {

    position: relative;

    z-index: 2;

    height: 100%;

    transform: none !important;
}


/* =========================================================
   STEP DOT
========================================================= */

.journey-x__step-dot {

    position: absolute;

    top: -45px;

    left: 50%;

    transform:
        translateX(-50%);

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        #ffffff;

    border:
        2px solid
        var(--jx-blue);

    box-shadow:
        0 0 0 7px
        rgba(18,103,165,.07);

    z-index: 4;
}


.journey-x__step-dot span {

    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--jx-blue);

    color: #ffffff;

    font-size: 12px;

    font-weight: 900;
}


/* =========================================================
   CARD
========================================================= */

.journey-x__card {

    position: relative;

    overflow: hidden;

    height: 100%;

    min-height: 350px;

    /*
     * Le padding-bottom important évite
     * que les éléments du bas collent au bord.
     */
    padding:
        30px
        30px
        92px;

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.99),
            rgba(247,251,253,.96)
        );

    border:
        1px solid
        rgba(18,103,165,.10);

    box-shadow:
        0 22px 58px
        rgba(19,61,91,.08);

    color:
        var(--jx-text);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;
}


.journey-x__card:hover {

    transform:
        translateY(-6px);

    border-color:
        rgba(18,103,165,.18);

    box-shadow:
        0 30px 70px
        rgba(19,61,91,.13);
}


/* =========================================================
   ICON
========================================================= */

.journey-x__icon {

    width: 56px;
    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 24px;

    border-radius: 17px;

    color:
        var(--jx-red);

    background:
        #fff0ed;

    border:
        1px solid
        rgba(239,73,57,.15);
}


.journey-x__icon svg {

    width: 30px;
    height: 30px;
}


/* =========================================================
   TITRE H3 : CONSERVÉ
========================================================= */

.journey-x
.journey-x__card
h3 {

    margin-bottom:
        14px !important;

    color:
        var(--jx-text) !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        22px !important;

    font-weight:
        900 !important;

    line-height:
        1.08 !important;

    letter-spacing:
        -.8px !important;
}


/* =========================================================
   TEXTES AGRANDIS
========================================================= */

.journey-x
.journey-x__card
p {

    color:
        var(--jx-muted) !important;

    font-size:
        15px !important;

    line-height:
        1.65 !important;
}


/* =========================================================
   LINK STEP 1
========================================================= */

.journey-x__link {

    position: absolute;

    left: 30px;
    bottom: 28px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        var(--jx-blue) !important;

    font-size: 13px;

    font-weight: 900;
}


/* =========================================================
   STATS STEP 2
========================================================= */

.journey-x__mini-stats {

    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 26px;

    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 9px;
}


.journey-x__mini-stats > div {

    padding:
        13px;

    border-radius:
        13px;

    background:
        #f1f7fb;

    border:
        1px solid
        rgba(18,103,165,.08);
}


.journey-x__mini-stats strong {

    display: block;

    color:
        var(--jx-blue);

    font-size:
        20px;

    font-weight: 900;

    margin-bottom:
        5px;
}


.journey-x__mini-stats span {

    color:
        var(--jx-muted);

    font-size:
        11px;

    font-weight: 700;
}


/* =========================================================
   ATTESTATION
========================================================= */

.journey-x__attestation {

    position: absolute;

    left: 30px;
    bottom: 28px;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding:
        10px 14px;

    border-radius:
        999px;

    background:
        #eaf7ee;

    color:
        var(--jx-green);
}


.journey-x__attestation strong {

    font-size:
        20px;

    font-weight: 900;
}


.journey-x__attestation span {

    color:
        #607c69;

    font-size:
        11px;

    font-weight: 700;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.journey-x__bottom {

    margin-top:
        52px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    gap: 20px;

    padding:
        19px 21px;

    border-radius: 20px;

    background:
        rgba(255,255,255,.9);

    border:
        1px solid
        rgba(18,103,165,.10);

    box-shadow:
        0 14px 38px
        rgba(19,61,91,.055);
}


.journey-x__bottom > div {

    display: flex;

    align-items: center;

    gap: 14px;
}


.journey-x__bottom-icon {

    width: 42px;
    height: 42px;

    flex:
        0 0 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background:
        var(--jx-blue);

    color: #ffffff;

    font-weight: 900;
}


.journey-x__bottom p small {

    display: block;

    margin-bottom:
        5px;

    color:
        #95a4ae;

    font-size:
        9px;

    font-weight: 900;

    letter-spacing:
        1px;
}


.journey-x__bottom p strong {

    color:
        var(--jx-text);

    font-size:
        14px;

    font-weight: 900;

    line-height:
        1.4;
}


.journey-x__bottom > a {

    min-height: 50px;

    padding:
        6px 7px
        6px 19px;

    display: inline-flex;

    align-items: center;

    gap: 13px;

    border-radius:
        999px;

    color:
        #ffffff !important;

    background:
        linear-gradient(
            135deg,
            var(--jx-red),
            #dc3429
        );

    font-size:
        13px;

    font-weight: 900;

    box-shadow:
        0 12px 26px
        rgba(220,52,41,.18);
}


.journey-x__bottom > a span {

    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,.15);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .journey-x__track {

        grid-template-columns:
            1fr;

        gap: 24px;

        padding-top: 0;
    }


    /* VERTICAL LINE */

    .journey-x__line {

        left: 22px;
        right: auto;

        top: 30px;
        bottom: 30px;

        width: 2px;
        height: auto;

        background:
            linear-gradient(
                to bottom,
                rgba(18,103,165,.15),
                var(--jx-blue),
                rgba(18,103,165,.15)
            );
    }


    .journey-x__step {

        padding-left:
            55px;
    }


    .journey-x__step-dot {

        left: 22px;
        top: 30px;

        transform:
            translateX(-50%);
    }


    /*
     * ESPACE RESPONSIVE :
     * contenu du bas ne touche pas la bordure.
     */
    .journey-x__card {

        min-height:
            340px;

        padding:
            30px
            30px
            94px;
    }


    .journey-x__link {

        bottom:
            28px;
    }


    .journey-x__mini-stats {

        bottom:
            26px;
    }


    .journey-x__attestation {

        bottom:
            28px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .journey-x {

        padding:
            55px 0
            65px;
    }


    .journey-x__container {

        width:
            calc(100% - 24px);
    }


    .journey-x__heading {

        margin-bottom:
            38px;
    }


    /* H2 CONSERVÉ */

    .journey-x
    .journey-x__heading
    h2 {

        font-size:
            33px !important;

        letter-spacing:
            -1.5px !important;
    }


    /* DESCRIPTION PLUS GRANDE */

    .journey-x
    .journey-x__heading
    p {

        font-size:
            15px !important;

        line-height:
            1.6 !important;
    }


    .journey-x__eyebrow {

        font-size:
            10px;
    }


    /* STEP */

    .journey-x__step {

        padding-left:
            42px;
    }


    .journey-x__line {

        left:
            14px;
    }


    .journey-x__step-dot {

        left:
            14px;

        width:
            38px;

        height:
            38px;
    }


    .journey-x__step-dot span {

        width:
            25px;

        height:
            25px;

        font-size:
            10px;
    }


    /* =====================================================
       CARD RESPONSIVE AVEC ESPACE EN BAS
    ====================================================== */

    .journey-x__card {

        min-height:
            325px;

        padding:
            24px
            24px
            88px;

        border-radius:
            24px;
    }


    /* TITRE INCHANGÉ */

    .journey-x
    .journey-x__card
    h3 {

        font-size:
            20px !important;
    }


    /* TEXTE PLUS GRAND */

    .journey-x
    .journey-x__card
    p {

        font-size:
            14px !important;

        line-height:
            1.6 !important;
    }


    /* LINK AVEC ESPACE SOUS */

    .journey-x__link {

        left:
            24px;

        right:
            24px;

        bottom:
            24px;

        font-size:
            13px;
    }


    /* STATS AVEC ESPACE SOUS */

    .journey-x__mini-stats {

        left:
            24px;

        right:
            24px;

        bottom:
            22px;
    }


    .journey-x__mini-stats > div {

        padding:
            12px;
    }


    .journey-x__mini-stats strong {

        font-size:
            19px;
    }


    .journey-x__mini-stats span {

        font-size:
            10px;
    }


    /* ATTESTATION AVEC ESPACE SOUS */

    .journey-x__attestation {

        left:
            24px;

        bottom:
            24px;
    }


    .journey-x__attestation strong {

        font-size:
            19px;
    }


    .journey-x__attestation span {

        font-size:
            10px;
    }


    /* BOTTOM */

    .journey-x__bottom {

        margin-top:
            40px;

        padding:
            18px;

        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .journey-x__bottom p small {

        font-size:
            9px;
    }


    .journey-x__bottom p strong {

        font-size:
            13px;
    }


    .journey-x__bottom > a {

        width:
            100%;

        justify-content:
            space-between;

        font-size:
            13px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .journey-x__step {

        padding-left:
            38px;
    }


    .journey-x__card {

        min-height:
            320px;

        padding:
            22px
            21px
            84px;
    }


    .journey-x__link {

        left:
            21px;

        right:
            21px;

        bottom:
            21px;
    }


    .journey-x__mini-stats {

        left:
            21px;

        right:
            21px;

        bottom:
            20px;
    }


    .journey-x__attestation {

        left:
            21px;

        bottom:
            21px;
    }

}/* End custom CSS */
/* Start custom CSS *//* =========================================================
   HYGIQUALI
   GLOBAL COMPACT FIX V2
   IMPORTANT : REMPLACE L'ANCIEN CSS GLOBAL PAR CELUI-CI
========================================================= */


/* =========================================================
   1. PAGE - SUPPRESSION DES MARGES EXTERNES
========================================================= */

html,
body {
    margin: 0 !important;
    padding: 0 !important;

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

    overflow-x: hidden !important;
}


/* uniquement les vrais wrappers WordPress */
body #page,
body .site,
body .site-content,
body .content-area,
body .site-main,
body main.site-main,
body .entry-content,
body .page-content {

    margin: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;

    max-width: 100% !important;
}


/* =========================================================
   2. ELEMENTOR
   SUPPRIMER ESPACE ENTRE LES WIDGETS
========================================================= */

.elementor-widget-html,
.elementor-widget-html > .elementor-widget-container {

    margin: 0 !important;
    padding: 0 !important;

}


/* conteneur qui contient directement nos widgets */

.e-con:has(> .elementor-element > .elementor-widget-container > section) {

    gap: 0 !important;

}


/*
IMPORTANT :

On NE touche PAS globalement à :

article
section
.e-con
.elementor-widget
.elementor-container

car cela casse les composants internes.
*/


/* =========================================================
   3. NOS SECTIONS
   ZÉRO MARGE ENTRE LES BLOCS
========================================================= */

.ch-hero,
.recognition-x,
.training-choice-x,
.course-detail-x,
.why-hq-x,
.journey-x,
.faq-x,
.final-cta-x,
.contact-hq-x,
.hq-footer-x {

    margin-top: 0 !important;
    margin-bottom: 0 !important;

}


/* =========================================================
   4. LARGEUR DES CONTENEURS
========================================================= */

.ch-hero__container,
.recognition-x__container,
.training-choice-x__container,
.course-detail-x__container,
.why-hq-x__container,
.journey-x__container,
.faq-x__container,
.final-cta-x__container,
.contact-hq-x__container,
.hq-footer-x__container {

    width: min(1380px, calc(100% - 32px)) !important;

    margin-left: auto !important;
    margin-right: auto !important;

}


/* =========================================================
   5. PADDINGS VERTICAUX PLUS COMPACTS
========================================================= */

.ch-hero {

    padding-top: 48px !important;
    padding-bottom: 52px !important;

}


.recognition-x {

    padding-top: 58px !important;
    padding-bottom: 62px !important;

}


.training-choice-x {

    padding-top: 58px !important;
    padding-bottom: 62px !important;

}


.course-detail-x {

    padding-top: 60px !important;
    padding-bottom: 64px !important;

}


.why-hq-x {

    padding-top: 58px !important;
    padding-bottom: 62px !important;

}


.journey-x {

    padding-top: 58px !important;
    padding-bottom: 62px !important;

}


.faq-x {

    padding-top: 58px !important;
    padding-bottom: 62px !important;

}


.final-cta-x {

    padding-top: 46px !important;
    padding-bottom: 46px !important;

}


.contact-hq-x {

    padding-top: 58px !important;
    padding-bottom: 58px !important;

}


.hq-footer-x {

    padding-top: 52px !important;
    padding-bottom: 18px !important;

}


/* =========================================================
   6. MÊME POLICE SUR TOUTE LA PAGE
========================================================= */

.ch-hero,
.recognition-x,
.training-choice-x,
.course-detail-x,
.why-hq-x,
.journey-x,
.faq-x,
.final-cta-x,
.contact-hq-x,
.hq-footer-x,

.ch-hero *,
.recognition-x *,
.training-choice-x *,
.course-detail-x *,
.why-hq-x *,
.journey-x *,
.faq-x *,
.final-cta-x *,
.contact-hq-x *,
.hq-footer-x * {

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

}


/* =========================================================
   7. ESPACE SOUS LES HEADINGS
========================================================= */

.recognition-x__heading,
.training-choice-x__heading,
.course-detail-x__heading,
.why-hq-x__heading,
.journey-x__heading,
.faq-x__heading {

    margin-top: 0 !important;
    margin-bottom: 34px !important;

}


/* eyebrow */

.recognition-x__eyebrow,
.training-choice-x__eyebrow,
.course-detail-x__eyebrow,
.why-hq-x__eyebrow,
.journey-x__eyebrow,
.faq-x__eyebrow,
.final-cta-x__eyebrow {

    margin-bottom: 11px !important;

}


/* =========================================================
   8. TITRES PRINCIPAUX DES SECTIONS
========================================================= */

.recognition-x .recognition-x__heading h2,
.training-choice-x .training-choice-x__heading h2,
.course-detail-x .course-detail-x__heading h2,
.why-hq-x .why-hq-x__heading h2,
.journey-x .journey-x__heading h2,
.faq-x .faq-x__heading h2 {

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        clamp(
            34px,
            3.5vw,
            48px
        ) !important;

    line-height:
        1 !important;

    letter-spacing:
        -1.8px !important;

    font-weight:
        900 !important;

}


/* textes sous titres */

.recognition-x__heading p,
.training-choice-x__heading p,
.course-detail-x__heading p,
.why-hq-x__heading p,
.journey-x__heading p,
.faq-x__heading p {

    margin-top: 13px !important;

    font-size: 14px !important;

    line-height: 1.5 !important;

}


/* =========================================================
   9. HERO
========================================================= */

.ch-hero .ch-hero__title {

    font-size:
        clamp(
            44px,
            4.5vw,
            62px
        ) !important;

    line-height:
        .95 !important;

    letter-spacing:
        -2.4px !important;

}


/* =========================================================
   10. BLOC 2
   RESTAURATION DES DIMENSIONS IMPORTANTES
========================================================= */

/*
Très important :
on remet explicitement la largeur des 3 cartes.
*/

.recognition-x__mini-card {

    width: 245px !important;
    max-width: 245px !important;

    min-height: 185px !important;

}


/* positions desktop */

.recognition-x__mini-card--one {

    top: 55px !important;
    left: 45px !important;

    right: auto !important;
    bottom: auto !important;

}


.recognition-x__mini-card--two {

    top: 70px !important;
    right: 42px !important;

    left: auto !important;
    bottom: auto !important;

}


.recognition-x__mini-card--three {

    right: 55px !important;
    bottom: 42px !important;

    left: auto !important;
    top: auto !important;

}


/* showcase */

.recognition-x__showcase {

    min-height: 620px !important;

}


/* cercle central */

.recognition-x__showcase-bg {

    width: 430px !important;
    height: 430px !important;

}


/* =========================================================
   11. CHOIX FORMATIONS
========================================================= */

.training-choice-x .training-choice-x__card h3 {

    font-size: 26px !important;

    line-height: 1.05 !important;

}


.training-choice-x__card {

    padding: 28px !important;

}


/* =========================================================
   12. DÉTAIL FORMATIONS
========================================================= */

.course-detail-x
.course-detail-x__content
h3 {

    font-size:
        clamp(
            30px,
            2.8vw,
            40px
        ) !important;

    line-height:
        1 !important;

    letter-spacing:
        -1.5px !important;

}


.course-detail-x__content {

    padding: 38px !important;

}


/* =========================================================
   13. POURQUOI HYGIQUALI
========================================================= */

.why-hq-x
.why-hq-x__main-card
h3 {

    font-size: 20px !important;

    line-height: 1.08 !important;

}


.why-hq-x__main-card {

    min-height: 270px !important;

    padding: 24px !important;

}


/* =========================================================
   14. PARCOURS 3 ÉTAPES
========================================================= */

.journey-x
.journey-x__card
h3 {

    font-size: 21px !important;

    line-height: 1.08 !important;

}


.journey-x__card {

    padding: 26px !important;

}


/* =========================================================
   15. CTA FINAL
========================================================= */

.final-cta-x
.final-cta-x__content
h2 {

    font-size:
        clamp(
            31px,
            3.2vw,
            43px
        ) !important;

    line-height:
        1 !important;

    letter-spacing:
        -1.5px !important;

}


/* =========================================================
   16. CONTACT
========================================================= */

.contact-hq-x
.contact-hq-x__visual-card
h2 {

    font-size:
        clamp(
            33px,
            3.5vw,
            46px
        ) !important;

    line-height:
        1 !important;

    letter-spacing:
        -1.7px !important;

}


/* =========================================================
   17. FOOTER
========================================================= */

.hq-footer-x
.hq-footer-x__brand-copy
h2 {

    font-size:
        clamp(
            28px,
            3vw,
            39px
        ) !important;

    line-height:
        1 !important;

    letter-spacing:
        -1.4px !important;

}


/* =========================================================
   18. MOBILE
========================================================= */

@media (max-width: 700px) {

    .ch-hero,
    .recognition-x,
    .training-choice-x,
    .course-detail-x,
    .why-hq-x,
    .journey-x,
    .faq-x,
    .contact-hq-x {

        padding-top: 40px !important;
        padding-bottom: 44px !important;

    }


    .final-cta-x {

        padding:
            34px 0 !important;

    }


    .hq-footer-x {

        padding-top:
            40px !important;

    }


    .ch-hero__container,
    .recognition-x__container,
    .training-choice-x__container,
    .course-detail-x__container,
    .why-hq-x__container,
    .journey-x__container,
    .faq-x__container,
    .final-cta-x__container,
    .contact-hq-x__container,
    .hq-footer-x__container {

        width:
            calc(100% - 20px) !important;

    }


    /* section titles */

    .recognition-x .recognition-x__heading h2,
    .training-choice-x .training-choice-x__heading h2,
    .course-detail-x .course-detail-x__heading h2,
    .why-hq-x .why-hq-x__heading h2,
    .journey-x .journey-x__heading h2,
    .faq-x .faq-x__heading h2 {

        font-size:
            30px !important;

        line-height:
            1.02 !important;

        letter-spacing:
            -1.2px !important;

    }


    /* hero */

    .ch-hero .ch-hero__title {

        font-size:
            38px !important;

    }


    /* BLOC 2 MOBILE
       remettre les cards en largeur normale */

    .recognition-x__mini-card {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: none !important;

        min-height: auto !important;

        transform: none !important;

    }


    .recognition-x__showcase {

        min-height: auto !important;

    }


    /* formations */

    .course-detail-x
    .course-detail-x__content
    h3 {

        font-size:
            27px !important;

    }


    .final-cta-x
    .final-cta-x__content
    h2 {

        font-size:
            28px !important;

    }


    .contact-hq-x
    .contact-hq-x__visual-card
    h2 {

        font-size:
            30px !important;

    }


    .hq-footer-x
    .hq-footer-x__brand-copy
    h2 {

        font-size:
            27px !important;

    }

}
/* =========================================================
   HYGIQUALI - FULL WIDTH DEFINITIF
   A METTRE TOUT A LA FIN DU CSS
========================================================= */


/* =========================================================
   1. RESET PAGE
========================================================= */

html,
body {
    margin: 0 !important;
    padding: 0 !important;

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

    overflow-x: clip !important;
}


/* =========================================================
   2. WORDPRESS / THEME
========================================================= */

body #page,
body .site,
body .site-content,
body .content-area,
body .site-main,
body main,
body .entry-content,
body .page-content {

    margin: 0 !important;
    padding: 0 !important;

    width: 100% !important;
    max-width: none !important;

}


/* Astra si utilisé */

body .ast-container,
body .ast-separate-container,
body .ast-article-single,
body .ast-article-post {

    margin: 0 !important;
    padding: 0 !important;

    width: 100% !important;
    max-width: none !important;

}


/* =========================================================
   3. ELEMENTOR - UNIQUEMENT LES CONTENEURS EXTERNES
========================================================= */

body.elementor-page
.elementor {

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

}


/* premier niveau uniquement */

body.elementor-page
.elementor > .e-con,

body.elementor-page
.elementor > .elementor-section {

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;

}


/* conteneur HTML */

.elementor-widget-html {

    margin: 0 !important;
    padding: 0 !important;

}


.elementor-widget-html
> .elementor-widget-container {

    margin: 0 !important;
    padding: 0 !important;

}


/* =========================================================
   4. FULL BLEED
   C'EST CETTE PARTIE QUI SUPPRIME VRAIMENT
   LES MARGES GAUCHE / DROITE
========================================================= */

.ch-hero,
.recognition-x,
.training-choice-x,
.course-detail-x,
.why-hq-x,
.journey-x,
.faq-x,
.final-cta-x,
.contact-hq-x,
.hq-footer-x {

    position: relative !important;

    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

}


/* =========================================================
   5. ZERO ESPACE ENTRE LES BLOCS
========================================================= */

.ch-hero + .recognition-x,
.recognition-x + .training-choice-x,
.training-choice-x + .course-detail-x,
.course-detail-x + .why-hq-x,
.why-hq-x + .journey-x,
.journey-x + .faq-x,
.faq-x + .final-cta-x,
.final-cta-x + .contact-hq-x,
.contact-hq-x + .hq-footer-x {

    margin-top: 0 !important;

}


/* Elementor ajoute parfois un gap au parent */

.e-con:has(.ch-hero),
.e-con:has(.recognition-x),
.e-con:has(.training-choice-x),
.e-con:has(.course-detail-x),
.e-con:has(.why-hq-x),
.e-con:has(.journey-x),
.e-con:has(.faq-x),
.e-con:has(.final-cta-x),
.e-con:has(.contact-hq-x),
.e-con:has(.hq-footer-x) {

    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    max-width: none !important;

}


/* =========================================================
   6. CONTENU INTERNE
   On garde quand même une petite sécurité intérieure
========================================================= */

.ch-hero__container,
.recognition-x__container,
.training-choice-x__container,
.course-detail-x__container,
.why-hq-x__container,
.journey-x__container,
.faq-x__container,
.final-cta-x__container,
.contact-hq-x__container,
.hq-footer-x__container {

    width: min(1380px, calc(100% - 30px)) !important;

    max-width: 1380px !important;

    margin-left: auto !important;
    margin-right: auto !important;

}


/* =========================================================
   7. BLOCS PLUS COMPACTS
========================================================= */

.recognition-x,
.training-choice-x,
.course-detail-x,
.why-hq-x,
.journey-x,
.faq-x {

    padding-top: 50px !important;
    padding-bottom: 54px !important;

}


.final-cta-x {

    padding-top: 38px !important;
    padding-bottom: 38px !important;

}


.contact-hq-x {

    padding-top: 50px !important;
    padding-bottom: 50px !important;

}


.hq-footer-x {

    padding-top: 46px !important;

}


/* =========================================================
   8. TITRES PLUS PETITS ET UNIFORMES
========================================================= */

.recognition-x .recognition-x__heading h2,
.training-choice-x .training-choice-x__heading h2,
.course-detail-x .course-detail-x__heading h2,
.why-hq-x .why-hq-x__heading h2,
.journey-x .journey-x__heading h2,
.faq-x .faq-x__heading h2 {

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        clamp(32px, 3vw, 43px) !important;

    line-height:
        1.03 !important;

    letter-spacing:
        -1.5px !important;

    font-weight:
        900 !important;

}


/* espace sous heading */

.recognition-x__heading,
.training-choice-x__heading,
.course-detail-x__heading,
.why-hq-x__heading,
.journey-x__heading,
.faq-x__heading {

    margin-bottom: 28px !important;

}


/* =========================================================
   9. AUTRES GROS TITRES
========================================================= */

.ch-hero .ch-hero__title {

    font-size:
        clamp(42px, 4.3vw, 58px) !important;

}


.course-detail-x
.course-detail-x__content h3 {

    font-size:
        clamp(28px, 2.5vw, 38px) !important;

}


.final-cta-x
.final-cta-x__content h2 {

    font-size:
        clamp(30px, 3vw, 40px) !important;

}


.contact-hq-x
.contact-hq-x__visual-card h2 {

    font-size:
        clamp(32px, 3.2vw, 43px) !important;

}


.hq-footer-x
.hq-footer-x__brand-copy h2 {

    font-size:
        clamp(27px, 2.8vw, 37px) !important;

}


/* =========================================================
   10. POLICE IDENTIQUE SUR TOUS NOS BLOCS
========================================================= */

.ch-hero,
.ch-hero *,

.recognition-x,
.recognition-x *,

.training-choice-x,
.training-choice-x *,

.course-detail-x,
.course-detail-x *,

.why-hq-x,
.why-hq-x *,

.journey-x,
.journey-x *,

.faq-x,
.faq-x *,

.final-cta-x,
.final-cta-x *,

.contact-hq-x,
.contact-hq-x *,

.hq-footer-x,
.hq-footer-x * {

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

}


/* =========================================================
   11. MOBILE
========================================================= */

@media (max-width: 700px) {

    .ch-hero__container,
    .recognition-x__container,
    .training-choice-x__container,
    .course-detail-x__container,
    .why-hq-x__container,
    .journey-x__container,
    .faq-x__container,
    .final-cta-x__container,
    .contact-hq-x__container,
    .hq-footer-x__container {

        width:
            calc(100% - 20px) !important;

    }


    .recognition-x,
    .training-choice-x,
    .course-detail-x,
    .why-hq-x,
    .journey-x,
    .faq-x,
    .contact-hq-x {

        padding-top: 36px !important;
        padding-bottom: 40px !important;

    }


    .recognition-x .recognition-x__heading h2,
    .training-choice-x .training-choice-x__heading h2,
    .course-detail-x .course-detail-x__heading h2,
    .why-hq-x .why-hq-x__heading h2,
    .journey-x .journey-x__heading h2,
    .faq-x .faq-x__heading h2 {

        font-size:
            28px !important;

        line-height:
            1.05 !important;

    }


    .ch-hero .ch-hero__title {

        font-size:
            37px !important;

    }


    .final-cta-x
    .final-cta-x__content h2 {

        font-size:
            27px !important;

    }


    .contact-hq-x
    .contact-hq-x__visual-card h2 {

        font-size:
            29px !important;

    }

}
/* =========================================================
   SUPPRIMER DEFINITIVEMENT L'ESPACE AU-DESSUS DU HEADER
========================================================= */

html,
body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* WordPress ajoute parfois un margin-top sur html */
html {
    margin-top: 0 !important;
}


/* wrappers WordPress */
#page,
.site,
.site-content,
.site-main,
main,
.entry-content,
.page-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* Elementor */
.elementor,
.elementor-page,
.elementor-location-header,
.elementor-location-header > .elementor,
.elementor-location-header .e-con,
.elementor-location-header .elementor-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* Premier container Elementor de la page */
body .elementor > .e-con:first-child,
body .elementor > .elementor-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* Ton header */
.hq-header,
.hq-header-wrapper,
header.hq-header,
header {
    margin-top: 0 !important;
}


/* =========================================================
   SI WORDPRESS RESERVE UNE PLACE POUR LA BARRE ADMIN
========================================================= */

body.admin-bar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

html.wp-toolbar {
    margin-top: 0 !important;
}


/* =========================================================
   SUPPRIMER LES ELEMENTS VIDES AVANT LE HEADER
========================================================= */

body > p:empty,
.entry-content > p:first-child:empty,
.elementor-widget-html > .elementor-widget-container > p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}/* End custom CSS */