/* ============================================================
   SERVICE CARDS — composant réutilisable
   Extrait depuis index.html, à inclure sur toute page voulant afficher
   les 5 cards services (EPI / LEAA / Kriya / Toucher / Soin à distance).

   USAGE :
     <link rel="stylesheet" href="service-cards.css">
     <div class="cards-grid" data-service-cards></div>
     <script src="service-cards.js"></script>

   Variables CSS requises sur la page hôte :
     --ink, --accent, --text-sec, --text-mut, --border, --nagoda
   ============================================================ */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.cards-grid.revealed,
.cards-grid.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.card {
    padding: 1.8rem 1.5rem 1.5rem;
    position: relative;
    background: #FBF5E9;
    transition: all 0.4s;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0);
    text-decoration: none;
    color: inherit;
}
.card:hover {
    background: #FBF5E9;
    transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0) scale(1.01);
    border-color: transparent;
}
/* Card avec badge "Recommandé" : border permanent.
   :has() a une spécificité supérieure à :hover, donc la couleur reste même au survol. */
.card:has(.card-badge.visible) {
    border-color: var(--border);
}
.card.dimmed {
    opacity: 0.28;
    transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0) scale(0.97);
}
/* Card désactivée → redevient pleinement lisible au hover. */
.card.dimmed:hover {
    opacity: 1;
    transform: translate3d(var(--magnet-x, 0), var(--magnet-y, 0), 0) scale(1);
}

/* --- Vagues SVG façon Tympanus ShapeHoverEffect ---
   Vague TOP : grande au repos (cache .card-desc), rétrécit au hover.
   Vague BOTTOM : invisible au repos, "blop" au hover pour masquer .card-meta. */
.card-wave-top, .card-wave-bottom {
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
    overflow: hidden;
}
.card-wave-top { top: 0; height: 40%; z-index: 1; }
.card-wave-bottom { bottom: 0; height: 27%; z-index: 4; }
.card-wave-top svg, .card-wave-bottom svg {
    display: block; width: 100%; height: 100%;
}
.card-wave-top path, .card-wave-bottom path { fill: var(--ink); }

/* Dust overlay : canvas étendu de 30px hors du cadre. */
.card-dust {
    position: absolute;
    top: -30px;
    left: -30px;
    pointer-events: none;
    opacity: 0;
    z-index: 6;
    transition: opacity 0.45s ease;
}
.card:hover .card-dust { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .card-dust { display: none; }
}

/* Vagues TOP/BOTTOM : interpolation pilotée en JS (setAttribute('d', ...))
   via requestAnimationFrame. Safari ne supporte ni `transition: d` ni les
   `@keyframes { d: path(...) }` correctement avant la v18 — ce tween marche
   partout, contrôle l'ease, et permet un retour propre au mouseleave. */

/* Stack des éléments par-dessus les vagues. .card-top-bar a sa propre règle absolute. */
.card > .card-name,
.card > .card-acronym,
.card > .card-symptoms {
    position: relative;
    z-index: 3;
}
/* .card-desc cachée derrière la vague top au repos, révélée au hover.
   NE BOUGE PAS : juste opacity. L'espace est réservé dans le layout. */
.card > .card-desc {
    position: relative;
    z-index: 0;
    opacity: 0;
    translate: 0 -1.5em;
    text-wrap: balance;
    transform-origin: top left;
    transition: opacity .35s ease;
}
.card:hover > .card-desc {
    opacity: 1;
    transition-delay: .18s;
}

/* Titre : scale plus marqué au hover. Acronym : fade only. */
.card > .card-name {
    transform-origin: left center;
    transition: transform .45s cubic-bezier(.5, 0, .25, 1);
}
.card:hover > .card-name { transform: translateY(-7px) scale(0.85); }
.card:hover > .card-name.is-multiline { transform: translateY(-17px) scale(0.85); }
.card > .card-acronym {
    text-wrap: balance;
    transition: opacity .3s ease;
}
.card:hover > .card-acronym { opacity: 0; }

/* Footer : prix au-dessus, meta empilée en petit dessous. */
.card-footer {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}
.card-price { position: relative; z-index: 5; }
/* Meta (durée · séances) reste visible au hover ; recouverte visuellement par la wave-bottom. */
.card-meta {
    position: relative;
    z-index: 3;
}
/* CTA "Réserver le soin" : positionné sur la BULLE de la wave-bottom (pas sur le footer). */
.card-cta {
    position: absolute;
    bottom: 1.4rem;
    right: 1.5rem;
    transform: translateY(12px);
    opacity: 0;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #FDF9F1;
    pointer-events: none;
    z-index: 5;
    transition: opacity .35s ease, transform .4s cubic-bezier(.5, 0, .25, 1);
}
.card-cta::after {
    content: '\00A0\2192';
    display: inline-block;
    transition: transform .3s ease;
}
.card:hover .card-cta {
    animation: cta-elastic 1.4s linear forwards;
    animation-delay: .15s;
}
.card:hover .card-cta::after { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .card-wave-top path, .card-wave-bottom,
    .card-name, .card-acronym, .card-desc,
    .card-cta, .card-cta::after, .card-meta { transition: none; }
}

