/* ==========================================================================
   SCT PROD — SERVICES
   ========================================================================== */


/* --------------------------------------------------------------------------
   Grille
   -------------------------------------------------------------------------- */

.services_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;

    width: 100%;
}


/* --------------------------------------------------------------------------
   Carte service
   -------------------------------------------------------------------------- */

.service-card {
    position: relative;

    width: 100%;
    min-width: 0;

    aspect-ratio: 3 / 4;

    overflow: hidden;
}


/*
 * Divi 5 génère un wrapper interne dans le module Groupe.
 * On lui transmet toute la hauteur disponible afin que
 * l'arrière-plan occupe correctement le ratio 3:4.
 */
.service-card > div {
    width: 100%;
    height: 100%;
    min-height: 100%;
}


/* --------------------------------------------------------------------------
   Overlay permanent
   -------------------------------------------------------------------------- */

.service-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(8, 19, 42, 0.88) 0%,
        rgba(8, 19, 42, 0.58) 34%,
        rgba(8, 19, 42, 0.18) 58%,
        rgba(8, 19, 42, 0) 78%
    );

    pointer-events: none;

    z-index: 1;
}


/* --------------------------------------------------------------------------
   Overlay renforcé au hover
   -------------------------------------------------------------------------- */

.service-card::after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to top,
        rgba(8, 19, 42, 0.96) 0%,
        rgba(8, 19, 42, 0.72) 38%,
        rgba(8, 19, 42, 0.28) 62%,
        rgba(8, 19, 42, 0.02) 82%
    );

    opacity: 0;

    pointer-events: none;

    z-index: 1;

    transition:
        opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* --------------------------------------------------------------------------
   Contenu principal
   -------------------------------------------------------------------------- */

.service-card .service-card__content {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: auto;
    min-height: 0;

    box-sizing: border-box;

    padding: 24px;

    z-index: 2;

    transform: translateY(0);

    transition:
        transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}


/*
 * Neutralisation de la marge native du H2.
 */
.service-card__content h2 {
    margin: 0;
}


/* --------------------------------------------------------------------------
   Contenu secondaire
   -------------------------------------------------------------------------- */

/*
 * L'animation 0fr → 1fr permet d'animer la hauteur
 * réelle du contenu sans utiliser de max-height arbitraire.
 */
.service-card__details {
    display: grid;

    grid-template-rows: 0fr;

    margin-top: 0;

    opacity: 0;

    transform: translateY(14px);

    transition:
        grid-template-rows 650ms cubic-bezier(0.16, 1, 0.3, 1),
        margin-top 650ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 320ms ease,
        transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}


/*
 * Wrapper interne nécessaire à l'animation 0fr → 1fr.
 */
.service-card__details-inner {
    min-height: 0;

    overflow: hidden;
}


/* --------------------------------------------------------------------------
   Animation individuelle des textes
   -------------------------------------------------------------------------- */

.service-card__lead,
.service-card__text {
    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity 400ms ease,
        transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* ==========================================================================
   DESKTOP — HOVER
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

    .service-card:hover::after {
        opacity: 1;
    }


    .service-card:hover .service-card__content {
        transform: translateY(-2px);
    }


    .service-card:hover .service-card__details {
        grid-template-rows: 1fr;

        margin-top: 14px;

        opacity: 1;

        transform: translateY(0);
    }


    .service-card:hover .service-card__lead,
    .service-card:hover .service-card__text {
        opacity: 1;

        transform: translateY(0);
    }


    .service-card:hover .service-card__lead {
        transition-delay: 90ms;
    }


    .service-card:hover .service-card__text {
        transition-delay: 160ms;
    }

}


/* ==========================================================================
   APPAREILS TACTILES
   ========================================================================== */

/*
 * Pas de dépendance au hover.
 * Le contenu reste directement accessible.
 */
@media (hover: none), (pointer: coarse) {

    .service-card::after {
        opacity: 1;
    }


    .service-card__details {
        grid-template-rows: 1fr;

        margin-top: 14px;

        opacity: 1;

        transform: none;
    }


    .service-card__lead,
    .service-card__text {
        opacity: 1;

        transform: none;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767px) {

    .services_grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================================
   ACCESSIBILITÉ — REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .service-card::after,
    .service-card__content,
    .service-card__details,
    .service-card__lead,
    .service-card__text {
        transition: none !important;
    }

}