/* Real, editable latest episodes above the old baked-in artwork. */
/* v212 — correctif mobile : les zones cliquables .v9-hotspot sont calees
   sur la hauteur de l'illustration et ne recouvrent plus les cartes. */
.v9-board{container-type:inline-size;}
.nls-intro-latest{position:absolute;z-index:7;left:8.25%;top:55.5%;width:64.7%;height:21.1%;box-sizing:border-box;padding:0.6% 1.1% 0.8%;background:#080e10;border:1px solid #333125;border-radius:5px;color:#e7dac1;}
html[lang="fr"] .nls-intro-latest{left:6.8%;top:59.9%;width:65.5%;height:20%;}
.nls-intro-latest h2{margin:0 0 0.45%;font-family:Georgia,serif;font-size:clamp(12px,1.25cqw,19px);line-height:1.3;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:#c5aa78;}
.nls-intro-episodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3%;height:82%;}
.nls-intro-episode{position:relative;z-index:1;display:block;min-width:0;height:100%;overflow:hidden;background:#080e10;border:1px solid #494338;border-radius:5px;text-decoration:none;color:#f1e8d5;transition:transform .2s,box-shadow .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.nls-intro-episode img{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:center 40%;filter:none!important;}
.nls-intro-copy{position:absolute;inset:auto 0 0;padding:18% 4% 3%;background:linear-gradient(transparent,rgba(3,8,12,.97) 42%);display:flex;flex-direction:column;line-height:1.2;gap:3px;pointer-events:none;}
.nls-intro-copy small{font-family:Georgia,serif;font-size:clamp(11px,1.02cqw,16px);color:#cfc0a5;}
.nls-intro-copy strong{font-family:Georgia,serif;font-size:clamp(12px,1.18cqw,18px);font-weight:400;}
.nls-intro-play{position:absolute;left:50%;top:25%;transform:translate(-50%,-50%);display:grid;place-items:center;width:2.5cqw;height:2.5cqw;min-width:22px;min-height:22px;border:1px solid #cfb883;border-radius:50%;background:#081017cf;color:#e6d2a8;font-size:clamp(10px,1.1cqw,16px);pointer-events:none;}
.nls-intro-episode:hover,.nls-intro-episode:focus-visible{transform:translateY(-3px);box-shadow:0 8px 18px #0009;outline:2px solid #cfb883;outline-offset:1px;}
@media(max-width:650px){
 .nls-intro-latest,html[lang="fr"] .nls-intro-latest{position:relative;z-index:9;left:auto;top:auto;width:100%;height:auto;padding:16px;}
 .nls-intro-latest h2{font-size:16px;margin-bottom:12px;}
 .nls-intro-episodes{grid-template-columns:1fr;gap:12px;height:auto;}
 .nls-intro-episode{height:150px;}
 .nls-intro-copy small{font-size:14px;}.nls-intro-copy strong{font-size:18px;}
 .nls-intro-play{width:32px;height:32px;font-size:14px;}
 .v9-board::after{content:"";position:absolute;z-index:6;left:8.25%;top:0;width:64.7%;height:13.6cqw;transform:translateY(35.68cqw);background:#080e10;pointer-events:none;}
 html[lang="fr"] .v9-board::after{left:6.8%;width:65.5%;height:12.1cqw;transform:translateY(36.2cqw);}

 /* --- v212 : les zones cliquables de l'illustration restent SUR l'illustration ---
    Leur top/height etaient exprimes en % de .v9-board. Sur mobile les cartes
    passent dans le flux, le board triple de hauteur, et ces zones invisibles
    descendaient par-dessus les cartes. On les recalcule en cqw (1cqw = 1% de
    la largeur du board), donc relatives a la hauteur reelle de l'image.
    EN : 1400x900  -> hauteur image = 64.2857cqw
    FR : 1448x875  -> hauteur image = 60.4144cqw                              */
 html[lang="en"] .v9-hotspot.bjorn,
 html[lang="en"] .v9-hotspot.portal,
 html[lang="en"] .v9-hotspot.morrigan,
 html[lang="en"] .v9-hotspot.aelwen{top:8.788cqw!important;height:25.502cqw!important;}
 html[lang="en"] .v9-hotspot.shop{top:35.550cqw!important;height:12.986cqw!important;}
 html[lang="en"] .v9-hotspot.studio{top:49.436cqw!important;height:13.436cqw!important;}

 html[lang="fr"] .v9-hotspot.bjorn,
 html[lang="fr"] .v9-hotspot.portal,
 html[lang="fr"] .v9-hotspot.morrigan,
 html[lang="fr"] .v9-hotspot.aelwen{top:8.398cqw!important;height:26.582cqw!important;}
 html[lang="fr"] .v9-hotspot.shop{top:36.249cqw!important;height:11.720cqw!important;}
 html[lang="fr"] .v9-hotspot.studio{top:48.392cqw!important;height:10.875cqw!important;}

 /* Filet de securite : meme si une zone debordait, elle reste sous les cartes. */
 .v9-hotspot,.v9-hotspot:hover,.v9-hotspot:focus-visible{z-index:5;}

 /* La mention de copyright se collait au bas du board, donc par-dessus la
    troisieme carte. On la ramene au bas de l'illustration. */
 html[lang="en"] .v9-copyright{bottom:auto;top:calc(64.2857cqw - 30px);}
 html[lang="fr"] .v9-copyright{bottom:auto;top:calc(60.4144cqw - 30px);}
 .v9-copyright{right:8px;padding:4px 7px;font-size:10px;letter-spacing:.08em;}
}
@media(prefers-reduced-motion:reduce){.nls-intro-episode{transition:none;}.nls-intro-episode:hover,.nls-intro-episode:focus-visible{transform:none;}}
