:root {
  --night: #030718;
  --night-blue: #061331;
  --brick: #0a1939;
  --white: #fffaf4;
  --soft: #c4c9d8;
  --pink: #ff18cf;
  --pink-soft: #ff78e7;
  --green: #29ff63;
  --lime: #94ff5a;
  --yellow: #fff200;
  --cream: #fff4a4;
  --cyan: #19e7ff;
  --orange: #ff7318;
  --red: #ff3548;
  --violet: #7767ff;
  --display: "Anton", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --section-color: #29ff63;
  --section-rgb: 41 255 99;
  --scroll-progress: 0;
  --strip-drift: 0px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--night);
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--white);
  background: var(--night);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  color: var(--night);
  background: var(--section-color);
}

a,
button,
input,
textarea {
  color: inherit;
  font: inherit;
}

a {
  text-decoration: none;
}

button {
  border: 0;
}

svg,
img {
  display: block;
  max-width: 100%;
}

main {
  position: relative;
  isolation: isolate;
  background-color: #061231;
  background-image:
    radial-gradient(circle at 13% 8%, rgb(var(--section-rgb) / .07), transparent 24rem),
    radial-gradient(circle at 89% 30%, rgb(var(--section-rgb) / .055), transparent 31rem),
    linear-gradient(90deg, rgba(3, 7, 24, .9) 2px, transparent 2px),
    linear-gradient(rgba(3, 7, 24, .92) 2px, transparent 2px),
    linear-gradient(90deg, transparent 0 75px, rgba(3, 7, 24, .9) 75px 77px, transparent 77px),
    linear-gradient(90deg, rgba(11, 28, 62, .7), rgba(5, 18, 47, .2));
  background-position: 0 0, 0 0, 0 0, 0 0, 0 66px, 0 0;
  background-size: 100% 100%, 100% 100%, 150px 66px, 150px 66px, 150px 132px, 100% 100%;
}

.noise {
  position: fixed;
  z-index: 1000;
  inset: 0;
  pointer-events: none;
  opacity: .036;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.section-wipe {
  position: fixed;
  z-index: 920;
  inset: 0 0 auto;
  height: 3px;
  pointer-events: none;
  background: var(--section-color);
  box-shadow: 0 0 8px var(--section-color), 0 0 18px rgb(var(--section-rgb) / .5);
  transform: scaleX(var(--scroll-progress));
  transform-origin: left center;
}

/* Transition identique à la homepage, sans relancer son loader. */
.page-transition {
  position: fixed;
  z-index: 9998;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 48%, rgb(var(--section-rgb) / .14), transparent 24%),
    radial-gradient(circle at 50% 58%, rgba(25, 231, 255, .08), transparent 30%),
    #020512;
  opacity: 1;
  transform: translate3d(0, 102%, 0);
}

.page-transition::before,
.page-transition::after {
  content: "";
  position: absolute;
  left: -10%;
  width: 120%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--section-color), var(--yellow), var(--cyan), transparent);
  box-shadow: 0 0 12px rgb(var(--section-rgb) / .42);
}

.page-transition::before {
  top: 25%;
  rotate: -4deg;
}

.page-transition::after {
  bottom: 24%;
  rotate: 4deg;
}

.page-transition-mark {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
}

.page-transition-mark svg {
  width: 82px;
  height: 82px;
  overflow: visible;
  filter: drop-shadow(0 0 10px rgb(var(--section-rgb) / .44));
}

body.is-page-leaving .page-transition {
  visibility: visible;
  animation: pageCurtainIn .48s cubic-bezier(.72, 0, .18, 1) both;
}

body.is-page-entering .page-transition {
  visibility: visible;
  animation: pageCurtainOut .72s cubic-bezier(.76, 0, .22, 1) both;
}

body.is-page-leaving .page-transition-mark {
  animation: pageMarkIgnite .46s ease both;
}

@keyframes pageCurtainIn {
  from { transform: translate3d(0, 102%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes pageCurtainOut {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -102%, 0); }
}

@keyframes pageMarkIgnite {
  0% { opacity: 0; transform: scale(.76) rotate(-5deg); }
  38% { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: none; }
}

/* Header repris à dimensions et comportement équivalents. */
.site-header {
  --header-y: 0%;
  position: fixed;
  z-index: 900;
  top: 18px;
  left: 50%;
  width: min(1180px, calc(100% - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 14px 11px 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(3, 7, 24, .74);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .3), 0 0 20px rgb(var(--section-rgb) / .055);
  opacity: 1;
  transform: translate3d(-50%, var(--header-y), 0);
  transition: transform .42s cubic-bezier(.22, .8, .22, 1), opacity .3s ease;
}

body.scroll-down .site-header {
  --header-y: -132%;
  opacity: 0;
  pointer-events: none;
}

body.scroll-up .site-header {
  --header-y: 0%;
  opacity: 1;
  pointer-events: auto;
}

.brand {
  color: var(--section-color);
  font-size: .88rem;
  font-weight: 850;
  letter-spacing: .01em;
  text-shadow: 0 0 6px rgb(var(--section-rgb) / .5), 0 0 14px rgb(var(--section-rgb) / .22);
}

.header-cta {
  padding: 10px 17px;
  border: 1px solid var(--section-color);
  border-radius: 999px;
  color: var(--section-color);
  font-size: .86rem;
  font-weight: 850;
  box-shadow: inset 0 0 16px rgb(var(--section-rgb) / .08), 0 0 18px rgb(var(--section-rgb) / .12);
  transition: color .22s ease, background .22s ease, box-shadow .22s ease;
}

.header-cta:hover,
.header-cta:focus-visible {
  color: var(--night);
  background: var(--section-color);
  box-shadow: 0 0 30px rgb(var(--section-rgb) / .46);
}

/* Grande bande éditoriale. */
.print-stage {
  position: relative;
  min-height: 100svh;
  overflow: clip;
  isolation: isolate;
  padding: 126px 0 196px;
}

.print-stage::before,
.print-stage::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 34vw;
  height: 52vh;
  border-radius: 50%;
  pointer-events: none;
  opacity: .22;
  filter: blur(70px);
}

.print-stage::before {
  top: 8vh;
  left: -24vw;
  background: rgb(var(--section-rgb) / .48);
  animation: ambientBloomLeft 13s ease-in-out infinite alternate;
}

.print-stage::after {
  right: -25vw;
  bottom: 10vh;
  background: rgba(25, 231, 255, .26);
  animation: ambientBloomRight 16s ease-in-out -4s infinite alternate;
}

.ambient-scene {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-scene::before {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    conic-gradient(from 210deg at 16% 48%, transparent 0 38%, rgb(var(--section-rgb) / .08) 45%, transparent 52%),
    conic-gradient(from 25deg at 87% 54%, transparent 0 41%, rgba(25, 231, 255, .07) 49%, transparent 56%);
  filter: blur(20px);
  animation: ambientAurora 22s ease-in-out infinite alternate;
}

.ambient-scene span {
  position: absolute;
  display: block;
  width: clamp(220px, 25vw, 430px);
  aspect-ratio: 1;
  border: 2px solid rgb(var(--section-rgb) / .18);
  border-radius: 46% 54% 60% 40%;
  filter: drop-shadow(0 0 18px rgb(var(--section-rgb) / .12));
  opacity: .58;
}

.ambient-scene span::before,
.ambient-scene span::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(25, 231, 255, .17);
  border-radius: inherit;
}

.ambient-scene span::before { inset: 15%; }
.ambient-scene span::after { inset: 31%; }

.ambient-scene span:first-child {
  top: 17vh;
  left: clamp(-260px, -15vw, -90px);
  rotate: -22deg;
  animation: ambientLeafLeft 12s ease-in-out infinite alternate;
}

.ambient-scene span:last-child {
  right: clamp(-280px, -16vw, -100px);
  bottom: 13vh;
  rotate: 26deg;
  animation: ambientLeafRight 15s ease-in-out -3s infinite alternate;
}

@keyframes ambientBloomLeft {
  to { opacity: .34; transform: translate3d(5vw, 8vh, 0) scale(1.13); }
}

@keyframes ambientBloomRight {
  to { opacity: .32; transform: translate3d(-5vw, -7vh, 0) scale(1.12); }
}

@keyframes ambientAurora {
  to { transform: translate3d(2.5%, -1.5%, 0) rotate(2deg) scale(1.04); }
}

@keyframes ambientLeafLeft {
  to { transform: translate3d(18px, -24px, 0) rotate(5deg); opacity: .78; }
}

@keyframes ambientLeafRight {
  to { transform: translate3d(-20px, 25px, 0) rotate(-6deg); opacity: .75; }
}

/* Cadre-écran fixe : les visuels défilent derrière une seule façade lumineuse. */
.screen-frame {
  position: fixed;
  z-index: 28;
  top: 104px;
  bottom: 86px;
  left: 50%;
  width: min(62vw, 996px);
  border: 0;
  border-radius: 22px;
  pointer-events: none;
  background: transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .17),
    inset 0 0 24px rgb(var(--section-rgb) / .08),
    0 0 14px rgb(var(--section-rgb) / .35),
    0 0 42px rgb(var(--section-rgb) / .12),
    0 24px 70px rgba(0, 0, 0, .42);
  opacity: 0;
  transform: translate3d(-50%, 14px, 0) scale(.985);
  transition: opacity .45s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
}

body.strip-ready .screen-frame {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
  animation: screenBorderOrbit 8s linear 1.25s infinite, screenFrameIgnite 1.15s steps(1, end) .14s both;
}

body.contact-near .screen-frame {
  opacity: 0;
  transform: translate3d(-50%, 12px, 0) scale(.992);
}

.screen-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 5px;
  border-radius: inherit;
  background: conic-gradient(from var(--screen-angle, 0turn), var(--section-color), #fff, var(--cyan), #162349, var(--section-color));
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .68), 0 0 10px rgb(var(--section-rgb) / .18);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.screen-frame::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 10px;
  border: 1px solid rgb(var(--section-rgb) / .2);
  background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(255, 255, 255, .018) 4px 5px);
  opacity: .48;
}

.screen-frame i {
  position: absolute;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--section-color);
  box-shadow: 0 0 8px var(--section-color);
}

.screen-frame i:first-child { left: 17px; }
.screen-frame i:last-child { right: 17px; }

@property --screen-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

@keyframes screenBorderOrbit { to { --screen-angle: 1turn; } }

@keyframes screenFrameIgnite {
  0%, 13% { filter: brightness(.08); }
  14%, 22% { filter: brightness(1.55); }
  23%, 32% { filter: brightness(.18); }
  33%, 46% { filter: brightness(1.28); }
  47%, 55% { filter: brightness(.48); }
  56%, 100% { filter: brightness(1); }
}

.strip-shell {
  position: relative;
  z-index: 3;
  width: min(62vw, 913px);
  margin: 0 auto;
  transform: translate3d(0, var(--strip-drift), 0);
}

.print-strip {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #030718;
  box-shadow:
    -1px 0 0 rgb(var(--section-rgb) / .26),
    1px 0 0 rgb(var(--section-rgb) / .18),
    0 0 22px rgb(var(--section-rgb) / .12),
    0 42px 110px rgba(0, 0, 0, .52);
  transform-origin: 50% 0;
}

.js .print-strip {
  opacity: 0;
  clip-path: inset(0 0 97% 0);
  transform: translate3d(0, -24px, 0) scaleY(.992);
}

.js body.strip-ready .print-strip {
  animation: stripUnroll 1.08s cubic-bezier(.16, 1, .3, 1) .1s both;
}

@keyframes stripUnroll {
  0% {
    opacity: 0;
    clip-path: inset(0 0 97% 0);
    transform: translate3d(0, -24px, 0) scaleY(.992);
  }
  30% { opacity: 1; }
  100% {
    opacity: 1;
    clip-path: inset(0);
    transform: translate3d(0, 0, 0) scaleY(1);
  }
}

.print-strip::before,
.print-strip::after {
  content: "";
  position: absolute;
  z-index: 20;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--section-color) 9%, transparent 35%, rgb(var(--section-rgb) / .65) 73%, transparent);
  opacity: .48;
}

.print-strip::before { left: 0; }
.print-strip::after { right: 0; }

.print-row {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgb(var(--section-rgb) / .08), rgba(25, 231, 255, .035)),
    #071128;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.print-row.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0;
}

.print-row img {
  width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
  transform-origin: center;
}

.print-row::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 45%, rgb(var(--section-rgb) / .035), transparent 55%);
  opacity: 0;
  transform: translate3d(-45%, 0, 0);
}

.js .print-row:not(.entry-row) img {
  opacity: 0;
  transition:
    opacity .54s ease,
    transform .9s cubic-bezier(.16, 1, .3, 1),
    clip-path .96s cubic-bezier(.16, 1, .3, 1),
    filter .58s ease;
}

.js .print-row[data-reveal="mask"]:not(.entry-row) img {
  clip-path: inset(100% 0 0);
  transform: translate3d(0, 20px, 0) scale(.995);
}

.js .print-row[data-reveal="rise"]:not(.entry-row) img {
  clip-path: inset(8% 0 0);
  transform: translate3d(0, 42px, 0) scale(.992);
}

.js .print-row[data-reveal="left"]:not(.entry-row) img {
  clip-path: inset(0 12% 0 0);
  transform: translate3d(-30px, 0, 0);
}

.js .print-row[data-reveal="right"]:not(.entry-row) img {
  clip-path: inset(0 0 0 12%);
  transform: translate3d(30px, 0, 0);
}

.js .print-row[data-reveal="open"]:not(.entry-row) img {
  clip-path: inset(0 49%);
  transform: scale(.994);
}

.js .print-row:not(.entry-row).in-view img {
  opacity: 1;
  clip-path: inset(0);
  filter: brightness(1);
  transform: translate3d(0, 0, 0) scale(1);
}

.js .print-row.duo[data-reveal="join"]:not(.entry-row) img:first-child {
  transform: translate3d(-38px, 0, 0);
}

.js .print-row.duo[data-reveal="join"]:not(.entry-row) img:last-child {
  transform: translate3d(38px, 0, 0);
}

