/* Global Styles */
:root {
    --primary-color: #00CC6A;
    /* Darker Neon Green for better contrast on white */
    --secondary-color: #FFFFFF;
    /* White Background */
    --accent-color: #F8FAFC;
    /* Very Light Grey for cards */
    --text-color: #0F172A;
    /* Dark Navy for text */
    --text-muted: #64748B;
    /* Slate Grey */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--secondary-color);
    color: var(--text-color);
    font-family: var(--font-body);
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 900;
}

.highlight {
    color: var(--primary-color);
}

.dot {
    color: var(--primary-color);
    font-size: 1.5em;
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 5%;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Logo Container Alignment */
.navbar .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
}

.logo img {
    height: 120px;
    /* Kept large as requested */
}

/* Added Brand Styling */
.nav-brand-name {
    font-size: 2.5rem;
    /* Large size to match logo */
    font-weight: 800;
    margin-left: 1rem;
    font-family: var(--font-heading);
    color: var(--text-color);
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-weight: 500;
    font-size: 1.1rem;
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--primary-color);
}

.btn-primary {
    border: 2px solid var(--primary-color);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    color: var(--primary-color);
}

.btn-primary:hover {
    background: var(--primary-color);
    color: var(--secondary-color);
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10%;
    margin-top: 0;
    position: relative;
    overflow: hidden;
}

.hero-content {
    flex: 1;
    z-index: 2;
}

.hero h1 {
    font-size: 5rem;
    line-height: 0.9;
    margin-bottom: 1.5rem;
}

.hero p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 500px;
}

.btn-cta {
    background: var(--primary-color);
    color: var(--secondary-color);
    padding: 1rem 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 5px;
    letter-spacing: 1px;
    transition: var(--transition);
    display: inline-block;
}

.btn-cta:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 255, 133, 0.3);
}

.hero-image {
    flex: 1;
    height: 80%;
    position: relative;
}

.hero-image::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(0, 204, 106, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: -1;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    /* Removed heavy mask for light theme clarity */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Products Section */
.products-section {
    padding: 5rem 10%;
}

.products-section h2 {
    font-size: 3rem;
    margin-bottom: 3rem;
    text-align: center;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 3rem;
}

.product-card {
    background: var(--secondary-color);
    border-radius: 15px;
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 204, 106, 0.15);
    border-color: var(--primary-color);
}

.product-image {
    height: 300px;
    width: 100%;
    overflow: hidden;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.1);
}

.product-info {
    padding: 1.5rem;
}

.product-info h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.description {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    height: 40px;
    /* Force consistent height */
    overflow: hidden;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* Actions Container */
.actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-details {
    padding: 0.7rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition);
}

.btn-details:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.btn-buy {
    background: #FFC439;
    /* PayPal Yellow */
    color: #2C2E2F;
    padding: 0.7rem 1.2rem;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.9rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    cursor: pointer;
}

.btn-buy:hover {
    background: #ffdb7a;
}

.badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--primary-color);
    color: var(--secondary-color);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.8rem;
    z-index: 10;
}

.product-card.disabled {
    opacity: 0.6;
}

.btn-soldout {
    background: #475569;
    color: #94A3B8;
    padding: 0.7rem 1.2rem;
    border-radius: 5px;
    font-weight: 600;
    border: none;
    cursor: not-allowed;
    flex: 1;
    margin-left: 1rem;
}

/* Vision Section */
.vision-section {
    padding: 8rem 10%;
    background: linear-gradient(180deg, var(--secondary-color) 0%, var(--accent-color) 100%);
    text-align: center;
}

.vision-section h2 {
    font-size: 3rem;
    margin-bottom: 4rem;
}

.features {
    display: flex;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
}

