:root{
  /* Palette — thème du logo : noir mat, crème, gris chauds sombres */
  --bg:#0b0b0a; --surface:#151412; --surface-2:#1d1b18; --line:#2b2822; --line-soft:#24221d;
  --ivory:#f4efe2; --muted:#9c9490; --muted-dim:#645e54;
  --gold:#f4efe2; --gold-light:#cfc4a8; --gold-deep:#ffffff;
  --danger:#e2685a; --ok:#7fae5f; --pending:#d9a13b;
  --radius:2px;
  --ease:cubic-bezier(.16,.8,.28,1);
  --shadow-lg:0 30px 70px -20px rgba(0,0,0,.55);
  --shadow-sm:0 10px 24px -12px rgba(0,0,0,.45);
  /* verre — surfaces translucides sombres */
  --glass-bg:rgba(20,19,17,.55);
  --glass-bg-strong:rgba(14,13,12,.78);
  --glass-border:rgba(244,239,226,.14);
  --glass-shine:rgba(244,239,226,.18);
  --glass-shadow:0 20px 50px -18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
  --glass-blur:22px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  background:var(--bg); color:var(--ivory); font-family:'Inter',sans-serif; font-weight:400;
  line-height:1.6; -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden;
}
/* grain / texture tactile — évite le fond noir plat, donne du relief au laqué */
body::before{
  content:''; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.08; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--gold); color:var(--bg);}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--line); border:2px solid var(--bg); border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold-deep);}

.display{font-family:'Anton',sans-serif; font-weight:400; letter-spacing:.01em; text-transform:uppercase;}
.eyebrow{font-family:'Inter',sans-serif; font-weight:500; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:9px;}
.eyebrow::before{content:''; width:14px; height:1px; background:var(--gold-deep);}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px; position:relative; z-index:2;}

/* reveal au scroll — discret, une seule direction, pas de rebond */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-stagger.in-view > *{transition-delay:calc(var(--i,0) * 70ms);}

.marquee{background:var(--surface); color:var(--gold); overflow:hidden; white-space:nowrap; border-bottom:1px solid var(--line); position:relative; z-index:3;}
.marquee-track{display:inline-block; padding:9px 0; animation:scroll 46s linear infinite; font-family:'Inter',sans-serif; font-weight:500; font-size:11px; letter-spacing:.24em;}
.marquee-track span{padding:0 24px; opacity:.85;}
.marquee-track span::after{content:'✦'; margin-left:24px; color:var(--gold-deep); font-size:8px; vertical-align:middle;}
@keyframes scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* Bannière codes promo actifs — tout en haut du site, au-dessus du marquee */
.promo-banner{background:var(--ivory); color:var(--bg); position:relative; z-index:4;}
.promo-banner-inner{max-width:1180px; margin:0 auto; padding:9px 32px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 14px;}
.promo-pill{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:100px; padding:5px 8px 5px 14px; font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.03em; cursor:pointer; transition:background .25s var(--ease), border-color .25s var(--ease);}
.promo-pill:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32);}
.promo-pill b{font-family:'Inter',sans-serif; font-weight:700; letter-spacing:.08em; color:#fff;}
.promo-pill .promo-copy-tag{font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-dim); background:rgba(255,255,255,.1); border-radius:100px; padding:3px 8px;}
.promo-pill.copied .promo-copy-tag{color:#fff; background:rgba(255,255,255,.25);}

header{position:sticky; top:0; z-index:50; background:rgba(11,11,10,.6); backdrop-filter:blur(18px) saturate(1.6); -webkit-backdrop-filter:blur(18px) saturate(1.6); border-bottom:1px solid rgba(43,40,34,.7); transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); box-shadow:0 1px 0 rgba(255,255,255,.03) inset;}
header.scrolled{background:rgba(11,11,10,.85); box-shadow:0 12px 34px -18px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.03) inset; border-color:var(--line);}
.nav{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:22px 0; gap:20px;}
.nav .logo{grid-column:2; justify-self:center;}
.nav .nav-links{grid-column:1; justify-self:start;}
.nav .nav-actions{grid-column:3; justify-self:end;}
.logo{font-family:'Anton',sans-serif; font-weight:400; font-size:22px; letter-spacing:.06em; text-transform:uppercase; display:inline-flex; align-items:center;}
.logo span{color:var(--gold);}
.logo-img{height:38px; width:auto; display:block; transition:opacity .3s;}
.logo-img:hover{opacity:.85;}
footer .logo-img{height:44px;}
.nav-links{display:flex; align-items:center; gap:40px;}
.nav-links a{font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); position:relative; padding-bottom:3px; transition:color .3s;}
.nav-links a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--gold); transition:right .4s var(--ease);}
.nav-links a:hover{color:var(--ivory);}
.nav-links a:hover::after{right:0;}
.cart-btn{position:relative; overflow:hidden; display:flex; align-items:center; gap:10px; background:var(--glass-bg); backdrop-filter:blur(10px) saturate(1.4); -webkit-backdrop-filter:blur(10px) saturate(1.4); border:1px solid var(--glass-border); color:var(--ivory); padding:11px 20px; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; border-radius:100px; transition:border-color .3s, background .3s, transform .3s var(--ease), box-shadow .3s var(--ease); box-shadow:0 6px 18px -10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);}
.cart-btn::before{content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,.15), transparent); transform:skewX(-18deg); transition:left .6s var(--ease);}
.cart-btn:hover{border-color:var(--gold); background:var(--glass-bg-strong); transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);}
.cart-btn:hover::before{left:130%;}
.cart-count{background:transparent; color:var(--gold); border:1px solid var(--gold); font-weight:600; font-size:10px; min-width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease);}
.cart-count.bump{transform:scale(1.35);}

