/* Main Font Family */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Handwriting style for quotes, used in the HTML widgets */
@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');

/* ************************************************************* */
/*  🎨 LumApps Design System tokens - https://design.lumapps.com */
/* ************************************************************* */

:root {
    /* TYPOGRAPHY */

    /* --lumx-typography-font-family : 'Poppins', sans-serif; - To apply the font in every UI elements. If used, comment the Typography additional settings section */
    --lumx-typography-global-headlines-font-family: 'Poppins', sans-serif; /* To add in the product */
    --lumx-typography-global-headlines-font-weight: 600; /* To add in the product */
    --lumx-typography-custom-title1-font-family: var(--lumx-typography-global-headlines-font-family); /* Product native */
    --lumx-typography-custom-title1-font-weight: var(--lumx-typography-global-headlines-font-weight); /* Product native */
    --lumx-typography-custom-title1-line-height: 56px; /* Product native */
    --lumx-typography-custom-title2-font-family: var(--lumx-typography-global-headlines-font-family); /* Product native */
    --lumx-typography-custom-title2-font-weight: var(--lumx-typography-global-headlines-font-weight); /* Product native */
    --lumx-typography-custom-title2-line-height: 42px; /* Product native */
    --lumx-typography-custom-title3-font-family: var(--lumx-typography-global-headlines-font-family); /* Product native */
    --lumx-typography-custom-title3-font-weight: var(--lumx-typography-global-headlines-font-weight); /* Product native */
    --lumx-typography-custom-title4-font-family: var(--lumx-typography-global-headlines-font-family); /* Product native */
    --lumx-typography-custom-title4-font-weight: var(--lumx-typography-global-headlines-font-weight); /* Product native */
    --lumx-typography-custom-title5-font-family: var(--lumx-typography-global-headlines-font-family); /* Product native */
    --lumx-typography-custom-title5-font-weight: var(--lumx-typography-global-headlines-font-weight); /* Product native */
    --lumx-typography-custom-title6-font-family: var(--lumx-typography-global-headlines-font-family); /* Product native */
    --lumx-typography-custom-title6-font-weight: var(--lumx-typography-global-headlines-font-weight); /* Product native */
    --lumx-typography-custom-intro-font-size: 20px; /* Product native */
    --lumx-typography-custom-intro-font-weight: var(--lumx-typography-font-weight-light); /* Product native */
    --lumx-typography-custom-intro-line-height: 30px; /* Product native */
    --lumx-typography-custom-body-large-font-size: 20px; /* Product native */
    --lumx-typography-custom-body-large-font-weight: var(--lumx-typography-font-weight-light); /* Product native */
    --lumx-typography-custom-metadata-font-size: 11px; /* Product native */
    --lumx-typography-custom-metadata-text-transform: uppercase; /* To add in the product */
    --lumx-typography-custom-metadata-letter-spacing: 2px; /* To add in the product */
    
    /* APP */

    --lumx-app-background: #f5f5f5; /* Product native */
    --lumx-app-header-box-shadow: none; /* Product native */

    /* BUTTON */

    --lumx-button-border-radius: 5px; /* Product native */

    /* METADATA */

    --lumx-metadata-state-default-theme-light-color: var(--lumx-color-primary-L2); /* Product native */
    --lumx-metadata-state-hover-theme-light-color: var(--lumx-color-primary-L1); /* Product native */
    --lumx-metadata-state-active-theme-light-color: var(--lumx-color-primary-N); /* Product native */
    --lumx-metadata-margin-vertical: 0; /* To add in the product */
    --lumx-metadata-list-separator: '';

    /* TAG */

    --lumx-tag-state-default-theme-light-color: var(--lumx-color-primary-L2); /* Product native */
    --lumx-tag-state-hover-theme-light-color: var(--lumx-color-primary-L1); /* Product native */
    --lumx-tag-state-hover-theme-dark-color: var(--lumx-color-light-L2); /* Product native */
    --lumx-tag-state-active-theme-light-color: var(--lumx-color-primary-D2); /* Product native */
    --lumx-tag-state-active-theme-dark-color: var(--lumx-color-light-L2); /* Product native */

    /* TEXT FIELD */

    --lumx-text-field-input-border-radius: 18px; /* Product native */
    --lumx-text-field-state-default-theme-light-input-border-color: transparent; /* Product native */

    /* TABS */

    --lumx-tabs-links-spacing: var(--lumx-spacing-unit-regular); /* To add in the product */
    --lumx-tabs-link-height: 40px; /* Product native */
    --lumx-tabs-link-border-radius: 20px; /* Product native */
    --lumx-tabs-link-emphasis-low-state-default-border-top-width: 1px; /* Product native */
    --lumx-tabs-link-emphasis-low-state-default-border-right-width: 1px; /* Product native */
    --lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 1px; /* Product native */
    --lumx-tabs-link-emphasis-low-state-default-border-left-width: 1px; /* Product native */
    --lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L4); /* Product native */
    --lumx-tabs-link-emphasis-low-state-default-theme-light-color: var(--lumx-color-dark-N); /* Product native */
    --lumx-tabs-link-emphasis-low-state-hover-border-top-width: 1px; /* Product native */
    --lumx-tabs-link-emphasis-low-state-hover-border-right-width: 1px; /* Product native */
    --lumx-tabs-link-emphasis-low-state-hover-border-bottom-width: 1px; /* Product native */
    --lumx-tabs-link-emphasis-low-state-hover-border-left-width: 1px; /* Product native */
    --lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color: transparent; /* Product native */
    --lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L3); /* Product native */
    --lumx-tabs-link-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-N); /* Product native */
    --lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color: transparent; /* Product native */
    --lumx-tabs-link-emphasis-low-state-active-border-top-width: 1px; /* Product native */
    --lumx-tabs-link-emphasis-low-state-active-border-right-width: 1px; /* Product native */
    --lumx-tabs-link-emphasis-low-state-active-border-bottom-width: 1px; /* Product native */
    --lumx-tabs-link-emphasis-low-state-active-border-left-width: 1px; /* Product native */
    --lumx-tabs-link-emphasis-low-state-active-theme-light-background-color: transparent; /* Product native */
    --lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L2); /* Product native */
    --lumx-tabs-link-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-N); /* Product native */
    --lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color: transparent; /* Product native */
    --lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 0px; /* Product native */
    --lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L6); /* Product native */
    --lumx-tabs-link-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-N); /* Product native */
    --lumx-tabs-link-emphasis-selected-state-hover-border-bottom-width: 0px; /* Product native */
    --lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L5); /* Product native */
    --lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-N); /* Product native */
    --lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: transparent; /* Product native */
    --lumx-tabs-link-emphasis-selected-state-active-border-bottom-width: 0px; /* Product native */
    --lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L4); /* Product native */
    --lumx-tabs-link-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-N); /* Product native */
    --lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: transparent; /* Product native */

    /* RADIUS */
    
    --default-border-radius: 20px;
    --thumbnail-border-radius: 10px;
}

/* *************************************** */
/*            🌍 Global Config             */
/* *************************************** */

