/* 📑 1. DESIGN TOKENS (Source Unique de Vérité) */
    :root {
      --color-navy:        #163B66;
      --color-navy-deep:   #0D2644;
      --color-navy-mid:    #1E4F87;
      --color-navy-soft:   #2A6BB0;
      --color-navy-tint:   #EAF1FA;
      --color-orange:      #FF7A00;
      --color-orange-deep: #CC6200;
      --color-orange-mid:  #FF9933;
      --color-orange-tint: #FFF3E6;
      --color-off-white:   #F8FAFC;
      --color-white:       #FFFFFF;
      --color-gray-soft:   #64748B;
      --color-gray-light:  #CBD5E1;
      --color-gray-xlight: #E2E8F0;
      --color-success:     #16A34A;
      --color-success-tint:#DCFCE7;
      --border-default:    #E2E8F0;
      --space-1:  4px;
      --space-2:  8px;
      --space-3:  12px;
      --space-4:  16px;
      --space-5:  20px;
      --space-6:  24px;
      --space-12: 48px;
      --radius-sm:  6px;
      --radius-md:  10px;
      --radius-full: 9999px;
      --font-brand: 'Sora', sans-serif;
      --font-ui:    'Poppins', sans-serif;
      --dur-fast:   150ms;
      --dur-slow:   400ms;
      --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
      
      /* Semantic Light Tokens */
      --bg-page:           #F1F5F9;
      --bg-surface:        #FFFFFF;
      --text-primary:      #0D2644;
      --text-muted:        #64748B;
    }

    /* 📑 2. RESET BASE HTML */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      font-family: var(--font-ui);
      background: var(--bg-page);
      color: var(--text-primary);
      line-height: 1.6;
      min-height: 100vh;
    }
    img { max-width: 100%; display: block; }
    a { text-decoration: none; }

    /* 📑 3. STYLES COMMUNS : BOUTONS */
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      gap: var(--space-2); font-family: var(--font-ui); font-weight: 600;
      border: none; cursor: pointer; border-radius: var(--radius-md);
      transition: all var(--dur-slow) var(--ease-out); position: relative;
    }

    .btn-sm { font-size: 12px; }
    .btn-primary { background: var(--color-orange); color: #fff; }
    .btn-primary:hover { background: var(--color-orange-deep); transform: translateY(-1px); }
    .btn-ghost { background: transparent; color: var(--color-navy); border: 1px solid var(--border-default); }
    .btn-ghost:hover { background: var(--color-navy-tint); }

    /* 📑 4. STYLES COMPOSANT : NAVBAR SUPÉRIEURE */
    .home-navbar {
      position: sticky; top: 0; z-index: 1000;
      background: var(--bg-surface); border-bottom: 1px solid var(--border-default);
      padding: var(--space-3) var(--space-4);
      display: flex; align-items: center; justify-content: space-between;
    }
    .navbar-brand { display: flex; align-items: center; gap: var(--space-2); }
    .brand-logo-wrapper { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
    .brand-logo-img { width: 100%; height: 100%; object-fit: contain; }
    .brand-name-text { font-family: var(--font-brand); font-weight: 700; font-size: 16px; color: var(--text-primary); }
    .brand-name-text span { color: var(--color-orange); }
    .brand-dot {
      width: 8px; height: 8px; background: var(--color-orange); border-radius: 50%;
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } }
    .navbar-actions { display: flex; align-items: center; gap: var(--space-2); }

    /* Mobile-First : Masquage des textes longs sur smartphone */
    .btn-login-nav .btn-text, .btn-cta-nav .btn-text { display: none; }
    .btn-login-nav, .btn-cta-nav { padding: var(--space-2); min-width: 40px; height: 40px; }

    /* 📑 5. STYLES COMPOSANT : FOOTER APPLICATIF */
    .app-footer-wrapper { background: var(--bg-surface); border-top: 1px solid var(--border-default); margin-top: var(--space-12); width: 100%; }
    .mobile-sticky-nav {
        position: fixed; bottom: 0; left: 0; right: 0; height: 64px;
        background: var(--bg-surface); border-top: 1px solid var(--border-default);
        display: flex; justify-content: space-around; align-items: center; z-index: 999;
    }
    .mobile-nav-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
        background: none; border: none; color: var(--color-gray-soft); cursor: pointer;
        font-family: var(--font-ui); font-size: 11px; font-weight: 500; width: 72px; height: 100%;
    }
    .mobile-nav-item .material-icons-round, .mobile-nav-item svg { font-size: 22px; }
    .mobile-nav-item:hover, .mobile-nav-item.active { color: var(--color-orange); }
    .nav-icon-badge-wrapper { position: relative; display: inline-flex; }
    .nav-icon-badge-wrapper .icon-badge {
        position: absolute; top: -4px; right: -8px; background: var(--color-orange); color: var(--color-white);
        font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: var(--radius-full);
        display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid var(--bg-surface);
    }
    .mobile-nav-item.whatsapp-direct:hover { color: #25D366; }
    .main-footer-content { padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; gap: var(--space-6); max-width: 1100px; margin: 0 auto; }
    .footer-logo { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); }
    .footer-logo-img { height: 20px; width: auto; }
    .footer-brand-name { font-family: var(--font-brand); font-weight: 700; font-size: 15px; color: var(--text-primary); }
    .footer-brand-name span { color: var(--color-orange); }
    .footer-tagline { font-family: var(--font-ui); font-size: 12px; color: var(--text-muted); }
    .footer-meta-links { display: flex; flex-direction: column; gap: var(--space-3); border-top: 1px solid var(--border-default); padding-top: var(--space-4); }
    .copyright-text { font-family: var(--font-ui); font-size: 11px; color: var(--color-gray-light); }
    .footer-badge-secure { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-gray-light); font-size: 11px; }
    .footer-badge-secure .material-icons-round { font-size: 14px; }

    /* ── RESPONSIVE TABLETTE & PC (Écrans larges >= 768px) ────────────────── */
    @media (min-width: 768px) {
        body { padding-bottom: 0; }
        .home-navbar { padding: var(--space-4) var(--space-12); }
        .brand-name-text { font-size: 18px; }
        .btn-login-nav .btn-text, .btn-cta-nav .btn-text { display: inline; }
        .btn-login-nav, .btn-cta-nav { padding: 10px 16px; min-width: auto; height: auto; }
        .navbar-actions { gap: var(--space-4); }
        
        .mobile-sticky-nav { display: none; }
        .main-footer-content { padding: var(--space-8) var(--space-12); flex-direction: row; justify-content: space-between; align-items: flex-start; }
        .footer-meta-links { border-top: none; padding-top: 0; align-items: flex-end; text-align: right; }
    }

    /* 📑 6. STYLES COMPOSANT : HERO SECTION (AVEC IMAGE) */
   .hero-section {
        /* J'ai remplacé les variables manquantes par 80px en haut et 64px en bas */
        padding: 40px var(--space-4) 64px var(--space-4);
        display: flex;
        flex-direction: column;
        gap: var(--space-10);
        max-width: 1100px;
        margin: 0 auto;
        align-items: center;
        overflow: hidden;
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-5);
        width: 100%;
        z-index: 2;
    }

    .hero-badge {
        display: inline-flex; align-items: center; gap: var(--space-2);
        background: var(--color-success-tint); color: var(--color-success);
        padding: 6px 14px; border-radius: var(--radius-full);
        font-size: 11px; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.05em; border: 1px solid rgba(22, 163, 74, 0.2);
    }

    .hero-title {
        font-family: var(--font-brand); font-size: 34px; font-weight: 800;
        color: var(--text-primary); line-height: 1.2;
    }

    .hero-title span { color: var(--color-orange); position: relative; display: inline-block; }
    .hero-title span::after {
        content: ''; position: absolute; bottom: 4px; left: 0; right: 0;
        height: 6px; background: var(--color-orange-tint); z-index: -1; border-radius: 4px;
    }

    .hero-desc { font-size: 15px; color: var(--text-muted); line-height: 1.6; max-width: 400px; }

    /* ── CONTENEUR IMAGE (Lifestyle) ── */
   .hero-image-wrapper {
        width: 100%;
        max-width: 340px;
        border-radius: var(--radius-2xl);
        overflow: hidden;
        /* Ombre initiale plus marquée avec ton Bleu Nuit */
        box-shadow: 0 12px 40px rgba(22, 59, 102, 0.15); 
        border: 4px solid var(--bg-surface);
        margin-top: var(--space-6);
        transform: translateY(0);
        /* Transition fluide pour le conteneur */
        transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
    }

    .hero-image-wrapper:hover {
        transform: translateY(-12px); /* Soulèvement plus franc */
        /* Double ombre majestueuse : Bleu marine large + Halo orange en dessous */
        box-shadow: 0 30px 60px rgba(22, 59, 102, 0.2), 0 15px 30px rgba(255, 122, 0, 0.25);
    }

    .hero-img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        aspect-ratio: 4/5;
        background: var(--bg-surface-3);
        /* On prépare l'image à être zoomée de l'intérieur */
        transition: transform var(--dur-slow) var(--ease-out);
    }

    .hero-image-wrapper:hover .hero-img {
        transform: scale(1.06); /* L'image grossit légèrement dans son cadre */
    }
    

    /* ── RESPONSIVE TABLETTE & PC ── */
    @media (min-width: 768px) {
        .hero-section {
            flex-direction: row;
            justify-content: space-between;
            /* Espace encore plus généreux sur PC */
            padding: var(--space-20) var(--space-6); 
        }
        .hero-content {
            align-items: flex-start;
            text-align: left;
            width: 50%;
        }
        .hero-title { font-size: 46px; }
        .hero-desc { font-size: 16px; max-width: 480px; }
        .hero-image-wrapper { width: 45%; max-width: 380px; }
    }

    /* ── RESPONSIVE TABLETTE & PC ── */
    @media (min-width: 768px) {
        .hero-section {
            flex-direction: row;
            justify-content: space-between;
            padding: var(--space-16) var(--space-6);
        }
        .hero-content {
            align-items: flex-start;
            text-align: left;
            width: 50%;
        }
        .hero-title { font-size: 44px; }
        .hero-desc { font-size: 16px; max-width: 480px; }
        .faux-mockup-wrapper { width: 45%; max-width: 340px; }
    }

   /* 📑 7. STYLES COMPOSANT : SECTION COMMENT ÇA MARCHE */
    .how-it-works-section {
        padding: var(--space-12) var(--space-4);
        background: var(--bg-surface-2); /* Un fond légèrement gris/bleuté pour détacher cette section */
        text-align: center;
    }

    .section-header {
        /* On remplace la variable par une marge fixe beaucoup plus généreuse (64px) */
        margin-bottom: 64px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .section-title {
        font-family: var(--font-brand);
        font-size: 28px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: var(--space-2);
    }

    .section-subtitle {
        color: var(--text-muted);
        font-size: 15px;
    }

    .steps-grid {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        max-width: 1100px;
        margin: 0 auto;
    }

    .step-card {
        background: var(--bg-surface);
        padding: var(--space-6);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--border-default);
        position: relative;
        text-align: left;
        transition: transform var(--dur-normal) var(--ease-out);
    }

    .step-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-md);
    }

    .step-number {
        position: absolute;
        top: -16px;
        left: var(--space-6);
        background: var(--color-orange);
        color: var(--color-white);
        width: 32px;
        height: 32px;
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-family: var(--font-brand);
        font-size: 14px;
        box-shadow: 0 4px 10px rgba(255, 122, 0, 0.3);
    }

    .step-icon {
        width: 48px;
        height: 48px;
        background: var(--color-navy-tint);
        color: var(--color-navy);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: var(--space-4);
        margin-top: var(--space-2);
    }

    .step-icon .material-icons-round {
        font-size: 24px;
    }

    .step-title {
        font-family: var(--font-brand);
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: var(--space-2);
    }

    .step-text {
        font-size: 14px;
        color: var(--text-muted);
        line-height: 1.6;
    }

    /* ── RESPONSIVE TABLETTE & PC ── */
    @media (min-width: 768px) {
        .how-it-works-section {
            padding: 120px var(--space-6);
        }
        .section-title {
            font-size: 36px;
        }
        .steps-grid {
            flex-direction: row;
            gap: var(--space-6);
        }
        .step-card {
            flex: 1;
        }
    }

    /* Classes CSS dédiées au JavaScript */
        
        /* Ombre pour la Navbar au scroll */
        .navbar-scrolled {
            box-shadow: var(--shadow-sm);
            transition: box-shadow var(--dur-normal) var(--ease-out);
        }

        /* État initial caché pour les éléments à révéler */
        .reveal-item {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* État visible (ajouté par le JS) */
        .reveal-item.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Effet de cascade (délai) pour les 3 cartes "Comment ça marche" */
        .step-card:nth-child(1) { transition-delay: 0.1s; }
        .step-card:nth-child(2) { transition-delay: 0.25s; }
        .step-card:nth-child(3) { transition-delay: 0.4s; }