/* ---------- Hero ---------- */
.hero{position:relative; padding:132px 0 108px; overflow:hidden; border-bottom:1px solid var(--line);}
.hero::before{content:''; position:absolute; top:-10%; right:-6%; width:64%; height:120%; background:radial-gradient(ellipse at center, rgba(244,239,226,.05), transparent 68%); pointer-events:none;}
.hero-signature{position:absolute; top:50%; right:-6%; transform:translateY(-50%); width:min(46vw,560px); opacity:.9; pointer-events:none; z-index:1;}
.hero-signature svg{width:100%; height:auto; animation:lens-spin 120s linear infinite;}
@keyframes lens-spin{to{transform:rotate(360deg);}}
.hero-inner{max-width:640px; position:relative; z-index:2;}
.hero h1{font-size:clamp(46px,7vw,80px); line-height:0.98; margin:20px 0 26px; font-weight:400; letter-spacing:0;}
.hero h1 em{color:var(--gold); font-style:normal; font-weight:400;}
.hero p{font-size:16px; color:var(--muted); max-width:440px; margin-bottom:40px; line-height:1.85;}
.hero-cta-row{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.hero-meta{display:flex; gap:34px; margin-top:64px; padding-top:28px; border-top:1px solid var(--line); max-width:520px;}
.hero-meta div b{display:block; font-family:'Anton',sans-serif; font-size:22px; font-weight:400; color:var(--gold-light);}
.hero-meta div span{font-size:10px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase;}

.btn-primary{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:12px; background:transparent; color:var(--ivory); font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; padding:17px 30px; border:1px solid var(--gold); border-radius:var(--radius); transition:color .4s var(--ease); isolation:isolate;}
.btn-primary::before{content:''; position:absolute; inset:0; background:linear-gradient(100deg, var(--gold), var(--gold-light) 50%, var(--gold)); transform:translateX(-101%); transition:transform .45s var(--ease); z-index:-1;}
.btn-primary:hover{color:var(--bg);}
.btn-primary:hover::before{transform:translateX(0);}
.btn-primary:disabled{opacity:.4; cursor:not-allowed;}
.btn-ghost{display:inline-flex; align-items:center; gap:8px; background:transparent; color:var(--muted); border:1px solid var(--line); font-weight:500; font-size:12px; letter-spacing:.1em; text-transform:uppercase; padding:16px 26px; border-radius:var(--radius); transition:all .3s;}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}