:root {
    --background-color-widget-header: #e4e6f3;
    --gradient-except-homepage: linear-gradient(90deg, #ec56aa 38%, #f0b24b 100%); /* You can use var(--lumx-color-primary-N) / var(--lumx-color-secondary-N) / white for simplicity */
    --gradient-alert-homepage: linear-gradient(45deg, #367aff 0%, #da2887 100%);
}

/* Typography additional settings - to be used when --lumx-typography-font-family is commented */

.main-nav-item__label, .widget-header__title, .widget-footer__label, .block-intro {
    font-family: var(--lumx-typography-global-headlines-font-family);
    font-weight: 500 !important;
}

/* Grey Background color of the pages (view mode, and in the designer) */

.layout,
.content--designer-mode  {
    background-color: #f8f8f8;
}

/* Unified radius on all thumbnails */

.lumx-thumbnail__image {
    border-radius: var(--thumbnail-border-radius);
}

/* Remove Favorite Sites and Ressource icons from the topbar as it is useless */

.header-top__favorite-sites, 
.header-top__resource-center {
    display: none;
}

/* Style for page headers */

.component-row--page-header {
    background-color: #e4e6f3;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 40px;
    min-height: 230px;
}

/* Style for titles */

.widget--theme-light .block-title,
.widget-title__title {
    color: var(--lumx-color-primary-N) !important;
}

/* Style Rich Text Editor */

.block-structured-content strong.wrex-content-bold,
.ask-ai-answer__wrapper .wrex-content-bold {
    font-weight: 600 !important;
}
.block-structured-content .wrex-content-body{
    font-size: 18px !important;
}

/* Style for metadata */

.metadata-link {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    border-radius: var(--lumx-button-border-radius) !important;
    text-transform: uppercase;
    font-weight: bolder !important;
}
.metadata-link--theme-light {
    color: #ffffff !important;
    background-color: var(--lumx-color-primary-N) !important;
}
.metadata-link--theme-dark {
    color: var(--lumx-color-primary-N) !important;
    background-color: #ffffff !important;
}

/* *************************************** */
/*           🧩 Custom CSS class           */
/* *************************************** */

/* Use 'ungrouped-news' on the content list widget */

.widget--ungrouped-news .block-list__item {
    background-color:white !important;
    padding:20px;
    border-radius: 20px
}
.widget--ungrouped-news .lumx-divider {
    display:none
}

/* Use 'page-header' on rows for page header */

.component-row--page-header {
    background-color: var(--lumx-color-primary-L5) !important;
}

/* Use 'page-header--theme-dark' on rows for page header */

.component-row--page-header--theme-dark {
    background-color: var(--lumx-color-primary-N);
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 40px;
}

/* Use 'title-center' to center the text */

.widget--title-center {
    --lumx-widget-title-alignment-h: center;
    --lumx-widget-title-text-align: center;
}

/* Use 'slideshow-content-list' to reduce the padding between the slideshow actions and the news content - 76px by default */

.widget--slideshow-content-list .block-page-preview__content {
    padding-bottom: 40px !important
}

/* Use those variable to center vertically with 'v-align-center' or horizontally with 'h-align-center' any content */

.widget--h-align-center .widget-content {
    justify-content: center; /* ! Unsafe */
}
.widget--h-align-center{
    align-items: center; /* ! Unsafe */
}
.widget--v-align-center .widget-content {
    align-items: center; /* ! Unsafe */
}

/* Use 'widget--h-align-left' variable to align your widget content to the left */
.widget--h-align-left .widget-content {
    justify-content: left !important; /* ! Unsafe */
}

/* Use 'widget--h-align-right' variable to align your widget content to the right */
.widget--h-align-right .widget-content {
    justify-content: right; /* ! Unsafe */
}

/* Row with separator (to replace with cell borders) with 'separator-top' and 'separator-bottom' */

.row[class*='component-row--separator'] > .row-wrapper,
.component-row[class*='component-row--separator'] > .component-row__wrapper {
    border-color: var(--lumx-color-dark-L4);
    border-style: solid;
    border-width: 0;
}
.component-row--separator-top > .row-wrapper,
.component-row--separator-top > .component-row__wrapper {
    padding-top: var(--row-spacing);
    border-top-width: 1px !important;
}
.component-row--separator-bottom > .row-wrapper,
.component-row--separator-bottom > .component-row__wrapper {
    padding-bottom: var(--row-spacing);
    border-bottom-width: 1px !important;
}
@media (min-width: 64em) {
    .component-row--separator-bottom > .row-wrapper,
    .component-row--separator-bottom > .component-row__wrapper {
        width: 936px !important;
    }
}

/* Use 'squared-thumb' for squared thumbs */

.widget--squared-thumb .block-page-preview .block-page-preview__thumbnail-wrapper,
.widget--squared-thumb .block-community-preview .block-community-preview__thumbnail-wrapper {
    flex: 0 0 96px !important; /* ! Unsafe */
}
.widget--squared-thumb .lumx-thumbnail {
    --lumx-thumbnail-aspect-ratio: 1/1;
}

/* Use 'custom_news' for story-like widgets */

@media (min-width: 481px) {
    .widget--custom_news .widget-slideshow__wrapper,
    .widget--custom_news .lumx-slideshow__wrapper {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 2fr));
        grid-template-rows: 1fr;
        gap: 24px !important;
        grid-auto-flow: row;
        grid-template-areas: 'Content-1 Content-2 Content-3';
    }
    .widget--custom_news .widget-slideshow__block:nth-child(1) {
        grid-area: Content-1;
        height: 100%;
    }
    .widget--custom_news .widget-slideshow__block:nth-child(2) {
        grid-area: Content-2;
        height: 100%;
    }
    .widget--custom_news .widget-slideshow__block:nth-child(3) {
        grid-area: Content-3;
        height: 100%;
    }
    .block-slideshow--with-navigation .block-page-preview--cover.block-page-preview--size-xs .block-page-preview__content {
        padding: 110px 24px 24px 24px !important;
    }
    .widget--custom_news .widget-slideshow__controls {
        display: none;
    }
    .widget--custom_news .content-block--background-thumbnail .content-block__thumbnail {
        align-items: flex-end;
        height: 100%;
    }
    .widget--custom_news .content-block-excerpt,
    .widget--custom_news .block-html.block-html--dark {
        font-size: var(--lumx-typography-custom-body-font-size) !important;
    }
    .widget--custom_news .block-page-preview--cover .block-page-preview__content:before,
    .widget--custom_news .content-block--default-style.content-block--view-mode-cover.content-block--background-thumbnail .content-block__fields {
        bottom: 0;
        content: '';
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
        background: rgb(0, 0, 0);
        background: linear-gradient(360deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.4416360294117647) 55%, rgba(0, 0, 0, 0) 80%);
        opacity: 1;
        border-radius: 16px;
    }
    .widget--custom_news .content-block-title a,
    .widget--custom_news .content-block-title,
    .widget--custom_news .block-page-preview__title {
        font-family: var(--lumx-typography-custom-title4-font-family);
        font-size: var(--lumx-typography-custom-title4-font-size);
        font-style: var(--lumx-typography-custom-title4-font-style);
        font-weight: var(--lumx-typography-custom-title4-font-weight);
        line-height: var(--lumx-typography-custom-title4-line-height);
    }
    .widget--custom_news .content-block-title a {
        width: 130% !important;
    }
    .widget--custom_news .block-slideshow--size-l.block-slideshow--cover .block-slideshow__controls {
        display: none;
    }
}
.widget--custom_news .lumx-thumbnail__background:hover {
    transform: scale(1.15);
}
.widget--custom_news .lumx-thumbnail__background {
    transition: transform 0.4s;
}
.widget--custom_news .metadata-link {
    color: white !important;
    background-color: var(--lumx-color-primary-N) !important;
}

/* Use 'space-instagram-design' to list communities like instagram account */

.widget--space-instagram-design {
    --lumx-thumbnail-aspect-ratio: 1/1;

    overflow: visible !important;
}
.widget--space-instagram-design .widget-content {
    overflow: visible !important;
}
.widget--space-instagram-design .block-grid {
    --lumx-grid-column-item-min-width: 150px !important;
}
.widget--space-instagram-design .block-community-preview {
    align-items: center;
}
.widget--space-instagram-design .block-community-preview .block-community-preview__thumbnail-wrapper {
    width: 100px;
    height: 100px;
    margin-bottom: var(--lumx-spacing-unit-big) !important;
    overflow: hidden;
    border-radius: 999px;
    outline-width: 4px;
    outline-style: solid;
    outline-color: var(--lumx-color-secondary-D2);
    outline-offset: 4px;
}
.widget--space-instagram-design .lumx-heading.lumx-text {
    text-align: center;
}

/* Use 'fixed' as style class on rows to get a fixed background */

.component-row--fixed {
    background-attachment: fixed;
}

/* Use 'dark' as style class on rows and widgets to get a dark background */

.component-row--dark,
.widget--dark .widget-content {
    background-color: var(--lumx-color-primary-N) !important;
}

/* Use 'learning-compact' as style class on the learning catalog widget to get small thumbnails */

.widget--learning-compact .lumx-grid-column {
    --lumx-grid-column-columns: 2; 
}
.widget--learning-compact .lumx-link__content{
    display: flex !important;
}
.widget--learning-compact .training-informations__container-without-progress-bar,
.widget--learning-compact .training-informations__container-with-progress-bar {
    width: 200px;
    margin-right: 20px;
}
.widget--learning-compact .training-informations__text {
    margin-top:0px !important
}

/* Use 'blur' to get a blurry background */

.widget--blur .widget-content,
.widget--blur .block-list__item {
    background-color: rgba(255, 255, 255, .25) !important;
    backdrop-filter: blur(70px);
}

/* Use 'metadata-no-bg' as an alternative style for metadata display without background */

.widget--metadata-no-bg .metadata-link {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    border-radius: var(--lumx-button-border-radius) !important;
    text-transform: uppercase;
    font-weight: bolder !important;
    font-size: medium;
}
.widget--metadata-no-bg .metadata-link--theme-light {
    color: var(--lumx-color-primary-N) !important;
    background-color: transparent !important;
}
.widget--metadata-no-bg .metadata-link--theme-dark {
    color: var(--lumx-color-primary-N) !important;
    background-color: #ffffff !important;
}

/* Use 'welcome-bold' on the welcome widget to get it bolder */

.widget--welcome-bold{
    font-weight : var(--lumx-typography-global-headlines-font-weight)
}

/* Use 'not-in-mobile' to prevent an element from being loaded on the mobile */

@media (max-width: 767px) {
    .widget--not-in-mobile,
    .component-row--not-in-mobile,
    .component-cell--not-in-mobile
        {
            display: none;
        }
}

/* *************************************** */
/*        📃 Page - Login page             */
/* *************************************** */

/* Login v2 */

#login-app {
    background: var(--gradient-except-homepage) !important;
    /*background-image: url('ADD THE BACKGROUND IMAGE URL');
    background-size: cover;*/
}

.login-page {
    background-color: white !important;
}

/* *************************************** */
/*            📃 Page - Homepage           */
/* *************************************** */

/* Alert widget */

.widget--alert {
    align-items: center;
}
.widget--alert .lumx-link__content {
    font-size: 15px;
}
.widget--alert .block-slideshow__controls {
    display: none;
}
.widget--alert .block-slideshow__item-wrapper {
    text-align: center;
}
.widget--alert .block-slideshow--grouped,
.block-slideshow--ungrouped {
    margin-top: 0px;
}
.widget--alert-full .lumx-link__content::before {
    font-size: 20px;
}
.widget--alert-full {
    display: grid !important;
    grid-template-columns: 35% 65% !important;
    gap: 20px !important;
}
.widget--alert-full .widget-header {
    padding-top: 25px;
}
.widget--alert-full .widget-header__wrapper {
    background: var(--gradient-alert-homepage);
}
.widget--alert-full .block-page-preview__title {
    text-align: left;
}

/* Breaking news widget */

