/*===================================================================================
Valiuz
Version 20260619 
Réalisé par Inaubi - Sylvie Devigne
===================================================================================*/

/* 1. IMPORTATION ET DÉFINITIONS GLOBALES */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');

:root {
    /* ========================================================= */
    /* VARIABLE MAÎTRESSE POUR L'ARRONDI GLOBALE DU PORTAIL      */
    /* Modifiez cette valeur pour changer tous les arrondis d'un coup */
    --main-border-radius: 15px;
    /* ========================================================= */

    /* --- TYPOGRAPHIE GLOBALE --- */
    --lumx-typography-font-family: 'Outfit', sans-serif;
    --lumx-typography-font-weight-regular: 400;
    --lumx-typography-font-weight-semibold: 700;
    --lumx-typography-font-weight-bold: 900;
    
    /* --- COULEURS ET TITRES --- */
    /* Note : Vérifiez que ces variables ne cassent pas l'accessibilité (contraste) */
    --lumx-typography-custom-title1-font-weight: 900;
    --lumx-typography-custom-title2-font-color: #FF9D00;
    --lumx-typography-custom-title1-font-weight: 700;
    --lumx-typography-custom-title3-font-color: #FF9D00;
    --lumx-typography-custom-title3-font-weight: 700;
    --lumx-typography-custom-title4-font-weight: 700;

    /* --- RAYONS ET BORDURES GLOBALES --- */
    --lumx-border-radius: var(--main-border-radius);
    --lumx-button-border-radius: var(--main-border-radius);
    --lumx-navigation-item-border-radius: var(--main-border-radius);
    --lumx-tag-border-radius: var(--main-border-radius);
    --lumx-text-field-input-border-radius: var(--main-border-radius);
    
    /* --- WIDGETS --- */
    --lumx-widget-title-theme-light-color: #212222;

    /* --- EN-TÊTE (HEADER) --- */
    /* --lumx-app-header-logo-height: 54px; */
    /* --lumx-app-header-border-bottom-color: #FF9D00; */

    /* --- METADATA (TAGS) --- */
    --lumx-metadata-height: 24px;
    --lumx-metadata-border-radius: 100px; /* Style "Pilule" */
    --lumx-metadata-border-color: #212222; /* Modifié : bordure sombre par défaut */
    --lumx-metadata-font-color: #fff; /* Modifié : texte blanc par défaut */
    --lumx-metadata-state-default-padding-horizontal: 12px;
    --lumx-metadata-list-separator: " "; 
}

/* 2. STYLES DES COMPOSANTS LUMAPPS */

/* Miniature  */
.lumx-thumbnail, .lumx-thumbnail__image {
    border-radius: var(--main-border-radius) !important;
    overflow: hidden; /* Important pour que l'image ne dépasse pas de l'arrondi */
}
/* Image dans les textes enrichis par exemple */
.lumx-thumbnail__background {
    border-radius: var(--main-border-radius);
    overflow: hidden; /* Indispensable pour que l'image suive l'arrondi du parent */
}

/* Étoile Favoris - Colorer l'icône étoile en orange */
button[data-id^="favorites-button"] {
    color: #FF9D00 !important;
}

/* Barre de recherche : Arrondis asymétriques utilisant la variable */
.searchbox .lumx-text-field__wrapper {
    border-radius: var(--main-border-radius) 0 0 var(--main-border-radius) !important; 
}
.searchbox__submit-btn {
    border-radius: 0 var(--main-border-radius) var(--main-border-radius) 0 !important;
}


/* 3. STYLES WIDGETS SPÉCIFIQUES */

/* Arrondir le bloc de création de post (Contribution field) */
.space-contribution-field {
    border-radius: var(--main-border-radius) !important;
    overflow: hidden !important; /* Essentiel pour que le fond blanc respecte l'arrondi sans déborder */
}
/* Arrondir le champ de saisie interne "Créer un post" */
.space-contribution-field .lumx-text-field__wrapper {
    border-radius: var(--main-border-radius) !important;
}

/* 4. ALERTE (WIDGET--ALERT) */

/* Alert (home) */

.component-row--alert-theme-light {
    background: var(--alert-row-theme-light-background);
}

.component-row--alert-theme-dark {
    background: var(--alert-row-theme-dark-background); 
}