.section{padding:104px 0; position:relative; z-index:2;}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:48px; gap:20px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:28px;}
.section-head h2{font-size:clamp(30px,4vw,42px); margin-top:12px;}
.section-head p{color:var(--muted); font-size:13px; max-width:320px; line-height:1.8;}

.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px;}
.chip{border:1px solid var(--line); background:transparent; color:var(--muted); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:9px 18px; border-radius:100px; transition:all .3s;}
.chip.active,.chip:hover{border-color:var(--gold); color:var(--gold); background:var(--glass-bg); backdrop-filter:blur(8px) saturate(1.3); -webkit-backdrop-filter:blur(8px) saturate(1.3); box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}

/* ---------- Cartes produit — présentées comme en vitrine ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(264px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line);}
.card{background:var(--bg); display:flex; flex-direction:column; position:relative; transition:background .4s;}
.card:hover{background:var(--surface);}
.card-img{aspect-ratio:1/1; overflow:hidden; background:var(--surface); position:relative; margin:14px 14px 0;}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease), filter .5s; filter:saturate(.92) contrast(1.03);}
.card:hover .card-img img{transform:scale(1.06); filter:saturate(1) contrast(1.05);}
.card-img::before,.card-img::after{content:'';position:absolute;width:16px;height:16px;pointer-events:none;opacity:0;transition:opacity .4s ease, width .4s var(--ease), height .4s var(--ease);z-index:2;}
.card-img::before{top:9px;left:9px;border-top:1px solid var(--gold);border-left:1px solid var(--gold);}
.card-img::after{bottom:9px;right:9px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold);}
.card:hover .card-img::before,.card:hover .card-img::after{opacity:1;width:24px;height:24px;}
.stock-tag{position:absolute; top:12px; left:12px; background:var(--gold-deep); color:var(--danger); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:5px 10px; border:1px solid var(--danger); border-radius:100px; z-index:3;}
.card-body{padding:20px 20px 6px; display:flex; flex-direction:column; gap:7px; flex:1;}
.card-cat{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); font-weight:500;}
.card-name{font-family:'Anton',sans-serif; font-size:16px; font-weight:400; letter-spacing:.01em; text-transform:uppercase;}
.card-price{font-family:'Inter',sans-serif; font-weight:600; font-size:15px; color:var(--gold-light); margin-top:auto; padding-top:14px;}
.variant-picker{display:flex; gap:8px; flex-wrap:wrap;}
.variant-select{background:rgba(255,255,255,.06); border:1px solid var(--glass-border); color:var(--ivory); font-size:12px; padding:7px 9px; border-radius:var(--radius); font-family:inherit;}
.variant-select:focus{outline:none; border-color:var(--gold);}
.card-actions{padding:14px 20px 22px; display:flex; gap:8px;}
.btn-add{position:relative; overflow:hidden; flex:1; background:transparent; color:var(--ivory); border:1px solid var(--line); padding:13px; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; border-radius:var(--radius); transition:all .3s;}
.btn-add:hover{background:var(--gold); color:var(--bg); border-color:var(--gold);}
.btn-add:disabled{opacity:.35; cursor:not-allowed;}
.empty-state{text-align:center; padding:80px 20px; color:var(--muted); grid-column:1/-1; font-family:'Anton',sans-serif; font-size:17px; text-transform:uppercase; letter-spacing:.02em;}

/* ---------- Savoir-faire (processus réel — l'ordre porte l'information) ---------- */
.process{border-top:1px solid var(--line); background:var(--surface); position:relative; overflow:hidden;}
.process::before{content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 15% 20%, rgba(244,239,226,.04), transparent 55%); pointer-events:none;}
.process-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:8px; position:relative;}
.process-grid::before{content:''; position:absolute; top:19px; left:0; right:0; height:1px; background:var(--line); z-index:0;}
@media (max-width:860px){.process-grid{grid-template-columns:1fr 1fr; row-gap:44px;} .process-grid::before{display:none;}}
@media (max-width:520px){.process-grid{grid-template-columns:1fr;}}
.process-step{position:relative; padding-right:24px; z-index:1;}
.process-num{font-family:'Anton',sans-serif; font-size:15px; color:var(--gold); width:38px; height:38px; border:1px solid var(--gold-deep); border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface); margin-bottom:20px;}
.process-step h4{font-family:'Anton',sans-serif; font-size:17px; font-weight:400; margin-bottom:10px; text-transform:uppercase;}
.process-step p{font-size:13px; color:var(--muted); line-height:1.8; max-width:230px;}

