/* ═══ Base commune : galerie + tunnel de commande ═══ */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
:root{
  --bg:#0A0A0B; --bg2:#111113; --bg3:#17171A; --line:rgba(255,255,255,.10);
  --ink:#EDEDEF; --dim:#8E8E96; --dim2:#B9B9C1; --accent:#E9E9EC;
  --ok:#7AC62F; --bad:#FF8A80;
}
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  line-height:1.55; overflow-x:hidden;
}
img{ display:block; max-width:100%; -webkit-user-drag:none; user-select:none; }
a{ color:inherit; }
::selection{ background:#2C2C31; }
.wrap{ max-width:1320px; margin:0 auto; padding:0 26px; }
@media(max-width:620px){ .wrap{ padding:0 16px; } }

/* ─── En-tête ─── */
header{
  position:fixed; inset:0 0 auto 0; z-index:60; padding:14px 24px;
  background:linear-gradient(180deg, rgba(10,10,11,.94), rgba(10,10,11,.55) 70%, rgba(10,10,11,0));
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  display:flex; align-items:center; gap:20px; transition:background .3s ease;
}
header.solid{ background:rgba(10,10,11,.95); border-bottom:1px solid var(--line); }
/* logo CVXF : les 4 lettres en carré (CV / XF), dans la police des titres des affiches (Inter gras) */
.wordmark{ display:grid; grid-template-columns:repeat(2, .72em); grid-auto-rows:.8em; place-items:center;
  font:700 21px/1 Inter, system-ui, sans-serif; letter-spacing:-.02em; text-decoration:none; color:var(--ink); flex:none; }
.search{ position:relative; flex:1; max-width:400px; }
.search svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:15px; height:15px; stroke:var(--dim); fill:none; stroke-width:2; pointer-events:none; }
.search input{ width:100%; font:inherit; font-size:14px; color:var(--ink); background:rgba(255,255,255,.07); border:1px solid var(--line); border-radius:999px; padding:9px 34px 9px 36px; }
.search input:focus{ outline:none; border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.11); }
.search input::placeholder{ color:var(--dim); }
.search .clr{ position:absolute; right:9px; top:50%; transform:translateY(-50%); width:20px; height:20px; border:none; border-radius:50%; cursor:pointer; background:rgba(255,255,255,.16); color:var(--ink); font-size:12px; display:none; align-items:center; justify-content:center; }
.search.filled .clr{ display:flex; }
.cats{ display:flex; gap:5px; flex:none; margin-left:auto; }
.cats button{ font:inherit; font-size:12.5px; letter-spacing:.14em; text-transform:lowercase; padding:8px 14px; border-radius:999px; cursor:pointer; border:1px solid transparent; background:transparent; color:var(--dim); transition:all .2s; }
.cats button:hover{ color:var(--ink); }
.cats button.on{ background:var(--ink); color:#0A0A0B; }
.cats button.empty{ color:#5A5A62; }
/* sans dimension explicite, un SVG en ligne est calculé à 0×0 dans un bouton flex */
.cats button svg{ display:block; width:21px; height:21px; }
.cats button{ padding:7px 13px; line-height:0; }

/* bouton panier */
.cartbtn{
  position:relative; flex:none; width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--ink);
  cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s;
}
.cartbtn:hover{ background:rgba(255,255,255,.14); }
.cartbtn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; }
.cartbtn .n{
  position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; padding:0 5px;
  border-radius:999px; background:var(--ok); color:#0A0A0B;
  font-size:11px; font-weight:700; line-height:19px; text-align:center; display:none;
}
.cartbtn.has .n{ display:block; }

@media(max-width:900px){
  header{ flex-wrap:wrap; padding:12px 16px; gap:10px; row-gap:10px; }
  .wordmark{ font-size:19px; }
  .search{ order:3; flex:1 0 100%; max-width:none; }
  .cats{ margin-left:auto; }
}

/* ─── Panier (panneau latéral) ─── */
.cart-back{ position:fixed; inset:0; z-index:90; background:rgba(6,6,8,.7); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .3s; }
.cart-back.on{ opacity:1; pointer-events:auto; }
.cart{
  position:fixed; z-index:91; top:0; right:0; bottom:0; width:min(420px,100vw);
  background:var(--bg2); border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .35s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column;
}
.cart.on{ transform:none; }
.cart h3{ font-size:16px; font-weight:600; letter-spacing:-.01em; }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
.cart-x{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:16px; cursor:pointer; }
.cart-x:hover{ background:rgba(255,255,255,.1); }
.cart-items{ flex:1; overflow-y:auto; padding:8px 22px; }
.ci{ display:grid; grid-template-columns:56px 1fr auto; gap:13px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line); }
.ci img{ width:56px; height:56px; object-fit:cover; border-radius:3px; background:var(--bg3); }
.ci .nm{ font-size:14px; font-weight:600; line-height:1.25; }
.ci .sub{ font-size:12px; color:var(--dim); margin-top:3px; }
.ci .pr{ font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.qty{ display:inline-flex; align-items:center; gap:9px; margin-top:7px; }
.qty button{ width:23px; height:23px; border-radius:5px; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; font-size:13px; line-height:1; }
.qty button:hover{ background:rgba(255,255,255,.11); }
.qty span{ font-size:13px; min-width:14px; text-align:center; font-variant-numeric:tabular-nums; }
.ci .rm{ background:none; border:none; color:var(--dim); font-size:11.5px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:0; margin-top:6px; display:block; }
.ci .rm:hover{ color:var(--bad); }
.cart-empty{ padding:46px 0; text-align:center; color:var(--dim); font-size:14.5px; }
.cart-foot{ padding:18px 22px 24px; border-top:1px solid var(--line); }
.cart-line{ display:flex; justify-content:space-between; font-size:14px; color:var(--dim); margin-bottom:7px; }
.cart-tot{ display:flex; justify-content:space-between; font-size:18px; font-weight:700; margin:10px 0 15px; }
.cart-tot b{ font-variant-numeric:tabular-nums; }

/* ─── Boutons ─── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:inherit; font-weight:600; font-size:15px; text-decoration:none;
  background:var(--ink); color:#0A0A0B; border:none; border-radius:999px;
  padding:14px 28px; cursor:pointer; transition:transform .18s, filter .18s;
}
.btn:hover{ transform:translateY(-2px); filter:brightness(.93); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; filter:none; }
.btn.full{ width:100%; }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn.ghost:hover{ background:rgba(255,255,255,.08); filter:none; }

/* ─── Formulaires ─── */
label{ display:block; font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--dim); margin-bottom:7px; }
input,textarea,select{ width:100%; background:var(--bg2); color:var(--ink); font:inherit; font-size:15px; border:1px solid var(--line); border-radius:8px; padding:12px 13px; }
input:focus,textarea:focus,select:focus{ outline:none; border-color:rgba(255,255,255,.42); }
input:invalid:not(:placeholder-shown){ border-color:rgba(255,138,128,.5); }
textarea{ resize:vertical; min-height:80px; }
::placeholder{ color:#55555E; }
.field{ margin-bottom:14px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:520px){ .row2{ grid-template-columns:1fr; } }

footer{ border-top:1px solid var(--line); padding:24px 0 38px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; letter-spacing:.1em; color:var(--dim); }
footer a{ text-decoration:none; }
footer a:hover{ color:var(--ink); }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition-duration:.01ms !important; } }