/* =====/* ==========================================================
   APPSOLU - CENTRE D'AIDE ZOHO DESK
   Thème Flat - CSS COMPLET PROPRE
   ========================================================== */


/* ==========================================================
   1. BASE GÉNÉRALE
   ========================================================== */

html,
body {
    background-color: #F8F6FA !important;
    font-family: Helvetica, Arial, sans-serif !important;
}


/* ==========================================================
   2. EN-TÊTE / NAVIGATION
   ========================================================== */

.Header__header,
.Header__headerContainer {
    background: linear-gradient(
        115deg,
        #6520C7 0%,
        #9324BE 45%,
        #D41A8B 100%
    ) !important;

    border: none !important;
    box-shadow: none !important;
}

.Header__headerPrimary,
.Header__headerSecondary {
    background: transparent !important;
}

.Header__headerPrimary,
.Header__headerPrimary *,
.Header__headerSecondary,
.Header__headerSecondary * {
    color: #FFFFFF !important;
}

.Header__headerPrimary a,
.Header__headerSecondary a {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.Header__headerPrimary a:hover,
.Header__headerSecondary a:hover {
    opacity: 0.78 !important;
}


/* ==========================================================
   3. HERO / GRAND BANDEAU
   ========================================================== */

#headerBlock,
.HeaderBlock__headerblockcontainer {
    background: linear-gradient(
        120deg,
        #6420C7 0%,
        #9524BE 32%,
        #DB1C82 65%,
        #FF523D 100%
    ) !important;
}

.HeaderBlock__headerblockbody {
    background: transparent !important;

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

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}


/* Cache les textes Zoho natifs sans cacher la recherche */
.HeaderBlock__headerblockbody
> *:not(.HeaderBlock__headerblocksearchbox) {
    display: none !important;
}


/* ==========================================================
   4. TITRE PERSONNALISÉ DU HERO
   ========================================================== */

.HeaderBlock__headerblockbody::before {
    content: "Comment pouvons-nous vous aider ?" !important;

    display: block !important;

    color: #FFFFFF !important;

    font-size: 38px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;

    text-align: center !important;

    white-space: nowrap !important;

    width: auto !important;
    max-width: none !important;

    margin: 0 0 16px 0 !important;
}


/* ==========================================================
   5. SOUS-TITRE DU HERO
   ========================================================== */

.HeaderBlock__headerblocksearchbox {
    display: flex !important;
    flex-direction: column !important;

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

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

.HeaderBlock__headerblocksearchbox::before {
    content: "Trouvez rapidement les réponses à vos questions fréquentes." !important;

    display: block !important;

    width: 100% !important;

    color: #FFFFFF !important;

    font-size: 20px !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;

    text-align: center !important;

    margin: 0 0 20px 0 !important;
}


/* ==========================================================
   6. BARRE DE RECHERCHE
   ========================================================== */

.SearchBox__searchbox {
    background: #FFFFFF !important;

    border-radius: 12px !important;

    overflow: hidden !important;

    box-shadow:
        0 8px 25px rgba(55, 20, 100, 0.18) !important;
}

#searchbox1,
.Input__input {
    background: #FFFFFF !important;

    color: #26213B !important;

    border: none !important;
    outline: none !important;

    min-height: 58px !important;

    padding-left: 22px !important;
    padding-right: 80px !important;

    font-size: 17px !important;
}

#searchbox1::placeholder {
    color: #9691A0 !important;
}


/* Bouton loupe */
.SearchBox__searchboxiconwrapper {
    width: 68px !important;
    height: 100% !important;

    right: 0 !important;
    top: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    background: linear-gradient(
        135deg,
        #F32B66,
        #FF573E
    ) !important;
}

.SearchBox__searchboxiconwrapper svg,
.SearchBox__searchboxiconwrapper svg * {
    color: #FFFFFF !important;

    fill: none !important;
    stroke: #FFFFFF !important;
}


/* ==========================================================
   7. FOND DES MODULES / SUPPRESSION DES SÉPARATIONS
   ========================================================== */

.HomeContainer__minHeight,
.HomeContainer__minHeight > div,
.HomeContainer__minHeight .Layout__column1 {
    background: #F8F6FA !important;
}

.HomeContainer__minHeight > div > .Layout__column1 {
    border-top: none !important;
    border-bottom: none !important;
}


/* ==========================================================
   8. CARTES
   ========================================================== */

.Product__prodtSubCont {
    background: #FFFFFF !important;

    border-radius: 18px !important;

    padding: 20px !important;
    margin: 10px !important;

    min-height: 300px !important;

    border:
        1px solid rgba(91, 27, 178, 0.08) !important;

    box-shadow:
        0 8px 22px rgba(45, 20, 80, 0.10) !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

    justify-content: flex-start !important;

    overflow: hidden !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease !important;
}

.Product__prodtSubCont:hover {
    transform: translateY(-4px) !important;

    border-color:
        rgba(233, 30, 99, 0.18) !important;

    box-shadow:
        0 14px 30px rgba(45, 20, 80, 0.16) !important;
}

.Product__column {
    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

    justify-content: flex-start !important;
}


/* ==========================================================
   9. ZONE DES LOGOS
   ========================================================== */

.Product__prodSymbl {
    width: 100% !important;

    max-width: none !important;

    min-height: 110px !important;

    flex: none !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    background: #F7F3FC !important;

    border-radius: 14px !important;

    padding: 16px !important;

    margin: 0 0 16px 0 !important;

    box-sizing: border-box !important;
}

.Product__prodSymbl img {
    width: 115px !important;
    height: 115px !important;

    max-width: 115px !important;
    max-height: 115px !important;

    object-fit: contain !important;
}


/* ==========================================================
   10. TEXTE DES CARTES
   ========================================================== */

.Product__prodCntent {
    width: 100% !important;

    max-width: 100% !important;

    flex: none !important;

    background: transparent !important;

    padding: 0 4px 4px !important;

    box-sizing: border-box !important;
}

.Product__prodCntent,
.Product__prodCntent * {
    color: #24174F !important;

    word-break: normal !important;

    overflow-wrap: normal !important;

    white-space: normal !important;
}

.Product__prodCntent h1,
.Product__prodCntent h2,
.Product__prodCntent h3,
.Product__prodCntent h4,
.Product__prodCntent strong {
    color: #24174F !important;

    font-weight: 700 !important;
}


/* Petit trait dégradé */
.Product__prodCntent::before {
    content: "";

    display: block;

    width: 54px;
    height: 4px;

    margin: 0 0 10px 0 !important;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        #6420C7,
        #E31A80,
        #FF563E
    );
}


