/* animations.css V2 - Trames et Transitions BD */

/* --- 1. CONFIGURATION GLOBALE --- */
/* On prépare les éléments à recevoir des effets */
.comic-box, .card, .btn-auto, .btn-action, .btn-tile, .admin-tile, .login-box button, .logout-btn {
    transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1); /* Mouvement fluide snappy */
    position: relative; /* Nécessaire pour le mouvement et la trame de points */
    overflow: hidden;   /* Pour que la trame ne dépasse pas des bords arrondis */
    z-index: 1;         /* S'assure que le texte reste au-dessus de la trame */
}

/* --- 2. EFFET TRAME DE POINTS NOIRS (HALFTONE) AU SURVOL --- */

/* Création de la couche de points cachée par défaut */
.comic-box::after, 
.card::after, 
.btn-auto::after, 
.btn-tile::after, 
.admin-tile::after,
.login-box button::after,
.logout-btn::after,
.btn-action::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Le motif de points noirs (radial gradient répété) */
    background-image: radial-gradient(circle, #000 20%, transparent 20%);
    background-size: 6px 6px; /* Taille et densité des points */
    opacity: 0; /* Invisible au départ */
    transition: opacity 0.2s ease;
    pointer-events: none; /* Permet de cliquer au travers */
    z-index: -1; /* Se place DERRIÈRE le texte de la carte */
}

/* Apparition de la trame au survol */
.comic-box:hover::after, 
.card:hover::after, 
.btn-auto:hover:not(.valide)::after, 
.btn-tile:hover::after, 
.admin-tile:hover::after,
.login-box button:hover::after,
.logout-btn:hover::after,
.btn-action:hover::after {
    opacity: 0.1; /* Apparaît légèrement (ajustez entre 0.05 et 0.2 selon vos goûts) */
}


/* --- 3. MOUVEMENTS HOVER & ACTIVE (Soulèvement / Enfoncement) --- */
/* (Même logique qu'avant, mais compatible avec la trame) */

/* Survol : ça monte + ombre grandit */
.comic-box:hover, .card:hover, .btn-auto:hover:not(.valide), .admin-tile:hover, .btn-tile:hover {
    transform: translate(-4px, -4px) !important;
    box-shadow: 12px 12px 0px black !important;
}
/* Petits boutons */
.btn-action:hover, .login-box button:hover, .logout-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px black !important;
}

/* Clic : ça descend + ombre écrasée */
.comic-box:active, .card:active, .btn-auto:active:not(.valide), .admin-tile:active, .btn-action:active, .btn-tile:active, .login-box button:active, .logout-btn:active {
    transform: translate(4px, 4px) !important;
    box-shadow: 0px 0px 0px black !important;
    transition: all 0.05s ease-out; /* Retour très rapide */
}


/* --- 4. NOUVELLE TRANSITION DE PAGE BD (PANEL SLIDE) --- */

/* Définition de l'animation "Coup de panneau BD" */
@keyframes comicPanelSlide {
    0% {
        opacity: 0;
        /* Arrive de la droite, très incliné (vitesse), très lumineux (flash) */
        transform: translateX(150%) skewX(-20deg);
        filter: brightness(2.5) contrast(1.5);
    }
    60% {
        /* Dépasse légèrement sa destination (effet élastique) */
        transform: translateX(-5%) skewX(5deg);
        filter: brightness(1.2);
    }
    100% {
        opacity: 1;
        /* Se pose à plat, luminosité normale */
        transform: translateX(0) skewX(0deg);
        filter: brightness(1) contrast(1);
    }
}

/* Application de la transition quand une section devient active */
.active-section {
    /* On applique la nouvelle animation aggressive */
    /* duration: 0.5s, timing: rebond puissant */
    animation: comicPanelSlide 0.5s cubic-bezier(0.15, 0.9, 0.3, 1.2) forwards !important;
    /* On s'assure que la nouvelle page passe au-dessus de l'ancienne pendant la transition */
    z-index: 100; 
    background-color: #fcf8e8; /* Important : fond opaque pour cacher celle du dessous */
}


/* --- 5. EFFETS DIVERS --- */
/* Focus sur les inputs */
input:focus, select:focus, .quill-editor:focus-within {
    transform: scale(1.01);
    border-color: #3498db !important;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.1);
    transition: 0.2s;
}