/* ═══════════════════════════════════════════════════════════════
   ICE ARTS — GABARIT DE PRÉSENTATION PROJET (portfolio)
   Une page = un en-tête projet + autant de blocs produits que nécessaire.
   Blocs : web · carte · print (flyer / affiche / dépliant) · logo · identite · packaging · social
   + galerie libre (.pj-gal) pour n'importe quelles images.
═══════════════════════════════════════════════════════════════ */

.pj {
  --pj-surface: #14181C;
  --pj-surface-2: #1A1F24;
  --pj-paper-shadow: 0 30px 60px rgba(0,0,0,0.55), 0 8px 18px rgba(0,0,0,0.35);
  --pj-frame: #0B0D0F;
  --pj-device: #16191C;
  --pj-device-edge: #2C3034;
  display: block;
}
html[data-theme="light"] .pj {
  --pj-surface: #E6E2DA;
  --pj-surface-2: #DCD7CD;
  --pj-paper-shadow: 0 30px 60px rgba(20,20,15,0.22), 0 8px 18px rgba(20,20,15,0.12);
  --pj-frame: #1A1A17;
  --pj-device: #D6D2CA;
  --pj-device-edge: #BCB7AE;
}
.pj img { display: block; max-width: 100%; }
.pj-wrap { max-width: 1240px; margin: 0 auto; padding: 0 48px; }

/* ── EN-TÊTE PROJET ── */
.pj-hero {
  position: relative; min-height: min(92vh, 860px); display: flex; align-items: flex-end;
  padding: 150px 0 72px; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg);
}
.pj-hero-bg { position: absolute; inset: 0; z-index: 0; }
.pj-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.pj-hero-bg img.pj-cover-light { display: none; }
html[data-theme="light"] .pj-hero-bg:has(.pj-cover-light) img { display: none; }
html[data-theme="light"] .pj-hero-bg img.pj-cover-light { display: block; }
.pj-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--bg-rgb),0.94) 0%, rgba(var(--bg-rgb),0.78) 38%, rgba(var(--bg-rgb),0.15) 70%, rgba(var(--bg-rgb),0) 100%),
    linear-gradient(0deg, rgba(var(--bg-rgb),0.95) 0%, rgba(var(--bg-rgb),0.4) 30%, rgba(var(--bg-rgb),0) 55%);
}
.pj-hero .pj-wrap { position: relative; z-index: 2; width: 100%; }
.pj-eyebrow {
  font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
}
.pj-eyebrow::after { content: ""; width: 40px; height: 1px; background: rgba(var(--accent-rgb),0.4); }
.pj-title {
  font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: clamp(64px, 10vw, 150px);
  line-height: 0.86; letter-spacing: 0.01em; color: var(--fg); margin: 0 0 28px;
}
.pj-title span { color: var(--accent); }
.pj-lead { font-size: 18px; line-height: 1.75; color: var(--fg-dim); max-width: 560px; margin: 0 0 48px; }
.pj-lead strong { color: var(--fg); font-weight: 400; }
.pj-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); margin: 0; }
.pj-meta > div { padding: 22px 24px 0 0; }
.pj-meta > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.pj-meta dt, .pj-specs dt {
  font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dust); margin-bottom: 10px;
}
.pj-meta dd { margin: 0; font-size: 15px; color: var(--fg); line-height: 1.5; }

/* ── SOMMAIRE (rempli automatiquement) ── */
.pj-toc { position: sticky; top: 60px; z-index: 40; background: rgba(var(--bg-rgb),0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.pj-toc:empty, .pj-toc.is-single { display: none; }
.pj-toc .pj-wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 12px; padding-bottom: 12px; }
.pj-toc .pj-wrap::-webkit-scrollbar { display: none; }
.pj-toc a {
  flex-shrink: 0; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-dim); text-decoration: none; padding: 10px 14px; border: 1px solid transparent; transition: color .25s, border-color .25s;
}
.pj-toc a b { color: var(--accent); font-weight: 400; margin-right: 8px; }
.pj-toc a:hover, .pj-toc a.on { color: var(--fg); border-color: var(--line); }