/* ==========================================================
   11. BLOC BESOIN D'AIDE
   ========================================================== */

#placardBlock.PlacardBlock__primary {
    background: #F8F6FA !important;
    background-color: #F8F6FA !important;
    background-image: none !important;

    padding: 28px 24px !important;
    margin: 0 !important;

    box-sizing: border-box !important;
}


/* Conteneur intermédiaire */
#placardBlock .PlacardBlock__container,
#placardBlock #plaCard {
    width: 100% !important;
    max-width: 1100px !important;

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

    background: transparent !important;
    background-color: transparent !important;

    box-sizing: border-box !important;
}


/* Carte blanche compacte */
#placardBlock .PlacardBlock__container1 {
    width: 100% !important;
    max-width: 1100px !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 22px 32px !important;

    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    background-image: none !important;

    border: none !important;
    border-radius: 22px !important;

    box-shadow:
        0 10px 35px rgba(36, 23, 79, 0.08) !important;

    box-sizing: border-box !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 12px !important;
}


/* ==========================================================
   12. TITRE BLOC BESOIN D'AIDE
   ========================================================== */

#placardBlock .PlacardBlock__title {
    display: block !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

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

    position: static !important;

    color: #24174F !important;

    flex: none !important;
}

#placardBlock .PlacardBlock__title h2 {
    font-size: 0 !important;
    line-height: 0 !important;

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

#placardBlock .PlacardBlock__title h2::before {
    content: "Besoin d’aide ?" !important;

    display: block !important;

    color: #24174F !important;

    font-size: 28px !important;
    line-height: 1.2 !important;

    font-weight: 700 !important;

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


/* ==========================================================
   13. TEXTE BLOC BESOIN D'AIDE
   ========================================================== */

#placardBlock .PlacardBlock__body {
    display: block !important;

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

    height: auto !important;
    min-height: 0 !important;

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

    position: static !important;

    flex: none !important;

    font-size: 0 !important;
    line-height: 0 !important;
}

#placardBlock .PlacardBlock__body::before {
    content:
        "Vous ne trouvez pas la réponse à votre question ? Notre équipe est là pour vous accompagner."
        !important;

    display: block !important;

    color: #817B91 !important;

    font-size: 16px !important;
    line-height: 1.5 !important;

    font-weight: 400 !important;

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


/* ==========================================================
   14. BOUTON SUPPORT
   ========================================================== */

#placardBlock .PlacardBlock__cta {
    display: block !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    margin: 2px 0 0 0 !important;
    padding: 0 !important;

    position: static !important;

    flex: none !important;
}

#placardBlock .PlacardBlock__cta a,
#placardBlock .PlacardBlock__cta button {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 210px !important;

    height: auto !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 11px 22px !important;

    border: none !important;
    border-radius: 12px !important;

    background: linear-gradient(
        90deg,
        #7024C4 0%,
        #D51C8D 55%,
        #FF5145 100%
    ) !important;

    color: #FFFFFF !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;

    box-shadow:
        0 6px 18px rgba(213, 28, 141, 0.22) !important;

    box-sizing: border-box !important;
}

#placardBlock .PlacardBlock__cta a:hover,
#placardBlock .PlacardBlock__cta button:hover {
    transform: translateY(-2px) !important;

    box-shadow:
        0 9px 24px rgba(213, 28, 141, 0.28) !important;
}


