/**
 * Scroll Progressif - Styles pour le bouton "Voir plus"
 * Animation de révélation des cartes cachées
 * 
 * @version 1.0
 * @date 2026-01-22
 */

/* ============================================
   CARTES CACHÉES / RÉVÉLÉES
   ============================================ */

/* État caché initial */
.recipe-card-hidden {
    display: none !important;
}

/* Révélation : fade-in pur (opacity uniquement).
   On avait essayé un pattern opacity + scale + translateY qui provoquait
   un pop visuel perçu comme un clignotement. Ici seule l'opacité anime,
   donc le rendu est doux sans saut de layout. */
.recipe-card-reveal {
    display: flex !important;
    animation: recipeFadeIn 0.5s ease-out forwards;
}

@keyframes recipeFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ============================================
   CONTENEUR BOUTON "VOIR PLUS"
   ============================================ */

.recipes-show-more-container {
    display: flex;
    justify-content: center;
    margin-top: 25px;
    margin-bottom: 40px;
}

/* Remontée spécifique au bouton "Voir plus de recettes" uniquement.
   Le bouton "Voir plus de catégories" (#categoriesShowMore) reuse la
   même classe `.recipes-show-more-container` pour hériter du style
   .btn-show-more mais ne doit PAS être remonté. */
#latestRecipesShowMore {
    position: relative;
    bottom: 20px;
}

/* ============================================
   BOUTON "VOIR PLUS"
   ============================================ */

.btn-show-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-color, #FF6B6B);
    background: transparent;
    border: 2px solid var(--primary-color, #FF6B6B);
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.1);
}

.btn-show-more:hover {
    background: var(--primary-color, #FF6B6B);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.btn-show-more:active {
    transform: translateY(0);
}

/* Compteur */
.btn-show-more .btn-count {
    font-weight: 500;
    opacity: 0.8;
}

/* Icône
   L'icône elle-même est swappée côté JS (fa-chevron-down ↔ fa-chevron-up)
   selon l'état du bouton. Pas de rotate CSS : le swap JS + CSS combinés
   s'annulaient, faisant pointer la flèche dans le mauvais sens. */
.btn-show-more .btn-icon {
    font-size: 0.8rem;
    transition: transform 0.25s ease;
}

.btn-show-more:hover .btn-icon {
    transform: translateY(2px);
}

.btn-show-more[data-expanded="true"]:hover .btn-icon {
    transform: translateY(-2px);
}

/* ============================================
   DARK MODE
   ============================================ */

.dark-mode .btn-show-more {
    color: #FF8A8A;
    border-color: #FF8A8A;
}

.dark-mode .btn-show-more:hover {
    background: #FF8A8A;
    color: #1a1a1a;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .recipes-show-more-container {
        margin-top: 20px;
        margin-bottom: 30px;
    }
    
    .btn-show-more {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .btn-show-more {
        padding: 10px 18px;
        font-size: 0.85rem;
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   GRILLE PROGRESSIVE - Ajustements
   ============================================ */

.recipes-grid-progressive {
    /* Hérite des styles de .recipes-grid */
}

/* Animation douce pour le redimensionnement de la grille */
.recipes-grid-progressive .recipe-card {
    transition: opacity 0.3s ease, transform 0.3s ease;
}