:root{
      --bg:#f6f3ed;
      --bg-2:#f1ede6;
      --ink:#111111;
      --muted:rgba(17,17,17,.56);
      --line:rgba(17,17,17,.12);
      --line-strong:rgba(17,17,17,.28);
      --shadow:0 22px 58px rgba(17,17,17,.08);
      --shadow-soft:0 12px 30px rgba(17,17,17,.05);
      --ease:cubic-bezier(.22,1,.36,1);
      --blur:0px;
      --nav-size:92px;
      --nav-face:40px;
      --grain-opacity:.09;
      --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      --font-serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,"Times New Roman",serif;
    }

    *{box-sizing:border-box}
    html,body{width:100%;height:100%;margin:0;overflow:hidden}
    body{
      font-family:var(--font-sans);
      color:var(--ink);
      background:linear-gradient(180deg, #0a0a0a 0%, #111111 38%, #1a1a1a 100%);
      position:relative;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:2;
      opacity:var(--grain-opacity);
      background-image:
        radial-gradient(circle at 20% 20%, rgba(0,0,0,.17) .45px, transparent .8px),
        radial-gradient(circle at 80% 40%, rgba(0,0,0,.12) .45px, transparent .8px),
        radial-gradient(circle at 35% 78%, rgba(0,0,0,.12) .45px, transparent .8px);
      background-size:28px 28px,34px 34px,30px 30px;
      mix-blend-mode:multiply;
    }
    button{font:inherit;color:inherit}

    #app{position:relative;width:100%;height:100%;isolation:isolate}
    #sceneWrap{
      position:absolute;inset:0;overflow:hidden;z-index:1;
      filter:blur(var(--blur));
      transition:filter .42s var(--ease), transform .42s var(--ease), opacity .42s var(--ease);
    }
    #sceneWrap.is-transitioning{transform:scale(1.008)}
    #sceneCanvas{width:100%;height:100%;display:block}

    .intro-loader{
      position:fixed;inset:0;display:grid;place-items:center;z-index:30;
      background:radial-gradient(circle at 50% 40%, #f7f5ef, #ece7dd 56%, #dfd7ca 100%);
      transition:opacity .55s var(--ease), visibility .55s var(--ease);
    }
    .intro-loader.is-hidden{opacity:0;visibility:hidden}
    .loader-stack{text-align:center;display:grid;gap:1rem}
    .loader-spinner{
      width:60px;height:60px;border-radius:50%;margin-inline:auto;
      border:1px solid rgba(17,17,17,.12);border-top-color:rgba(17,17,17,.42);
      animation:spin 1.2s linear infinite;
      box-shadow:0 0 0 1px rgba(255,255,255,.7) inset;
    }
    .loader-title{font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;padding: 2% 5%;}
    .loader-copy{font-size:.9rem;color:var(--muted)}
    @keyframes spin{to{transform:rotate(360deg)}}

    .transition-flash{
      position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;
      background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.13), rgba(255,255,255,0));
    }
    .transition-flash.on{animation:flash .62s var(--ease)}
    @keyframes flash{0%{opacity:0}32%{opacity:1}100%{opacity:0}}

    .scene-title {
        position: fixed;
        left: 50%;
        bottom: 2rem;
        transform: translateX(-50%);
        width: 90vw;
        z-index: 8;
        color: #FEFEFA;
        text-align: center;
        pointer-events: none;
        transition: opacity .42s var(--ease), transform .42s var(--ease);
        padding: 0 1rem;
        mix-blend-mode: normal;
    }
    .scene-title.is-art-zoomed {
      mix-blend-mode: difference;
      color: #fff;
    }
.m-gallery.is-art-zoomed .m-label {
  mix-blend-mode: difference;
  color: #000 !important;
}

