/* ==========================================================================
   COASTAL PRESTIGE - Animations Premium
   Inclure APRES navigation-modern.css
   ========================================================================== */

/* ==========================================================================
   Variables d'animation
   ========================================================================== */

:root {
    --cp-anim-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --cp-anim-ease-out: cubic-bezier(0.0, 0, 0.2, 1);
    --cp-anim-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   1. UNDERLINE HOVER - Du centre vers les bords
   ========================================================================== */

.nav-menu-link::after {
    transition: width 0.5s var(--cp-anim-ease),
                left 0.5s var(--cp-anim-ease);
}

/* ==========================================================================
   2. CHEVRON ROTATION
   ========================================================================== */

.nav-chevron {
    transition: transform 0.3s var(--cp-anim-ease);
}

.nav-menu-item.is-active .nav-chevron {
    transform: rotate(180deg);
}

/* ==========================================================================
   3. MEGA MENU REVEAL - translateY + opacity
   ========================================================================== */

.nav-mega-menu {
    transition: opacity 0.45s var(--cp-anim-ease),
                visibility 0.45s var(--cp-anim-ease),
                transform 0.45s var(--cp-anim-ease);
}

/* ==========================================================================
   4. STAGGER ENFANTS - Cascade du haut
   ========================================================================== */

.nav-mega-menu .mega-menu-header,
.nav-mega-menu .mega-rubriques-grid,
.nav-mega-menu .mega-articles-cards,
.nav-mega-menu .mega-articles-text {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s var(--cp-anim-ease),
                transform 0.35s var(--cp-anim-ease);
}

.nav-mega-menu.is-open .mega-menu-header {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0ms;
}

.nav-mega-menu.is-open .mega-rubriques-grid {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 40ms;
}

.nav-mega-menu.is-open .mega-articles-cards {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 80ms;
}

.nav-mega-menu.is-open .mega-articles-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 80ms;
}

/* Stagger individuel pour les boutons sous-rubriques */
.mega-rubrique-btn {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s var(--cp-anim-ease),
                transform 0.3s var(--cp-anim-ease),
                background 0.2s var(--cp-anim-ease),
                border-color 0.2s var(--cp-anim-ease),
                color 0.2s var(--cp-anim-ease);
}

.nav-mega-menu.is-open .mega-rubrique-btn:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 60ms; }
.nav-mega-menu.is-open .mega-rubrique-btn:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 100ms; }
.nav-mega-menu.is-open .mega-rubrique-btn:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 140ms; }
.nav-mega-menu.is-open .mega-rubrique-btn:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 180ms; }
.nav-mega-menu.is-open .mega-rubrique-btn:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 220ms; }
.nav-mega-menu.is-open .mega-rubrique-btn:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 260ms; }
.nav-mega-menu.is-open .mega-rubrique-btn:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
.nav-mega-menu.is-open .mega-rubrique-btn:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 340ms; }

/* Stagger pour les article cards */
.article-card {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s var(--cp-anim-ease),
                transform 0.35s var(--cp-anim-ease);
}

.nav-mega-menu.is-open .article-card:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 100ms; }
.nav-mega-menu.is-open .article-card:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 140ms; }
.nav-mega-menu.is-open .article-card:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 180ms; }
.nav-mega-menu.is-open .article-card:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 220ms; }
.nav-mega-menu.is-open .article-card:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 260ms; }
.nav-mega-menu.is-open .article-card:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
.nav-mega-menu.is-open .article-card:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 340ms; }
.nav-mega-menu.is-open .article-card:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 380ms; }

/* Stagger pour article text items */
.article-text-item {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s var(--cp-anim-ease),
                transform 0.3s var(--cp-anim-ease),
                padding-left 0.2s var(--cp-anim-ease);
}