section#about{border-top:1px solid var(--line); background:var(--bg); position:relative;}
section#about::before{content:''; position:absolute; top:0; left:50%; width:1px; height:64px; background:linear-gradient(var(--gold-deep),transparent); transform:translateX(-50%);}

footer{border-top:1px solid var(--line); padding:56px 0 44px; margin-top:0; position:relative; z-index:2;}
.foot-row{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px;}
footer p{color:var(--muted); font-size:12px; letter-spacing:.02em;}
.foot-links{display:flex; gap:28px; flex-wrap:wrap;}
.foot-links a{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); transition:color .3s;}
.foot-links a:hover{color:var(--gold);}

/* ---------- Panier ---------- */
.overlay{position:fixed; inset:0; background:rgba(21,19,16,.42); z-index:90; opacity:0; pointer-events:none; transition:opacity .45s var(--ease); backdrop-filter:blur(6px) saturate(1.2); -webkit-backdrop-filter:blur(6px) saturate(1.2);}
.overlay.open{opacity:1; pointer-events:auto;}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(440px,100%); background:var(--glass-bg-strong); backdrop-filter:blur(var(--glass-blur)) saturate(1.5); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5); border-left:1px solid var(--glass-border); z-index:95; transform:translateX(100%); transition:transform .5s var(--ease); display:flex; flex-direction:column; box-shadow:var(--glass-shadow); overflow-y:auto;}
.drawer.open{transform:translateX(0);}
.drawer-head{position:sticky; top:0; z-index:2; background:var(--glass-bg-strong); backdrop-filter:blur(var(--glass-blur)) saturate(1.5); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5); padding:26px 26px 22px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between; flex-shrink:0;}
.drawer-head h3{font-family:'Anton',sans-serif; font-weight:400; font-size:19px; text-transform:uppercase; letter-spacing:.02em;}
.close-btn{background:rgba(255,255,255,.06); backdrop-filter:blur(6px); border:1px solid var(--glass-border); width:32px; height:32px; border-radius:50%; color:var(--muted); font-size:18px; line-height:1; transition:all .3s; display:flex; align-items:center; justify-content:center;}
.close-btn:hover{color:var(--gold); border-color:var(--gold); transform:rotate(90deg);}
.drawer-body{flex-shrink:0; padding:20px 26px; min-height:80px;}
.cart-item{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);}
.cart-item img{width:64px; height:64px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line);}
.cart-item-info{flex:1; display:flex; flex-direction:column; gap:5px;}
.qty-row{display:flex; align-items:center; gap:12px; margin-top:4px;}
.qty-btn{width:24px; height:24px; border:1px solid var(--line); background:transparent; color:var(--ivory); border-radius:var(--radius); transition:border-color .2s;}
.qty-btn:hover{border-color:var(--gold); color:var(--gold);}
.remove-link{font-size:11px; color:var(--danger); text-decoration:underline; margin-left:auto; letter-spacing:.02em; cursor:pointer;}
.drawer-foot{padding:24px 26px; border-top:1px solid var(--line);}
.total-row{display:flex; justify-content:space-between; align-items:baseline; font-family:'Inter',sans-serif; font-size:16px; font-weight:700; margin-bottom:18px;}
.total-row span:last-child{color:var(--gold-light);}
.field{margin-bottom:14px;}
.field label{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:7px;}
.field input,.field textarea,.field select{width:100%; min-width:0; background:rgba(255,255,255,.05); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--glass-border); color:var(--ivory); padding:12px 13px; font-size:14px; border-radius:var(--radius); font-family:inherit; transition:border-color .25s, box-shadow .25s, background .25s;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--gold); background:rgba(255,255,255,.08); box-shadow:0 0 0 3px rgba(244,239,226,.1);}
.crypto-pay-box{margin-top:16px; padding-top:16px; border-top:1px solid var(--line-soft);}
.crypto-qr{display:block; margin:0 auto 16px; width:140px; height:140px; border-radius:var(--radius); border:1px solid var(--line); background:#fff; padding:8px;}
.pay-methods{display:flex; gap:10px; margin:16px 0;}
.pay-method{flex:1; padding:13px; background:rgba(255,255,255,.04); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--glass-border); border-radius:var(--radius); text-align:center; font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); transition:all .25s;}
.pay-method.active{border-color:var(--gold); color:var(--gold); background:rgba(244,239,226,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
#paypal-buttons{margin-top:14px;}

.toast{position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(140%); background:rgba(244,239,226,.96); backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5); color:#0b0b0a; padding:15px 24px; border-radius:100px; font-size:13px; font-weight:600; letter-spacing:.02em; z-index:200; transition:transform .45s var(--ease); box-shadow:0 20px 40px -14px rgba(0,0,0,.5); border:1px solid rgba(0,0,0,.06);}
.toast.show{transform:translateX(-50%) translateY(0);}

/* ---------- Admin ---------- */
.admin-gate{max-width:380px; margin:80px auto; background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)) saturate(1.4); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4); border:1px solid var(--glass-border); padding:44px 40px; border-radius:14px; text-align:center; box-shadow:var(--glass-shadow);}
.admin-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:32px; flex-wrap:wrap; gap:14px;}
.tabs{display:flex; gap:8px; border-bottom:1px solid var(--line); margin-bottom:30px;}
.tab{padding:13px 20px; font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .25s;}
.tab.active{color:var(--gold); border-color:var(--gold);}
.admin-grid{display:grid; grid-template-columns:340px 1fr; gap:28px; align-items:flex-start;}
@media (max-width:860px){.admin-grid{grid-template-columns:1fr;}}
.panel{background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)) saturate(1.4); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4); border:1px solid var(--glass-border); padding:24px; border-radius:14px; box-shadow:var(--glass-shadow);}
.panel h3{font-family:'Anton',sans-serif; font-size:15px; font-weight:400; margin-bottom:18px; text-transform:uppercase; letter-spacing:.02em;}
.btn-block{width:100%; margin-top:6px;}
table{width:100%; border-collapse:collapse; font-size:13px;}
th,td{text-align:left; padding:11px 8px; border-bottom:1px solid var(--line);}
th{color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;}
tbody tr{transition:background .2s;}
tbody tr:hover{background:rgba(244,239,226,.03);}
.table-img{width:38px; height:38px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line);}
.row-actions{display:flex; gap:8px;}
.icon-btn{background:transparent; border:1px solid var(--line); color:var(--muted); padding:7px 12px; font-size:10px; border-radius:var(--radius); font-weight:500; letter-spacing:.06em; text-transform:uppercase; transition:all .25s;}
.icon-btn:hover{color:var(--gold); border-color:var(--gold);}
.icon-btn.danger:hover{color:var(--danger); border-color:var(--danger);}
.badge-low{color:var(--danger); font-weight:600;}
.stat-row{display:flex; gap:16px; margin-bottom:32px; flex-wrap:wrap;}
.stat{background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur)) saturate(1.4); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4); border:1px solid var(--glass-border); padding:20px 22px; flex:1; min-width:140px; border-radius:14px; position:relative; overflow:hidden; box-shadow:var(--glass-shadow); transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.stat:hover{transform:translateY(-3px); box-shadow:0 26px 60px -20px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);}
.stat::before{content:''; position:absolute; top:0; left:0; width:2px; height:100%; background:var(--gold-deep);}
.stat b{display:block; font-size:28px; font-family:'Anton',sans-serif; font-weight:400; color:var(--gold-light);}
.stat span{font-size:10px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase;}
.empty-mini{color:var(--muted); font-size:13px; padding:24px 0; text-align:center; font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.02em;}
.status-pill{font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:100px; display:inline-block;}
.status-paid{background:#e4ecdf; color:#3f5c37;}
.status-pending{background:#f3ead1; color:#8a6a1f;}
.status-failed{background:#f5e0dc; color:#8a3b30;}

/* ---------- Compte client ---------- */
.nav-actions{display:flex; align-items:center; gap:12px;}
.account-btn{position:relative; overflow:hidden; display:flex; align-items:center; gap:8px; background:var(--glass-bg); backdrop-filter:blur(10px) saturate(1.4); -webkit-backdrop-filter:blur(10px) saturate(1.4); border:1px solid var(--glass-border); color:var(--ivory); padding:11px 18px; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; border-radius:100px; transition:border-color .3s, background .3s, transform .3s var(--ease), box-shadow .3s var(--ease); box-shadow:0 6px 18px -10px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);}
.account-btn:hover{border-color:var(--gold); background:var(--glass-bg-strong); transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);}

.account-modal{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.94); width:min(420px,92vw); max-height:86vh; overflow-y:auto; background:var(--glass-bg-strong); backdrop-filter:blur(var(--glass-blur)) saturate(1.5); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5); border:1px solid var(--glass-border); border-radius:14px; z-index:96; opacity:0; pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease); box-shadow:var(--glass-shadow);}
.account-modal.open{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1);}
.account-modal-head{padding:24px 26px 18px; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; justify-content:space-between;}
.account-modal-head h3{font-family:'Anton',sans-serif; font-weight:400; font-size:19px; text-transform:uppercase; letter-spacing:.02em;}
.account-modal-body{padding:22px 26px 28px;}