.widget--breaking-news {
    --lumx-typography-custom-title3-font-size: 60px;
    --lumx-typography-custom-title3-line-height: 50px;
    --lumx-typography-custom-metadata-font-size: 22px;
    --lumx-typography-custom-metadata-font-weight: 700;
    --lumx-typography-custom-publish-info-font-size: 16px;
}
.widget--breaking-news .lumx-thumbnail__image {
    border-radius: 0px;
}
.widget--breaking-news .widget-content {
    padding: 0px !important;
    border-radius: 0px !important;
}
.widget--breaking-news .metadata-link {
    text-transform: uppercase !important;
    color: white !important;
    background-color: transparent !important;
    letter-spacing: -0.7px;
}
.widget--breaking-news .block-page-preview__excerpt {
    font-size: 30px !important;
}
.widget--breaking-news .block-page-preview .block-page-preview__content {
    position: relative !important;
    gap: var(--lumx-spacing-unit-huge) !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 0 !important;
    background-color: var(--lumx-color-dark-L2) !important;
}
.widget--breaking-news .block-page-preview .block-page-preview__content::before {
    display: none !important;
}
.widget--breaking-news .block-page-preview .block-page-preview__field {
    max-width: 900px !important;
    margin: 0 !important;
    margin-right: unset !important;
}
.widget--breaking-news .block-page-preview .block-page-preview__title {
    text-align: center;
    line-height: 60px !important;
}
.widget--breaking-news .block-slideshow .block-slideshow__controls {
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
}
.widget--breaking-news .block-page-preview__excerpt {
    text-align: center;
    font-family: var(--lumx-typography-custom-title4-font-family);
    font-size: var(--lumx-typography-custom-title4-font-size);
    font-style: var(--lumx-typography-custom-title4-font-style);
    font-weight: var(--lumx-typography-custom-title4-font-weight);
    line-height: var(--lumx-typography-custom-title4-line-height);
    background: var(--gradient-except-homepage);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.widget--upcoming-events .reactions-block {
    display: none;
}
.widget--upcoming-events .block-event-preview__date {
    font-size: 15px;
    font-style: var(--lumx-typography-custom-body-font-style);
}
.widget--upcoming-events .block-event-preview__title {
    font-size: 15px;
    font-style: var(--lumx-typography-custom-body-font-style);
    font-weight: var(--lumx-typography-interface-subtitle1-font-weight);
}
.widget--upcoming-events .lumx-heading .lumx-link__content {
    font-family: var(--lumx-typography-custom-title4-font-family);
    font-size: var(--lumx-typography-custom-title3-font-size);
    font-style: var(--lumx-typography-custom-title4-font-style);
    font-weight: var(--lumx-typography-custom-title4-font-weight);
    line-height: var(--lumx-typography-custom-title4-line-height);
    color: var(--lumx-color-secondary-N);
    filter: brightness(2);
}
.widget--upcoming-events .block-event-preview__date {
    font-weight: bold;
}
.widget--upcoming-events .block-event-preview__date::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    vertical-align: middle;
    background-image: url('https://trendize.lumapps.com/serve/4930449491099648-1810132748352095/calendar-icon-white.png?contentDisposition=inline');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.widget--upcoming-events .lumx-thumbnail__image {
    border-top-left-radius: 200px;
    border-bottom-left-radius: 200px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.widget--upcoming-events .event-actions {
    display: none;
}
.widget--theme-dark.widget--upcoming-events button .lumx-link__content{
	color: white;
}

.widget--tools .lumx-thumbnail__image {
    border-radius: 5px;
}
.widget--tools .lumx-thumbnail--theme-dark .lumx-thumbnail__image {
    background: var(--lumx-color-light-L3);
}
.widget--tools .lumx-thumbnail--theme-light .lumx-thumbnail__image {
    background-color: var(--lumx-color-primary-L5);
}
.widget--tools .directory-entry-block__actions {
    display: none;
}

.widget--section-space {
    background-image: url('https://trendize.lumapps.com/serve/4930449491099648-4601456288385001/social-illustration.png?contentDisposition=inline');
    background-repeat: no-repeat;
    background-position: right center !important;
    background-size: 200px auto !important;
    padding: 2rem;
    position: relative;
}
.widget--theme-dark [data-id='posts-flag-unanswered'] {
    background-color: white;
    border-color: var(--lumx-color-light-L2);
}
.widget--theme-dark [data-id='posts-flag-answered'] {
    background-color: white;
    border-color: var(--lumx-color-light-L2);
}
.widget--post-question .block-post__content::after {
    content: '';
    display: inline-block;
    width: 250px;
    height: 250px;
    background-image: url('https://trendize.lumapps.com/serve/4930449491099648-2528169335768867/question-illustration.png?contentDisposition=inline');
    background-size: cover;
    margin-left: 8px;
}
.widget--post-idea .block-post__content::after {
    content: '';
    display: inline-block;
    width: 250px;
    height: 250px;
    background-image: url('https://trendize.lumapps.com/serve/4930449491099648-3638971229164723/idea-illustration.png?contentDisposition=inline');
    background-size: cover;
    margin-left: 8px;
}

.widget--section-learning {
    background-image: url('https://trendize.lumapps.com/serve/4930449491099648-7452564412042345/learning-illustration.png?contentDisposition=inline');
    background-repeat: no-repeat;
    background-position: right center !important;
    background-size: 200px auto !important;
    padding: 2rem;
    position: relative;
}
.widget--learning-dark .lumx-grid-column > :nth-child(n + 4) {
    display: none;
}
.widget--learning-dark .learning-catalog__search {
    display: none;
}
.widget--learning-dark .lumx-text:not(.lumx-flag__label) {
    color: white;
}

/* *************************************** */
/*     📃 Page - User Directory Page       */
/* *************************************** */

.lumx-header-label__title {
    color: var(--lumx-color-primary-N) !important;
    font-family: var(--lumx-typography-custom-title1-font-family);
    font-size: var(--lumx-typography-custom-title1-font-size);
    font-style: var(--lumx-typography-custom-title1-font-style);
    font-weight: var(--lumx-typography-custom-title1-font-weight);
    line-height: var(--lumx-typography-custom-title1-line-height);
    text-align: var(--lumx-widget-title-text-align);
    text-transform: var(--lumx-widget-title-text-transform);
    word-break: break-word;
}

#front-office-app {
    background-color: #f8f8f8;
}

.user-directory-page {
    width: 100%;
    padding-right: 200px;
    padding-left: 200px;
    padding-top: 30px;
}

.user-directory-content__wrapper {
    margin-top: 50px;
}

.user-directory-list__card {
    border-radius: var(--default-border-radius);
}

.user-directory-page__card {
    border-radius: var(--default-border-radius);
}

/* *************************************** */
/*  🧪Product improvements or bug fixes    */
/* *************************************** */

/* Style for the AI summary widget */

.widget-content--block-summary {
    background-color: var(--lumx-color-primary-L6) !important;
    border-radius: var(--default-border-radius) !important;
}
.widget-summary .lumx-text {
    position: relative;
    flex: 1;
    padding: var(--lumx-spacing-unit-huge) calc(var(--lumx-spacing-unit-big) * 2);
    background-color: transparent;
    font-family: var(--lumx-typography-custom-body-font-family) !important;
    font-size: var(--lumx-typography-custom-body-font-size) !important;
    font-style: var(--lumx-typography-custom-body-font-style) !important;
    font-weight: var(--lumx-typography-custom-body-font-weight) !important;
    line-height: var(--lumx-typography-custom-body-line-height) !important;
    overflow-wrap: break-word;
}

/* Border on Play video thumbnails */

.block-video-thumbnail__image {
    border-radius: var(--thumbnail-border-radius);
}

/* My apps fixes */

.my-apps {
    padding-bottom: 0;
}
.myapps-header .lumx-select {
    padding: 0;
}
.my-apps .micro-app {
    background: var(--lumx-color-light-N);
    border-color: rgb(224, 224, 224); 
    border-style: solid;
    border-width: 1px;
    border-radius: 20px;
    box-shadow: none;
    padding: 0px;
}
.my-apps .micro-app__header {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: var(--lumx-color-primary-N);
    border-top-left-radius: var(--lumx-button-border-radius);
    border-top-right-radius: var(--lumx-button-border-radius);
}
.my-apps .micro-app__header-title {
    margin-top: 8px !important;
    color: var(--lumx-color-light-N);
}
.my-apps .micro-app__header .micro-app__header-button {
    color: var(--lumx-color-light-N);
}

/* Welcome widget style */

.widget-welcome {
    font-family: var(--lumx-typography-global-headlines-font-family);
}

/* Content metadata missing spacing with publication date on the metadata widget */

.metadata-link-list {
    margin-top: 5px !important;
}

/* Promoted results */

.lumx-flag--color-yellow {
    background-color: var(--lumx-color-primary-L6);
    border: 1px solid var(--lumx-color-primary-L3);
}

/* Style for Global search & Microsoft search results */

#all {
    padding-left: 35px;
    margin-right: 15px;
    background-image: url(https://storage.googleapis.com/greg-carlin-lumapps-extensions/img/lumapps-logo-grey.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30px 30px;
}
#microsoft {
    padding-left: 35px;
    margin-right: 15px;
    background-image: url(https://storage.googleapis.com/greg-carlin-lumapps-extensions/img/microsoft-logo-grey.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30px 30px;
}
[data-id='search-filter-e4526712-4ef3-4cc7-b45d-8b893d2522bd'] {
    padding-left: 35px !important;
    margin-right: 15px !important;
    background-image: url(https://storage.googleapis.com/greg-carlin-lumapps-extensions/img/googledrive-logo-grey.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30px 30px;
}
#snow-7edefc88-0532-40f4-a87f-3b9a8c32b8f8 {
    padding-left: 35px;
    margin-right: 15px;
    background-image: url(https://storage.googleapis.com/greg-carlin-lumapps-extensions/img/servicenow-logo-grey.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30px 30px;
}
[data-id='search-filter-fcff13de-c096-40c4-a87d-7fe08297b261'] {
    padding-left: 35px !important;
    margin-right: 15px !important;
    background-image: url(https://storage.googleapis.com/greg-carlin-lumapps-extensions/img/confluence.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30px 30px;
}
[data-id='search-filter-1463e5d9-8cc1-45c0-8a5a-1e09709337f0'] {
    padding-left: 35px !important;
    margin-right: 15px !important;
    background-image: url(https://storage.googleapis.com/greg-carlin-lumapps-extensions/img/learning.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30px 30px;
}
[data-id='search-result-thumbnail-folder'] svg,
[data-id='search-result-thumbnail-file'] svg {
    color: #f5d367;
}
[data-id='search-result-thumbnail-file-excel-box'] svg,
[data-id='search-result-thumbnail-google-spreadsheet'] svg {
    color: #207d41;
}

[data-id='search-result-thumbnail-file-powerpoint-box'] svg,
[data-id='search-result-thumbnail-file-presentation-box'] svg {
    color: #d14722;
}

[data-id='search-result-thumbnail-file-word-box'] svg,
[data-id='search-result-thumbnail-file-document-box'] svg {
    color: #1d78d4;
}
[data-id='search-result-thumbnail-web-box'] svg {
    color: #218285;
}
[data-id='search-result-thumbnail-file-pdf-box'] svg {
    color: #b30c00;
}
[data-id='search-result-thumbnail-file'] svg {
    color: #a9a8a8;
}

/* Move the Social Advocacy Add button upper in order not to be hidden by the chatbot button */

.sa-make-shareable__fab {
    bottom: 100px;
}

/* Style microapp titles */

.widget-micro-app .lumx-toolbar {
    padding-left: 0px;
    padding-bottom: 20px;
}

/* Standardize font styles on the DA */

.assistant-message .wrex-content-body {
    font-size: 14px;
    font-weight: var(--lumx-typography-interface-body1-font-weight);
    line-height: 20px;
}
.assistant-message .lumx-flex-box {
    font-size: 14px;
    font-weight: var(--lumx-typography-interface-body1-font-weight);
    line-height: 20px;
}

/* Warning message on the user preference page */

[data-id='user-settings-general-tab']:before {
    content: '⚠️ Please do not edit the main language of the demo users';
    font-size: 15px;
    font-weight: bold;
    color: #FF4433;
    background-color: #FFE5B4;
    padding: 2px 7px;
    border-radius: 5px;
    margin-top: 20px
}

/* Style button microapp */

.lumx-adaptive-card__element--action-set {
    display: block !important;
    padding-top: 10px;
    padding-bottom: 10px;
}

.micro-app .lumx-thumbnail__image {
    border-radius: var(--card-border-radius) !important;
}

/* Fix featured image button in full height in writer mode */

.content--basic-designer-mode .widget-featured-image,
.content--basic-designer-mode .widget-featured-image button {
    height: 100% !important;
}
.widget-title__editable-textarea .lumx-text-field__input-native {
    text-align: center;
    margin-top: 15px;
}

/* Fix border when microapp opened in web with a modal */

.lumx-dialog .micro-app {
    border-color: transparent !important;
}

/* Custom style for the SNCF microapp */

[data-id='micro-app-213259417888433193631854722086131858779'] .adaptive-card {
    background-image: url(https://www.thecolorapi.com/id?format=svg&named=false&hex=FCC6A2);
}

/* Onboarding */

.component-row--onboarding-video-row {
    z-index: 1;
}

.component-row--onboarding-video-row .video-player,
.component-row--onboarding-video-row .video-player .lumx-thumbnail .lumx-thumbnail__image {
    border-radius: 0 !important;
}

/* Fix icon aligment */

.lumx-icon--has-shape {
    display: flex !important;
}

/* Fix organizers and comments style in event page */

.widget-event-organizers .widget-header__title {
    font-weight: bold;
    font-size:16px !important
}
.widget-comments .widget-header__title {
    font-weight: bold;
    font-size:16px !important
}

/* Add ServiceNow icon when AskAI shows ServiceNow results */

.ask-ai-sources-list__source-chip a[href*="service-now"] .lumx-icon {
    display: none;
}
.ask-ai-sources-list__source-chip a[href*="service-now"]::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-top: 8px;
    background-image: url("https://cdn-public.softwarereviews.com/production/favicons/offerings/8865/original/NOW.png");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}
.ask-ai-sources-list__source-chip a[href*="service-now"] span {
    margin-left: 15px;
}

/* Add Confluence icon when AskAI shows Confluence results */

.ask-ai-sources-list__source-chip a[href*="atlassian"] .lumx-icon {
    display: none;
}
.ask-ai-sources-list__source-chip a[href*="atlassian"]::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-top: 8px;
    background-image: url("https://cdn-icons-png.flaticon.com/512/5968/5968793.png");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}
.ask-ai-sources-list__source-chip a[href*="atlassian"] span {
    margin-left: 15px;
}

/* Fix post categories display with dark background */

.lumx-color-font-light-N .post-publication-description__tags{
    color: var(--lumx-color-light-N);
    font-weight: bolder
}

/* Fix hardcoded white background behing the "Mark as done" button in journeys */

.acknowledge-message {
    background-color: transparent !important;
}

/* Fix comment author displayed in dark when applying the dark mode */

.comments--theme-dark .user-card-popover__wrapper .lumx-link__content {
    color: white
}

/* Fix Learning iframe height so the footer is not minimizing it */

.training-page.page.page--wide {
	min-height: 85vh;
}

/* Add color to the lock icon in the style panel when activated */

.mdi-lock {color: var(--lumx-color-secondary-N)}

/* Remove negative padding on the new Ask AI Conversation section and unify radius */

.ai-generated-result-loading-state, .search-generated-results {
    margin: 0px 0 24px !important;
}

/* Remove hardcoded white background on a Play Playlist */

.playlist-page.page--has-background {
    background-color: transparent;
}

/* UIX improvements on AsKAI on text formating */

.ask-ai-answer__wrapper .wrex-content-body,
.ask-ai-answer__wrapper .wrex-content-link {
    font-size : 16px
}
.ask-ai-answer__wrapper .wrex-text-align-start{
    margin-bottom: 10px;
}
.ask-ai-answer__wrapper .wrex-content-title {
    font-size: 16px;
}

/* Remove Language popover on edit mode */

.content-language-popover{
    display:none !important;
}

/* Add a separator after the Task entry in the user profile */

.user-profile-bk-tasks::after {
    content: "";
    display: block;
    height: 1px;
    background-color: var(--lumx-color-dark-L5);
    margin: 8px 0;
}

/* Format Ask AI agent in the Ask AI answer */

.ask-ai-answer-footer > :nth-child(2){
    background: var(--lumx-color-light-L2);
    padding-left: 10px;
    font-size: smaller;
    border-radius: var(--lumx-tabs-link-border-radius);
    padding-right: 10px;
    border: 1px solid var(--lumx-color-dark-L4);
}
.ask-ai-source-chip{
    background: var(--lumx-color-light-L2) !important;
}

/* Manager Inbox */
[data-id="micro-app-306374750687805721444262560510141941827"] {

    
    .lumx-adaptive-card__element--action-set.lumx-adaptive-card__element--spacing-small {
        
        flex-direction: row !important; 
        gap: 12px !important; 
        justify-content: flex-start !important;
        margin: 0 !important; 
    }
    
    .lumx-adaptive-card__element--action-set.lumx-adaptive-card__element--spacing-small[style*="display: flex;"] {
        
        display: flex !important;
    }
    [data-testid="columnSet-aa6ea880"] > div:last-child > div > .ac-button > button{
    	background-color: red !important;
    }

    .adaptive-card > div:nth-child(3) > div:nth-child(1) > div:nth-child(4) > div > div > button {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        min-height: auto !important;
        height: auto !important;
        padding: 4px 0 !important; 
        
        text-transform: none !important; 
        font-weight: 600 !important;     
        font-size: 13px !important;      
        color: #6B7280 !important;       
        
        transition: color 0.2s ease, transform 0.1s ease !important;
    }

    .adaptive-card > div:nth-child(3) > div:nth-child(1) > div:nth-child(4) > div > div > button:hover {
        background-color: transparent !important;
        color: #1F2937 !important; 
        text-decoration: underline !important; 
        text-underline-offset: 4px !important; 
    }

    .lumx-adaptive-card__element--action-set.lumx-adaptive-card__element--spacing-small button.lumx-button span {
        display: flex !important; 
        align-items: center !important;
        gap: 4px !important; 
    }
    .lumx-adaptive-card__element--column-set .lumx-adaptive-card__element--action-set {
        margin: 0 !important;
        padding: 0 !important;
        gap: 20px !important; 
    }
    .lumx-adaptive-card__element--column-set .lumx-adaptive-card__element--action-set[style*="display: none"] {
        display: none !important;
    }
    
    .lumx-adaptive-card__element--column-set .lumx-adaptive-card__element--column {
        justify-content: center !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .lumx-adaptive-card__element--column-set.lumx-flex-box--orientation-horizontal.lumx-flex-box--gap-big {
        gap: 8px !important; 
    }

    .lumx-adaptive-card__element--column-set button.lumx-button {
        border-radius: 999px !important;
        min-height: 32px !important;
        height: 32px !important;
        padding: 0 16px !important;
        box-shadow: none !important;
        text-transform: none !important;
        font-weight: 500 !important;
        font-size: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important; 
    }
    
    .lumx-adaptive-card__element--column-set button.lumx-button > span {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
        line-height: 1 !important; 
    }


    .lumx-adaptive-card__element--column-set button.lumx-button.lumx-button--color-dark.lumx-button--emphasis-medium {
        background-color: transparent !important;
        border: 1px solid #D1D5DB !important;
        color: #374151 !important;
    }
    .lumx-adaptive-card__element--column-set button.lumx-button.lumx-button--color-dark.lumx-button--emphasis-medium:hover {
         background-color: #F3F4F6 !important;
    }

    .lumx-adaptive-card__element--column-set button.lumx-button.lumx-button--color-primary.lumx-button--emphasis-high {
        background-color: #1F2937 !important;
        border: 1px solid #1F2937 !important;
        color: #FFFFFF !important;
        padding-right: 12px !important; 
    }

    .lumx-adaptive-card__element--column-set button.lumx-button.lumx-button--color-primary.lumx-button--emphasis-high > span::after {
        content: "\00d7" !important; 
        font-size: 18px !important;   
        font-weight: 400 !important;  
        margin-left: 6px !important;  
        line-height: 0.8 !important;  
        opacity: 0.8 !important;      
    }
  
    .adaptive-card > div:last-child {
        max-height: 717px !important;    
        overflow: auto !important;     
        overflow-x: hidden !important;   
        padding: 12px !important;  
        border-radius: 10px !important;
        
     
        scrollbar-width: thin !important;
        scrollbar-color: #D1D5DB transparent !important;
    }

    .adaptive-card > div:last-child::-webkit-scrollbar {
        width: 6px !important; 
    }

    .adaptive-card > div:last-child::-webkit-scrollbar-track {
        background: transparent !important; 
    }

    .adaptive-card > div:last-child::-webkit-scrollbar-thumb {
        background-color: #D1D5DB !important; 
        border-radius: 20px !important;       
    }

    .adaptive-card > div:last-child::-webkit-scrollbar-thumb:hover {
        background-color: #9CA3AF !important; 
    }

    .lumx-adaptive-card__element--container.lumx-flex-box--orientation-vertical {
      min-height: unset !important;
    }


    .adaptive-card > div:last-child > .lumx-adaptive-card__element--container {
        margin-top: 0px !important;
    }
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator {
        background-color: #FFFFFF !important; 
        border: 1px solid #E5E7EB !important; 
        border-radius: 12px !important;       
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
        
        padding: 12px !important; 
      
        border-top: none !important; 
        margin-top: 16px !important; 
    }
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) {
    	display: flex !important;
    }
    /* ==========================================================================
       ✅ 6. ACTIONS CIRCULAIRES (DROITE) - LA MASTERCLASS
       ========================================================================== */
    
    /* Conteneur des boutons à droite */
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) .ac-button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 12px !important;
    }

    /* STYLE COMMUN DES BOUTONS (CERCLES) */
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) button {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important; /* Cercle parfait */
        padding: 0 !important;
        min-width: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* On cache le texte original "✅ Approve" */
        font-size: 0 !important; 
        
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
        position: relative !important;
        overflow: visible !important; /* Pour afficher le label en dessous */
    }

    /* BOUTON APPROVE (VERT) */
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) button.lumx-button--color-dark {
        background-color: #10B981 !important; /* Vert émeraude */
        border: 2px solid #10B981 !important;
        color: transparent !important;
    }
    
    /* L'icône Check dans le bouton vert */
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) button.lumx-button--color-dark::before {
        content: '✓';
        font-size: 24px !important;
        margin-top: 8px;
        color: white !important;
        font-weight: bold !important;
    }

    /* Le Label "Approve" en dessous */
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) button.lumx-button--color-dark::after {
        content: 'Approve';
        font-size: 11px !important;
        color: #059669 !important; /* Vert foncé texte */
        position: absolute !important;
        bottom: -20px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
    }


    /* BOUTON REJECT (ROUGE) */
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) button.lumx-button--color-red {
        background-color: #EF4444 !important; /* Rouge vif */
        border: 2px solid #EF4444 !important;
        color: transparent !important;
    }

    /* L'icône Croix dans le bouton rouge */
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) button.lumx-button--color-red::before {
        content: '✕';
        font-size: 20px !important;
        margin-top: 8px;
        color: white !important;
        font-weight: bold !important;
    }

    /* Le Label "Reject" en dessous */
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) button.lumx-button--color-red::after {
        content: 'Reject';
        font-size: 11px !important;
        color: #DC2626 !important; /* Rouge foncé texte */
        position: absolute !important;
        bottom: -20px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
    }
   /* Popup Reject */
  	.adaptive-card > div:last-child > div > div:nth-child(2):not([style*="display: none"]) {
		position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important; /* Au-dessus de tout, même des autres popups */
    
    /* Le fameux effet verre dépoli sombre */
    background-color: rgba(26, 32, 44, 0.6) !important;
    backdrop-filter: blur(8px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(110%) !important;
    
    /* Centrage absolu */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    flex-direction: column;
    gap: 0px !important;
    align-items: center;
    justify-content: center;
    
    /* Animation d'entrée */
    animation: backdropFadeIn 0.3s ease forwards !important;
}

/* 2. LA CARTE (La boîte blanche) */
.adaptive-card > div:last-child > div > div:nth-child(2):not([style*="display: none"]) > div{
    margin: 0 !important;
    background: white !important;
    width: 100% !important;
    max-width: 420px !important; /* Plus compact pour une alerte */
    padding: 15px 15px !important;
    
    
    /* Reset du layout pour bien empiler les textes */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Animation Pop-in élastique */
    animation: modalPopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
    .adaptive-card > div:last-child > div > div:nth-child(2):not([style*="display: none"]) > div:nth-child(1){
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
  .adaptive-card > div:last-child > div > div:nth-child(2):not([style*="display: none"]) > div:last-child{
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
        width: 100% !important;
    height: unset !important;
    background: white !important;
    position: unset !important;
  }
   .adaptive-card > div:last-child > div > div:nth-child(2):not([style*="display: none"]) > div > div{
   	width: 100% !important;
   }
   
  .adaptive-card > div:last-child > div > div:nth-child(2):not([style*="display: none"]) > div > div:nth-child(2) > div:nth-child(1) {
    width: 90% !important;
		justify-self: center;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
  }
  .adaptive-card > div:last-child > div > div:nth-child(2):not([style*="display: none"]) > div > div:nth-child(2) > div:last-child {
  	width: 90% !important;
		justify-self: center;
		border-radius: 10px !important;
  }
   

    /* Animation au survol des boutons */
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) button:hover {
        transform: scale(1.1) !important;
    }
  
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > .lumx-adaptive-card__element--column-set:first-child {
        align-items: center !important; 
        
    }
    
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator .lumx-typography-overline {
        background-color: #F3F4F6 !important; 
        padding: 4px 12px !important;         
        border-radius: 99px !important;       
        font-weight: 600 !important;
        
    }
    
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator .lumx-typography-caption {
        font-size: 13px !important; 
    }

    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator .lumx-typography-subtitle1 {
        font-size: 18px !important; 
        font-weight: 700 !important; 
        color: #111827 !important;  
        margin-bottom: 8px !important;
    }

    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > .lumx-adaptive-card__element--text-block:nth-child(3) .lumx-typography-caption {
        font-size: 14px !important;
        color: #6B7280 !important; 
        margin-bottom: 24px !important; 
    }

    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > .lumx-adaptive-card__element--column-set:last-child {
        align-items: center !important; 
        border-top: 1px solid #F3F4F6 !important;
        padding-top: 16px !important;
        margin-top: 0 !important; 
    }
		.lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > .lumx-adaptive-card__element--column-set:last-child > div:nth-child(2) button {
        border: none !important;
    		background-color: #c8ecc8 !important;
    		border-radius: 50px !important;
    		height: unset !important;
		}
		.lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > .lumx-adaptive-card__element--column-set:last-child > div:nth-child(3) button {
        border: none !important;
    		background-color: #ecc8c8 !important;
    		border-radius: 50px !important;
    		height: unset !important;
		}
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator > .lumx-adaptive-card__element--column-set:last-child .lumx-typography-caption {
        font-size: 14px !important;
        color: #374151 !important;
    }

    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator .ac-button button.lumx-button--emphasis-medium {
        border: 1px solid #E5E7EB !important;
        background-color: #FFFFFF !important;
        color: #374151 !important;
        font-weight: 500 !important;
        border-radius: 8px !important;
        height: 36px !important;
        padding: 0 16px !important;
    }
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator .ac-button button.lumx-button--emphasis-medium:hover {
        background-color: #F9FAFB !important;
        border-color: #D1D5DB !important;
    }
  
    .lumx-adaptive-card__element--container.lumx-color-background-grey-L5 {
        background-color: #F9FAFB !important; 
        border-top: 1px solid #E5E7EB !important; 
        
        margin: 0 -12px !important;
        
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    .lumx-color-background-grey-L5 .lumx-typography-subtitle2 {
        text-transform: uppercase !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.05em !important; 
        color: #6B7280 !important; 
        margin-bottom: 4px !important;
    }
    .lumx-color-background-grey-L5 .lumx-typography-title {
        font-size: 20px !important;
        font-weight: 800 !important; 
        color: #111827 !important;  
        margin-bottom: 16px !important;
    }

    .lumx-color-background-grey-L5 .lumx-adaptive-card__element--fact-set table tr td {
        padding-bottom: 8px !important;
        vertical-align: top !important;
    }

    .lumx-color-background-grey-L5 .lumx-adaptive-card__element--fact-set .lumx-typography-subtitle1 {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #6B7280 !important;
        min-width: 100px !important; 
    }

    .lumx-color-background-grey-L5 .lumx-adaptive-card__element--fact-set .lumx-typography-body1 {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1F2937 !important;
    }

    .lumx-color-background-grey-L5 .lumx-adaptive-card__element--text-block .lumx-typography-body1 {
        background-color: #FFFFFF !important; 
        border: 1px solid #E5E7EB !important;
        padding: 12px !important;
        border-radius: 8px !important;
        color: #4B5563 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        display: block !important; 
    }


    .lumx-color-background-grey-L5 .lumx-adaptive-card__element--action-set.lumx-adaptive-card__element--spacing-large {
        flex-direction: row !important; 
        gap: 12px !important;
        margin-top: 24px !important;
    }

    .lumx-color-background-grey-L5 .ac-button {
        flex: 1 !important;
        width: 100% !important;
    }

    .lumx-color-background-grey-L5 button.lumx-button--color-primary {
        background-color: #4F46E5 !important; 
        border: 1px solid #4F46E5 !important;
        border-radius: 8px !important;
        height: 44px !important; 
        font-size: 15px !important;
        font-weight: 600 !important;
        box-shadow: 0 1px 2px 0 rgba(79, 70, 229, 0.2) !important;
    }
    .lumx-color-background-grey-L5 button.lumx-button--color-primary:hover {
        background-color: #4338CA !important; 
    }
  
    .lumx-color-background-grey-L5 button.lumx-button--color-red {
        background-color: #FFFFFF !important; 
        border: 1px solid #EF4444 !important; 
        color: #EF4444 !important; 
        border-radius: 8px !important;
        height: 44px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
    }
    .lumx-color-background-grey-L5 button.lumx-button--color-red:hover {
        background-color: #FEF2F2 !important;
    }
}

/* ==========================================================================
   📅 SCHEDULE WIDGET - DESIGN SYSTEM "INDIGO"
   ========================================================================== */

/* Scoped to this specific micro-app */
[data-id="micro-app-244480282430895400313939010808320275263"] {

    /* --- 0. FONDATIONS --- */
    .adaptive-card {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        background: #FFFFFF !important;
        padding: 24px !important;
      border-radius: 20px;
    }

    /* --- 1. HEADER (Month + Ligne) --- */
    /* Le texte "Month" */
    .lumx-typography-overline {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #9CA3AF !important; /* Gris moyen */
        text-transform: capitalize !important; /* Pas tout en majuscules */
        letter-spacing: 0.5px !important;
    }

    /* La ligne de séparation */
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--has-separator {
        border-top: 1px solid #E5E7EB !important; /* Gris très clair */
        margin-top: 8px !important;
        width: 100% !important;
    }


    /* --- 2. LA DATE (Colonne de Gauche) --- */
    
    /* Le jour (mon., tue.) */
    .lumx-typography-caption.lumx-color-font-dark-L2 {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #6B7280 !important;
        margin-bottom: -4px !important; /* Rapproche le texte du chiffre */
    }

    /* Le chiffre (12, 13) */
    .lumx-typography-headline {
        font-size: 24px !important;
        font-weight: 800 !important;
        color: #1F2937 !important; /* Noir/Gris foncé */
        letter-spacing: -1px !important;
    }


    /* --- 3. LES CARTES ÉVÉNEMENTS (Blocs Violets) --- */
    
    /* On cible les containers qui ont un fond bleu pâle (défini dans le JSON par 'accent' ou 'emphasis') */
    .lumx-color-background-blue-L5 {
        background-color: #4F46E5 !important; /* L'Indigo vibrant de l'image */
        border-radius: 16px !important;       /* Arrondis modernes */
        padding: 16px 20px !important;        /* Espace interne aéré */
        box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.1), 0 2px 4px -1px rgba(79, 70, 229, 0.06) !important;
        
        /* Transition douce pour effet hover */
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }

    /* Effet hover sympa (optionnel) */
    .lumx-color-background-blue-L5:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.2) !important;
    }

    /* Titre de l'événement (Shift Block A...) */
    .lumx-color-background-blue-L5 .lumx-typography-subtitle2 {
        color: #FFFFFF !important; /* Blanc pur */
        font-size: 15px !important;
        font-weight: 700 !important;
        margin-bottom: 4px !important;
    }

    /* Heure de l'événement (12:00 - 18:00) */
    .lumx-color-background-blue-L5 .lumx-typography-body1 {
        color: rgba(255, 255, 255, 0.8) !important; /* Blanc légèrement transparent */
        font-size: 13px !important;
        font-weight: 500 !important;
    }


    /* --- 4. LE BOUTON "MORE" (Pied de page) --- */
    
    /* Le conteneur du bouton (Cliquable) */
    .lumx-adaptive-card__element--container[style*="cursor: pointer"]:last-child {
        background-color: #E5E7EB !important; /* Gris clair */
        border-radius: 8px !important;         /* Arrondi léger */
        padding: 8px !important;               /* Hauteur compacte */
        margin-top: 16px !important;           /* Espace avec le reste */
        
        /* Centrage du texte */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        transition: background-color 0.2s ease !important;
    }

    /* Hover sur le bouton More */
    .lumx-adaptive-card__element--container[style*="cursor: pointer"]:last-child:hover {
        background-color: #D1D5DB !important; /* Gris un peu plus foncé */
    }

    /* Le texte "More ⌄" */
    .lumx-adaptive-card__element--container[style*="cursor: pointer"]:last-child .lumx-typography-subtitle1 {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #374151 !important; /* Gris foncé */
        text-transform: none !important;
    }

    /* --- 5. FINITIONS & ESPACEMENTS --- */
    
    /* Espacement entre les lignes du calendrier */
    .lumx-adaptive-card__element--column-set {
        margin-bottom: 24px !important; /* Espace vertical entre les jours */
    }
    
    /* Ajustement de la largeur de la colonne date pour coller au design */
    /* On force un peu plus de marge à droite du chiffre */
    .lumx-adaptive-card__element--column:has(.lumx-typography-headline) {
        padding-right: 16px !important;
    }

}
/* ==========================================================================
   👥 TEAM AVAILABILITY - DESIGN SYSTEM "CLEAN"
   ========================================================================== */