/* ==========================================================
   15. FOOTER
   ========================================================== */

.FooterContainer__footer {
    background: #211936 !important;

    color: #D9D4E4 !important;
}

.FooterContainer__footer a {
    color: #FFFFFF !important;

    text-decoration: none !important;
}

.FooterContainer__footer a:hover {
    color: #FF5572 !important;
}


/* ==========================================================
   16. RESPONSIVE MOBILE
   ========================================================== */

@media screen and (max-width: 768px) {

    /* HERO */
    .HeaderBlock__headerblockbody {
        padding-top: 45px !important;
        padding-bottom: 50px !important;
    }

    .HeaderBlock__headerblockbody::before {
        white-space: normal !important;

        width: 100% !important;

        font-size: 30px !important;
        line-height: 1.2 !important;

        padding: 0 18px !important;

        box-sizing: border-box !important;
    }

    .HeaderBlock__headerblocksearchbox::before {
        font-size: 17px !important;

        padding: 0 14px !important;

        box-sizing: border-box !important;
    }

    .HeaderBlock__headerblocksearchbox {
        width: calc(100% - 32px) !important;

        max-width: none !important;
    }


    /* RECHERCHE */
    #searchbox1,
    .Input__input {
        min-height: 54px !important;

        font-size: 16px !important;
    }

    .SearchBox__searchboxiconwrapper {
        width: 60px !important;
    }


    /* CARTES */
    .Product__prodtSubCont {
        min-height: auto !important;

        padding: 18px !important;

        margin: 8px !important;
    }

    .Product__prodSymbl {
        min-height: 105px !important;
    }


    /* BLOC BESOIN D'AIDE */
    #placardBlock.PlacardBlock__primary {
        padding: 20px 14px !important;
    }

    #placardBlock .PlacardBlock__container1 {
        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 22px 20px !important;

        border-radius: 18px !important;

        gap: 12px !important;
    }

    #placardBlock
    .PlacardBlock__title h2::before {
        font-size: 25px !important;
    }

    #placardBlock
    .PlacardBlock__body::before {
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    #placardBlock .PlacardBlock__cta {
        width: 100% !important;
    }

    #placardBlock .PlacardBlock__cta a,
    #placardBlock .PlacardBlock__cta button {
        width: 100% !important;
        min-width: 0 !important;

        padding: 13px 20px !important;
    }
}
/* ==========================================================
   AJUSTEMENT FINAL - BLOC BESOIN D'AIDE
   ========================================================== */

#placardBlock.PlacardBlock__primary {
    padding: 20px 24px 30px !important;
}

#placardBlock .PlacardBlock__container1 {
    padding: 26px 34px !important;
    gap: 0 !important;
}

/* Titre */
#placardBlock .PlacardBlock__title {
    margin: 0 0 14px 0 !important;
}

/* Texte */
#placardBlock .PlacardBlock__body {
    margin: 0 0 18px 0 !important;
}

/* Bouton */
#placardBlock .PlacardBlock__cta {
    margin: 0 !important;
}

/* Mobile */
@media screen and (max-width: 768px) {

    #placardBlock.PlacardBlock__primary {
        padding: 16px 14px 22px !important;
    }

    #placardBlock .PlacardBlock__container1 {
        padding: 22px 20px !important;
    }

    #placardBlock .PlacardBlock__title {
        margin-bottom: 12px !important;
    }

    #placardBlock .PlacardBlock__body {
        margin-bottom: 16px !important;
    }
}
/* ===== RAPPROCHER LE CONTENU DU BLOC AIDE ===== */

#placardBlock .PlacardBlock__title {
    margin-bottom: 4px !important;
    padding-bottom: 0 !important;
}

#placardBlock .PlacardBlock__body {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding-top: 0 !important;
}

/* Réduit les espacements générés par Zoho */
#placardBlock .PlacardBlock__title::before,
#placardBlock .PlacardBlock__body::before {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Bouton */
#placardBlock .PlacardBlock__cta {
    margin-top: 0 !important;
}
/* ===== COMPACTAGE FINAL DE LA CARTE ===== */

#placardBlock .PlacardBlock__container1 {
    padding-top: 24px !important;
    padding-bottom: 20px !important;
}

/* Desktop uniquement */
@media screen and (min-width: 769px) {
    #placardBlock.PlacardBlock__primary {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }
}
/* ==========================================================
   BANNIÈRE AIDE - VERSION DESKTOP FINALE
   Texte à gauche / bouton à droite
   ========================================================== */