/* ── BLOC PRODUIT : en-tête commun ── */
.pj-mod { padding: 120px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.pj-mod-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: end; margin-bottom: 64px; }
.pj-mod-n { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dust); margin-bottom: 20px; }
.pj-mod-n b { color: var(--accent); font-weight: 400; }
.pj-mod-t {
  font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: clamp(46px, 5.6vw, 82px);
  line-height: 0.9; letter-spacing: 0.02em; color: var(--fg); margin: 0 0 24px;
}
.pj-mod-t span { color: var(--accent); }
.pj-mod-d { font-size: 16.5px; line-height: 1.75; color: var(--fg-dim); margin: 0; max-width: 540px; }
.pj-mod-d strong { color: var(--fg); font-weight: 400; }
.pj-specs { margin: 0; border-top: 1px solid var(--line); }
.pj-specs > div { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pj-specs dt { margin: 2px 0 0; }
.pj-specs dd { margin: 0; font-size: 14px; color: var(--fg); text-align: right; }
.pj-specs dd a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(var(--accent-rgb),0.4); }
.pj-sub {
  font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dust);
  margin: 72px 0 22px; display: flex; align-items: center; gap: 16px;
}
.pj-sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pj-cap { font-family: "DM Mono", monospace; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dust); margin-top: 14px; }

/* Scène commune (fond sur lequel on pose les créations) */
.pj-stage {
  position: relative; border-radius: 4px; overflow: hidden;
  background: radial-gradient(ellipse 80% 70% at 50% 35%, var(--pj-surface-2), var(--pj-surface));
  border: 1px solid var(--line);
}

/* ── GALERIE LIBRE ── */
.pj-gal { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px; }
.pj-gal[data-cols="1"] { --cols: 1; }
.pj-gal[data-cols="2"] { --cols: 2; }
.pj-gal[data-cols="4"] { --cols: 4; }
.pj-gal figure { margin: 0; }
.pj-gal .wide { grid-column: span 2; }
.pj-gal .full { grid-column: 1 / -1; }
.pj-gal img { width: 100%; height: auto; border: 1px solid var(--line); cursor: zoom-in; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.pj-gal figure:hover img { transform: scale(1.012); }
.pj-gal figcaption { font-family: "DM Mono", monospace; font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dust); margin-top: 12px; }

/* ── 1 · SITE WEB ── */
.pj-web { padding: 64px 64px 0; min-height: 560px; }
.mk-browser {
  position: relative; width: 82%; border-radius: 10px 10px 0 0; overflow: hidden; background: var(--pj-device);
  border: 1px solid var(--pj-device-edge); border-bottom: none; box-shadow: 0 40px 80px rgba(0,0,0,0.4);
}
.mk-bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid var(--pj-device-edge); }
.mk-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--pj-device-edge); }
.mk-bar i:first-child { background: var(--accent); }
.mk-url {
  margin-left: 18px; flex: 1; max-width: 420px; height: 20px; border-radius: 10px; background: rgba(var(--fg-rgb),0.06);
  display: flex; align-items: center; padding: 0 12px; font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--fg-dim);
}
.mk-screen { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #fff; }
.mk-screen img { width: 100%; height: auto; will-change: transform; }
.mk-phone {
  position: absolute; right: 64px; bottom: -1px; width: 22%; min-width: 180px; padding: 10px 10px 0;
  border-radius: 34px 34px 0 0; background: var(--pj-device); border: 1px solid var(--pj-device-edge); border-bottom: none;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}
.mk-phone .mk-screen { aspect-ratio: 9 / 17; border-radius: 24px 24px 0 0; }
.mk-phone::before { content: ""; position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 34%; height: 14px; border-radius: 10px; background: #000; z-index: 2; }
.pj-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pj-pages figure { margin: 0; }
.pj-pages .mk-screen { aspect-ratio: 16 / 11; border: 1px solid var(--line); border-radius: 6px; }

/* ── 2 · CARTE DE VISITE ── */
.pj-card { aspect-ratio: 16 / 8.5; display: flex; align-items: center; justify-content: center; }
.mk-bc {
  position: absolute; width: 38%; aspect-ratio: 85 / 55; border-radius: 1.2%; overflow: hidden; box-shadow: var(--pj-paper-shadow);
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.mk-bc img { width: 100%; height: 100%; object-fit: cover; }
.mk-bc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0.14), transparent 35%, transparent 70%, rgba(0,0,0,0.12)); pointer-events: none; }
.mk-bc.recto { left: 12%; top: 18%; transform: rotate(-7deg); z-index: 2; }
.mk-bc.verso { right: 12%; bottom: 16%; transform: rotate(5deg); }
.pj-card:hover .mk-bc.recto { transform: rotate(-4deg) translate(-2%, -3%); }
.pj-card:hover .mk-bc.verso { transform: rotate(3deg) translate(2%, 3%); }
.pj-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pj-duo figure { margin: 0; }
.pj-duo img { width: 100%; border: 1px solid var(--line); }