/* Scoped to this specific micro-app */
[data-id="micro-app-296137982868733841764956774319391995303"] {

    /* --- 0. FONDATIONS --- */
    .adaptive-card {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        background: #FFFFFF !important;
        padding: 24px !important;
      border-radius: 20px;
        /* Ombre douce globale pour la carte (optionnel, selon le contexte) */
        /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); */
    }

    /* --- 1. HEADER (Logo + Titre + Refresh) --- */
    
    /* Logo SAP */
    /* On force une taille raisonnable */
    .lumx-thumbnail__image--has-defined-size {
        width: 48px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Titre "SAP - Success factor" */
    .lumx-typography-subtitle2.lumx-color-font-dark-N {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #111827 !important; /* Noir profond */
        margin-left: 0px !important; /* Espace avec le logo */
    }

    /* LE SÉPARATEUR VERTICAL */
    /* On cible le container du bouton Refresh pour ajouter une bordure à gauche */
    .lumx-adaptive-card__element--column:has(button[title="Refresh"]) {
        border-left: 1px solid #E5E7EB !important; /* Ligne grise fine */
        padding-left: 16px !important;
        margin-left: 8px !important;
    }

    /* Bouton Refresh (Rond & Transparent) */
    button[title="Refresh"] {
        background-color: transparent !important;
        color: #6B7280 !important; /* Gris moyen */
        //border: 1px solid #E5E7EB !important; /* Bordure très légère */
        border-radius: 50% !important; /* Rond parfait */
        width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        transition: all 0.2s ease !important;
    }

    /* Hover sur Refresh */
    button[title="Refresh"]:hover {
        background-color: #F3F4F6 !important;
        color: #111827 !important;
        transform: rotate(90deg); /* Petite animation sympa */
    }
    
    /* Correction de l'icône dans le bouton */
    button[title="Refresh"] span {
        font-size: 18px !important;
        line-height: 1 !important;
        margin-top: -2px !important; /* Ajustement optique */
    }


    /* --- 2. CONTENU PRINCIPAL --- */
    
    /* "4 absences today" */
    .lumx-typography-body2.lumx-color-font-dark-L2 {
        font-size: 16px !important;
        font-weight: 400 !important;
        color: #374151 !important;
        margin-top: 16px !important;
        margin-bottom: 24px !important;
    }

    /* "ON YOUR TEAM" (Sous-titre) */
    .lumx-typography-overline.lumx-color-font-dark-L2 {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #9CA3AF !important; /* Gris clair */
        text-transform: uppercase !important;
        letter-spacing: 1px !important; /* Espacement des lettres */
        margin-bottom: 16px !important;
    }

    [data-testid="columnSet-9a5e794f-bb32-4540-8dbc-261ecb08a0aa"]{
    	gap: 0 !important;
    }
    /* --- 3. LISTE DES MEMBRES --- */
    [data-testid="image-df3ef21e-d413-41a3-ac95-831598fd94a6"] > div > span > img {
    	border-radius: 0% !important; 
    	overflow: visible;
      width: 40px !important;
      height: 20px !important;
      object-fit: cover !important;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; /* Légère ombre */
      border: 2px solid #FFFFFF !important; /* Bordure blanche pour détacher */
      margin-top: 10px;
    }
    /* Espacement entre les lignes */
    /*.lumx-adaptive-card__element--column-set.lumx-adaptive-card__element--spacing-medium {
        margin-bottom: 20px !important;
    }*/

    /* AVATARS (Images rondes) */
    .lumx-adaptive-card__element--image img {
        border-radius: 50% !important; /* Force le rond */
        width: 40px !important;
        height: 40px !important;
        object-fit: cover !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; /* Légère ombre */
        border: 2px solid #FFFFFF !important; /* Bordure blanche pour détacher */
    }
    
    /* Ajustement du conteneur thumbnail */
    .lumx-thumbnail--aspect-ratio-original {
        width: 40px !important;
        height: 40px !important;
        overflow: visible !important; /* Pour voir l'ombre */
    }

    /* NOM (John McCoy...) */
    .lumx-typography-subtitle1.lumx-color-font-dark-N {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1F2937 !important;
        margin-bottom: 2px !important;
    }

    /* DATE (Until June...) */
    .lumx-typography-caption.lumx-color-font-dark-L2 {
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #6B7280 !important;
    }

    /* Alignement vertical du texte par rapport à l'avatar */
    /* On s'assure que la colonne de texte est bien centrée verticalement */
    .lumx-adaptive-card__element--column-set .lumx-adaptive-card__element--column:nth-child(2) {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding-left: 12px !important; /* Espace Avatar <-> Texte */
    }

}