@media screen and (min-width: 769px) {

    /* Carte */
    #placardBlock .PlacardBlock__container1 {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-areas:
            "title button"
            "text button" !important;

        column-gap: 45px !important;
        row-gap: 6px !important;

        align-items: center !important;

        padding: 26px 36px !important;
    }

    /* Titre */
    #placardBlock .PlacardBlock__title {
        grid-area: title !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: end !important;
    }

    #placardBlock .PlacardBlock__title h2 {
        margin: 0 !important;
    }

    /* Texte */
    #placardBlock .PlacardBlock__body {
        grid-area: text !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: start !important;
    }

    /* Bouton à droite */
    #placardBlock .PlacardBlock__cta {
        grid-area: button !important;

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

        width: auto !important;

        justify-self: end !important;
        align-self: center !important;
    }

    #placardBlock .PlacardBlock__cta a,
    #placardBlock .PlacardBlock__cta button {
        width: auto !important;
        min-width: 230px !important;

        padding: 14px 24px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}
/* ==========================================================
   CORRECTION "CENTRE D AIDE" → "CENTRE D’AIDE"
   ========================================================== */

[data-id="portal_name"] {
    font-size: 0 !important;
}

/* Remplace visuellement le texte */
[data-id="portal_name"]::after {
    content: "Centre d’aide";
    font-size: 52px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
}

/* Tablette */
@media screen and (max-width: 900px) {
    [data-id="portal_name"]::after {
        font-size: 38px !important;
    }
}

/* Mobile */
@media screen and (max-width: 768px) {
    [data-id="portal_name"]::after {
        font-size: 26px !important;
    }
}
/* ==========================================================
   MOBILE - VERSION PLUS COMPACTE
   ========================================================== */

@media screen and (max-width: 768px) {

    /* Nom "Centre d’aide" dans le header */
    [data-id="portal_name"]::after {
        font-size: 21px !important;
        line-height: 1 !important;
    }

    /* Zone principale violette/rose */
    #headerBlock {
        min-height: 0 !important;
        height: auto !important;
    }

    /* Titre : Comment pouvons-nous vous aider ? */
    #headerBlock h1,
    #headerBlock h2 {
        font-size: 25px !important;
        line-height: 1.15 !important;
        margin-bottom: 16px !important;
    }

    /* Texte sous le titre */
    #headerBlock p {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    /* Barre de recherche */
    #headerBlock input {
        font-size: 15px !important;
    }
}
/* ==========================================================
   MOBILE - VERSION APPSOLU COMPACTE ET LISIBLE
   ========================================================== */

@media screen and (max-width: 768px) {

    /* HEADER GLOBAL */
    .Header__header,
    .Header__headerContainer {
        min-height: 64px !important;
        padding: 0 12px !important;
    }

    /* Nom du portail */
    [data-id="portal_name"] {
        max-width: 180px !important;
        overflow: visible !important;
    }

    [data-id="portal_name"]::after {
        font-size: 20px !important;
        line-height: 1 !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    /* HERO */
    #headerBlock,
    .HeaderBlock__headerblockcontainer {
        min-height: 0 !important;
        height: auto !important;
    }

    .HeaderBlock__headerblockbody {
        padding-top: 34px !important;
        padding-bottom: 38px !important;
    }

    /* Titre principal */
    .HeaderBlock__headerblockbody::before {
        font-size: 25px !important;
        line-height: 1.15 !important;

        white-space: normal !important;

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

        margin: 0 auto 16px auto !important;
        padding: 0 8px !important;

        box-sizing: border-box !important;
    }

    /* Sous-titre */
    .HeaderBlock__headerblocksearchbox::before {
        font-size: 15px !important;
        line-height: 1.4 !important;

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

        margin: 0 auto 16px auto !important;
        padding: 0 8px !important;

        box-sizing: border-box !important;
    }

    /* Bloc recherche */
    .HeaderBlock__headerblocksearchbox {
        width: calc(100% - 28px) !important;
        max-width: 340px !important;

        margin: 0 auto !important;
    }

    .SearchBox__searchbox {
        border-radius: 10px !important;
    }

    #searchbox1,
    .Input__input {
        min-height: 50px !important;

        font-size: 14px !important;

        padding-left: 16px !important;
        padding-right: 58px !important;
    }

    .SearchBox__searchboxiconwrapper {
        width: 56px !important;
    }

    /* CARTES */
    .Product__prodtSubCont {
        min-height: auto !important;

        padding: 16px !important;
        margin: 8px 6px !important;

        border-radius: 16px !important;
    }

    .Product__prodSymbl {
        min-height: 96px !important;

        padding: 12px !important;
        margin-bottom: 12px !important;

        border-radius: 12px !important;
    }

    .Product__prodSymbl img {
        width: 88px !important;
        height: 88px !important;

        max-width: 88px !important;
        max-height: 88px !important;
    }

    .Product__prodCntent {
        padding: 0 2px 2px !important;
    }

    .Product__prodCntent::before {
        width: 44px !important;
        height: 3px !important;

        margin-bottom: 8px !important;
    }

    /* BLOC BESOIN D'AIDE */
    #placardBlock.PlacardBlock__primary {
        padding: 14px 10px 18px !important;
    }

    #placardBlock .PlacardBlock__container1 {
        padding: 20px 18px !important;

        border-radius: 16px !important;

        gap: 10px !important;
    }

    #placardBlock .PlacardBlock__title h2::before {
        font-size: 23px !important;
        line-height: 1.2 !important;
    }

    #placardBlock .PlacardBlock__body::before {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    #placardBlock .PlacardBlock__cta {
        width: 100% !important;
    }

    #placardBlock .PlacardBlock__cta a,
    #placardBlock .PlacardBlock__cta button {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 44px !important;

        padding: 11px 16px !important;

        font-size: 14px !important;

        border-radius: 10px !important;
    }

    /* FOOTER */
    .FooterContainer__footer {
        font-size: 13px !important;
    }
}
/* ==========================================================
   AJUSTEMENT FINAL HERO - MOBILE + TABLETTE
   ========================================================== */