/* ── 3 · PRINT : flyer · affiche · dépliant ── */
.pj-print { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; gap: 4%; padding: 5% 6%; }
.mk-sheet { position: relative; height: 84%; aspect-ratio: var(--ratio, 1 / 1.414); box-shadow: var(--pj-paper-shadow); }
.mk-sheet img { width: 100%; height: 100%; object-fit: cover; }
.mk-sheet::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(255,255,255,0.12), transparent 40%, rgba(0,0,0,0.08)); pointer-events: none; }
.pj-print[data-format="flyer"] .mk-sheet:nth-child(1) { transform: rotate(-4deg) translateY(2%); z-index: 2; }
.pj-print[data-format="flyer"] .mk-sheet:nth-child(2) { transform: rotate(3deg) translateY(-2%); margin-left: -6%; }
.pj-print[data-format="affiche"] { background: linear-gradient(180deg, var(--pj-surface-2), var(--pj-surface)); }
.pj-print[data-format="affiche"] .mk-sheet { height: 86%; padding: 2.2%; background: #F7F5F0; border: 10px solid var(--pj-frame); box-sizing: content-box; height: calc(86% - 20px); }
.pj-print[data-format="affiche"]::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 8%; background: radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.25), transparent 70%); }
.mk-fold { position: relative; height: 80%; aspect-ratio: var(--ratio, 1.414); display: flex; perspective: 1800px; }
.mk-fold > i {
  flex: 1; position: relative; background-image: var(--img); background-size: 300% 100%; background-repeat: no-repeat;
  box-shadow: var(--pj-paper-shadow);
}
.mk-fold > i:nth-child(1) { background-position: 0 0; transform-origin: right center; transform: rotateY(22deg); }
.mk-fold > i:nth-child(2) { background-position: 50% 0; z-index: 2; }
.mk-fold > i:nth-child(3) { background-position: 100% 0; transform-origin: left center; transform: rotateY(-22deg); }
.mk-fold > i::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.mk-fold > i:nth-child(1)::after { background: linear-gradient(90deg, rgba(0,0,0,0.05), rgba(0,0,0,0.28)); }
.mk-fold > i:nth-child(3)::after { background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(0,0,0,0.12)); }
.mk-fold[data-panels="2"] > i { background-size: 200% 100%; }
.mk-fold[data-panels="2"] > i:nth-child(1) { background-position: 0 0; transform: rotateY(14deg); }
.mk-fold[data-panels="2"] > i:nth-child(2) { background-position: 100% 0; transform-origin: left center; transform: rotateY(-14deg); }
.pj-flat img { width: 100%; border: 1px solid var(--line); box-shadow: var(--pj-paper-shadow); }

/* ── 4 · LOGO ── */
.pj-logo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lg-tile {
  position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 12%;
  background: var(--c, var(--pj-surface)); border: 1px solid var(--line); overflow: hidden;
}
.lg-tile.big { grid-column: 1 / -1; aspect-ratio: 21 / 9; padding: 8% 22%; }
.lg-tile img { max-height: 100%; width: auto; object-fit: contain; }
.lg-tile figcaption, .lg-tile .lg-k {
  position: absolute; left: 18px; bottom: 14px; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--k, rgba(242,240,235,0.55));
}

