/* ================================================================
   MOMOA CARTE — styles de la carte interactive embarquée
   ================================================================
   1. Le cadre portfolio (.pw-carte3d) : une "table" crème sur la
      page noire, curseur grab, hauteur bornée.
   2. Les règles mmap-* extraites telles quelles du CSS du site
      MOMoA (elles pilotent la 3D : perspective, plateaux, épingles).
   3. Les équivalents des utilitaires Tailwind présents dans le HTML
      extrait (le portfolio n'a pas Tailwind) — ciblés par attribut
      pour ne pas avoir à réécrire le HTML du site.
   ================================================================ */


/* ---- 1. Le cadre ---- */

.pw-carte3d {
  position: relative;
  height: min(74vh, 780px);
  min-height: 480px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 42%, #FBFAF7 0%, #EFEBE2 78%, #E6E1D5 100%);
  border: 1px solid rgba(244, 240, 234, 0.14);
  cursor: grab;
  user-select: none;              /* pas de sélection de texte pendant le drag */
  -webkit-user-select: none;
}

.pw-carte3d--drag {
  cursor: grabbing;
}

/* légende discrète sous le cadre */
.pw-carte3d-hint {
  margin: 12px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: var(--taille-xs);
  letter-spacing: 0.08em;
  color: var(--couleur-texte-doux);
}
.pw-carte3d-hint em {
  color: var(--couleur-accent);
  font-style: normal;
}

@media (max-width: 800px) {
  .pw-carte3d {
    height: 60vh;
    min-height: 420px;
  }
}


/* ---- 2. Règles du site MOMoA (extraites, ne pas retoucher) ---- */

