:root{ --bg:#0b1020; --panel:#111736; --panel-2:#0e142f; --text:#e8ecf1; --muted:#a9b3c7; --brand:#6ac8ff; --brand-2:#8effd6; --radius:18px; --shadow:0 12px 30px rgba(0,0,0,.35); --max:1200px; } /* Light theme overrides: toggled by adding `light` class on */ body.light{ --bg: #f6f8fb; --panel: #ffffff; --panel-2: #f3f7fb; --text: #071026; --muted: #5b6b7a; --brand: #0ea5ff; --brand-2: #7ee7c7; --overlay: rgba(255,255,255,0.75); --border: rgba(2,6,23,0.06); --ghost-border: rgba(2,6,23,0.08); --chip-bg: rgba(2,6,23,0.03); --hover-bg: rgba(2,6,23,0.03); --fieldset-border: rgba(2,6,23,0.06); --modal-overlay: rgba(2,6,23,0.06); --input-border: rgba(2,6,23,0.06); --card-border: rgba(2,6,23,0.04); --thumb-bg: #eef6ff; } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased} /* transitions pour une bascule de thème douce */ body, header, .card, .btn, .chip, .modal > .box, .drawer, input, select, textarea{transition:background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease} @media (prefers-reduced-motion: reduce){ body, header, .card, .btn, .chip, .modal > .box, .drawer, input, select, textarea{transition:none !important} } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .container{max-width:var(--max);margin:0 auto;padding:0 20px} .btn{display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.1rem;border-radius:999px;border:1px solid transparent;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#04101a;font-weight:700;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease;cursor:pointer;white-space:nowrap} .btn:hover{transform:translateY(-1px)} .btn.ghost{background:transparent;border-color:var(--ghost-border);color:var(--text);box-shadow:none} .chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border-radius:999px;background:var(--chip-bg);font-size:.8rem;color:var(--muted)} header{position:sticky;top:0;z-index:50;background:var(--overlay);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);margin-bottom:1rem;box-shadow:0 2px 8px rgba(0,0,0,.08)} .nav{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:72px;flex-wrap:wrap} .logo{display:flex;align-items:center;gap:.6rem;font-weight:800;letter-spacing:.3px} .logo svg{width:32px;height:32px;transition:transform .3s ease} .logo:hover svg{transform:rotate(-12deg)} nav ul{display:flex;gap:.8rem;list-style:none;margin:0;padding:0} .nav-actions{display:flex;align-items:center;gap:.8rem;flex-shrink:0} .nav-actions .btn{padding:.6rem .8rem} .menu-btn{display:none;background:none;border:0;color:var(--text);font-size:1.4rem;padding:.5rem;border-radius:8px;cursor:pointer;align-items:center;justify-content:center;width:40px;height:40px} .menu-btn:hover{background:var(--hover-bg)} .menu-close{display:none} nav a{padding:.6rem 1rem;border-radius:12px;color:var(--muted);font-weight:500;transition:all .2s ease;position:relative} nav a::after{content:'';position:absolute;inset:auto 0.8rem -4px;height:2px;background:var(--brand);opacity:0;transform:scaleX(.5);transition:all .2s ease} nav a:hover{color:var(--text)} nav a:hover::after{opacity:0.5;transform:scaleX(1)} nav a.active{color:var(--text);background:var(--hover-bg)} nav a.active::after{opacity:1;transform:scaleX(1)} .cart-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:999px;background:var(--brand);color:#002033;font-size:.8rem;font-weight:800;margin-left:.4rem} .hero{position:relative;padding:88px 0 48px;overflow:hidden} .hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:2rem;align-items:center} .hero h1{font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1.1;margin:0 0 1rem} .hero p.lead{font-size:1.1rem;color:var(--muted);max-width:60ch} .glow{position:absolute;inset:-20% -10% auto auto;aspect-ratio:1/1;border-radius:999px;background:radial-gradient(closest-side,rgba(106,200,255,.32),rgba(0,0,0,0));filter:blur(42px);pointer-events:none} .hero .actions{display:flex;gap:.8rem;margin-top:1.5rem;flex-wrap:wrap} main{padding-bottom:40px} .catalog{display:grid;grid-template-columns:280px 1fr;gap:1.2rem} aside{background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:1rem;height:fit-content;position:sticky;top:92px} .filters h3{margin:.2rem 0 1rem;font-size:1.05rem} .fieldset{border-top:1px solid rgba(255,255,255,.08);padding-top:.8rem;margin-top:.8rem} .fieldset:first-child{border-top:0;padding-top:0;margin-top:0} label{display:flex;align-items:center;gap:.5rem;margin:.45rem 0;color:var(--muted);font-size:.95rem;cursor:pointer} label:hover{color:var(--text)} input[type="checkbox"], input[type="radio"]{accent-color:#66d1ff;width:16px;height:16px;margin:0;flex-shrink:0;cursor:pointer} input[type="search"], select{width:100%;padding:.7rem .8rem;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:var(--panel-2);color:var(--text)} .toolbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:1rem 0} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .card{background:var(--panel);padding:.9rem;border-radius:16px;border:1px solid var(--card-border);box-shadow:var(--shadow);display:flex;flex-direction:column} .brands-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin:2rem 0} .brand-card{background:var(--panel);padding:2rem;border-radius:var(--radius);border:1px solid var(--card-border);transition:all .3s ease} .brand-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .brand-logo{width:200px;height:100px;margin-bottom:1.5rem} .brand-logo svg{width:100%;height:100%;color:var(--text)} .brand-name{font-size:1.5rem;font-weight:700;margin:0 0 .5rem} .brand-specs{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0} @media (max-width: 860px){.brands-grid{grid-template-columns:1fr}} .card .thumb{background:var(--thumb-bg, var(--panel-2));border-radius:12px;aspect-ratio:4/3;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:.9rem;color:var(--muted)} .card .thumb img{position:relative;inset:auto;width:80%;height:80%;object-fit:contain;object-position:center;display:block;margin:auto} /* Aperçu dans le formulaire d'ajout */ #imgPreview{width:120px;height:80px;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center} #imgPreviewImg{width:100%;height:100%;object-fit:cover;display:block} .card h3{margin:.6rem 0 .2rem;font-size:1.02rem} .price{font-weight:800;font-size:1.1rem} .vendor{color:var(--muted);font-size:.9rem} .card .actions{display:flex;gap:.5rem;margin-top:auto} .drawer{position:fixed;inset:0 0 0 auto;width:min(420px,90vw);background:var(--panel);transform:translateX(105%);transition:transform .25s ease;border-left:1px solid rgba(255,255,255,.08);z-index:60;display:flex;flex-direction:column} .drawer.open{transform:none} .drawer header{position:sticky;top:0;background:transparent;border-bottom:1px solid rgba(255,255,255,.08)} .drawer .content{padding:1rem;flex:1;overflow:auto} .line{display:flex;align-items:center;justify-content:space-between;gap:.6rem;border-bottom:1px dashed rgba(255,255,255,.08);padding:.6rem 0} .total{font-size:1.2rem;font-weight:800} .modal{position:fixed;inset:0;background:rgba(4,7,18,.7);display:none;align-items:center;justify-content:center;z-index:70} .modal.open{display:flex} .modal > .box{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:16px;max-width:720px;width:94vw;padding:1rem} form{display:grid;gap:.8rem} input, textarea, select{width:100%;padding:.8rem;border-radius:12px;border:1px solid var(--input-border);background:var(--panel-2);color:var(--text);font-size:1rem} .two{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} footer{border-top:1px solid rgba(255,255,255,.06);padding:28px 0;color:var(--muted)} /* Image zoom modal */ #imageZoomModal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.92); z-index:9999; align-items:center; justify-content:center; padding:2rem; animation:fadeIn .2s ease; overflow-y:auto; cursor:pointer; } #imageZoomModal.active{display:flex} #imageZoomModal .zoom-content{ display:flex; flex-direction:column; align-items:center; gap:1.5rem; max-width:800px; width:100%; cursor:default; } #imageZoomModal img{ max-width:100%; max-height:70vh; object-fit:contain; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5); } #imageZoomModal .zoom-info{ background:var(--panel); padding:1.5rem; border-radius:12px; width:100%; text-align:center; } #imageZoomModal .zoom-info h3{ margin:0 0 0.5rem 0; font-size:1.4rem; color:var(--brand); } #imageZoomModal .zoom-info .zoom-brand{ color:var(--muted); font-size:0.9rem; margin-bottom:1rem; } #imageZoomModal .zoom-info .zoom-desc{ color:var(--text); line-height:1.6; margin:0; } #imageZoomModal .zoom-info .zoom-price{ margin-top:1rem; font-size:1.3rem; font-weight:700; color:var(--brand-2); } @keyframes fadeIn{from{opacity:0}to{opacity:1}} @media (max-width: 1040px){.grid{grid-template-columns:repeat(2,1fr)}} @media (max-width: 860px){ .catalog{grid-template-columns:1fr} .toolbar{flex-direction:column;align-items:stretch} .grid{grid-template-columns:1fr} .nav{padding:.8rem 0} .menu-btn{display:inline-flex !important} nav ul{position:fixed;top:72px;left:0;right:0;background:var(--panel);flex-direction:column;padding:0;visibility:hidden;opacity:0;transform:translateY(-20px);transition:all .3s ease;pointer-events:none;z-index:40;box-shadow:0 8px 20px rgba(0,0,0,.3);border-bottom:1px solid var(--border);max-height:calc(100vh - 72px);overflow-y:auto} nav ul.open{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto} .menu-close{display:flex !important;align-items:center;justify-content:space-between;padding:1rem 1.2rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:1} .menu-close button{background:none;border:0;color:var(--text);cursor:pointer;padding:.5rem;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .2s ease} .menu-close button:hover{background:var(--hover-bg)} nav a{padding:1rem 1.2rem;border-radius:0;font-size:1rem;display:block} nav a::after{display:none} .container{padding:0 16px !important} .hero{padding:48px 0 32px} .hero-grid{grid-template-columns:1fr;gap:1.5rem} .hero h1{font-size:clamp(1.6rem,7vw,2.2rem);line-height:1.2} .hero p.lead{font-size:1rem} .hero .actions{gap:.6rem} .hero .actions .btn{width:100%;justify-content:center} aside{position:static;margin-bottom:1rem} .brands-grid{grid-template-columns:1fr;gap:1rem} .brand-card{padding:1.5rem} .brand-logo{width:150px;height:75px} .brand-name{font-size:1.2rem} .drawer{width:100vw} .modal > .box{width:calc(100vw - 2rem);padding:1rem} .two{grid-template-columns:1fr} } @media (max-width: 768px){ .hero-grid{grid-template-columns:1fr} .brands-grid{grid-template-columns:1fr} } @media (max-width: 480px){ .hero h1{font-size:1.5rem} .hero p.lead{font-size:0.95rem} .btn{padding:.7rem 1rem;font-size:0.9rem} .nav-actions .btn{padding:.5rem .7rem;font-size:0.85rem} .nav-actions .menu-btn{min-width:44px;min-height:44px} .card{padding:.7rem} .card h3{font-size:0.95rem} .price{font-size:1rem} .brand-logo{width:120px;height:60px} .brand-name{font-size:1.1rem} .logo{font-size:0.95rem} .logo svg{width:28px;height:28px} .nav{min-height:60px} .cart-badge{min-width:20px;height:20px;font-size:0.75rem} input, textarea, select{font-size:16px !important} .filters h3{font-size:1rem} label{font-size:0.9rem} .toolbar{gap:.6rem} .modal > .box{padding:.8rem} footer{font-size:0.85rem;padding:20px 0} #imageZoomModal{padding:1rem} #imageZoomModal .zoom-content{gap:1rem} #imageZoomModal img{max-height:60vh} #imageZoomModal .zoom-info{padding:1rem} #imageZoomModal .zoom-info h3{font-size:1.1rem} #imageZoomModal .zoom-info .zoom-price{font-size:1.1rem} }