/**
 * Styles pour les blocs AMCC avec effet hover
 */

/* Animation de vague au hover */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@media (min-width: 769px) {
    /* Conteneur principal */
    .amcc-blocs-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 20px 0;
    }
}

@media (max-width: 768px) {
/* Conteneur principal */
.amcc-blocs-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
    padding: 0 20px;
    }
}


/* Style de chaque bloc */
.amcc-bloc {
    position: relative;
    width: calc(33.333% - 14px);
    height: 365px;
    border-radius: 15px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border: 1px solid #1F386A;
    transition: transform 0.4s ease;
    cursor: pointer;
}

#custom-givrants .amcc-bloc {
    position: relative;
    width: calc(33.333% - 14px);
    height: 365px;
    border-radius: 15px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border: 1px solid #fcf7e6;
    transition: transform 0.4s ease;
    cursor: pointer;
}

/* Pour les écrans moyens */
@media (max-width: 992px) and (min-width: 769px) {
    .amcc-blocs-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding-bottom: 20px; /* Espace pour le scrollbar */
        gap: 15px;
    }

    .amcc-bloc {
        min-width: 280px; /* Largeur minimale pour chaque bloc */
        width: 280px; /* Largeur fixe */
        flex-shrink: 0; /* Empêche les blocs de rétrécir */
    }

    /* Sur tablette, afficher le contenu du hover par défaut */
    .amcc-bloc .amcc-bloc-gradient {
        height: 100%;
    }

    .amcc-bloc .amcc-bloc-hover-content {
        opacity: 1;
        bottom: 20px;
    }

    /* Titres avec des décalages spécifiques pour chaque bloc sur tablette */
    .amcc-bloc-1 .amcc-bloc-title-1 {
        transform: translateY(-87px);
    }

    .amcc-bloc-2 .amcc-bloc-title-2 {
        transform: translateY(-110px);
    }

    .amcc-bloc-3 .amcc-bloc-title-3 {
        transform: translateY(-70px);
    }

    /* Masquer la scrollbar mais garder la fonctionnalité */
    .amcc-blocs-container::-webkit-scrollbar {
        height: 6px;
    }

    .amcc-blocs-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .amcc-blocs-container::-webkit-scrollbar-thumb {
        background: #1F386A;
        border-radius: 10px;
    }
}

/* Pour les écrans mobiles */
@media (max-width: 768px) {
    .amcc-blocs-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding-bottom: 20px; /* Espace pour le scrollbar */
        gap: 15px;
    }

    .amcc-bloc {
        min-width: 260px; /* Légèrement plus petit pour les téléphones */
        width: 260px;
        flex-shrink: 0;
    }

    /* Masquer la scrollbar mais garder la fonctionnalité */
    .amcc-blocs-container::-webkit-scrollbar {
        height: 4px;
    }

    .amcc-blocs-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .amcc-blocs-container::-webkit-scrollbar-thumb {
        background: #1F386A;
        border-radius: 10px;
    }

    /* Ajustements spécifiques pour les très petits écrans */
    .amcc-bloc-1 .amcc-bloc-title-1 {
        transform: translateY(-140px) !important;
    }

    .amcc-bloc-2 .amcc-bloc-title-2 {
        transform: translateY(-110px) !important;
    }

    .amcc-bloc-3 .amcc-bloc-title-3 {
        transform: translateY(-70px) !important;
    }
}

/* Overlay semi-transparent */
.amcc-bloc-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Gradient au bas du bloc */
.amcc-bloc-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, rgba(0, 44, 95, 0.9), rgba(0, 44, 95, 0));
    z-index: 2;
    transition: height 0.4s ease;
}

/* Contenu du bloc */
.amcc-bloc-content {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    padding: 20px;
    z-index: 3;
    color: #fff;
    overflow: hidden; /* Pour cacher le contenu qui sort */
    height: 100%; /* Assure que le bloc couvre toute la hauteur */
}