.widget--alert {
    --lumx-typography-custom-title4-font-size: 20px;
    --lumx-typography-custom-title4-font-weight: 700;
    --lumx-typography-custom-title5-font-size: var(--alert-header-font-size);
    --lumx-typography-custom-title5-font-weight: var(--alert-header-font-weight);

    gap: var(--lumx-spacing-unit-regular); /* ! Unsafe */
    align-items: center !important; /* ! Unsafe */
    padding: var(--alert-widget-padding) !important; 
    border-radius: var(--alert-widget-border-radius) !important; 
}

.widget--alert.widget--theme-light {
    --widget-header-low-theme-light-color: var(--alert-widget-theme-light-header-color);
    --widget-header-low-theme-light-icon-color: var(--alert-widget-theme-light-header-color);

    background: var(--alert-widget-theme-light-background) !important;
}

.widget--alert.widget--theme-dark {
    --widget-header-low-theme-dark-color: var(--alert-widget-theme-dark-header-color);
    --widget-header-low-theme-dark-icon-color: var(--alert-widget-theme-dark-header-color);

    background: var(--alert-widget-theme-dark-background) !important; 
}

@media (min-width: 64em) {
    .widget--alert {
        flex-direction: row !important; /* ! Unsafe */
    }
}

.widget--alert .widget-header .widget-header__wrapper {
    margin-bottom: 0 !important; /* ! Unsafe */
}

@media (max-width: 63.99em) {
    .widget--alert .block-page-preview .block-page-preview__title {
        text-align: center; /* ! Unsafe */
    }
}

.widget--alert .block-slideshow .block-slideshow__controls {
    display: none;
}
.widget--alert.widget--theme-dark {
  backdrop-filter: blur(3px);
}

/* 5. ANNUAIRE */
.user-directory-list__card, .user-directory-page__card {
    border-radius: var(--main-border-radius) !important;
    box-shadow: var(--lumx-shadow-bottom-l); /* Optionnel : ajoute du relief */
}
/* Couleur du titre principal de l'annuaire*/
#user_directory-front-office-title {
    color: #212222;
    font-weight: 700;
}

/* 6. FIL D'ARIANE (BREADCRUMB) */

/* Au survol de la souris sur un lien du fil d'ariane */
.widget-breadcrumb__link:hover,
.widget-breadcrumb__link:hover .lumx-link__content {
    color: #FF9D00 !important; /* Passe le texte en Orange Valiuz */
    text-decoration: none !important; /* Retire le soulignement natif */
    background-color: transparent !important; /* Sécurité au cas où il y ait un fond grisé au survol */
}

/* ******************************************************************************** */
/* 7. METADONNÉES (TAGS) - VALIUZ : FOND ORANGE FIXE / TEXTE SOMBRE
/* ******************************************************************************** */

/* 1. Conteneur du tag : Fond orange fixe */
.metadata-link-list .metadata-link,
span.metadata-link,
.lumx-metadata {
    display: inline-flex !important; 
    align-items: center;
    justify-content: center;
    height: 22px !important; 
    padding: 0 10px !important; 
    border-radius: 100px !important; 
    background-color: #FF9D00 !important; /* Fond orange fixe */
    border: 1px solid #FF9D00 !important; /* Bordure orange pour maintenir la taille */
    box-shadow: none !important;
    text-decoration: none !important;
}

/* 2. Texte du tag : Noir (Sombre Valiuz) et Gras */
.metadata-link-list .metadata-link,
.metadata-link-list .metadata-link span,
span.metadata-link.lumx-text,
span.metadata-link .lumx-text,
.lumx-metadata span,
.lumx-metadata .lumx-text {
    font-size: 12px !important; 
    line-height: 1 !important; 
    color: #212222 !important; /* Force le texte en noir/sombre */
    font-weight: 700 !important; 
    text-decoration: none !important;
    box-shadow: none !important;
}

/* 3. Espacement propre entre les tags */
.metadata-link-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important; 
    align-items: center;
    list-style: none !important; 
    padding: 0 !important;
    margin: 0 !important;
}

/* 4. On cache l'ancien séparateur texte si Lumapps l'affiche quand même */
.metadata-link-list li::after {
    content: "" !important;
    display: none !important;
}