/* MOBILE */
@media screen and (max-width: 768px) {

    #headerBlock {
        min-height: 0 !important;
        height: auto !important;
    }

    .HeaderBlock__headerblockbody {
        min-height: 0 !important;
        height: auto !important;

        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }
}


/* TABLETTE */
@media screen and (min-width: 769px) and (max-width: 1100px) {

    #headerBlock {
        min-height: 0 !important;
        height: auto !important;
    }

    .HeaderBlock__headerblockbody {
        min-height: 0 !important;
        height: auto !important;

        padding-top: 75px !important;
        padding-bottom: 75px !important;
    }
}
/* ==========================================================
   ALIGNEMENT LOGO + "CENTRE D'AIDE"
   ========================================================== */

/* Conteneur logo + nom */
.Header__headerBrand {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
}

/* Logo */
.Header__brandLogo {
    display: flex !important;
    align-items: center !important;
}

.Header__brandLogo img {
    display: block !important;

    max-height: 58px !important;
    width: auto !important;

    object-fit: contain !important;

    margin: 0 !important;
}

/* Nom du portail */
[data-id="portal_name"] {
    display: flex !important;
    align-items: center !important;

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

    line-height: 1 !important;
}

/* Notre texte corrigé */
[data-id="portal_name"]::after {
    content: "Centre d’aide" !important;

    font-size: 52px !important;
    line-height: 1 !important;
    font-weight: 600 !important;

    color: #FFFFFF !important;

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

/* MOBILE */
@media screen and (max-width: 768px) {

    .Header__headerBrand {
        gap: 10px !important;
    }

    .Header__brandLogo img {
        max-height: 34px !important;
    }

    [data-id="portal_name"]::after {
        font-size: 20px !important;
    }
}
/* ==========================================================
   HEADER FINAL — LOGO + SÉPARATEUR + CENTRE D'AIDE
   ========================================================== */

/* Ensemble logo + Centre d'aide */
.Header__headerBrand {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 0 !important;
}

/* Zone du logo */
.Header__brandLogo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 24px 0 0 !important;
    padding: 0 24px 0 0 !important;

    /* séparateur */
    border-right: 2px solid rgba(255,255,255,0.65) !important;
}

/* Image AppSolu */
.Header__brandLogo img {
    display: block !important;

    width: auto !important;
    height: 58px !important;
    max-height: 58px !important;

    object-fit: contain !important;

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

    /* correction visuelle du logo */
    transform: translateY(5px) !important;
}

/* Centre d'aide */
[data-id="portal_name"] {
    display: flex !important;
    align-items: center !important;

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

    line-height: 1 !important;
}