.js .print-row.duo[data-reveal="join"].in-view img {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Les deux premiers visuels s'allument comme les enseignes de la homepage. */
.js .print-row.entry-row img {
  opacity: 0;
  filter: brightness(.06) saturate(.35);
}

.js body.strip-ready .print-row.entry-primary img {
  animation: artworkPowerOn 1.08s steps(1, end) .38s both;
}

.js body.strip-ready .print-row.entry-secondary img {
  animation: artworkPowerOn 1.08s steps(1, end) .68s both;
}

body.entry-complete .print-row.entry-row img {
  opacity: 1;
  filter: none;
  transform: none;
  clip-path: inset(0 0 0 0);
}

@keyframes artworkPowerOn {
  0%, 13% { opacity: 0; filter: brightness(.04) saturate(.25); transform: scale(.997); }
  14%, 24% { opacity: .94; filter: brightness(1.35) saturate(1.12); }
  25%, 35% { opacity: .08; filter: brightness(.12) saturate(.5); }
  36%, 50% { opacity: 1; filter: brightness(1.16) saturate(1.04); }
  51%, 58% { opacity: .34; filter: brightness(.44) saturate(.8); }
  59%, 73% { opacity: .96; filter: brightness(1.05) saturate(1.02); }
  74%, 79% { opacity: .68; filter: brightness(.78) saturate(.92); }
  80%, 100% { opacity: 1; filter: brightness(1) saturate(1); transform: scale(1); }
}

.print-row.in-view::after {
  animation: rowLightSweep 1s ease .18s both;
}

@keyframes rowLightSweep {
  0% { opacity: 0; transform: translate3d(-45%, 0, 0); }
  35% { opacity: .8; }
  100% { opacity: 0; transform: translate3d(45%, 0, 0); }
}

.offset-panel {
  z-index: 5;
  width: 86%;
  margin: -2.8% auto 0;
  box-shadow: 0 0 0 1px rgb(var(--section-rgb) / .15), 0 17px 38px rgba(0, 0, 0, .28);
}

.strip-tension {
  transform-origin: 50% 0;
}

body:not(.reduce-motion) .strip-tension.in-view {
  animation: stripTension 7s ease-in-out 1.05s both;
}

@keyframes stripTension {
  0%, 100% { transform: skewX(0deg) scaleX(1); }
  46% { transform: skewX(.18deg) scaleX(.998); }
  72% { transform: skewX(-.12deg) scaleX(1.001); }
}

/* Verre PRINT : même vocabulaire SVG, progression liée au scroll. */
.print-cocktail {
  position: fixed;
  z-index: 40;
  right: clamp(22px, 4.1vw, 78px);
  top: 50%;
  width: clamp(72px, 6.4vw, 104px);
  pointer-events: none;
  opacity: .66;
  transform: translate3d(0, -45%, 0);
  filter: drop-shadow(0 0 11px rgb(var(--section-rgb) / .2));
  transition: opacity .4s ease, transform .55s cubic-bezier(.22, .8, .22, 1);
}

body.contact-near .print-cocktail {
  opacity: 0;
  transform: translate3d(18px, -45%, 0) scale(.9);
}

.print-cocktail .glass-outline,
.print-cocktail .glass-base {
  fill: none;
  stroke: var(--white);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .54));
}

.print-cocktail .stirrer {
  fill: none;
  stroke: var(--section-color);
  stroke-width: 4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px var(--section-color));
}

.print-cocktail .cherry {
  fill: var(--section-color);
  filter: drop-shadow(0 0 8px var(--section-color));
}

.print-cocktail .liquid {
  fill: var(--section-color);
  opacity: .82;
  filter: drop-shadow(0 0 11px var(--section-color));
  transform: scaleY(max(.08, var(--scroll-progress)));
  transform-box: fill-box;
  transform-origin: center bottom;
}

.print-cocktail .bubble {
  fill: var(--lime);
  opacity: .64;
  transform-box: fill-box;
  transform-origin: center;
}

body:not(.reduce-motion) .print-cocktail .bubble-one { animation: glassBubble 1.9s ease-in-out infinite; }
body:not(.reduce-motion) .print-cocktail .bubble-two { animation: glassBubble 2.3s ease-in-out -.7s infinite; }
body:not(.reduce-motion) .print-cocktail .bubble-three { animation: glassBubble 1.65s ease-in-out -1.1s infinite; }

@keyframes glassBubble {
  50% { opacity: .18; transform: translate3d(0, -9px, 0) scale(.72); }
}

/* Menu feuille fixe, issu du papier du menu d'accueil. */
.leaf-nav {
  position: fixed;
  z-index: 850;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(920px, calc(100% - 28px));
  padding: 16px 30px 17px;
  color: #081126;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .28)),
    linear-gradient(118deg, rgb(var(--section-rgb) / .045), transparent 28% 72%, rgba(25, 231, 255, .045)),
    url("../ui/menu-paper.webp") center / 100% 100% no-repeat,
    #f5f1e9;
  background-blend-mode: screen, soft-light, normal, normal;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .46), 0 0 0 1px rgba(8, 17, 38, .17), 0 0 26px rgb(var(--section-rgb) / .08);
  clip-path: polygon(0 7%, 3% 2%, 8% 5%, 15% 1%, 24% 4%, 33% 1%, 43% 4%, 52% 1%, 62% 4%, 72% 1%, 82% 4%, 91% 1%, 97% 5%, 100% 2%, 99% 93%, 95% 97%, 88% 94%, 79% 99%, 69% 95%, 58% 99%, 48% 96%, 37% 99%, 27% 95%, 17% 98%, 8% 94%, 1% 98%);
  opacity: 1;
  transform: translate3d(-50%, 0, 0) rotate(-.25deg);
  transition: opacity .34s ease, transform .5s cubic-bezier(.22, .8, .22, 1);
}

.leaf-nav::before,
.leaf-nav::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cfb76b;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .74), 0 2px 4px rgba(8, 17, 38, .35);
  translate: 0 -50%;
}

.leaf-nav::before { left: 16px; }
.leaf-nav::after { right: 16px; }

.leaf-nav.is-withdrawn {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, calc(100% + 28px), 0) rotate(.5deg);
}

.leaf-nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.3vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.leaf-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 5px 12px 4px;
  border: 1px solid transparent;
  border-radius: 10px 7px 11px 8px;
  color: #313a4e;
  font-family: var(--display);
  font-size: clamp(.82rem, 1.2vw, 1rem);
  letter-spacing: .045em;
  text-transform: uppercase;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, text-shadow .2s ease, box-shadow .2s ease;
}

.leaf-nav a:hover,
.leaf-nav a:focus-visible {
  color: #081126;
  border-color: rgba(8, 17, 38, .12);
  background: rgba(255, 255, 255, .32);
  transform: translate3d(0, -2px, 0);
}

.leaf-nav a[aria-current="page"] {
  color: var(--section-color);
  border-color: rgba(8, 17, 38, .72);
  background: #081126;
  -webkit-text-stroke: .4px #081126;
  box-shadow: 3px 3px 0 rgb(var(--section-rgb) / .48), 0 0 14px rgb(var(--section-rgb) / .18);
  text-shadow: 0 0 8px rgb(var(--section-rgb) / .62);
  transform: rotate(-1deg);
}

.leaf-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 4px;
  left: 12px;
  height: 2px;
  background: var(--section-color);
  box-shadow: 0 0 8px rgb(var(--section-rgb) / .7);
  transform: rotate(-1.5deg);
}

.gif-row img {
  image-rendering: auto;
  filter: contrast(1.025) saturate(1.025);
}

/* Navigation précédente / suivante posée sur deux morceaux de la même feuille. */
.project-pagination {
  position: relative;
  z-index: 12;
  width: min(980px, 62vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 92px auto 0;
}

.project-direction {
  position: relative;
  min-height: 112px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 23px 28px;
  overflow: hidden;
  color: #081126;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .22)),
    url("../ui/menu-paper.webp") center / 100% 100% no-repeat,
    #f5f1e9;
  background-blend-mode: screen, normal, normal;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .35), 0 0 0 1px rgba(8, 17, 38, .14);
  clip-path: polygon(1% 5%, 12% 1%, 27% 4%, 42% 1%, 58% 4%, 72% 1%, 88% 4%, 99% 2%, 98% 94%, 86% 98%, 70% 95%, 53% 99%, 36% 95%, 18% 98%, 2% 94%);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), filter .25s ease, box-shadow .25s ease;
}

.project-direction.next {
  justify-content: flex-end;
  text-align: right;
  transform: rotate(.45deg);
}

.project-direction.previous { transform: rotate(-.45deg); }

.project-direction:hover,
.project-direction:focus-visible {
  z-index: 2;
  filter: brightness(1.03);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .42), 0 0 22px rgb(var(--section-rgb) / .16);
  transform: translate3d(0, -5px, 0) rotate(0deg);
}

.project-direction small,
.project-direction strong {
  display: block;
  text-transform: uppercase;
}

.project-direction small {
  margin-bottom: 4px;
  color: #687084;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .18em;
}

.project-direction strong {
  font-family: var(--display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: .85;
  letter-spacing: .03em;
}

.direction-arrow {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid #081126;
  border-radius: 50%;
  color: var(--section-color);
  background: #081126;
  box-shadow: 4px 4px 0 rgb(var(--section-rgb) / .48);
  font-size: 1.45rem;
  transition: transform .25s ease, box-shadow .25s ease;
}

.project-direction:hover .direction-arrow,
.project-direction:focus-visible .direction-arrow {
  box-shadow: 5px 5px 0 rgb(var(--section-rgb) / .66), 0 0 16px rgb(var(--section-rgb) / .25);
  transform: scale(1.08);
}

/* Contact et footer repris de la homepage, accents adaptés à PRINT. */
.contact-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgb(var(--section-rgb) / .13), transparent 28%),
    radial-gradient(circle at 88% 85%, rgb(var(--section-rgb) / .08), transparent 28%),
    linear-gradient(160deg, #142a25, #0d1c22 55%, #07091a);
}

.contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(255, 255, 255, .018) 59px 60px),
    repeating-linear-gradient(90deg, transparent 0 160px, rgba(255, 255, 255, .015) 161px 162px);
}

.contact-wrap {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  margin: auto;
  padding: 118px 24px 70px;
}

.contact-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--section-color);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.contact-kicker::before {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
}

.contact-main {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: start;
  gap: 56px;
}

.contact-title {
  margin: 0;
  color: var(--section-color);
  font-family: var(--display);
  font-size: clamp(5.3rem, 10vw, 10rem);
  line-height: .86;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-shadow: 0 0 3px rgba(255, 255, 255, .2), 0 0 11px rgb(var(--section-rgb) / .5), 0 0 25px rgb(var(--section-rgb) / .22);
}

.contact-form {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 28px;
  background: radial-gradient(circle at 100% 0%, rgb(var(--section-rgb) / .11), transparent 34%), rgba(255, 255, 255, .045);
  backdrop-filter: blur(16px);
  box-shadow: 0 28px 75px rgba(0, 0, 0, .34);
}

.contact-form::before {
  content: "";
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--section-color), var(--lime), var(--section-color), transparent);
  box-shadow: 0 0 13px var(--section-color);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}

.form-field {
  display: grid;
  gap: 8px;
}

.form-field-wide {
  grid-column: 1 / -1;
}

.form-field > span {
  color: #eee3ec;
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.form-field em {
  color: var(--section-color);
  font-style: normal;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .14);
  outline: none;
  border-radius: 15px;
  color: #fff;
  background: rgba(3, 7, 24, .62);
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease, transform .22s ease;
}

.form-field input {
  height: 54px;
  padding: 0 16px;
}

.form-field textarea {
  min-height: 150px;
  padding: 15px 16px;
  resize: vertical;
  line-height: 1.55;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #788097;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--section-color);
  background: rgba(3, 7, 24, .82);
  box-shadow: 0 0 0 3px rgb(var(--section-rgb) / .09), 0 0 18px rgb(var(--section-rgb) / .12);
  transform: translate3d(0, -1px, 0);
}

.form-field input:valid:not(:placeholder-shown),
.form-field textarea:valid:not(:placeholder-shown) {
  border-color: rgb(var(--section-rgb) / .55);
}

.honey-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.captcha-challenge {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 15px 18px;
  margin-top: 22px;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 17px;
  background: rgba(3, 7, 24, .52);
}

.captcha-question {
  display: flex;
  align-items: center;
  gap: 12px;
}

.captcha-question small {
  display: block;
  margin-bottom: 4px;
  color: #8f98ad;
  font-size: .59rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.captcha-question strong {
  display: block;
  color: #fff;
  font-size: .9rem;
  letter-spacing: .03em;
}

.captcha-shield {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--section-rgb) / .42);
  border-radius: 11px;
  color: var(--section-color);
  background: rgb(var(--section-rgb) / .07);
  box-shadow: 0 0 14px rgb(var(--section-rgb) / .12);
  font-weight: 950;
}

.captcha-answer-row {
  display: flex;
  gap: 8px;
}

.captcha-answer-row input {
  width: 105px;
  height: 43px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .15);
  outline: none;
  border-radius: 12px;
  color: #fff;
  background: rgba(255, 255, 255, .045);
}

.captcha-answer-row input:focus {
  border-color: var(--section-color);
  box-shadow: 0 0 0 3px rgb(var(--section-rgb) / .08), 0 0 15px rgb(var(--section-rgb) / .1);
}

.captcha-refresh {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  color: var(--section-color);
  background: rgba(255, 255, 255, .045);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.captcha-refresh:hover,
.captcha-refresh:focus-visible {
  color: var(--night);
  border-color: var(--section-color);
  background: var(--section-color);
  transform: rotate(90deg);
}

.captcha-feedback {
  grid-column: 1 / -1;
  min-height: 16px;
  color: #ff8e9b;
  font-size: .68rem;
}

.form-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
}

.form-status {
  max-width: 320px;
  min-height: 18px;
  color: #c1c7d6;
  font-size: .7rem;
  line-height: 1.4;
}

.form-status.is-error { color: #ff8e9b; }
.form-status.is-success { color: var(--section-color); }

.send-button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 19px;
  border-radius: 999px;
  color: var(--night);
  background: var(--section-color);
  box-shadow: 0 0 27px rgb(var(--section-rgb) / .3);
  font-size: .77rem;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease;
}