/* ==========================================================================
   🎓 TEAM TRAININGS - DESIGN SYSTEM "LEARNING CARD"
   ========================================================================== */

/* Scoped to this specific micro-app */
[data-id="micro-app-263030722666327424419535907324368047069"] {

    /* --- 0. FONDATIONS --- */
    .adaptive-card {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        background: #FFFFFF !important;
        padding: 24px !important;
      border-radius: 20px;
    }

    /* --- 1. HEADER (Icône + Titre) --- */
    
    /* Titre "New training available" */
    .lumx-typography-subtitle2.lumx-color-font-dark-N {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #111827 !important; /* Noir profond */
        margin-left: -8px !important; /* Rapproche du logo */
    }

    /* Icône (Emoji) */
    .lumx-typography-body2.lumx-color-font-dark-N {
        font-size: 20px !important;
    }


    /* --- 2. LES CARTES DE TRAINING (Lignes) --- */
    
    /* Conteneur principal de la ligne (Celui qui a le curseur pointer) */
    .lumx-adaptive-card__element--container[style*="cursor: pointer"] {
        background-color: #F9FAFB !important; /* Gris très clair */
        border-radius: 12px !important;       /* Arrondis */
        border: 1px solid #F3F4F6 !important; /* Bordure subtile */
        padding: 12px 16px !important;        /* Padding interne */
        margin-bottom: 12px !important;       /* Espace entre les cartes */
        
        transition: all 0.2s ease !important;
    }

    /* Hover sur la carte */
    .lumx-adaptive-card__element--container[style*="cursor: pointer"]:hover {
        background-color: #F3F4F6 !important; /* Un peu plus foncé au survol */
        border-color: #E5E7EB !important;
        transform: translateY(-1px);
    }

    /* --- 3. CONTENU DE LA CARTE --- */

    /* IMAGES (Thumbnails) */
    .lumx-thumbnail__image--has-defined-size {
        border-radius: 8px !important; /* Coins arrondis pour l'image */
        width: 40px !important;
        height: 40px !important;
        object-fit: cover !important;
        background-color: white !important; /* Fond blanc si icône transparente */
        padding: 4px !important; /* Petit padding interne */
        border: 1px solid #E5E7EB !important;
    }
    
    /* TITRE DU TRAINING */
    /* On cible le texte en gras dans la carte */
    .lumx-adaptive-card__element--container[style*="cursor: pointer"] .lumx-typography-subtitle2 {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #374151 !important; /* Gris foncé */
        line-height: 1.4 !important;
    }

    /* LE CHEVRON (Flèche) */
    .lumx-typography-title.lumx-color-font-dark-L2 {
        font-size: 18px !important;
        color: #9CA3AF !important; /* Gris clair */
        font-weight: 400 !important;
    }


    /* --- 4. PANNEAU DE DÉTAILS (Accordéon) --- */
    
    /* Le conteneur qui s'ouvre (celui qui est caché par défaut) */
    /* Astuce : on cible le frère direct du conteneur pointer */
    .lumx-adaptive-card__element--container[style*="cursor: pointer"] + .lumx-adaptive-card__element--container {
        background-color: #FFFFFF !important;
        border-left: 2px solid #E5E7EB !important; /* Ligne verticale pour lier */
        margin-left: 32px !important; /* Décalage */
        padding: 12px 16px !important;
        margin-top: -8px !important; /* Remonte pour coller à la carte */
        margin-bottom: 16px !important;
        border-bottom-left-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    /* Texte de description */
    .lumx-typography-body1.lumx-color-font-dark-L2 {
        font-size: 13px !important;
        color: #6B7280 !important;
        line-height: 1.5 !important;
    }

    /* Bouton "Start Course" */
    .ac-button .lumx-button {
        border-radius: 6px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        background-color: #1F2937 !important; /* Noir/Gris très foncé */
        color: white !important;
        padding: 6px 16px !important;
        height: 32px !important;
        margin-top: 8px !important;
    }
    
    .ac-button .lumx-button:hover {
        background-color: #000000 !important;
    }

}

/* ==========================================================================
   🔔 UPCOMING REMINDERS - DESIGN SYSTEM "CAROUSEL"
   ========================================================================== */

/* Scoped to this specific micro-app */
[data-id="micro-app-194069530646671459591434583763464796272"] {

    /* --- 0. FONDATIONS --- */
    .adaptive-card {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        background: #FFFFFF !important;
        padding: 24px !important;
        overflow: hidden !important; /* Pour éviter les scrollbars parasites */
        border-radius: 20px;
    }

    /* --- 1. HEADER (Cloche + Titre + See All) --- */

    /* Icône Cloche */
    .lumx-typography-body2.lumx-color-font-dark-N {
        font-size: 20px !important;
    }

    /* Titre "Upcoming reminders" */
    .lumx-typography-subtitle2.lumx-color-font-dark-N {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        margin-left: -8px !important;
    }

    /* Lien "See all" */
    .lumx-typography-overline.lumx-color-font-blue-L2 {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #3B82F6 !important; /* Bleu vif */
        text-transform: none !important; /* Pas de majuscules forcées */
        cursor: pointer;
    }


    /* --- 2. LE CAROUSEL (Conteneur Scrollable) --- */
    
    /* On cible le ColumnSet qui contient les cartes */
    /* Astuce : C'est le deuxième ColumnSet de la page */
    .lumx-adaptive-card__element--container > .lumx-adaptive-card__element--column-set:last-child {
        display: flex !important;
        flex-wrap: nowrap !important; /* Empêche le retour à la ligne */
        overflow-x: auto !important;  /* Active le scroll horizontal */
        overflow-y: hidden !important;
        gap: 16px !important;         /* Espace entre les cartes */
        margin-right: -24px !important; /* Permet aux cartes d'aller jusqu'au bord droit */
        padding-right: 24px !important; /* Padding de fin */
        
        /* Masquer la scrollbar (Chrome/Safari/Opera) */
        -webkit-overflow-scrolling: touch; /* Scroll fluide sur mobile */
    }
    
    /* Masquer scrollbar (Firefox/IE) */
    .lumx-adaptive-card__element--container > .lumx-adaptive-card__element--column-set:last-child {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .lumx-adaptive-card__element--container > .lumx-adaptive-card__element--column-set:last-child::-webkit-scrollbar {
        display: none;
    }


    /* --- 3. LES CARTES (Items du carrousel) --- */
    
    /* Les colonnes individuelles (W: 150px) */
    .lumx-adaptive-card__element--column-set > .lumx-adaptive-card__element--column {
        flex: 0 0 150px !important; /* Taille fixe, ne rétrécit pas */
        width: 150px !important;
    }

    /* Le contenu de la carte (Gris) */
    .lumx-color-background-grey-L5 {
        background-color: #F9FAFB !important; /* Gris très clair */
        border-radius: 16px !important;       /* Arrondis */
        padding: 16px !important;
        min-height: 140px !important;         /* Hauteur uniforme */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        border: 1px solid transparent !important;
        
        transition: all 0.2s ease !important;
    }

    /* Hover effect */
    .lumx-color-background-grey-L5:hover {
        background-color: #F3F4F6 !important;
        border-color: #E5E7EB !important;
        transform: translateY(-2px);
    }

    /* Titre dans la carte */
    .lumx-color-background-grey-L5 .lumx-typography-subtitle1 {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #1F2937 !important;
        line-height: 1.4 !important;
        margin-bottom: auto !important; /* Pousse l'avatar en bas */
    }


    /* --- 4. AVATARS (Photos rondes) --- */
    
    /* Image solo */
    .lumx-thumbnail--aspect-ratio-original {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
    }
    
    .lumx-thumbnail__image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }


    /* --- 5. GROUPE D'AVATARS (Stacking) --- */
    
    /* On cible le container qui contient les 3 images (via data-testid="columnSet-multi_avatar_group") */
    /* Note: le data-testid peut varier légèrement, on utilise une approche structurelle */
    
    /* Le container des 3 images */
    .lumx-adaptive-card__element--column-set.lumx-adaptive-card__element--spacing-small {
        gap: 0 !important; /* On supprime l'espace par défaut */
        justify-content: flex-start !important;
        margin-top: 12px !important;
    }

    /* Chaque colonne contenant une image dans le groupe */
    .lumx-adaptive-card__element--column-set.lumx-adaptive-card__element--spacing-small > .lumx-adaptive-card__element--column {
        width: auto !important;
        flex: 0 0 auto !important;
        border-radius: 50% !important;
        z-index: 1;
    }

    /* Le premier avatar ne doit pas avoir de marge négative */
    .lumx-adaptive-card__element--column-set.lumx-adaptive-card__element--spacing-small > .lumx-adaptive-card__element--column:first-child {
        margin-left: 0 !important;
        z-index: 3;
    }
    
    /* Z-index dégressif (ou progressif selon l'effet voulu) */
    .lumx-adaptive-card__element--column-set.lumx-adaptive-card__element--spacing-small > .lumx-adaptive-card__element--column:nth-child(2) { z-index: 2; }
    .lumx-adaptive-card__element--column-set.lumx-adaptive-card__element--spacing-small > .lumx-adaptive-card__element--column:nth-child(3) { z-index: 1; }

}

/* ==========================================================================
   📊 FEEDBACK DASHBOARD - DESIGN SYSTEM "FAKE UI"
   ========================================================================== */

/* Scoped to this specific micro-app */
[data-id="micro-app-59475425710857575220315439364275841272"] {

    /* --- 0. FONDATIONS --- */
    .adaptive-card {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        background: #FFFFFF !important;
        border-radius: 20px !important;
    }

    /* --- 1. HEADER IMAGE (Le Graph) --- */
    
    /* Le conteneur de l'image du haut */
    /* On ajuste les marges négatives pour le "Bleed" parfait si le padding de la card change */
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--spacing-none {
        margin: 0 !important;
    }

    /* L'image elle-même */
    .lumx-adaptive-card__element--container.lumx-adaptive-card__element--spacing-none img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
    }


    /* --- 2. ONGLETS (PILLS STYLE) --- */
    
    /* Conteneur des onglets */
    /* On cible le ColumnSet qui contient les boutons */
    .lumx-adaptive-card__element--column-set.lumx-adaptive-card__element--spacing-medium {
        margin-left: 10px;
        gap: 5px;
    }

    /* Reset de base pour tous les boutons */
    .ac-button button {
        height: 36px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-transform: none !important; /* Pas de majuscules */
        padding: 0 20px !important;
        box-shadow: none !important;
        transition: all 0.2s ease !important;
    }

    /* ÉTAT ACTIF (Noir) - Ciblé via la classe 'primary' définie dans le JSON (style: positive) */
    .ac-button button.lumx-button--color-primary {
        background-color: #1F2937 !important; /* Noir/Gris foncé */
        color: #FFFFFF !important;
        border: 1px solid #1F2937 !important;
        border-radius: 50px !important; /* Pilule */
    }

    /* ÉTAT INACTIF (Blanc + Bordure) - Ciblé via la classe 'dark' (style par défaut) */
    .ac-button button.lumx-button--color-dark {
        background-color: #FFFFFF !important;
        color: #6B7280 !important; /* Gris moyen */
        border: 1px solid #E5E7EB !important; /* Bordure grise fine */
        border-radius: 50px !important;
    }

    /* Hover sur inactif */
    .ac-button button.lumx-button--color-dark:hover {
        background-color: #F3F4F6 !important;
        border-color: #D1D5DB !important;
        color: #374151 !important;
    }
    .lumx-adaptive-card__element--action-set {
    	margin-top: 0 !important;
    }
  .lumx-adaptive-card__element--action-set[style*="display: none;"] {
    	display: none !important;
    }
         img {
		  /* Syntax courte : 3px sur tous les côtés */
		  clip-path: inset(5px);
		
		  /* Si vous voulez des valeurs différentes : haut droit bas gauche */
		  /* clip-path: inset(2px 3px 2px 3px); */
		}
		[data-testid="image-268642af-3386-485a-9e20-011f91898a7d"] > div > span > img {
		  clip-path: inset(5px 5px 55px 5px); 
		}
    /* --- 3. CONTENU (IMAGES FEEDBACK) --- */
    
    /* Les images dans les onglets (Insights / Questions) */
    .lumx-adaptive-card__element--container:not(.lumx-adaptive-card__element--spacing-none) img {
        border-radius: 12px !important; /* Coins arrondis pour faire "Card" */
        /* Optionnel : petite bordure pour délimiter si l'image est blanche sur blanc */
        
        width: 100% !important;
        height: auto !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; /* Légère ombre pour le relief */
    }

    /* Ajustement des conteneurs pour éviter les marges parasites */
    .lumx-adaptive-card__element--container[style*="display: none"] {
        display: none !important; /* Sécurité */
    }

}

