/* NOSK8 — Versus. Fond bleu nuit, textes blancs ; néons (cyan A / rose B) UNIQUEMENT sur la jauge et les pourcentages. */
.n8v{margin:48px 0 8px;scroll-margin-top:90px}
.n8v__inner{background:#1a2744;border-radius:16px;padding:30px 20px 24px;color:#fff;text-align:center;font-family:Inter,-apple-system,sans-serif}
.n8v__kicker{margin:0 0 10px;font-family:"Space Mono",ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.n8v__q{margin:0 0 22px;font-family:"Bebas Neue",Impact,sans-serif;font-size:34px;line-height:1.02;letter-spacing:.01em;color:#fff;font-weight:400}
.n8v__choices{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.n8v__btn{appearance:none;display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:76px;text-align:left;padding:16px 18px;background:#fff;color:#111;border:2px solid #fff;border-radius:12px;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s,transform .12s}
.n8v__btn:hover{background:#2a3a5c;color:#fff;border-color:#fff}
.n8v__btn:active{transform:scale(.98)}
.n8v__btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.n8v__tag{font-family:"Space Mono",ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.18em;opacity:.55}
.n8v__lab{font-family:"Bebas Neue",Impact,sans-serif;font-size:30px;line-height:1;letter-spacing:.01em}
.n8v__fait{font-size:13px;line-height:1.4;opacity:.7}
.n8v__vs{align-self:center;font-family:"Bebas Neue",Impact,sans-serif;font-size:20px;letter-spacing:.12em;color:rgba(255,255,255,.5);line-height:1}
.n8v__result{animation:n8v-in .3s ease}
.n8v__result[hidden],.n8v__choices[hidden],.n8v__err[hidden]{display:none}
.n8v__legend{display:flex;justify-content:space-between;gap:14px;margin:0 0 10px;text-align:left}
.n8v__who{display:flex;flex-direction:column;gap:2px;min-width:0}
.n8v__who--b{text-align:right;align-items:flex-end}
.n8v__who b{font-family:"Space Mono",ui-monospace,monospace;font-size:34px;font-weight:700;line-height:1}
.n8v__who--a b{color:#00f5ff;text-shadow:0 0 14px rgba(0,245,255,.45)}
.n8v__who--b b{color:#ff2d7b;text-shadow:0 0 14px rgba(255,45,123,.45)}
.n8v__who i{font-style:normal;font-family:"Bebas Neue",Impact,sans-serif;font-size:22px;letter-spacing:.02em;line-height:1.05;color:rgba(255,255,255,.75)}
.n8v__who.is-mine i{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.n8v__gauge{display:flex;height:18px;border-radius:9px;overflow:hidden;background:#0f1730}
.n8v__fill{display:block;height:100%;width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.n8v__fill--a{background:#00f5ff;box-shadow:0 0 16px rgba(0,245,255,.55)}
.n8v__fill--b{background:#ff2d7b;box-shadow:0 0 16px rgba(255,45,123,.55)}
.n8v__count{margin:12px 0 0;font-family:"Space Mono",ui-monospace,monospace;font-size:13px;color:rgba(255,255,255,.6);min-height:1em}
.n8v__invite{margin:14px 0 0;font-size:16px;font-weight:600;color:#fff}
.n8v__share{appearance:none;display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:13px 22px;background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6);border-radius:10px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
.n8v__share:hover{background:#2a3a5c;border-color:#fff}
.n8v__share:focus-visible{outline:3px solid #fff;outline-offset:3px}
.n8v__err{margin:12px 0 0;font-size:13px;color:#ffb3c8}
@keyframes n8v-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:720px){
  .n8v__inner{padding:38px 36px 30px}
  .n8v__q{font-size:44px}
  .n8v__choices{flex-direction:row;align-items:stretch}
  .n8v__btn{flex:1}
  .n8v__vs{align-self:center}
}
@media(prefers-reduced-motion:reduce){.n8v__fill,.n8v__result,.n8v__btn{transition:none;animation:none}}
/* Le corps d'article force police et couleur en !important sur p/span/h2/button : on reprend la main, portée au bloc seul. */
.nosk8-article__content .n8v h2.n8v__q{font-family:"Bebas Neue",Impact,sans-serif !important;color:#fff !important;font-size:34px;margin:0 0 22px !important}
.nosk8-article__content .n8v p{font-family:Inter,-apple-system,sans-serif !important;color:#fff !important;margin:0}
.nosk8-article__content .n8v p.n8v__kicker{font-family:"Space Mono",ui-monospace,monospace !important;color:rgba(255,255,255,.55) !important;margin:0 0 10px !important}
.nosk8-article__content .n8v p.n8v__count{font-family:"Space Mono",ui-monospace,monospace !important;color:rgba(255,255,255,.6) !important;margin:12px 0 0 !important}
.nosk8-article__content .n8v p.n8v__invite{margin:14px 0 0 !important}
.nosk8-article__content .n8v button.n8v__btn{color:#111 !important;font-family:Inter,-apple-system,sans-serif !important}
.nosk8-article__content .n8v button.n8v__btn:hover{color:#fff !important}
.nosk8-article__content .n8v .n8v__lab{font-family:"Bebas Neue",Impact,sans-serif !important}
.nosk8-article__content .n8v .n8v__tag,.nosk8-article__content .n8v .n8v__who b{font-family:"Space Mono",ui-monospace,monospace !important}
.nosk8-article__content .n8v .n8v__who--a b{color:#00f5ff !important}
.nosk8-article__content .n8v .n8v__who--b b{color:#ff2d7b !important}
.nosk8-article__content .n8v .n8v__who i{font-family:"Bebas Neue",Impact,sans-serif !important;color:rgba(255,255,255,.75) !important}
.nosk8-article__content .n8v .n8v__who.is-mine i{color:#fff !important}
.nosk8-article__content .n8v .n8v__vs{color:rgba(255,255,255,.5) !important;font-family:"Bebas Neue",Impact,sans-serif !important}
.nosk8-article__content .n8v button.n8v__share{color:#fff !important;font-family:Inter,-apple-system,sans-serif !important}
@media(min-width:720px){.nosk8-article__content .n8v h2.n8v__q{font-size:44px}}
.nosk8-article__content .n8v h2.n8v__q::before,.nosk8-article__content .n8v h2.n8v__q::after{content:none !important;display:none !important}
.nosk8-article__content .n8v .n8v__fait,.nosk8-article__content .n8v button.n8v__share span{font-family:Inter,-apple-system,"Segoe UI",sans-serif !important}
/* Visuel split (13/10, d'après les versus d'Agathe) : 2 photos en diagonale, couture blanche, VS géant.
   Bord à bord en haut de la carte ; le texte vit sur des voiles LOCAUX, jamais un voile plein cadre. */
.n8v__visual{position:relative;margin:-30px -20px 24px;aspect-ratio:4/3;overflow:hidden;border-radius:16px 16px 0 0;background:#0a0f1a;--n8v-c:58%;--n8v-d:42%}
.n8v__half{position:absolute;inset:0;display:block}
.n8v__half--a{clip-path:polygon(0 0,var(--n8v-c) 0,var(--n8v-d) 100%,0 100%)}
.n8v__half--b{clip-path:polygon(var(--n8v-c) 0,100% 0,100% 100%,var(--n8v-d) 100%)}
.n8v .n8v__ph{position:absolute;top:0;width:58%;height:100%}
.n8v__half--a .n8v__ph{left:0}
.n8v__half--b .n8v__ph{left:42%}
.n8v .n8v__ph{display:block;height:100%;max-width:none;object-fit:cover;filter:contrast(1.1) saturate(1.3);margin-top:0;margin-bottom:0;border-radius:0}
.n8v__visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,15,26,.35) 0%,transparent 26%,transparent 42%,rgba(10,15,26,.82) 74%,rgba(10,15,26,.96) 100%)}
.n8v__seam{position:absolute;top:-10%;bottom:-10%;left:50%;width:6px;margin-left:-3px;background:#fff;z-index:2;box-shadow:0 0 22px rgba(0,0,0,.7);transform:rotate(12deg)}
.n8v__big{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-58%);font-family:"Helvetica Neue",Arial,sans-serif;font-weight:900;font-style:italic;font-size:clamp(64px,19vw,120px);line-height:1;letter-spacing:-.04em;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.85)}
.n8v__nm{position:absolute;bottom:42px;z-index:3;max-width:46%;font-family:"Bebas Neue",Impact,sans-serif;font-size:clamp(28px,8vw,46px);line-height:.9;color:#fff;text-transform:uppercase;text-shadow:0 4px 18px rgba(0,0,0,.9);text-align:left}
.n8v__nm--a{left:16px}
.n8v__nm--b{right:16px;text-align:right}
.n8v__nm i{display:block;width:max-content;margin:0 0 6px;padding:3px 8px 2px;font-style:normal;font-family:"Space Mono",ui-monospace,monospace;font-size:11px;font-weight:700;letter-spacing:.18em;line-height:1.2;color:#0a0f1a;border-radius:4px}
.n8v__nm--a i{background:#00f5ff}
.n8v__nm--b i{background:#ff2d7b;color:#fff;margin-left:auto}
.n8v__credit{position:absolute;left:0;right:0;bottom:9px;z-index:3;padding:0 16px;font-family:"Space Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.04em;color:rgba(255,255,255,.92);text-shadow:0 1px 6px rgba(0,0,0,.9);text-align:center;line-height:1.35}
@media(min-width:720px){
  .n8v__visual{margin:-38px -36px 28px;aspect-ratio:16/9}
  .n8v__nm{bottom:38px}
  .n8v__nm--a{left:28px}.n8v__nm--b{right:28px}
  .n8v__seam{transform:rotate(15.9deg)}
}
.nosk8-article__content .n8v figure.n8v__visual{margin:-30px -20px 24px !important;padding:0 !important;max-width:none !important}
@media(min-width:720px){.nosk8-article__content .n8v figure.n8v__visual{margin:-38px -36px 28px !important}}
.nosk8-article__content .n8v .n8v__nm{font-family:"Bebas Neue",Impact,sans-serif !important;color:#fff !important}
.nosk8-article__content .n8v .n8v__credit{font-family:"Space Mono",ui-monospace,monospace !important;color:rgba(255,255,255,.92) !important;font-size:9.5px !important;margin:0 !important;background:none !important}
.nosk8-article__content .n8v .n8v__ph{margin:0 !important;border-radius:0 !important;box-shadow:none !important}
/* Fond photo flouté (13/10, David) : les deux photos du haut, floutées, remplacent le bleu nuit sous la question et les boutons.
   Voile sombre pour la lecture ; il se raccorde au dégradé bas du visuel net (rgba(10,15,26,.88)). */
.n8v__inner--photo{position:relative;overflow:hidden;isolation:isolate;background:#0a0f1a}
.n8v__fond{position:absolute;inset:0;z-index:-1;display:block;overflow:hidden}
.n8v__fond-h{position:absolute;top:-8%;bottom:-8%;width:58%;background-size:cover;background-position:50% 30%;filter:blur(18px) saturate(1.4);transform:scale(1.15)}
.n8v__fond-h--a{left:-8%}
.n8v__fond-h--b{right:-8%}
.n8v__fond::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,26,.8) 0%,rgba(10,15,26,.66) 40%,rgba(10,15,26,.78) 100%)}
.n8v__inner--photo .n8v__visual{z-index:1}
.n8v__inner--photo .n8v__gauge{background:rgba(255,255,255,.14)}
.n8v__inner--photo .n8v__btn:hover{background:rgba(26,39,68,.85)}
.n8v__inner--photo .n8v__q,.n8v__inner--photo .n8v__kicker,.n8v__inner--photo .n8v__vs,.n8v__inner--photo .n8v__count,.n8v__inner--photo .n8v__invite{text-shadow:0 2px 14px rgba(0,0,0,.7)}
.n8v__inner--photo .n8v__btn{box-shadow:0 8px 24px rgba(0,0,0,.28)}
/* Camp B sans clip-path : un clip-path sur un bloc qui porte une image à filtre ne peignait rien (photo B vide au rendu, 13/10).
   B dessous, plein cadre à droite de 42 % ; A au-dessus, découpée en diagonale, recouvre ce qui dépasse. */
.n8v__half--b{clip-path:none;z-index:0}
.n8v__half--a{z-index:1}
/* La couture s'arrête au-dessus du crédit photo (13/10 : elle barrait « CC BY-SA »). */
.n8v__seam{-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 84%);mask-image:linear-gradient(180deg,#000 78%,transparent 84%)}