.auth-tabs{display:flex; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:20px;}
.auth-tab{flex:1; padding:11px; background:var(--surface); color:var(--muted); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; transition:all .25s;}
.auth-tab.active{background:var(--surface-2); color:var(--gold);}

.google-btn{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; background:#ffffff; color:#1a1a1a; border:1px solid #d6d3ca; padding:12px; font-size:12px; font-weight:600; letter-spacing:.04em; border-radius:var(--radius); margin-bottom:16px; transition:opacity .25s, box-shadow .25s; box-shadow:var(--shadow-sm);}
.google-btn:hover{opacity:.9;}
.auth-divider{display:flex; align-items:center; gap:12px; color:var(--muted-dim); font-size:10px; letter-spacing:.1em; text-transform:uppercase; margin:16px 0;}
.auth-divider::before,.auth-divider::after{content:''; flex:1; height:1px; background:var(--line);}

.account-summary{text-align:center; padding:6px 0 18px;}
.account-avatar{width:56px; height:56px; border-radius:50%; background:var(--surface-2); border:1px solid var(--gold-deep); display:flex; align-items:center; justify-content:center; font-family:'Anton',sans-serif; font-weight:400; font-size:22px; color:var(--gold); margin:0 auto 14px;}
.account-summary b{display:block; font-size:16px; margin-bottom:3px;}
.account-summary span{font-size:12px; color:var(--muted);}

.order-history{margin-top:6px;}
.order-history-item{padding:14px 0; border-bottom:1px solid var(--line);}
.order-history-item:last-child{border-bottom:none;}
.order-history-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.order-history-row b{font-size:13px;}
.order-history-item small{color:var(--muted); font-size:11px;}

.auth-error{color:var(--danger); font-size:12px; margin:-6px 0 14px;}

/* ---------- Verre dynamique — halo qui suit le curseur (façon Apple) ---------- */
.card{--mx:50%; --my:50%;}
.card-img{isolation:isolate;}
.card-img::marker{content:none;}
.card-img .glass-sheen{content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity .45s var(--ease);
  background:radial-gradient(220px circle at var(--mx) var(--my), rgba(255,255,255,.15), rgba(255,255,255,.04) 38%, transparent 62%);
  mix-blend-mode:overlay;}
.card:hover .card-img .glass-sheen{opacity:1;}

.btn-primary,.btn-add,.btn-ghost{--mx:50%; --my:50%; isolation:isolate;}
.btn-primary::after,.btn-add::after{content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .35s var(--ease);
  background:radial-gradient(120px circle at var(--mx) var(--my), rgba(255,255,255,.15), transparent 60%);
  mix-blend-mode:overlay;}
.btn-primary:hover::after,.btn-add:hover::after{opacity:1;}

/* header qui se condense légèrement au scroll — profondeur de verre supplémentaire */
header .nav{transition:padding .4s var(--ease);}
header.scrolled .nav{padding:16px 0;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
  .glass-sheen,.btn-primary::after,.btn-add::after{display:none !important;}
}

/* ---------- Responsive mobile ---------- */
@media (max-width:760px){
  .wrap{padding:0 18px;}

  /* header : la nav 3-colonnes (logo centré + liens + actions) déborde sur mobile,
     on repasse en 2 zones simples et on masque les liens texte pour laisser
     la place au bouton compte + panier. */
  .nav{grid-template-columns:auto 1fr; padding:16px 0; gap:10px;}
  .nav .logo{grid-column:1; justify-self:start;}
  .nav .nav-links{display:none;}
  .nav .nav-actions{grid-column:2; justify-self:end;}
  .logo-img{height:30px;}
  .nav-actions{gap:8px;}
  .account-btn,.cart-btn{padding:9px 13px; font-size:10px; gap:6px;}

  /* hero : la grande signature graphique en position absolue chevauchait le texte
     sur petit écran (c'est probablement ce qui donnait l'impression de zones
     "décalées"). On la masque et on resserre les espacements. */
  .hero{padding:70px 0 52px;}
  .hero-signature{display:none;}
  .hero h1{font-size:clamp(32px,9vw,48px); margin:16px 0 20px;}
  .hero p{font-size:14px; margin-bottom:28px;}
  .hero-cta-row{gap:14px;}
  .hero-meta{gap:22px; margin-top:40px; padding-top:22px;}

  .section{padding:56px 0;}
  .section-head{flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:32px;}
  .section-head p{max-width:none;}

  /* grille produits : cartes plus petites pour tenir 2 par ligne proprement */
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  .card-name{font-size:15px;}
  .card-body{padding:14px 14px 4px;}
  .card-actions{padding:10px 14px 16px;}

  .foot-row{flex-direction:column; align-items:flex-start; gap:18px;}
  .foot-links{gap:18px;}

  .drawer{width:100%;}

  /* panel admin : les 5 onglets et les cartes de stats forçaient un
     débordement horizontal de toute la page sur mobile. On les rend
     scrollables/empilables proprement pour éviter que la page entière
     ne défile sur le côté. */
  .admin-header{flex-direction:column; align-items:flex-start; gap:14px;}

  .stat-row{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -18px 28px; padding:0 18px;}
  .stat{flex:0 0 auto; min-width:150px;}

  .tabs{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; margin:0 -18px 24px; padding:0 18px;}
  .tab{flex:0 0 auto;}

  /* formulaires du panel admin : les lignes "flex" (lien Alibaba + bouton,
     coût/marge, type/valeur code promo, expire le/utilisations max,
     variantes...) pouvaient forcer un débordement horizontal à cause de
     la largeur minimale intrinsèque des inputs/select. On les laisse
     s'empiler proprement sur mobile plutôt que de déborder — que le
     display:flex soit sur .field elle-même ou sur un enfant. */
  .panel .field[style*="display:flex"],
  .panel .field > div[style*="display:flex"]{flex-wrap:wrap;}
}

@media (max-width:420px){
  .account-btn,.cart-btn{padding:8px 11px; font-size:9px; letter-spacing:.08em;}
}