/* ================= MENU MOBILE ================= */
.menu{
  position:fixed;z-index:100;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--gutter);visibility:hidden;pointer-events:none;transition:visibility 0s .95s;
}
.menu.is-open{visibility:visible;pointer-events:auto;transition:visibility 0s}
.menu__strips{position:absolute;inset:0;display:flex}
.menu__strips i{flex:1;background:var(--c);transform:translateY(-101%);transition:transform .8s var(--ease-io)}
.menu__strips i:nth-child(2){transition-delay:.06s}
.menu__strips i:nth-child(3){transition-delay:.12s}
.menu.is-open .menu__strips i{transform:none}
.menu__close{position:absolute;z-index:2;top:calc(14px + env(safe-area-inset-top,0px));right:var(--gutter);opacity:0;transition:opacity .3s,background-color .3s}
.menu.is-open .menu__close{opacity:1;transition-delay:.4s}
.menu__links{position:relative;z-index:1;display:grid;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
.menu__links a{
  display:block;overflow:hidden;padding:.06em 0;color:var(--ink);text-decoration:none;
  font-family:var(--font-display);font-stretch:75%;font-size:clamp(52px,15.5vw,104px);line-height:.96;letter-spacing:-.04em;
}
.menu__links a span{display:block;transform:translateY(112%);transition:transform .6s var(--ease-io)}
.menu.is-open .menu__links a span{transform:none;transition:transform .9s var(--ease-out) calc(var(--i) * 60ms + .32s)}

/* ================= LA TOILE EN 3D =================
   Sur le même mur de béton que le site (recopié à l'ouverture ; à défaut, un dégradé couleur béton) : la toile seule
   au centre (js/viewer.js), le bouton « Réinitialiser » dessous, sa taille en bas, et une croix pour fermer. Rien d'autre. */
.viewer{
  position:fixed;z-index:140;inset:0;overflow:hidden;
  background:radial-gradient(115% 90% at 50% 46%,#dddbd6 0%,#cbc9c4 52%,#adaba6 100%);
  visibility:hidden;pointer-events:none;opacity:0;transition:opacity .45s var(--ease-out),visibility 0s .45s;
}
.viewer.is-open{visibility:visible;pointer-events:auto;opacity:1;transition:opacity .45s var(--ease-out),visibility 0s}
/* le même mur de béton que le site, recopié à l'ouverture (overlays.js) */
.viewer__wall{position:absolute;inset:0;display:none;width:100%;height:100%}
.viewer.has-wall .viewer__wall{display:block}
.is-viewing .cursor{display:none}
.viewer__stage{position:absolute;inset:0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.viewer__stage.is-grabbing{cursor:grabbing}
.viewer__stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .5s}
.viewer.is-3d .viewer__stage canvas{opacity:1}
/* la toile à plat, en attendant le volume (ou à sa place s'il ne peut pas s'afficher) */
.viewer__flat{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:opacity .4s}
.viewer.is-3d .viewer__flat{opacity:0}
.viewer__frame{
  display:block;width:min(60vw,calc(56vh * var(--arn,1)));aspect-ratio:var(--arn,1);transform:translateY(-33px);
  padding:4px;background:var(--frame-in);border:14px solid;border-color:var(--frame-hi) var(--frame) var(--frame-lo) var(--frame-mid);
  box-shadow:0 30px 60px -30px rgba(20,18,16,.55);
}
.viewer__frame .art{background:var(--tone)}
.viewer__size{
  position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom,0px));
  text-align:center;font-size:12px;letter-spacing:.2em;color:var(--ink);pointer-events:none;
}
/* Sous la toile au repos (viewer.js pose --under) : deux petites plaques d'acier noirci, comme les cartels et les autres
   boutons du site. Elles arrivent avec la toile en volume.
   « Réinitialiser » : au survol, sa flèche fait un tour en arrière pendant que sa case bleuit.
   « Intéressé », l'action principale : sa case est déjà bleu marine, un filet gravé fait le tour de la plaque, un reflet
   la traverse une fois à son arrivée ; au survol, la flèche part vers le haut, vers l'autre site. */
