@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

/*=================================================================
                            GENERAL STYLES
==================================================================*/
body,
body.theme-lumapps {
	font-family: "Manrope", serif;
	background-color: #F9F9F9 !important;
}
/* Logo */
.header-top__logo .instance-logo img {
    max-height: 42px !important;
}
/*Welcome-message*/
.widget--welcome-message .widget-welcome {
  font-size: 32px;
}
/* Widget Footer boutons */
.widget-footer__wrapper:hover .widget-footer__icon {
    transform: rotate(360deg);
    transition: transform 0.5s ease;
}

/*=================================================================
                            PAGE TITLES
==================================================================*/
.widget--shared-titre-page .widget-title__title,
.widget--shared-titre-page .block-title,
.widget--shared-titre-page-fonce .widget-title__title {
    font-size: 42px !important;
}
.widget--shared-titre-page .block-title,
.widget--shared-titre-page .widget-title__title {
    color: #435C69 !important;
}

/*=================================================================
                            ALERT MESSAGES
==================================================================*/
/* Alert Message */
.widget--shared-alert-message .widget-content {
    background-repeat: no-repeat;
    background-size: auto !important;
}

/*=================================================================
                    BACKGROUND IMAGES
==================================================================*/
/* Fixed Images */
.component-row--row-links,
.component-row--row-fixed {
    background-attachment: fixed !important; /* Makes the background fixed */
    background-repeat: no-repeat !important; /* Prevents repeating */   
    position: relative;
    overflow: hidden;    
}

/*=================================================================
                            HR BUTTONS
==================================================================*/
.widget--shared-bouton {
    transition: all 0.3s ease-in-out !important;
}
.widget--shared-bouton:hover {
    border-color: #c08368 !important;
    box-shadow: 0 0 12px rgba(192, 131, 104, 0.6)!important;
}
.widget--shared-bouton .content-block-title,
.widget--shared-bouton .block-page-preview__title {
    text-align: center !important;
}
.widget--shared-bouton .content-block-title a {
    color: #c08368 !important;
}
.widget--shared-bouton .block-page-preview {
    align-items: center;
}
.widget--shared-bouton .content-block--view-mode-list,
.widget--shared-bouton .block-page-preview--horizontal {
    flex-direction: column !important;
}
.widget--shared-bouton .content-block__thumbnail,
.widget--shared-bouton .block-page-preview__thumbnail-wrapper {
    margin: 0 auto 24px !important;
}
.widget--shared-bouton .lumx-thumbnail__image {
    aspect-ratio: auto !important;
    width: 42px !important;
}

/*=================================================================
                            APP "TOOLS" HOME PAGE
==================================================================*/
/* Class add (advanced Style) - catalogue_simple*/

.widget.widget--catalogue_simple .directory-entry-block__tags,
.widget.widget--catalogue_simple .directory-entry-block__actions {display: none;}

/*=================================================================
                    OFFRES D'EMPLOI IMAGE RATIO
==================================================================*/
.widget--shared-widget-gris-offresdemploi .lumx-thumbnail--aspect-ratio-horizontal .lumx-thumbnail__image,
.widget--shared-widget-gris-offresdemploi .lumx-thumbnail__image {
    aspect-ratio: unset !important;
    width: auto !important;
    height: auto !important;
    object-fit: initial !important;
}

/*=================================================================
                            FOOTER
==================================================================*/
.wdc-footer-container {
    background-color: #435C69;
    width: 100%;
    padding: 32px 0; /* Adjust top and bottom padding as needed */
}
/* Centering the content in the footer */
.wdc-footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
}
/* Social Media Icons */
.wdc-social-icons {
    display: flex;
    gap: 18px; /* Space between icons */
    margin-bottom: 12px; /* Space between rows */
}
/* Icon styling */
.wdc-social-icon {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 5px; /* Space for border effect */
    transition: transform 0.4s ease-in-out, background-color 0.4s ease-in-out;
}
.wdc-social-icon img {
    width: 100%;
    height: 42px;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease; /* Smooth scaling and filter transition */
}
/* Growth border effect with gradient and shadow */
.wdc-social-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%; /* Slightly larger than the icon to create a border effect */
    height: 120%;
    transform: translate(-50%, -50%) scale(0); /* Start with no visible border */
    z-index: -1; /* Place behind the image */
}
/* Hover effect on icons */
.wdc-social-icon:hover {
    /*transform: rotate(10deg) scale(1.1); /* Slight rotation and scale up the icon */*/
}
.wdc-social-icon:hover img {
    transform: scale(1.05); /* Scale up the icon slightly more */
    filter: brightness(1.3); /* Brighten the icon */
}
/* Pulsing glowing effect on hover */
.wdc-social-icon:hover::before {
    transform: translate(-50%, -50%) scale(1); /* Grow the border on hover */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* Enhanced glowing shadow */
    animation: pulse 1.5s infinite; /* Add pulse animation */
}
/* Keyframe for the pulsing effect */
@keyframes pulse {
    0% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 255, 255, 1);
    }
    100% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    }
}
/* Footer Title */
.wdc-footer-title {
    font-weight: bold;
    font-size: 18px;
    color: white;
    margin-bottom: 12px; /* Space between rows */
}
/* Footer Text */
.wdc-footer-text {
    font-size: 10px;
    color: white;
    text-align: center;
    padding: 0 24px;
}
@media (max-width: 440px) {
    .wdc-social-icons {
        gap: 8px; /* Space between rows */
    }
    .wdc-social-icon img {
        width: 100%;
        height: auto;
    }    
}