.nav-mega-menu.is-open .article-text-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 100ms; }
.nav-mega-menu.is-open .article-text-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 140ms; }
.nav-mega-menu.is-open .article-text-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 180ms; }
.nav-mega-menu.is-open .article-text-item:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 220ms; }
.nav-mega-menu.is-open .article-text-item:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 260ms; }
.nav-mega-menu.is-open .article-text-item:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
.nav-mega-menu.is-open .article-text-item:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 340ms; }
.nav-mega-menu.is-open .article-text-item:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 380ms; }
.nav-mega-menu.is-open .article-text-item:nth-child(9) { opacity: 1; transform: translateY(0); transition-delay: 420ms; }
.nav-mega-menu.is-open .article-text-item:nth-child(10) { opacity: 1; transform: translateY(0); transition-delay: 460ms; }
.nav-mega-menu.is-open .article-text-item:nth-child(11) { opacity: 1; transform: translateY(0); transition-delay: 500ms; }
.nav-mega-menu.is-open .article-text-item:nth-child(12) { opacity: 1; transform: translateY(0); transition-delay: 540ms; }

/* ==========================================================================
   5. IMAGE ZOOM - scale(1.06) sur hover
   ========================================================================== */

.article-card-img {
    transition: transform 0.7s var(--cp-anim-ease);
}

.article-card:hover .article-card-img {
    transform: scale(1.06);
}

/* ==========================================================================
   6. OVERLAY DARKEN - Gradient plus sombre au hover
   ========================================================================== */

.article-card-overlay {
    transition: background 0.5s var(--cp-anim-ease);
}

/* ==========================================================================
   7. CARD TITLE LINE - Trait blanc 4rem
   ========================================================================== */

.article-card-title::after {
    transition: width 0.5s var(--cp-anim-ease);
}

.article-card:hover .article-card-title::after {
    width: 4rem;
}

/* ==========================================================================
   8. TEXT ITEM ARROW - Trait navy 2.4rem a gauche
   ========================================================================== */

.article-text-item::before {
    transition: width 0.3s var(--cp-anim-ease);
}

.article-text-item:hover::before {
    width: 3px;
}

/* ==========================================================================
   9. ARROW REVEAL - sous-rubrique fleche
   ========================================================================== */

.mega-rubrique-arrow {
    transition: opacity 0.3s var(--cp-anim-ease),
                transform 0.3s var(--cp-anim-ease);
}

.mega-rubrique-btn:hover .mega-rubrique-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   10. BURGER → X - Rotation + translation
   ========================================================================== */

.burger-line {
    transition: transform 0.35s var(--cp-anim-ease),
                opacity 0.35s var(--cp-anim-ease);
}

/* ==========================================================================
   11. MOBILE SLIDE - translateX(100%) → 0
   ========================================================================== */

.mobile-menu-panel {
    transition: transform 0.5s var(--cp-anim-ease);
}

.mobile-menu-overlay {
    transition: opacity 0.5s var(--cp-anim-ease);
}

/* Stagger sections mobiles */
.mobile-menu-section {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.35s var(--cp-anim-ease),
                transform 0.35s var(--cp-anim-ease);
}

.nav-mobile-menu.is-open .mobile-menu-section:nth-child(1) { opacity: 1; transform: translateX(0); transition-delay: 0.1s; }
.nav-mobile-menu.is-open .mobile-menu-section:nth-child(2) { opacity: 1; transform: translateX(0); transition-delay: 0.15s; }
.nav-mobile-menu.is-open .mobile-menu-section:nth-child(3) { opacity: 1; transform: translateX(0); transition-delay: 0.2s; }
.nav-mobile-menu.is-open .mobile-menu-section:nth-child(4) { opacity: 1; transform: translateX(0); transition-delay: 0.25s; }
.nav-mobile-menu.is-open .mobile-menu-section:nth-child(5) { opacity: 1; transform: translateX(0); transition-delay: 0.3s; }
.nav-mobile-menu.is-open .mobile-menu-section:nth-child(6) { opacity: 1; transform: translateX(0); transition-delay: 0.35s; }
.nav-mobile-menu.is-open .mobile-menu-section:nth-child(7) { opacity: 1; transform: translateX(0); transition-delay: 0.4s; }

/* Mobile CTA stagger */
.mobile-menu-cta {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s var(--cp-anim-ease),
                transform 0.4s var(--cp-anim-ease);
}

