:root {
      --scale: 1.5;
      --cell-w: 512px;
      --cell-h: 384px;
      --alveole-offset: -22px;
      --intercalaire-offset: -8px;
      --intercalaire-img-offset: 99px;
      --enter-offset: -100svh;
      --step-frac: 2; /* vitesse d'anim scroll  0-rapide 10-lent*/
    }
 
    * { box-sizing: border-box }
    html, body {  overscroll-behavior-y: contain; }

    body {
      margin: 0;
      color: rgb(26, 26, 26);
      font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      line-height: 1.4;
      background-color:#111111;
    }

    header, footer { padding: 16vh 6vw; opacity: .9; }

    .section {
      position: relative;
      width: 100%;
    }

    .pin {
      position: sticky;
      top: 0;
      height: 100svh;
      display: grid;
      place-items: center;
      overflow: clip; 
    }

    .item {
      position: absolute;
      bottom:1rem;
      width: calc(var(--cell-w) * var(--scale));
      height: calc(var(--cell-h) * var(--scale));
      image-rendering: auto;
      contain: layout;
    }

    .layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      will-change: transform;
      transform: translateY(calc(var(--enter-offset) * var(--scale)));
      filter: drop-shadow(rgba(0, 0, 0, 0.37) 0px 10px 4px);
    }

    .layer[data-type="palette"] {
      transform: none !important;
    }

    .hint {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 12px;
      opacity: .6;
      user-select: none;
      pointer-events: none;
    }
    .no-drop-shadow {
      filter: none !important;
    }

    /* Resize/ Responsive en conservant tout le placement pixel */

    @media (max-width: 1280px) {
      :root { --scale: 1; }
      .item {bottom: 2rem};
    }
    @media (max-width: 600px) {
      :root { --scale: 0.7; }
      .item {bottom: 4rem};
    }
    @media (max-width: 350px) {
      :root { --scale: 0.5; }
      .item {bottom: 6rem};
    }