:root {
    --yellow-zoho: #F9B21D;
    --bleu-zoho: #2270B4;
    --rouge-zoho: #E42527;
    --mauve-zoho: #6D28D9;
    --vert-zoho: #439751;
    --white-zoho: #FFFFFF;
}

/* ==========================================================
   COULEURS ZOHO — BOUTONS
   Les anciennes classes sont conservées comme alias temporaire.
   ========================================================== */

.button.zoho-button-yellow,
.button.yellow {
    background: var(--yellow-zoho);
    border-color: var(--yellow-zoho);
}

.button.zoho-button-bleu,
.button.bleu {
    background: var(--bleu-zoho);
    border-color: var(--bleu-zoho);
}

.button.zoho-button-rouge,
.button.rouge {
    background: var(--rouge-zoho);
    border-color: var(--rouge-zoho);
}

.button.zoho-button-mauve,
.button.mauve {
    background: var(--mauve-zoho);
    border-color: var(--mauve-zoho);
}

.button.zoho-button-vert,
.button.vert {
    background: var(--vert-zoho) !important;
    border-color: var(--vert-zoho) !important;
}

.button.delisoft-green {
    background: #8cb83f !important;
    border-color: #8cb83f !important;
}

.button.zoho-button-white,
.button.white {
    background: var(--white-zoho);
    border-color: var(--white-zoho);
    color: #626262 !important;
}

.button.zoho-button-yellow:hover,
.button.zoho-button-bleu:hover,
.button.zoho-button-rouge:hover,
.button.zoho-button-mauve:hover,
.button.zoho-button-vert:hover,
.button.zoho-button-white:hover,
.button.yellow:hover,
.button.bleu:hover,
.button.rouge:hover,
.button.mauve:hover,
.button.white:hover,
.button.delisoft-green:hover {
    background: #353535;
    border-color: #353535;
    color: var(--white-zoho) !important;
}

.button.zoho-button-vert:hover,
.button.vert:hover {
    background: var(--vert-zoho) !important;
    border-color: var(--vert-zoho) !important;
    color: var(--white-zoho) !important;
}

/* ==========================================================
   COULEURS ZOHO — TEXTES
   ========================================================== */

.zoho-text-yellow {
    color: var(--yellow-zoho) !important;
}

.zoho-text-bleu {
    color: var(--bleu-zoho) !important;
}

.zoho-text-rouge {
    color: var(--rouge-zoho) !important;
}

.zoho-text-mauve {
    color: var(--mauve-zoho) !important;
}

.zoho-text-vert {
    color: var(--vert-zoho) !important;
}

.zoho-text-white {
    color: var(--white-zoho) !important;
}

/* ==========================================================
   COULEURS ZOHO — ARRIÈRE-PLANS
   ========================================================== */

.zoho-bg-yellow {
    background: var(--yellow-zoho);
    border-color: var(--yellow-zoho);
}

.zoho-bg-bleu {
    background: var(--bleu-zoho);
    border-color: var(--bleu-zoho);
}

.zoho-bg-rouge {
    background: var(--rouge-zoho);
    border-color: var(--rouge-zoho);
}

.zoho-bg-mauve {
    background: var(--mauve-zoho);
    border-color: var(--mauve-zoho);
}

.zoho-bg-vert {
    background: var(--vert-zoho) !important;
    border-color: var(--vert-zoho) !important;
}

.zoho-bg-white {
    background: var(--white-zoho);
    border-color: var(--white-zoho);
}

/* ==========================================================
   BARTITLE
   ========================================================== */

