/* ==========================================================
   NLS V208 — CARTES QUI SE SOULÈVENT AU SURVOL
   Remplace entièrement nls-hotspots-v207.css.

   Principe : chaque zone affiche un recadrage de l'artwork,
   aligné au pixel sur lui-même. Au repos : invisible.
   Au survol : ce morceau s'agrandit, prend de l'ombre et passe
   devant, pendant que le reste de l'image s'assombrit.
   À charger EN DERNIER, après nls-v200-additions.css
   ========================================================== */

/* ---------- 1. Neutralisation des anciens survols ---------- */

a.v9-hotspot, button.v9-hotspot {
  border: 1px solid transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

a.v9-hotspot:hover, button.v9-hotspot:hover,
a.v9-hotspot:focus, button.v9-hotspot:focus,
a.v9-hotspot:focus-visible, button.v9-hotspot:focus-visible,
.v9-hotspot.ep-bjorn:hover, .v9-hotspot.ep-morrigan:hover, .v9-hotspot.ep-aelwen:hover,
.v9-hotspot.recap-hotspot:hover, .v9-hotspot.recap-hotspot:focus-visible,
.v9-hotspot.shop-hotspot:hover, .v9-hotspot.shop-hotspot:focus-visible {
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

/* ---------- 2. Source de l'artwork ---------- */

html[lang="en"] .v9-board { --nls-art: url("asset-20-en-home.webp"); }
html[lang="fr"] .v9-board { --nls-art: url("asset-20-1d21172cc2.webp"); }

.v9-board { overflow: hidden; }

.v9-board img {
  transition: filter .45s ease;
  will-change: filter;
}

/* Le fond recule quand une zone est active */
.v9-board:has(.v9-hotspot:hover) img,
.v9-board:has(.v9-hotspot:focus-visible) img {
  filter: brightness(.72) saturate(.88);
}

/* ---------- 3. Le morceau découpé ---------- */

.v9-hotspot::before {
  content: "";
  position: absolute;
  inset: -6%;
  pointer-events: none;
  opacity: 0;
  transform: scale(1);
  transform-origin: 50% 50%;
  background-image: var(--nls-art);
  background-repeat: no-repeat;
  transition: opacity .18s ease, transform .55s cubic-bezier(.2, .72, .24, 1), filter .45s ease;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  will-change: transform, opacity;
}

.v9-hotspot:hover::before,
.v9-hotspot:focus-visible::before {
  opacity: 1;
  transform: scale(var(--nls-lift, 1.05));
  filter: drop-shadow(0 22px 42px rgba(0, 0, 0, .72)) saturate(1.06) brightness(1.04);
}

/* La zone survolée passe devant ses voisines */
.v9-hotspot:hover,
.v9-hotspot:focus-visible { z-index: 6; }

/* ---------- 4. Géométrie et recadrages — version EN (1400 x 900) ---------- */

html[lang="en"] .v9-hotspot.bjorn{left:9.36%;top:13.67%;width:17.36%;height:39.67%;--nls-lift:1.065;}
html[lang="en"] .v9-hotspot.portal{left:27.1%;top:13.67%;width:29.5%;height:39.67%;--nls-lift:1.03;}
html[lang="en"] .v9-hotspot.morrigan{left:56.79%;top:13.67%;width:16.79%;height:39.67%;--nls-lift:1.065;}
html[lang="en"] .v9-hotspot.aelwen{left:74.5%;top:13.67%;width:17.07%;height:39.67%;--nls-lift:1.065;}
html[lang="en"] .v9-hotspot.ep-bjorn{left:9.64%;top:59.1%;width:22.14%;height:15.6%;--nls-lift:1.05;}
html[lang="en"] .v9-hotspot.ep-morrigan{left:32.71%;top:59.1%;width:20.57%;height:15.6%;--nls-lift:1.05;}
html[lang="en"] .v9-hotspot.ep-aelwen{left:54.21%;top:59.1%;width:18.07%;height:15.6%;--nls-lift:1.05;}
html[lang="en"] .v9-hotspot.shop{left:73.4%;top:55.3%;width:16.57%;height:20.2%;--nls-lift:1.05;}
html[lang="en"] .v9-hotspot.studio{left:8.2%;top:76.9%;width:83.5%;height:20.9%;--nls-lift:1.018;}

html[lang="en"] .v9-hotspot.bjorn::before{background-size:514.319% 225.071%;background-position:10.326% 20.317%;}
html[lang="en"] .v9-hotspot.portal::before{background-size:302.663% 225.071%;background-position:37.829% 20.317%;}
html[lang="en"] .v9-hotspot.morrigan::before{background-size:531.779% 225.071%;background-position:68.702% 20.317%;}
html[lang="en"] .v9-hotspot.aelwen::before{background-size:523.056% 225.071%;background-position:90.844% 20.317%;}
html[lang="en"] .v9-hotspot.ep-bjorn::before{background-size:403.278% 572.344%;background-position:11.052% 70.478%;}
html[lang="en"] .v9-hotspot.ep-morrigan::before{background-size:434.058% 572.344%;background-position:40.898% 70.478%;}
html[lang="en"] .v9-hotspot.ep-aelwen::before{background-size:494.110% 572.344%;background-position:66.606% 70.478%;}
html[lang="en"] .v9-hotspot.shop::before{background-size:538.840% 442.008%;background-position:88.905% 69.903%;}
html[lang="en"] .v9-hotspot.studio::before{background-size:106.929% 427.204%;background-position:49.228% 98.765%;}

/* ---------- 5. Géométrie et recadrages — version FR (1448 x 875) ---------- */

html[lang="fr"] .v9-hotspot.bjorn{left:6.9%;top:13.9%;width:19.0%;height:44.0%;--nls-lift:1.065;}
html[lang="fr"] .v9-hotspot.portal{left:26.2%;top:13.9%;width:25.9%;height:44.0%;--nls-lift:1.03;}
html[lang="fr"] .v9-hotspot.morrigan{left:54.2%;top:13.9%;width:17.3%;height:44.0%;--nls-lift:1.065;}
html[lang="fr"] .v9-hotspot.aelwen{left:72.4%;top:13.9%;width:17.4%;height:44.0%;--nls-lift:1.065;}
html[lang="fr"] .v9-hotspot.ep-bjorn{left:8.4%;top:63.1%;width:23.6%;height:15.7%;--nls-lift:1.05;}
html[lang="fr"] .v9-hotspot.ep-morrigan{left:32.9%;top:63.1%;width:20.6%;height:15.7%;--nls-lift:1.05;}
html[lang="fr"] .v9-hotspot.ep-aelwen{left:54.3%;top:63.1%;width:17.3%;height:15.7%;--nls-lift:1.05;}
html[lang="fr"] .v9-hotspot.shop{left:72.7%;top:60.0%;width:17.4%;height:19.4%;--nls-lift:1.05;}
html[lang="fr"] .v9-hotspot.studio{left:6.9%;top:80.1%;width:85.1%;height:18.0%;--nls-lift:1.018;}

html[lang="fr"] .v9-hotspot.bjorn::before{background-size:469.925% 202.922%;background-position:7.317% 22.200%;}
html[lang="fr"] .v9-hotspot.portal::before{background-size:344.732% 202.922%;background-position:34.717% 22.200%;}
html[lang="fr"] .v9-hotspot.morrigan::before{background-size:516.102% 202.922%;background-position:65.938% 22.200%;}
html[lang="fr"] .v9-hotspot.aelwen::before{background-size:513.136% 202.922%;background-position:88.628% 22.200%;}
html[lang="fr"] .v9-hotspot.ep-bjorn::before{background-size:378.329% 568.699%;background-position:9.493% 75.420%;}
html[lang="fr"] .v9-hotspot.ep-morrigan::before{background-size:433.426% 568.699%;background-position:41.161% 75.420%;}
html[lang="fr"] .v9-hotspot.ep-aelwen::before{background-size:516.102% 568.699%;background-position:66.062% 75.420%;}
html[lang="fr"] .v9-hotspot.shop::before{background-size:513.136% 460.236%;background-position:89.000% 75.169%;}
html[lang="fr"] .v9-hotspot.studio::before{background-size:104.919% 496.032%;background-position:38.268% 98.973%;}

/* ---------- 6. Accessibilité clavier ---------- */

.v9-hotspot:focus-visible {
  outline: 2px solid rgba(232, 214, 174, .9) !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 7. Tactile, mouvement réduit, vieux navigateurs ---------- */

@media (hover: none) {
  .v9-hotspot::before { display: none; }
  .v9-board:has(.v9-hotspot:hover) img { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v9-hotspot:hover::before, .v9-hotspot:focus-visible::before {
    transform: scale(1);
    filter: brightness(1.12) saturate(1.06);
  }
  .v9-board:has(.v9-hotspot:hover) img { filter: brightness(.85); }
}

@supports not selector(:has(*)) {
  .v9-hotspot:hover::before { filter: drop-shadow(0 22px 42px rgba(0, 0, 0, .72)) brightness(1.06); }
}