:root {
            --primary: #8ACD00;
            --primary-dark: #6FA800;
            --dark: #14253A;
            --text: #182333;
            --muted: #687384;
            --background: #FFFFFF;
            --light: #F6F8F4;
            --border: #E8ECE6;
            --font-family: 'Inter', sans-serif;
        }

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

        html {
            width: 100%;
            overflow-x: clip;
        }

        body {
            width: 100%;
            min-width: 0;
            font-family: var(--font-family);
            color: var(--text);
            background-color: var(--background);
            line-height: 1.5;
            overflow-x: clip;
            font-weight: 500;
        }

        .container {
            max-width: 1500px;
            margin: 0 auto;
            padding: 0 15px;
        }

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

        ul {
            list-style: none;
        }

        /* =========================================
           ASSIMEY — LOGO REVEAL LOADER
        ========================================= */

        #loader {
            position: fixed;
            inset: 0;
            width: 100%;
            height: 100%;

            background: #FFFFFF;

            display: flex;
            align-items: center;
            justify-content: center;

            z-index: 99999;

            opacity: 1;
            visibility: visible;

            transition:
                opacity 0.65s ease,
                visibility 0.65s ease;
        }

        #loader.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* Zone du logo */
        .loader-reveal {
            position: relative;

            width: 240px;

            overflow: hidden;

            display: flex;
            align-items: center;
        }

        /* Logo */
        .loader-reveal img {
            display: block;

            width: 240px;
            height: auto;

            opacity: 1;

            transform: translateX(0);

            animation:
                logoReveal 1.6s
                cubic-bezier(.77, 0, .18, 1)
                forwards;
        }

        /*
           Le voile qui cache le logo.
           Il part de gauche et se déplace vers la droite.
        */
        .reveal-mask {
            position: absolute;

            top: -10%;
            right: 0;

            width: 100%;
            height: 120%;

            background: #FFFFFF;

            z-index: 5;

            transform: translateX(0);

            animation:
                curtainReveal 1.6s
                cubic-bezier(.77, 0, .18, 1)
                forwards;
        }

        /*
           Petite bordure lumineuse du rideau.
           Elle accompagne le mouvement du masque.
        */
        .reveal-mask::after {
            content: "";

            position: absolute;

            top: 0;
            right: 0;

            width: 3px;
            height: 100%;

            background: #A6E533;

            opacity: 0;

            box-shadow:
                0 0 8px rgba(166,229,51,0.35);

            animation:
                curtainEdge 1.6s
                cubic-bezier(.77, 0, .18, 1)
                forwards;
        }

        /* =========================================
           ANIMATION DU RIDEAU
        ========================================= */

        @keyframes curtainReveal {

            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(101%);
            }
        }

        /* =========================================
           ANIMATION DU LOGO
        ========================================= */

        @keyframes logoReveal {

            0% {
                transform: translateX(-8px);
                opacity: 0.85;
            }

            35% {
                transform: translateX(0);
                opacity: 1;
            }

            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }

        /* =========================================
           BORD DU RIDEAU
        ========================================= */

        @keyframes curtainEdge {

            0% {
                opacity: 0;
            }

            8% {
                opacity: 1;
            }

            70% {
                opacity: 0.9;
            }

            100% {
                opacity: 0;
            }
        }

        /* =========================================
           MOBILE
        ========================================= */

        @media (max-width: 480px) {

            #loader {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0;
            }

            .loader-reveal {
                width: min(190px, 70vw);
                max-width: 70vw;
                margin: 0;
                flex: 0 0 auto;
            }

            .loader-reveal img {
                width: 100%;
                max-width: 100%;
                height: auto;
            }
        }

        /* =========================================
           ACCESSIBILITÉ
        ========================================= */

        @media (prefers-reduced-motion: reduce) {

            .reveal-mask,
            .reveal-mask::after,
            .loader-reveal img {
                animation: none;
            }

            .reveal-mask {
                transform: translateX(101%);
            }

            .reveal-mask::after {
                opacity: 0;
            }
        }

        /* HEADER */
        .header {
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 1px solid var(--border);
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 70px;
        }

        .logo img {
            height: 40px;
            width: auto;
        }

        .nav-desktop ul {
            display: flex;
            gap: 25px;
        }

        .nav-desktop a {
            font-weight: 600;
            font-size: 15px;
            color: var(--muted);
            transition: color 0.3s;
        }

        .nav-desktop a:hover, .nav-desktop a.active {
            color: var(--text);
        }

        .has-dropdown {
            position: relative;
        }

        .dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
            border: 1px solid var(--border);
            min-width: 160px;
        }

        .has-dropdown:hover .dropdown {
            opacity: 1;
            visibility: visible;
            top: 120%;
        }

        .dropdown li {
            margin-bottom: 10px;
        }

        .dropdown a:hover {
            color: var(--primary-dark);
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .btn {
            display: inline-block;
            padding: 10px 18px;
            border-radius: 6px;
            font-weight: 700;
            font-size: 14px;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
            text-align: center;
        }

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

        .btn-primary:hover {
            background-color: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(138, 205, 0, 0.3);
        }

        .btn-ghost {
            background-color: transparent;
            color: var(--text);
            border: 1px solid var(--border);
        }

        .btn-ghost:hover {
            border-color: var(--primary);
            color: var(--primary-dark);
        }

        .btn-dark {
            background-color: var(--dark);
            color: white;
        }

        .btn-dark:hover {
            background-color: #182333;
            transform: translateY(-2px);
        }

        .btn-large {
            padding: 15px 30px;
            font-size: 16px;
        }

        /* Hamburger */
        .hamburger {
            display: none;
            flex-direction: column;
            justify-content: space-between;
            width: 25px;
            height: 18px;
            background: none;
            border: none;
            cursor: pointer;
        }

        .hamburger span {
            display: block;
            width: 100%;
            height: 2px;
            background-color: var(--text);
            transition: all 0.3s;
        }

        .nav-mobile {
            display: none;
            position: fixed;
            top: 70px;
            right: 0;
            width: min(82vw, 300px);
            max-width: 300px;
            background: white;
            height: calc(100vh - 70px);
            padding: 20px;
            box-shadow: -4px 0 10px rgba(0,0,0,0.1);
            z-index: 999;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }

        .nav-mobile.active {
            transform: translateX(0);
        }

        .nav-mobile ul {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .nav-mobile a {
            font-size: 16px;
            font-weight: 600;
        }

        .nav-mobile .btn {
            text-align: center;
            width: 100%;
        }

        /* HERO */
        .hero {
            padding: 40px 0 60px;
            background-color: var(--background);
        }

        .hero-container {
            display: flex;
            align-items: center;
            gap: 34px;
        }

        .hero-content {
            flex: 0.72;
            min-width: 300px;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background-color: var(--light);
            border: 1px solid var(--border);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            color: var(--muted);
            margin-bottom: 15px;
        }

        .badge .dot {
            width: 8px;
            height: 8px;
            background-color: var(--primary);
            border-radius: 50%;
        }

        .hero h1 {
            font-size: 46px;
            line-height: 1.1;
            margin-bottom: 15px;
            color: var(--dark);
            font-weight: 800;
        }

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

        .subtitle {
            font-size: 17px;
            color: var(--muted);
            margin-bottom: 25px;
            max-width: 500px;
            font-weight: 500;
        }

        .benefits-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 25px;
        }

        .benefits-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
            color: var(--text);
            font-weight: 600;
        }

        .check-icon {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 18px;
            height: 18px;
            background-color: var(--primary);
            color: white;
            border-radius: 50%;
            font-size: 10px;
            font-weight: 700;
        }

        /* Hero Visual (Browser Window) */
        .hero-visual {
            flex: 1.65;
            min-width: 0;
        }

        .browser-window {
            background: white;
            border-radius: 12px;
            border: 1px solid #dfe5eb;
            box-shadow: 0 16px 40px rgba(20,37,58,0.12);
            overflow: hidden;
        }

        .browser-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            border-bottom: 1px solid var(--border);
        }

        .logo-mini {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            font-size: 14px;
        }

        .browser-icons {
            display: flex;
            gap: 12px;
            color: var(--dark);
        }

        .browser-icons i {
            font-size: 16px;
            cursor: pointer;
        }


        /* La boutique est présentée directement : pas de fausse barre de navigateur. */
        .browser-top { display: none !important; }
        .browser-window { border-radius: 12px; }

        /* Slider principal de la boutique sur desktop/tablette */
        .desktop-store-slider {
            display: block;
            border-bottom: 1px solid var(--border);
        }

        .desktop-store-slider .slider {
            height: 220px;
        }

        .desktop-store-slider .slider-dots {
            padding: 8px 15px;
        }

        /* SLIDER */
        .slider {
            position: relative;
            height: 220px;
            overflow: hidden;
            background-color: #2c3e50;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.8s ease;
        }

        .slide.active {
            opacity: 1;
        }

        .slide-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
        }

        .slide-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(20, 37, 58, 0.95) 0%, rgba(20, 37, 58, 0.7) 50%, rgba(20, 37, 58, 0) 100%);
        }

        .slide-content {
            position: absolute;
            top: 50%;
            left: 5%;
            transform: translateY(-50%);
            z-index: 3;
            width: 70%;
            color: white;
        }

        .slide-tag {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 2px;
            color: var(--primary);
            margin-bottom: 10px;
            text-transform: uppercase;
        }

        .slide-content h2 {
            font-size: 24px;
            color: white;
            margin-bottom: 15px;
            font-weight: 800;
            line-height: 1.2;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        .slide-content .btn {
            font-size: 12px;
            padding: 8px 16px;
        }

        .slider-dots {
            display: flex;
            justify-content: flex-end;
            gap: 6px;
            padding: 10px 15px;
            background: white;
        }

        .slider-dots span {
            width: 8px;
            height: 8px;
            background: #d1d5db;
            border-radius: 50%;
            cursor: pointer;
        }

        .slider-dots span.active {
            background: var(--primary);
            width: 20px;
            border-radius: 10px;
        }

        /* Catégories */
        .categories-row {
            display: flex;
            justify-content: space-around;
            padding: 15px 10px;
            border-bottom: 1px solid var(--border);
            background-color: var(--background);
        }

        .cat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 12px;
            color: var(--text);
            font-weight: 600;
            cursor: pointer;
        }

        .cat-icon {
            font-size: 28px;
            margin-bottom: 8px;
            color: var(--dark);
            transition: color 0.3s;
        }

        .cat-item:hover .cat-icon {
            color: var(--primary-dark);
        }

        /* Produits */
        .products-section {
            padding: 15px;
        }

        .products-section h3 {
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--dark);
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }

        .product-card {
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 10px;
            text-align: center;
            position: relative;
            transition: transform 0.3s;
        }

        .product-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }

        .product-img {
            height: 88px;
            margin-bottom: 10px;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f5f5f5;
        }

        .product-img img {
            max-height: 100%;
            max-width: 100%;
            object-fit: contain;
        }

        .product-card h4 {
            font-size: 13px;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .price {
            font-size: 12px;
            font-weight: 800;
            color: var(--primary-dark);
        }

        .add-cart {
            display: block;
            width: 100%;
            margin-top: 10px;
            padding: 7px 10px;
            background: var(--primary);
            border: none;
            border-radius: 5px;
            color: var(--dark);
            font-family: inherit;
            font-size: 11px;
            font-weight: 800;
            cursor: default;
            text-align: center;
        }

        .add-cart:hover {
            background: var(--primary);
        }

        /* APERÇU BOUTIQUE — inspiré de la maquette fournie */
        .store-preview {
            background: #fff;
        }

        .store-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 10px 14px;
            border-bottom: 1px solid #e8edf2;
            background: #fff;
        }

        .store-brand {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
        }

        .store-brand img {
            height: 21px;
            width: auto;
        }

        .store-brand strong {
            font-size: 11px;
            color: var(--dark);
            white-space: nowrap;
        }

        .store-search {
            flex: 1;
            max-width: 250px;
            height: 28px;
            border: 1px solid #e2e7ec;
            border-radius: 6px;
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 0 9px;
            color: #9aa4af;
            font-size: 8px;
        }

        .store-actions {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--dark);
            font-size: 12px;
        }

        .store-cart {
            position: relative;
        }

        .store-cart-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            min-width: 14px;
            height: 14px;
            padding: 0 3px;
            border-radius: 10px;
            background: var(--primary);
            color: var(--dark);
            font-size: 8px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .store-main-banner {
            padding: 12px 16px;
            background: #f6f8fb;
            border-bottom: 1px solid #e9edf1;
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .store-main-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            min-width: 0;
            width: 100%;
        }

        .mobile-store-controls {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            flex-shrink: 0;
        }

        .mobile-store-search {
            display: flex;
            width: 210px;
            max-width: 28vw;
            height: 30px;
            background: #fff;
        }

        .mobile-store-cart {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            font-size: 13px;
            flex-shrink: 0;
        }

        .store-main-banner h3 {
            font-size: 18px;
            line-height: 1.15;
            color: var(--dark);
            margin-bottom: 4px;
        }

        .store-main-banner p {
            font-size: 8px;
            color: #748092;
        }

        .store-benefits { display: none; }

        .store-benefit {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 8px;
            color: var(--dark);
            font-weight: 700;
        }

        .store-benefit i {
            color: var(--primary-dark);
            font-size: 12px;
        }

        .store-content {
            display: grid;
            grid-template-columns: 125px minmax(0, 1fr);
            gap: 12px;
            padding: 12px;
        }

        .store-sidebar {
            border: 1px solid #e7ebef;
            border-radius: 7px;
            overflow: hidden;
            align-self: start;
        }

        .store-sidebar-block {
            padding: 10px;
            border-bottom: 1px solid #e7ebef;
        }

        .store-sidebar-block:last-child {
            border-bottom: 0;
        }

        .store-sidebar h4 {
            font-size: 10px;
            color: var(--dark);
            margin-bottom: 8px;
        }

        .store-category {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 4px 5px;
            border-radius: 4px;
            font-size: 8px;
            color: #667386;
            margin-bottom: 2px;
        }

        .store-category.active {
            background: #f5f9ef;
            color: var(--primary-dark);
            font-weight: 800;
        }

        .store-category span:last-child {
            margin-left: auto;
            font-size: 7px;
            color: #9aa4af;
        }

        .store-filter-label {
            font-size: 8px;
            font-weight: 700;
            color: #5e6978;
            margin: 8px 0 5px;
        }

        .fake-range {
            height: 3px;
            background: #dfe7d3;
            border-radius: 3px;
            position: relative;
            margin: 8px 2px 4px;
        }

        .fake-range::before {
            content: '';
            position: absolute;
            inset: 0 0 0 0;
            background: var(--primary);
            border-radius: 3px;
        }

        .fake-range::after {
            content: '●     ●';
            position: absolute;
            top: -7px;
            left: -2px;
            width: calc(100% + 4px);
            display: flex;
            justify-content: space-between;
            color: var(--primary);
            font-size: 8px;
        }

        .store-results {
            min-width: 0;
        }

        .store-results-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 9px;
        }

        .store-results-top p {
            font-size: 8px;
            color: #7a8492;
        }

        .store-sort {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 8px;
            color: #7a8492;
        }

        .store-sort span {
            border: 1px solid #e1e6eb;
            border-radius: 5px;
            padding: 5px 7px;
            color: var(--dark);
            background: #fff;
            font-weight: 700;
        }

        .store-product-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 8px;
        }

        .store-product {
            border: 1px solid #e5e9ed;
            border-radius: 7px;
            padding: 6px;
            background: #fff;
            min-width: 0;
        }

        .store-product-image {
            height: 78px;
            border-radius: 4px;
            overflow: hidden;
            background: #f3f5f6;
            position: relative;
            margin-bottom: 6px;
        }

        .store-product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .store-product-badge {
            position: absolute;
            left: 5px;
            top: 5px;
            padding: 2px 4px;
            border-radius: 3px;
            background: var(--primary);
            color: var(--dark);
            font-size: 6px;
            font-weight: 900;
        }

        .store-product h5 {
            font-size: 8px;
            line-height: 1.25;
            color: var(--dark);
            margin-bottom: 4px;
            min-height: 20px;
        }

        .store-price {
            font-size: 8px;
            font-weight: 900;
            color: var(--primary-dark);
            margin-bottom: 5px;
        }

        .store-rating {
            font-size: 6px;
            color: #7a8492;
            margin-bottom: 6px;
        }

        .store-rating i {
            color: var(--primary);
            font-size: 6px;
        }

        .store-add {
            width: 100%;
            border: 0;
            border-radius: 4px;
            padding: 5px 4px;
            background: var(--primary);
            color: var(--dark);
            font: 800 7px var(--font-family);
            cursor: default;
        }

        .store-bottom {
            margin-top: 9px;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 8px;
        }

        .store-promo, .store-newsletter {
            border: 1px solid #e5e9ed;
            border-radius: 6px;
            padding: 8px 10px;
            background: #fafbfc;
            min-height: 45px;
        }

        .store-promo strong, .store-newsletter strong {
            display: block;
            font-size: 8px;
            color: var(--dark);
            margin-bottom: 2px;
        }

        .store-promo span, .store-newsletter span {
            font-size: 6px;
            color: #7a8492;
        }

        @media (max-width: 1100px) and (min-width: 769px) {
            .hero-container { gap: 24px; }
            .hero-content { flex: 0.62; min-width: 260px; }
            .hero-visual { flex: 1.45; }
            .store-benefits { display: none; }
            .store-content { grid-template-columns: 105px minmax(0, 1fr); }
            .store-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .store-product-image { height: 72px; }
        }

        /* SECTIONS (Fonctionnalités supprimées, on garde le reste) */
        .section {
            padding: 60px 0;
        }

        .section-light {
            background-color: var(--light);
        }

        .section-title {
            text-align: center;
            font-size: 32px;
            color: var(--dark);
            margin-bottom: 10px;
            font-weight: 800;
        }

        .section-subtitle {
            text-align: center;
            color: var(--muted);
            margin-bottom: 40px;
            font-size: 17px;
            font-weight: 500;
        }

        /* STEPS */
        .steps-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-top: 40px;
        }

        .step {
            text-align: center;
            flex: 1;
            padding: 0 15px;
        }

        .step-number {
            font-size: 36px;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 10px;
        }

        .step h3 {
            font-size: 18px;
            margin-bottom: 10px;
            font-weight: 700;
        }

        .step p {
            color: var(--muted);
            font-size: 14px;
            font-weight: 500;
        }

        .step-line {
            flex: 0.3;
            height: 2px;
            background: var(--border);
            margin-top: 25px;
        }

        /* WHY */
        .why-content {
            display: block;
            width: 100%;
        }

        .why-visual {
            display: none !important;
        }

        .why-text {
            width: 100%;
            max-width: none;
            text-align: center;
        }

        .why-text h2 {
            font-size: 32px;
            line-height: 1.2;
            margin: 0 auto 34px;
            color: var(--dark);
            font-weight: 800;
            max-width: 900px;
        }

        .benefits-list.large {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px;
            margin: 0;
            width: 100%;
        }

        .benefits-list.large li {
            min-height: 72px;
            margin: 0;
            padding: 18px 20px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
            text-align: left;
            background: #ffffff;
            border: 1px solid var(--border);
            border-radius: 10px;
            box-shadow: 0 4px 14px rgba(20,37,58,0.04);
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }

        .benefits-list.large li:hover {
            transform: translateY(-2px);
            border-color: rgba(138,205,0,.45);
            box-shadow: 0 8px 20px rgba(20,37,58,0.07);
        }

        .benefits-list.large .check-icon {
            flex: 0 0 22px;
            width: 22px;
            height: 22px;
            font-size: 11px;
        }

        /* PRICING */
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
            align-items: stretch;
        }

        .pricing-card {
            background: white;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 35px 25px;
            text-align: center;
            transition: all 0.3s;
            position: relative;
        }

        .pricing-card.featured {
            border: 2px solid var(--primary);
            box-shadow: 0 10px 30px rgba(138, 205, 0, 0.1);
        }

        .pricing-card .badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--primary);
            color: white;
            border: none;
        }

        .pricing-card h3 {
            font-size: 18px;
            margin-bottom: 15px;
            font-weight: 700;
        }

        .pricing-card .price {
            font-size: 32px;
            font-weight: 900;
            color: var(--dark);
            margin-bottom: 15px;
        }

        .pricing-card .price span {
            font-size: 14px;
            font-weight: 500;
            color: var(--muted);
        }

        .pricing-card ul {
            text-align: left;
            margin-bottom: 25px;
            min-height: 110px;
        }

        .pricing-card ul li {
            margin-bottom: 10px;
            color: var(--muted);
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 500;
        }

        .pricing-card ul li::before {
            content: '\f00c';
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            color: var(--primary);
        }

        /* CTA */
        .cta-section {
            background-color: var(--primary);
            padding: 50px 0;
            text-align: center;
        }

        .cta-section h2 {
            color: var(--dark);
            font-size: 32px;
            margin-bottom: 10px;
            font-weight: 800;
        }

        .cta-section p {
            color: var(--dark);
            font-size: 17px;
            margin-bottom: 25px;
            font-weight: 600;
        }

        /* FOOTER */
        .footer {
            background-color: var(--dark);
            color: white;
            padding: 50px 0 20px;
        }

        .footer-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-bottom: 30px;
        }

        .footer-col h4 {
            font-size: 15px;
            margin-bottom: 15px;
            color: var(--primary);
            font-weight: 700;
        }

        .footer-col ul li {
            margin-bottom: 10px;
        }

        .footer-col ul li a {
            color: #a0aec0;
            font-size: 14px;
            transition: color 0.3s;
            font-weight: 500;
        }

        .footer-col ul li a:hover {
            color: white;
        }

        .copyright {
            text-align: center;
            border-top: 1px solid #2c3e50;
            padding-top: 20px;
            font-size: 13px;
            color: #a0aec0;
            font-weight: 500;
        }

        /* RESPONSIVE UNIFIÉ (Téléphone + Tablette Portrait) */
        @media (max-width: 1024px) {
            .hero h1 { font-size: 40px; }
        }

        @media (max-width: 900px) {
            .benefits-list.large {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 768px) {
            html, body {
                width: 100%;
                max-width: 100%;
                overflow-x: hidden;
            }

            .container,
            .hero-container,
            .hero-content,
            .hero-visual,
            .browser-window,
            .browser-body {
                min-width: 0;
                max-width: 100%;
            }

            .hero-visual {
                overflow: hidden;
            }

            .mobile-slider-wrapper {
                min-width: 0;
                max-width: 100%;
                overflow: hidden;
            }

            .mobile-slider-wrapper .slider {
                width: 100%;
                max-width: 100%;
            }
            .nav-desktop { display: none; }
            .header-actions {
                display: flex;
                align-items: center;
                gap: 7px;
                margin-left: auto;
            }
            .header-actions .btn-ghost {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 7px 10px;
                font-size: 12px;
                white-space: nowrap;
                border-radius: 6px;
            }
            .header-actions .btn-primary { display: none; }
            .hamburger {
                display: flex;
                flex-shrink: 0;
                margin-left: 2px;
            }
            .nav-mobile { display: block; }
            
            .hero { padding: 0 0 40px; }
            .hero-container {
                display: grid;
                grid-template-columns: 1fr;
                text-align: left;
                gap: 0;
                padding: 0;
            }
            
            /* Sur mobile, on réorganise le hero pour montrer la boutique juste après le titre. */
            .hero-content {
                display: contents;
            }

            .badge {
                display: none;
            }

            /* SLIDER MOBILE UNIQUEMENT (Sous le header) */
            .mobile-slider-wrapper {
                display: block;
                width: 100%;
                margin-bottom: 8px;
                order: 1;
            }

            .mobile-slider-wrapper .slider { height: 180px; }
            .mobile-slider-wrapper .slide-content { width: 85%; left: 20px; }
            .mobile-slider-wrapper .slide-content h2 { font-size: 20px; }
            
            /* BOUTON CTA MOBILE : rapproché du slider */
            .mobile-cta-wrapper {
                display: block;
                padding: 0 15px;
                margin-bottom: 18px;
                order: 2;
            }

            .mobile-cta-wrapper .btn-large {
                width: 100%;
                text-align: center;
            }

            /* Le titre vient juste après le CTA, puis l'aperçu de boutique. */
            .hero h1 {
                order: 3;
                padding: 0 15px;
                margin-bottom: 14px;
            }

            .hero-visual { 
                order: 4;
                width: 100%; 
                padding: 0 15px;
                margin-bottom: 24px;
            }

            .subtitle {
                order: 5;
                padding: 0 15px;
                margin-bottom: 20px;
            }

            .benefits-list {
                order: 6;
                padding: 0 15px;
            }

            .desktop-cta {
                order: 7;
                margin-left: 15px;
            }
            
            .benefits-list { align-items: flex-start; text-align: left; }
            .why-text { text-align: left; }
            .why-text h2 { font-size: 27px; margin-bottom: 24px; text-align: left; }
            .benefits-list.large { grid-template-columns: 1fr; gap: 12px; }
            .benefits-list.large li { min-height: 60px; padding: 15px 16px; font-size: 15px; }
            
            /* Titre Hero réduit (2 lignes max) */
            .hero h1 { font-size: 32px; line-height: 1.2; }
            
            .browser-top { padding: 10px 15px; }
            
            .categories-row {
                flex-wrap: nowrap;
                gap: 15px;
                justify-content: space-between;
                overflow-x: auto;
                padding: 15px;
            }
            
            .cat-item { flex-shrink: 0; }
            .cat-icon { font-size: 24px; }
            
            .products-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

            /* Boutique mobile : on commence directement par les produits populaires.
               Le slider intégré à la boutique est réservé au PC/tablette pour garder la boutique compacte. */
            .desktop-store-slider { display: none; }
            .browser-top { display: none; }
            .store-main-banner {
                padding: 8px 10px;
                min-height: 42px;
            }
            .store-main-heading {
                width: 100%;
                gap: 8px;
            }
            .store-main-banner h3 { font-size: 13px; margin-bottom: 1px; }
            .store-main-banner p { font-size: 7px; }
            .mobile-store-controls {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 7px;
                flex-shrink: 0;
            }
            .mobile-store-search {
                display: flex !important;
                flex: 0 1 125px;
                width: 125px;
                max-width: 125px;
                height: 27px;
                padding: 0 7px;
                font-size: 7px;
                background: #fff;
            }
            .mobile-store-search i { font-size: 8px; }
            .mobile-store-cart {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 25px;
                height: 27px;
                font-size: 12px;
                flex-shrink: 0;
            }
            .mobile-store-cart .store-cart-badge {
                min-width: 12px;
                height: 12px;
                font-size: 7px;
                top: -5px;
                right: -4px;
            }
            .store-benefits { display: none; }
            .store-content { grid-template-columns: 1fr; gap: 8px; padding: 8px; }
            .store-sidebar { display: none; }
            .store-results-top { margin-bottom: 7px; }
            .store-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
            .store-product-image { height: 84px; }
            .store-product { padding: 6px; }
            .store-bottom { grid-template-columns: 1fr; }

            .steps-row { flex-direction: column; align-items: center; gap: 25px; }
            .step-line { display: none; }
            
            .why-content { flex-direction: column; }
            .pricing-grid { grid-template-columns: 1fr; }
            .footer-container { grid-template-columns: 1fr 1fr; }
        }

        /* Desktop : On cache le slider mobile et le bouton CTA mobile, on garde celui dans la maquette */
        @media (min-width: 769px) {
            .mobile-slider-wrapper { display: none; }
            .mobile-cta-wrapper { display: none; }
        }

        /* =========================================
           MODE CLAIR / MODE SOMBRE
        ========================================= */
        html {
            color-scheme: light;
        }

        html[data-theme="dark"] {
            color-scheme: dark;
        }

        body, .header, .hero, .browser-window, .store-main-banner,
        .store-content, .store-sidebar, .store-sidebar-block,
        .store-product, .store-bottom, .section, .pricing-card {
            transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
        }

        .theme-toggle {
            width: 38px;
            height: 38px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--background);
            color: var(--text);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 15px;
            transition: all .25s ease;
        }

        .theme-toggle:hover {
            border-color: var(--primary);
            color: var(--primary-dark);
        }

        .mobile-theme-toggle {
            width: 100%;
            height: auto;
            min-height: 42px;
            justify-content: flex-start;
            gap: 10px;
            padding: 10px 12px;
            font-family: inherit;
            font-weight: 600;
            font-size: 16px;
        }

        html[data-theme="dark"] {
            --background: #0f1722;
            --light: #151f2c;
            --border: #2a3747;
            --text: #e7edf5;
            --muted: #a7b3c2;
            --dark: #f3f7fb;
            --primary-dark: #8acd00;
        }

        html[data-theme="dark"] body {
            background-color: #0f1722;
        }

        html[data-theme="dark"] #loader {
            background: #0f1722;
        }

        html[data-theme="dark"] .reveal-mask {
            background: #0f1722;
        }

        html[data-theme="dark"] .header {
            background-color: rgba(15, 23, 34, .94);
            border-bottom-color: #2a3747;
        }

        html[data-theme="dark"] .dropdown,
        html[data-theme="dark"] .nav-mobile {
            background: #151f2c;
            border-color: #2a3747;
        }

        html[data-theme="dark"] .dropdown a,
        html[data-theme="dark"] .nav-mobile a {
            color: #e7edf5;
        }

        html[data-theme="dark"] .hero {
            background: #0f1722;
        }

        html[data-theme="dark"] .badge {
            background: #151f2c;
            border-color: #2a3747;
            color: #a7b3c2;
        }

        /* Boutique */
        html[data-theme="dark"] .browser-window {
            background: #121b27;
            border-color: #2a3747;
            box-shadow: 0 10px 30px rgba(0,0,0,.28);
        }

        html[data-theme="dark"] .browser-top,
        html[data-theme="dark"] .slider-dots,
        html[data-theme="dark"] .categories-row {
            background: #121b27;
            border-color: #2a3747;
        }

        html[data-theme="dark"] .store-main-banner {
            background: #151f2c;
        }

        html[data-theme="dark"] .store-main-banner p,
        html[data-theme="dark"] .store-results-top p,
        html[data-theme="dark"] .store-sort,
        html[data-theme="dark"] .store-category,
        html[data-theme="dark"] .store-filter-label,
        html[data-theme="dark"] .store-promo span,
        html[data-theme="dark"] .store-newsletter span,
        html[data-theme="dark"] .store-rating {
            color: #a7b3c2 !important;
        }

        html[data-theme="dark"] .mobile-store-search,
        html[data-theme="dark"] .store-sort span,
        html[data-theme="dark"] .store-product,
        html[data-theme="dark"] .store-promo,
        html[data-theme="dark"] .store-newsletter {
            background: #182332;
            border-color: #2d3a4b;
            color: #e7edf5;
        }

        html[data-theme="dark"] .store-sidebar,
        html[data-theme="dark"] .store-sidebar-block {
            background: #121b27;
            border-color: #2a3747;
        }

        html[data-theme="dark"] .store-category.active {
            background: rgba(138,205,0,.12);
            color: #9be21a !important;
        }

        html[data-theme="dark"] .store-product-image {
            background: #202b39;
        }

        html[data-theme="dark"] .store-product h5,
        html[data-theme="dark"] .store-main-banner h3,
        html[data-theme="dark"] .store-sort span,
        html[data-theme="dark"] .store-benefit,
        html[data-theme="dark"] .cat-item {
            color: #edf3fa;
        }

        html[data-theme="dark"] .store-add {
            color: #102000;
        }

        html[data-theme="dark"] .section-light {
            background-color: #151f2c;
        }

        html[data-theme="dark"] .benefits-list.large li,
        html[data-theme="dark"] .pricing-card {
            background: #182332;
            border-color: #2a3747;
        }

        html[data-theme="dark"] .pricing-card .price,
        html[data-theme="dark"] .pricing-card h3 {
            color: #edf3fa;
        }

        html[data-theme="dark"] .cta-section {
            background-color: #78b800;
        }

        html[data-theme="dark"] .footer {
            background-color: #09111b;
        }

        @media (max-width: 768px) {
            .theme-toggle {
                width: 34px;
                height: 34px;
                border-radius: 7px;
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            .logo img { height: 32px; }
            .hero h1 { font-size: 28px; }
            .cat-item { font-size: 11px; }
            .section-title { font-size: 26px; }
            .cta-section h2 { font-size: 26px; }
            .footer-container { grid-template-columns: 1fr; }
        }