.bartitle-stretch {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.bartitle-stretch>.bartitle,
.bartitle-stretch>.bartitle-3 {
    align-self: stretch;
    flex: 0 0 6px;
    width: 6px;
    min-width: 6px;
    height: auto;
    margin-right: 0;
}

.zoho-bartitle-yellow,
.bartitle.yellow,
.bartitle-3.yellow {
    background: var(--yellow-zoho);
}

.zoho-bartitle-bleu,
.bartitle.bleu,
.bartitle-3.bleu {
    background: var(--bleu-zoho);
}

.zoho-bartitle-rouge,
.bartitle.rouge,
.bartitle-3.rouge {
    background: var(--rouge-zoho);
}

.zoho-bartitle-mauve,
.bartitle.mauve,
.bartitle-3.mauve {
    background: var(--mauve-zoho);
}

.zoho-bartitle-vert,
.bartitle.vert,
.bartitle-3.vert {
    background: var(--vert-zoho) !important;
}

.zoho-bartitle-white,
.bartitle.white,
.bartitle-3.white {
    background: var(--white-zoho);
}
.header-3{
    visibility: visible !important;
}

/* ==========================================================
   CARTES, ICÔNES ET COCHES
   ========================================================== */

.zoho-card-yellow,
.zoho-card.yellow {
    background: var(--yellow-zoho);
}

.zoho-card-bleu,
.zoho-card.bleu {
    background: var(--bleu-zoho);
}

.zoho-card-rouge,
.zoho-card.rouge {
    background: var(--rouge-zoho);
}

.zoho-card-mauve,
.zoho-card.mauve {
    background: var(--mauve-zoho);
}

.zoho-card-vert,
.zoho-card.vert {
    background: var(--vert-zoho) !important;
}

.zoho-card-white,
.zoho-card.white {
    background: var(--white-zoho);
}

.zoho-icon {
    position: relative;
    width: fit-content;
    padding: 28px;
    border-radius: 50%;
}

.zoho-icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.zoho-app-card-logo {
    display: flex;
    align-items: center;
    width: 120px;
    min-height: 54px;
}

.zoho-app-card-logo img {
    width: auto;
    max-width: 120px;
    max-height: 54px;
}

.zoho-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 20px;
    margin-right: 8px;
    padding: 0;
    border-radius: 50%;
    color: var(--white-zoho);
    font-size: 11px;
}

.zoho-check-yellow,
.zoho-check.yellow {
    background: var(--yellow-zoho);
}

.zoho-check-bleu,
.zoho-check.bleu {
    background: var(--bleu-zoho);
}

.zoho-check-rouge,
.zoho-check.rouge {
    background: var(--rouge-zoho);
}

.zoho-check-mauve,
.zoho-check.mauve {
    background: var(--mauve-zoho);
}

.zoho-check-vert,
.zoho-check.vert {
    background-color: var(--vert-zoho) !important;
}

.zoho-check:hover,
.zoho-check.vert:hover,
.zoho-check-yellow:hover,
.zoho-check.yellow:hover,
.zoho-check-bleu:hover,
.zoho-check.bleu:hover,
.zoho-check-rouge:hover,
.zoho-check.rouge:hover,
.zoho-check-mauve:hover,
.zoho-check.mauve:hover,
.zoho-check-vert:hover,
.zoho-check-white:hover,
.zoho-check.white:hover {
    color: var(--white-zoho) !important;
    transform: none;
    box-shadow: none;
}

.zoho-check-white,
.zoho-check.white {
    background: var(--white-zoho);
    color: #424242;
}

.zoho-card {
    padding: 24px;
    border-radius: 12px;
}

.zoho-card img {
    width: fit-content;
}

.zoho-card.h-100 {
    height: 100%;
}

.zoho-card.absolute {
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
    overflow: hidden;
    z-index: 3;
}
[data-carousel='four-nospace'],
[data-carousel='five']{
    .swiper-wrapper{
        height: fit-content;
    }
}