/* Titre */
.amcc-bloc-title {
    position: absolute;
    bottom: 20px;
    left: 30px;
    margin: 0;
    font-weight: 600;
    transition: transform 0.4s ease;
    color: #fff !important;
    z-index: 5;
    font-size: 23px !important;
    font-family: "Wix Madefor Text", Sans-serif;
}

/* Flèche à droite */
.amcc-bloc-arrow {
    position: absolute;
    bottom: 29px;
    right: 30px;
    display: flex;
    align-items: center;
    z-index: 6;
}

.arrow-right {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 0;
}

.arrow-right:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 12px;
    height: 12px;
    border-top: 3px solid #FCF7E6; /* Flèche blanche */
    border-right: 3px solid #FCF7E6; /* Flèche blanche */
    transform: translateY(-50%) rotate(45deg);
}

/* Contenu visible au hover */
.amcc-bloc-hover-content {
    position: absolute;
    left: 0;
    bottom: -100%;
    width: 100%;
    padding: 0px 30px;
    opacity: 0;
    transition: bottom 0.4s ease, opacity 0.4s ease;
    z-index: 4;
}

.amcc-bloc-text {
    margin-bottom: 15px;
    line-height: 1.4;
}

/* Bouton */
.amcc-bloc-button {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    color: #fff !important;
    border-radius: 5px;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
    border: none !important;
    padding: 0;
    position: relative;
    top: -1px;
}

/* Effet hover sur desktop uniquement */
@media (min-width: 993px) {
    .amcc-bloc:hover .amcc-bloc-gradient {
        height: 100%;
    }

    /* Offsets personnalisés pour chaque bloc */
    .amcc-bloc-1:hover .amcc-bloc-title-1 {
        transform: translateY(-70px);
    }

    .amcc-bloc-2:hover .amcc-bloc-title-2 {
        transform: translateY(-100px);
    }

    .amcc-bloc-3:hover .amcc-bloc-title-3 {
        transform: translateY(-70px);
    }

    .amcc-bloc:hover .amcc-bloc-hover-content {
        bottom: 20px; /* Remonte dans le bloc */
        opacity: 1;
    }
}

/* Effet de vague */
.amcc-bloc-ripple {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: scale(0);
    z-index: 1;
    pointer-events: none;
}

.amcc-bloc-ripple.animate {
    animation: ripple 0.7s ease-out;
}

/* Animation d'entrée */
.amcc-bloc {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.amcc-bloc-loaded {
    opacity: 1;
    transform: translateY(0);
}

/* État actif pour mobile */
.amcc-bloc.active .amcc-bloc-gradient {
    height: 100%;
}

.amcc-bloc.active .amcc-bloc-hover-content {
    opacity: 1;
    bottom: 20px;
}

/* Adaptation pour mobile */
@media (max-width: 768px) {
    /* Gradient déjà pleine hauteur par défaut */
    .amcc-bloc .amcc-bloc-gradient {
        height: 100%;
    }

    /* Contenu déjà visible */
    .amcc-bloc .amcc-bloc-hover-content {
        opacity: 1;
        bottom: 20px;
    }

    /* Titres avec des décalages spécifiques pour chaque bloc */
    .amcc-bloc-1 .amcc-bloc-title-1 {
        transform: translateY(-140px) !important;
        padding-right: 20px;
    }

    .amcc-bloc-2 .amcc-bloc-title-2 {
        transform: translateY(-209px) !important;
    }

    .amcc-bloc-3 .amcc-bloc-title-3 {
        transform: translateY(-113px) !important;
    }

    /* Désactivation des transformations hover car déjà appliquées */
    .amcc-bloc:hover .amcc-bloc-title-1,
    .amcc-bloc:hover .amcc-bloc-title-2,
    .amcc-bloc:hover .amcc-bloc-title-3 {
        transform: none;
    }
}