.send-button:hover,
.send-button:focus-visible {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 0 42px rgb(var(--section-rgb) / .52);
}

.form-privacy {
  margin: 18px 0 0;
  color: #858da1;
  font-size: .66rem;
  line-height: 1.5;
}

.form-privacy a {
  color: #c7cede;
  text-underline-offset: 3px;
  transition: color .2s ease, text-shadow .2s ease;
}

.form-privacy a:hover,
.form-privacy a:focus-visible {
  color: var(--section-color);
  text-shadow: 0 0 12px rgb(var(--section-rgb) / .24);
}

.footer {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 48px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: auto;
  padding: 28px 0 38px;
  border-top: 1px solid rgba(255, 255, 255, .11);
  color: #cabfca;
  font-size: .77rem;
}

.footer-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px 10px;
  color: #aeb5c6;
  text-align: right;
}

.footer-location {
  white-space: nowrap;
  color: #e7dfe9;
}

.footer-divider { color: rgba(255, 255, 255, .25); }

.footer-contact {
  white-space: nowrap;
  color: #aeb5c6;
  transition: color .2s ease, text-shadow .2s ease;
}

.footer-contact:hover,
.footer-contact:focus-visible {
  color: var(--section-color);
  text-shadow: 0 0 12px rgb(var(--section-rgb) / .28);
}

.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(.99);
  transition: opacity .72s ease, transform .94s cubic-bezier(.16, 1, .3, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

@media (max-width: 1080px) {
  .strip-shell { width: 64vw; }
  .screen-frame { width: calc(64vw + 16px); }
  .project-pagination { width: 64vw; }
  .contact-main { grid-template-columns: 1fr; }
  .print-cocktail { right: 3vw; width: 72px; }
}

@media (max-width: 800px) {
  .site-header {
    top: 10px;
    width: calc(100% - 20px);
  }

  .print-stage { padding: 98px 0 178px; }
  .strip-shell { width: 94vw; }
  .screen-frame {
    top: 72px;
    bottom: 126px;
    width: calc(94vw + 10px);
    border-width: 4px;
    border-radius: 15px;
  }

  .ambient-scene span { opacity: .38; }
  .print-cocktail { display: none; }
  .contact-wrap { padding: 94px 18px 62px; }
  .contact-form { padding: 24px; }

  .footer {
    width: calc(100% - 36px);
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .footer-meta {
    justify-content: flex-start;
    text-align: left;
  }

  .leaf-nav {
    width: calc(100% - 14px);
    padding: 14px 18px 15px;
    clip-path: polygon(0 5%, 8% 1%, 18% 4%, 30% 1%, 43% 4%, 56% 1%, 69% 4%, 82% 1%, 94% 4%, 100% 1%, 99% 95%, 89% 99%, 77% 96%, 64% 99%, 51% 96%, 37% 99%, 24% 96%, 12% 99%, 1% 95%);
  }

  .leaf-nav-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px 8px;
    padding: 0 4px;
  }

  .leaf-nav a {
    width: 100%;
    min-height: 34px;
    padding: 4px 5px 3px;
    font-size: .78rem;
  }

  .leaf-nav::before { left: 10px; }
  .leaf-nav::after { right: 10px; }

  .project-pagination {
    width: 94vw;
    gap: 9px;
    margin-top: 70px;
  }

  .project-direction {
    min-height: 86px;
    gap: 10px;
    padding: 16px 14px;
  }

  .project-direction strong { font-size: 1.8rem; }
  .project-direction small { font-size: .52rem; letter-spacing: .12em; }
  .direction-arrow { width: 38px; height: 38px; font-size: 1.15rem; }
}

@media (max-width: 650px) {
  .strip-shell { width: 95vw; }
  .screen-frame { width: calc(95vw + 8px); }
  .project-pagination { width: 95vw; }

  .print-row.duo {
    grid-template-columns: 1fr;
  }

  .offset-panel {
    width: 92%;
    margin-top: -3.8%;
  }

  .form-grid { grid-template-columns: 1fr; }
  .form-field-wide { grid-column: auto; }

  .captcha-challenge {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .captcha-answer-row input {
    flex: 1;
    width: auto;
  }

  .form-bottom {
    align-items: stretch;
    flex-direction: column;
  }

  .send-button { width: 100%; }
}

@media (max-width: 500px) {
  .site-header {
    gap: 6px;
    padding: 8px 7px 8px 14px;
  }

  .header-cta {
    padding: 9px 7px;
    font-size: .57rem;
    white-space: nowrap;
  }

  .brand {
    max-width: none;
    font-size: clamp(.64rem, 2.8vw, .72rem);
    letter-spacing: -.015em;
    white-space: nowrap;
  }

  .contact-title { font-size: clamp(4.7rem, 21vw, 7.2rem); }
  .footer-meta { gap: 6px 8px; font-size: .68rem; }
  .project-direction { padding-inline: 11px; }
  .project-direction strong { font-size: 1.55rem; }
  .direction-arrow { width: 34px; height: 34px; }
}

@media (hover: hover) and (pointer: fine) {
  html,
  body,
  body *,
  body *::before,
  body *::after {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 2 20 14l-8 2 4 8-4 2-4-8-5 6Z' fill='%2329ff63' stroke='%23fffaf4' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2, auto;
  }

  input,
  textarea { cursor: text; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .strip-shell { transform: none; }

  .js .print-strip,
  .js .print-row,
  .js .print-row img,
  .reveal {
    opacity: 1;
    clip-path: none;
    filter: none;
    transform: none;
  }

  .print-row::after,
  .print-cocktail .bubble { display: none; }
}

/* -------------------------------------------------------------------------- */
/* PRINT — direction artistique v2                                            */
/* -------------------------------------------------------------------------- */

.brand-role { color: var(--white); }
.brand-separator {
  color: #1a8bff;
  text-shadow: 0 0 5px rgba(255, 255, 255, .24), 0 0 14px rgba(26, 139, 255, .62);
}

.print-cocktail,
.screen-frame { display: none; }

.print-stage {
  padding: 126px 0 172px;
  overflow: clip;
}

.print-stage::before,
.print-stage::after { content: none; }

.ambient-scene {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-scene::before {
  inset: 0;
  background:
    linear-gradient(90deg, rgb(var(--section-rgb) / .055), transparent 14% 86%, rgb(var(--section-rgb) / .045)),
    linear-gradient(180deg, transparent, rgba(2, 8, 23, .34));
  filter: none;
  animation: none;
}

.ambient-scene span { display: none; }

.neon-filaments {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  overflow: visible;
  opacity: .88;
}

.filament {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 18 9 3 12;
  animation: filamentFlow 12s linear infinite;
}

.filament-left,
.filament-right {
  stroke: var(--section-color);
  stroke-width: 1.75;
  filter: drop-shadow(0 0 3px var(--section-color)) drop-shadow(0 0 12px rgb(var(--section-rgb) / .72));
}

.filament-left-soft,
.filament-right-soft {
  stroke: var(--lime);
  stroke-width: .8;
  opacity: .42;
  stroke-dasharray: 7 18;
  animation-duration: 17s;
  animation-direction: reverse;
  filter: drop-shadow(0 0 6px rgb(var(--section-rgb) / .5));
}

.filament-right,
.filament-right-soft { animation-delay: -5s; }

@keyframes filamentFlow { to { stroke-dashoffset: -210; } }

.strip-shell {
  position: relative;
  z-index: 3;
  width: min(66vw, 980px);
  margin: 0 auto;
  padding: clamp(4px, .45vw, 7px);
  background: #020714;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .12),
    0 0 24px rgb(var(--section-rgb) / .22),
    0 0 70px rgb(var(--section-rgb) / .1),
    0 48px 130px rgba(0, 0, 0, .58);
  transform: none;
}

.strip-shell::before,
.strip-shell::after {
  content: "";
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.strip-shell::before {
  inset: -10px;
  border: 1px solid rgb(var(--section-rgb) / .58);
  border-inline-width: 3px;
  background: linear-gradient(180deg, rgb(var(--section-rgb) / .18), transparent 3% 97%, rgb(var(--section-rgb) / .16));
  box-shadow:
    inset 0 0 18px rgb(var(--section-rgb) / .12),
    0 0 8px rgb(var(--section-rgb) / .72),
    0 0 28px rgb(var(--section-rgb) / .26);
  opacity: .9;
}

.strip-shell::after {
  top: -18px;
  bottom: -18px;
  left: -15px;
  right: -15px;
  border-inline: 1px solid rgb(var(--section-rgb) / .42);
  background:
    linear-gradient(180deg, transparent 0 8%, rgb(var(--section-rgb) / .5) 16%, transparent 30% 58%, rgb(var(--section-rgb) / .42) 72%, transparent 91%) left / 2px 100% no-repeat,
    linear-gradient(180deg, rgb(var(--section-rgb) / .36), transparent 22% 76%, rgb(var(--section-rgb) / .4)) right / 2px 100% no-repeat;
  filter: drop-shadow(0 0 5px var(--section-color));
  opacity: .68;
  animation: screenRailsBreathe 5.5s ease-in-out infinite;
}

@keyframes screenRailsBreathe {
  50% { opacity: 1; filter: drop-shadow(0 0 9px var(--section-color)); }
}

.print-strip {
  overflow: hidden;
  background: #020512;
  box-shadow: none;
}

.print-strip::before,
.print-strip::after { display: none; }

.print-row,
.puzzle-stack {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #030718;
}

.print-row + .print-row { margin-top: 0; }

.print-row img,
.puzzle-stack img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  object-fit: cover;
}

.print-row.puzzle-duo {
  display: grid;
  grid-template-columns: .714fr .707fr;
  align-items: stretch;
  gap: 0;
}

.print-row.puzzle-trio {
  display: grid;
  grid-template-columns: 1.014fr .785fr .784fr;
  align-items: stretch;
  gap: 0;
}

.print-row.puzzle-finale {
  display: grid;
  grid-template-columns: 31.7fr 68.3fr;
  align-items: stretch;
  gap: 0;
}

.puzzle-duo > img,
.puzzle-trio > img,
.puzzle-finale > img {
  height: 100%;
  object-fit: cover;
}

.puzzle-stack {
  display: flex;
  flex-direction: column;
}

.js .print-row[data-reveal="join"]:not(.entry-row) img:first-child { transform: translate3d(-34px, 0, 0); }
.js .print-row[data-reveal="join"]:not(.entry-row) img:last-child { transform: translate3d(34px, 0, 0); }
.js .print-row[data-reveal="join"].in-view img { opacity: 1; transform: none; }

/* Lecteur du mémoire */
.memoire-section {
  position: relative;
  z-index: 4;
  width: min(1180px, calc(100% - 48px));
  margin: clamp(150px, 18vw, 250px) auto 0;
  padding: clamp(34px, 5vw, 70px);
  border: 1px solid rgb(var(--section-rgb) / .22);
  background:
    radial-gradient(circle at 50% 18%, rgb(var(--section-rgb) / .11), transparent 35%),
    linear-gradient(150deg, rgba(3, 7, 24, .9), rgba(7, 17, 40, .86));
  box-shadow: 0 45px 120px rgba(0, 0, 0, .42), inset 0 0 60px rgba(0, 0, 0, .3);
  isolation: isolate;
}

.memoire-section::before,
.memoire-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.memoire-section::before {
  inset: -9px;
  border: 1px solid rgb(var(--section-rgb) / .3);
  clip-path: polygon(0 2%, 7% 0, 15% 1.4%, 25% 0, 35% 1.2%, 45% 0, 56% 1.5%, 68% 0, 79% 1.2%, 90% 0, 100% 2%, 99% 98%, 91% 100%, 81% 98.7%, 69% 100%, 58% 98.5%, 46% 100%, 34% 98.8%, 22% 100%, 11% 98.5%, 1% 100%);
}

.memoire-section::after {
  top: 0;
  right: 12%;
  left: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--section-color), var(--lime), transparent);
  box-shadow: 0 0 14px var(--section-color);
}

.memoire-heading {
  max-width: 920px;
  margin: 0 auto clamp(30px, 5vw, 58px);
  text-align: center;
}

.memoire-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--section-color);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.memoire-kicker::before,
.memoire-kicker::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.memoire-heading h2 {
  margin: 17px 0 15px;
  color: #d9b65b;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.25rem, 7.7vw, 7.5rem);
  font-weight: 400;
  line-height: .79;
  letter-spacing: -.065em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(217, 182, 91, .17);
}

.memoire-heading p {
  max-width: 610px;
  margin: 0 auto;
  color: #b9c0d0;
  font-size: clamp(.82rem, 1.3vw, 1rem);
  line-height: 1.65;
}

.book-reader {
  position: relative;
  outline: none;
}

.book-reader:focus-visible {
  outline: 1px solid var(--section-color);
  outline-offset: 12px;
}

.reader-halo {
  position: absolute;
  z-index: -1;
  top: 8%;
  right: 7%;
  bottom: 16%;
  left: 7%;
  background: rgb(var(--section-rgb) / .15);
  filter: blur(48px);
  opacity: .58;
}

.reader-stage {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  align-items: center;
  gap: clamp(10px, 2vw, 24px);
}

.reader-page {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(217, 182, 91, .38);
  background: #0a0b0c;
  box-shadow:
    0 0 0 6px #020512,
    0 0 0 7px rgb(var(--section-rgb) / .25),
    0 25px 70px rgba(0, 0, 0, .62),
    0 0 34px rgb(var(--section-rgb) / .11);
}

.reader-page::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .42) 8% 92%, transparent);
  box-shadow: -7px 0 14px rgba(0, 0, 0, .09), 7px 0 14px rgba(255, 255, 255, .04);
  pointer-events: none;
}

.reader-page img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #090a0b;
  user-select: none;
  -webkit-user-drag: none;
}

.reader-scan {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 43%, rgb(var(--section-rgb) / .12), transparent 57%);
  opacity: 0;
  transform: translate3d(-70%, 0, 0);
}

.book-reader.is-changing .reader-scan { animation: readerScan .56s ease both; }
.book-reader.is-changing-next .reader-page img { animation: readerNext .44s cubic-bezier(.2, .8, .2, 1) both; }
.book-reader.is-changing-previous .reader-page img { animation: readerPrevious .44s cubic-bezier(.2, .8, .2, 1) both; }