/* ==========================================================================
   ☑️ MY TASKS - DESIGN SYSTEM "STACKED CARDS"
   ========================================================================== */

/* Scoped to this specific micro-app */
[data-id="micro-app-286766616389511564074489725266667638703"] {

    /* --- 0. FONDATIONS --- */
    .adaptive-card {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        background: transparent !important;
        padding: 24px !important;
        overflow: visible !important; /* Important pour voir les ombres */
    }

    /* --- 1. HEADER (Clipboard + Titre) --- */
    
    .lumx-typography-body2.lumx-color-font-dark-N { font-size: 20px !important; }
    
    .lumx-typography-subtitle2.lumx-color-font-dark-N {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #111827 !important;
        margin-left: -8px !important;
    }

    /* Sous-titre "My team" */
    .lumx-typography-subtitle1.lumx-color-font-dark-N[style*="font-weight: 400"] { /* Ciblage approximatif */ } 
    /* Mieux : on utilise le fait qu'il est seul dans son container */
    .lumx-adaptive-card__element--text-block:has(span:contains("My team")) {
        margin-top: 16px !important;
        margin-bottom: 8px !important;
    }


    /* --- 2. LES CARTES DE TÂCHES (CONTAINERS) --- */
    
    /* Style de base pour TOUTES les cartes de tâches (gris L5) */
    .lumx-color-background-grey-L5 {
        background-color: #FFFFFF !important; /* Fond Blanc pour détacher du fond gris de l'app si besoin */
        border: 1px solid #E5E7EB !important;
        border-radius: 16px !important;
        padding: 16px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
        position: relative !important;
        z-index: 10; /* Par défaut devant */
        transition: transform 0.2s ease !important;
    }

    /* --- 3. L'EFFET STACK (MAGIE !) --- */
    
    /* On cible la DEUXIÈME carte (celle du dessous) */
    /* Astuce : c'est le deuxième élément avec la classe background-grey-L5 */
    .lumx-adaptive-card__element--container.lumx-color-background-grey-L5:nth-of-type(2) {
        margin-top: -65px !important; /* Remonte fortement pour se cacher derrière la 1ère */
        z-index: 5 !important;        /* Passe derrière */
        transform: scale(0.95) translateY(10px) !important; /* Plus petit et décalé */
        opacity: 0.9 !important;      /* Légèrement transparent pour l'effet profondeur */
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important; /* Ombre plus diffuse */
        background-color: #F9FAFB !important; /* Légèrement plus gris pour différencier */
    }

    /* Optionnel : Si tu veux voir la 2ème carte au survol de la 1ère (Effet interactif) */
    /* .lumx-color-background-grey-L5:first-of-type:hover + .lumx-color-background-grey-L5 {
        margin-top: 12px !important;
        transform: scale(1) !important;
    } */


    /* --- 4. CONTENU DES CARTES --- */

    /* CHECKBOXES (Custom Style) */
    .lumx-checkbox__input-placeholder {
        border-radius: 4px !important;
        border: 2px solid #D1D5DB !important; /* Bordure grise plus visible */
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Checkbox cochée (si jamais) */
    .lumx-checkbox--is-checked .lumx-checkbox__input-placeholder {
        background-color: #1F2937 !important;
        border-color: #1F2937 !important;
    }

    /* TITRE TÂCHE */
    .lumx-color-background-grey-L5 .lumx-typography-subtitle1 {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #1F2937 !important;
        line-height: 1.4 !important;
    }

    /* DATE & OVERDUE */
    
    /* Le texte "Overdue" en rouge */
    .lumx-color-font-red-N {
        color: #EF4444 !important;
        font-weight: 600 !important;
    }


    /* --- 5. AVATARS EMPILÉS (Stack) --- */
    
    /* Conteneur des avatars */
    .lumx-adaptive-card__element--column-set[data-testid^="columnSet-avatars"] {
        gap: 0 !important;
        justify-content: flex-end !important; /* Alignés à droite */
    }

    /* Les images avatars */
    .lumx-adaptive-card__element--column-set[data-testid^="columnSet-avatars"] .lumx-thumbnail__image {
        width: 24px !important;
        height: 24px !important;
        border-radius: 50% !important;
        border: 2px solid #FFFFFF !important; /* Bordure blanche pour la découpe */
        box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    }

    /* Chevauchement (Marges négatives) */
    .lumx-adaptive-card__element--column-set[data-testid^="columnSet-avatars"] .lumx-adaptive-card__element--column:not(:first-child) {
        margin-left: -8px !important;
    }

    /* Ordre d'empilement (Z-index) */
    .lumx-adaptive-card__element--column-set[data-testid^="columnSet-avatars"] .lumx-adaptive-card__element--column {
        position: relative !important;
        z-index: 1;
    }
    .lumx-adaptive-card__element--column-set[data-testid^="columnSet-avatars"] .lumx-adaptive-card__element--column:hover {
        z-index: 10 !important; /* Passe devant au survol */
        transform: translateY(-2px); /* Petit pop */
        transition: transform 0.2s ease;
    }

}