/* ═══════════════════════════════════════════════════════════════════════
   pb-cards.css — « Carte au survol » (bloc PageBuilder générique).
   Image + titre + contenu révélé au passage de la souris. 4 effets, même
   DOM : reveal (glisse), fade (voile), zoom (image), flip (retournement).
   Chargé sur le site (App.razor) ET dans le canvas de l'éditeur (parité).
   Variables surchargeables par carte : --pbhc-h, --pbhc-radius, --pbhc-overlay.
   ═══════════════════════════════════════════════════════════════════════ */
.pb-hovercard {
    position: relative; display: block; overflow: hidden; isolation: isolate;
    height: var(--pbhc-h, 320px); border-radius: var(--pbhc-radius, 14px);
    background: #0B1929; color: #fff; text-decoration: none;
    transition: transform .7s cubic-bezier(.4,.2,.2,1);
}
.pb-hovercard-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s ease; border-radius: inherit;
}
.pb-hovercard-body {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 24px;
    background: linear-gradient(to top, var(--pbhc-overlay, rgba(11,25,41,.88)) 40%, rgba(11,25,41,0));
    transition: transform .4s ease, opacity .4s ease, background .4s ease;
}
.pb-hovercard-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 6px; color: #fff; }
.pb-hovercard-text  { font-size: .95rem; line-height: 1.5; margin: 0 0 12px; opacity: .95; }
.pb-hovercard-link  { display: inline-block; font-weight: 600; color: #fff; text-decoration: none; border-bottom: 2px solid currentColor; }

/* reveal — titre visible, texte + lien glissent au survol */
.pb-hovercard--reveal .pb-hovercard-text,
.pb-hovercard--reveal .pb-hovercard-link { opacity: 0; transform: translateY(12px); transition: opacity .35s ease, transform .35s ease; }
.pb-hovercard--reveal:hover .pb-hovercard-text,
.pb-hovercard--reveal:hover .pb-hovercard-link { opacity: 1; transform: none; }
.pb-hovercard--reveal:hover .pb-hovercard-body { background: var(--pbhc-overlay, rgba(11,25,41,.88)); }

/* fade — voile plein + contenu apparaissent */
.pb-hovercard--fade .pb-hovercard-body {
    inset: 0; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0;
    background: var(--pbhc-overlay, rgba(11,25,41,.88));
}
.pb-hovercard--fade:hover .pb-hovercard-body { opacity: 1; }

/* zoom — l'image zoome, le contenu reste visible */
.pb-hovercard--zoom:hover .pb-hovercard-img { transform: scale(1.08); }

/* flip — la carte se retourne : image devant, contenu derrière */
.pb-hovercard--flip { transform-style: preserve-3d; overflow: visible; background: transparent; }
.pb-hovercard--flip:hover { transform: rotateY(180deg); }
.pb-hovercard--flip .pb-hovercard-img { backface-visibility: hidden; }
.pb-hovercard--flip .pb-hovercard-body {
    inset: 0; transform: rotateY(180deg); backface-visibility: hidden;
    display: flex; flex-direction: column; justify-content: center;
    background: var(--pbhc-overlay, #0B1929); border-radius: inherit;
}

/* Tactile / sans survol : tout visible (le survol n'existe pas) */
@media (hover: none) {
    .pb-hovercard--reveal .pb-hovercard-text, .pb-hovercard--reveal .pb-hovercard-link { opacity: 1; transform: none; }
    .pb-hovercard--fade .pb-hovercard-body { opacity: 1; }
    .pb-hovercard--flip:hover { transform: none; }
    .pb-hovercard--flip .pb-hovercard-body { transform: none; position: absolute; inset: auto 0 0 0; justify-content: flex-end; background: linear-gradient(to top, var(--pbhc-overlay, rgba(11,25,41,.88)) 40%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .pb-hovercard, .pb-hovercard * { transition: none !important; }
}