@keyframes readerScan {
  25% { opacity: .8; }
  to { opacity: 0; transform: translate3d(70%, 0, 0); }
}

@keyframes readerNext {
  0% { opacity: .25; transform: translate3d(16px, 0, 0) scale(.994); filter: brightness(.6); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes readerPrevious {
  0% { opacity: .25; transform: translate3d(-16px, 0, 0) scale(.994); filter: brightness(.6); }
  to { opacity: 1; transform: none; filter: none; }
}

.reader-turn {
  width: 52px;
  height: 70px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--section-rgb) / .42);
  border-radius: 5px;
  color: var(--section-color);
  background: rgba(3, 7, 24, .8);
  box-shadow: inset 0 0 18px rgb(var(--section-rgb) / .07), 0 0 16px rgb(var(--section-rgb) / .1);
  font-size: 1.25rem;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease;
}

.reader-turn:hover,
.reader-turn:focus-visible {
  color: var(--night);
  background: var(--section-color);
  box-shadow: 0 0 26px rgb(var(--section-rgb) / .46);
  transform: scale(1.05);
}

.reader-turn:disabled {
  opacity: .22;
  cursor: default;
  transform: none;
}

.reader-controls {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 20px;
  margin: 27px 78px 0;
}

.reader-counter {
  min-width: 150px;
  color: #d9b65b;
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.reader-range {
  --reader-progress: 0%;
  width: 100%;
  height: 4px;
  appearance: none;
  border-radius: 99px;
  outline: none;
  background: linear-gradient(90deg, var(--section-color) var(--reader-progress), rgba(255, 255, 255, .13) var(--reader-progress));
  box-shadow: 0 0 8px rgb(var(--section-rgb) / .18);
  cursor: pointer;
}

.reader-range::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
  appearance: none;
  border: 2px solid #07112b;
  border-radius: 50%;
  background: var(--section-color);
  box-shadow: 0 0 11px var(--section-color);
}

.reader-range::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 2px solid #07112b;
  border-radius: 50%;
  background: var(--section-color);
  box-shadow: 0 0 11px var(--section-color);
}

.reader-download {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid rgba(217, 182, 91, .34);
  border-radius: 999px;
  color: #d9b65b;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.reader-download:hover,
.reader-download:focus-visible {
  color: #07112b;
  border-color: #d9b65b;
  background: #d9b65b;
  transform: translate3d(0, -2px, 0);
}

.reader-hint {
  margin: 13px 78px 0;
  color: #747e94;
  font-size: .63rem;
  letter-spacing: .06em;
}

/* Navigation projets dans le langage du MENU de l’Index */
.project-pagination {
  position: relative;
  z-index: 12;
  width: min(980px, calc(100% - 48px));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 12px;
  margin: clamp(94px, 10vw, 140px) auto 0;
}

.project-direction,
.project-menu-link {
  position: relative;
  min-height: 104px;
  overflow: hidden;
  clip-path: polygon(0 6%, 12% 1%, 25% 4%, 39% 1%, 54% 4%, 69% 1%, 84% 4%, 100% 1%, 99% 94%, 84% 98%, 68% 95%, 51% 99%, 35% 95%, 18% 98%, 1% 94%);
}

.project-direction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  color: var(--accent);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .24)),
    url("../ui/menu-paper.webp") center / 100% 100% no-repeat,
    #f5f1e9;
  background-blend-mode: screen, normal, normal;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(8, 17, 38, .13);
  text-shadow: 0 0 9px color-mix(in srgb, var(--accent) 58%, transparent);
  transform: none;
  transition: filter .22s ease, translate .22s ease;
}

.project-direction::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-block: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  pointer-events: none;
}

.project-direction strong {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: .85;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.direction-mark {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--accent);
  background: #081126;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--accent) 42%, transparent);
  font-size: .9rem;
}

.project-direction:hover,
.project-direction:focus-visible { filter: brightness(1.04); translate: 0 -4px; }

.project-menu-link {
  min-width: 156px;
  display: grid;
  place-content: center;
  gap: 2px;
  padding: 18px 24px;
  color: var(--white);
  background: #07112b;
  border: 1px solid rgb(var(--section-rgb) / .42);
  box-shadow: 0 0 24px rgb(var(--section-rgb) / .14), inset 0 0 22px rgb(var(--section-rgb) / .05);
  text-align: center;
  text-transform: uppercase;
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, translate .2s ease;
}

.project-menu-link span {
  color: #7f899e;
  font-size: .53rem;
  font-weight: 900;
  letter-spacing: .16em;
}

.project-menu-link strong {
  color: var(--section-color);
  font-family: var(--display);
  font-size: 2.15rem;
  line-height: .9;
  letter-spacing: .05em;
}

.project-menu-link:hover,
.project-menu-link:focus-visible {
  border-color: var(--section-color);
  box-shadow: 0 0 34px rgb(var(--section-rgb) / .3), inset 0 0 22px rgb(var(--section-rgb) / .08);
  translate: 0 -4px;
}

/* Dock MENU — feuille desktop, panneau tactile mobile */
.leaf-nav {
  position: fixed;
  z-index: 850;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(960px, calc(100% - 28px));
  padding: 0;
  color: #081126;
  background: none;
  box-shadow: none;
  clip-path: none;
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
  transition: opacity .34s ease, transform .5s cubic-bezier(.22, .8, .22, 1);
}

.leaf-nav::before,
.leaf-nav::after { display: none; }

.leaf-nav-sheet {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 26px 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .64), rgba(255, 255, 255, .28)),
    linear-gradient(118deg, rgb(var(--section-rgb) / .04), transparent 28% 72%, rgba(25, 231, 255, .045)),
    url("../ui/menu-paper.webp") center / 100% 100% no-repeat,
    #f5f1e9;
  background-blend-mode: screen, soft-light, normal, normal;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .46), 0 0 0 1px rgba(8, 17, 38, .17), 0 0 26px rgb(var(--section-rgb) / .08);
  clip-path: polygon(0 8%, 4% 1%, 10% 5%, 18% 1%, 27% 4%, 37% 1%, 47% 4%, 57% 1%, 67% 4%, 77% 1%, 87% 4%, 96% 1%, 100% 6%, 99% 92%, 94% 98%, 85% 94%, 75% 99%, 64% 95%, 53% 99%, 42% 96%, 31% 99%, 20% 95%, 10% 98%, 1% 93%);
  transform: rotate(-.18deg);
}

.leaf-nav-title {
  position: relative;
  flex: 0 0 auto;
  padding-right: 22px;
  color: #081126;
  font-family: var(--display);
  font-size: 1.45rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.leaf-nav-title::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 0;
  bottom: 3px;
  width: 1px;
  background: linear-gradient(transparent, rgba(8, 17, 38, .28), transparent);
}

.leaf-nav-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
}

.leaf-nav a {
  width: 100%;
  min-height: 38px;
  padding: 6px 8px 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: color-mix(in srgb, var(--accent) 74%, #596176 26%);
  font-family: var(--display);
  font-size: clamp(.74rem, 1.05vw, .92rem);
  letter-spacing: .045em;
  text-transform: uppercase;
}

.leaf-nav a:hover,
.leaf-nav a:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  background: rgba(8, 17, 38, .06);
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 62%, transparent);
  transform: translate3d(0, -2px, 0);
}

.leaf-nav a[aria-current="page"] {
  color: var(--green);
  border-color: rgba(8, 17, 38, .72);
  background: #081126;
  box-shadow: 3px 3px 0 rgb(var(--section-rgb) / .48), 0 0 14px rgb(var(--section-rgb) / .18);
  text-shadow: 0 0 8px rgb(var(--section-rgb) / .62);
  transform: rotate(-1deg);
}

.leaf-nav a[aria-current="page"]::after { display: none; }

.leaf-nav-toggle { display: none; }

.leaf-nav.is-withdrawn {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, calc(100% + 28px), 0);
}

@media (max-width: 1080px) {
  .strip-shell { width: min(72vw, 900px); }
  .reader-controls,
  .reader-hint { margin-inline: 74px; }
}

@media (max-width: 800px) {
  .print-stage { padding: 98px 0 156px; }
  .strip-shell { width: 93vw; padding: 4px; }
  .strip-shell::before { inset: -7px; border-inline-width: 2px; }
  .strip-shell::after { inset: -12px -10px; }

  .neon-filaments { inset: -8% -30%; width: 160%; height: 116%; opacity: .68; }

  .memoire-section {
    width: calc(100% - 24px);
    margin-top: 112px;
    padding: 34px 18px 30px;
  }

  .memoire-heading { margin-bottom: 34px; }
  .memoire-heading h2 { font-size: clamp(3.15rem, 14vw, 5.6rem); }

  .reader-stage {
    position: relative;
    display: block;
  }

  .reader-turn {
    position: absolute;
    z-index: 8;
    top: 50%;
    width: 42px;
    height: 54px;
    border-radius: 0;
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
  }

  .reader-turn:hover,
  .reader-turn:focus-visible { transform: translateY(-50%) scale(1.04); }
  .reader-previous { left: 7px; }
  .reader-next { right: 7px; }

  .reader-controls {
    grid-template-columns: 1fr auto;
    gap: 16px 12px;
    margin: 24px 2px 0;
  }

  .reader-counter { min-width: 0; }
  .reader-range { grid-column: 1 / -1; grid-row: 1; }
  .reader-download { grid-column: 2; grid-row: 2; }
  .reader-hint { margin: 12px 2px 0; }

  .project-pagination {
    width: calc(100% - 24px);
    gap: 7px;
    margin-top: 88px;
  }

  .project-direction,
  .project-menu-link { min-height: 82px; }
  .project-direction { padding: 15px 12px; }
  .project-direction strong { font-size: clamp(1.35rem, 5.5vw, 2rem); }
  .direction-mark { width: 29px; height: 29px; box-shadow: 2px 2px 0 color-mix(in srgb, var(--accent) 42%, transparent); }
  .project-menu-link { min-width: 92px; padding: 13px 9px; }
  .project-menu-link strong { font-size: 1.55rem; }
  .project-menu-link span { font-size: .45rem; }

  .leaf-nav {
    width: calc(100% - 22px);
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .leaf-nav-toggle {
    width: 100%;
    min-height: 56px;
    display: grid;
    grid-template-columns: 1fr auto 32px;
    align-items: center;
    gap: 12px;
    padding: 8px 11px 8px 18px;
    border: 1px solid rgb(var(--section-rgb) / .52);
    border-radius: 15px;
    color: var(--white);
    background: rgba(3, 7, 24, .94);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 22px rgb(var(--section-rgb) / .14), inset 0 0 20px rgb(var(--section-rgb) / .05);
    backdrop-filter: blur(16px);
    text-align: left;
    cursor: pointer;
  }

  .leaf-nav-toggle > span {
    color: #aeb6c8;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
  }

  .leaf-nav-toggle strong {
    color: var(--section-color);
    font-family: var(--display);
    font-size: 1.65rem;
    line-height: .8;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgb(var(--section-rgb) / .6);
  }

  .leaf-nav-toggle i {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgb(var(--section-rgb) / .4);
    border-radius: 50%;
    color: var(--section-color);
    font-style: normal;
    transition: transform .3s ease;
  }

  .leaf-nav-toggle:focus-visible {
    outline: 2px solid var(--section-color);
    outline-offset: 2px;
  }

  .leaf-nav-sheet {
    position: absolute;
    right: 0;
    bottom: calc(100% + 9px);
    left: 0;
    display: block;
    padding: 25px 19px 22px;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, 18px, 0) scale(.97) rotate(-.35deg);
    transform-origin: 50% 100%;
    transition: opacity .25s ease, transform .38s cubic-bezier(.16, 1, .3, 1);
  }

  .leaf-nav.is-open .leaf-nav-sheet {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) scale(1) rotate(-.35deg);
  }

  .leaf-nav.is-open .leaf-nav-toggle i { transform: rotate(180deg); }

  .leaf-nav-title {
    display: block;
    margin-bottom: 14px;
    padding: 0 0 9px;
    border-bottom: 1px solid rgba(8, 17, 38, .18);
    font-size: 2rem;
    text-align: center;
  }

  .leaf-nav-title::after { display: none; }

  .leaf-nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .leaf-nav a {
    min-height: 48px;
    padding: 8px 10px;
    border-color: color-mix(in srgb, var(--accent) 24%, transparent);
    background: rgba(8, 17, 38, .035);
    font-size: 1.05rem;
  }
}

@media (max-width: 500px) {
  .site-header { min-height: 52px; padding-left: 12px; }
  .brand { font-size: clamp(.56rem, 2.45vw, .67rem); line-height: 1.12; }
  .brand-role { white-space: nowrap; }

  .memoire-kicker { font-size: .57rem; letter-spacing: .12em; }
  .memoire-kicker::before,
  .memoire-kicker::after { width: 20px; }
  .memoire-heading h2 { letter-spacing: -.07em; }
  .memoire-heading p { font-size: .76rem; }

  .reader-page { box-shadow: 0 0 0 4px #020512, 0 0 0 5px rgb(var(--section-rgb) / .25), 0 18px 52px rgba(0, 0, 0, .6); }
  .reader-counter { font-size: .78rem; }
  .reader-download { padding: 9px 11px; font-size: .57rem; }
  .reader-hint { font-size: .57rem; line-height: 1.45; }

  .project-direction { justify-content: center; padding-inline: 7px; }
  .direction-mark { display: none; }
  .project-menu-link { min-width: 82px; }
}

@media (max-width: 360px) {
  .brand-role { display: block; }
  .project-direction strong { font-size: 1.23rem; }
  .project-menu-link { min-width: 74px; }
  .project-menu-link strong { font-size: 1.38rem; }
}

@media (prefers-reduced-motion: reduce) {
  .filament,
  .strip-shell::after,
  .book-reader.is-changing .reader-scan,
  .book-reader.is-changing .reader-page img { animation: none !important; }
}

/* -------------------------------------------------------------------------- */
/* PRINT — direction artistique v3                                            */
/* -------------------------------------------------------------------------- */

.brand-role,
.brand-separator {
  color: var(--section-color);
  text-shadow: 0 0 6px rgb(var(--section-rgb) / .55), 0 0 15px rgb(var(--section-rgb) / .24);
}

/* Les filaments vivent dans les joints du mur, entre les briques. */
.neon-filaments { display: none; }

.ambient-scene::before {
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 8%, rgb(var(--section-rgb) / .88) 10% 16%, transparent 18% 48%, rgb(var(--section-rgb) / .72) 50% 58%, transparent 60% 100%) 0 65px / 300px 2px repeat,
    linear-gradient(90deg, transparent 0 20%, rgb(var(--section-rgb) / .68) 22% 31%, transparent 33% 72%, rgb(var(--section-rgb) / .84) 74% 83%, transparent 85% 100%) 150px 131px / 300px 2px repeat,
    linear-gradient(180deg, transparent 0 12%, rgb(var(--section-rgb) / .78) 14% 23%, transparent 25% 57%, rgb(var(--section-rgb) / .64) 59% 69%, transparent 71% 100%) 149px 0 / 2px 264px repeat,
    linear-gradient(180deg, transparent 0 29%, rgb(var(--section-rgb) / .72) 31% 42%, transparent 44% 76%, rgb(var(--section-rgb) / .58) 78% 87%, transparent 89% 100%) 299px 66px / 2px 264px repeat;
  opacity: .7;
  filter: drop-shadow(0 0 3px var(--section-color)) drop-shadow(0 0 8px rgb(var(--section-rgb) / .42));
  animation: mortarFilamentPulse 5.6s steps(4, end) infinite;
}

