:root { 
            --bg-color: #F7F9F6; 
            --text-main: #163829; 
            --accent: #C87A52; 
            --sage: #4E8F6F; 
            --cream: #FFFBF8;
        }
        * { box-sizing: border-box; }
        body { 
            margin: 0; 
            padding: 0; 
            font-family: 'Lato', sans-serif; 
            background-color: var(--bg-color); 
            color: var(--text-main); 
            overflow-x: hidden; 
            scroll-behavior: smooth; 
        }
        h1, h2, h3, .serif { font-family: 'Playfair Display', serif; font-weight: 600; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        
        /* Header Fixe et Transparent */
        header { 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            padding: 30px 40px; 
            z-index: 100; 
        }
        .logo { 
            font-family: 'Playfair Display', serif; 
            font-size: 1.8rem; 
            color: #fff; 
            text-decoration: none; 
            display: flex; 
            align-items: center; 
            gap: 10px; 
            font-weight: 600; 
        }
        .logo img {
            border-radius: 8px;
            object-fit: cover;
        }
        .nav-links a { 
            color: #fff; 
            text-decoration: none; 
            margin-left: 30px; 
            font-size: 0.95rem; 
            opacity: 0.8; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
        }
        
        /* Boutons & Sève Active transitions */
        .btn, button, a { 
            transition: all 0.3s ease-in-out; 
        }
        .btn { 
            background-color: var(--accent); 
            color: white; 
            padding: 14px 32px; 
            border: none; 
            border-radius: 30px; 
            font-size: 1.05rem; 
            font-weight: 700; 
            cursor: pointer; 
            text-decoration: none; 
            display: inline-block; 
            box-shadow: 0 10px 20px rgba(200, 122, 82, 0.3); 
        }
        .btn:hover { 
            transform: translateY(-3px); 
            background-color: #b56c47; 
            box-shadow: 0 12px 24px rgba(200, 122, 82, 0.4);
        }
        .btn-outline { 
            background-color: transparent; 
            border: 1px solid rgba(255,255,255,0.5); 
            box-shadow: none; 
        }
        .btn-outline:hover { 
            background-color: rgba(255,255,255,0.15); 
            border-color: white; 
            color: white;
        }

        .logo img {
            transition: transform 0.5s ease;
        }
        .logo:hover img {
            transform: rotate(15deg) scale(1.05);
        }

        /* Hero Section plein écran avec Parallax */
        .hero { 
            min-height: 100vh;
            height: auto;
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: flex-start; 
            text-align: center; 
            position: relative; 
            background: linear-gradient(to bottom, rgba(18, 44, 34, 0.6) 0%, rgba(18, 44, 34, 0.25) 70%, var(--bg-color) 100%), url('../../images/hero-bg.jpg') center/cover no-repeat;
            padding: 160px 20px 0 20px; 
        }
        .hero-content { max-width: 800px; z-index: 2; margin-bottom: 50px; }
        .hero h1 { font-size: 5rem; color: #ffffff; margin-bottom: 20px; line-height: 1.1; text-shadow: 0 10px 30px rgba(0,0,0,0.4); }
        .hero p { font-size: 1.4rem; color: #ffffff; margin: 0 auto 40px; opacity: 0.95; line-height: 1.6; text-shadow: 0 5px 15px rgba(0,0,0,0.4); }
        
        /* Animation de flottaison du téléphone */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }

        .hero-mockup-container {
            position: relative; 
            margin-bottom: -150px; 
            z-index: 10;
            animation: float 6s ease-in-out infinite;
        }
        
        /* Mockup avec fond d'onboarding réel Spagy */
        .mockup { 
            width: 300px; 
            height: 620px; 
            background: var(--cream) url('../../logo.png') no-repeat center 35% / 150px;
            border: 12px solid #0d2219; 
            border-radius: 45px; 
            box-shadow: 0 40px 80px rgba(0,0,0,0.5); 
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            padding-bottom: 60px;
        }
        .mockup-appname {
            font-family: 'Playfair Display', serif;
            font-size: 2rem;
            font-weight: 600;
            color: var(--text-main);
            margin-bottom: 8px;
        }
        .mockup-tagline {
            font-size: 0.9rem;
            color: var(--sage);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 20px;
        }

        /* Espacement pour compenser le téléphone qui déborde */
        .spacer { height: 220px; }

        /* Philosophy (Cartes avec Images de Haute Qualité) */
        .philosophy { padding: 80px 20px; position: relative; z-index: 2; }
        .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
        
        .card { 
            background-color: #ffffff; 
            box-shadow: 0 15px 35px rgba(22, 56, 41, 0.04); 
            border: 1px solid rgba(22, 56, 41, 0.06);
            border-radius: 24px; 
            overflow: hidden;
            transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease-in-out;
        }
        .card:hover { 
            transform: translateY(-8px); 
            background-color: #ffffff; 
            box-shadow: 0 25px 50px rgba(22, 56, 41, 0.12); 
        }
        .card-img { height: 200px; background-size: cover; background-position: center; }
        
        /* Remplacement des LoremFlickr par des images d'ambiance et de travail réelles */
        .card-img-1 { background-image: url('../../images/card-1.jpg'); }
        .card-img-2 { background-image: url('../../images/card-2.jpg'); }
        .card-img-3 { background-image: url('../../images/card-3.jpg'); }
        
        .card-content { padding: 40px 30px; text-align: left; }
        .card h3 { color: var(--accent); font-size: 1.6rem; margin: 0 0 15px 0; }
        .card p { opacity: 0.85; line-height: 1.6; font-size: 1.05rem; margin: 0; }

        /* Features */
        .features { padding: 100px 0; }
        .feature-row { display: flex; align-items: center; gap: 80px; margin-bottom: 120px; }
        .feature-row:nth-child(even) { flex-direction: row-reverse; }
        .feature-text { flex: 1; }
        .feature-text h2 { font-size: 3rem; margin-bottom: 25px; color: var(--text-main); line-height: 1.2;}
        .feature-text h2 span { color: var(--accent); font-style: italic; }
        .feature-text p { font-size: 1.2rem; opacity: 0.85; line-height: 1.7; }
        
        .feature-img-wrapper { flex: 1; position: relative; }
        .feature-img { 
            height: 500px; 
            border-radius: 30px; 
            box-shadow: 0 30px 60px rgba(0,0,0,0.15);
            background-size: cover;
            background-position: center;
        }
        
        /* Remplacement des placeholders par des images d'une beauté et netteté parfaites */
        .img-agenda { background-image: url('../../images/img-agenda.jpg'); }
        .img-espaces { background-image: url('../../images/img-espaces.jpg'); }
        .img-ia { background-image: url('../../images/img-ia.jpg'); }

        /* Quote */
        .quote-section { 
            text-align: center; 
            padding: 150px 20px; 
            background: linear-gradient(rgba(247, 249, 246, 0.9), rgba(247, 249, 246, 0.9)), url('../../images/quote-bg.jpg') center/cover fixed; 
            border-top: 1px solid rgba(0,0,0,0.05);
        }
        .quote-section h2 { font-size: 3.5rem; margin-bottom: 30px; line-height: 1.2; color: var(--accent); }
        .quote-section p { font-size: 1.3rem; opacity: 0.9; max-width: 600px; margin: 0 auto 50px; }
        
        /* Join Section */
        .join-section { padding: 100px 20px; text-align: center; background: linear-gradient(rgba(247, 249, 246, 0.85), rgba(247, 249, 246, 0.85)), url('../../images/join-bg.jpg') center/cover fixed; }
        .join-section h2 { font-size: 2.5rem; color: var(--accent); margin-bottom: 20px; }
        .join-section p { font-size: 1.1rem; opacity: 0.85; margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto; }
        
        .join-form { display: flex; max-width: 500px; margin: 0 auto; gap: 10px; }
        .join-form input { flex: 1; padding: 15px 20px; border: 1px solid rgba(22,56,41,0.2); border-radius: 30px; font-size: 1rem; font-family: "Lato", sans-serif; outline: none; background-color: var(--cream); color: var(--text-main); }
        .join-form button { margin: 0; }

        /* Footer */
        footer { text-align: center; padding: 60px 20px; background-color: #E8EFEA; color: var(--text-main); opacity: 0.8; font-size: 0.9rem; border-top: 1px solid rgba(22,56,41,0.05); }

        /* Animations JS classes */
        .fade-in { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
        .fade-in.visible { opacity: 1; transform: translateY(0); }

        @media (max-width: 900px) {
            .spacer { height: 180px; }
            .hero h1 { font-size: 3.5rem; }
            .feature-row, .feature-row:nth-child(even) { flex-direction: column; text-align: left; gap: 40px; }
            .feature-img { height: 350px; width: 100%; }
            .nav-links { display: none; }
            header { padding: 20px; }
        }

        @media (max-width: 600px) {
            .grid-3 { gap: 20px; }
            .feature-row, .feature-row:nth-child(even) { 
                display: block; /* Force stacking */
                margin-bottom: 40px !important; 
                gap: 0 !important; 
            }
            .feature-text { padding: 0 15px; width: 100%; box-sizing: border-box; text-align: left; } 
            .feature-text h2 { font-size: 1.8rem; margin-bottom: 10px; }
            .feature-text p { font-size: 1rem; margin-bottom: 15px; }
            .feature-img-wrapper { 
                width: 100%; 
                display: block; 
                margin-top: 15px; 
                padding: 0 15px; 
                box-sizing: border-box; 
            }
            .feature-img { height: 250px !important; width: 100%; border-radius: 15px; display: block; }
            
            .hero-content { margin-bottom: 20px; }
            .hero h1 { font-size: 2.2rem !important; margin-bottom: 15px; }
            .hero p { font-size: 1rem; padding: 0 15px; margin-bottom: 20px; }
            .hero { padding-top: 80px; }
            .spacer { height: 30px !important; }
            .join-section { padding: 40px 20px; }
            .join-section h2 { font-size: 1.8rem; margin-bottom: 15px; }
            .join-section p { margin-bottom: 20px; }
            .quote-section { padding: 40px 20px; }
            .quote-section h2 { font-size: 1.8rem; margin-bottom: 15px; }
            .quote-section p { font-size: 1rem; margin-bottom: 20px; }
            .philosophy { padding: 30px 15px; margin-bottom: 0; }
            .features { padding: 20px 0; }
            .mockup { width: 200px; height: 413px; border-width: 8px; background-size: 100px; padding-bottom: 40px; }
            .mockup-appname { font-size: 1.4rem; margin-bottom: 4px; }
            .mockup-tagline { font-size: 0.7rem; }
            .hero-mockup-container { margin-bottom: -20px; }
            .card { padding: 0; margin-bottom: 15px; }
            .card-content { padding: 20px 15px; }
            .card h3 { font-size: 1.4rem; margin-bottom: 10px; }
            .card p { font-size: 0.95rem; }
            .join-form { flex-direction: column; }
            .join-form input, .join-form button { width: 100%; }
        }

/* Appel à l'action vers le manifeste */
.nav-highlight { font-weight: 700; color: #FFF; border-bottom: 1px solid rgba(255,255,255,0.4); }
.header-signup { padding: 10px 24px; font-size: 0.9rem; }
.commitments-cta { padding: 60px 20px; text-align: center; background-color: #E8EFEA; border-top: 1px solid rgba(22,56,41,0.05); border-bottom: 1px solid rgba(22,56,41,0.05); }
.commitments-cta-title { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: var(--text-main); margin-bottom: 15px; line-height: 1.3; }
.commitments-cta-copy { font-size: 1.15rem; max-width: 800px; margin: 0 auto 30px; opacity: 0.9; line-height: 1.6; }
.commitments-cta-button { background-color: var(--accent); }