/* ── 5 · IDENTITÉ DE MARQUE ── */
.pj-pal { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border: 1px solid var(--line); }
.sw { aspect-ratio: 3 / 4; background: var(--c); padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--t, #fff); }
.sw b { font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 28px; letter-spacing: 0.04em; line-height: 1; margin-bottom: 10px; }
.sw span { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 0.1em; line-height: 1.8; opacity: 0.85; }
.pj-typo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ty { border: 1px solid var(--line); padding: 36px; background: var(--pj-surface); }
.ty-aa { font-size: 128px; line-height: 0.9; color: var(--fg); }
.ty-n { font-size: 26px; color: var(--fg); margin: 26px 0 6px; }
.ty-u { font-family: "DM Mono", monospace; font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); }
.ty-abc { font-size: 17px; line-height: 1.7; color: var(--fg-dim); margin-top: 22px; word-break: break-all; }
.pj-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 170px; gap: 16px; }
.pj-bento figure { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--line); grid-column: span 2; grid-row: span 2; }
.pj-bento figure.w3 { grid-column: span 3; }
.pj-bento figure.w4 { grid-column: span 4; }
.pj-bento figure.h1 { grid-row: span 1; }
.pj-bento figure.h3 { grid-row: span 3; }
.pj-bento img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.pj-bento figure:hover img { transform: scale(1.03); }
.pj-bento figcaption {
  position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; background: rgba(var(--bg-rgb),0.82);
  font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg);
}

/* ── 6 · PACKAGING ── */
.pj-pack { display: grid; grid-template-columns: minmax(0, 1fr); }
.pj-pack .pj-stage { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; perspective: 1600px; cursor: grab; touch-action: pan-y; }
.pj-pack .pj-stage:active { cursor: grabbing; }
.mk-box-wrap { transform-style: preserve-3d; transform: scale(var(--s, 1)); }
.mk-box { position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; will-change: transform; transform: rotateX(-14deg) rotateY(-32deg); }
.mk-box > i { position: absolute; left: 50%; top: 50%; background-size: cover; background-position: center; backface-visibility: hidden; }
.mk-box > i::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.mk-box .f, .mk-box .b { width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); }
.mk-box .l, .mk-box .r { width: var(--d); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2); }
.mk-box .t, .mk-box .u { width: var(--w); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2); }
.mk-box .f { transform: translateZ(calc(var(--d) / 2)); }
.mk-box .b { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.mk-box .r { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.mk-box .l { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.mk-box .t { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.mk-box .u { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: #111; }
.mk-box .r::after, .mk-box .l::after { background: rgba(0,0,0,0.18); }
.mk-box .t::after { background: rgba(255,255,255,0.08); }
.mk-shadow { position: absolute; left: 50%; bottom: 13%; width: 40%; height: 9%; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(0,0,0,0.45), transparent 70%); filter: blur(6px); }
.pj-hint { position: absolute; right: 18px; bottom: 16px; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dust); }

/* ── 7 · SOCIAL DESIGN ── */
.pj-social { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.mk-ig {
  width: 100%; max-width: 380px; margin: 0 auto; padding: 12px; border-radius: 46px; background: var(--pj-device); border: 1px solid var(--pj-device-edge);
  box-shadow: 0 40px 80px rgba(0,0,0,0.4);
}
.mk-ig-scr { border-radius: 36px; overflow: hidden; background: var(--bg); padding-bottom: 6px; }
.ig-top { display: flex; justify-content: center; padding: 16px 0 10px; font-family: "DM Mono", monospace; font-size: 12px; color: var(--fg); }
.ig-prof { display: flex; align-items: center; gap: 16px; padding: 4px 16px 12px; }
.ig-av { width: 74px; height: 74px; border-radius: 50%; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.ig-av img { width: 100%; height: 100%; object-fit: cover; }
.ig-stats { flex: 1; display: flex; justify-content: space-around; text-align: center; }
.ig-stats b { display: block; font-family: "Bebas Neue", sans-serif; font-weight: 400; font-size: 24px; color: var(--fg); letter-spacing: 0.03em; }
.ig-stats span { font-size: 10px; color: var(--fg-dim); }
.ig-bio { padding: 0 16px 14px; font-size: 12px; line-height: 1.5; color: var(--fg-dim); }
.ig-bio b { display: block; color: var(--fg); font-weight: 500; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; cursor: zoom-in; }
.pj-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pj-stories img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); cursor: zoom-in; }
.pj-carousel { position: relative; }
.pj-carousel-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 10px; }
.pj-carousel-track img { flex: 0 0 36%; aspect-ratio: 4 / 5; object-fit: cover; scroll-snap-align: start; border: 1px solid var(--line); cursor: zoom-in; }

/* ── FIN DE PAGE ── */
.pj-end { padding: 120px 0; text-align: center; }
.pj-end .pj-title { font-size: clamp(54px, 7vw, 100px); margin-bottom: 30px; }
.pj-end-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pj-btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; text-decoration: none;
  font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--fg); transition: border-color .3s, color .3s, background .3s;
}
.pj-btn:hover { border-color: var(--accent); color: var(--accent); }
.pj-btn.solid { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pj-btn.solid:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ── VISIONNEUSE (clic sur une image) ── */
.pj-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(6,6,6,0.92); display: none; align-items: center; justify-content: center; padding: 4vw; cursor: zoom-out; }
.pj-lb.open { display: flex; }
.pj-lb img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }

