/* Maquettes du futur site Punishment Paris.
   Concept : le vestiaire comme une sortie de label. Grille éditoriale 12 colonnes, aplats plâtre, encre noire,
   un seul accent bordeaux tiré du cuir Vaillant. Thème clair assumé (la marque vit sur fond clair). */
:root {
  --paper: #f3f2ef;
  --chalk: #ffffff;
  --ink: #121212;
  --mute: #6b6862;
  --line: #d8d6d1;
  --oxblood: #5e1a1f;
  --oxblood-soft: #efe3e2;
  --ok: #2f5d3a;
  --display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --maxw: 1440px;
  color-scheme: light;
}
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.55 var(--body); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut-r); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bandeau maquette (signale qu'on est dans le dossier) */
.mock-bar { background: var(--ink); color: #cfcac2; font: 500 11px/1 var(--mono); letter-spacing: .08em; }
.mock-bar .wrap { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding-block: 9px; flex-wrap: wrap; }
.mock-bar a { color: #fff; text-decoration: none; }
.mock-bar nav { display: flex; gap: 14px; flex-wrap: wrap; }
.mock-bar nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

/* Annonce */
.announce { background: var(--oxblood); color: #f5ebe9; overflow: hidden; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.announce-track { display: flex; gap: 48px; padding-block: 10px; width: max-content; animation: tick 40s linear infinite; }
.announce-track span::before { content: "■"; margin-right: 12px; font-size: 7px; vertical-align: 2px; opacity: .7; }
@keyframes tick { to { transform: translateX(-50%); } }

/* En-tête */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.hdr .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 64px; gap: 16px; }
.wordmark { font: 800 22px/1 var(--display); font-stretch: 125%; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; justify-self: center; }
.wordmark small { display: block; font: 500 9px/1 var(--mono); letter-spacing: .5em; text-align: center; margin-top: 5px; color: var(--mute); }
.nav { display: flex; gap: 22px; align-items: center; }
.nav > a, .nav > .has-mega > button { font: 600 12px/1 var(--body); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; background: none; border: 0; padding: 8px 0; cursor: pointer; }
.nav > a:hover, .nav > .has-mega > button:hover { color: var(--oxblood); }
.tools { display: flex; gap: 18px; justify-content: flex-end; align-items: center; }
.tools a, .tools button { font: 600 12px/1 var(--body); text-transform: uppercase; letter-spacing: .1em; text-decoration: none; background: none; border: 0; cursor: pointer; padding: 8px 0; }
.cart-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 600 11px/1 var(--mono); margin-left: 6px; padding: 0 5px; }
.burger { display: none !important; }
.has-mega { position: static; }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px -30px rgba(0,0,0,.35); }
.mega .wrap { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)) 1.4fr; gap: 32px; padding-block: 28px 36px; }
.mega h3 { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 0 0 14px; }
.mega ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mega a { text-decoration: none; font-size: 15px; }
.mega a:hover { color: var(--oxblood); }
.mega-feature { position: relative; aspect-ratio: 4/3; background: #e4e1dc; overflow: hidden; max-width: 100%; }
.mega-feature img { width: 100%; height: 100%; object-fit: cover; }
.mega-feature span { position: absolute; left: 14px; bottom: 12px; color: #fff; font: 800 20px/1 var(--display); font-stretch: 115%; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0,0,0,.4); }

/* Médias et aplats de secours */
[data-media] { position: relative; background: #e2dfd9; overflow: hidden; }
[data-media] img { width: 100%; height: 100%; object-fit: cover; }
.is-missing { background: repeating-linear-gradient(135deg, #e2dfd9 0 14px, #dcd8d1 14px 28px); }
.ph-label { position: absolute; inset: auto 12px 12px 12px; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover { background: var(--oxblood); border-color: var(--oxblood); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn.light:hover { background: transparent; color: var(--paper); }
.btn.block { width: 100%; }
.link-arrow { font: 600 12px/1 var(--body); text-transform: uppercase; letter-spacing: .12em; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }

/* Héro accueil */
.hero { position: relative; color: #fff; background: #1a1a1a; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.hero-media img.on { opacity: 1; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.6)); }
.hero .wrap { position: relative; min-height: min(86vh, 860px); display: grid; align-content: end; padding-block: 120px 40px; gap: 26px; }
.hero h1 { font: 800 clamp(40px, 8.4vw, 132px)/.88 var(--display); font-stretch: 112%; text-transform: uppercase; letter-spacing: -.01em; margin: 0; max-width: 12ch; text-wrap: balance; }
.hero p { margin: 0; max-width: 46ch; font-size: 17px; color: #eee9e2; }
.hero-row { display: flex; gap: 16px 28px; align-items: center; flex-wrap: wrap; }
.hero-meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.3); padding-top: 14px; font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #d9d3cb; }
.hero-meta a { color: #fff; }
.dots { display: flex; gap: 8px; }
.dots button { width: 26px; height: 3px; padding: 0; border: 0; background: rgba(255,255,255,.4); cursor: pointer; }
.dots button[aria-current="true"] { background: #fff; }

/* Sections */
.sec { padding-block: clamp(56px, 8vw, 112px); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.sec-head h2 { font: 800 clamp(30px, 4.4vw, 60px)/.92 var(--display); font-stretch: 110%; text-transform: uppercase; margin: 6px 0 0; text-wrap: balance; }
.sec.ink { background: var(--ink); color: var(--paper); }
.sec.ink .eyebrow { color: #a8a39b; }

/* Grille produits */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 16px; }
.card { text-decoration: none; display: grid; gap: 12px; position: relative; }
.card .fig { aspect-ratio: 4/5; max-width: 100%; }
.card .fig img + img { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.card:hover .fig img + img { opacity: 1; }
.card .quick { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 4px; flex-wrap: wrap; opacity: 0; transform: translateY(6px); transition: .25s; }
.card:hover .quick, .card:focus-within .quick { opacity: 1; transform: none; }
.card .quick span { background: var(--paper); font: 500 11px/1 var(--mono); padding: 7px 8px; }
.card .quick span.out { color: var(--mute); text-decoration: line-through; }
.card-info { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; }
.card-info .n { font: 700 15px/1.2 var(--display); font-stretch: 105%; text-transform: uppercase; letter-spacing: .02em; }
.card-info .c { color: var(--mute); font-size: 14px; grid-column: 1; }
.card-info .pr { font: 500 13px/1 var(--mono); grid-row: 1; grid-column: 2; }
.track { position: absolute; top: 10px; left: 10px; z-index: 2; font: 500 10px/1 var(--mono); letter-spacing: .1em; background: var(--paper); padding: 5px 6px; }
.badge { position: absolute; top: 10px; right: 10px; z-index: 2; font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--oxblood); color: #fff; padding: 5px 7px; }

/* Univers (catégories) */
.cats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.cat { position: relative; aspect-ratio: 3/4; text-decoration: none; color: #fff; max-width: 100%; }
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.55)); }
.cat span { position: absolute; z-index: 1; left: 16px; bottom: 16px; right: 16px; display: flex; justify-content: space-between; align-items: end; font: 800 clamp(20px, 2.2vw, 30px)/1 var(--display); font-stretch: 115%; text-transform: uppercase; }
.cat small { font: 500 11px/1 var(--mono); letter-spacing: .08em; }
.cat img { transition: transform .8s ease; }
.cat:hover img { transform: scale(1.04); }

/* Manifeste */
.manifesto { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 80px); align-items: center; }
.manifesto blockquote { margin: 0; font: 700 clamp(26px, 3.4vw, 48px)/1.08 var(--display); font-stretch: 100%; text-wrap: balance; }
.manifesto blockquote em { font-style: normal; color: var(--oxblood); }
.sec.ink .manifesto blockquote em { color: #d9a9a6; }
.manifesto p { max-width: 58ch; color: inherit; opacity: .85; }
.manifesto .fig { aspect-ratio: 4/5; }

.pledges { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border-top: 1px solid var(--line); }
.pledges article { padding: 28px 24px 0 0; display: grid; gap: 10px; align-content: start; }
.pledges article + article { border-left: 1px solid var(--line); padding-left: 24px; }
.pledges h3 { font: 800 22px/1.05 var(--display); font-stretch: 110%; text-transform: uppercase; margin: 0; }
.pledges p { margin: 0; color: var(--mute); max-width: 42ch; }

.playlist { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; border: 1px solid #3a3a3a; padding: 24px; }
.vinyl { width: 88px; height: 88px; border-radius: 50%; background: radial-gradient(circle, var(--oxblood) 0 16%, #111 17% 19%, #222 20% 100%); box-shadow: inset 0 0 0 1px #333; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.playlist ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font: 400 13px/1.4 var(--mono); color: #cfcac2; }
.playlist ol li span { color: #fff; }

/* Newsletter + pied */
.news { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
.news h2 { font: 800 clamp(30px, 4.4vw, 60px)/.92 var(--display); font-stretch: 110%; text-transform: uppercase; margin: 6px 0 12px; }
.field-row { display: flex; border-bottom: 1px solid var(--ink); }
.field-row input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 16px/1 var(--body); padding: 14px 0; }
.field-row input:focus { outline: none; }
.field-row button { border: 0; background: none; font: 600 12px/1 var(--body); text-transform: uppercase; letter-spacing: .14em; cursor: pointer; }
.form-note { font-size: 13px; color: var(--mute); margin-top: 10px; min-height: 1.4em; }
.ftr { background: var(--ink); color: #cfcac2; padding-block: 56px 32px; font-size: 14px; }
.ftr-grid { display: grid; grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.ftr h4 { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8d887f; margin: 0 0 14px; }
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ftr a { text-decoration: none; }
.ftr a:hover { color: #fff; }
.ftr .wordmark { color: #fff; justify-self: start; font-size: clamp(28px, 4vw, 44px); }
.ftr-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid #2c2c2c; margin-top: 40px; padding-top: 20px; font: 400 11px/1.5 var(--mono); letter-spacing: .06em; color: #8d887f; }
.pay { display: flex; gap: 6px; flex-wrap: wrap; }
.pay span { border: 1px solid #3a3a3a; padding: 4px 6px; border-radius: 3px; }

/* Collection */
.crumbs { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding-block: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.plp-head { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: end; padding-block: 8px 32px; }
.plp-head h1 { font: 800 clamp(40px, 7vw, 104px)/.88 var(--display); font-stretch: 112%; text-transform: uppercase; margin: 8px 0 0; }
.plp-head p { margin: 0; color: var(--mute); max-width: 56ch; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: transparent; padding: 9px 14px; font: 500 13px/1 var(--body); cursor: pointer; border-radius: 999px; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip .k { font: 500 11px/1 var(--mono); opacity: .6; margin-left: 4px; }
.toolbar { position: sticky; top: calc(65px + env(safe-area-inset-top, 0px)); z-index: 20; background: var(--paper); border-block: 1px solid var(--line); }
.toolbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; padding-block: 12px; flex-wrap: wrap; }
.toolbar .right { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.toolbar select { font: 500 13px/1 var(--body); background: transparent; border: 1px solid var(--line); padding: 9px 10px; }
.toolbar label { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); display: flex; gap: 8px; align-items: center; }
.count { font: 500 12px/1 var(--mono); color: var(--mute); }
.view-toggle button { border: 1px solid var(--line); background: none; padding: 7px 9px; font: 500 11px/1 var(--mono); cursor: pointer; }
.view-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.grid.dense { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.seo-block { display: grid; grid-template-columns: 4fr 8fr; gap: 32px; border-top: 1px solid var(--line); padding-top: 32px; }
.seo-block h2 { font: 800 26px/1 var(--display); font-stretch: 110%; text-transform: uppercase; margin: 0; }
.seo-block p { margin: 0 0 12px; max-width: 70ch; color: #3b3935; }
.empty { padding: 48px 0; text-align: center; color: var(--mute); grid-column: 1 / -1; }

/* Fiche produit */
.pdp { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 4vw, 64px); align-items: start; padding-bottom: 64px; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gallery [data-media] { aspect-ratio: 4/5; max-width: 100%; }
.gallery [data-media]:first-child { grid-column: 1 / -1; }
.buy { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); display: grid; gap: 22px; }
.buy h1 { font: 800 clamp(34px, 4.6vw, 64px)/.9 var(--display); font-stretch: 112%; text-transform: uppercase; margin: 0; }
.buy .sub { font-size: 18px; color: var(--mute); margin-top: 6px; }
.buy .pr { font: 500 20px/1 var(--mono); }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.sizes button { min-height: 46px; border: 1px solid var(--line); background: var(--chalk); font: 500 13px/1 var(--mono); cursor: pointer; }
.sizes button:hover { border-color: var(--ink); }
.sizes button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sizes button:disabled { color: #b2aea7; text-decoration: line-through; cursor: not-allowed; background: transparent; }
.size-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.size-head button { background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; font-size: 13px; cursor: pointer; padding: 0; }
.reassure { display: grid; gap: 8px; font-size: 13px; color: var(--mute); padding: 0; margin: 0; list-style: none; }
.reassure li { display: flex; gap: 10px; }
.reassure li::before { content: "—"; color: var(--oxblood); }
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; padding: 16px 0; display: flex; justify-content: space-between; font: 600 12px/1 var(--body); text-transform: uppercase; letter-spacing: .12em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font: 400 18px/1 var(--mono); }
.acc details[open] summary::after { content: "–"; }
.acc .in { padding: 0 0 18px; color: #3b3935; max-width: 60ch; }
.acc table { border-collapse: collapse; font: 400 12px/1 var(--mono); width: 100%; }
.acc th, .acc td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; }
.hint { font: 500 12px/1.4 var(--mono); color: var(--oxblood); min-height: 1.4em; }
.sticky-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--paper); border-top: 1px solid var(--line); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: none; gap: 12px; align-items: center; }

/* Tiroir panier */
.scrim { position: fixed; inset: 0; background: rgba(18,18,18,.4); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--paper); z-index: 41; display: grid; grid-template-rows: auto auto 1fr auto; padding: calc(20px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) 20px; gap: 16px; transform: translateX(100%); transition: transform .35s ease; }
.drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-head h2 { font: 800 24px/1 var(--display); font-stretch: 110%; text-transform: uppercase; margin: 0; }
.drawer-head button { background: none; border: 0; font: 500 12px/1 var(--mono); cursor: pointer; text-transform: uppercase; letter-spacing: .08em; }
.ship-bar { font-size: 13px; }
.ship-bar .bar { height: 3px; background: var(--line); margin-top: 8px; }
.ship-bar .bar i { display: block; height: 100%; background: var(--oxblood); }
.lines { overflow: auto; display: grid; gap: 16px; align-content: start; }
.line { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: start; }
.line [data-media] { aspect-ratio: 4/5; }
.line .n { font: 700 14px/1.2 var(--display); text-transform: uppercase; }
.line .m { font-size: 13px; color: var(--mute); }
.qty { display: inline-flex; border: 1px solid var(--line); margin-top: 8px; }
.qty button { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; }
.qty span { width: 30px; display: grid; place-items: center; font: 500 12px/1 var(--mono); }
.line .pr { font: 500 13px/1 var(--mono); }
.line .rm { background: none; border: 0; font-size: 12px; color: var(--mute); text-decoration: underline; cursor: pointer; padding: 0; margin-top: 8px; display: block; }
.drawer-foot { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.sum-row { display: flex; justify-content: space-between; font-size: 14px; }
.sum-row.total { font: 700 16px/1 var(--body); }
.sum-row .v { font-family: var(--mono); }

/* Panier page */
.steps { display: flex; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); flex-wrap: wrap; }
.steps b { color: var(--ink); font-weight: 600; }
.cart-page { display: grid; grid-template-columns: 8fr 4fr; gap: clamp(24px, 4vw, 64px); align-items: start; padding-bottom: 72px; }
.cart-page h1 { font: 800 clamp(40px, 6vw, 88px)/.9 var(--display); font-stretch: 112%; text-transform: uppercase; margin: 8px 0 24px; }
.cart-lines { display: grid; border-top: 1px solid var(--line); }
.cart-lines .line { grid-template-columns: 120px 1fr auto; padding: 18px 0; border-bottom: 1px solid var(--line); }
.summary { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); background: var(--chalk); padding: 24px; display: grid; gap: 14px; border: 1px solid var(--line); }
.summary h2 { font: 800 22px/1 var(--display); font-stretch: 110%; text-transform: uppercase; margin: 0; }
.promo { display: flex; gap: 8px; }
.promo input { flex: 1; min-width: 0; border: 1px solid var(--line); padding: 12px; font: 500 13px/1 var(--mono); background: var(--paper); }
.promo button { border: 1px solid var(--ink); background: none; padding: 0 14px; font: 600 11px/1 var(--body); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; }
.paylogos { display: flex; gap: 6px; flex-wrap: wrap; }
.paylogos span { font: 500 10px/1 var(--mono); border: 1px solid var(--line); padding: 5px 6px; border-radius: 3px; color: var(--mute); }
.cart-empty { padding: 48px 0; border-top: 1px solid var(--line); display: grid; gap: 16px; justify-items: start; }

/* Réactivité */
@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid.dense { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .mega .wrap { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mega-feature { display: none; }
}
@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: inline-block !important; }
  .hdr .wrap { grid-template-columns: auto 1fr auto; }
  .wordmark { font-size: 18px; }
  .tools .hide-s { display: none; }
  .grid, .cats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid.dense { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .manifesto, .news, .plp-head, .seo-block, .pdp, .cart-page { grid-template-columns: minmax(0,1fr); }
  .pledges { grid-template-columns: minmax(0,1fr); }
  .pledges article + article { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); margin-top: 24px; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .ftr-grid > :first-child { grid-column: 1 / -1; }
  .buy, .summary { position: static; }
  .sticky-buy { display: flex; }
  .pdp { padding-bottom: 96px; }
  .playlist { grid-template-columns: auto 1fr; }
  .playlist .btn { grid-column: 1 / -1; }
  .toolbar { top: calc(65px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 480px) {
  .gallery { grid-template-columns: minmax(0,1fr); }
  .cart-lines .line { grid-template-columns: 84px 1fr; }
  .cart-lines .line .pr { grid-column: 2; }
}
/* Menu mobile */
.mnav { position: fixed; inset: 0; z-index: 45; background: var(--paper); padding: calc(20px + env(safe-area-inset-top, 0px)) var(--gut-r) 24px var(--gut); overflow: auto; display: grid; gap: 20px; align-content: start; }
.mnav .top { display: flex; justify-content: space-between; align-items: center; }
.mnav button.x { background: none; border: 0; font: 500 12px/1 var(--mono); text-transform: uppercase; cursor: pointer; }
.mnav h3 { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 8px 0 4px; }
.mnav a { display: block; font: 800 28px/1.15 var(--display); font-stretch: 110%; text-transform: uppercase; text-decoration: none; }
.mnav .small a { font: 500 16px/1.8 var(--body); text-transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}