/* Variables globales */
:root {
    --wedoo-primary: var(--bs-gray-dark);
    --wedoo-card-height: 332px;
    --wedoo-gap: 1.5rem;
    --wedoo-gap-tablet: 1rem;
}

.wedoo-partial-bg {
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
}

.wedoo-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 5%;
}

.iq-title-box {
    margin-bottom: 0;
}

.text-capitalize {
    text-transform: capitalize;
}

.line-count-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.highlighted-text {
    position: relative;
}

.highlighted-text-swipe,
.highlighted-image {
    display: block;
}

.wedoo-svg-underline {
    width: 130px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Grille des cartes */
.wedoo-cards-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--wedoo-gap);
    justify-content: center;
    width: 100%;
    margin-top: 2rem;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 5%;
}

/* Styles des cartes */
.wedoo-card {
    background: var(--bs-gray-900); /* Fond gris foncé */
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    width: calc((100vw - (var(--wedoo-gap) * 3) - 10%) / 4);
    max-width: 260px;
    min-width: 150px;
    height: var(--wedoo-card-height);
    flex-shrink: 0;
}

.wedoo-card-inner {
    height: 100%;
    width: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wedoo-card-svg-icon {
    width: calc((260px * 0.45) * 1.1); /* 128.7px */
    height: calc(((260px * 0.45) * 1.1) / 0.882); /* ~145.92px */
    fill: var(--bs-gray-600); /* Icônes en gris moyen par défaut */
    opacity: 1;
    position: absolute;
    top: -5px;
    left: -5px;
    transform: translate(0, 0) scale(1); /* Position droite par défaut */
    transition: transform 0.6s ease-out; /* Transition fluide pour retour */
    filter: blur(0.7px) brightness(1.3); /* Flou réduit à ~70% et clair */
}

/* Animation au survol */
@-webkit-keyframes icon-pop-bottom {
    0% {
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
    100% {
        -webkit-transform: translateY(-8px) scale(1);
                transform: translateY(-8px) scale(1);
    }
}

@keyframes icon-pop-bottom {
    0% {
        -webkit-transform: translateY(0) scale(1);
                transform: translateY(0) scale(1);
    }
    100% {
        -webkit-transform: translateY(-8px) scale(1);
                transform: translateY(-8px) scale(1);
    }
}

/* Appliquer l’animation et changer la couleur au survol */
.wedoo-card:hover .wedoo-card-svg-icon {
    -webkit-animation: icon-pop-bottom 0.6s both;
            animation: icon-pop-bottom 0.6s both;
    filter: none; /* Supprime le flou et la luminosité */
    fill: var(--bs-primary); /* Couleur primaire au survol */
}

/* Animation de retour */
@-webkit-keyframes fall-and-rotate-back {
    0% {
        -webkit-transform: translateY(-8px) scale(1);
                transform: translateY(-8px) scale(1);
        -webkit-transform-origin: 0% 0%; /* Point d’origine au coin supérieur gauche */
                transform-origin: 0% 0%;
    }
    70% {
        -webkit-transform: translateY(10px) rotate(0deg) scale(1);
                transform: translateY(10px) rotate(0deg) scale(1);
        -webkit-transform-origin: 0% 0%;
                transform-origin: 0% 0%;
    }
    100% {
        -webkit-transform: translateY(0) rotate(15deg) scale(1);
                transform: translateY(0) rotate(15deg) scale(1);
        -webkit-transform-origin: 0% 0%; /* Rotation centrée sur le coin supérieur gauche */
                transform-origin: 0% 0%;
    }
}

@keyframes fall-and-rotate-back {
    0% {
        -webkit-transform: translateY(-8px) scale(1);
                transform: translateY(-8px) scale(1);
        -webkit-transform-origin: 0% 0%; /* Point d’origine au coin supérieur gauche */
                transform-origin: 0% 0%;
    }
    70% {
        -webkit-transform: translateY(10px) rotate(0deg) scale(1);
                transform: translateY(10px) rotate(0deg) scale(1);
        -webkit-transform-origin: 0% 0%;
                transform-origin: 0% 0%;
    }
    100% {
        -webkit-transform: translateY(0) rotate(15deg) scale(1);
                transform: translateY(0) rotate(15deg) scale(1);
        -webkit-transform-origin: 0% 0%; /* Rotation centrée sur le coin supérieur gauche */
                transform-origin: 0% 0%;
    }
}

/* Appliquer l’animation de retour et remettre le flou réduit */
.wedoo-card:not(:hover) .wedoo-card-svg-icon {
    -webkit-animation: fall-and-rotate-back 0.3s ease-out both;
            animation: fall-and-rotate-back 0.3s ease-out both;
    filter: blur(0.7px) brightness(1.3); /* Flou réduit à ~70% et clair */
    fill: var(--bs-gray-600); /* Retour à la couleur initiale */
}

.wedoo-card-title {
    font-size: clamp(1.2rem, 5vw, 1.5rem);
    color: white;
    text-align: right;
    margin: 0;
    line-height: 1.2;
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    max-width: 80%;
}

/* Tablette (768px-1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .wedoo-cards-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--wedoo-gap-tablet);
        justify-content: center;
        width: 100%;
        margin-top: 2rem;
        padding: 0 1rem;
    }

    .wedoo-card {
        width: calc((100vw - (var(--wedoo-gap-tablet) * 3) - 2rem) / 4);
        max-width: 180px;
        min-width: 140px;
        height: var(--wedoo-card-height);
        flex-shrink: 0;
    }

    .wedoo-card-svg-icon {
        width: calc((180px * 0.45) * 1.1); /* 89.1px */
        height: calc(((180px * 0.45) * 1.1) / 0.882); /* ~101.02px */
        fill: var(--bs-gray-600); /* Icônes en gris moyen */
        top: -5px;
        left: -5px;
        transform: translate(0, 0) scale(1); /* Position droite par défaut */
        transition: transform 0.6s ease-out; /* Transition fluide pour retour */
        filter: blur(0.6px) brightness(1.2); /* Flou réduit à ~70% et clair */
    }

    .wedoo-card:hover .wedoo-card-svg-icon {
        -webkit-animation: icon-pop-bottom 0.6s both;
                animation: icon-pop-bottom 0.6s both;
        filter: none; /* Supprime le flou et la luminosité */
        fill: var(--bs-primary); /* Couleur primaire au survol */
    }

    .wedoo-card:not(:hover) .wedoo-card-svg-icon {
        -webkit-animation: fall-and-rotate-back 0.3s ease-out both;
                animation: fall-and-rotate-back 0.3s ease-out both;
        filter: blur(0.6px) brightness(1.2); /* Flou réduit à ~70% et clair */
        fill: var(--bs-gray-600); /* Retour à la couleur initiale */
    }

    .wedoo-card-title {
        font-size: clamp(0.9rem, 3.5vw, 1.3rem);
        bottom: 0.8rem;
        right: 0.8rem;
        max-width: 80%;
    }
}

/* Transition (766px-767px) */
@media (min-width: 766px) and (max-width: 767px) {
    .wedoo-cards-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--wedoo-gap-tablet);
        justify-content: center;
        width: 100%;
        margin-top: 2rem;
        padding: 0 1rem;
    }

    .wedoo-card {
        width: calc((100vw - (var(--wedoo-gap-tablet) * 3) - 2rem) / 4);
        max-width: 180px;
        min-width: 140px;
        height: var(--wedoo-card-height);
        flex-shrink: 0;
    }

    .wedoo-card-svg-icon {
        width: calc((180px * 0.45) * 1.1); /* 89.1px */
        height: calc(((180px * 0.45) * 1.1) / 0.882); /* ~101.02px */
        fill: var(--bs-gray-600); /* Icônes en gris moyen */
        top: -5px;
        left: -5px;
        transform: translate(0, 0) scale(1); /* Position droite par défaut */
        transition: transform 0.6s ease-out; /* Transition fluide pour retour */
        filter: blur(0.6px) brightness(1.2); /* Flou réduit à ~70% et clair */
    }

    .wedoo-card:hover .wedoo-card-svg-icon {
        -webkit-animation: icon-pop-bottom 0.6s both;
                animation: icon-pop-bottom 0.6s both;
        filter: none; /* Supprime le flou et la luminosité */
        fill: var(--bs-primary); /* Couleur primaire au survol */
    }

    .wedoo-card:not(:hover) .wedoo-card-svg-icon {
        -webkit-animation: fall-and-rotate-back 0.3s ease-out both;
                animation: fall-and-rotate-back 0.3s ease-out both;
        filter: blur(0.6px) brightness(1.2); /* Flou réduit à ~70% et clair */
        fill: var(--bs-gray-600); /* Retour à la couleur initiale */
    }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
    .wedoo-cards-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--wedoo-gap);
        width: 100%;
        margin-top: 2rem;
    }

    .wedoo-card {
        width: 290px !important;
        height: 108px !important;
        flex-direction: row;
    }

    .wedoo-card-inner {
        padding: 0.3rem;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        position: relative;
    }

    .wedoo-card-svg-icon {
        height: calc((108px * 0.7) * 1.1); /* 83.16px */
        width: calc(((108px * 0.7) * 1.1) * 0.882); /* ~73.35px */
        fill: var(--bs-gray-600); /* Icônes en gris moyen */
        opacity: 1;
        position: absolute;
        top: -5px;
        left: -5px;
        transform: translate(0, 0) scale(1); /* Pas d’animation */
        transition: none; /* Pas de transition */
        filter: none; /* Pas de flou ni de luminosité sur mobile */
    }

    .wedoo-card:hover .wedoo-card-svg-icon {
        -webkit-animation: none; /* Pas d’animation au survol */
                animation: none;
        filter: none; /* Pas d’effet au survol */
        fill: var(--bs-gray-600); /* Pas de changement de couleur */
    }

    .wedoo-card:not(:hover) .wedoo-card-svg-icon {
        -webkit-animation: none; /* Pas d’animation au retour */
                animation: none;
        filter: none; /* Pas d’effet au retour */
        fill: var(--bs-gray-600); /* Couleur initiale maintenue */
    }

    .wedoo-card-title {
        font-size: clamp(0.7rem, 2.5vw, 1rem); /* Réduction de la taille du texte en mobile */
        color: white;
        text-align: right;
        position: absolute;
        bottom: 0.3rem;
        right: 0.3rem;
        left: calc((108px * 0.7 * 1.1) + 0.3rem); /* Ajusté pour la taille */
        margin: 0;
        line-height: 1.2;
        max-width: 60%;
    }
}