/* ── MOBILE ── */
@media (max-width: 900px) {
  .pj-wrap { padding: 0 24px; }
  .pj-hero { min-height: 0; padding: 120px 0 48px; }
  .pj-hero-bg img { object-position: 64% center; }
  .pj-hero-bg::after { background: linear-gradient(180deg, rgba(var(--bg-rgb),0.55) 0%, rgba(var(--bg-rgb),0.85) 45%, rgba(var(--bg-rgb),0.97) 100%); }
  .pj-lead { font-size: 16px; margin-bottom: 32px; }
  .pj-meta { grid-template-columns: 1fr 1fr; }
  .pj-meta > div { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--line); }
  .pj-meta > div + div { padding-left: 0; border-left: none; }
  .pj-meta > div:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .pj-toc { top: 56px; }
  .pj-mod { padding: 80px 0; }
  .pj-mod-head { grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
  .pj-mod-d { font-size: 15.5px; }
  .pj-sub { margin-top: 48px; }
  .pj-gal, .pj-gal[data-cols="4"] { --cols: 2; }
  .pj-gal[data-cols="1"] { --cols: 1; }
  .pj-web { padding: 28px 18px 0; min-height: 0; }
  .mk-browser { width: 100%; }
  .mk-phone { right: 12px; width: 32%; min-width: 0; padding: 6px 6px 0; border-radius: 20px 20px 0 0; }
  .mk-phone .mk-screen { border-radius: 14px 14px 0 0; }
  .mk-phone::before { top: 11px; height: 8px; }
  .pj-pages { grid-template-columns: 1fr 1fr; }
  .pj-card { aspect-ratio: 4 / 3.4; }
  .mk-bc { width: 64%; }
  .mk-bc.recto { left: 6%; top: 10%; }
  .mk-bc.verso { right: 6%; bottom: 10%; }
  .pj-duo { grid-template-columns: 1fr; }
  .pj-print { aspect-ratio: 4 / 4.2; padding: 8%; }
  .pj-print[data-format="depliant"] { aspect-ratio: 4 / 3.2; padding: 6%; }
  .mk-fold { height: auto; width: 100%; }
  .pj-logo { grid-template-columns: 1fr 1fr; }
  .pj-logo .lg-tile:not(.big):last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 16 / 7; padding: 6% 22%; }
  .lg-tile.big { aspect-ratio: 16 / 9; padding: 10% 12%; }
  .pj-pal { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sw { aspect-ratio: 4 / 3; }
  .pj-typo { grid-template-columns: 1fr; }
  .ty { padding: 26px; }
  .ty-aa { font-size: 96px; }
  .pj-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .pj-bento figure, .pj-bento figure.w3, .pj-bento figure.w4 { grid-column: span 1; grid-row: span 1; }
  .pj-bento figure.w4, .pj-bento figure.big { grid-column: span 2; grid-row: span 2; }
  .pj-bento figure:last-child:nth-child(even) { grid-column: span 2; }
  .pj-pack .pj-stage { aspect-ratio: 1 / 1; }
  .mk-box-wrap { --s: 0.62; }
  .pj-social { grid-template-columns: 1fr; gap: 40px; }
  .pj-carousel-track img { flex-basis: 78%; }
  .pj-end { padding: 80px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-screen img, .mk-box { transition: none !important; }
}