/* The original catalog keeps its controls, dialogs and shopping behavior; this restyles it to the Marvani brand. */
:root { --ink:#292b26; --ink-2:#5f6259; --muted:#7a7c72; --line:#dedbd2; --bg:#f4f1ea; --card:#fbfaf6; --gold:#7b4e36; --gold-soft:#ece3d6; --sale:#9b3b2a; --radius:2px; --pic:#ece9e1; }
body { background:var(--bg); -webkit-font-smoothing:antialiased; }
::selection { background:#d9c5ad; color:#292b26; }

/* ---------- Header ---------- */
.top { background:rgba(244,241,234,.86); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); transition:box-shadow .5s; }
.top.is-scrolled { box-shadow:0 14px 30px -26px #292b2680; }
.top-inner { padding-top:16px; padding-bottom:12px; }
.catalog-label { font:400 28px/1.1 var(--serif); letter-spacing:-.02em; white-space:nowrap; }
.top .search { max-width:600px; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:0 2px; transition:border-color .4s; }
.search:focus-within { border-color:var(--ink); box-shadow:none; }
.search input::placeholder { color:var(--muted); }
.icon-btn { border-radius:0; background:transparent; font-size:13px; transition:background .35s,color .35s,border-color .35s; }
.icon-btn svg { stroke:currentColor; }
.icon-btn:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.count { background:var(--gold); border-radius:10px; }
.count.bump { animation:bump .6s var(--mv-ease); }
@keyframes bump { 30% { transform:scale(1.45); } }

/* Text tabs with an ink line that glides to the active one */
.tabs { position:relative; gap:30px; padding-bottom:0; }
.tabs button { padding:10px 0 14px; border-radius:0; font-size:12px; font-weight:500; color:var(--muted); transition:color .3s; }
.tabs button:hover { color:var(--ink); }
.tabs button.on { background:none; color:var(--ink); }
.tab-ink { position:absolute; left:0; bottom:6px; height:1px; width:var(--w,0); background:var(--ink); transform:translateX(var(--x,0)); transition:transform .7s var(--mv-ease),width .7s var(--mv-ease); pointer-events:none; }

/* ---------- Hero ---------- */
.hero { padding-top:64px; padding-bottom:20px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:10px 40px; }
.eyebrow { grid-column:1/-1; color:var(--muted); font-weight:500; font-size:9px; letter-spacing:.19em; margin-bottom:14px; }
.hero h1 { font:400 clamp(44px,6.4vw,96px)/.92 var(--serif); letter-spacing:-.045em; }
.title-line { display:block; overflow:hidden; padding-bottom:.07em; }
.title-line>* { display:block; }
.hero h1 em { color:var(--gold); font-weight:400; }
.hero .sub { margin:0; padding-bottom:12px; font-size:12px; line-height:1.8; color:var(--muted); text-align:right; }
#count { font:500 24px/1 var(--sans); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:lining-nums tabular-nums; margin-right:4px; }

/* ---------- Toolbar ---------- */
.toolbar { border-top:1px solid var(--line); margin-top:18px; padding-top:20px; }
.filters select { border-radius:0; height:44px; background-color:transparent; font-size:13px; transition:border-color .3s; }
.filters select:hover,.filters select:focus { border-color:var(--ink); }
.result { font-size:12px; letter-spacing:.04em; }
.chip { border-radius:0; }

/* ---------- Product cards ---------- */
.grid { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:44px 22px; }
.card { background:transparent; border:0; border-radius:0; overflow:visible; }
.card:hover { transform:none; box-shadow:none; }
.card:focus-visible { outline:2px solid var(--gold); outline-offset:6px; }
.pic { background:var(--pic); padding:26px; overflow:hidden; aspect-ratio:4/3.3; }
.pic img { mix-blend-mode:multiply; transition:opacity .5s,transform 1s var(--mv-ease); }
.pic img.alt { inset:26px; width:calc(100% - 52px); height:calc(100% - 52px); }
.card:hover .pic img { transform:scale(1.07); }
/* "Voir le modèle" bar slides up from the foot of the picture */
.pic::after { content:"Voir le modèle  ↗"; position:absolute; left:0; right:0; bottom:0; padding:12px 16px; background:var(--ink); color:var(--bg); font-size:10px; letter-spacing:.16em; text-transform:uppercase; transform:translateY(101%); transition:transform .6s var(--mv-ease); white-space:pre; }
@media(hover:hover) { .card:hover .pic::after { transform:none; } }
.tag { top:14px; left:14px; background:var(--gold); border-radius:0; font-size:10px; font-weight:500; letter-spacing:.06em; padding:4px 8px; }
.kind { top:14px; right:14px; background:transparent; color:var(--muted); border-radius:0; font-size:9px; font-weight:500; letter-spacing:.16em; padding:4px 0; }
.card .info { background:transparent; border-top:0; padding:16px 2px 0; gap:3px; }
.info .brand { font:500 23px/1.1 var(--serif); letter-spacing:-.01em; }
.info .model { font-size:12px; color:var(--muted); }
.info .variants { font-size:11px; letter-spacing:.04em; color:var(--gold); }
.price { padding-top:8px; }
.price .now { font-size:14px; font-weight:600; letter-spacing:.01em; }
.price s { font-size:12px; }
.empty { font:400 24px var(--serif); }

/* ---------- Footer ---------- */
.foot { padding:40px 24px 44px; font-size:12px; color:var(--muted); }
.foot b { font:500 20px var(--serif); color:var(--ink); letter-spacing:.06em; }
.foot .contact { margin-top:8px; } .foot .contact a { color:var(--ink); }

/* ---------- Product sheet, drawers, forms ---------- */
dialog { border-radius:2px; background:var(--card); box-shadow:0 40px 90px -30px #1f221d99; }
dialog::backdrop { background:rgba(31,34,29,.55); backdrop-filter:blur(4px); }
.close { background:transparent; border:1px solid var(--line); font-size:22px; transition:transform .5s var(--mv-ease),background .3s,color .3s; }
.close:hover { transform:rotate(90deg); background:var(--ink); color:var(--bg); border-color:var(--ink); }
.m-gallery { background:var(--pic); border-right:0; }
.m-main img { mix-blend-mode:multiply; }
.m-thumbs button { border-radius:0; background:transparent; transition:border-color .3s; }
.m-thumbs button.on { border-color:var(--ink); box-shadow:none; }
.m-thumbs img { mix-blend-mode:multiply; }
.m-type { color:var(--muted); font-weight:500; font-size:10px; letter-spacing:.18em; }
.m-info h2 { font:400 46px/1 var(--serif); letter-spacing:-.03em; margin-top:10px; }
.m-model { font-size:13px; color:var(--muted); }
.m-price { border-color:var(--line); }
.m-price .now { font:500 30px/1 var(--sans); letter-spacing:-.02em; font-variant-numeric:lining-nums tabular-nums; }
.badge { background:var(--gold); border-radius:0; font-size:11px; font-weight:500; }
/* Fiche : autres coloris et tailles du même modèle */
.m-variants:empty { display:none; }
.m-vlabel { display:flex; align-items:baseline; flex-wrap:wrap; gap:0 6px; margin:22px 0 10px; font-size:12px; color:var(--muted); }
.m-vlabel b { color:var(--ink); font-weight:500; }
.m-vlabel span { color:var(--ink-2); }
.m-vlabel small { margin-left:auto; font-size:11px; }
.m-swatches { display:flex; flex-wrap:wrap; gap:8px; }
.m-swatches button { width:72px; aspect-ratio:4/3; padding:4px; background:var(--pic); border:1px solid transparent; cursor:pointer; transition:border-color .3s; }
.m-swatches button:hover { border-color:var(--line); }
.m-swatches button.on { border-color:var(--ink); }
.m-swatches img { width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.m-sizes { display:flex; flex-wrap:wrap; gap:8px; }
.m-sizes button { min-width:48px; padding:8px 12px; background:transparent; border:1px solid var(--line); font:500 12px var(--sans); color:var(--ink); cursor:pointer; transition:border-color .3s,background .3s,color .3s; }
.m-sizes button:hover { border-color:var(--ink); }
.m-sizes button.on { background:var(--ink); border-color:var(--ink); color:var(--bg); }
/* Fiche : « en bref », mesures et caractéristiques (chargées à l'ouverture) */
.m-tags { list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:-6px 0 0; padding:0; }
.m-tags:empty { display:none; }
.m-tags li { border:1px solid var(--line); padding:5px 10px; font-size:11px; letter-spacing:.03em; color:var(--ink-2); }
.m-note { margin:14px 0 0; padding-top:0; font-size:12px; }
.m-details { margin-top:30px; }
.m-sec { padding:22px 0 8px; border-top:1px solid var(--line); }
.m-sec h3 { margin:0 0 10px; font:400 25px/1 var(--serif); letter-spacing:-.01em; }
.m-sec dl { margin:0; }
.m-sec dl>div { display:grid; grid-template-columns:minmax(118px,42%) 1fr; gap:16px; padding:9px 0; border-bottom:1px solid #ebe8e0; }
.m-sec dl>div:last-child { border-bottom:0; }
.m-sec dt { color:var(--muted); font-size:12px; }
.m-sec dd { margin:0; font-size:13px; font-weight:500; font-variant-numeric:lining-nums; }
.m-sec dd small { display:block; margin-top:2px; color:var(--muted); font-size:11.5px; font-weight:400; line-height:1.4; }
.m-figure { display:block; width:100%; height:auto; margin:6px 0 12px; overflow:visible; }
.m-figure .frame { fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; }
.m-figure .dim { fill:none; stroke:var(--gold); stroke-width:1; }
.m-figure .lbl { font:600 12px var(--sans); fill:var(--gold); font-variant-numeric:lining-nums tabular-nums; }
.m-figure .cap { font:500 9px var(--sans); letter-spacing:.16em; text-transform:uppercase; fill:var(--muted); }
.m-calibre { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; margin:0 0 4px; padding:12px 14px; background:var(--pic); }
.m-calibre b { font:500 18px/1.2 var(--sans); letter-spacing:.02em; font-variant-numeric:lining-nums tabular-nums; }
.m-calibre span { font-size:11.5px; color:var(--muted); }
.m-skel i { display:block; height:14px; margin:16px 0; background:linear-gradient(90deg,#ece9e1 0,#f7f5f0 50%,#ece9e1 100%) 0 0/200% 100%; animation:mv-shimmer 1.4s linear infinite; }
.m-skel i:nth-child(even) { width:64%; }
@keyframes mv-shimmer { to { background-position:-200% 0; } }
.m-soon { color:var(--muted); font-size:13px; }
.m-thumbs { flex-wrap:wrap; }
.m-main img { cursor:zoom-in; }
/* Photo en plein écran, agrandissable */
dialog.zoom { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; border-radius:0; background:var(--pic); box-shadow:none; overflow:hidden; }
dialog.zoom::backdrop { background:var(--pic); backdrop-filter:none; }
html:has(dialog.zoom[open]) { overflow:hidden; }
.z-stage { position:absolute; inset:0; padding:64px 72px 96px; touch-action:none; user-select:none; cursor:zoom-in; overflow:hidden; }
.z-stage.zoomed { cursor:grab; }
.z-stage.grabbing { cursor:grabbing; }
.z-stage img { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transform-origin:50% 50%; will-change:transform; -webkit-user-drag:none; }
dialog.zoom .close { top:20px; right:20px; background:var(--card); }
.z-nav { position:absolute; top:50%; translate:0 -50%; width:48px; height:48px; border:1px solid var(--line); background:var(--card); color:var(--ink); font:300 30px/1 var(--sans); cursor:pointer; transition:background .3s,color .3s,border-color .3s; }
.z-nav.prev { left:20px; } .z-nav.next { right:20px; }
.z-nav:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.z-count { position:absolute; top:32px; left:24px; margin:0; font-size:12px; letter-spacing:.12em; color:var(--muted); font-variant-numeric:tabular-nums; }
.z-bar { position:absolute; bottom:24px; left:50%; translate:-50% 0; display:flex; background:var(--card); border:1px solid var(--line); }
.z-bar button { min-width:48px; height:44px; padding:0 12px; border:0; background:transparent; color:var(--ink); font:400 20px/1 var(--sans); cursor:pointer; transition:background .3s,color .3s; }
.z-bar #z-level { min-width:76px; font-size:12px; font-weight:500; letter-spacing:.04em; font-variant-numeric:tabular-nums; border-inline:1px solid var(--line); }
.z-bar button:hover:not(:disabled) { background:var(--ink); color:var(--bg); }
.z-bar button:disabled { color:var(--line); cursor:default; }
@media(max-width:640px) {
  .z-stage { padding:64px 0 88px; }
  .z-nav { top:auto; bottom:24px; translate:none; width:44px; height:44px; }
  .z-nav.prev { left:16px; } .z-nav.next { right:16px; }
}
/* La photo reste visible pendant qu'on lit les caractéristiques */
@media(min-width:901px) { .m-stick { position:sticky; top:28px; } }
.btn { border-radius:0; font-weight:500; font-size:13px; letter-spacing:.02em; transition:background .35s,border-color .35s,color .35s; }
.btn.primary:hover { background:var(--gold); }
.btn.ghost { background:transparent; }
.btn.ghost:hover { border-color:var(--ink); }
.btn.sm { border-radius:0; }
.qty,.qty.small,.field input,.field textarea,.g-search,.seg,.seg button,.form-msg,.edit-banner,.order-confirm,.line img,.toast { border-radius:0; }
.qty { background:transparent; }
.field input,.field textarea { background:#fff; }
.field input:focus,.field textarea:focus,.g-search:focus { border-color:var(--ink); box-shadow:none; }
/* Bouton « Afficher / Masquer » dans les champs mot de passe */
.space-hint { text-align:center; margin:10px 0 16px; font-size:12px; }
.done .btn { margin:4px; }
.empty-cart a { color:var(--gold); }
.vendor-code b { font-variant-numeric:lining-nums tabular-nums; letter-spacing:.03em; color:var(--gold); }
.pw { position:relative; display:block; }
.pw input { width:100%; padding-right:96px; }
.pw input::-ms-reveal { display:none; }
.pw-toggle { position:absolute; top:1px; right:1px; bottom:1px; padding:0 14px; border:0; border-left:1px solid var(--line); background:transparent; color:var(--gold); font-size:12px; font-weight:500; letter-spacing:.02em; cursor:pointer; transition:color .3s; }
.pw-toggle:hover { color:var(--ink); }
.d-head h2,.done h3,.h3 { font-weight:400; }
.d-head,.d-foot,.line,.order,.profile,.g,.check.all { border-color:var(--line); }
.line img { background:var(--pic); mix-blend-mode:multiply; border:0; }
.g-head span { font-weight:400; font-size:26px; }
.g.on .g-head span { color:var(--gold); }
.check:hover { background:var(--bg); }
.toast { background:var(--card); box-shadow:0 30px 60px -24px #1f221d80; }
.seg { background:#ebe7de; }
.seg button.on { box-shadow:none; }

/* ---------- Motion ---------- */
@media(prefers-reduced-motion:no-preference) {
  .hero .title-line>* { animation:mv-rise 1.15s var(--mv-ease) both; }
  .hero .title-line:nth-child(2)>* { animation-delay:.11s; }
  .hero .eyebrow { animation:mv-up .9s var(--mv-ease) .05s both; }
  .hero .sub { animation:mv-up .9s var(--mv-ease) .35s both; }
  /* Cards rise in a short stagger as each batch scrolls into view */
  .card.pre { opacity:0; transform:translateY(34px); }
  .card.in { transition:opacity .9s var(--mv-ease) var(--d,0ms),transform 1.1s var(--mv-ease) var(--d,0ms); }
  dialog[open] { animation:mv-sheet .7s var(--mv-ease); }
  dialog[open]::backdrop { animation:mv-fade .5s ease; }
  dialog.drawer[open] { animation:mv-from-right .75s var(--mv-ease); }
  dialog.drawer.left[open] { animation:mv-from-left .75s var(--mv-ease); }
  dialog.zoom[open] { animation:mv-fade .4s ease; }
  #modal[open] .m-info>* { animation:mv-up .8s var(--mv-ease) both; }
  #modal[open] .m-info>:nth-child(2) { animation-delay:.06s; } #modal[open] .m-info>:nth-child(3) { animation-delay:.12s; }
  #modal[open] .m-info>:nth-child(4) { animation-delay:.18s; } #modal[open] .m-info>:nth-child(5) { animation-delay:.24s; }
  #modal[open] .m-info>:nth-child(n+6) { animation-delay:.3s; }
  #menu[open] .g { animation:mv-up .7s var(--mv-ease) both; }
  #menu[open] .g:nth-child(2) { animation-delay:.07s; } #menu[open] .g:nth-child(3) { animation-delay:.14s; }
  .toast:not([hidden]) { animation:mv-toast .7s var(--mv-ease); }
}
@keyframes mv-rise { from { transform:translateY(110%); } }
@keyframes mv-up { from { opacity:0; transform:translateY(18px); } }
@keyframes mv-fade { from { opacity:0; } }
@keyframes mv-sheet { from { opacity:0; transform:translateY(34px) scale(.98); } }
@keyframes mv-from-right { from { transform:translateX(100%); } }
@keyframes mv-from-left { from { transform:translateX(-100%); } }
@keyframes mv-toast { from { opacity:0; transform:translate(-50%,28px); } }
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after { animation:none!important; transition:none!important; }
html.motion-paused .card.pre { opacity:1; transform:none; }

@media(max-width:640px) {
  .catalog-label { font-size:24px; }
  .hero { grid-template-columns:1fr; padding-top:36px; }
  .hero h1 { font-size:clamp(44px,13vw,60px); }
  .hero .sub { text-align:left; padding-bottom:0; }
  .hero .sub br { display:none; }
  .tabs { gap:22px; }
  .grid { gap:28px 12px; }
  .pic { padding:12px; }
  .pic img.alt { inset:12px; width:calc(100% - 24px); height:calc(100% - 24px); }
  .pic::after { display:none; }
  .card .info { padding-top:10px; }
  .info .brand { font-size:19px; }
  .m-info h2 { font-size:36px; }
  .m-price .now { font-size:26px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }