/* =============================================================================
   Nuvia — Refonte landing (Epic 4 / meta 27.6-27.8)
   Surcharge propre chargée APRÈS main.purge.css + theme-thirteen.purge.css.
   On n'édite pas les CSS minifiés du thème : tout l'override marque vit ici.

   Direction (audit 2026-06-13) :
     - Violet #5A189A (marque) + crème #F6F4F0 (fond clair) + vert clinique
       sémantique #0F8465 (coches / "inclus" / économies — JAMAIS déco).
     - Casser VARIANCE 1 (tout centré) -> hero split + grilles asymétriques.
     - <hr> -> changements de fond crème/blanc.
     - Dégradés violet-sur-violet -> fonds pleins crème + violet franc.
     - Typo Lexend conservée.

   Stories :
     4-3 = layout & direction visuelle (palette, hero split, social proof réel)
     4-4 = polish & motion (boutons, cartes, focus, count-up, reduced-motion)
   ============================================================================= */

:root {
    /* Palette marque (source de vérité côté CSS custom) */
    --nuvia-violet: #5A189A;
    --nuvia-violet-dark: #48137b;
    --nuvia-violet-darker: #360e5c;
    --nuvia-cream: #F6F4F0;
    --nuvia-cream-deep: #efe9e1;
    --nuvia-green: #0F8465;        /* vert clinique sémantique uniquement */
    --nuvia-green-soft: #e7f3f0;
    --nuvia-violet-rgb: 90, 24, 154;

    /* Story 36.2 — Brancher --bs-primary sur la couleur de marque Nuvia.
       Tous les composants Bootstrap/UC-UI qui consomment --bs-primary
       héritent automatiquement du violet marque sans patch individuel. */
    --bs-primary: #5A189A;
    --bs-primary-rgb: 90, 24, 154;

    /* Tokens d'easing (audit §plan motion) — posés une seule fois */
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

/* -----------------------------------------------------------------------------
   1. Fonds de section : crème / blanc (remplacent les <hr> et les dégradés)
   -------------------------------------------------------------------------- */
.bg-nuvia-cream { background-color: var(--nuvia-cream) !important; }
.bg-nuvia-white { background-color: #fff !important; }
:where(.uc-dark) .bg-nuvia-cream { background-color: #1f2937 !important; }
:where(.uc-dark) .bg-nuvia-white { background-color: #111827 !important; }

/* Aplat violet franc (remplace bg-gradient-45n from-tertiary to-quaternary) */
.bg-nuvia-violet {
    background-color: var(--nuvia-violet) !important;
    background-image: none !important;
}
:where(.uc-dark) .bg-nuvia-violet { background-color: #1f2937 !important; }

/* Neutralise les dégradés violet-sur-violet délavés là où ils subsistent. */
.from-tertiary.to-quaternary,
.from-quaternary.to-tertiary {
    background-image: none !important;
}

/* -----------------------------------------------------------------------------
   2. Vert clinique sémantique (coches, "inclus", économies)
   -------------------------------------------------------------------------- */
.text-nuvia-green { color: var(--nuvia-green) !important; }
/* Le thème colorait .text-success en vert générique : on l'aligne sur le vert clinique. */
.text-success { color: var(--nuvia-green) !important; }
.nuvia-check-dot {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--nuvia-green);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nuvia-check-dot svg { width: 12px; height: 12px; }

/* -----------------------------------------------------------------------------
   3. Hero split (texte/valeur à gauche, form + compteur à droite)
   -------------------------------------------------------------------------- */
.hero-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
}
.hero-split__value { text-align: left; }
@media (min-width: 992px) {
    .hero-split {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 3.5rem;
    }
}

/* Carte formulaire du hero (above-the-fold) */
.hero-form-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px -28px rgba(var(--nuvia-violet-rgb), .45);
    border: 1px solid rgba(var(--nuvia-violet-rgb), .12);
}
:where(.uc-dark) .hero-form-card {
    background: #111827;
    border-color: rgba(255, 255, 255, .08);
}

/* Micro-réassurance (hors-ligne / hébergement CI) */
.micro-reassurance {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .85rem;
    font-size: .8125rem;
}
.micro-reassurance .dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; opacity: .4;
}

/* H1 discipliné : 2 lignes max, pas de <br> manuel, équilibrage typographique. */
.hero-h1 {
    line-height: 1.08;
    letter-spacing: -.01em;
    text-wrap: balance;
    max-width: 16ch;
}
@media (max-width: 991px) {
    .hero-h1 { max-width: none; }
    .hero-split__value { text-align: center; }
    .micro-reassurance { justify-content: center; }
}

/* -----------------------------------------------------------------------------
   4. Bande de réassurance réelle (souveraineté / traction / Mobile Money)
   -------------------------------------------------------------------------- */
.trust-band {
    border-block: 1px solid rgba(var(--nuvia-violet-rgb), .10);
}
.trust-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 500;
}
.trust-pill .ico {
    color: var(--nuvia-violet);
    display: inline-flex;
}
:where(.uc-dark) .trust-pill .ico { color: #c9a8ee; }

/* Puces Mobile Money — wordmarks on-brand, sobres (pas de logo factice). */
.momo-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    font-weight: 600;
    font-size: .8125rem;
    color: #1f2937;
    white-space: nowrap;
}
:where(.uc-dark) .momo-chip {
    background: #1f2937;
    border-color: rgba(255, 255, 255, .10);
    color: #e5e7eb;
}
.momo-chip .badge-dot {
    width: 18px; height: 18px; border-radius: 5px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: .625rem; font-weight: 800;
}
.momo-orange .badge-dot { background: #ff7900; }
.momo-mtn .badge-dot    { background: #ffcc00; color: #1f2937; }
.momo-wave .badge-dot   { background: #1dc1ec; }

/* -----------------------------------------------------------------------------
   5. Grilles asymétriques (features : 1 module héro large + alternance)
   -------------------------------------------------------------------------- */
.feature-card {
    background: #fff;
    border: 1px solid rgba(var(--nuvia-violet-rgb), .10);
    border-radius: 16px;
    height: 100%;
}
:where(.uc-dark) .feature-card {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .08);
}
.feature-card--lead {
    background: linear-gradient(135deg, var(--nuvia-violet) 0%, var(--nuvia-violet-dark) 100%);
    color: #fff;
    border: none;
}
.feature-card--lead .desc,
.feature-card--lead .title { color: #fff !important; }
.feature-icon {
    width: 52px; height: 52px;
    border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--nuvia-green-soft);
    color: var(--nuvia-green);
}
.feature-card--lead .feature-icon {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}
.feature-icon i { font-size: 1.6rem; line-height: 1; }

/* "Pourquoi Nuvia" — composition asymétrique : 1 carte large + 3 compactes. */
.why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 992px) {
    .why-grid {
        grid-template-columns: 1.4fr 1fr 1fr;
        grid-auto-rows: 1fr;
    }
    .why-grid > .why-lead { grid-row: span 2; }
}
.why-card {
    background: #fff;
    border: 1px solid rgba(var(--nuvia-violet-rgb), .08);
    border-radius: 16px;
    height: 100%;
}
:where(.uc-dark) .why-card {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .08);
}
.why-lead {
    background: var(--nuvia-cream);
    border-color: rgba(var(--nuvia-violet-rgb), .14);
}
:where(.uc-dark) .why-lead { background: #1f2937; }

/* -----------------------------------------------------------------------------
   6. Mockup navigateur (scaffold visuels — story 4-2)
   -------------------------------------------------------------------------- */
.browser-mockup {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 30px 60px -30px rgba(var(--nuvia-violet-rgb), .35);
}
:where(.uc-dark) .browser-mockup {
    background: #0b1220;
    border-color: rgba(255, 255, 255, .10);
}
.browser-mockup__bar {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem .85rem;
    background: var(--nuvia-cream);
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}
:where(.uc-dark) .browser-mockup__bar {
    background: #111827;
    border-bottom-color: rgba(255, 255, 255, .08);
}
.browser-mockup__dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: rgba(15, 23, 42, .18);
}
.browser-mockup__url {
    margin-inline-start: .5rem;
    font-size: .7rem;
    color: rgba(15, 23, 42, .5);
    background: #fff;
    border-radius: 6px;
    padding: .15rem .6rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
:where(.uc-dark) .browser-mockup__url {
    color: rgba(255, 255, 255, .5);
    background: #0b1220;
}
.browser-mockup__body {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(160deg, var(--nuvia-cream) 0%, #fff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
:where(.uc-dark) .browser-mockup__body {
    background: linear-gradient(160deg, #111827 0%, #0b1220 100%);
}
.browser-mockup__body img,
.browser-mockup__body video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* -----------------------------------------------------------------------------
   Hero — vidéo démo vs poster fixe (story 4-2).
   Par défaut : la vidéo est jouée (autoplay/muted/loop), l'<img> poster est masquée.
   prefers-reduced-motion (CSS) OU .reduced-motion (JS, posé très tôt dans <head>) :
   on masque la vidéo et on affiche l'image fixe → aucun autoplay subi.
   -------------------------------------------------------------------------- */
.browser-mockup__body img.hero-demo-poster { display: none; }
.browser-mockup__body video.hero-demo-video { display: block; }

@media (prefers-reduced-motion: reduce) {
    .browser-mockup__body video.hero-demo-video { display: none; }
    .browser-mockup__body img.hero-demo-poster { display: block; }
}
.reduced-motion .browser-mockup__body video.hero-demo-video { display: none; }
.reduced-motion .browser-mockup__body img.hero-demo-poster { display: block; }

.browser-mockup__placeholder {
    text-align: center;
    color: rgba(var(--nuvia-violet-rgb), .55);
    padding: 2rem;
}
.browser-mockup__placeholder i { font-size: 2.6rem; opacity: .5; }

/* =============================================================================
   POLISH & MOTION (story 4-4 / meta 27.7) — anime.js déjà présent, zéro nouvelle lib
   ============================================================================= */

/* -----------------------------------------------------------------------------
   7. Boutons : transition douce + press-scale
   (le thème pose `.btn{transition:none}` dans main.purge.css → on l'écrase ici,
   chargé après, donc on gagne la cascade)
   -------------------------------------------------------------------------- */
.btn {
    transition: background-color .18s var(--ease-out),
                border-color .18s var(--ease-out),
                color .18s var(--ease-out),
                box-shadow .18s var(--ease-out),
                transform .12s var(--ease-out) !important;
    will-change: transform;
}
.btn:active { transform: scale(.97); }
/* CTA principaux : libellé court, jamais cassé sur 2 lignes. */
.hero-split__value .btn,
.hero-form-card .btn,
#cta .btn { white-space: nowrap; }

/* -----------------------------------------------------------------------------
   8. Cartes : hover-lift + ombre teintée violet — GATED (souris fine uniquement,
   pas d'effet « collant » sur le public mobile CI)
   -------------------------------------------------------------------------- */
.feature-card,
.why-card,
.hero-form-card,
.browser-mockup,
.momo-chip {
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .feature-card:hover,
    .why-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px -20px rgba(var(--nuvia-violet-rgb), .35);
    }
    /* la carte héro violette : ombre plus marquée, pas de bord clair parasite */
    .feature-card--lead:hover {
        box-shadow: 0 24px 50px -22px rgba(var(--nuvia-violet-rgb), .55);
    }
    .momo-chip:hover { transform: translateY(-2px); }
}

/* -----------------------------------------------------------------------------
   9. Inputs : focus violet + halo
   -------------------------------------------------------------------------- */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--nuvia-violet) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--nuvia-violet-rgb), .15) !important;
    outline: none;
    transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}

/* -----------------------------------------------------------------------------
   10. Barre de places : transition pilotée par JS (scroll-in 0 → target)
   -------------------------------------------------------------------------- */
.spots-bar {
    transition: width .7s var(--ease-out);
}

/* -----------------------------------------------------------------------------
   11. Garde globale prefers-reduced-motion (audit §accessibilité)
   Neutralise translate/scale (CSS + court-circuite data-anime via .reduced-motion
   posée par landing-motion.js) SANS cacher le contenu (LCP : hero visible par défaut).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .btn:active { transform: none; }
    .feature-card:hover,
    .why-card:hover,
    .momo-chip:hover { transform: none; box-shadow: none; }
    .spots-bar { transition: none; }
    /* Éléments animés par anime.js : on force l'état final visible (anti-flash/anti-LCP). */
    [data-anime] {
        opacity: 1 !important;
        transform: none !important;
    }
}
/* Idem quand le JS détecte reduced-motion et neutralise data-anime avant exécution. */
.reduced-motion [data-anime] {
    opacity: 1 !important;
    transform: none !important;
}