/* CBD 420 — E-commerce */
:root {
    --green: #1b5e20; --green-light: #2e7d32; --green-accent: #4caf50;
    --dark: #1a1a2e; --dark2: #16213e; --text: #333; --muted: #888;
    --bg: #f8faf8; --white: #fff; --radius: 16px;
    --shadow: 0 4px 20px rgba(0,0,0,0.06); --shadow-hover: 0 8px 30px rgba(0,0,0,0.12);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--text); background:var(--bg); line-height:1.6; }
a { text-decoration:none; color:inherit; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }

/* NAV */
.nav { background:var(--dark); padding:0; position:sticky; top:0; z-index:100; box-shadow:0 2px 20px rgba(0,0,0,0.3); }
.nav .container { display:flex; justify-content:space-between; align-items:center; height:64px; }
.nav-brand { font-size:24px; font-weight:900; color:var(--white); }
.nav-brand span { color:var(--green-accent); }
.nav-links { display:flex; gap:8px; align-items:center; }
.nav-links a { color:rgba(255,255,255,0.8); font-size:14px; font-weight:500; padding:8px 16px; border-radius:8px; transition:all 0.2s; }
.nav-links a:hover { color:var(--white); background:rgba(255,255,255,0.1); }
.nav-links a.active { color:var(--white); background:rgba(76,175,80,0.2); }
.cart-btn { position:relative; cursor:pointer; background:none; border:none; color:rgba(255,255,255,0.8); font-size:20px; padding:8px 12px; border-radius:8px; transition:all 0.2s; }
.cart-btn:hover { color:var(--white); background:rgba(255,255,255,0.1); }
.cart-badge { position:absolute; top:2px; right:2px; background:var(--green-accent); color:var(--white); width:20px; height:20px; border-radius:50%; font-size:11px; font-weight:800; display:none; align-items:center; justify-content:center; }
.hamburger { display:none; background:none; border:none; color:var(--white); font-size:24px; cursor:pointer; }

/* HERO */
.hero { background:linear-gradient(135deg,var(--dark) 0%,var(--dark2) 100%); padding:80px 0 60px; color:var(--white); }
.hero-inner { display:flex; align-items:center; gap:60px; }
.hero-text { flex:1; }
.hero-text h1 { font-size:52px; font-weight:900; line-height:1.08; margin-bottom:16px; letter-spacing:-1.5px; }
.hero-text h1 span { color:var(--green-accent); }
.hero-text p { font-size:18px; color:rgba(255,255,255,0.7); margin-bottom:28px; max-width:500px; }
.hero-visual { flex:1; display:flex; justify-content:center; }
.hero-badges { display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
.hero-badge { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); padding:6px 14px; border-radius:8px; font-size:13px; color:rgba(255,255,255,0.8); }
.btn { display:inline-block; padding:14px 30px; border-radius:12px; font-size:16px; font-weight:700; transition:all 0.2s; border:none; cursor:pointer; }
.btn-green { background:linear-gradient(135deg,var(--green),var(--green-light)); color:var(--white); }
.btn-green:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(46,125,50,0.3); }
.btn-white { background:var(--white); color:var(--green); }
.btn-white:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.15); }
.btn-outline-w { background:transparent; color:var(--white); border:2px solid rgba(255,255,255,0.3); }
.btn-outline-w:hover { border-color:var(--white); }
.btn-row { display:flex; gap:12px; flex-wrap:wrap; }

/* SECTIONS */
section { padding:70px 0; }
section h2 { font-size:34px; font-weight:800; text-align:center; margin-bottom:12px; color:var(--dark); letter-spacing:-0.5px; }
.subtitle { text-align:center; font-size:16px; color:var(--muted); max-width:550px; margin:0 auto 40px; }