.nav-mobile-menu.is-open .mobile-menu-cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.45s;
}

/* ==========================================================================
   12. NAV COMPRESS - Hauteur reduite au scroll
   ========================================================================== */

.nav-container {
    transition: height 0.35s var(--cp-anim-ease);
}

.logo-img {
    transition: height 0.35s var(--cp-anim-ease);
}

/* ==========================================================================
   13. NAV HIDE/SHOW - translateY(-100%) au scroll bas
   ========================================================================== */

.nav-main {
    transition: transform 0.35s var(--cp-anim-ease),
                box-shadow 0.35s var(--cp-anim-ease),
                border-color 0.35s var(--cp-anim-ease);
}

/* ==========================================================================
   14. CTA PULSE - box-shadow navy pulsante
   ========================================================================== */

@keyframes ctaPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(49, 40, 42, 0.4);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(49, 40, 42, 0);
    }
}

.nav-btn-primary {
    animation: ctaPulse 3s ease-in-out infinite;
}

.nav-btn-primary:hover {
    animation: none;
}

/* ==========================================================================
   LOGO ENTRANCE
   ========================================================================== */

@keyframes logoEntrance {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo-img {
    animation: logoEntrance 0.6s var(--cp-anim-ease-out) 0.1s backwards;
}

/* ==========================================================================
   NAV LINKS ENTRANCE
   ========================================================================== */

@keyframes navLinkEntrance {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-menu-item:nth-child(1) .nav-menu-link { animation: navLinkEntrance 0.4s var(--cp-anim-ease-out) 0.15s backwards; }
.nav-menu-item:nth-child(2) .nav-menu-link { animation: navLinkEntrance 0.4s var(--cp-anim-ease-out) 0.2s backwards; }
.nav-menu-item:nth-child(3) .nav-menu-link { animation: navLinkEntrance 0.4s var(--cp-anim-ease-out) 0.25s backwards; }
.nav-menu-item:nth-child(4) .nav-menu-link { animation: navLinkEntrance 0.4s var(--cp-anim-ease-out) 0.3s backwards; }
.nav-menu-item:nth-child(5) .nav-menu-link { animation: navLinkEntrance 0.4s var(--cp-anim-ease-out) 0.35s backwards; }
.nav-menu-item:nth-child(6) .nav-menu-link { animation: navLinkEntrance 0.4s var(--cp-anim-ease-out) 0.4s backwards; }
.nav-menu-item:nth-child(7) .nav-menu-link { animation: navLinkEntrance 0.4s var(--cp-anim-ease-out) 0.45s backwards; }
.nav-menu-item:nth-child(8) .nav-menu-link { animation: navLinkEntrance 0.4s var(--cp-anim-ease-out) 0.5s backwards; }

/* ==========================================================================
   ICONS HOVER
   ========================================================================== */

.nav-icon {
    transition: transform 0.3s var(--cp-anim-ease);
}

.nav-action-phone:hover .nav-icon,
.nav-action-social:hover .nav-icon {
    transform: scale(1.08);
}

/* ==========================================================================
   FOCUS VISIBLE - Glow navy
   ========================================================================== */

.nav-menu-link:focus-visible,
.nav-btn:focus-visible,
.mega-rubrique-btn:focus-visible,
.article-card:focus-visible,
.article-text-item:focus-visible {
    outline: 2px solid var(--cp-navy);
    outline-offset: 3px;
}

/* ==========================================================================
   PREFERS-REDUCED-MOTION - Desactiver tout
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .nav-btn-primary {
        animation: none !important;
    }

    .nav-mega-menu .mega-menu-header,
    .nav-mega-menu .mega-rubriques-grid,
    .nav-mega-menu .mega-articles-cards,
    .nav-mega-menu .mega-articles-text,
    .mega-rubrique-btn,
    .article-card,
    .article-text-item,
    .mobile-menu-section,
    .mobile-menu-cta {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
    * {
        animation: none !important;
        transition: none !important;
    }
}