/* ==========================================================
   PORTÉE DU GABARIT ZOHO
   ========================================================== */

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) section.page-section-pb {
    padding-bottom: 50px;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .position-lg-absolute {
    position: relative;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .end-0 {
    right: 0;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .start-0 {
    left: 0;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .top-0 {
    top: 0;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .bottom-0 {
    bottom: 0;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .w-fit-content {
    width: fit-content;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .text-end {
    text-align: end;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .px-12 {
    padding-right: 12px !important;
    padding-left: 12px !important;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .p-60 {
    padding: 60px;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .z-2 {
    z-index: 2;
}

/* ==========================================================
   GRILLE
   ========================================================== */

.zoho-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.zoho-grid-5>.grid-stretch {
    grid-row: span 2;
}

/* ==========================================================
   HERO
   ========================================================== */

.zoho-hero .tag {
    position: absolute;
    bottom: 40px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 15px;
    width: max-content;
    padding: 15px;
    translate: -50% 0;
    border-radius: 12px;
    background-color: var(--white-zoho);
}

.zoho-hero-logo {
    display: block;
    width: auto;
    max-width: 220px;
    max-height: 86px;
    object-fit: contain;
}

.zoho-hero .tag .zoho-hero-tag-logo {
    width: auto;
    max-width: 84px;
    height: 50px;
    object-fit: contain;
    flex: 0 0 auto;
}

.zoho-hero .tag .content {
    width: fit-content;
}

.zoho-hero .img-absolute {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
}

.zoho-hero .img-absolute>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zoho-hero>.container .content {
    width: 45%;
    padding-left: 12px;
}

/* ==========================================================
   LISTE D'AVANTAGES
   ========================================================== */

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) ul.list-unstyled {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) ul.list-unstyled li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    line-height: 24px;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) ul.list-unstyled .fa.fa-check.zoho-check {
    padding: 10px;
}

/* ==========================================================
   TYPOGRAPHIE — IDENTIQUE À LA PAGE ORIGINALE
   ========================================================== */

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) p {
    margin-bottom: 1rem;
    font-size: 15px;
    line-height: normal;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) p:last-of-type {
    margin-bottom: 0;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .page-video-header {
    border-radius: 0;
    clip-path: inset(0 round 0);
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .button {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: none;
    white-space: normal;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .eyebrow {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25;
    text-transform: none;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h1 {
    font-size: 56px !important;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h2 {
    font-size: 38px !important;
    line-height: 1.15;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h3 {
    font-size: 28px !important;
    line-height: normal;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h4 {
    font-size: 20px !important;
    line-height: normal;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h5 {
    font-size: 18px !important;
    line-height: normal;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h6 {
    font-size: 16px !important;
    line-height: normal;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h1,
:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h2,
:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h3 {
    color: #424242;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h4,
:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h5,
:is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h6 {
    font-family: 'Poppins', sans-serif;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media screen and (min-width: 1100px) {
    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .bottom-150 {
        bottom: -150px;
    }
}

@media screen and (min-width: 992px) {
    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .position-lg-absolute {
        position: absolute !important;
    }

    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) section.page-section-pb {
        padding-bottom: 80px;
    }

    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .translate-middle-x {
        translate: -50% 0;
    }

    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .translatemiddle-y {
        translate: 0 -50%;
    }

    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .text-lg-end {
        text-align: end !important;
    }

    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .text-lg-center {
        text-align: center !important;
    }

    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .start-50 {
        left: 50%;
    }

    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .bottom-150 {
        bottom: -175px;
    }
}

@media screen and (max-width: 1560px) {
    .zoho-hero .img-absolute {
        width: 60%;
    }

    .zoho-hero>.container .content {
        width: 40%;
    }
}

@media screen and (max-width: 1200px) {
    .zoho-grid-5 {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .zoho-grid-5>.grid-stretch {
        grid-row: span 1;
        grid-row-start: 1;
    }

    .zoho-hero {
        padding-top: 0 !important;
    }

    .zoho-hero .tag {
        width: max-content;
    }

    .zoho-hero .img-absolute {
        position: relative;
        width: 100%;
    }

    .zoho-hero>.container .content {
        width: 100%;
    }
}

@media screen and (max-width: 1180px) {
    .zoho-hero .img-absolute {
        padding-top: 50px;
    }
}

@media screen and (max-width: 991px) {
    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h1 {
        font-size: 40px !important;
    }

    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h2 {
        font-size: 28px !important;
        line-height: 1.15;
    }

    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h3 {
        font-size: 22px !important;
        line-height: normal;
    }

    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h4 {
        font-size: 18px !important;
        line-height: normal;
    }

    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h5 {
        font-size: 16px !important;
        line-height: normal;
    }

    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) .seo-h6 {
        font-size: 14px !important;
        line-height: normal;
    }

    .zoho-hero .tag {
        bottom: 20px;
        width: max-content;
    }

    .zoho-hero .tag .zoho-hero-tag-logo {
        max-width: 72px;
        height: 43px;
    }

    .zoho-hero .img-absolute {
        position: relative;
        width: 100%;
        padding-top: 0;
    }

    .zoho-hero>.container .content {
        width: 100%;
    }

    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) section.page-section-ptb {
        padding: 50px 0 !important;
    }

    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) section.page-section-pb .sm-px-12,
    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) section.page-section-pt .sm-px-12,
    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) section.page-section-ptb .sm-px-12 {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) section.page-section-pb .sm-mx-12,
    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) section.page-section-pt .sm-mx-12,
    :is(main.expertzoho, main[class^="zoho"], main[class*=" zoho"]) section.page-section-ptb .sm-mx-12 {
        margin-right: 12px !important;
        margin-left: 12px !important;
    }

    .zoho-grid-5 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .zoho-grid-5>.grid-stretch {
        grid-column-start: 1;
        grid-column-end: 3;
    }
}

@media screen and (max-width: 767px) {
    .zoho-grid-5 {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .zoho-grid-5>.grid-stretch {
        order: -1;
    }

    .zoho-hero .tag {
        width: max-content;
    }

    .zoho-hero .tag .zoho-hero-tag-logo {
        max-width: 62px;
        height: 38px;
    }
}