@keyframes mortarFilamentPulse {
  0%, 17%, 23%, 76%, 100% { opacity: .68; }
  19% { opacity: .24; }
  21%, 79% { opacity: .92; }
}

/* Titre de catégorie, repris du cartouche MENU de l’Index. */
.print-heading {
  position: relative;
  z-index: 4;
  width: min(980px, calc(100% - 40px));
  display: grid;
  place-items: center;
  margin: 0 auto clamp(44px, 6vw, 78px);
  text-align: center;
}

.print-heading-sign {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.print-heading-icon {
  width: clamp(74px, 7vw, 100px);
  height: clamp(74px, 7vw, 100px);
  overflow: visible;
  color: var(--section-color);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .65)) drop-shadow(0 0 9px var(--section-color)) drop-shadow(0 0 22px rgb(var(--section-rgb) / .48));
}

.print-heading-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.print-heading-icon .icon-thin { stroke-width: 2.6; opacity: .78; }
.print-heading-icon circle { fill: currentColor; }
.print-heading-icon circle:last-child { opacity: .48; }

.print-heading h1 {
  margin: -4px 0 10px;
  color: var(--section-color);
  font-family: var(--display);
  font-size: clamp(6rem, 12vw, 11rem);
  font-weight: 900;
  line-height: .72;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-shadow: 0 0 4px rgba(255, 255, 255, .5), 0 0 12px var(--section-color), 0 0 34px rgb(var(--section-rgb) / .42);
}

.print-heading-sign > div > span {
  display: inline-block;
  padding: 7px 14px 6px;
  color: #081126;
  background: var(--yellow);
  box-shadow: 4px 4px 0 rgb(var(--section-rgb) / .46);
  font-size: .61rem;
  font-weight: 950;
  letter-spacing: .2em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}

.print-stage { padding-top: 116px; }

/* L’image reste toujours présente : l’allumage ne crée plus de trou noir. */
#printGallery .print-row img,
#printGallery .puzzle-stack img {
  opacity: 1;
  clip-path: none;
  transform: none;
  transition: filter .78s cubic-bezier(.2, .8, .2, 1);
}

#printGallery .print-row:not(.in-view):not(.embedded-reader) img {
  filter: brightness(.46) saturate(.66) contrast(.96);
}

#printGallery .print-row.in-view img,
#printGallery .entry-row img {
  filter: brightness(1) saturate(1) contrast(1);
}

#printGallery > .print-row {
  margin: 0 !important;
  border: 0;
  line-height: 0;
}

/* Les deux livres sont des éléments du même écran que la mosaïque. */
.embedded-reader {
  position: relative;
  z-index: 3;
  width: 100%;
  outline: none;
  background: #07112b;
  isolation: isolate;
}

.embedded-reader + .embedded-reader {
  border-top: 2px solid rgb(var(--section-rgb) / .46);
  box-shadow: 0 -1px 10px rgb(var(--section-rgb) / .24);
}

.embedded-reader:focus-visible {
  outline: 2px solid var(--section-color);
  outline-offset: -5px;
}

.embedded-reader .reader-stage {
  position: relative;
  display: block;
  width: 100%;
}

.embedded-reader .reader-page {
  --book-art: none;
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 0;
  background: #07112b;
  box-shadow: inset 0 0 0 1px rgb(var(--section-rgb) / .22), inset 0 0 36px rgba(0, 0, 0, .42);
}

.embedded-reader[data-book="memoire"] .reader-page { aspect-ratio: 4 / 3; }
.embedded-reader[data-book="heritage"] .reader-page { aspect-ratio: 2 / 1; }

.embedded-reader .reader-page::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -28px;
  background-image: linear-gradient(rgba(2, 5, 14, .28), rgba(2, 5, 14, .28)), var(--book-art);
  background-position: center;
  background-size: cover;
  filter: blur(22px) saturate(.8) brightness(.62);
  transform: scale(1.08);
}

.embedded-reader .reader-page::before {
  z-index: 3;
  opacity: .55;
}

.embedded-reader.is-cover .reader-page::before { display: none; }

.embedded-reader .reader-page img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

.embedded-reader.is-cover .reader-page img {
  object-fit: contain;
  filter: drop-shadow(0 0 26px rgba(0, 0, 0, .5)) !important;
}

.embedded-reader .reader-scan { z-index: 4; }

.embedded-reader .reader-turn {
  position: absolute;
  z-index: 9;
  top: 50%;
  width: clamp(42px, 5vw, 58px);
  height: clamp(54px, 7vw, 76px);
  border: 1px solid rgb(var(--section-rgb) / .5);
  border-radius: 4px;
  color: var(--section-color);
  background: rgba(3, 7, 24, .78);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 18px rgb(var(--section-rgb) / .08), 0 0 18px rgb(var(--section-rgb) / .18);
  transform: translateY(-50%);
}

.embedded-reader .reader-previous { left: clamp(8px, 2vw, 24px); }
.embedded-reader .reader-next { right: clamp(8px, 2vw, 24px); }

.embedded-reader .reader-turn:hover,
.embedded-reader .reader-turn:focus-visible {
  color: #07112b;
  background: var(--section-color);
  box-shadow: 0 0 28px rgb(var(--section-rgb) / .5);
  transform: translateY(-50%) scale(1.04);
}

.embedded-reader .reader-turn:disabled {
  opacity: .12;
  pointer-events: none;
}

.embedded-reader .reader-controls {
  position: absolute;
  z-index: 10;
  right: clamp(70px, 12vw, 138px);
  bottom: clamp(11px, 2vw, 22px);
  left: clamp(70px, 12vw, 138px);
  display: block;
  margin: 0;
  pointer-events: auto;
}

.embedded-reader .reader-range {
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--section-color) var(--reader-progress), rgba(255, 255, 255, .22) var(--reader-progress));
  box-shadow: 0 0 8px rgb(var(--section-rgb) / .3);
}

.embedded-reader .reader-range::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
}

/* Navigation basse : un seul panneau MENU, trois entrées du même système. */
.project-pagination {
  width: min(1040px, calc(100% - 40px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 24px 28px;
  color: #081126;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .25)),
    url("../ui/menu-paper.webp") center / 100% 100% no-repeat,
    #f5f1e9;
  background-blend-mode: screen, normal, normal;
  box-shadow: 0 24px 62px rgba(0, 0, 0, .42), 0 0 0 1px rgba(8, 17, 38, .16);
  clip-path: polygon(0 4%, 7% 1%, 15% 3%, 24% 1%, 34% 3%, 44% 1%, 54% 3%, 64% 1%, 74% 3%, 84% 1%, 93% 3%, 100% 1%, 99% 95%, 91% 98%, 81% 96%, 70% 99%, 59% 96%, 48% 99%, 37% 96%, 26% 99%, 15% 96%, 6% 99%, 1% 95%);
}

.project-direction,
.project-menu-link {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  overflow: visible;
  clip-path: none;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(8, 17, 38, .14);
  box-shadow: none;
  text-align: left;
  text-shadow: none;
  transform: none;
  transition: background .22s ease, translate .22s ease;
}

.project-pagination > a:last-child { border-right: 0; }

.project-direction::before { display: none; }

.project-service-icon {
  width: 62px;
  height: 62px;
  overflow: visible;
  color: var(--accent);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 58%, transparent));
}

.project-service-icon path,
.project-service-icon rect,
.project-service-icon circle,
.project-service-icon ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 4.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-service-icon .icon-fill {
  fill: currentColor;
  stroke: none;
}

.project-service-title,
.project-direction .project-service-title,
.project-menu-link .project-service-title {
  color: var(--accent);
  font-family: var(--display);
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: .85;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 44%, transparent);
}

.project-service-arrow,
.project-menu-link .project-service-arrow {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, #081126);
  border-radius: 50%;
  color: var(--accent);
  background: #081126;
  font-size: .72rem;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

.project-direction:hover,
.project-direction:focus-visible,
.project-menu-link:hover,
.project-menu-link:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  filter: none;
  translate: 0 -3px;
}

.project-pagination a:hover .project-service-arrow,
.project-pagination a:focus-visible .project-service-arrow {
  color: #081126;
  background: var(--accent);
  transform: rotate(-35deg);
}

/* Menu fixe : icônes, titrage et couleurs repris des six entrées de l’Index. */
.leaf-nav-sheet { gap: 18px; padding: 12px 22px 13px; }

.leaf-nav-heading {
  flex: 0 0 132px;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 8px;
  padding-right: 18px;
  border-right: 1px solid rgba(8, 17, 38, .18);
}

.leaf-cocktail-icon {
  width: 44px;
  height: 44px;
  overflow: visible;
  color: var(--pink);
  filter: drop-shadow(0 0 5px rgba(255, 24, 207, .45));
}

.leaf-cocktail-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leaf-cocktail-icon circle { fill: var(--yellow); }

.leaf-nav-heading strong {
  display: block;
  color: var(--pink);
  font-family: var(--display);
  font-size: 1.65rem;
  line-height: .78;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 24, 207, .42);
}

.leaf-nav-heading small {
  display: block;
  width: max-content;
  margin-top: 6px;
  padding: 3px 5px 2px;
  color: #081126;
  background: var(--yellow);
  font-size: .4rem;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.leaf-nav-list { gap: 3px; }

.leaf-nav .leaf-menu-entry {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 5px;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: color-mix(in srgb, var(--accent) 72%, #596176 28%);
  background: transparent;
  text-align: left;
}

.leaf-service-icon {
  width: 35px;
  height: 35px;
  overflow: visible;
  color: currentColor;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 44%, transparent));
}

.leaf-service-icon path,
.leaf-service-icon rect,
.leaf-service-icon circle,
.leaf-service-icon ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leaf-service-icon .icon-thin { stroke-width: 2.7; opacity: .75; }
.leaf-service-icon .icon-fill { fill: currentColor; stroke: none; }

.leaf-menu-entry > span {
  color: currentColor;
  font-family: var(--display);
  font-size: clamp(.68rem, .88vw, .82rem);
  line-height: .9;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.leaf-menu-entry > i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .48rem;
  font-style: normal;
}

.leaf-nav .leaf-menu-entry:hover,
.leaf-nav .leaf-menu-entry:focus-visible {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  transform: translateY(-1px);
}

.leaf-nav .leaf-menu-entry[aria-current="page"] {
  color: var(--green);
  border-color: rgba(8, 17, 38, .7);
  background: #081126;
  box-shadow: 2px 2px 0 rgb(var(--section-rgb) / .44), 0 0 12px rgb(var(--section-rgb) / .16);
}

@media (max-width: 800px) {
  .print-heading { margin-bottom: 42px; }
  .print-heading-icon { width: 68px; height: 68px; }
  .print-heading h1 { font-size: clamp(5.2rem, 25vw, 7rem); }

  .embedded-reader .reader-turn {
    width: 39px;
    height: 50px;
  }

  .embedded-reader .reader-controls {
    right: 60px;
    bottom: 10px;
    left: 60px;
  }

  .project-pagination {
    width: calc(100% - 24px);
    padding: 14px 10px;
  }

  .project-direction,
  .project-menu-link {
    min-height: 98px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 5px;
    padding: 10px 6px;
    border-right: 1px solid rgba(8, 17, 38, .14);
    text-align: center;
  }

  .project-service-icon { width: 43px; height: 43px; }
  .project-service-title,
  .project-direction .project-service-title,
  .project-menu-link .project-service-title { font-size: clamp(1.15rem, 5vw, 1.55rem); }
  .project-service-arrow { display: none !important; }

  .leaf-nav-toggle {
    border: 0;
    border-radius: 0;
    color: #081126;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .25)),
      url("../ui/menu-paper.webp") center / 100% 100% no-repeat,
      #f5f1e9;
    background-blend-mode: screen, normal, normal;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 18px rgb(var(--section-rgb) / .12);
    clip-path: polygon(0 8%, 8% 1%, 18% 5%, 30% 1%, 43% 4%, 56% 1%, 69% 4%, 82% 1%, 94% 5%, 100% 1%, 99% 94%, 89% 99%, 77% 96%, 64% 99%, 51% 96%, 37% 99%, 24% 96%, 12% 99%, 1% 94%);
    backdrop-filter: none;
  }

  .leaf-nav-toggle > span {
    color: #081126;
    font-family: var(--display);
    font-size: 1.42rem;
    letter-spacing: .04em;
  }

  .leaf-nav-toggle strong {
    padding: 7px 13px 5px;
    border-radius: 5px;
    color: var(--section-color);
    background: #081126;
    box-shadow: 3px 3px 0 rgb(var(--section-rgb) / .42);
    font-size: 1.38rem;
  }

  .leaf-nav-toggle i {
    color: var(--section-color);
    border-color: rgb(var(--section-rgb) / .45);
    background: #081126;
  }

  .leaf-nav-sheet { padding: 22px 18px 20px; }

  .leaf-nav-heading {
    width: 100%;
    display: grid;
    grid-template-columns: 56px 1fr;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 0 12px 13px;
    border-right: 0;
    border-bottom: 1px solid rgba(8, 17, 38, .18);
    text-align: left;
  }

  .leaf-cocktail-icon { width: 52px; height: 52px; }
  .leaf-nav-heading strong { font-size: 2.8rem; }
  .leaf-nav-heading small { font-size: .48rem; }

  .leaf-nav .leaf-nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .leaf-nav .leaf-menu-entry {
    min-height: 60px;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    gap: 7px;
    padding: 7px 8px;
    border-color: color-mix(in srgb, var(--accent) 20%, transparent);
    background: rgba(8, 17, 38, .025);
  }

  .leaf-service-icon { width: 40px; height: 40px; }
  .leaf-menu-entry > span { font-size: 1rem; }
}