.viewer__actions{
  position:absolute;z-index:2;left:50%;top:calc(var(--under,78vh) + 24px);
  display:flex;gap:12px;opacity:0;transform:translate(-50%,8px);transition:opacity .5s .5s,transform .7s var(--ease-out) .5s;
}
.viewer.is-3d .viewer__actions{opacity:1;transform:translate(-50%,0)}
.viewer__actions .plate-btn{font-size:11.5px}
.viewer__actions .plate-btn__label{padding:12px 16px 11px 18px}
.viewer__actions .plate-btn__go{width:40px}
.viewer__actions .plate-btn__go svg{width:15px;height:15px;stroke-width:1.6}
.viewer__reset:hover .plate-btn__go svg,.viewer__reset:focus-visible .plate-btn__go svg{transform:rotate(-360deg);transition-duration:.8s}
.viewer__buy{overflow:hidden}
.viewer__buy[hidden]{display:none}
.viewer__buy::before{content:"";position:absolute;inset:4px;border:1px solid rgba(255,255,255,.1);border-radius:1px;pointer-events:none}
.viewer__buy .plate-btn__go{background:var(--cobalt)}
.viewer__buy .plate-btn__go::before{background:#2a5aa6}
.viewer__buy:hover .plate-btn__go svg,.viewer__buy:focus-visible .plate-btn__go svg{transform:translate(3px,-3px)}
.viewer__buy::after{
  content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.18) 50%,rgba(255,255,255,0) 65%);
}
.viewer.is-3d .viewer__buy::after{animation:plateSheen 1.3s var(--ease-io) 1.2s both}
@keyframes plateSheen{to{transform:translateX(120%)}}
/* Toile phosphorescente, lumière éteinte : la même pénombre que dans le défilement (un voile bleuté et transparent sur
   le béton), un peu de la lueur de la toile sur le mur derrière elle, et l'interrupteur à sa droite (--right, --sy, posés
   par viewer.js). Le texte et la croix passent en clair. */
.viewer__dark{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(110% 85% at 50% 42%,rgba(22,19,34,.5) 0%,rgba(14,12,22,.6) 55%,rgba(8,7,13,.68) 100%);
}
.viewer.is-dark .viewer__dark{opacity:1;transition-duration:.22s}
.viewer__halo{
  position:absolute;left:50%;top:var(--mid,46vh);width:var(--glow-w,40vw);height:var(--glow-h,60vh);transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(closest-side,var(--night-glow,#27baa4),rgba(0,0,0,0));
  filter:blur(30px);opacity:0;pointer-events:none;transition:opacity .35s;
}
.viewer.is-dark .viewer__halo{opacity:.32;transition:opacity .6s ease .1s}
.viewer__switch{left:calc(var(--right,70vw) + clamp(30px,3.5vw,70px));top:var(--sy,55vh)}
.viewer.is-dark .viewer__switch{color:#b4b1bd}
.viewer.is-dark .viewer__switch:focus-visible .switch__plate{outline-color:#e8e6df}
.viewer__size{transition:color .35s}
.viewer.is-dark .viewer__size{color:#cfcbd6}
.viewer.is-dark .viewer__close{color:#dcd9d2;border-color:rgba(255,255,255,.45)}
.viewer.is-dark .viewer__close:hover{background:#dcd9d2;color:var(--ink)}

/* la croix pour fermer : deux traits fins dans un cercle d'un filet, en haut à droite */
.viewer__close{
  position:absolute;z-index:2;top:calc(16px + env(safe-area-inset-top,0px));right:var(--gutter);
  width:48px;height:48px;border:var(--line);border-radius:50%;transition:background-color .3s,color .3s,border-color .35s;
}
.viewer__close:hover{background:var(--ink);color:var(--paper)}
.viewer__close span,.viewer__close span::before{position:absolute;left:50%;top:50%;width:18px;height:1px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.viewer__close span::before{content:"";transform:translate(-50%,-50%) rotate(90deg)}

@media (max-width:860px){
  .viewer__frame{width:min(64vw,calc(58vh * var(--arn,1)));border-width:9px;padding:3px}
  /* sur petit écran, l'interrupteur se range en bas à droite, comme dans le défilement, au-dessus de la taille */
  .viewer__switch{left:auto;top:auto;bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}