/* =========================================
    EFFET HOLOGRAPHIQUE (POKEMON CARD)
    Fonctionne dans l'éditeur et sur le site
    ========================================= */

/* La base de la carte */
.holo-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem; /* rounded-xl */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d; /* Permet la 3D */
    cursor: pointer;
}

/* Au survol de la souris */
.holo-card:hover {
    /* On lève la carte, on grossit un peu et on pivote */
    transform: translateY(-5px) scale(1.02) rotateX(2deg) rotateY(2deg);
    
    /* Ombre portée + Lueur interne */
    box-shadow: 
        0 20px 30px -10px rgba(0,0,0,0.3), /* Ombre sol */
        0 0 15px rgba(255, 255, 255, 0.5); /* Lueur blanche */
    z-index: 10;
}

/* Le reflet brillant (Shine effect) */
.holo-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Départ hors cadre à gauche */
    width: 50%;
    height: 100%;
    
    /* Dégradé transparent -> blanc -> transparent */
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    
    transform: skewX(-25deg); /* Inclinaison du reflet */
    transition: none;
    pointer-events: none; /* Le clic passe à travers */
}

/* Animation du reflet au survol */
.holo-card:hover::after {
    animation: shine 1.5s infinite; /* Boucle infinie */
}

@keyframes shine {
    0% { left: -100%; }
    100% { left: 200%; }
}

    /* Quelques ajustements pour le contenu riche (Safe HTML) */
.prose p { margin-bottom: 1.5rem; }
.prose blockquote { border-left: 4px solid #ef4444; padding-left: 1.5rem; font-style: italic; color: #475569; }

/* Support pour les images centrées de l'éditeur */
.prose figure.image { display: flex; flex-direction: column; align-items: center; margin: 2rem 0; }
.prose figure.image img { margin-bottom: 0.5rem; }
.prose figure.image figcaption { color: #94a3b8; font-size: 0.875rem; text-align: center; }

.ck-content {
    min-height: 600px;
    padding: 3rem !important;
    font-family: 'Poppins', sans-serif;
}
.ck-content .grid { display: grid; }
.ck-content .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.ck-content .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ck-content .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ck-content .gap-2 { gap: 0.5rem; } .ck-content .gap-4 { gap: 1rem; } .ck-content .gap-6 { gap: 1.5rem; } .ck-content .gap-8 { gap: 2rem; } .ck-content .gap-12 { gap: 3rem; }
.ck-content .space-y-4 > * + * { margin-top: 1rem; }
.ck-content > * { position: relative; transition: all 0.2s ease; border: 1px solid transparent; }
.ck-content > *:hover { background-color: #f8fafc; outline: 2px dashed #e2e8f0; border-radius: 8px; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.holo-card {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
}
.holo-card:hover {
    transform: translateY(-5px) scale(1.02) rotateX(2deg) rotateY(2deg);
    box-shadow: 0 20px 30px -10px rgba(0,0,0,0.3), 0 0 15px rgba(255, 255, 255, 0.5);
}
.holo-card::after {
    content: "";
    position: absolute;
    top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: none;
    pointer-events: none;
}
.holo-card:hover::after {
    animation: shine 1.5s infinite;
}
@keyframes shine {
    0% { left: -100%; }
    100% { left: 200%; }
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}