/* Badges en absolute → n'occupent pas d'espace dans le flux. */
.card-top-bar {
    position: absolute; top: -0.5rem; right: 1rem;
    display: flex; align-items: stretch; gap: 0;
    opacity: 0; pointer-events: none;
    z-index: 5;
    transition: opacity 0.35s;
}
.card-top-bar.visible {
    opacity: 1; pointer-events: auto;
}
.card-badge {
    background: #FFFFFF; color: var(--accent);
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.3rem 0.75rem;
    border: none;
    display: none;
}
.card-badge.visible { display: block; }
.card-score {
    background: var(--accent); color: white;
    font-size: 0.75rem; font-weight: 600;
    padding: 0.3rem 0.65rem;
    letter-spacing: 0.04em;
    border: 1px solid var(--border);
    display: none;
}
.card-score.visible { display: block; }

.card-name {
    font-family: var(--nagoda);
    font-size: clamp(1.4rem, 2.2vw, 1.7rem);
    color: #FDF9F1; margin-bottom: 0.25rem;
    line-height: 1;
    /* Réserve ~2 lignes pour aligner .card-desc en bas du bloc header. */
    min-height: 2.3em;
    align-content: end;
}
.card-acronym {
    font-size: 0.82rem; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: #FDF9F1; margin-bottom: 0;
    line-height: 1.4;
    /* Réserve ~2 lignes pour homogénéiser. */
    min-height: 2.8em;
}
.card-desc {
    font-size: 1rem; line-height: 1.7;
    color: var(--text-sec); font-weight: 300;
    margin-bottom: 1.2rem;
}
.card-symptoms {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    margin-bottom: 1.5rem;
    flex: 1;
    /* flex-end → tags collés au bas, au-dessus du footer. */
    align-content: flex-end;
}
.card-symptom {
    padding: 0.2rem 0.55rem;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink);
    transition: all 0.3s;
    background: #eae2d5;
    border: none;
}
.card-symptom.match {
    background: #6b5644;
    color: white;
    font-weight: 600;
}
.card-symptom.card-symptom--more {
    background: transparent;
    color: var(--text-mut);
    font-style: italic;
    cursor: default;
    opacity: 0.85;
}
.card-price {
    font-family: var(--nagoda);
    font-size: 1.25rem; color: var(--ink);
}
.card-meta {
    font-size: 0.88rem; color: var(--text-mut);
    letter-spacing: 0.04em;
}

@media (max-width: 768px) {
    /* Module « services » unifié : about + soins-proches se comportent
       EXACTEMENT comme la grille de la page d'accueil sur mobile (pile
       verticale + auto-hover de la card centrée via .is-scroll-active). */
    .cards-grid { grid-template-columns: 1fr !important; gap: 1rem !important; opacity: 1 !important; transform: none !important; }

    .card.is-scroll-active .card-wave-top path {
        d: path('M155 85 C 232.822 79.7, 249.752 80.7, 336.5 79.6 V0.5 H0.5 V92.5 C 26 96.9, 96 89, 155 85 Z');
    }
    .card.is-scroll-active .card-name { transform: translateY(-7px) scale(0.85) !important; }
    .card.is-scroll-active .card-name.is-multiline { transform: translateY(-17px) scale(0.85) !important; }
    .card.is-scroll-active .card-acronym { opacity: 0 !important; }
    .card.is-scroll-active .card-desc { opacity: 1 !important; transition-delay: 0.18s !important; }
    /* CTA masqué sur mobile (la card entière est cliquable) ; wave-bottom masquée
       pour garder prix + meta toujours lisibles — identique à la home. */
    .card-cta { display: none !important; }
    .card.is-scroll-active .card-wave-bottom path { animation: none !important; }
    .card-wave-bottom { display: none !important; }
    /* iOS : pas de couche GPU magnet inutile sur les cartes (le magnet ne tourne
       pas sur mobile) — limite la saturation du compositeur. */
    .card { transform: none !important; }
}

/* === Cards : tags + footer alignés en bas ===
   margin-top:auto pousse tags+footer au bas de la carte (flex column) :
   tous les symptômes et tarifs sont alignés quelle que soit la desc. */
.card > .card-symptoms,
.cards-grid .card > .card-symptoms { margin-top: auto; }
/* Vague bottom plus fine : démarre plus bas, pour ne plus entrer en collision
   avec le CTA « Découvrir le soin » ni recouvrir le footer. */
.card-wave-bottom,
.cards-grid .card-wave-bottom { height: 21%; }