.feature-item {
    flex: 1;
    min-width: 250px;
    padding: 2rem;
    background: #FFFFFF;
    border-radius: 15px;
    transition: var(--transition);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.feature-item:hover {
    background: var(--accent-color);
    transform: translateY(-5px);
}

.feature-item i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.feature-item h4 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.feature-item p {
    color: var(--text-muted);
}

/* Footer */
footer {
    background: var(--secondary-color);
    padding: 2rem 5%;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.footer-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 2rem;
    margin-bottom: 1rem;
}

.footer-col {
    min-width: 0;
    /* Prevent overflow */
}

/* Left Column: Logo */
.footer-col:nth-child(1) {
    text-align: left;
}

/* Center Column: Social Icons */
.footer-col:nth-child(2) {
    text-align: center;
}

/* Right Column: Contact */
.footer-col:nth-child(3) {
    text-align: right;
}

.footer-logo-container {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
}

.footer-logo {
    width: 60px;
    /* Adjusted size for footer balance if needed, or keep 120px if preferred. User said 'rehausse le texte' implies alignment issues. */
    /* Keeping original size logic but ensuring alignment */
    height: auto;
    margin-bottom: 0;
}

.brand-name {
    font-size: 2rem;
    font-weight: 700;
    margin-left: 1rem;
    font-family: var(--font-heading);
    /* Fix vertical alignment: "réhausse le texte" means move it UP relative to logo mid-line or visually align center */
    transform: translateY(-2px);
    display: inline-block;
    color: var(--text-color);
    text-decoration: none;
}

.footer-col h4 {
    display: none;
    /* Hide 'Contact' title to clean up layout as requested 'just email right' style implies simpler look, or keep it but right aligned. User said 'met l'adresse email de contact a droite', didn't explicitly say remove title, but usually headers break single-line flow. I'll keep it but right align everything. */
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.footer-col p,
.footer-col a {
    color: var(--text-muted);
    display: block;
    margin-bottom: 0.8rem;
    transition: var(--transition);
}

.footer-col a[href^="mailto"] {
    color: var(--text-muted);
    font-size: 1.1rem;
    text-decoration: none;
}

.footer-col a:hover {
    color: var(--primary-color);
}

/* .social-icons ruleset removed */

.social-icons a {
    display: inline-block;
    margin: 0 1rem;
    /* Spacing between icons */
    font-size: 3rem;
    /* User asked for large icons previously. 4.5rem might be too huge for center, but I'll stick to '3x' request or 4.5rem if it fits. User said 'met les logos... au milieu'. */
    color: var(--text-color);
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--primary-color);
}

@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .footer-col:nth-child(1),
    .footer-col:nth-child(2),
    .footer-col:nth-child(3) {
        text-align: center;
    }
}

.footer-bottom {
    text-align: center;
    color: #475569;
    font-size: 0.9rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .navbar {
        padding: 1.5rem;
    }

    .hamburger {
        display: block;
        cursor: pointer;
        margin-right: 30px;
        /* Move left by approx 1cm for better accessibility */
    }

    .hamburger .bar {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--text-color);
        margin: 5px auto;
        transition: all 0.3s ease;
    }

    .nav-links {
        position: fixed;
        right: -100%;
        top: 80px;
        flex-direction: column;
        background-color: var(--secondary-color);
        width: 100%;
        text-align: center;
        padding: 2rem;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
    }

    .nav-links.active {
        right: 0;
    }

    .hero {
        flex-direction: column;
        height: auto;
        padding-top: 220px;
        padding-bottom: 50px;
        text-align: center;
    }

    .hero-content {
        margin-bottom: 3rem;
    }

    .hero h1 {
        font-size: 3rem;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .social-icons a {
        margin-left: 0;
        margin-right: 1.5rem;
    }

    /* Consistent spacing for product pages on mobile */
    .product-page {
        padding-top: 220px !important;
    }
}

/* Footer CTA - High Visibility */
.footer-cta {
    text-align: right;
}

.footer-cta .question {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.footer-cta .contact-label {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.footer-cta .email-link {
    font-size: 2rem !important;
    /* Huge visibility */
    font-weight: 800;
    color: var(--primary-color) !important;
    text-decoration: none;
    transition: var(--transition);
}

.footer-cta .email-link:hover {
    color: var(--text-color) !important;
}

@media (max-width: 900px) {
    .footer-cta {
        text-align: center;
    }
}