/* =========================================================
   ACTIEQ – COMPO PRESTATIONS
========================================================= */

/* ---------------------------------------------------------
   VARIABLES GLOBALES — FOCUS AU SCROLL
   ---------------------------------------------------------
   Réglages principaux :

   DESKTOP / TABLETTE
   --ymd-focus-opacity-center
       Opacité de la carte au centre du viewport

   --ymd-focus-opacity-far
       Opacité minimale des cartes les plus éloignées

   --ymd-focus-scale-center
       Échelle de la carte au centre

   --ymd-focus-scale-far
       Échelle minimale des cartes éloignées

   --ymd-focus-zone
       Rayon d'influence du focus
       Plus grand  = variation plus progressive
       Plus petit  = variation plus nerveuse

   --ymd-focus-center-y
       Position verticale du focus dans le viewport
       .50 = centre exact
       .45 = un peu au-dessus du centre

   --ymd-focus-ease-strength
       Force de l'accentuation à l'approche du centre
       1    = quasi linéaire
       1.5  = ease léger
       2    = ease marqué
       2.5+ = effet plus dramatique

   MOBILE
   mêmes variables avec suffixe -mobile
--------------------------------------------------------- */

:root {
    /* Desktop / tablette */
    --ymd-focus-opacity-center: 1;
    --ymd-focus-opacity-far: 0.58;
    --ymd-focus-scale-center: 1;
    --ymd-focus-scale-far: 0.992;
    --ymd-focus-zone: 0.75;
    --ymd-focus-center-y: 0.50;
    --ymd-focus-ease-strength: 1.8;

    /* Mobile */
    --ymd-focus-opacity-center-mobile: 1;
    --ymd-focus-opacity-far-mobile: 0.55;
    --ymd-focus-scale-center-mobile: 1;
    --ymd-focus-scale-far-mobile: 0.988;
    --ymd-focus-zone-mobile: 0.35;
    --ymd-focus-center-y-mobile: 0.45;
    --ymd-focus-ease-strength-mobile: 3.1;

    /* Durées de transition */
    --ymd-focus-transition-opacity-desktop: .42s;
    --ymd-focus-transition-transform-desktop: .42s;
    --ymd-focus-transition-opacity-mobile: .08s;
    --ymd-focus-transition-transform-mobile: .08s;
    --ymd-focus-transition-shadow-mobile: .12s;
}

/* ---------------------------------------------------------
   INTRO
--------------------------------------------------------- */

.ymd-prestations {
    width: 100%;
    max-width: none;
    margin: 3.5rem 0 1.5rem;
    padding-left: clamp(1rem, 4vw, 3rem);
    padding-right: clamp(1rem, 4vw, 3rem);
}

.ymd-compo-prestas__titre {
    margin-bottom: .35rem;
}

.ymd-compo-prestas__txt-intro {
    max-width: 72ch;
    margin: 0 auto 2rem;
    opacity: .9;
}

/* ---------------------------------------------------------
   LAYOUTS 1 & 2
--------------------------------------------------------- */

#ymd-compo-prestas__layout1,
#ymd-compo-prestas__layout2 {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: clamp(1rem, 4vw, 3rem);
    padding-right: clamp(1rem, 4vw, 3rem);
}

#ymd-compo-prestas__layout1 > .wp-block-columns,
#ymd-compo-prestas__layout2 > .wp-block-columns {
    gap: 27px;
    align-items: flex-start;
    margin-bottom: 0;
}

/* Layout 2 fermé par défaut */
#ymd-compo-prestas__layout2 {
    display: none;
}

#ymd-compo-prestas__layout2.is-open {
    display: block;
}

/* Colonnes des deux layouts */
#ymd-compo-prestas__layout1-col-1,
#ymd-compo-prestas__layout1-col-2,
#ymd-compo-prestas__layout1-col-3,
#ymd-compo-prestas__layout2-col-1,
#ymd-compo-prestas__layout2-col-2,
#ymd-compo-prestas__layout2-col-3 {
    display: flex;
    flex-direction: column;
    gap: 27px;
    min-width: 0;
    padding-top: 0;
}

/* Sources masquées */
#ymd-compo-prestas__source1,
#ymd-compo-prestas__source2 {
    display: none !important;
}

#ymd-compo-prestas__toggle-button .wp-block-button__link {
    transition: transform .2s ease, box-shadow .2s ease;
}

#ymd-compo-prestas__toggle-button .wp-block-button__link:hover {
    transform: translateY(-1px);
}

/* ---------------------------------------------------------
   ORDRE DE DISTRIBUTION DES CARTES, ET OFFSET COLONNES
--------------------------------------------------------- */
/* Ordre de distribution des cartes dans les colonnes, et décallage vertical entre colonnes
   sont gérés dans le fichier :
   wp-content\themes\twentytwentyfive-child\assets\js\compo-prestas.js */


/* ---------------------------------------------------------
   CARTES PREMIUM
--------------------------------------------------------- */

.ymd-compo-prestas__carte-presta {
    --ymd-card-opacity: var(--ymd-focus-opacity-far);
    --ymd-card-scale: var(--ymd-focus-scale-far);

    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .04);
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 8px 18px rgba(16, 24, 40, .06),
        0 20px 42px rgba(16, 24, 40, .10);
    opacity: var(--ymd-card-opacity);
    transform: scale(var(--ymd-card-scale)) translateZ(0);
    backface-visibility: hidden;
    transition:
        opacity var(--ymd-focus-transition-opacity-desktop) cubic-bezier(.22, .61, .36, 1),
        transform var(--ymd-focus-transition-transform-desktop) cubic-bezier(.22, .61, .36, 1),
        box-shadow .42s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}