.mmap-scene{perspective:2000px;perspective-origin:50% 55%;position:absolute;inset:0;overflow:hidden}
.mmap-stack{width:0;height:0;will-change:transform;top:81%;left:50%}
.mmap-plate,.mmap-stack{transform-style:preserve-3d;position:absolute}
.mmap-plate{pointer-events:none;transform:translate(-50%,-50%) translateZ(var(--z)) rotate(var(--rot));will-change:transform,opacity;backface-visibility:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.mmap-plate.is-pulled{transform:translate(-50%,-50%) translateZ(calc(var(--z) + 54px)) scale(1.07) rotate(var(--rot))}
.mmap-plate.is-hero{transform:translate(-50%,-50%) translateZ(380px) scale(1.9) rotate(var(--rot))}
.mmap-plate.is-glass{transform:translate(-50%,-50%) translateZ(calc(var(--z) * .16)) rotate(var(--rot));opacity:.12}
.mmap-plate.is-glass .mmap-pin{pointer-events:none}
.mmap-plate.is-dim{opacity:.3}
.mmap-plate.is-sealed .mmap-face{opacity:.5}
.mmap-face,.mmap-side{border-radius:2px;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}
.mmap-side{transform:translate(-50%,-50%)translateZ(-12px)}
.mmap-face svg{opacity:.35;position:absolute;inset:0}
.mmap-iris{mix-blend-mode:screen;opacity:.38;pointer-events:none;background:linear-gradient(135deg,#0ff,#f0f,#ff0,#0ff) 0 0/300% 300%;animation:mmap-iris 22s linear infinite;position:absolute;inset:0}
.mmap-pin{pointer-events:auto;width:26px;height:26px;display:block;position:absolute;transform:translate(-50%,-50%)}
.mmap-pin:before{content:"";background:#fff;border:1.5px solid #0009;border-radius:50%;transition:inset .15s,box-shadow .15s;position:absolute;inset:7px;box-shadow:0 1px 3px #00000059}
.mmap-pin[data-kind=room]:before{border-radius:2px}
.mmap-pin:focus-visible:before,.mmap-pin:hover:before{inset:4px;box-shadow:0 0 0 4px #ffffff8c,0 2px 6px #0006}
.mmap-plate.is-hero .mmap-pin:before{inset:5px}
.mmap-park{transform:translate(-50%,-50%) translateZ(var(--z));transform-style:preserve-3d;pointer-events:none;transition:opacity .3s;position:absolute;top:0;left:0}
.mmap-park.is-faded{opacity:.06}
.mmap-tree{width:0;height:0;transform-style:preserve-3d;position:absolute}
.mmap-tree span{transform-origin:50% 100%;width:14px;height:20px;position:absolute;bottom:0;left:-7px;transform:rotateX(-90deg)}
.mmap-tree span:nth-child(2){transform:rotate(90deg)rotateX(-90deg)}
.mmap-tree span:before{content:"";background:#7a5b40;width:2px;height:8px;position:absolute;bottom:0;left:6px}
.mmap-tree span:after{content:"";background:#4c8a3f;border-radius:50%;width:12px;height:12px;position:absolute;top:0;left:1px}
.mmap-tree span:nth-child(2):after{background:#3f7a34}
.mmap-sat{pointer-events:auto;cursor:default;width:22px;height:22px;position:absolute;transform:translate(-50%,-50%)}
.mmap-sat:before{content:"";background:#fff;border:1px solid #00000073;border-radius:50%;position:absolute;inset:5px;box-shadow:0 1px 3px #0000004d}
.mmap-sat[data-entrance]:before{background:#171717;border-radius:2px}
.mmap-sat-label{transform-origin:bottom;white-space:nowrap;opacity:0;pointer-events:none;background:#fff;border:1px solid #0000004d;border-radius:4px;padding:2px 8px;font-size:11px;transition:opacity .15s;position:absolute;bottom:24px;left:50%}
.mmap-sat:hover .mmap-sat-label{opacity:1}
.mmap-stack.is-intro .mmap-plate{animation:mmap-rise .65s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.mmap-stack.is-intro .mmap-park{animation:mmap-fade .6s .4s both}
@media (prefers-reduced-motion:reduce){.mmap-stack.is-intro .mmap-park,.mmap-stack.is-intro .mmap-plate{animation:none}
.mmap-plate{transition:opacity .3s}
.mmap-iris{animation:none}}
@keyframes mmap-iris{0%{filter:hue-rotate()}to{filter:hue-rotate(1turn)}}
@keyframes mmap-rise{0%{transform:translate(-50%,-50%) translateZ(0) rotate(var(--rot));opacity:0}}
@keyframes mmap-fade{0%{opacity:0}}


/* ---- 3. Équivalents Tailwind du HTML extrait ---- */

/* numéros d'étage (+3 … −9) au centre des plateaux */
.mmap-face > span[class*="font-extrabold"] {
  position: absolute;
  font-weight: 800;
  line-height: 1;
}

/* "NN works on view" en haut des plateaux ouverts */
.mmap-face > span[class*="whitespace-nowrap"] {
  position: absolute;
  white-space: nowrap;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

/* le dessin du Parc remplit sa plaque */
.mmap-park > svg[class*="absolute"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* badge "Park level · 0 m" */
.mmap-park > div[class*="pointer-events-none"] {
  pointer-events: none;
  position: absolute;
  right: -2%;
  top: 50%;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 8px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #737373;
}


/* ---- 4. Les commandes de la carte (reproduites du site) ----
   Typo intérieure du cadre : la voix "MOMoA" (Helvetica grasse,
   noir sur clair) — distincte de la voix du portfolio, comme un
   objet du musée posé sur la page. */

/* Nav d'étages — barres + numéros, à gauche, centrée */
.pw-carte3d-nav {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
}

.pw-carte3d-nav__btn {
  display: flex;
  align-items: center;
  height: 18px;
  width: 64px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.pw-carte3d-nav__barre {
  display: block;
  height: 2px;
  width: 22px;
  background: #111;
  transition: width 200ms ease, opacity 200ms ease;
}
.pw-carte3d-nav__btn--scelle .pw-carte3d-nav__barre {
  width: 12px;
  opacity: 0.3;
}

.pw-carte3d-nav__num {
  margin-left: 8px;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #111;
  opacity: 0;
  transition: opacity 200ms ease;
}

.pw-carte3d-nav__btn:hover .pw-carte3d-nav__barre,
.pw-carte3d-nav__btn.is-actif .pw-carte3d-nav__barre {
  width: 36px;
  opacity: 1;
}
.pw-carte3d-nav__btn:hover .pw-carte3d-nav__num,
.pw-carte3d-nav__btn.is-actif .pw-carte3d-nav__num {
  opacity: 1;
}

/* Libellé typographique — repos : "The Iceberg" ; survol/ouvert : l'étage */
.pw-carte3d-libelle {
  position: absolute;
  top: 20px;
  left: 22px;
  z-index: 20;
  max-width: min(46%, 400px);
  pointer-events: none;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #111;
}
.pw-carte3d-libelle h3 {
  margin: 0;
  /* explicite : sans ça, le h3 hérite du Fraunces global du portfolio */
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.pw-carte3d-libelle__sous {
  margin: 7px 0 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.pw-carte3d-libelle__meta {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #7a756c;
}
.pw-carte3d-libelle__actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: auto;
}
.pw-carte3d-libelle__actions a,
.pw-carte3d-libelle__actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
}
.pw-carte3d-libelle__actions a {
  background: #111;
  color: #fff;
  border: 1px solid #111;
}
.pw-carte3d-libelle__actions button {
  background: none;
  color: #4a463f;
  border: 1px solid rgba(0, 0, 0, 0.25);
}
.pw-carte3d-libelle__actions button:hover {
  border-color: #111;
  color: #111;
}

/* Aperçu de l'œuvre au survol d'une épingle */
.pw-carte3d-tip {
  position: absolute;
  z-index: 40;
  display: block;
  width: 230px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  text-decoration: none;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.pw-carte3d-tip--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pw-carte3d-tip img {
  display: block;
  width: 100%;
  height: 138px;
  object-fit: cover;
}
.pw-carte3d-tip__corps {
  display: block;
  padding: 11px 12px 12px;
}
.pw-carte3d-tip__titre {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #111;
}
.pw-carte3d-tip__sous {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: #7a756c;
}
.pw-carte3d-tip__cta {
  display: block;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #111;
}

/* Petits écrans : la nav et le libellé mangeraient la carte */
@media (max-width: 800px) {
  .pw-carte3d-nav { display: none; }
  .pw-carte3d-libelle h3 { font-size: 22px; }
  .pw-carte3d-libelle__meta { display: none; }
  .pw-carte3d-tip { display: none; }
}