.m-gallery.is-art-zoomed .m-item.is-active .m-label {
  mix-blend-mode: difference;
  color:#e8b87a !important;
}

    .scene-title.is-hidden{opacity:0;transform:translateX(-50%) translateY(10px)}
    .scene-title h1{margin:0;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500}
    .scene-title p{margin:.45rem 0 0;font-size:.92rem;color:var(--muted)}





/* ── DESKTOP ── */
  .barrel-wrap{
    position:absolute;right:1%;top:50%;transform:translateY(-50%);
    display:flex;align-items:stretch;
    z-index:10;user-select:none;
  }
  .barrel-items{
    display:flex;flex-direction:column;
    align-items:flex-end;position:relative;
    padding-right:16px;
  }
  .b-item{
    display:flex;align-items:center;justify-content:flex-end;
    height:56px;cursor:pointer;white-space:nowrap;
    transition:opacity .25s ease,transform .25s cubic-bezier(.22,1,.36,1);
    transform-origin:right center;
    padding-right:60px;
  }
  .b-label{
    font-size:11px;letter-spacing:.28em;text-transform:uppercase;
    color:#FEFEFA;
    transition:color .25s,letter-spacing .25s;
    text-align:right;line-height:1;
  }
  .b-item.is-active .b-label{color:#e8b87a;letter-spacing:.34em;}
  .b-item.is-active{opacity:1!important;transform:scale(1.06)!important;}
  .ruler-svg{position:absolute;right:0;top:0;pointer-events:none;}

  /* ── MOBILE ── */
  .mobile-wrap{
    display:none;
    position:absolute;top:0;left:0;right:0;bottom:0;
    z-index:10;user-select:none;overflow:hidden;
    flex-direction:column;align-items:stretch;
  }
  .m-ruler-area{
    position:relative;width:100%;height:100px;flex-shrink:0;overflow:hidden;
  }
  .m-spine{
    position:absolute;
    bottom:62px;
    left:0;
    right:0;
    height:1.5px;
    background:rgba(255,255,255,1);
    mix-blend-mode: normal;
    
  }

  .m-tick{
    position:absolute;
    width:1px;
    transform:translateX(-50%);
    pointer-events:none;
    bottom:25.5px;
    mix-blend-mode: normal;
  }


  .m-ruler-area.is-art-zoomed .m-spine,
  .m-ruler-area.is-art-zoomed .m-tick {
    mix-blend-mode: difference;
    background: #000 !important;
  }

  .m-tick:nth-child(odd) {
    bottom:52px;
  }
  .m-gallery{
    flex:1;position:relative;cursor:grab;overflow:hidden;
    display:flex;align-items:flex-start;justify-content:center;
  }
  .m-gallery:active{cursor:grabbing;}
  .m-item{
    position:absolute;
    display:flex;flex-direction:column;align-items:center;
    transition:opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1);
    cursor:pointer;width:150px;transform-origin:center top;
  }
  .m-label{
    font-size:15px;letter-spacing:.22em;text-transform:uppercase;
    color:rgba(255,255,255,0.9);white-space:nowrap;
    transition:color .3s,opacity .3s;
    font-weight:400;
  }
  .m-item.is-active .m-label{color:#e8b87a;}


/* Liens utilitaires pré-production : accessibles sans casser l’expérience 3D */
.preprod-links{
  position:fixed;
  left:14px;
  bottom:14px;
  z-index:999;
  display:flex;
  gap:8px;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:12px;
}
.preprod-links a{
  color:#f7f5f2;
  text-decoration:none;
  background:rgba(10,10,10,.48);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:7px 10px;
  backdrop-filter:blur(10px);
}
.preprod-links a:hover,
.preprod-links a:focus-visible{
  background:rgba(10,10,10,.76);
  outline:2px solid rgba(246,179,76,.75);
  outline-offset:2px;
}
@media (max-width:700px){
  .preprod-links{left:10px;right:10px;bottom:10px;justify-content:center;}
  .preprod-links a{font-size:11px;padding:6px 8px;}
}