@media (max-width: 420px) {
  .embedded-reader .reader-turn { width: 34px; height: 44px; font-size: .9rem; }
  .embedded-reader .reader-previous { left: 5px; }
  .embedded-reader .reader-next { right: 5px; }
  .embedded-reader .reader-controls { right: 48px; left: 48px; }

  .leaf-nav-sheet { padding-inline: 14px; }
  .leaf-nav .leaf-menu-entry { grid-template-columns: 36px minmax(0, 1fr) 18px; gap: 5px; }
  .leaf-service-icon { width: 34px; height: 34px; }
  .leaf-menu-entry > span { font-size: .87rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-scene::before { animation: none; }
}

/* -------------------------------------------------------------------------- */
/* PRINT — direction artistique v4                                            */
/* -------------------------------------------------------------------------- */

/* Filaments réellement contenus dans le mortier du mur : 1 px, fragments
   courts et glow très discret. Les deux axes utilisent leur propre masque. */
.ambient-scene::before,
.ambient-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  opacity: .34;
  filter: drop-shadow(0 0 1px rgb(var(--section-rgb) / .32));
  animation: mortarCurrent 8.4s steps(5, end) infinite;
}

.ambient-scene::before {
  background-image: linear-gradient(
    90deg,
    transparent 0 7%,
    rgb(var(--section-rgb) / .72) 7.2% 13%,
    transparent 13.2% 31%,
    rgb(var(--section-rgb) / .5) 31.2% 39%,
    transparent 39.2% 65%,
    rgb(var(--section-rgb) / .66) 65.2% 73%,
    transparent 73.2% 100%
  );
  background-size: 360px 100%;
  -webkit-mask-image: repeating-linear-gradient(180deg, transparent 0 65px, #000 65px 66px);
  mask-image: repeating-linear-gradient(180deg, transparent 0 65px, #000 65px 66px);
}

.ambient-scene::after {
  background-image: linear-gradient(
    180deg,
    transparent 0 9%,
    rgb(var(--section-rgb) / .58) 9.2% 15%,
    transparent 15.2% 38%,
    rgb(var(--section-rgb) / .7) 38.2% 45%,
    transparent 45.2% 70%,
    rgb(var(--section-rgb) / .5) 70.2% 77%,
    transparent 77.2% 100%
  );
  background-size: 100% 300px;
  -webkit-mask-image: repeating-linear-gradient(90deg, transparent 0 74px, #000 74px 75px);
  mask-image: repeating-linear-gradient(90deg, transparent 0 74px, #000 74px 75px);
  animation-delay: -3.2s;
}

@keyframes mortarCurrent {
  0%, 28%, 34%, 76%, 100% { opacity: .28; }
  30% { opacity: .1; }
  32%, 79% { opacity: .46; }
}

/* L’écran devient un seul objet central, avec le cadre orbital du MENU Index. */
.strip-shell {
  --screen-angle: 0turn;
  padding: 5px;
  border: 3px solid transparent;
  border-radius: 25px;
  background:
    linear-gradient(#020714, #020714) padding-box,
    conic-gradient(from var(--screen-angle), var(--pink), #fff 12%, var(--yellow) 20%, var(--green) 35%, var(--cyan) 52%, var(--violet) 67%, #fff 80%, var(--pink)) border-box;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08),
    0 0 18px rgb(var(--section-rgb) / .2),
    0 0 62px rgb(var(--section-rgb) / .1),
    0 48px 130px rgba(0, 0, 0, .62);
  animation: screenBorderOrbit 7.2s linear infinite, screenFramePulse 4.8s ease-in-out infinite;
}

.strip-shell::before {
  inset: -9px;
  z-index: 7;
  padding: 2px;
  border: 0;
  border-radius: 31px;
  background: conic-gradient(from var(--screen-angle), var(--pink), transparent 13%, var(--yellow), transparent 31%, var(--green), transparent 49%, var(--cyan), transparent 67%, var(--violet), transparent 83%, var(--pink));
  box-shadow: none;
  opacity: .46;
  filter: drop-shadow(0 0 5px rgb(var(--section-rgb) / .25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: none;
}

.strip-shell::after {
  inset: 8px;
  z-index: 6;
  border: 1px solid rgb(var(--section-rgb) / .18);
  border-radius: 17px;
  background:
    repeating-linear-gradient(180deg, transparent 0 4px, rgba(255, 255, 255, .018) 4px 5px),
    linear-gradient(90deg, transparent, rgb(var(--section-rgb) / .055), transparent);
  filter: none;
  opacity: .42;
  animation: screenGlassDrift 7s ease-in-out infinite;
}

.print-strip {
  border-radius: 17px;
  background: #020512;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

@keyframes screenFramePulse {
  50% { box-shadow: 0 0 0 1px rgba(255,255,255,.11), 0 0 27px rgb(var(--section-rgb) / .3), 0 0 82px rgb(var(--section-rgb) / .14), 0 52px 140px rgba(0,0,0,.66); }
}

@keyframes screenGlassDrift {
  0%, 100% { opacity: .32; }
  50% { opacity: .52; }
}

/* Assemblage sans interstice : les ratios des colonnes suivent ceux des
   visuels, ce qui aligne leurs hauteurs sans bandes noires ni recadrage forcé. */
.print-row.visual-pair {
  display: grid;
  grid-template-columns: .707fr .785fr;
  align-items: stretch;
  gap: 0;
}

.print-row.editorial-trio {
  display: grid;
  grid-template-columns: .784fr .708fr .707fr;
  align-items: stretch;
  gap: 0;
}

.print-row.puzzle-finale-v3 {
  display: grid;
  grid-template-columns: 47.3fr 52.7fr;
  align-items: stretch;
  gap: 0;
}

.visual-pair > img,
.editorial-trio > img,
.puzzle-finale-v3 > img,
.tote-grid > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.puzzle-finale-v3 .puzzle-stack {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.puzzle-finale-v3 .puzzle-stack img:first-child {
  flex: 0 0 auto;
  height: auto;
}

.puzzle-finale-v3 .puzzle-stack img:last-child {
  min-height: 0;
  flex: 1 1 0;
  height: 0;
  object-fit: cover;
}

.print-row.tote-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 0;
}

/* Chaque bloc s’ouvre comme une nouvelle zone de l’écran au fil du scroll. */
.js #printGallery > .screen-reveal {
  transform-origin: 50% 50%;
  transition: clip-path .92s cubic-bezier(.16, 1, .3, 1), opacity .38s ease, filter .82s ease, transform .92s cubic-bezier(.16, 1, .3, 1);
}

.js #printGallery > .screen-reveal:not(.in-view) {
  clip-path: inset(49.5% 0 49.5% 0);
  opacity: .22;
  filter: brightness(.08) saturate(.35) contrast(1.3);
  transform: scaleX(.975);
}

.js #printGallery > .screen-reveal.in-view {
  clip-path: inset(0);
  opacity: 1;
  filter: brightness(1) saturate(1) contrast(1);
  transform: scaleX(1);
}

.screen-reveal::before {
  content: "";
  position: absolute;
  z-index: 8;
  right: 0;
  left: 0;
  top: 50%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff 18%, var(--section-color) 50%, #fff 82%, transparent);
  box-shadow: 0 0 4px #fff, 0 0 11px var(--section-color), 0 0 24px rgb(var(--section-rgb) / .5);
  opacity: 0;
  transform: scaleX(.08);
}

.screen-reveal.in-view::before {
  animation: screenRowIgnite .92s cubic-bezier(.16, 1, .3, 1) both;
}

.screen-reveal.in-view::after {
  animation: screenRowSweep 1.08s ease .12s both;
}

@keyframes screenRowIgnite {
  0% { opacity: 0; transform: scaleX(.08); }
  19% { opacity: 1; transform: scaleX(.92); }
  42% { opacity: .78; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes screenRowSweep {
  0% { opacity: 0; transform: translate3d(-55%, 0, 0); }
  36% { opacity: .62; }
  100% { opacity: 0; transform: translate3d(55%, 0, 0); }
}

/* Menu fixe : même écran noir, mêmes couleurs et même bord orbital que l’Index. */
.leaf-nav-sheet {
  --screen-angle: 0turn;
  border: 3px solid transparent;
  border-radius: 20px;
  clip-path: none;
  color: var(--white);
  background:
    linear-gradient(125deg, rgba(255,24,207,.035), transparent 32%, rgba(25,231,255,.035) 75%, transparent) padding-box,
    linear-gradient(#07112b, #07112b) padding-box,
    conic-gradient(from var(--screen-angle), var(--pink), #fff 12%, var(--yellow) 22%, var(--green) 38%, var(--cyan) 55%, var(--violet) 72%, #fff 84%, var(--pink)) border-box;
  background-blend-mode: normal;
  box-shadow: 0 20px 48px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.1), 0 0 25px rgb(var(--section-rgb) / .12);
  transform: rotate(-.18deg);
  animation: screenBorderOrbit 7.2s linear infinite;
}

.leaf-nav-heading { border-color: rgba(255,255,255,.15); }

.leaf-nav .leaf-menu-entry,
.leaf-nav .leaf-menu-entry[aria-current="page"] {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 36%, rgba(255,255,255,.1));
  background: #081126;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 6%, transparent), 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent);
  text-shadow: 0 0 7px color-mix(in srgb, var(--accent) 46%, transparent);
}

.leaf-nav .leaf-menu-entry[aria-current="page"] {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, #081126);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 22%, transparent);
}

.leaf-nav .leaf-menu-entry[aria-current="page"] .leaf-service-icon {
  transform: translateY(-1px) rotate(-2deg) scale(1.045);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 72%, transparent));
}

.leaf-nav .leaf-menu-entry[aria-current="page"] > i {
  color: #081126;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 9px color-mix(in srgb, var(--accent) 55%, transparent);
}

.leaf-nav .leaf-menu-entry:hover,
.leaf-nav .leaf-menu-entry:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, #081126);
  box-shadow: inset 0 0 22px color-mix(in srgb, var(--accent) 8%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Vidéo / Menu / Charte reprend littéralement le langage du menu Index. */
.project-pagination {
  --screen-angle: 0turn;
  padding: 24px 28px;
  border: 3px solid transparent;
  border-radius: 28px;
  clip-path: none;
  background:
    linear-gradient(125deg, rgba(255,24,207,.035), transparent 32%, rgba(25,231,255,.035) 75%, transparent) padding-box,
    linear-gradient(#07112b, #07112b) padding-box,
    conic-gradient(from var(--screen-angle), var(--pink), #fff 12%, var(--yellow) 22%, var(--green) 38%, var(--cyan) 55%, var(--violet) 72%, #fff 84%, var(--pink)) border-box;
  background-blend-mode: normal;
  box-shadow: 0 34px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1), 0 0 30px rgb(var(--section-rgb) / .12);
  transform: rotate(-.35deg);
  animation: screenBorderOrbit 7.2s linear infinite;
}

.project-direction,
.project-menu-link {
  min-height: 108px;
  grid-template-columns: 72px minmax(0, 1fr) 30px;
  gap: 14px;
  padding: 10px 18px;
  border-right: 0;
  border-bottom: 1px dashed rgba(255,255,255,.17);
  color: var(--accent);
  background: #081126;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 5%, transparent);
  text-align: left;
}

.project-pagination > a + a { border-left: 1px dashed rgba(255,255,255,.17); }
.project-service-icon { width: 66px; height: 66px; }
.project-service-title,
.project-direction .project-service-title,
.project-menu-link .project-service-title {
  color: var(--accent);
  font-size: clamp(1.8rem, 3vw, 2.65rem);
  text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 42%, transparent);
}

.project-direction:hover,
.project-direction:focus-visible,
.project-menu-link:hover,
.project-menu-link:focus-visible {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #081126);
}

@media (max-width: 800px) {
  .strip-shell {
    padding: 3px;
    border-width: 2px;
    border-radius: 15px;
  }

  .strip-shell::before { inset: -6px; border-radius: 20px; }
  .strip-shell::after { inset: 5px; border-radius: 10px; }
  .print-strip { border-radius: 10px; }

  .project-pagination { padding: 9px; border-radius: 18px; }
  .project-direction,
  .project-menu-link {
    min-height: 92px;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 4px;
    padding: 9px 4px;
    border-bottom: 0;
    text-align: center;
  }
  .project-service-icon { width: 42px; height: 42px; }
  .project-service-title,
  .project-direction .project-service-title,
  .project-menu-link .project-service-title { font-size: clamp(1.05rem, 5vw, 1.45rem); }

  .leaf-nav-toggle {
    border: 2px solid rgb(var(--section-rgb) / .54);
    border-radius: 14px;
    clip-path: none;
    color: var(--white);
    background: #07112b;
    box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 0 18px rgb(var(--section-rgb) / .06), 0 0 18px rgb(var(--section-rgb) / .14);
  }

  .leaf-nav-toggle > span { color: var(--pink); text-shadow: 0 0 8px rgba(255,24,207,.44); }
  .leaf-nav-toggle strong { color: var(--section-color); background: #081126; }
  .leaf-nav-sheet { border-radius: 18px; }
  .leaf-nav-heading { border-color: rgba(255,255,255,.15); }
}

@media (max-width: 420px) {
  .project-pagination { width: calc(100% - 16px); }
  .project-service-icon { width: 38px; height: 38px; }
  .project-service-title,
  .project-direction .project-service-title,
  .project-menu-link .project-service-title { font-size: clamp(.96rem, 4.9vw, 1.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-scene::before,
  .ambient-scene::after,
  .strip-shell,
  .leaf-nav-sheet,
  .project-pagination,
  .screen-reveal.in-view::before,
  .screen-reveal.in-view::after { animation: none !important; }

  .js #printGallery > .screen-reveal { clip-path: inset(0); opacity: 1; filter: none; transform: none; }
}

/* -------------------------------------------------------------------------- */
/* PRINT — direction artistique v5                                            */
/* -------------------------------------------------------------------------- */

/* Le flux n’est plus un calque fixe : il appartient au fond du mur. Les
   masques le verrouillent dans les joints pendant que les paquets circulent. */
.ambient-scene { display: none; }

main::before,
main::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  mix-blend-mode: screen;
  will-change: background-position;
}

main::before {
  background-image: linear-gradient(
    90deg,
    transparent 0 9%,
    rgb(var(--section-rgb) / .16) 9.3% 13%,
    rgb(var(--section-rgb) / .72) 13.2% 13.7%,
    rgb(var(--section-rgb) / .32) 14% 19%,
    transparent 19.3% 46%,
    rgb(var(--section-rgb) / .12) 46.3% 50%,
    rgb(var(--section-rgb) / .58) 50.2% 50.7%,
    transparent 51% 77%,
    rgb(var(--section-rgb) / .46) 77.2% 77.7%,
    rgb(var(--section-rgb) / .1) 78% 84%,
    transparent 84.3% 100%
  );
  background-size: 380px 132px;
  background-repeat: repeat;
  -webkit-mask-image: repeating-linear-gradient(180deg, transparent 0 65px, #000 65px 66px);
  mask-image: repeating-linear-gradient(180deg, transparent 0 65px, #000 65px 66px);
  animation: wallDataFlowX 6.8s linear infinite;
}

main::after {
  background-image: linear-gradient(
    180deg,
    transparent 0 8%,
    rgb(var(--section-rgb) / .12) 8.3% 13%,
    rgb(var(--section-rgb) / .62) 13.2% 13.8%,
    transparent 14.1% 38%,
    rgb(var(--section-rgb) / .42) 38.2% 38.8%,
    rgb(var(--section-rgb) / .1) 39% 45%,
    transparent 45.3% 69%,
    rgb(var(--section-rgb) / .16) 69.2% 74%,
    rgb(var(--section-rgb) / .56) 74.2% 74.8%,
    transparent 75.1% 100%
  );
  background-size: 150px 360px;
  background-repeat: repeat;
  -webkit-mask-image: repeating-linear-gradient(90deg, transparent 0 74px, #000 74px 75px);
  mask-image: repeating-linear-gradient(90deg, transparent 0 74px, #000 74px 75px);
  animation: wallDataFlowY 8.6s linear -2.4s infinite;
}

.print-stage,
.contact-section { position: relative; z-index: 1; }

@keyframes wallDataFlowX { to { background-position: 380px 0; } }
@keyframes wallDataFlowY { to { background-position: 0 360px; } }

/* Une légère superposition élimine les coutures dues aux arrondis subpixel. */
#printGallery > .print-row + .print-row { margin-top: -1px !important; }

#printGallery .visual-pair > img,
#printGallery .editorial-trio > img,
#printGallery .tote-grid > img,
#printGallery .puzzle-finale-v3 > img,
#printGallery .puzzle-finale-v3 .puzzle-stack > img {
  max-width: none;
  width: calc(100% + 1px);
  margin-right: -1px;
  margin-bottom: -1px;
}

#printGallery .visual-pair > img + img,
#printGallery .editorial-trio > img + img,
#printGallery .tote-grid > img:nth-child(even) { margin-left: -1px; }

#printGallery .tote-grid > img:nth-child(n + 3),
#printGallery .puzzle-stack > img + img { margin-top: -1px; }

/* Démarrage complet du moniteur : châssis, tube horizontal puis image. */
.js .strip-shell {
  opacity: 0;
  transform-origin: 50% 0;
  transform: translate3d(0, 12px, 0) scaleX(.965);
}

.js body.strip-ready .strip-shell {
  animation:
    screenChassisBoot 1.34s cubic-bezier(.16, 1, .3, 1) both,
    screenBorderOrbit 7.2s linear 1.34s infinite,
    screenFramePulse 4.8s ease-in-out 1.34s infinite;
}

.js body.strip-ready #printGallery > .entry-primary img {
  animation: firstArtworkCrtBoot 1.82s linear .24s both;
}

@keyframes screenChassisBoot {
  0% { opacity: 0; filter: brightness(.04); transform: translate3d(0, 12px, 0) scaleX(.84); }
  15% { opacity: .94; filter: brightness(2.1); transform: translate3d(0, 7px, 0) scaleX(1.02); }
  26% { opacity: .28; filter: brightness(.18); transform: translate3d(0, 5px, 0) scaleX(.98); }
  44% { opacity: 1; filter: brightness(1.48); transform: translate3d(0, 0, 0) scaleX(1); }
  56% { opacity: .52; filter: brightness(.48); transform: translate3d(0, 0, 0) scaleX(.995); }
  78% { opacity: 1; filter: brightness(1.12); transform: translate3d(0, 0, 0) scaleX(1); }
  100% { opacity: 1; filter: brightness(1); transform: none; }
}

@keyframes firstArtworkCrtBoot {
  0%, 12% { opacity: 0; clip-path: inset(49.8% 0); filter: brightness(.02) saturate(.1); transform: scaleX(.82); }
  13%, 20% { opacity: 1; clip-path: inset(49.25% 0); filter: brightness(3.2) saturate(.2); transform: scaleX(1.02); }
  21%, 28% { opacity: .08; clip-path: inset(49.65% 0); filter: brightness(.08); }
  29%, 43% { opacity: 1; clip-path: inset(34% 0); filter: brightness(1.7) saturate(.82); transform: scaleX(1); }
  44%, 50% { opacity: .22; clip-path: inset(42% 0); filter: brightness(.22); }
  51%, 68% { opacity: 1; clip-path: inset(7% 0); filter: brightness(1.22) saturate(1.05); }
  69%, 75% { opacity: .66; clip-path: inset(2% 0); filter: brightness(.7); }
  76%, 100% { opacity: 1; clip-path: inset(0); filter: brightness(1) saturate(1); transform: none; }
}

/* Les blocs suivants ne s’allument qu’une fois visibles, avec un vrai balayage
   CRT plutôt qu’une simple variation d’opacité. */
.js #printGallery > .screen-reveal.in-view {
  transition: none;
  animation: screenSectionBoot 1.88s linear both;
}

@keyframes screenSectionBoot {
  0% { opacity: .05; clip-path: inset(49.7% 0); filter: brightness(.03) saturate(.2); transform: scaleX(.86); }
  12% { opacity: 1; clip-path: inset(49.15% 0); filter: brightness(2.8) saturate(.3); transform: scaleX(1.015); }
  20% { opacity: .12; clip-path: inset(49.55% 0); filter: brightness(.12); }
  34% { opacity: 1; clip-path: inset(31% 0); filter: brightness(1.52) saturate(.84); transform: scaleX(1); }
  43% { opacity: .28; clip-path: inset(38% 0); filter: brightness(.3); }
  62% { opacity: 1; clip-path: inset(5% 0); filter: brightness(1.18) saturate(1.03); }
  72% { opacity: .72; clip-path: inset(1.5% 0); filter: brightness(.74); }
  100% { opacity: 1; clip-path: inset(0); filter: brightness(1) saturate(1); transform: none; }
}

/* Le MENU central de la navigation basse devient réellement multicolore. */
.project-menu-link .project-service-title {
  color: transparent;
  background: linear-gradient(90deg, var(--pink), var(--yellow) 26%, var(--green) 49%, var(--cyan) 72%, var(--violet));
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 7px rgba(255,24,207,.22)) drop-shadow(0 0 9px rgba(25,231,255,.18));
}

.project-menu-link .menu-spectrum-stroke { stroke: url(#projectMenuSpectrum); }
.project-menu-link .menu-spectrum-fill { fill: url(#projectMenuSpectrum); stroke: none; }

.project-menu-link .project-service-arrow {
  color: var(--white);
  border: 1px solid transparent;
  background:
    linear-gradient(#081126, #081126) padding-box,
    conic-gradient(var(--pink), var(--yellow), var(--green), var(--cyan), var(--violet), var(--pink)) border-box;
}

@media (prefers-reduced-motion: reduce) {
  main::before,
  main::after,
  .js body.strip-ready .strip-shell,
  .js body.strip-ready #printGallery > .entry-primary img,
  .js #printGallery > .screen-reveal.in-view { animation: none !important; }

  .js .strip-shell,
  .js body.strip-ready .strip-shell { opacity: 1; filter: none; transform: none; }
}

/* -------------------------------------------------------------------------- */
/* PRINT — direction artistique v6                                            */
/* -------------------------------------------------------------------------- */

/* Flux de données : plus lumineux, mais moins nombreux. Les masques ne gardent
   que certains joints du carrelage afin de préserver le calme du fond. */
main::before,
main::after {
  opacity: .44;
  filter:
    drop-shadow(0 0 2px rgb(var(--section-rgb) / .82))
    drop-shadow(0 0 6px rgb(var(--section-rgb) / .32));
}

main::before {
  background-image: linear-gradient(
    90deg,
    transparent 0 14%,
    rgb(var(--section-rgb) / .12) 14.4% 18.5%,
    rgb(var(--section-rgb) / .92) 18.8% 19.35%,
    rgb(var(--section-rgb) / .34) 19.7% 27%,
    transparent 27.4% 61.5%,
    rgb(var(--section-rgb) / .16) 61.9% 65%,
    rgb(var(--section-rgb) / .78) 65.25% 65.8%,
    rgb(var(--section-rgb) / .24) 66.1% 71.5%,
    transparent 71.9% 100%
  );
  background-size: 700px 198px;
  -webkit-mask-image: repeating-linear-gradient(
    180deg,
    transparent 0 64px,
    #000 64px 66px,
    transparent 66px 130px,
    rgb(0 0 0 / .46) 130px 132px,
    transparent 132px 198px
  );
  mask-image: repeating-linear-gradient(
    180deg,
    transparent 0 64px,
    #000 64px 66px,
    transparent 66px 130px,
    rgb(0 0 0 / .46) 130px 132px,
    transparent 132px 198px
  );
  animation: wallDataFlowXv6 10.8s linear infinite;
}

main::after {
  background-image: linear-gradient(
    180deg,
    transparent 0 12%,
    rgb(var(--section-rgb) / .13) 12.4% 16%,
    rgb(var(--section-rgb) / .86) 16.3% 16.9%,
    rgb(var(--section-rgb) / .28) 17.2% 23%,
    transparent 23.4% 58%,
    rgb(var(--section-rgb) / .15) 58.4% 62%,
    rgb(var(--section-rgb) / .72) 62.3% 62.9%,
    rgb(var(--section-rgb) / .22) 63.2% 69%,
    transparent 69.4% 100%
  );
  background-size: 300px 620px;
  -webkit-mask-image: repeating-linear-gradient(
    90deg,
    transparent 0 73px,
    #000 73px 75px,
    transparent 75px 223px,
    rgb(0 0 0 / .5) 223px 225px,
    transparent 225px 300px
  );
  mask-image: repeating-linear-gradient(
    90deg,
    transparent 0 73px,
    #000 73px 75px,
    transparent 75px 223px,
    rgb(0 0 0 / .5) 223px 225px,
    transparent 225px 300px
  );
  animation: wallDataFlowYv6 12.6s linear -3.1s infinite;
}

@keyframes wallDataFlowXv6 { to { background-position: 700px 0; } }
@keyframes wallDataFlowYv6 { to { background-position: 0 620px; } }

/* PRINT — nouvel ordre d'ouverture : Kinder et Moonbo s'allument ensemble.
   Chaque grille reprend les ratios natifs pour éviter tout interstice noir. */
.print-row.hero-poster-pair,
.print-row.editorial-pair-v2,
.print-row.finale-pair-v4 {
  display: grid;
  align-items: stretch;
  gap: 0;
}

.print-row.hero-poster-pair {
  grid-template-columns: .5624fr .7078fr;
  aspect-ratio: 1.2702;
}

.print-row.editorial-pair-v2 {
  grid-template-columns: .7845fr .7068fr;
  aspect-ratio: 1.4913;
}

.print-row.finale-pair-v4 {
  grid-template-columns: 2.885fr .798fr;
  aspect-ratio: 3.683;
}

.hero-poster-pair > img,
.editorial-pair-v2 > img,
.finale-pair-v4 > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-poster-pair > img + img,
.editorial-pair-v2 > img + img,
.finale-pair-v4 > img + img {
  width: calc(100% + 1px);
  margin-left: -1px;
}

@media (max-width: 600px) {
  .print-row.finale-pair-v4 {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
  }

  .finale-pair-v4 > img {
    height: auto;
  }

  .finale-pair-v4 > img + img {
    width: 100%;
    margin-top: -1px;
    margin-left: 0;
  }
}

/* L’en-tête MENU reprend le même spectre que le bouton multicolore inférieur. */
.leaf-cocktail-icon {
  color: transparent;
  filter:
    drop-shadow(0 0 5px rgba(255, 24, 207, .36))
    drop-shadow(0 0 7px rgba(25, 231, 255, .25));
}

.leaf-cocktail-icon .leaf-spectrum-stroke { stroke: url(#leafMenuSpectrum); }
.leaf-cocktail-icon .leaf-spectrum-fill { fill: url(#leafMenuSpectrum); }

.leaf-nav-heading strong {
  color: transparent;
  background: linear-gradient(90deg, var(--pink), var(--yellow) 25%, var(--green) 48%, var(--cyan) 72%, var(--violet));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter:
    drop-shadow(0 0 6px rgba(255, 24, 207, .22))
    drop-shadow(0 0 8px rgba(25, 231, 255, .16));
}

/* Le titre lance la séquence : tracé de l’icône, allumage PRINT, cartouche,
   puis mise sous tension du grand écran et de sa première création. */
.js .print-heading.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.js .print-heading-icon,
.js .print-heading h1,
.js .print-heading-sign > div > span { opacity: 0; }

.js .print-heading-icon path {
  stroke-dasharray: 290;
  stroke-dashoffset: 290;
}

.js body.strip-ready .print-heading-icon {
  animation: printIconPowerOn .92s linear .72s both;
}

.js body.strip-ready .print-heading-icon path {
  animation: printIconDraw .88s cubic-bezier(.16, 1, .3, 1) .74s both;
}

.js body.strip-ready .print-heading h1 {
  animation: printTitlePowerOn 1.42s linear .88s both;
}

.js body.strip-ready .print-heading-sign > div > span {
  animation: printLabelSnap .58s cubic-bezier(.16, 1, .3, 1) 1.73s both;
}

@keyframes printIconDraw { to { stroke-dashoffset: 0; } }

@keyframes printIconPowerOn {
  0%, 10% { opacity: 0; filter: brightness(.05); transform: scale(.82); }
  11%, 22% { opacity: 1; filter: brightness(2.4); transform: scale(1.04); }
  23%, 31% { opacity: .16; filter: brightness(.2); }
  32%, 100% { opacity: 1; filter: brightness(1); transform: none; }
}

@keyframes printTitlePowerOn {
  0%, 12% { opacity: 0; clip-path: inset(49.7% 0); filter: brightness(.04); transform: scaleX(.82); }
  13%, 20% { opacity: 1; clip-path: inset(48.9% 0); filter: brightness(3); transform: scaleX(1.035); }
  21%, 29% { opacity: .08; clip-path: inset(49.5% 0); filter: brightness(.1); }
  30%, 48% { opacity: 1; clip-path: inset(27% 0); filter: brightness(1.55); transform: scaleX(1); }
  49%, 56% { opacity: .3; clip-path: inset(34% 0); filter: brightness(.34); }
  57%, 78% { opacity: 1; clip-path: inset(2% 0); filter: brightness(1.15); }
  79%, 84% { opacity: .72; clip-path: inset(0); filter: brightness(.74); }
  100% { opacity: 1; clip-path: none; filter: brightness(1); transform: none; }
}

@keyframes printLabelSnap {
  0% { opacity: 0; filter: brightness(.1); transform: translate3d(0, -7px, 0) rotate(-1deg) scaleX(.25); }
  48% { opacity: 1; filter: brightness(1.8); transform: translate3d(0, 1px, 0) rotate(-1deg) scaleX(1.035); }
  100% { opacity: 1; filter: brightness(1); transform: rotate(-1deg) scaleX(1); }
}

.js body.strip-ready .strip-shell {
  animation:
    screenChassisBoot 1.22s cubic-bezier(.16, 1, .3, 1) 1.6s both,
    screenBorderOrbit 7.2s linear 2.82s infinite,
    screenFramePulse 4.8s ease-in-out 2.82s infinite;
}

.js body.strip-ready #printGallery > .entry-primary img {
  animation: firstArtworkCrtBoot 1.72s linear 2.3s both;
}

/* Le moniteur reste fixe : ce sont désormais les créations, et non les rangées,
   qui s’allument individuellement lorsqu’elles atteignent la zone de lecture. */
.js #printGallery > .screen-reveal,
.js #printGallery > .screen-reveal:not(.in-view),
.js #printGallery > .screen-reveal.in-view {
  opacity: 1;
  clip-path: none;
  filter: none;
  transform: none;
  transition: none;
  animation: none;
}

.js #printGallery .print-row img.screen-artwork {
  opacity: .025;
  clip-path: inset(49.72% 0);
  filter: brightness(.025) saturate(.12) contrast(1.4);
  transform: scaleX(.86);
  transform-origin: 50% 50%;
  transition: none;
}

.js #printGallery .print-row img.screen-artwork.is-lit {
  animation: artworkCrtIgnite 1.48s linear var(--artwork-delay, 0ms) both;
}

@keyframes artworkCrtIgnite {
  0%, 10% { opacity: .025; clip-path: inset(49.72% 0); filter: brightness(.025) saturate(.12) contrast(1.4); transform: scaleX(.86); }
  11%, 18% { opacity: 1; clip-path: inset(49.08% 0); filter: brightness(3.1) saturate(.24) contrast(1.3); transform: scaleX(1.025); }
  19%, 27% { opacity: .07; clip-path: inset(49.55% 0); filter: brightness(.08) saturate(.2); }
  28%, 43% { opacity: 1; clip-path: inset(30% 0); filter: brightness(1.6) saturate(.78); transform: scaleX(1); }
  44%, 51% { opacity: .22; clip-path: inset(38% 0); filter: brightness(.24) saturate(.5); }
  52%, 69% { opacity: 1; clip-path: inset(5% 0); filter: brightness(1.2) saturate(1.03); }
  70%, 77% { opacity: .7; clip-path: inset(1% 0); filter: brightness(.72) saturate(.9); }
  100% { opacity: 1; clip-path: inset(0); filter: brightness(1) saturate(1.015) contrast(1.025); transform: none; }
}

/* Le GIF salade est affiché sous sa définition native, dans une composition
   colorée qui remplace l’agrandissement plein écran responsable du flou perçu. */
.gif-row {
  display: grid;
  place-items: center;
  padding: clamp(10px, 1.8vw, 20px) clamp(18px, 5vw, 58px);
  background:
    linear-gradient(90deg, rgb(var(--section-rgb) / .2) 1px, transparent 1px) 0 0 / 28px 100%,
    linear-gradient(135deg, #f1dfbf 0%, #e7efc8 45%, #ccebbd 100%);
}

.salad-frame {
  position: relative;
  width: min(100%, 820px);
  display: block;
  border: 2px solid #0eb83d;
  background: #f5e6ca;
  box-shadow:
    0 0 0 4px #071128,
    0 0 0 5px rgb(var(--section-rgb) / .48),
    0 14px 34px rgba(7, 17, 40, .3);
  filter: contrast(1.055) saturate(1.025);
}

.salad-frame::before,
.salad-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 34px;
  height: 4px;
  pointer-events: none;
  background: var(--section-color);
  box-shadow: 0 0 7px rgb(var(--section-rgb) / .65);
}

.salad-frame::before { top: -3px; left: 7%; }
.salad-frame::after { right: 7%; bottom: -3px; }

.gif-row .salad-frame img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  image-rendering: auto;
}

@media (max-width: 620px) {
  .gif-row { padding: 8px 12px; }
  .salad-frame { width: 100%; border-width: 1px; box-shadow: 0 0 0 3px #071128, 0 0 0 4px rgb(var(--section-rgb) / .42); }
}

@media (prefers-reduced-motion: reduce) {
  main::before,
  main::after,
  .js body.strip-ready .print-heading-icon,
  .js body.strip-ready .print-heading-icon path,
  .js body.strip-ready .print-heading h1,
  .js body.strip-ready .print-heading-sign > div > span,
  .js #printGallery .print-row img.screen-artwork.is-lit { animation: none !important; }

  .js .print-heading-icon,
  .js .print-heading h1,
  .js .print-heading-sign > div > span,
  .js #printGallery .print-row img.screen-artwork {
    opacity: 1;
    clip-path: none;
    filter: none;
    transform: none;
  }

  .js .print-heading-icon path { stroke-dashoffset: 0; }
}

/* -------------------------------------------------------------------------- */
/* PRINT — direction artistique v7                                            */
/* -------------------------------------------------------------------------- */

/* Dix segments locaux remplacent les deux calques animés qui couvraient toute
   la page. Les déplacements utilisent uniquement transform et sont suspendus
   dès que le segment quitte la zone visible. */
main::before,
main::after {
  content: none;
  display: none;
  animation: none;
}

.ambient-scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.ambient-scene::before,
.ambient-scene::after { content: none; }

.data-trace {
  --trace-duration: 7.4s;
  --trace-delay: 0s;
  position: absolute;
  display: block;
  overflow: hidden;
  contain: layout paint style;
  opacity: .96;
}

.data-trace::after {
  content: "";
  position: absolute;
  display: block;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #d8ffe2 18%, var(--section-color) 48%, #f4fff7 72%, transparent);
  box-shadow: 0 0 3px var(--section-color), 0 0 8px rgb(var(--section-rgb) / .7);
  animation-duration: var(--trace-duration);
  animation-timing-function: linear;
  animation-delay: var(--trace-delay);
  animation-iteration-count: infinite;
  animation-play-state: paused;
  will-change: transform;
}

.data-trace.is-active::after { animation-play-state: running; }

.trace-horizontal {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--section-rgb) / .18) 24%, rgb(var(--section-rgb) / .18) 76%, transparent);
}

.trace-horizontal::after {
  top: 0;
  left: 0;
  width: 25%;
  height: 2px;
  animation-name: tracePacketX;
}

.trace-vertical {
  width: 2px;
  background: linear-gradient(180deg, transparent, rgb(var(--section-rgb) / .17) 24%, rgb(var(--section-rgb) / .17) 76%, transparent);
}

.trace-vertical::after {
  top: 0;
  left: 0;
  width: 2px;
  height: 24%;
  background: linear-gradient(180deg, transparent, #d8ffe2 18%, var(--section-color) 48%, #f4fff7 72%, transparent);
  animation-name: tracePacketY;
}

.trace-h-1 { top: 264px; left: 0; width: min(360px, 46vw); --trace-duration: 6.8s; }
.trace-h-2 { top: 858px; right: 0; width: min(430px, 52vw); --trace-duration: 8.1s; --trace-delay: -2.6s; }
.trace-h-3 { top: 1584px; left: 4vw; width: min(310px, 43vw); --trace-duration: 7.5s; --trace-delay: -4.1s; }
.trace-h-4 { top: 3036px; right: 3vw; width: min(390px, 49vw); --trace-duration: 8.8s; --trace-delay: -1.7s; }
.trace-h-5 { top: 4488px; left: 0; width: min(460px, 54vw); --trace-duration: 7.9s; --trace-delay: -5.2s; }
.trace-h-6 { top: 6006px; right: 0; width: min(350px, 47vw); --trace-duration: 8.5s; --trace-delay: -3.4s; }

.trace-v-1 { top: 462px; left: 75px; height: 330px; --trace-duration: 7.6s; --trace-delay: -1.2s; }
.trace-v-2 { top: 1914px; left: 300px; height: 396px; --trace-duration: 8.7s; --trace-delay: -4.8s; }
.trace-v-3 { top: 3564px; left: 150px; height: 330px; --trace-duration: 7.9s; --trace-delay: -2.4s; }
.trace-v-4 { top: 5280px; left: 450px; height: 396px; --trace-duration: 9.1s; --trace-delay: -6.1s; }

@keyframes tracePacketX {
  0% { opacity: 0; transform: translate3d(-120%, 0, 0); }
  10%, 86% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(520%, 0, 0); }
}

@keyframes tracePacketY {
  0% { opacity: 0; transform: translate3d(0, -120%, 0); }
  10%, 86% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, 520%, 0); }
}

/* Toutes les créations du moniteur partagent désormais exactement le même
   instant d’allumage. Les révélations au scroll et leurs balayages sont retirés. */
.screen-reveal.in-view::before,
.screen-reveal.in-view::after { animation: none; }

.js #printGallery .print-row img.screen-artwork.is-lit {
  animation-delay: 0ms;
}

/* Le masque du titre est libéré après l’allumage pour ne plus rogner le haut
   des lettres très hautes de la fonte Impact. */
.js body.entry-complete .print-heading h1 {
  opacity: 1;
  clip-path: none;
  filter: none;
  transform: none;
  animation: none;
}

@media (max-width: 520px) {
  .trace-h-2,
  .trace-h-4,
  .trace-h-6 { width: 58vw; }

  .trace-v-2 { left: 225px; }
  .trace-v-4 { left: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .data-trace::after {
    opacity: .72;
    transform: translate3d(145%, 0, 0);
    animation: none;
  }

  .trace-vertical::after { transform: translate3d(0, 145%, 0); }
}

/* Phase 1 : le cadre de pagination ne tourne que lorsqu’il approche réellement
   de la zone visible. Le rendu du cadre reste strictement inchangé. */
.project-pagination:not(.is-motion-active),
.project-pagination:not(.is-motion-active)::before,
.project-pagination:not(.is-motion-active)::after,
body.is-page-hidden .project-pagination,
body.is-page-hidden .project-pagination::before,
body.is-page-hidden .project-pagination::after,
body.reduce-motion .project-pagination,
body.reduce-motion .project-pagination::before,
body.reduce-motion .project-pagination::after {
  animation-play-state: paused !important;
}

/* Sur téléphone, la catégorie active suffit dans le bouton fermé. */
@media (max-width: 600px) {
  .leaf-nav-toggle { grid-template-columns: 1fr 32px; }
  .leaf-nav-toggle > span { display: none; }
}

/* Finitions communes aux six pages : navigation, titrage et formulaire. */
.project-pagination .project-menu-link:hover .project-service-arrow,
.project-pagination .project-menu-link:focus-visible .project-service-arrow {
  color: #081126;
  border-color: transparent;
  background: conic-gradient(
    from 28deg,
    var(--pink),
    var(--yellow),
    var(--green),
    var(--cyan),
    var(--violet),
    var(--pink)
  );
  box-shadow:
    0 0 8px rgba(255, 24, 207, .35),
    0 0 12px rgba(25, 231, 255, .25);
}

.contact-title {
  line-height: .94;
}

@media (max-width: 600px) {
  .site-header {
    min-height: 58px;
    align-items: center;
    gap: 10px;
    padding-inline: 20px;
    padding-block: 8px;
  }

  .brand {
    min-height: 40px;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    font-size: clamp(.86rem, 3.55vw, 1rem);
    line-height: 1;
    letter-spacing: -.012em;
  }

  .header-cta {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 9px 13px;
    font-size: .7rem;
    line-height: 1.15;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .captcha-answer-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 8px;
  }

  .captcha-answer-row input {
    min-width: 0;
    width: 100%;
  }

  .captcha-refresh {
    position: relative;
    z-index: 2;
    width: 48px;
    min-width: 48px;
    height: 43px;
    display: grid !important;
    visibility: visible !important;
  }
}

@media (max-width: 360px) {
  .site-header { padding-inline: 16px; }
}