/* Entreview — animations et micro-interactions du site public.
   Lot motion-public (vague 2). Chargé uniquement par les pages marketing,
   après style.css et home.css afin de pouvoir les surcharger.

   Règles du dépôt respectées : palette corail inchangée, aucune dépendance
   externe, durées 150-400 ms, courbe cubic-bezier(.2,.8,.2,1), transform et
   opacity uniquement, aucune animation infinie. Les révélations ne masquent
   jamais le contenu sans JavaScript : elles sont conditionnées à la classe
   `motion-ready` posée par motion-public.js et à l'attribut `data-motion`
   ajouté par ce même script. */

.motion-ready {
    --motion-ease: cubic-bezier(.2, .8, .2, 1);
    --motion-reveal-duration: .38s;
}

/* ===== Révélation au défilement et entrée du hero ===== */
.motion-ready [data-motion='reveal'] {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity var(--motion-reveal-duration) var(--motion-ease) var(--motion-delay, 0ms),
        transform var(--motion-reveal-duration) var(--motion-ease) var(--motion-delay, 0ms);
}

.motion-ready [data-motion='reveal'].is-revealed {
    opacity: 1;
    transform: none;
}

/* Les éléments positionnés en absolu du hero gardent leur calage : le décalage
   d'entrée passe par la propriété `translate`, ce qui laisse `transform` libre
   pour le parallaxe. */
.motion-ready [data-motion='reveal'][data-motion-axis='translate'] {
    transform: none;
    translate: 0 12px;
    transition:
        opacity var(--motion-reveal-duration) var(--motion-ease) var(--motion-delay, 0ms),
        translate var(--motion-reveal-duration) var(--motion-ease) var(--motion-delay, 0ms);
}

.motion-ready [data-motion='reveal'][data-motion-axis='translate'].is-revealed {
    translate: none;
}

/* ===== Parallaxe très léger du téléphone du hero (desktop uniquement) ===== */
.journey-hero-product-card .journey-phone-device {
    transform: translate3d(0, var(--motion-parallax, 0px), 0);
}

/* ===== Barre de navigation : ombre et fond au défilement ===== */
.nav {
    transition: background-color .25s var(--motion-ease), box-shadow .25s var(--motion-ease), border-color .25s var(--motion-ease);
}

.nav.scrolled,
.home-page .nav.scrolled {
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 2px 16px rgba(33, 32, 28, .09);
}

/* ===== Soulignement animé des liens de navigation ===== */
.nav-links > a,
.nav-dropdown-trigger {
    position: relative;
}

.nav-links > a::after,
.nav-dropdown-trigger::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary, #FF6B5C);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .22s var(--motion-ease);
}

.nav-links > a:hover::after,
.nav-links > a:focus-visible::after,
.nav-links > a.active::after,
.nav-dropdown-trigger:hover::after,
.nav-dropdown-trigger:focus-visible::after,
.nav-dropdown.open .nav-dropdown-trigger::after {
    transform: scaleX(1);
}

/* ===== CTA : même bouton corail sur toutes les pages publiques ===== */
/* Le noir reste le bouton primaire de l'application ; ici seule la barre de
   navigation publique et son menu mobile sont harmonisés avec l'accueil. */
.nav .btn-primary,
.mobile-menu .btn-primary,
.mobile-menu a.btn-primary {
    background: var(--primary, #FF6B5C);
    color: #fff;
}

.nav .btn-primary:hover,
.mobile-menu .btn-primary:hover {
    background: var(--primary-hover, #E55A47);
}

/* CTA compact permanent sur mobile, à gauche du menu burger. */
.nav-demo-compact {
    display: none;
}

@media (max-width: 768px) {
    .nav-demo-compact {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        margin-left: auto;
        margin-right: 8px;
        padding: 9px 16px;
        font-size: .85rem;
    }
}

/* Flèche qui glisse dans les boutons et les liens fléchés. */
.btn-primary svg,
.btn-accent svg,
.btn-outline svg,
.btn-white svg,
.journey-text-link i,
.motion-arrow i,
.motion-arrow svg {
    transition: transform .2s var(--motion-ease);
}

.btn-primary:hover svg,
.btn-accent:hover svg,
.btn-outline:hover svg,
.btn-white:hover svg,
.journey-text-link:hover i,
.motion-arrow:hover i,
.motion-arrow:hover svg {
    transform: translateX(4px);
}

/* ===== Cartes tarifs : élévation au survol ===== */
.journey-price-card {
    transition: transform .25s var(--motion-ease), box-shadow .25s var(--motion-ease);
}

.journey-price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(33, 32, 28, .1);
}

.journey-role-card,
.journey-insight-card {
    transition: transform .25s var(--motion-ease), box-shadow .25s var(--motion-ease);
}

.journey-role-card:hover,
.journey-insight-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(33, 32, 28, .08);
}

/* ===== FAQ de l'accueil : chevron corail et ouverture animée ===== */
.journey-faq-list details {
    display: grid;
    grid-template-rows: auto 0fr;
    transition: grid-template-rows .3s var(--motion-ease);
}

.journey-faq-list details[open] {
    grid-template-rows: auto 1fr;
}

.journey-faq-list details.is-closing {
    grid-template-rows: auto 0fr;
}

.journey-faq-list details > :not(summary) {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .26s var(--motion-ease), transform .26s var(--motion-ease);
}

.journey-faq-list details[open] > :not(summary) {
    opacity: 1;
    transform: none;
}

.journey-faq-list details.is-closing > :not(summary) {
    opacity: 0;
    transform: translateY(-4px);
}

.journey-faq-list summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
}

.journey-faq-list summary::-webkit-details-marker {
    display: none;
}

.journey-faq-list summary::after {
    content: '';
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    border-right: 2px solid var(--primary-text, #C64237);
    border-bottom: 2px solid var(--primary-text, #C64237);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .25s var(--motion-ease);
}

.journey-faq-list details[open] > summary::after {
    transform: rotate(225deg) translateY(-2px);
}

.journey-faq-list details.is-closing > summary::after {
    transform: rotate(45deg) translateY(-2px);
}

/* ===== Neutralisation complète en mouvement réduit ===== */
@media (prefers-reduced-motion: reduce) {
    .motion-ready [data-motion='reveal'],
    .motion-ready [data-motion='reveal'][data-motion-axis='translate'] {
        opacity: 1;
        transform: none;
        translate: none;
        transition: none;
    }

    .journey-hero-product-card .journey-phone-device {
        transform: none;
    }

    .nav,
    .nav-links > a::after,
    .nav-dropdown-trigger::after,
    .btn-primary svg,
    .btn-accent svg,
    .btn-outline svg,
    .btn-white svg,
    .journey-text-link i,
    .journey-price-card,
    .journey-role-card,
    .journey-insight-card,
    .journey-faq-list details,
    .journey-faq-list details > :not(summary),
    .journey-faq-list summary::after {
        transition: none;
    }

    .journey-price-card:hover,
    .journey-role-card:hover,
    .journey-insight-card:hover {
        transform: none;
    }

    .btn-primary:hover svg,
    .btn-accent:hover svg,
    .btn-outline:hover svg,
    .btn-white:hover svg,
    .journey-text-link:hover i {
        transform: none;
    }
}