/* Texte Centre d'aide */
[data-id="portal_name"]::after {
    content: "Centre d’aide" !important;

    display: block !important;

    color: #FFFFFF !important;

    font-size: 52px !important;
    font-weight: 600 !important;
    line-height: 1 !important;

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


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

@media screen and (max-width: 768px) {

    .Header__brandLogo {
        margin-right: 10px !important;
        padding-right: 10px !important;

        border-right-width: 1px !important;
    }

    .Header__brandLogo img {
        height: 30px !important;
        max-height: 30px !important;

        transform: translateY(2px) !important;
    }

    [data-id="portal_name"]::after {
        font-size: 20px !important;
        line-height: 1 !important;
    }
}
/* ==========================================================
   CORRECTION HEADER MOBILE
   ========================================================== */

@media screen and (max-width: 768px) {

    /* Bloc logo + Centre d'aide */
    .Header__headerBrand {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        max-width: 230px !important;
    }

    /* Logo AppSolu */
    .Header__brandLogo {
        display: flex !important;
        align-items: center !important;

        margin: 0 9px 0 0 !important;
        padding: 0 9px 0 0 !important;

        border-right: 1px solid rgba(255,255,255,0.7) !important;
        flex-shrink: 0 !important;
    }

    .Header__brandLogo img {
        width: auto !important;
        height: 27px !important;
        max-height: 27px !important;

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

        /* Annule le décalage desktop */
        transform: translateY(0) !important;
    }

    /* Nom du portail */
    [data-id="portal_name"] {
        display: block !important;

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

        width: auto !important;
        max-width: 105px !important;

        overflow: visible !important;
        white-space: nowrap !important;

        line-height: 1 !important;
    }

    /* Si ton vrai texte est masqué par le ::after */
    [data-id="portal_name"]::after {
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 1 !important;

        white-space: nowrap !important;
    }

    /* Laisse de la place aux icônes à droite */
    .Header__headerPrimary {
        padding-left: 18px !important;
        padding-right: 12px !important;
    }
}
@media screen and (max-width: 768px) {

    /* On cache le logo + nom natifs dans le header mobile */
    .Header__headerBrand {
        display: none !important;
    }

    /* On utilise le header primaire pour recréer une marque propre */
    .Header__headerPrimary {
        position: relative !important;
        min-height: 64px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        padding: 0 12px !important;
    }

    /* Marque recréée à gauche */
    .Header__headerPrimary::before {
        content: "AppSolu  |  Centre d’aide" !important;

        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;

        color: #FFFFFF !important;

        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        white-space: nowrap !important;

        z-index: 2 !important;
    }

    /* On réserve la place aux icônes à droite */
    .Header__listDir,
    .Header__menu,
    .Header__menuBoxMain {
        position: relative !important;
        z-index: 3 !important;
    }
}
/* ==========================================================
   HEADER MOBILE - CORRECTION DEFINITIVE
   ========================================================== */

@media screen and (max-width: 768px) {

    /* Header */
    .Header__headerPrimary {
        position: relative !important;
        min-height: 62px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;

        padding: 0 12px !important;
        box-sizing: border-box !important;
    }

    /* Cache complètement le bloc marque natif */
    .Header__headerBrand {
        display: none !important;
    }

    /* Notre texte à gauche */
    .Header__headerPrimary::before {
        content: "AppSolu | Centre d’aide" !important;

        position: absolute !important;

        left: 14px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

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

        color: #FFFFFF !important;

        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        z-index: 1 !important;
    }

    /* Zone des icônes à droite */
    .Header__listDir,
    .Header__userPreference_mobile,
    .Header__menuBoxMain {
        position: relative !important;
        z-index: 5 !important;

        flex-shrink: 0 !important;
    }

    /* On force la loupe à rester à droite */
    [data-id="portal_search_icon"] {
        margin-left: auto !important;
    }
}
/* ==========================================================
   MENU "PARCOURIR" - CORRECTION LISIBILITÉ
   ========================================================== */

/* Fond du panneau */
.Browse__browse,
.Browse__browseContainer,
.Browse__browseList,
.Browse__categoryList {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* Texte / liens */
.Browse__browse a,
.Browse__browseContainer a,
.Browse__browseList a,
.Browse__categoryList a,
.Browse__browse *,
.Browse__browseContainer *,
.Browse__browseList *,
.Browse__categoryList * {
    color: #24174F !important;
}

/* Séparateurs */
.Browse__browse li,
.Browse__browseContainer li,
.Browse__browseList li,
.Browse__categoryList li {
    border-bottom: 1px solid #ECE8F1 !important;
}

/* Survol */
.Browse__browse a:hover,
.Browse__browseContainer a:hover,
.Browse__browseList a:hover,
.Browse__categoryList a:hover {
    color: #D51C8D !important;
}
/* ==========================================================
   MENU PARCOURIR - RETIRE LE BLANC FORCÉ
   ========================================================== */

/* Le bouton Parcourir reste blanc */
[data-id="browse_products"] {
    color: #FFFFFF !important;
}

/* MAIS le contenu déroulant retrouve du texte foncé */
.Header__headerSecondary [role="menu"],
.Header__headerSecondary [role="menu"] *,
.Header__headerSecondary [role="dialog"],
.Header__headerSecondary [role="dialog"] * {
    color: #24174F !important;
}

/* Liens */
.Header__headerSecondary [role="menu"] a,
.Header__headerSecondary [role="dialog"] a {
    color: #24174F !important;
}

/* Survol */
.Header__headerSecondary [role="menu"] a:hover,
.Header__headerSecondary [role="dialog"] a:hover {
    color: #D51C8D !important;
}
/* ==========================================================
   MENU "PARCOURIR" - VERSION PROPRE ET LISIBLE
   ========================================================== */

/* Fond général du panneau */
[data-id="brows_product_container"],
.BrowseBlockHeader__open,
.BrowseBlockHeader__container1,
#browseBlockContainer {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* Chaque ligne */
.ModuleList__item,
.ModuleList__lineseparated {
    background: #FFFFFF !important;
}

/* Liens */
.ModuleList__link {
    color: #24174F !important;
    text-decoration: none !important;

    padding: 14px 8px !important;

    display: block !important;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        padding-left 0.2s ease !important;
}

/* Texte des catégories */
.ModuleList__label {
    color: #24174F !important;

    font-weight: 600 !important;
    font-size: 18px !important;

    white-space: normal !important;
}

/* Séparateurs */
.ModuleList__lineseparated {
    border-bottom: 1px solid #EAE6F0 !important;
}

/* Survol d'une catégorie */
.ModuleList__link:hover {
    background: #F8F3FC !important;

    color: #D51C8D !important;

    padding-left: 16px !important;
}

.ModuleList__link:hover .ModuleList__label {
    color: #D51C8D !important;
}

/* Bouton Parcourir dans le header */
[data-id="browse_products"] {
    color: #FFFFFF !important;
}
/* ==========================================================
   HEADER TABLETTE + MOBILE — VERSION FINALE
   Vrai logo AppSolu + Parcourir propre
   ========================================================== */

@media screen and (max-width: 1100px) {

    /* -------------------------------------------------------
       1. SUPPRIME LE FAUX "AppSolu | Centre d’aide"
       qu'on avait créé précédemment
       ------------------------------------------------------- */

    .Header__headerPrimary::before {
        content: none !important;
        display: none !important;
    }


    /* -------------------------------------------------------
       2. RÉAFFICHE LE VRAI LOGO + CENTRE D'AIDE
       ------------------------------------------------------- */

    .Header__headerBrand {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        width: auto !important;
        max-width: none !important;

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

        gap: 0 !important;

        flex-shrink: 1 !important;
    }


    /* Zone du vrai logo */
    .Header__brandLogo {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 12px 0 0 !important;
        padding: 0 12px 0 0 !important;

        border-right: 1px solid rgba(255,255,255,0.60) !important;

        flex-shrink: 0 !important;
    }


    /* Vrai logo AppSolu coloré */
    .Header__brandLogo img {
        display: block !important;

        width: auto !important;
        height: 32px !important;
        max-height: 32px !important;
        max-width: 105px !important;

        object-fit: contain !important;

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

        transform: none !important;
    }


    /* Nom du portail */
    [data-id="portal_name"] {
        display: flex !important;
        align-items: center !important;

        width: auto !important;
        max-width: none !important;

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

        font-size: 0 !important;

        overflow: visible !important;
        white-space: nowrap !important;

        flex-shrink: 1 !important;
    }


    [data-id="portal_name"]::after {
        content: "Centre d’aide" !important;

        display: block !important;

        color: #FFFFFF !important;

        font-size: 22px !important;
        font-weight: 600 !important;
        line-height: 1 !important;

        white-space: nowrap !important;

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


    /* -------------------------------------------------------
       3. PREMIÈRE LIGNE DU HEADER
       ------------------------------------------------------- */

    .Header__headerPrimary {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        min-height: 62px !important;

        padding: 0 18px !important;

        box-sizing: border-box !important;
    }


    /* -------------------------------------------------------
       4. DEUXIÈME LIGNE : ACCUEIL + PARCOURIR
       ------------------------------------------------------- */

    .Header__headerSecondary {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        min-height: 52px !important;

        padding: 6px 18px 10px !important;

        background: transparent !important;

        box-sizing: border-box !important;
    }


    /* -------------------------------------------------------
       5. BOUTON PARCOURIR
       ------------------------------------------------------- */

    [data-id="browse_products"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 0 !important;

        height: auto !important;

        margin: 0 !important;
        padding: 9px 16px !important;

        background: rgba(82, 16, 109, 0.38) !important;

        border: 1px solid rgba(255,255,255,0.14) !important;
        border-radius: 10px !important;

        color: #FFFFFF !important;

        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1 !important;

        box-shadow: none !important;
    }


    [data-id="browse_products"]:hover {
        background: rgba(82, 16, 109, 0.55) !important;
    }
}


/* ==========================================================
   TÉLÉPHONE
   ========================================================== */

@media screen and (max-width: 768px) {

    .Header__headerPrimary {
        min-height: 58px !important;
        padding: 0 12px !important;
    }


    .Header__brandLogo {
        margin-right: 8px !important;
        padding-right: 8px !important;
    }


    .Header__brandLogo img {
        height: 25px !important;
        max-height: 25px !important;
        max-width: 82px !important;
    }


    [data-id="portal_name"]::after {
        font-size: 17px !important;
    }


    .Header__headerSecondary {
        min-height: 46px !important;
        padding: 5px 12px 8px !important;
    }


    [data-id="browse_products"] {
        padding: 8px 13px !important;

        border-radius: 9px !important;

        font-size: 14px !important;
    }
}
/* ==========================================================
   PARCOURIR - TABLETTE / MOBILE PLUS COMPACT
   ========================================================== */

@media screen and (max-width: 1100px) {

    [data-id="brows_product_container"] {
        position: absolute !important;
        top: 100% !important;
        left: 12px !important;
        right: 12px !important;

        width: auto !important;
        max-height: 360px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        background: #FFFFFF !important;
        border-radius: 0 0 16px 16px !important;

        box-shadow: 0 14px 32px rgba(36, 23, 79, 0.18) !important;

        z-index: 9999 !important;
    }

    .BrowseBlockHeader__container1,
    #browseBlockContainer {
        max-height: 360px !important;
        overflow-y: auto !important;
        background: #FFFFFF !important;
    }

    .ModuleList__link {
        padding: 15px 16px !important;
    }

    .ModuleList__label {
        font-size: 17px !important;
        font-weight: 600 !important;
    }
}


/* Téléphone encore plus compact */
@media screen and (max-width: 768px) {

    [data-id="brows_product_container"] {
        left: 8px !important;
        right: 8px !important;

        max-height: 300px !important;

        border-radius: 0 0 14px 14px !important;
    }

    .BrowseBlockHeader__container1,
    #browseBlockContainer {
        max-height: 300px !important;
    }

    .ModuleList__link {
        padding: 12px 14px !important;
    }

    .ModuleList__label {
        font-size: 15px !important;
    }
}
/* ==========================================================
   TITRE CENTRE D'AIDE — RESPONSIVE
   ========================================================== */

/* Tablette */
@media screen and (max-width: 1100px) {

    [data-id="portal_name"]::after {
        font-size: 19px !important;
        font-weight: 600 !important;
    }
}


/* Téléphone */
@media screen and (max-width: 768px) {

    [data-id="portal_name"]::after {
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    /* Logo légèrement plus petit */
    .Header__brandLogo img {
        height: 23px !important;
        max-height: 23px !important;
        max-width: 75px !important;
    }

    /* Séparateur plus compact */
    .Header__brandLogo {
        margin-right: 7px !important;
        padding-right: 7px !important;
    }
}


/* Très petits téléphones */
@media screen and (max-width: 400px) {

    [data-id="portal_name"]::after {
        font-size: 14px !important;
    }

    .Header__brandLogo img {
        height: 21px !important;
        max-height: 21px !important;
        max-width: 68px !important;
    }
}
/* ==========================================================
   MASQUER COMPLÈTEMENT "BASE DE CONNAISSANCES"
   ========================================================== */

.ProductModule__moduleCont {
    display: none !important;
}
/* =========================================
   FOOTER - SUPPRIMER LISTE DES PRODUITS
   ========================================= */

.FooterContainer__productsCont {
    display: none !important;
}
.FooterContainer__footerTitle {
    font-size: 0 !important;
}

.FooterContainer__footerTitle::after {
    content: "AppSolu · Centre d’aide";
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
}
/* ==========================================================
   FOOTER FINAL
   ========================================================== */

/* Supprime la liste Appsolu Taxi / Fleet / etc. */
.FooterContainer__productsCont {
    display: none !important;
}

/* Remplace le titre */
.FooterContainer__footerTitle {
    font-size: 0 !important;
    margin: 0 !important;
}

.FooterContainer__footerTitle::after {
    content: "AppSolu · Centre d’aide";
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
}

/* Footer plus compact */
.FooterContainer__footer {
    background: #201A35 !important;
    padding: 20px 32px !important;
}

/* Liens */
.FooterContainer__footer a {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

.FooterContainer__footer a:hover {
    color: #FF3D63 !important;
}


/* MOBILE */
@media screen and (max-width: 768px) {

    .FooterContainer__footer {
        padding: 16px 20px !important;
    }

    .FooterContainer__footerTitle::after {
        font-size: 14px !important;
    }
}
/* =========================================
   CORRECTION ICÔNE RECHERCHE
   ========================================= */

.SearchContainer__searchIcon,
.SearchContainer__searchIcon::before,
.SearchContainer__searchIcon::after {
    font-size: 22px !important;
    transform: scale(0.82) !important;
    transform-origin: center !important;
}

/* Sur téléphone */
@media screen and (max-width: 768px) {
    .SearchContainer__searchIcon,
    .SearchContainer__searchIcon::before,
    .SearchContainer__searchIcon::after {
        font-size: 19px !important;
        transform: scale(0.75) !important;
    }
}
/* =========================================
   LOUPE BARRE DE RECHERCHE
   ========================================= */

.SearchBox__searchboxiconwrapper svg {
    width: 20px !important;
    height: 20px !important;
    overflow: visible !important;
}

/* Centre parfaitement la loupe dans le bouton */
.SearchBox__searchboxiconwrapper,
.SearchBox__searchboxicon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* MOBILE / TABLETTE */
@media screen and (max-width: 768px) {
    .SearchBox__searchboxiconwrapper svg {
        width: 18px !important;
        height: 18px !important;
    }
}
/* ==========================================================
   TAILLE DES LOGOS - CARTES SECONDAIRES
   ========================================================== */

/* Cadre du logo */
.Product__prodSymbl .Avatar__avatar {
    width: 100px !important;
    height: 100px !important;
    min-width: 100px !important;
    min-height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    overflow: hidden !important;
}

/* Logo */
.Product__prodSymbl .Avatar__avatar img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
}

/* MOBILE */
@media screen and (max-width: 768px) {

    .Product__prodSymbl .Avatar__avatar {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
    }
}