/* Pendant le scroll actif, on supprime l'inertie visuelle
   pour que l'opacité colle immédiatement à la position réelle */
body.ymd-prestas-is-scrolling .ymd-compo-prestas__carte-presta {
    transition: none !important;
/*         opacity .02s linear,
        transform .02s linear,
        box-shadow .12s ease-out; */
}


.ymd-compo-prestas__carte-presta:hover {
    transform: scale(var(--ymd-card-scale)) translateY(-6px) translateZ(0);
    box-shadow:
        0 2px 6px rgba(16, 24, 40, .05),
        0 14px 28px rgba(16, 24, 40, .09),
        0 28px 56px rgba(16, 24, 40, .14);
}

.ymd-compo-prestas__carte-presta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, .55),
        rgba(255, 255, 255, 0) 34%
    );
    opacity: .35;
    pointer-events: none;
    z-index: 1;
}

.ymd-compo-prestas__carte-presta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
    pointer-events: none;
    z-index: 3;
}

/* ---------------------------------------------------------
   FOCUS PROGRESSIF AU SCROLL — MOBILE
--------------------------------------------------------- */

@media (max-width: 768px) {
    .ymd-compo-prestas__carte-presta {
        --ymd-card-opacity: var(--ymd-focus-opacity-far-mobile);
        --ymd-card-scale: var(--ymd-focus-scale-far-mobile);

        transition:
            opacity var(--ymd-focus-transition-opacity-mobile) linear,
            transform var(--ymd-focus-transition-transform-mobile) linear,
            box-shadow var(--ymd-focus-transition-shadow-mobile) ease-out;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ymd-compo-prestas__carte-presta {
        --ymd-card-opacity: 1;
        --ymd-card-scale: 1;
        transition: none;
    }

    .ymd-compo-prestas__carte-presta:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------
   IMAGE / MEDIA
--------------------------------------------------------- */

.ymd-compo-prestas__img-presta {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    z-index: 0;
}

.ymd-compo-prestas__img-presta img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
    transform: scale(1) translateY(0);
    transform-origin: center center;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
    backface-visibility: hidden;
}

.ymd-compo-prestas__carte-presta:hover .ymd-compo-prestas__img-presta img {
    transform: scale(1.05) translateY(-2px);
}

.ymd-compo-prestas__img-presta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .20), rgba(0, 0, 0, 0) 55%);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    z-index: 1;
}

.ymd-compo-prestas__carte-presta:hover .ymd-compo-prestas__img-presta::after {
    opacity: 1;
}

/* ronds avec flèches apparaissant au hover des cartes prestations */
.ymd-compo-prestas__img-presta::before {
    content: "\00279C";
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;
    color: #ffffff;
    background: #305395;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
    z-index: 2;
}

.ymd-compo-prestas__carte-presta:hover .ymd-compo-prestas__img-presta::before {
    opacity: 1;
    transform: translateY(0);
}

/* ---------------------------------------------------------
   TEXTE
--------------------------------------------------------- */

.ymd-compo-prestas__titre-presta,
.ymd-compo-prestas__descript-presta {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

.ymd-compo-prestas__titre-presta {
    margin: 1.05rem 0 .35rem;
    transition: transform .25s ease;
}

.ymd-compo-prestas__carte-presta:hover .ymd-compo-prestas__titre-presta {
    transform: translateY(-2px);
}

.ymd-compo-prestas__img-presta a,
.ymd-compo-prestas__img-presta a:link,
.ymd-compo-prestas__img-presta a:visited,
.ymd-compo-prestas__img-presta a:hover,
.ymd-compo-prestas__img-presta a:focus,
.ymd-compo-prestas__img-presta a:active,
.ymd-compo-prestas__titre-presta a,
.ymd-compo-prestas__titre-presta a:link,
.ymd-compo-prestas__titre-presta a:visited,
.ymd-compo-prestas__titre-presta a:hover,
.ymd-compo-prestas__titre-presta a:focus,
.ymd-compo-prestas__titre-presta a:active {
    text-decoration: none !important;
    color: inherit;
    transition: color .25s ease;
}

.ymd-compo-prestas__carte-presta:hover .ymd-compo-prestas__titre-presta a {
    color: #305395;
}

.ymd-compo-prestas__descript-presta {
    margin: 0 0 1.15rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(-4px);
    transition: max-height .28s ease, opacity .2s ease, transform .2s ease;
}

.ymd-compo-prestas__carte-presta:hover .ymd-compo-prestas__descript-presta,
.ymd-compo-prestas__titre-presta:hover + .ymd-compo-prestas__descript-presta {
    opacity: .92;
    max-height: 9em;
    transform: translateY(0);
}

/* ---------------------------------------------------------
   ACCESSIBILITÉ
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    #ymd-compo-prestas__toggle-button .wp-block-button__link,
    .ymd-compo-prestas__carte-presta,
    .ymd-compo-prestas__img-presta img,
    .ymd-compo-prestas__img-presta::after,
    .ymd-compo-prestas__img-presta::before,
    .ymd-compo-prestas__titre-presta,
    .ymd-compo-prestas__descript-presta {
        transition: none !important;
    }

    .ymd-compo-prestas__carte-presta:hover,
    .ymd-compo-prestas__carte-presta:hover .ymd-compo-prestas__img-presta img,
    .ymd-compo-prestas__carte-presta:hover .ymd-compo-prestas__titre-presta,
    .ymd-compo-prestas__carte-presta:hover .ymd-compo-prestas__descript-presta,
    #ymd-compo-prestas__toggle-button .wp-block-button__link:hover {
        transform: none !important;
    }
}

/* PROVISOIRE */
.is-hidden {
    display: none !important;
}