/* CATEGORY CARDS */
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cat-card { background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:all 0.3s; display:block; }
.cat-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.cat-card-img { height:200px; display:flex; align-items:center; justify-content:center; font-size:64px; }
.cat-card-img.fleurs { background:linear-gradient(135deg,#e8f5e9,#c8e6c9); }
.cat-card-img.resines { background:linear-gradient(135deg,#fff3e0,#ffe0b2); }
.cat-card-img.huiles { background:linear-gradient(135deg,#e3f2fd,#bbdefb); }
.cat-card-body { padding:20px; text-align:center; }
.cat-card-body h3 { font-size:20px; color:var(--dark); margin-bottom:6px; }
.cat-card-body p { font-size:14px; color:var(--muted); margin-bottom:12px; }
.cat-card-body .price-tag { color:var(--green); font-weight:700; font-size:15px; }

/* PRODUCT GRID */
.products-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.product-card { background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:all 0.3s; display:block; }
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.product-card-img { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:#f5f5f5; overflow:hidden; }
.product-card-img img { width:100%; height:100%; object-fit:cover; }
.product-card-body { padding:16px; }
.product-card-body .cat-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.product-card-body .cat-label.fleur { color:#2e7d32; }
.product-card-body .cat-label.resine { color:#e65100; }
.product-card-body .cat-label.huile { color:#1565c0; }
.product-card-body h3 { font-size:17px; color:var(--dark); margin-bottom:8px; }
.product-card-body .price { font-size:18px; font-weight:800; color:var(--green); }
.product-card-body .price small { font-size:12px; color:var(--muted); font-weight:400; }

/* PRODUCT PAGE */
.product-page { padding:40px 0 80px; }
.product-layout { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.product-img-box { background:var(--white); border-radius:var(--radius); padding:40px; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; }
.product-img-box img { max-width:100%; max-height:100%; object-fit:contain; border-radius:12px; }
.product-details h1 { font-size:32px; font-weight:800; color:var(--dark); margin-bottom:8px; }
.product-details .cat-tag { display:inline-block; padding:4px 12px; border-radius:6px; font-size:12px; font-weight:700; text-transform:uppercase; margin-bottom:16px; }
.product-details .cat-tag.fleur { background:#e8f5e9; color:#2e7d32; }
.product-details .cat-tag.resine { background:#fff3e0; color:#e65100; }
.product-details .cat-tag.huile { background:#e3f2fd; color:#1565c0; }
.product-details .description { font-size:15px; color:#555; line-height:1.8; margin-bottom:24px; }
.product-details .current-price { font-size:32px; font-weight:900; color:var(--green); margin-bottom:20px; }
.product-details .current-price small { font-size:14px; color:var(--muted); font-weight:400; }

/* Weight selector */
.weight-selector { display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.weight-btn { padding:10px 20px; border:2px solid #e0e0e0; border-radius:10px; background:var(--white); cursor:pointer; font-size:14px; font-weight:600; transition:all 0.2s; }
.weight-btn:hover { border-color:var(--green-accent); }
.weight-btn.active { border-color:var(--green); background:var(--green); color:var(--white); }
.weight-btn .ppg { display:block; font-size:11px; font-weight:400; color:var(--muted); margin-top:2px; }
.weight-btn.active .ppg { color:rgba(255,255,255,0.8); }

/* Quantity */
.qty-selector { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.qty-selector label { font-size:14px; font-weight:600; color:var(--muted); }
.qty-box { display:flex; align-items:center; border:2px solid #e0e0e0; border-radius:10px; overflow:hidden; }
.qty-box button { width:40px; height:40px; border:none; background:var(--white); font-size:18px; cursor:pointer; color:var(--text); }
.qty-box button:hover { background:#f0f0f0; }
.qty-box span { width:40px; text-align:center; font-weight:700; font-size:16px; }

.add-to-cart { width:100%; padding:16px; font-size:18px; }

/* Trust strip */
.trust-strip { background:var(--white); border-top:1px solid #e8f5e9; border-bottom:1px solid #e8f5e9; }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:24px 0; }
.trust-item { text-align:center; }
.trust-item .icon { font-size:28px; margin-bottom:6px; }
.trust-item h4 { font-size:14px; color:var(--dark); margin-bottom:2px; }
.trust-item p { font-size:12px; color:var(--muted); }

/* Product info tabs */
.info-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:24px; }
.info-card { background:#f8faf8; padding:16px; border-radius:12px; border-left:3px solid var(--green); }
.info-card h4 { font-size:14px; color:var(--green); margin-bottom:4px; }
.info-card p { font-size:13px; color:var(--muted); }

/* CART PANEL */
.cart-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:200; opacity:0; pointer-events:none; transition:opacity 0.3s; }
.cart-overlay.open { opacity:1; pointer-events:auto; }
.cart-panel { position:fixed; top:0; right:-420px; width:400px; max-width:90vw; height:100vh; background:var(--white); z-index:201; transition:right 0.3s; display:flex; flex-direction:column; box-shadow:-4px 0 30px rgba(0,0,0,0.2); }
.cart-panel.open { right:0; }
.cart-header { padding:20px 24px; border-bottom:1px solid #f0f0f0; display:flex; justify-content:space-between; align-items:center; }
.cart-header h3 { font-size:18px; font-weight:800; }
.cart-close { background:none; border:none; font-size:24px; cursor:pointer; color:var(--muted); }
#cart-items { flex:1; overflow-y:auto; padding:16px 24px; }
.cart-empty { text-align:center; padding:60px 20px; color:var(--muted); }
.cart-empty i { font-size:48px; margin-bottom:16px; display:block; }
.cart-item { display:flex; gap:12px; padding:14px 0; border-bottom:1px solid #f5f5f5; align-items:center; }
.cart-item-img { width:60px; height:60px; border-radius:10px; object-fit:contain; background:#f5f5f5; padding:4px; }
.cart-item-info { flex:1; }
.cart-item-name { font-size:14px; font-weight:700; }
.cart-item-weight { font-size:12px; color:var(--muted); }
.cart-item-price { font-size:14px; font-weight:700; color:var(--green); margin-top:2px; }
.cart-item-actions { display:flex; flex-direction:column; align-items:center; gap:8px; }
.cart-qty { display:flex; align-items:center; border:1px solid #e0e0e0; border-radius:6px; }
.cart-qty button { width:28px; height:28px; border:none; background:none; cursor:pointer; font-size:14px; }
.cart-qty span { width:24px; text-align:center; font-size:13px; font-weight:700; }
.cart-remove { background:none; border:none; color:#ccc; cursor:pointer; font-size:14px; }
.cart-remove:hover { color:#c62828; }
#cart-footer { padding:20px 24px; border-top:1px solid #f0f0f0; }
.free-ship-bar { font-size:13px; color:var(--muted); margin-bottom:12px; }
.free-ship-bar.done { color:var(--green); font-weight:600; }
.ship-progress { height:4px; background:#e8f5e9; border-radius:2px; margin-bottom:6px; }
.ship-fill { height:100%; background:var(--green-accent); border-radius:2px; transition:width 0.3s; }
.cart-totals .row { display:flex; justify-content:space-between; padding:4px 0; font-size:14px; color:var(--muted); }
.cart-totals .row.grand { font-size:18px; font-weight:800; color:var(--dark); padding-top:8px; border-top:2px solid var(--green); margin-top:8px; }
.cart-checkout-btn { display:block; width:100%; margin-top:16px; text-align:center; }

/* TOAST */
.cart-toast { position:fixed; bottom:-60px; left:50%; transform:translateX(-50%); background:var(--dark); color:var(--white); padding:14px 28px; border-radius:12px; font-size:14px; font-weight:600; z-index:300; transition:bottom 0.3s; box-shadow:0 8px 30px rgba(0,0,0,0.3); }
.cart-toast.show { bottom:30px; }
.cart-toast i { color:var(--green-accent); margin-right:8px; }

/* BREADCRUMB */
.breadcrumb { padding:16px 0; font-size:13px; color:var(--muted); }
.breadcrumb a { color:var(--green); font-weight:500; }
.breadcrumb span { margin:0 6px; }

/* CHECKOUT */
.checkout-grid { display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px; }
.checkout-form .form-group { margin-bottom:14px; }
.checkout-form label { display:block; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; margin-bottom:4px; }
.checkout-form input,.checkout-form select,.checkout-form textarea { width:100%; padding:12px 16px; border:2px solid #e8f5e9; border-radius:10px; font-size:14px; font-family:inherit; outline:none; }
.checkout-form input:focus,.checkout-form select:focus { border-color:var(--green); }
.checkout-form .row-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.order-summary { background:var(--white); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); position:sticky; top:80px; }
.order-summary h3 { font-size:18px; margin-bottom:16px; }
.summary-item { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #f5f5f5; font-size:14px; }
.summary-item .name { color:var(--text); }
.summary-item .price { font-weight:700; }

/* CTA SECTION */
.cta-section { background:linear-gradient(135deg,var(--green),var(--green-light)); text-align:center; color:var(--white); padding:60px 0; }
.cta-section h2 { color:var(--white); }

/* FOOTER */
.footer { background:var(--dark); color:rgba(255,255,255,0.6); padding:40px 0; text-align:center; font-size:13px; }
.footer a { color:var(--green-accent); }
.footer .f-brand { font-size:22px; font-weight:900; color:var(--white); margin-bottom:6px; }

/* PRICE TABLE */
.price-table { max-width:500px; margin:0 auto; }
.price-table table { width:100%; border-collapse:collapse; background:var(--white); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.price-table th { background:var(--green); color:var(--white); padding:12px 20px; font-size:14px; }
.price-table td { padding:12px 20px; border-bottom:1px solid #f0f0f0; }
.price-table tr:last-child { background:#e8f5e9; font-weight:700; }

/* RESPONSIVE */
@media (max-width:768px) {
    .hero-inner { flex-direction:column; text-align:center; }
    .hero-text h1 { font-size:36px; }
    .hero-badges { justify-content:center; }
    .hero-visual { display:none; }
    .cat-grid { grid-template-columns:1fr; }
    .products-grid { grid-template-columns:repeat(2,1fr); }
    .product-layout { grid-template-columns:1fr; }
    .trust-grid { grid-template-columns:repeat(2,1fr); }
    .checkout-grid { grid-template-columns:1fr; }
    .info-cards { grid-template-columns:1fr; }
    .nav-links { display:none; position:absolute; top:64px; left:0; right:0; background:var(--dark); flex-direction:column; padding:16px; gap:4px; }
    .nav-links.open { display:flex; }
    .hamburger { display:block; }
    .btn-row { justify-content:center; }
}

/* FAQ */
.faq-section { padding:60px 0 80px; }
.faq-category { margin-bottom:32px; }
.faq-category h3 { font-size:20px; color:var(--green); margin-bottom:16px; padding-bottom:8px; border-bottom:2px solid #e8f5e9; }
.faq-item { background:var(--white); border-radius:12px; margin-bottom:8px; box-shadow:var(--shadow); overflow:hidden; }
.faq-question { width:100%; padding:18px 24px; background:none; border:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:15px; font-weight:600; color:var(--dark); font-family:inherit; text-align:left; }
.faq-question i { transition:transform 0.3s; color:var(--green-accent); }
.faq-item.open .faq-question i { transform:rotate(180deg); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
.faq-answer p { padding:0 24px 18px; font-size:14px; color:#555; line-height:1.8; }

/* CONTACT */
.contact-section { padding:60px 0 80px; }
.contact-grid { display:grid; grid-template-columns:1.4fr 0.6fr; gap:40px; align-items:start; }
.contact-form .form-group { margin-bottom:16px; }
.contact-form label { display:block; font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; margin-bottom:4px; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; padding:12px 16px; border:2px solid #e8f5e9; border-radius:10px; font-size:14px; font-family:inherit; outline:none; transition:border-color 0.2s; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--green); }
.contact-form textarea { resize:vertical; min-height:140px; }
.contact-info-card { background:var(--white); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); }
.contact-info-card h3 { font-size:18px; margin-bottom:16px; color:var(--dark); }
.contact-info-item { display:flex; gap:12px; align-items:start; margin-bottom:16px; font-size:14px; color:#555; }
.contact-info-item i { color:var(--green-accent); font-size:18px; margin-top:2px; }
.contact-trust { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:32px; }
.contact-trust-item { text-align:center; padding:20px 12px; background:var(--white); border-radius:12px; box-shadow:var(--shadow); }
.contact-trust-item i { font-size:24px; color:var(--green-accent); margin-bottom:8px; display:block; }
.contact-trust-item h4 { font-size:14px; color:var(--dark); margin-bottom:4px; }
.contact-trust-item p { font-size:12px; color:var(--muted); }
.form-success { display:none; text-align:center; padding:40px; color:var(--green); }
.form-success i { font-size:48px; margin-bottom:16px; display:block; }

/* LEGAL PAGES (CGV, Mentions) */
.legal-page { padding:60px 0 80px; }
.legal-page .legal-content { background:var(--white); border-radius:var(--radius); padding:40px; box-shadow:var(--shadow); max-width:900px; margin:0 auto; }
.legal-page .legal-content h1 { font-size:30px; font-weight:800; color:var(--dark); margin-bottom:8px; }
.legal-page .legal-content .legal-update { font-size:13px; color:var(--muted); margin-bottom:32px; }
.legal-page .legal-content h2 { font-size:20px; font-weight:700; color:var(--dark); margin:28px 0 12px; padding-bottom:8px; border-bottom:2px solid #e8f5e9; }
.legal-page .legal-content h3 { font-size:16px; font-weight:600; color:var(--green); margin:20px 0 8px; }
.legal-page .legal-content p { font-size:14px; color:#555; line-height:1.8; margin-bottom:12px; }
.legal-page .legal-content ul { margin:8px 0 16px 24px; }
.legal-page .legal-content li { font-size:14px; color:#555; line-height:1.8; margin-bottom:4px; }
.legal-page .legal-content strong { color:var(--dark); }

/* FOOTER LINKS */
.footer-links { margin-top:12px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.footer-links a { color:rgba(255,255,255,0.6); font-size:13px; transition:color 0.2s; }
.footer-links a:hover { color:var(--green-accent); }

@media (max-width:768px) {
    .contact-grid { grid-template-columns:1fr; }
    .contact-trust { grid-template-columns:1fr; }
    .legal-page .legal-content { padding:24px 16px; }
}

/* CART SIDEBAR (created by JS) */
.cart-sidebar { position:fixed; top:0; right:-420px; width:400px; max-width:90vw; height:100vh; background:var(--white); z-index:2000; transition:right 0.3s ease; display:flex; flex-direction:column; box-shadow:-4px 0 30px rgba(0,0,0,0.2); }
.cart-sidebar.open { right:0; }
.cart-sidebar .cart-header { padding:20px 24px; border-bottom:1px solid #f0f0f0; display:flex; justify-content:space-between; align-items:center; }
.cart-sidebar .cart-header h3 { font-size:18px; font-weight:800; }
.cart-sidebar .cart-close { background:none; border:none; font-size:20px; cursor:pointer; color:var(--muted); padding:4px 8px; }
.cart-sidebar .cart-close:hover { color:var(--text); }
.cart-sidebar .cart-content { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.cart-sidebar .cart-items { flex:1; overflow-y:auto; padding:16px 24px; }
.cart-sidebar .cart-summary { padding:20px 24px; border-top:1px solid #f0f0f0; }
.cart-sidebar .cart-total { font-size:16px; font-weight:700; color:var(--dark); margin-bottom:4px; }

/* CART PAGE */
.cart-page-grid { display:grid; grid-template-columns:1.4fr 0.6fr; gap:32px; align-items:start; }
.cart-page-item { display:flex; align-items:center; gap:16px; padding:16px; background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:12px; }
.cart-page-img { width:80px; height:80px; border-radius:12px; overflow:hidden; background:#f5f5f5; flex-shrink:0; }
.cart-page-img img { width:100%; height:100%; object-fit:cover; }
.cart-page-info { flex:1; }
.cart-page-info h4 { font-size:16px; color:var(--dark); margin-bottom:4px; }
.cart-page-weight { font-size:13px; color:var(--muted); }
.cart-page-unit { font-size:12px; color:var(--muted); }
.cart-page-qty { display:flex; align-items:center; border:2px solid #e0e0e0; border-radius:10px; overflow:hidden; }
.cart-page-qty button { width:36px; height:36px; border:none; background:var(--white); font-size:16px; cursor:pointer; font-weight:700; }
.cart-page-qty button:hover { background:#f0f0f0; }
.cart-page-qty span { width:32px; text-align:center; font-weight:700; font-size:15px; }
.cart-page-price { font-size:18px; font-weight:800; color:var(--green); min-width:80px; text-align:right; }
.cart-page-remove { background:none; border:none; color:#ccc; cursor:pointer; font-size:16px; padding:8px; }
.cart-page-remove:hover { color:#c62828; }
@media (max-width:768px) {
    .cart-page-grid { grid-template-columns:1fr; }
    .cart-page-item { flex-wrap:wrap; }
    .cart-page-price { min-width:auto; }
}