/* ========================================
   NOSK8 Homepage — DA Blanc/Bleu nuit/Neon subtil
   ======================================== */
:root {
    --n8-white: #ffffff;
    --n8-bg-alt: #f8f9fb;
    --n8-navy: #1a2744;
    --n8-navy-light: #2d3f5e;
    --n8-black: #111;
    --n8-text: #1a2744;
    --n8-text2: #4a5568;
    --n8-muted: #8896a6;
    --n8-border: #e0e0e0;
    --n8-green: #00ff88;
    --n8-pink: #ff2d7b;
    --n8-cyan: #00f5ff;
    --n8-orange: #f97316;
    --n8-card-radius: 12px;
    --n8-btn-radius: 8px;
}

@media(max-width:768px) {
    .nosk8-home { padding-top:0!important; margin-top:0!important; }
}

/* Logo relief */
@keyframes rgb-shift {
    0%   { color: #ff0044; text-shadow: 2px 2px 0 #00ffbb, -1px -1px 0 #4400ff; }
    14%  { color: #ff8800; text-shadow: 2px 2px 0 #0077ff, -1px -1px 0 #00ff88; }
    28%  { color: #ffdd00; text-shadow: 2px 2px 0 #0022ff, -1px -1px 0 #ff00aa; }
    42%  { color: #00ff88; text-shadow: 2px 2px 0 #ff0077, -1px -1px 0 #5500ff; }
    57%  { color: #00ccff; text-shadow: 2px 2px 0 #ff3300, -1px -1px 0 #bbff00; }
    71%  { color: #7700ff; text-shadow: 2px 2px 0 #88ff00, -1px -1px 0 #ff0044; }
    85%  { color: #ff2d7b; text-shadow: 2px 2px 0 #00d284, -1px -1px 0 #3300ff; }
    100% { color: #ff0044; text-shadow: 2px 2px 0 #00ffbb, -1px -1px 0 #4400ff; }
}
.rgb-title {
    color: var(--n8-navy);
    text-shadow: 2px 2px 0 #00ff88, -2px -2px 0 #ff0044, 1px -1px 0 #0066ff;
    position: relative; display: inline-block;
}

/* Typography */
.nosk8-home h1,.nosk8-home h2,.nosk8-home h3,.nosk8-home h4 { font-family:"Bebas Neue",Impact,sans-serif; text-transform:uppercase; letter-spacing:1px; line-height:1.1; color:var(--n8-navy); }
.nosk8-home p,.nosk8-home span,.nosk8-home a,.nosk8-home time { font-family:"Inter",-apple-system,sans-serif; line-height:1.6; }
.n8-stat__num,.n8-product__price,.n8-card__meta { font-family:"Space Mono",monospace; }

/* Layout */
.nosk8-home { background:var(--n8-white); overflow-x:hidden; padding-top:0; margin-top:0; }
.n8-section { padding:80px 0; }
.n8-section--alt { background:var(--n8-bg-alt); }
.n8-section__inner { max-width:1200px; margin:0 auto; padding:0 24px; }
.n8-section__title { font-size:clamp(28px,4vw,48px); color:var(--n8-navy); margin-bottom:8px; }
.n8-section__line { width:60px; height:3px; background:var(--n8-navy); margin-bottom:40px; border-radius:2px; }
.n8-section__cta { text-align:center; margin-top:48px; }
.n8-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.n8-grid--2 { grid-template-columns:repeat(2,1fr); }
@media(max-width:1024px){ .n8-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .n8-grid{grid-template-columns:repeat(2,1fr);} .n8-grid--2{grid-template-columns:1fr;} .n8-section{padding:48px 0;} .n8-section__inner{padding:0 16px;} }

/* Buttons */
.n8-btn { display:inline-block; padding:12px 32px; font-family:"Bebas Neue",Impact,sans-serif; font-size:17px; letter-spacing:2px; text-transform:uppercase; text-decoration:none; color:var(--n8-white)!important; background:var(--n8-navy); border:2px solid var(--n8-navy); border-radius:var(--n8-btn-radius); transition:all 0.25s; cursor:pointer; }
.n8-btn:hover { background:var(--n8-navy-light); border-color:var(--n8-navy-light); }
.n8-btn--outline { background:transparent; color:var(--n8-navy)!important; }
.n8-btn--outline:hover { background:var(--n8-navy); color:var(--n8-white)!important; }

/* ====== HERO ====== */
.n8-hero {
    position:relative; height:94vh!important; min-height:unset!important; max-height:94vh!important;
    margin-top:0; padding-top:92px;
    display:flex; align-items:center; justify-content:center;
    background:url("https://www.nosk8.com/wp-content/uploads/2025/02/Nosk8teur-2048x1024.webp") center/cover no-repeat;
    overflow:hidden; filter:grayscale(50%) contrast(1.1);
}
/* Mobile : 1er écran = hero + bandeau news = EXACTEMENT la hauteur de l'écran.
   Le bandeau reste collé en bas, l'image remplit tout l'espace au-dessus, quel que soit le format
   de téléphone (svh = barre d'adresse Safari prise en compte, fallback vh). Flex column =
   aucun calcul fragile : le bandeau prend sa hauteur, l'image prend le reste. David 2026-05-21. */
@media(max-width:768px) {
  .n8-firstscreen { height:100vh; height:100svh; display:flex; flex-direction:column; overflow:hidden; }
  .n8-firstscreen .n8-hero { flex:1 1 auto; height:auto!important; min-height:0!important; max-height:none!important; padding-top:88px; }
  .n8-firstscreen .n8-ticker { flex:0 0 auto; }
  /* Mobile : version allégée du fond hero (overlay sombre + grayscale masquent la baisse de résolution). ~45KB -> ~23KB. */
  .n8-hero { background-image:url("https://www.nosk8.com/wp-content/uploads/2025/02/Nosk8teur-1024x512.webp"); }
}
@media(min-width:769px) and (max-width:1024px) { section.n8-hero { height:88vh!important; max-height:88vh!important; } }
.n8-hero__overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(26,39,68,0.65) 0%,rgba(17,17,17,0.8) 100%); z-index:1; }
.n8-hero__grain {
    position:absolute; inset:0; z-index:2; pointer-events:none;
    background:
        repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.08) 2px,rgba(0,0,0,0.08) 4px),
        url("data:image/svg+xml,%3Csvg viewBox=%270 0 256 256%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%270.06%27/%3E%3C/svg%3E");
    opacity:0.6;
}
.n8-hero__content { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; text-align:center; max-width:780px; margin:0 auto; padding:24px; }
/* Eyebrow pill */
.n8-hero__eyebrow { display:inline-block; font-family:"Space Mono",monospace; font-size:clamp(10px,1.3vw,12px); font-weight:700; letter-spacing:3px; text-transform:uppercase; color:#fff; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.28); padding:6px 15px; border-radius:999px; margin:0 0 20px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.n8-hero__title { font-family:"Archivo Black","Barlow Condensed","Bebas Neue",sans-serif; font-weight:900; font-size:clamp(72px,17vw,172px); letter-spacing:-0.03em; margin:0 0 12px; color:#fff!important; line-height:.88; text-align:center; text-shadow:0 6px 30px rgba(0,0,0,0.45); }
.n8-hero__title::before, .n8-hero__title::after { content:none !important; }
.n8-hero__sub { font-family:"Space Mono",monospace; font-size:clamp(14px,2vw,20px); color:rgba(255,255,255,0.85); letter-spacing:4px; text-transform:uppercase; margin:0 0 12px; }
.n8-hero__tagline { font-family:"Barlow","Inter",sans-serif; font-size:clamp(14px,1.9vw,18px); line-height:1.5; font-weight:400; color:rgba(255,255,255,0.6); margin:0 auto 30px; max-width:40ch; letter-spacing:.2px; }
.n8-hero__tagline strong { color:rgba(255,255,255,0.85); font-weight:600; }
.n8-hero__ctas { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
/* Boutons hero — ZÉRO vert (charte), micro-interaction + ombre */
/* Boutons hero — LIQUID GLASS (façon Apple) : verre dépoli translucide, blur + saturate, liseré lumineux. ZÉRO vert. */
.n8-btn--hero, .n8-btn--hero-outline { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 20px; font-family:"Bebas Neue",Impact,sans-serif; font-size:16px; letter-spacing:1.4px; text-transform:uppercase; text-decoration:none; color:#fff!important; border-radius:999px; line-height:1; cursor:pointer; -webkit-backdrop-filter:blur(18px) saturate(170%); backdrop-filter:blur(18px) saturate(170%); border:1px solid rgba(255,255,255,0.26); box-shadow:inset 0 1px 0 rgba(255,255,255,0.38), 0 6px 18px rgba(0,0,0,0.24); transition:transform .22s ease, background .22s ease, box-shadow .22s ease, border-color .22s ease; }
.n8-btn--hero { background:linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.12)); }
.n8-btn--hero:hover { background:linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0.20)); border-color:rgba(255,255,255,0.55); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.55), 0 10px 24px rgba(0,0,0,0.32); }
.n8-btn--hero:active { transform:translateY(0); }
.n8-btn__arrow { transition:transform .2s ease; }
.n8-btn--hero:hover .n8-btn__arrow { transform:translateX(4px); }
.n8-btn--hero-outline { background:linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)); }
.n8-btn--hero-outline:hover { background:linear-gradient(180deg, rgba(255,255,255,0.24), rgba(255,255,255,0.10)); border-color:rgba(255,255,255,0.55); transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 24px rgba(0,0,0,0.32); }
.n8-btn--hero-outline:active { transform:translateY(0); }
/* Icônes de boutons — restent EN PLACE, s'animent au survol. Opacité 100% par défaut (David 2026-05-27). */
.n8-btn__icon { flex:0 0 auto; opacity:1; }
.n8-btn--hero .n8-btn__icon, .n8-btn--hero-outline .n8-btn__icon { opacity:1 !important; }
/* Mobile : les 2 CTA hero côte à côte (jamais empilés) + padding interne réduit */
@media(max-width:600px){
  .n8-hero__ctas { flex-wrap:nowrap; gap:10px; width:auto; margin:0 auto; justify-content:center; }
  .n8-hero__ctas .n8-btn--hero, .n8-hero__ctas .n8-btn--hero-outline { flex:0 1 auto; min-width:0; padding:9px 18px; font-size:14px; letter-spacing:1px; gap:6px; border-radius:999px; }
  .n8-hero__ctas .n8-btn__icon { width:17px; height:17px; }
}
/* JOURNAL (Lire l'actu) : le livre OUVERT reste entier ; une page EN PLUS tourne par-dessus, en boucle au survol */
.n8-ic-news__flip { transform-box:fill-box; transform-origin:left center; opacity:0; }
.n8-btn--hero:hover .n8-ic-news__flip { animation:n8PageFlip 1.6s ease-in-out infinite; }
@keyframes n8PageFlip {
  0%   { transform:perspective(60px) rotateY(0deg); opacity:0; }
  10%  { opacity:1; }
  52%  { transform:perspective(60px) rotateY(-92deg); opacity:1; }
  90%  { transform:perspective(60px) rotateY(-176deg); opacity:1; }
  100% { transform:perspective(60px) rotateY(-176deg); opacity:0; }
}
/* CADDIE (Le shop) : flèche qui tombe dans le panier, en boucle au survol */
.n8-ic-cart__arrow { transform-box:fill-box; transform-origin:center; }
.n8-btn--hero-outline:hover .n8-ic-cart__arrow { animation:n8CartDrop .9s ease-in-out infinite; }
@keyframes n8CartDrop { 0%{transform:translateY(-3px);opacity:0} 25%{opacity:1} 65%{transform:translateY(2px);opacity:1} 100%{transform:translateY(2px);opacity:0} }
@media(prefers-reduced-motion:reduce){ .n8-btn--hero:hover .n8-ic-news__flip{animation:none} .n8-btn--hero-outline:hover .n8-ic-cart__arrow{animation:none} }
/* Entrée animée (engagement) — pas sur le titre (déjà animé rgb-shift) */
.n8-hero__eyebrow, .n8-hero__tagline, .n8-hero__ctas { animation:n8HeroIn .7s cubic-bezier(.2,.7,.2,1) both; }
.n8-hero__tagline { animation-delay:.15s; }
.n8-hero__ctas { animation-delay:.28s; }
@keyframes n8HeroIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }
@media(prefers-reduced-motion:reduce){ .n8-hero__eyebrow,.n8-hero__tagline,.n8-hero__ctas,.n8-hero__title{animation:none!important} }

/* ====== BREAKING NEWS ====== */
.n8-ticker { display:flex; align-items:stretch; background:#1a2744; overflow:hidden; min-height:44px; }
.n8-ticker__label { flex-shrink:0; display:flex; align-items:center; gap:8px; padding:0 16px; background:#e2231a; color:#fff; border-right:1px solid rgba(255,255,255,0.12); }
.n8-ticker__dot { width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse-dot 1.5s ease-in-out infinite; flex-shrink:0; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Voile "ambiance" léger sur les vignettes d'articles (home) — évite les images brutes/cramées, cohérent avec le filtre du hero. David 2026-05-22 */
.n8-card__img-wrap::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(26,39,68,0.10) 0%, rgba(26,39,68,0) 38%, rgba(17,17,17,0.34) 100%); z-index:1; }
.n8-card__img-wrap > :not(.n8-card__img) { position:relative; z-index:2; }
.n8-card__img { filter:contrast(1.05) saturate(1.04) brightness(0.96); }
.n8-ticker__label-text { display:flex; flex-direction:column; line-height:1.1; font-family:"Space Mono",monospace; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.n8-ticker__track { flex:1; overflow:hidden; display:flex; align-items:center; padding:10px 0; }
.n8-ticker__scroll { display:inline-flex; cursor:grab; user-select:none; -webkit-user-select:none; will-change:transform; transition:none; }
.n8-ticker__scroll:active { cursor:grabbing; }
.n8-ticker__item { display:inline-flex; flex-direction:column; gap:1px; color:#fff!important; text-decoration:none; white-space:nowrap; padding-right:40px; margin-right:40px; border-right:1px solid rgba(255,255,255,0.15); }
.n8-ticker__item:last-child { border-right:none; margin-right:0; padding-right:0; }
.n8-ticker__item strong { font-family:"Bebas Neue",sans-serif; font-size:15px; letter-spacing:1px; line-height:1.2; }
.n8-ticker__ctx { font-family:"Inter",sans-serif; font-size:11px; color:rgba(255,255,255,0.5); line-height:1.3; }
.n8-ticker__item { position:relative; padding-right:160px!important; cursor:default; }
.n8-ticker__dblclick { cursor:pointer; position:absolute; right:44px; top:0; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-left:1px solid rgba(255,255,255,0.15); padding-left:14px; white-space:nowrap; }
.n8-ticker__dblclick-icon { display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.5); }
.n8-ticker__dblclick-txt { font-family:"Space Mono",monospace; font-size:7px; letter-spacing:0.5px; color:rgba(255,255,255,0.3); text-align:center; line-height:1.2; text-transform:uppercase; }

/* ====== CARDS ====== */
.n8-card { background:var(--n8-white); border:1px solid var(--n8-border); border-radius:var(--n8-card-radius); overflow:visible; transition:transform 0.25s,box-shadow 0.25s; }
.n8-card:hover { transform:translateY(-4px); box-shadow:0 12px 32px rgba(26,39,68,0.12); }
.n8-card__link { text-decoration:none; display:block; }
.n8-card__img-wrap { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--n8-bg-alt); border-radius:var(--n8-card-radius) var(--n8-card-radius) 0 0; }
.n8-card__img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s; }
.n8-card:hover .n8-card__img { transform:scale(1.04); }
.n8-card__img--placeholder { width:100%; height:100%; background:linear-gradient(135deg,var(--n8-bg-alt),var(--n8-border)); }
.n8-card__badge { display:none; }
.n8-card__body { padding:16px 20px; }
.n8-card__title { font-size:clamp(16px,2vw,20px); color:var(--n8-navy); margin-bottom:8px; line-height:1.2; }
.n8-card__excerpt { font-size:14px; color:var(--n8-text2); margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.n8-card__meta { display:flex; justify-content:space-between; font-size:12px; color:var(--n8-muted); }


/* ====== SPOTS SECTION ====== */
/* ================================================================
   SPOTS SECTION — v2 (2026-04-22) : atlas vivant du skate mondial
   DA : fond dark uniforme navy/noir · accent navy-light · typo Bebas/Inter
   Animations : fade+translate au scroll via [data-reveal], easing cubic-bezier(0.16,1,0.3,1)
   ================================================================ */
.n8-spots-section { position:relative; background:#0a0f1a; padding:100px 0 80px; overflow:hidden; }
/* Halo d'ambiance navy derrière le header (profondeur, pas de néon en aplat — charte) */
.n8-spots-section::before { content:""; position:absolute; top:-120px; left:50%; transform:translateX(-50%); width:min(1100px,120vw); height:520px; pointer-events:none; background:radial-gradient(ellipse 55% 45% at 50% 30%, rgba(42,58,92,.55), transparent 70%); z-index:1; }

/* Reveal animation — éléments invisibles au chargement, montés via IntersectionObserver */
.n8-spots-section [data-reveal] { opacity:0; transform:translateY(22px); transition:opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.n8-spots-section [data-reveal].is-revealed { opacity:1; transform:translateY(0); }
.n8-spots-section [data-reveal-delay="1"] { transition-delay:0.08s; }
.n8-spots-section [data-reveal-delay="2"] { transition-delay:0.16s; }
.n8-spots-section [data-reveal-delay="3"] { transition-delay:0.24s; }
.n8-spots-section [data-reveal-delay="4"] { transition-delay:0.32s; }
.n8-spots-section [data-reveal-delay="5"] { transition-delay:0.40s; }
@media (prefers-reduced-motion: reduce) {
    .n8-spots-section [data-reveal] { opacity:1; transform:none; transition:none; }
}
.n8-spots-grain { position:absolute; inset:0; opacity:0.06; pointer-events:none; z-index:1;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence baseFrequency=%270.9%27 numOctaves=%273%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%270.55%27/%3E%3C/svg%3E"); }
.n8-spots-section > * { position:relative; z-index:2; }
.n8-spots-section button { outline:none!important; border:none!important; box-shadow:none!important; -webkit-tap-highlight-color:transparent; }
.n8-spots-section button:focus,.n8-spots-section button:active { outline:none!important; box-shadow:none!important; }

/* ── Header éditorial ── */
.n8-spots-header { text-align:center; max-width:760px; margin:0 auto 40px; padding:0 24px; position:relative; }
/* Coordonnées décoratives d'atlas, flanquées de part et d'autre du titre */
.n8-spots-coord { position:absolute; top:52px; font-family:"Space Mono",monospace; font-size:9px; letter-spacing:1.5px; color:rgba(255,255,255,.28); white-space:nowrap; }
.n8-spots-coord--l { left:-120px; }
.n8-spots-coord--r { right:-120px; }
@media (max-width:1100px) { .n8-spots-coord { display:none; } }

/* Eyebrow flanqué de lignes blanches — style éditorial 90s-2000s */
.n8-spots-eyebrow-wrap { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:20px; }
.n8-spots-eyebrow-rule { display:none; }
.n8-spots-eyebrow { font-family:"Space Mono",monospace; font-size:11px; font-weight:700; color:rgba(255,255,255,0.65); letter-spacing:5px; text-transform:uppercase; background:none; border:none; border-radius:0; padding:0; }

/* Titre : Bebas Neue massif, mot fort en blanc pur sur bleu nuit */
.n8-spots-header h2 { font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(30px,4.8vw,62px); color:#fff; letter-spacing:2px; margin:0 0 30px; text-transform:uppercase; line-height:1.08; white-space:nowrap; }
/* Petits écrans : le titre DOIT pouvoir passer à la ligne (nowrap déborde sous ~380px) */
@media (max-width:600px) { .n8-spots-header h2 { white-space:normal; } }
/* Accent = plate navy légèrement inclinée (coup de tampon d'atlas) */
.n8-spots-header h2 .n8-spots-title-accent { display:inline-block; transform:rotate(-1.4deg); background:#1a2744; padding:2px 14px 0; box-shadow:0 10px 30px rgba(0,0,0,.35); border-radius:3px; }
@media (prefers-reduced-motion:reduce){ .n8-spots-header h2 .n8-spots-title-accent { transform:none; } }
.n8-spots-title-accent { font-style:normal; color:#fff; display:block; background:#1a2744; display:inline; padding:0 6px; }

/* Stats : grands chiffres Bebas blancs + labels Space Mono gris */
.n8-spots-meta { display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; }
.n8-spots-stat { display:flex; flex-direction:column; align-items:center; gap:2px; }
.n8-spots-meta .n8-spots-stat__num { font-family:"Bebas Neue",sans-serif; font-size:21px; color:#fff; letter-spacing:1px; line-height:1; }
.n8-spots-meta .n8-spots-stat__label { font-family:"Space Mono",monospace; font-size:7px; color:rgba(255,255,255,0.38); letter-spacing:2px; text-transform:uppercase; }
.n8-spots-stat__sep { width:1px; height:18px; background:rgba(255,255,255,0.12); align-self:center; }

.n8-spots-lead { font-family:"Inter",sans-serif; font-size:16px; color:rgba(255,255,255,0.72); line-height:1.6; margin:0 0 24px; }
.n8-spots-lead strong { color:#fff; font-weight:700; }

/* ── Search hero (grande barre centrée) ── */
.n8-spots-searchhero { max-width:900px; margin:0 auto 44px; padding:0 24px; position:relative; z-index:2000; }
.n8-spots-section > .n8-spots-searchhero { z-index:2000; }
.n8-spots-searchhero__inner { display:flex; flex-direction:column; gap:16px; align-items:center; }
.n8-search-input-wrap--hero {
    width:100%;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:16px;
    padding:8px 8px 8px 22px;
    gap:12px;
    transition:border-color 0.25s, background 0.25s, box-shadow 0.25s;
    box-shadow:0 12px 40px rgba(0,0,0,0.18);
}
.n8-search-input-wrap--hero:focus-within {
    background:rgba(255,255,255,0.1);
    border-color:rgba(255,255,255,0.4);
    box-shadow:0 16px 50px rgba(0,0,0,0.28);
}
.n8-search-input-wrap--hero .n8-search-input { font-size:17px; padding:18px 0; font-weight:500; }
.n8-search-input-wrap--hero .n8-search-input::placeholder { color:rgba(255,255,255,0.48); font-size:17px; }
.n8-search-input-wrap--hero .n8-search-icon { color:rgba(255,255,255,0.55); flex-shrink:0; }
.n8-search-btn--hero {
    background:#fff !important; color:#0a0f1a !important; cursor:pointer;
    padding:16px 32px; flex-shrink:0; border-radius:10px;
    font-family:"Bebas Neue",sans-serif; font-size:16px; letter-spacing:2px; font-weight:700;
    text-transform:uppercase;
    transition:background 0.2s, transform 0.2s;
}
.n8-search-btn--hero:hover { background:#e5e7eb !important; transform:translateX(2px); }
.n8-filter-chips--hero { justify-content:center; }

/* ── Search + chips (version inline dans la colonne spots) ── */
.n8-spots-searchbar--inline { padding:12px 14px; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; gap:10px; background:rgba(255,255,255,0.02); }
.n8-spots-searchbar--inline .n8-search-input-wrap { min-width:100%; padding:2px 4px 2px 12px; gap:8px; border-radius:10px; }
.n8-spots-searchbar--inline .n8-search-input { font-size:13px; padding:9px 0; }
.n8-spots-searchbar--inline .n8-search-input::placeholder { font-size:13px; }
.n8-spots-searchbar--inline .n8-search-icon { color:rgba(255,255,255,0.45); flex-shrink:0; }
.n8-filter-chips--compact { gap:6px; }
.n8-filter-chips--compact .n8-chip { padding:7px 12px; font-size:12px; border-radius:8px; }

/* ── Search + chips (version large — gardée pour compat sur autres pages) ── */
.n8-spots-searchbar { max-width:1200px; margin:0 auto 36px; padding:0 24px; position:relative; z-index:100; }
.n8-search-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.n8-search-input-wrap { flex:1; min-width:240px; position:relative; display:flex; align-items:center; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:4px 4px 4px 16px; gap:8px; transition:border-color 0.2s, background 0.2s; }
.n8-search-input-wrap:focus-within { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.3); }
.n8-search-input { flex:1; padding:10px 0; background:none; border:none!important; color:#fff; font-family:"Inter",sans-serif; font-size:14px; outline:none!important; box-shadow:none!important; }
.n8-search-input::placeholder { color:rgba(255,255,255,0.35); font-size:14px; }
.n8-search-btn { background:#fff; color:#1a2744; cursor:pointer; padding:10px 14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:8px; transition:background 0.2s, color 0.2s; }
.n8-search-btn:hover { background:#e5e7eb; }
.n8-spot-ac { display:none; position:absolute; top:100%; left:0; right:0; margin-top:8px; background:#141a28; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.12); border-radius:14px; box-shadow:0 20px 50px rgba(0,0,0,0.6); max-height:480px; overflow-y:auto; z-index:9999; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.15) transparent; }
.n8-spot-ac::-webkit-scrollbar { width:6px; }
.n8-spot-ac::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:3px; }
.n8-spot-ac.open { display:block; }
.n8-spot-ac__item { display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer; transition:background 0.15s, transform 0.15s; border-bottom:1px solid rgba(255,255,255,0.04); text-decoration:none; }
.n8-spot-ac__item:last-child { border-bottom:none; }
.n8-spot-ac__item:hover { background:rgba(255,255,255,0.06); transform:translateX(2px); }
.n8-spot-ac__thumb { flex-shrink:0; width:56px; height:56px; border-radius:8px; overflow:hidden; background:linear-gradient(135deg,#1a2744,#0d1117); position:relative; }
.n8-spot-ac__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.n8-spot-ac__thumb--empty::after { content:'📷'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:22px; opacity:0.3; }
.n8-spot-ac__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.n8-spot-ac__name,.n8-spots-ac-name { font-family:"Bebas Neue",sans-serif; font-size:17px; color:#fff; letter-spacing:1px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.n8-spot-ac__sub,.n8-spots-ac-city { font-size:11.5px; color:rgba(255,255,255,0.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.n8-spot-ac__meta { display:flex; align-items:center; gap:6px; margin-top:3px; }
.n8-spot-ac__status { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:rgba(255,255,255,0.82); }
.n8-spot-ac__status-dot { width:6px; height:6px; border-radius:50%; box-shadow:0 0 6px currentColor; display:inline-block; }
.n8-spot-ac__right { display:flex; flex-direction:column; gap:4px; align-items:flex-end; flex-shrink:0; }
.n8-spot-ac__fame,.n8-spots-ac-fame { font-family:"Space Mono",monospace; font-size:10px; background:#fff; color:#0a0f1a; padding:3px 9px; border-radius:999px; letter-spacing:0.5px; font-weight:800; white-space:nowrap; }
.n8-spot-ac__badge,.n8-spots-ac-type { font-family:"Space Mono",monospace; font-size:9px; background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.75); padding:3px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }
.n8-spot-ac__empty,.n8-spots-ac-empty { padding:24px; text-align:center; font-size:13px; color:rgba(255,255,255,0.4); }
.n8-filter-chips { display:flex; gap:8px; flex-wrap:wrap; }
.n8-chip-dropdown { position:relative; }
.n8-chip { display:flex; align-items:center; gap:6px; padding:11px 18px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:10px; color:rgba(255,255,255,0.72); font-family:"Inter",sans-serif; font-size:13px; font-weight:500; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
.n8-chip:hover,.n8-chip.active { background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3); color:#fff; }
.n8-chip-menu { display:none; position:absolute; top:calc(100% + 8px); left:0; min-width:220px; background:#141a28; border:1px solid rgba(255,255,255,0.14); border-radius:12px; padding:8px 0; z-index:1100; max-height:320px; overflow-y:auto; box-shadow:0 16px 40px rgba(0,0,0,0.5); }
.n8-chip-menu.open { display:block; }
.n8-chip-option { padding:11px 20px; color:rgba(255,255,255,0.72); font-family:"Inter",sans-serif; font-size:13px; cursor:pointer; transition:background 0.15s,color 0.15s; }
.n8-chip-option:hover { background:rgba(255,255,255,0.06); color:#fff; }
.n8-chip-option.selected { color:#fff; background:rgba(255,255,255,0.1); font-weight:700; }

/* ── Hero spot iconique ── */
.n8-spots-hero { display:flex; gap:0; max-width:1200px; margin:0 auto 40px; padding:0 24px; }
.n8-spots-hero__img { flex:0 0 55%; position:relative; overflow:hidden; border-radius:14px 0 0 14px; min-height:360px; background:#1a2744; cursor:pointer; }
.n8-spots-hero__img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.7s; }
.n8-spots-hero:hover .n8-spots-hero__img img { transform:scale(1.03); }
.n8-spots-hero__overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.55) 100%); pointer-events:none; }
.n8-spots-hero__iconic { position:absolute; top:20px; left:20px; display:inline-flex; align-items:center; gap:8px; background:#fff; color:#1a2744; padding:8px 14px; border-radius:999px; font-family:"Bebas Neue",sans-serif; font-size:16px; letter-spacing:2px; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,0.3); z-index:3; }
.n8-spots-hero__iconic-txt { font-family:"Space Mono",monospace; font-size:10px; letter-spacing:2px; font-weight:700; }
.n8-spots-hero__body { flex:1; background:linear-gradient(160deg, #1a2744 0%, #0f172a 100%); padding:40px 44px; display:flex; flex-direction:column; justify-content:center; border-radius:0 14px 14px 0; color:#fff; }
.n8-spots-hero__eyebrow { font-family:"Space Mono",monospace; font-size:11px; letter-spacing:4px; color:rgba(255,255,255,0.5); text-transform:uppercase; margin-bottom:12px; font-weight:700; }
.n8-spots-hero__title { font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(32px,4.5vw,52px); color:#fff; letter-spacing:1px; margin:0 0 10px; line-height:1; }
.n8-spots-hero__place { font-family:"Inter",sans-serif; font-size:14px; color:rgba(255,255,255,0.6); letter-spacing:0.5px; margin:0 0 20px; font-weight:500; }
.n8-spots-hero__excerpt { font-family:"Inter",sans-serif; font-size:15px; color:rgba(255,255,255,0.82); line-height:1.6; margin:0 0 28px; }
.n8-spots-hero__cta { display:inline-flex; align-items:center; gap:8px; background:#fff; color:#1a2744!important; padding:14px 28px; border-radius:10px; font-family:"Bebas Neue",sans-serif; font-size:15px; letter-spacing:2.5px; text-decoration:none; font-weight:700; transition:transform 0.2s, background 0.2s; align-self:flex-start; }
.n8-spots-hero__cta:hover { background:#e5e7eb; transform:translateX(4px); }

/* ── Split : liste à gauche + carte à droite ── */
.n8-spots-split { max-width:1440px; margin:0 auto; padding:0 24px; display:flex; gap:18px; height:680px; }
.n8-spots-col-cards { position:relative; flex:0 0 35%; min-width:300px; max-width:460px; display:flex; flex-direction:column; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:14px; overflow:hidden; }
.n8-spots-col-title { display:flex; align-items:baseline; justify-content:space-between; padding:18px 20px 14px; border-bottom:1px solid rgba(255,255,255,0.06); }
.n8-spots-col-eyebrow { font-family:"Space Mono",monospace; font-size:11px; letter-spacing:3px; color:rgba(255,255,255,0.5); text-transform:uppercase; font-weight:700; }
.n8-spots-col-count { font-family:"Bebas Neue",sans-serif; font-size:18px; color:#fff; }
.n8-spots-vcarousel { flex:1; overflow-y:auto; padding:10px; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent; }
.n8-spots-vcarousel::-webkit-scrollbar { width:6px; }
.n8-spots-vcarousel::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:4px; }
.n8-spots-col-map { flex:1; position:relative; border:1px solid rgba(255,255,255,0.08); border-radius:14px; overflow:hidden; background:radial-gradient(ellipse at center, #121a2c 0%, #060a12 80%); }
.n8-spots-globe-wrap { position:relative; width:100%; height:100%; overflow:hidden; }
#spotsGlobeContainer { width:100%; height:100%; cursor:grab; }
#spotsGlobeContainer:active { cursor:grabbing; }
#spotsGlobeContainer canvas { display:block; }

/* ── Desktop : la LISTE NE CAPTURE PLUS LA MOLETTE (fin du scroll-trap) ──
   Problème réglé : avant, souris sur la liste → la molette scrollait la liste (overflow:auto)
   au lieu de la page = gênant. Désormais la liste est `overflow:hidden` → la molette scrolle
   la PAGE normalement, même curseur dessus. La liste affiche le haut du classement ; pour tout
   parcourir, bouton « Parcourir tous les spots » (réactive le scroll À LA DEMANDE, donc voulu)
   + le globe (138 spots cliquables) + la recherche. Mobile garde son scroll tactile (OK au doigt). */
@media (min-width:1025px) {
  .n8-spots-vcarousel { overflow:hidden !important; }
  /* mode "parcourir" explicite : l'utilisateur a cliqué pour scroller la liste → plus de surprise */
  .n8-spots-vcarousel.is-browse { overflow-y:auto !important; overscroll-behavior:contain; }
}
/* Fondu bas + bouton, posés dans la colonne cartes. Masqués en mode parcourir. */
.n8-spots-browse {
  position:absolute; left:0; right:0; bottom:0; z-index:4; pointer-events:none;
  padding:34px 10px 10px; display:flex; justify-content:center;
  background:linear-gradient(to bottom, rgba(13,18,29,0) 0%, #0d121d 62%);
  border-radius:0 0 14px 14px;
}
.n8-spots-vcarousel.is-browse + .n8-spots-browse { background:none; padding-top:10px; }
.n8-spots-browse__btn {
  pointer-events:auto; display:inline-flex; align-items:center; gap:7px;
  font-family:"Space Mono",monospace; font-size:11px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:#fff; background:#1a2744; border:1px solid #2a3a5c;
  border-radius:9px; padding:9px 16px; cursor:pointer; transition:background .15s;
}
.n8-spots-browse__btn:hover { background:#2a3a5c; }
.n8-spots-browse__btn svg { width:13px; height:13px; transition:transform .2s; }
.n8-spots-vcarousel.is-browse + .n8-spots-browse .n8-spots-browse__btn svg { transform:rotate(180deg); }
/* Mobile : la liste garde son scroll tactile (acceptable au doigt) → bouton inutile */
@media (max-width:1024px) { .n8-spots-browse { display:none !important; } }
.n8-spots-globe-arc { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:10; }

/* Carte 2D (Leaflet dark_nolabels) — encart minimap au zoom fort puis plein cadre au zoom ville
   Rues rendues blanches via filter CSS (cohérent avec contours pays) */
.n8-spots-flatmap {
    position:absolute;
    top:14px; left:14px;
    width:320px; height:220px;
    z-index:525;
    background:#0a0f1a;
    border:1px solid rgba(255,255,255,0.18);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,0.45);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    pointer-events:none;
    transition:opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.35s, border-radius 0.4s;
}
.n8-spots-flatmap.is-open {
    opacity:1 !important; visibility:visible !important;
    transform:translateY(0); pointer-events:auto;
    transition:opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s, border-radius 0.4s;
}
/* Zoom ville → minimap remplit toute la zone du globe (fusion visuelle) */
.n8-spots-flatmap.is-large {
    top:0 !important; left:0 !important;
    width:100% !important; height:100% !important;
    border-radius:14px !important;
    border-color:rgba(255,255,255,0.08) !important;
}
/* Tuiles satellite Esri World Imagery — rendu photoréaliste type Google Satellite, pas de filter */
.n8-spots-flatmap .leaflet-tile { filter:none; }
.n8-spots-flatmap { background:#0a0f1a; }
/* Panneau de contrôle de la minimap (Retour + Zoom +/−) — visible en permanence, au-dessus des tuiles */
.n8-flatmap-controls {
    position:absolute; top:8px; left:10px; z-index:600;
    display:flex; align-items:center; gap:6px;
    font-family:"Space Mono",monospace;
}
.n8-flatmap-btn {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(0,0,0,0.72); backdrop-filter:blur(8px);
    color:#fff; border:1px solid rgba(255,255,255,0.12);
    border-radius:5px; padding:5px 9px;
    font-family:inherit; font-size:10px; font-weight:700;
    letter-spacing:1.2px; text-transform:uppercase; line-height:1;
    cursor:pointer; transition:background 0.15s, transform 0.15s, border-color 0.15s;
    pointer-events:auto;
}
.n8-flatmap-btn:hover { background:rgba(26,39,68,0.9); border-color:rgba(255,255,255,0.28); }
.n8-flatmap-btn:active { transform:scale(0.96); }
.n8-flatmap-btn__icon { font-size:14px; font-weight:400; letter-spacing:0; }
.n8-flatmap-btn__label { font-size:10px; }
.n8-flatmap-btn__label em { font-style:normal; opacity:0.6; font-size:9px; }
.n8-flatmap-btn--sq {
    width:28px; height:28px; padding:0;
    justify-content:center;
    font-size:16px; letter-spacing:0;
}
.n8-flatmap-zoom { display:flex; gap:4px; }

/* ── Panneau temps de trajet (à pied / voiture / km) sur la flatmap plein cadre ──
   Apparaît à la sélection d'un spot. Distance à vol d'oiseau + route OSRM (gratuit). */
.n8-flatmap-eta {
    position:absolute; left:12px; bottom:12px; z-index:620; width:258px; max-width:calc(100% - 24px);
    background:rgba(10,15,26,0.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,0.1); border-radius:11px; padding:9px 11px; color:#fff;
    box-shadow:0 12px 30px rgba(0,0,0,0.45);
    opacity:0; transform:translateY(10px); pointer-events:none;
    transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1);
    font-family:"Inter",sans-serif;
}
.n8-flatmap-eta.is-open { opacity:1; transform:none; pointer-events:auto; }
.n8-fm-eta__head { display:flex; flex-direction:column; gap:1px; margin-bottom:7px; }
.n8-fm-eta__name { font-family:"Bebas Neue",sans-serif; font-size:18px; letter-spacing:.5px; line-height:1; }
.n8-fm-eta__place { font-family:"Space Mono",monospace; font-size:9px; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.55); }
.n8-fm-eta__stats { display:flex; gap:6px; }
.n8-fm-eta__stat { flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:2px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:6px 8px; min-width:0; }
.n8-fm-eta__ic { color:#5fd6c4; display:inline-flex; }
.n8-fm-eta__ic svg { width:17px; height:17px; }
.n8-fm-eta__t { font-family:"Bebas Neue",sans-serif; font-size:17px; line-height:1; letter-spacing:.5px; white-space:nowrap; }
.n8-fm-eta__l { font-family:"Space Mono",monospace; font-size:8px; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.5); }
.n8-fm-eta__bird { margin-top:6px; font-family:"Space Mono",monospace; font-size:9px; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.45); }
.n8-fm-eta__geo, .n8-fm-eta__fit {
    width:100%; display:inline-flex; align-items:center; justify-content:center; gap:6px;
    background:#1a2744; color:#fff; border:1px solid #2a3a5c; border-radius:8px; padding:7px 11px;
    font-family:"Space Mono",monospace; font-size:9.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    cursor:pointer; transition:background .15s;
}
.n8-fm-eta__geo:hover, .n8-fm-eta__fit:hover { background:#2a3a5c; }
.n8-fm-eta__fit { margin-top:7px; background:transparent; }
.n8-fm-eta__go {
    margin-top:7px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:7px;
    background:#fff; color:#1a2744; border-radius:8px; padding:8px 11px; text-decoration:none;
    font-family:"Space Mono",monospace; font-size:10.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
    transition:background .15s;
}
.n8-fm-eta__go:hover { background:#e5e7eb; }
.n8-fm-eta__go svg { width:14px; height:14px; }

/* Pins flatmap : spot (blanc) + toi (teal) avec pulse */
.n8-fm-pin { position:relative; width:100%; height:100%; }
.n8-fm-pin__dot, .n8-fm-pin__pulse { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:13px; height:13px; border-radius:50%; }
.n8-fm-pin__dot { z-index:2; }
.n8-fm-pin__pulse { z-index:1; animation:n8FmPulse 2s ease-out infinite; }
.n8-fm-pin--spot .n8-fm-pin__dot { background:#fff; border:3px solid #1a2744; box-shadow:0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,.6); }
.n8-fm-pin--spot .n8-fm-pin__pulse { background:rgba(255,255,255,.5); }
.n8-fm-pin--me .n8-fm-pin__dot { background:#5fd6c4; border:2px solid #0a0f1a; box-shadow:0 0 0 2px rgba(95,214,196,.6); }
.n8-fm-pin--me .n8-fm-pin__pulse { background:rgba(95,214,196,.45); }
.n8-fm-pin__lbl { position:absolute; top:-17px; left:50%; transform:translateX(-50%); font-family:"Space Mono",monospace; font-size:8px; font-weight:700; letter-spacing:1px; color:#5fd6c4; background:rgba(10,15,26,.85); padding:2px 5px; border-radius:4px; white-space:nowrap; }
@keyframes n8FmPulse { 0% { width:13px; height:13px; opacity:.7; } 100% { width:44px; height:44px; opacity:0; } }
/* Pointillés ANIMÉS du trajet/schéma (défilent toi→spot). dashArray '2 10' → période 12, offset -24 = boucle sans couture */
.n8-fm-conndash { animation:n8FmDash .9s linear infinite; }
@keyframes n8FmDash { to { stroke-dashoffset:-24; } }
@media (prefers-reduced-motion: reduce) { .n8-fm-conndash { animation:none; } }

@media (max-width:768px) {
    /* Plein cadre aussi sur mobile — l'ancienne minimap 180×130 était illisible (retour David) */
    .n8-spots-flatmap { width:100%; height:100%; top:0; left:0; border-radius:14px; }
    .n8-flatmap-eta { left:10px; right:10px; bottom:10px; width:auto; padding:11px 13px; }
    .n8-flatmap-controls { top:6px; left:6px; gap:4px; flex-wrap:wrap; max-width:calc(100% - 12px); }
    .n8-flatmap-btn { padding:4px 7px; font-size:9px; letter-spacing:1px; }
    .n8-flatmap-btn__label em { display:none; }
    .n8-flatmap-btn--sq { width:24px; height:24px; font-size:14px; }
}
.n8-flatmap-tooltip {
    background:rgba(14,21,33,0.92) !important; color:#fff !important;
    border:1px solid rgba(255,255,255,0.12) !important;
    font-family:"Bebas Neue",sans-serif !important; font-size:13px !important;
    letter-spacing:1px !important; padding:5px 10px !important;
    box-shadow:0 4px 14px rgba(0,0,0,0.4) !important;
}
.n8-flatmap-tooltip::before { display:none !important; }
.n8-spots-map-hint { position:absolute; bottom:14px; left:72px; display:flex; align-items:center; gap:8px; background:rgba(0,0,0,0.55); backdrop-filter:blur(8px); color:rgba(255,255,255,0.8); font-family:"Space Mono",monospace; font-size:11px; letter-spacing:1px; padding:7px 14px; border-radius:8px; pointer-events:none; z-index:500; max-width:calc(100% - 86px); }
.n8-spots-map-hint svg { flex:none; opacity:.75; }
@media (max-width:768px) { .n8-spots-map-hint { display:none; } }

/* Crédit couche monde OSM (attribution ODbL obligatoire) — discret, coin bas droit du globe */
.n8-spots-osm-credit { position:absolute; bottom:6px; right:10px; font-family:"Inter",sans-serif; font-size:10px; color:rgba(255,255,255,0.38); z-index:500; pointer-events:auto; }
.n8-spots-osm-credit a { color:rgba(255,255,255,0.55); text-decoration:underline; }
.n8-spots-osm-credit a:hover { color:rgba(255,255,255,0.8); }
@media (max-width:768px) { .n8-spots-osm-credit { font-size:9px; bottom:4px; right:8px; } }

/* Empty state liste cards quand aucun résultat filtre */
.n8-spots-empty {
    padding:40px 20px; text-align:center; font-family:"Inter",sans-serif;
    color:rgba(255,255,255,0.5); font-size:13px; line-height:1.6;
}
.n8-spots-empty strong { display:block; color:#fff; font-family:"Bebas Neue",sans-serif; font-size:18px; letter-spacing:1px; margin-bottom:8px; }
.n8-spots-empty .n8-spots-empty__reset {
    display:inline-block; margin-top:14px; padding:8px 18px;
    background:rgba(255,255,255,0.1); color:#fff !important; border:1px solid rgba(255,255,255,0.2);
    border-radius:8px; font-family:"Space Mono",monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
    cursor:pointer; transition:background 0.2s;
}
.n8-spots-empty .n8-spots-empty__reset:hover { background:rgba(255,255,255,0.18); }

/* ── Boutons zoom globe (bas-gauche du conteneur carte) ── */
.n8-globe-zoom {
    position:absolute; left:14px; top:14px; z-index:520;
    display:flex; flex-direction:column; gap:6px;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.12); border-radius:10px; padding:6px;
    box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.n8-globe-zoom__btn {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    background:transparent; color:#fff; cursor:pointer; border-radius:7px;
    transition:background 0.18s, transform 0.18s;
}
.n8-globe-zoom__btn:hover { background:rgba(255,255,255,0.15); transform:scale(1.05); }
.n8-globe-zoom__btn:active { transform:scale(0.95); }
/* REPLAY TEMPOREL — bouton ▶ : contour éclairé quand le mode est actif (convention Savoir) */
.n8-globe-zoom__btn--replay.is-on { border:1px solid rgba(95,214,196,0.75); color:#5fd6c4; background:rgba(95,214,196,0.10); }
/* Barre du replay — visible UNIQUEMENT pendant le mode ; pause + croix vivent ici */
.n8-globe-replay {
    position:absolute; left:12px; right:12px; bottom:12px; z-index:12;
    display:flex; align-items:center; gap:10px;
    background:rgba(10,15,26,0.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:8px 12px;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.n8-globe-replay[hidden] { display:none; }
.n8-grpl__btn {
    width:34px; height:34px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    background:transparent; border:1px solid rgba(255,255,255,0.14); border-radius:8px;
    color:#fff; cursor:pointer;
}
.n8-grpl__btn:hover { background:rgba(255,255,255,0.12); }
.n8-grpl__btn svg { width:16px; height:16px; }
.n8-grpl__x { color:#ff6a5e; border-color:rgba(255,106,94,0.45); }
.n8-grpl__x:hover { background:rgba(255,106,94,0.15); }
.n8-grpl__slider { flex:1; min-width:0; accent-color:#5fd6c4; }
.n8-grpl__info { display:flex; flex-direction:column; align-items:flex-end; min-width:104px; line-height:1.25; }
.n8-grpl__date { font-family:'Space Mono',monospace; font-size:12px; color:#5fd6c4; }
.n8-grpl__cnt { font-family:'Space Mono',monospace; font-size:9.5px; color:rgba(255,255,255,0.55); }
@media (max-width:640px){ .n8-grpl__info { min-width:84px; } .n8-globe-replay { left:8px; right:8px; bottom:8px; padding:7px 9px; } }
.n8-globe-zoom__btn + .n8-globe-zoom__btn { border-top:1px solid rgba(255,255,255,0.06); margin-top:2px; padding-top:2px; }
.n8-globe-zoom__btn--planet {
    color:rgba(255,255,255,0.65);
    margin-bottom:4px;
    padding-bottom:6px;
    border-bottom:1px solid rgba(255,255,255,0.12) !important;
    border-top:none !important;
}
.n8-globe-zoom__btn--planet:hover { color:#fff; background:rgba(255,255,255,0.1); }

/* ── Navbar hiérarchique — breadcrumb compact en UNE SEULE ligne ── */
.n8-spots-navbar {
    max-width:1440px; margin:0 auto 18px; padding:0 24px;
    display:flex; flex-direction:row; flex-wrap:nowrap;
    align-items:center; gap:10px;
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.15) transparent;
}
.n8-spots-navbar::-webkit-scrollbar { height:4px; }
.n8-spots-navbar::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:2px; }
.n8-spots-navbar:empty { display:none; }

/* Override : les 3 ribbons deviennent des segments de breadcrumb INLINE, pas stackés */
.n8-spots-navbar .n8-globe-continents,
.n8-spots-navbar .n8-globe-countries,
.n8-spots-navbar .n8-globe-cities {
    position:static; top:auto; right:auto; left:auto;
    max-width:none; width:auto;
    z-index:auto;
    flex-shrink:0;
    box-shadow:none;
    /* Force l'affichage même sans classe is-open (breadcrumb mode) */
    max-height:none; opacity:1; visibility:visible; padding:5px;
    transition:max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Quand la barre vide (pas de pays/villes rendus), on la masque */
.n8-spots-navbar .n8-globe-countries:empty,
.n8-spots-navbar .n8-globe-cities:empty { display:none; }

/* Chevron séparateur entre niveaux */
.n8-spots-navbar .n8-globe-countries:not(:empty)::before,
.n8-spots-navbar .n8-globe-cities:not(:empty)::before {
    content:'›'; color:rgba(255,255,255,0.35); font-size:20px; font-weight:400;
    margin-right:4px; display:inline-flex; align-items:center; padding-left:2px;
}

/* Collapse : cache tous les boutons SAUF .active, ajoute un indicateur cliquable pour rewind */
.n8-spots-navbar .n8-globe-continents.is-collapsed > .n8-globe-continent:not(.active),
.n8-spots-navbar .n8-globe-countries.is-collapsed > .n8-globe-country:not(.active),
.n8-spots-navbar .n8-globe-cities.is-collapsed > .n8-globe-city:not(.active) { display:none; }

.n8-spots-navbar .n8-globe-continents.is-collapsed > .n8-globe-continent.active,
.n8-spots-navbar .n8-globe-countries.is-collapsed > .n8-globe-country.active,
.n8-spots-navbar .n8-globe-cities.is-collapsed > .n8-globe-city.active {
    position:relative; padding-right:24px;
}
.n8-spots-navbar .n8-globe-continents.is-collapsed > .n8-globe-continent.active::after,
.n8-spots-navbar .n8-globe-countries.is-collapsed > .n8-globe-country.active::after,
.n8-spots-navbar .n8-globe-cities.is-collapsed > .n8-globe-city.active::after {
    content:'▾'; position:absolute; right:8px; top:50%; transform:translateY(-50%);
    font-size:10px; opacity:0.55;
}

/* Quand collapsed → le conteneur se réduit à la taille du seul pill visible */
.n8-spots-navbar .n8-globe-continents.is-collapsed,
.n8-spots-navbar .n8-globe-countries.is-collapsed,
.n8-spots-navbar .n8-globe-cities.is-collapsed {
    padding:4px;
}

/* ── Boutons continents (haut-droite compact, ne mange pas le globe) ── */
.n8-globe-continents {
    position:absolute; top:14px; right:14px; z-index:520;
    display:flex; flex-wrap:nowrap; gap:4px;
    max-width:calc(100% - 28px);
    overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.1); border-radius:10px; padding:5px;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.n8-globe-continents::-webkit-scrollbar { display:none; }
.n8-globe-continent {
    position:relative;
    background:transparent; color:rgba(255,255,255,0.72); cursor:pointer;
    padding:7px 12px; border-radius:6px;
    font-family:"Space Mono",monospace; font-size:10px; font-weight:700;
    letter-spacing:1.3px; text-transform:uppercase;
    border:1px solid transparent;
    transition:background 0.22s ease, color 0.22s ease, border-color 0.22s ease,
               box-shadow 0.3s ease, transform 0.2s ease;
    white-space:nowrap; flex-shrink:0;
}
.n8-globe-continent:hover {
    background:rgba(255,255,255,0.14); color:#fff;
    border-color:rgba(255,255,255,0.35);
    box-shadow:0 0 0 1px rgba(255,255,255,0.08),
               0 0 14px rgba(255,255,255,0.22),
               0 3px 10px rgba(0,0,0,0.35);
    transform:translateY(-1px);
}
.n8-globe-continent:active { transform:translateY(0) scale(0.97); }
.n8-globe-continent.active {
    background:#fff; color:#0a0f1a;
    box-shadow:0 0 20px rgba(255,255,255,0.35), 0 2px 8px rgba(0,0,0,0.4);
}
.n8-globe-continent.active:hover {
    background:#fff; color:#0a0f1a;
    box-shadow:0 0 24px rgba(255,255,255,0.5), 0 2px 10px rgba(0,0,0,0.4);
}

/* ── Ribbon pays + villes (alignés à droite, compacts) ── */
.n8-globe-countries, .n8-globe-cities {
    position:absolute; right:14px; z-index:515;
    max-width:calc(100% - 28px);
    display:flex; flex-wrap:nowrap; gap:5px;
    overflow-x:auto; overflow-y:hidden;
    padding:5px;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.1); border-radius:10px;
    max-height:0; opacity:0; visibility:hidden; padding-top:0; padding-bottom:0;
    transition:max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s, padding 0.3s, visibility 0s 0.3s;
    scrollbar-width:none;
}
.n8-globe-countries::-webkit-scrollbar, .n8-globe-cities::-webkit-scrollbar { display:none; }
.n8-globe-countries { top:60px; }
.n8-globe-cities { top:106px; }
.n8-globe-countries.is-open, .n8-globe-cities.is-open {
    max-height:44px; opacity:1; visibility:visible; padding-top:5px; padding-bottom:5px;
    transition:max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s, padding 0.3s, visibility 0s 0s;
    box-shadow:0 8px 20px rgba(0,0,0,0.4);
}
.n8-globe-country, .n8-globe-city {
    position:relative;
    flex-shrink:0; display:inline-flex; align-items:center; gap:5px;
    background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.8);
    padding:5px 11px; border-radius:6px; cursor:pointer;
    font-family:"Inter",sans-serif; font-size:11.5px; font-weight:500;
    border:1px solid transparent;
    transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
               box-shadow 0.3s ease, transform 0.2s ease;
    white-space:nowrap;
}
.n8-globe-country:hover, .n8-globe-city:hover {
    background:rgba(255,255,255,0.22); color:#fff;
    border-color:rgba(255,255,255,0.4);
    box-shadow:0 0 16px rgba(255,255,255,0.25),
               0 3px 10px rgba(0,0,0,0.4);
    transform:translateY(-1px);
}
.n8-globe-country:active, .n8-globe-city:active { transform:translateY(0) scale(0.97); }
.n8-globe-country.active, .n8-globe-city.active {
    background:#fff; color:#0a0f1a; font-weight:700;
    box-shadow:0 0 18px rgba(255,255,255,0.4), 0 2px 8px rgba(0,0,0,0.4);
}
.n8-globe-country.active:hover, .n8-globe-city.active:hover {
    background:#fff; color:#0a0f1a;
    box-shadow:0 0 24px rgba(255,255,255,0.55), 0 2px 10px rgba(0,0,0,0.4);
}
.n8-globe-country__cnt, .n8-globe-city__cnt {
    font-family:"Space Mono",monospace; font-size:9.5px; font-weight:700;
    background:rgba(255,255,255,0.1); color:inherit; padding:1px 5px; border-radius:3px;
}
.n8-globe-country.active .n8-globe-country__cnt,
.n8-globe-city.active .n8-globe-city__cnt { background:rgba(10,15,26,0.15); }

@media (max-width:768px) {
    .n8-globe-continents { top:10px; right:10px; padding:4px; gap:4px; }
    .n8-globe-continent { padding:6px 10px; font-size:10px; letter-spacing:1px; }
    .n8-globe-countries { top:58px; right:10px; left:10px; }
    .n8-globe-country { padding:5px 10px; font-size:11px; }
    .n8-globe-zoom { left:10px; top:14px; }
    .n8-globe-zoom__btn { width:32px; height:32px; }
}

/* ── Cards verticales ── */
.n8-vcard { display:flex; gap:14px; padding:12px; border-radius:10px; cursor:pointer; transition:background 0.2s, transform 0.2s; border:1px solid transparent; margin-bottom:4px; text-decoration:none; }
.n8-vcard:hover { background:rgba(255,255,255,0.05); transform:translateX(3px); }
.n8-vcard.highlighted { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.15); }
.n8-vcard.dimmed { opacity:0.35; }
.n8-vcard__img { width:86px; height:86px; border-radius:8px; overflow:hidden; flex-shrink:0; background:linear-gradient(135deg,#1a2744,#0d1117); position:relative; }
.n8-vcard__img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s; visibility:visible!important; opacity:1!important; }
.n8-vcard:hover .n8-vcard__img img { transform:scale(1.08); }
.n8-vcard__iconic { position:absolute; bottom:5px; left:5px; background:rgba(255,255,255,0.95); color:#1a2744; font-size:9px; font-weight:800; padding:2px 6px; border-radius:4px; letter-spacing:0.5px; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,0.3); }
.n8-vcard__info { flex:1; display:flex; flex-direction:column; justify-content:center; min-width:0; gap:3px; }
.n8-vcard__name { font-family:"Bebas Neue",sans-serif; font-size:17px; color:#fff; letter-spacing:1px; line-height:1.1; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.n8-vcard__city { font-size:12px; color:rgba(255,255,255,0.55); margin:0; font-family:"Inter",sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.n8-vcard__row { display:flex; align-items:center; gap:10px; margin-top:4px; }
.n8-vcard__type { font-family:"Space Mono",monospace; font-size:9px; background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.8); padding:3px 8px; border-radius:3px; text-transform:uppercase; letter-spacing:1px; font-weight:700; }
.n8-vcard__diff { display:flex; gap:3px; }
.n8-vcard__dot { display:inline-block; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,0.18); }
.n8-vcard__dot.active { background:#fff; }

/* ── CTA final ── */
.n8-spots-cta-wrap { max-width:1200px; margin:48px auto 0; padding:0 24px; }
.n8-spots-cta-box { background:linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:32px 28px; text-align:center; }
.n8-spots-cta-title { font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(20px,2.5vw,28px); color:#fff; letter-spacing:1.5px; margin:0 0 6px; text-transform:uppercase; }
.n8-spots-cta-sub { font-family:"Inter",sans-serif; font-size:14px; color:rgba(255,255,255,0.6); margin:0 0 20px; }
.n8-spots-cta { display:inline-block; padding:14px 36px; background:#fff; color:#1a2744!important; border-radius:10px; font-family:"Bebas Neue",sans-serif; font-size:15px; letter-spacing:2.5px; text-decoration:none; font-weight:700; transition:transform 0.2s, background 0.2s; }
.n8-spots-cta:hover { background:#e5e7eb; transform:translateY(-2px); }

/* ── Preview hover spot — zone fixe en haut à droite du globe (pendant de la minimap top-left) ── */
.n8-spot-hover-tooltip {
    position:absolute; top:14px; right:14px; width:300px;
    max-height:calc(100% - 28px); overflow-y:auto;
    z-index:2600; /* au-dessus de la flatmap (2000) : la fiche au survol marche aussi sur la carte plate */
    background:rgba(14,21,33,0.94); color:#fff;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:12px;
    box-shadow:0 20px 45px rgba(0,0,0,0.55), 0 6px 14px rgba(0,0,0,0.3);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.22s;
    pointer-events:none;
    font-family:"Inter",sans-serif;
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.15) transparent;
}
.n8-spot-hover-tooltip::-webkit-scrollbar { width:4px; }
.n8-spot-hover-tooltip::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.2); border-radius:2px; }
.n8-spot-hover-tooltip.is-open {
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
}
@media (max-width:900px) {
    .n8-spot-hover-tooltip { width:calc(100% - 28px); max-width:300px; }
}
.n8-hover-tt__img { position:relative; width:100%; height:175px; background:#1a2744; overflow:hidden; }
.n8-hover-tt__img img { width:100%; height:100%; object-fit:cover; display:block; }
.n8-hover-tt__iconic {
    position:absolute; top:10px; left:10px;
    background:#fff; color:#0a0f1a;
    padding:4px 10px; border-radius:999px;
    font-family:"Bebas Neue",sans-serif; font-size:12px; letter-spacing:1.5px; font-weight:700;
    box-shadow:0 4px 10px rgba(0,0,0,0.3);
}
.n8-hover-tt__body { padding:16px 18px 14px; }
.n8-hover-tt__title {
    font-family:"Bebas Neue",sans-serif; font-size:22px; color:#fff;
    letter-spacing:1px; line-height:1.1; margin:0 0 4px;
    text-transform:uppercase;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.n8-hover-tt__place {
    font-size:11.5px; color:rgba(255,255,255,0.55); letter-spacing:0.3px;
    margin:0 0 12px; font-weight:500;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.n8-hover-tt__badges { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; align-items:center; }
.n8-hover-tt__badge {
    display:inline-flex; align-items:center; gap:5px;
    padding:3px 9px; border-radius:999px;
    font-family:"Space Mono",monospace; font-size:9.5px; font-weight:700;
    letter-spacing:1px; text-transform:uppercase;
    background:rgba(255,255,255,0.08); color:#fff;
    border:1px solid rgba(255,255,255,0.08);
    white-space:nowrap;
}
.n8-hover-tt__badge--diff { background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.8); border:none; padding:3px 7px; }
.n8-hover-tt__badge--note { background:#fff; color:#0a0f1a; font-weight:800; border:none; }
.n8-hover-tt__badge--free { background:rgba(57,255,20,0.12); color:#39ff14; border:none; }
.n8-hover-tt__badge--paid { background:rgba(255,255,255,0.08); color:#ffc861; border:none; }
.n8-hover-tt__dots { display:inline-flex; gap:2px; margin-left:4px; }
.n8-hover-tt__dot { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,0.2); display:inline-block; }
.n8-hover-tt__dot.active { background:#fff; }
.n8-hover-tt__status {
    display:flex; align-items:center; gap:7px; margin-bottom:10px;
    padding:7px 10px; background:rgba(255,255,255,0.04);
    border-radius:7px;
}
.n8-hover-tt__status-dot { width:7px; height:7px; border-radius:50%; background:#00ff88; box-shadow:0 0 6px rgba(0,255,136,0.6); flex-shrink:0; }
.n8-hover-tt__status.is-limited .n8-hover-tt__status-dot { background:#f97316; box-shadow:0 0 6px rgba(249,115,22,0.6); }
.n8-hover-tt__status-txt { font-size:11.5px; font-weight:600; color:#fff; letter-spacing:0.2px; }
.n8-hover-tt__desc {
    font-size:12.5px; color:rgba(255,255,255,0.75); line-height:1.5;
    margin:0 0 10px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.n8-hover-tt__hint {
    font-family:"Space Mono",monospace; font-size:10px; color:rgba(255,255,255,0.35);
    letter-spacing:1.5px; text-transform:uppercase; padding-top:10px;
    border-top:1px solid rgba(255,255,255,0.05);
}
@media (max-width:768px) { .n8-spot-hover-tooltip { display:none; } }

/* ── Panel latéral spot détail (slide from right) ──────────────────────── */
.n8-spot-panel {
    position:fixed; inset:0; z-index:9999;
    pointer-events:none; visibility:hidden;
    transition:visibility 0s 0.35s;
}
.n8-spot-panel.is-open {
    pointer-events:auto; visibility:visible;
    transition:visibility 0s 0s;
}
.n8-spot-panel__backdrop {
    position:absolute; inset:0;
    background:rgba(4,8,14,0.75);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    opacity:0; transition:opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.n8-spot-panel.is-open .n8-spot-panel__backdrop { opacity:1; }
.n8-spot-panel__inner {
    position:absolute; top:0; right:0; bottom:0;
    width:min(520px, 100%);
    background:#0e1521;
    color:#fff;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow:-20px 0 60px rgba(0,0,0,0.5);
    scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.15) transparent;
}
.n8-spot-panel__inner::-webkit-scrollbar { width:6px; }
.n8-spot-panel__inner::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:4px; }
.n8-spot-panel.is-open .n8-spot-panel__inner { transform:translateX(0); }

.n8-spot-panel__close {
    position:absolute; top:18px; right:18px; z-index:5;
    width:44px; height:44px; border-radius:50%;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(12px);
    color:#fff; cursor:pointer; border:1px solid rgba(255,255,255,0.14);
    display:flex; align-items:center; justify-content:center;
    transition:background 0.2s, transform 0.2s;
}
.n8-spot-panel__close:hover { background:rgba(0,0,0,0.8); transform:scale(1.06); }

.n8-spot-panel__media { position:relative; width:100%; aspect-ratio:4/3; background:#1a2744; overflow:hidden; }
.n8-spot-panel__media img { width:100%; height:100%; object-fit:cover; display:block; }
.n8-spot-panel__media-fade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,21,33,0) 0%, rgba(14,21,33,0.1) 60%, rgba(14,21,33,0.92) 100%); pointer-events:none; }
/* Attribution CC (Commons/Flickr) — discrète en bas à droite de la photo, obligatoire en CC BY/BY-SA */
.n8-spot-panel__imgcredit { position:absolute; right:8px; bottom:6px; z-index:2; font-family:"Inter",sans-serif; font-size:9px; line-height:1.2; color:rgba(255,255,255,0.55); text-shadow:0 1px 2px rgba(0,0,0,0.6); pointer-events:none; max-width:80%; text-align:right; }
.n8-spot-panel__iconic {
    position:absolute; top:18px; left:18px;
    display:inline-flex; align-items:center; gap:6px;
    background:#fff; color:#0a0f1a; padding:7px 13px; border-radius:999px;
    font-family:"Bebas Neue",sans-serif; font-size:14px; letter-spacing:2px; font-weight:700;
    box-shadow:0 6px 18px rgba(0,0,0,0.35);
}

.n8-spot-panel__body { padding:28px 32px 36px; }
.n8-spot-panel__title {
    font-family:"Bebas Neue",Impact,sans-serif;
    font-size:clamp(30px,3.5vw,42px); color:#fff; letter-spacing:1px;
    margin:0 0 8px; line-height:1; text-transform:uppercase;
}
.n8-spot-panel__place { font-family:"Inter",sans-serif; font-size:14px; color:rgba(255,255,255,0.55); letter-spacing:0.5px; margin:0 0 20px; font-weight:500; }
.n8-spot-panel__badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.n8-spot-panel__badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 14px; border-radius:999px;
    font-family:"Space Mono",monospace; font-size:11px; font-weight:700;
    letter-spacing:1.5px; text-transform:uppercase;
}
.n8-spot-panel__badge--type { background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.15); }
.n8-spot-panel__badge--diff { background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.85); }
.n8-spot-panel__badge--note { background:#fff; color:#0a0f1a; font-weight:800; }

.n8-spot-panel__status { display:flex; align-items:center; gap:10px; margin-bottom:22px; padding:12px 16px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:10px; }
.n8-spot-panel__status-dot { width:10px; height:10px; border-radius:50%; background:#00ff88; box-shadow:0 0 10px rgba(0,255,136,0.5); flex-shrink:0; }
.n8-spot-panel__status.is-limited .n8-spot-panel__status-dot { background:#f97316; box-shadow:0 0 10px rgba(249,115,22,0.5); }
.n8-spot-panel__status.is-closed .n8-spot-panel__status-dot { background:#ff5c5c; box-shadow:0 0 10px rgba(255,92,92,0.5); }
.n8-vcard__flag { font-size:12px; line-height:1; margin-right:2px; }
.n8-spot-panel__status-txt { font-family:"Inter",sans-serif; font-size:13px; font-weight:600; color:#fff; letter-spacing:0.3px; }

.n8-spot-panel__desc { font-family:"Inter",sans-serif; font-size:15px; line-height:1.7; color:rgba(255,255,255,0.82); margin:0 0 26px; }
/* Histoire du spot — bloc éditorial de la fiche (fail-soft, masqué si meta absente) */
.n8-spot-panel__history { margin:0 0 26px; padding:16px 18px; background:rgba(255,255,255,0.04); border-left:2px solid rgba(255,255,255,0.25); border-radius:0 10px 10px 0; }
.n8-spot-panel__history-kicker { font-family:"Space Mono",monospace; font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.5); margin:0 0 8px; }
.n8-spot-panel__history-txt { font-family:"Inter",sans-serif; font-size:14px; line-height:1.65; color:rgba(255,255,255,0.78); margin:0; }
/* ── Avis communautaires (panel spot) ── */
.n8-spot-reviews { margin:0 0 26px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.1); }
.n8-spot-reviews__head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 12px; }
.n8-spot-reviews__kicker { font-family:"Space Mono",monospace; font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,0.5); margin:0; }
.n8-spot-reviews__avg { font-family:"Space Mono",monospace; font-size:12px; color:#ffd23a; white-space:nowrap; }
.n8-spot-reviews__empty { font-family:"Inter",sans-serif; font-size:13.5px; color:rgba(255,255,255,0.55); margin:0 0 14px; }
.n8-spot-review { padding:10px 0; border-bottom:1px dashed rgba(255,255,255,0.1); }
.n8-spot-review:last-child { border-bottom:none; }
.n8-spot-review__head { font-family:"Space Mono",monospace; font-size:11px; color:rgba(255,255,255,0.6); margin:0 0 5px; }
.n8-spot-review__head::first-line { color:#ffd23a; }
.n8-spot-review__comment { font-family:"Inter",sans-serif; font-size:14px; line-height:1.55; color:rgba(255,255,255,0.85); margin:0 0 4px; }
.n8-spot-review__tip { font-family:"Inter",sans-serif; font-size:12.5px; line-height:1.5; color:#8fd8ff; margin:4px 0 0; padding:6px 10px; background:rgba(143,216,255,0.08); border-radius:7px; }
.n8-spot-reviews__cta { display:inline-flex; align-items:center; margin-top:12px; padding:10px 18px; background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.3); border-radius:9px; font-family:"Space Mono",monospace; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:background .15s,border-color .15s; }
.n8-spot-reviews__cta:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.5); }
.n8-spot-review-form { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.n8-spot-review-form__stars { display:flex; gap:4px; }
.n8-spot-review-form__stars button { background:none; border:none; padding:2px 4px; font-size:26px; line-height:1; color:rgba(255,255,255,0.25); cursor:pointer; transition:color .12s, transform .12s; }
.n8-spot-review-form__stars button:hover { transform:scale(1.15); }
.n8-spot-review-form__stars button.is-on { color:#ffd23a; }
.n8-spot-review-form textarea, .n8-spot-review-form input[type=text] { background:#fff; color:#0a0f1a; border:1px solid #cfd6e2; border-radius:9px; padding:11px 13px; font-family:"Inter",sans-serif; font-size:14px; outline:none; width:100%; }
.n8-spot-review-form textarea:focus, .n8-spot-review-form input[type=text]:focus { border-color:#1a2744; box-shadow:0 0 0 3px rgba(255,255,255,0.15); }
.n8-spot-review-form__submit { align-self:flex-start; background:#fff; color:#0a0f1a; border:none; border-radius:9px; padding:11px 22px; font-family:"Bebas Neue",Impact,sans-serif; font-size:16px; letter-spacing:1px; cursor:pointer; transition:opacity .15s; }
.n8-spot-review-form__submit:hover { opacity:.88; }
.n8-spot-review-form__submit:disabled { opacity:.5; cursor:default; }
.n8-spot-review-form__feedback { min-height:16px; font-family:"Inter",sans-serif; font-size:13px; color:rgba(255,255,255,0.6); margin:0; }
.n8-spot-review-form__feedback.is-success { color:#8fe08f; }
.n8-spot-review-form__feedback.is-error { color:#ff9a9a; }

.n8-spot-panel__actions { display:flex; flex-direction:column; gap:10px; }
.n8-spot-panel__btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:14px 22px; border-radius:12px;
    font-family:"Bebas Neue",sans-serif; font-size:14px; letter-spacing:2.5px; font-weight:700;
    text-decoration:none; text-transform:uppercase;
    transition:transform 0.2s, background 0.2s, border-color 0.2s;
    cursor:pointer; border:none;
}
.n8-spot-panel__btn--primary { background:#fff; color:#0a0f1a !important; }
.n8-spot-panel__btn--primary:hover { background:#e5e7eb; transform:translateX(3px); }
.n8-spot-panel__btn--secondary { background:rgba(255,255,255,0.08); color:#fff !important; border:1px solid rgba(255,255,255,0.18); }
.n8-spot-panel__btn--secondary:hover { background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.3); }
.n8-spot-panel__btn--ghost { background:transparent; color:rgba(255,255,255,0.65) !important; padding:10px; font-size:12px; letter-spacing:1.5px; }
.n8-spot-panel__btn--ghost:hover { color:#fff !important; }

@media (max-width:580px) {
    .n8-spot-panel__inner { width:100%; }
    .n8-spot-panel__body { padding:22px 22px 30px; }
}

/* ── Responsive ── */
@media (max-width:1024px) {
    .n8-spots-searchhero { margin-bottom:30px; }
    .n8-search-input-wrap--hero .n8-search-input { font-size:15px; }
    .n8-search-input-wrap--hero .n8-search-input::placeholder { font-size:15px; }
    .n8-spots-split { flex-direction:column-reverse; height:auto; gap:16px; }
    .n8-spots-col-cards { width:100%; max-width:100%; min-width:100%; max-height:340px; }
    .n8-spots-col-map { height:380px; }
}
@media (max-width:768px) {
    .n8-spots-section { padding:60px 0 50px; }
    .n8-spots-header { margin-bottom:28px; }
    .n8-search-row { flex-direction:column; gap:10px; }
    .n8-search-input-wrap { min-width:100%; }
    .n8-filter-chips { width:100%; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
    .n8-spots-col-map { height:300px; }
    .n8-spots-col-cards { max-height:260px; }
    .n8-spots-hero__body { padding:24px 20px; }
    .n8-spots-hero__cta { width:100%; justify-content:center; align-self:stretch; }
    .n8-spots-meta { gap:12px; }
    .n8-spots-meta .n8-spots-stat__num { font-size:13px; }
}

/* ====== ARTICLE WIDE (hero + central) ====== */
.n8-art-wide { display:flex; border-radius:var(--n8-card-radius); overflow:visible; border:1px solid var(--n8-border); background:#fff; margin-bottom:16px; transition:transform 0.25s,box-shadow 0.25s; }
.n8-art-wide:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(26,39,68,0.12); }
.n8-art-wide__link { text-decoration:none; color:inherit; display:block; cursor:pointer; }
.n8-art-wide__text { flex:0 0 55%; padding:28px; display:flex; flex-direction:column; justify-content:center; position:relative; border-radius:var(--n8-card-radius) 0 0 var(--n8-card-radius); }
.n8-art-wide__img { flex:0 0 45%; position:relative; overflow:hidden; min-height:280px; border-radius:0 var(--n8-card-radius) var(--n8-card-radius) 0; }
.n8-art-wide--reverse .n8-art-wide__text { border-radius:0 var(--n8-card-radius) var(--n8-card-radius) 0; }
.n8-art-wide--reverse .n8-art-wide__img { border-radius:var(--n8-card-radius) 0 0 var(--n8-card-radius); }
.n8-art-wide__img img { width:100%; height:100%; object-fit:cover; }
.n8-art-wide--reverse { flex-direction:row-reverse; }
.n8-art-wide__title { font-family:"Bebas Neue",Impact,sans-serif; font-size:26px; color:var(--n8-navy); text-transform:uppercase; letter-spacing:1px; line-height:1.15; margin:8px 0 12px; }
.n8-art-wide__title a { color:var(--n8-navy); text-decoration:none; }
.n8-art-wide__title a:hover { color:var(--n8-navy-light); }
.n8-art-wide__excerpt { font-family:"Inter",-apple-system,sans-serif; font-size:14px; color:#3d4f73; line-height:1.6; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.n8-art-wide__meta { display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.n8-art-wide__date { font-family:"Space Mono",monospace; font-size:12px; color:#888; }
@media(max-width:1024px) { .n8-art-wide,.n8-art-wide--reverse { flex-direction:column; } .n8-art-wide__text,.n8-art-wide__img { flex:none; width:100%; } .n8-art-wide__img { order:-1; min-height:200px; } .n8-art-wide__text { padding:16px; } .n8-art-wide__title { font-size:20px; } }

/* ====== GRILLE ARTICLES ====== */
.n8-art-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
@media(max-width:1024px) { .n8-art-grid { grid-template-columns:repeat(2,1fr); gap:10px; } }

/* ====== BADGE GRIS ====== */
.n8-badge { display:inline-block; background:#888!important; color:#fff!important; font-family:"Space Mono",monospace; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:4px 10px; border-radius:4px; position:absolute; top:12px; left:12px; z-index:2; }
.n8-badge--sm { font-size:9px; padding:3px 8px; }
.n8-art-wide__text .n8-badge { position:static; align-self:flex-start; }

/* ====== FIX LITESPEED ====== */
.n8-card__img, .n8-art-wide__img img, .n8-hero-card__img, .n8-product__img img, .n8-card__img-wrap img { visibility:visible!important; opacity:1!important; }

/* ====== READING TIME + CTA ====== */
.n8-card__reading, .n8-art-wide__reading { font-family:"Space Mono",monospace; font-size:11px; color:var(--n8-muted); text-align:right; margin-bottom:8px; display:block; }
.n8-card__cta, .n8-art-wide__cta { font-family:"Inter",-apple-system,sans-serif; font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:#b0bec5; display:inline-flex; align-items:center; gap:5px; margin-bottom:12px; transition:gap 0.3s,color 0.3s; }
.n8-card:hover .n8-card__cta, .n8-art-wide:hover .n8-art-wide__cta { gap:10px; color:var(--n8-navy-light); }
.n8-arrow { transition:transform 0.3s; }
.n8-card:hover .n8-arrow, .n8-art-wide:hover .n8-arrow { transform:translateX(4px); animation:arrow-bounce 1s ease-in-out infinite; }
@keyframes arrow-bounce { 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }
.n8-card__footer { display:flex; justify-content:space-between; align-items:center; margin-top:auto; }
.n8-card__date, .n8-art-wide__date { font-family:"Space Mono",monospace; font-size:11px; color:var(--n8-muted); }

/* ====== LIKED COUNT ====== */
.n8-liked-count { font-family:"Space Mono",monospace; font-size:11px; color:#999; white-space:nowrap; }

/* ====== STREET SHOP ====== */
.n8-shop-section { background:#fff; padding:60px 0 80px; }
.n8-shop-inner { max-width:1200px; margin:0 auto; padding:0 32px; }
.n8-shop-header { display:flex; justify-content:space-between; align-items:flex-start; }
.n8-shop-title { font-family:'Bebas Neue',Impact,sans-serif; font-size:clamp(28px,4vw,42px); color:#1a2744; letter-spacing:3px; margin:0; }
.n8-shop-line { width:60px; height:3px; background:#1a2744; margin:10px 0 12px; }
.n8-shop-sub { font-family:'Inter',sans-serif; font-size:14px; color:#4a5568; margin:0 0 24px; }
.n8-shop-total { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:1px; color:rgba(26,39,68,0.35); margin-top:10px; white-space:nowrap; }

.n8-shop-video-wrap { border-radius:12px; overflow:hidden; margin-bottom:32px; }
.n8-shop-video { width:100%; display:block; border-radius:12px; }

/* Rangée par catégorie */
.n8-shop-row { display:flex; align-items:stretch; margin-bottom:24px; gap:0; }
.n8-shop-row-label {
    flex:0 0 44px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:sticky;
    left:0;
    z-index:3;
    background:#fff;
    padding:0 8px 0 0;
}
.n8-shop-row-label-text {
    writing-mode:vertical-lr;
    text-orientation:mixed;
    transform:rotate(180deg);
    font-family:'Bebas Neue',Impact,sans-serif;
    font-size:15px;
    letter-spacing:3px;
    color:rgba(26,39,68,0.45);
    white-space:nowrap;
    user-select:none;
}

/* Zone produits scroll horizontal */
.n8-shop-row-products-wrap { flex:1; position:relative; overflow:visible; min-width:0; }
.n8-shop-row-products {
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:30px 0 4px;
    margin-top:-26px;
}
.n8-shop-row-products::-webkit-scrollbar { display:none; }

/* Carte produit — flip 3D */
.n8-shop-card { flex:0 0 200px; perspective:800px; height:310px; position:relative; }
.n8-shop-card-inner {
    position:relative; width:100%; height:100%;
    transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
    transform-style:preserve-3d;
}
.n8-shop-card:hover .n8-shop-card-inner,
.n8-shop-card.flipped .n8-shop-card-inner { transform:rotateY(180deg); }
.n8-shop-card-front, .n8-shop-card-back {
    position:absolute; inset:0; backface-visibility:hidden;
    border-radius:12px; border:1px solid #e0e0e0; overflow:hidden; background:#fff;
    display:flex; flex-direction:column;
}
.n8-shop-card-back { transform:rotateY(180deg); }

/* Image */
.n8-shop-card-img { position:relative; height:190px; background:#f8f9fb; overflow:hidden; }
.n8-shop-card-img img { width:100%; height:100%; object-fit:cover; }

/* Badges */
.n8-shop-badge-sale {
    position:absolute; top:8px; left:8px;
    background:#cc2936; color:#fff;
    font-family:'Space Mono',monospace; font-size:9px; letter-spacing:1px;
    padding:3px 8px; border-radius:4px;
}
.n8-shop-badge-mif {
    position:absolute; bottom:8px; left:8px;
    background:rgba(26,39,68,0.85); color:#fff;
    font-family:'Inter',sans-serif; font-size:8px; letter-spacing:0.5px;
    padding:3px 7px; border-radius:4px;
}
/* Badge MIF flottant — hors du flip, toujours visible */
.n8-shop-badge-mif-float {
    position:absolute; bottom:128px; left:6px; z-index:10;
    background:rgba(26,39,68,0.85); color:#fff;
    font-family:'Inter',sans-serif; font-size:7px; letter-spacing:0.5px;
    padding:2px 6px; border-radius:3px; pointer-events:none;
}

/* Favori — cœur AU-DESSUS de la carte (hors flip) */
.n8-shop-fav {
    position:absolute; top:8px; right:8px;
    background:transparent!important; border:none!important; border-radius:0!important; padding:0; -webkit-appearance:none; appearance:none;
    width:auto; height:auto; display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all 0.2s; z-index:10; box-shadow:none!important; outline:none!important;
}
.n8-shop-fav .n8-shop-fav-icon { color:rgba(255,255,255,0.8); transition:all 0.2s; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.n8-shop-fav:hover .n8-shop-fav-icon { color:#cc2936; }
.n8-shop-fav.active .n8-shop-fav-icon { color:#cc2936; fill:#cc2936; stroke:#cc2936; }

/* Info face avant */
.n8-shop-card-info { padding:8px 12px; flex:1; display:flex; flex-direction:column; gap:4px; }
.n8-shop-product-name { font-family:'Bebas Neue',sans-serif; font-size:13px; color:#1a2744; letter-spacing:1px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.n8-shop-card-price { display:flex; align-items:baseline; gap:6px; }
.n8-shop-price { font-family:'Space Mono',monospace; font-size:15px; color:#1a2744; font-weight:700; }
.n8-shop-price-old { font-family:'Space Mono',monospace; font-size:12px; color:#999; text-decoration:line-through; }

/* Pastilles couleur */
.n8-shop-colors { display:flex; gap:4px; margin-top:2px; flex-wrap:wrap; }
.n8-shop-color-dot {
    width:12px; height:12px; border-radius:50%;
    border:1px solid rgba(0,0,0,0.12);
    cursor:default;
}
.n8-shop-color-dot[style*="ffffff"] { border-color:rgba(0,0,0,0.2); }

/* Face arrière — détails */
.n8-shop-card-back .n8-shop-card-img { height:190px; }
.n8-shop-card-details { padding:10px 12px; flex:1; display:flex; flex-direction:column; gap:5px; }
.n8-shop-detail {
    font-family:'Inter',sans-serif; font-size:11px; color:#4a5568;
    margin:0; display:flex; align-items:center; gap:5px;
}
.n8-shop-detail svg { flex-shrink:0; color:#1a2744; }
.n8-shop-detail--mif { color:#1a2744; font-weight:600; }
.n8-shop-back-actions { display:flex; flex-direction:column; gap:5px; margin-top:auto; }
.n8-shop-cart-btn {
    flex:1;
    font-family:'Bebas Neue',sans-serif; font-size:8px; letter-spacing:1px;
    color:#1a2744; background:none; border:1px solid #1a2744;
    padding:4px 8px; border-radius:5px; white-space:nowrap;
    cursor:pointer; transition:all 0.2s;
    display:flex; align-items:center; justify-content:center; gap:4px;
}
.n8-shop-cart-btn:hover { background:#1a2744; color:#fff; }
.n8-shop-cart-btn:hover svg { stroke:#fff; }
.n8-shop-cart-btn.added { background:#2d6a4f; border-color:#2d6a4f; color:#fff; }
.n8-shop-cart-btn.added svg { stroke:#fff; }
.n8-shop-order-btn {
    font-family:'Bebas Neue',sans-serif; font-size:8px; letter-spacing:1px;
    color:#fff!important; background:#1a2744; padding:5px 10px; border-radius:5px;
    white-space:nowrap;
    text-decoration:none; text-align:center; transition:transform 0.2s;
    display:block;
}
.n8-shop-order-btn:hover { color:#fff!important; transform:translateY(1px); }

/* Animation confirmation — bounce down + retour */
@keyframes n8-card-confirm {
    0% { transform:translateY(0); }
    20% { transform:translateY(8px); }
    60% { transform:translateY(8px); }
    100% { transform:translateY(0); }
}
.n8-shop-card.confirming { animation:n8-card-confirm 1s ease; }

/* Fade droite par rangée */
.n8-shop-row-fade {
    position:absolute;
    right:0; top:0; bottom:0;
    width:50px;
    background:linear-gradient(to left,#fff,transparent);
    pointer-events:none;
    z-index:2;
    transition:opacity 0.3s;
}

/* Flèche scroll par rangée — base */
.n8-shop-row-arrow {
    position:absolute; top:50%; transform:translateY(-50%);
    background:none!important; border:none!important; outline:none!important;
    box-shadow:none!important; -webkit-appearance:none; appearance:none;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; z-index:5;
    padding:8px;
    color:rgba(26,39,68,0.3);
    transition:color 0.2s;
    border-radius:0!important;
}
.n8-shop-row-arrow:focus,
.n8-shop-row-arrow:active { background:none!important; border:none!important; outline:none!important; box-shadow:none!important; }
.n8-shop-row-arrow:hover { color:#1a2744!important; }
.n8-shop-row-arrow svg { width:40px; height:40px; stroke:currentColor; }

/* Positionnement droite/gauche */
.n8-shop-row-arrow--r { right:-28px; left:auto!important; }
.n8-shop-row-arrow--l { left:-28px!important; right:auto!important; }

/* Fade gauche */
.n8-shop-row-fade-l {
    position:absolute; left:0; top:0; bottom:0; width:50px;
    background:linear-gradient(to right,#fff,transparent);
    pointer-events:none; z-index:2; opacity:0; transition:opacity 0.3s;
}
@keyframes shop-arrow-pulse-r { 0%,100%{transform:translateX(0);} 50%{transform:translateX(5px);} }
@keyframes shop-arrow-pulse-l { 0%,100%{transform:translateX(0);} 50%{transform:translateX(-5px);} }
.n8-shop-row-arrow--r.pulsing svg { animation:shop-arrow-pulse-r 1s ease-in-out infinite; }
.n8-shop-row-arrow--l.pulsing svg { animation:shop-arrow-pulse-l 1s ease-in-out infinite; }
.n8-shop-row-arrow.pulsing { color:rgba(26,39,68,0.6); }

/* CTA */
.n8-shop-cta-wrap { text-align:center; margin-top:8px; }
.n8-shop-cta { display:inline-block; padding:14px 40px; background:#1a2744; color:#fff; border-radius:8px; font-family:'Bebas Neue',sans-serif; font-size:17px; letter-spacing:2.5px; text-decoration:none; transition:all 0.25s; }
.n8-shop-cta:hover { background:#2d3f5e; transform:translateY(-2px); }

@media(max-width:768px) {
    .n8-shop-inner { padding:0 20px; }
    .n8-shop-row-label { flex:0 0 32px; padding:0 4px 0 0; }
    .n8-shop-row-label-text { font-size:12px; letter-spacing:2px; }
    .n8-shop-card { flex:0 0 170px; height:280px; }
    .n8-shop-card-img { height:160px; }
    .n8-shop-card-back .n8-shop-card-img { height:160px; }
    .n8-shop-product { flex:0 0 150px; }
    .n8-shop-product-img { height:150px; }
    .n8-shop-row-arrow { padding:6px; }
    .n8-shop-row-arrow svg { width:32px; height:32px; }
    .n8-shop-row-arrow--r { right:-20px!important; }
    .n8-shop-row-arrow--l { left:-20px!important; }
}

/* Footer styles in nosk8-footer.css (global) */

/* Overrides */
body.page-template-nosk8-home .site-main,
body.page-template-page-nosk8-home .site-main { padding:0; }
body.page-template-nosk8-home #main>article>.entry-content,
body.page-template-page-nosk8-home #main>article>.entry-content { max-width:100%; padding:0; }
body.page-template-nosk8-home [data-elementor-type="header"],
body.page-template-page-nosk8-home [data-elementor-type="header"],
body.page-template-nosk8-home [data-elementor-type="footer"],
body.page-template-page-nosk8-home [data-elementor-type="footer"] { display:none!important; }
body.page-template-nosk8-home>.site>header,
body.page-template-page-nosk8-home>.site>header { display:none!important; }
body.page-template-nosk8-home>.site>footer,
body.page-template-page-nosk8-home>.site>footer { display:none!important; }

/* ── Barre de contrôles globe (au-dessus du globe, dans la col-map) ── */
.n8-globe-ctrl-bar {
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    padding:8px 10px; flex-shrink:0; z-index:10;
    background:rgba(10,15,26,0.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,0.1);
}

/* ── Zone dropdown (menu continents/pays dans le ctrl bar) ── */
.n8-zone-menu {
    min-width:240px; max-width:320px;
    display:flex; flex-direction:column; gap:8px;
    padding:10px !important;
}
.n8-zone-menu .n8-globe-continents,
.n8-zone-menu .n8-globe-countries,
.n8-zone-menu .n8-globe-cities {
    position:static !important; top:auto !important; right:auto !important; left:auto !important;
    background:transparent !important; border:none !important; box-shadow:none !important;
    max-height:none !important; opacity:1 !important; visibility:visible !important;
    padding:0 !important; margin:0;
    flex-wrap:wrap !important; gap:5px; overflow:visible !important;
    display:flex !important;
}
.n8-zone-menu .n8-globe-countries:empty,
.n8-zone-menu .n8-globe-cities:empty { display:none !important; }
.n8-zone-menu .n8-globe-countries.is-open,
.n8-zone-menu .n8-globe-cities.is-open { display:flex !important; }
.n8-zone-menu .n8-globe-continents.is-collapsed > .n8-globe-continent:not(.active),
.n8-zone-menu .n8-globe-countries.is-collapsed > .n8-globe-country:not(.active) { display:none; }
/* Séparateur entre niveaux */
.n8-zone-menu .n8-globe-countries:not(:empty),
.n8-zone-menu .n8-globe-cities:not(:empty) { border-top:1px solid rgba(255,255,255,0.08); padding-top:8px !important; }

/* ── Search bar dans la sidebar ── */
.n8-spots-search-wrap {
    padding:8px 12px 4px;
    flex-shrink:0;
}
.n8-spots-search-wrap .n8-tb-search {
    max-width:100%; flex:1; width:100%; min-width:0;
}

/* ── Toggle vue dans la sidebar (visible seulement en vue liste) ── */
.n8-tb-view--sidebar {
    margin-left:auto;
    background:rgba(26,39,68,0.88); border:1px solid rgba(255,255,255,0.14);
    border-radius:8px; padding:2px; gap:2px;
    display:inline-flex; align-items:center;
}
.n8-tb-view--sidebar .n8-tb-viewbtn {
    padding:5px 8px; border-radius:6px; gap:0;
    font-size:0; border:none; cursor:pointer;
    background:transparent; color:rgba(255,255,255,0.7);
    display:inline-flex; align-items:center;
    transition:background 0.18s, color 0.18s;
}
.n8-tb-view--sidebar .n8-tb-viewbtn.is-active { background:#fff; color:#1a2744; }
.n8-spots-section.view-map .n8-tb-view--sidebar { display:none; }

/* ── Formulaire suggestion de spot ── */
/* ── Propose un spot : bloc pleine largeur, 2 colonnes (illustration + formulaire) ── */
.n8-spots-suggest {
    max-width:1440px; margin:0 auto; padding:48px 24px 64px;
}
.n8-spots-suggest__grid {
    display:grid; grid-template-columns:1.05fr 1fr; gap:0;
    background:linear-gradient(135deg, rgba(26,39,68,0.82) 0%, rgba(15,22,40,0.88) 100%);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:20px; overflow:hidden;
    box-shadow:0 24px 64px rgba(0,0,0,0.45);
    position:relative;
}
.n8-spots-suggest__grid::before {
    content:""; position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(circle at 18% 40%, rgba(92,240,255,0.08), transparent 55%);
}

/* ── Colonne visuelle gauche ── */
.n8-spots-suggest__visual {
    padding:48px 44px 40px;
    display:flex; flex-direction:column; align-items:flex-start; gap:14px;
    position:relative;
    border-right:1px solid rgba(255,255,255,0.08);
    background:
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.15) 100%),
        radial-gradient(circle at 75% 20%, rgba(92,240,255,0.05), transparent 50%);
}
.n8-spots-suggest__eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    font-family:"Space Mono",monospace; font-size:10px; letter-spacing:2.5px;
    color:rgba(255,255,255,0.7); text-transform:uppercase; font-weight:700;
    padding:6px 12px; border:1px solid rgba(255,255,255,0.18);
    border-radius:999px;
}
.n8-spots-suggest__dot {
    width:6px; height:6px; border-radius:50%; background:#5cf0ff;
    box-shadow:0 0 10px rgba(92,240,255,0.8);
    animation:n8sugPulseDot 1.8s ease-in-out infinite;
}
@keyframes n8sugPulseDot { 0%,100% { opacity:1; } 50% { opacity:0.35; } }
.n8-spots-suggest__illu {
    width:100%; max-width:420px; height:auto;
    align-self:center; margin:6px 0 10px;
    filter:drop-shadow(0 10px 22px rgba(0,0,0,0.35));
}
.n8-spots-suggest__pulse { transform-origin:210px 145px; animation:n8sugPulse 2.4s ease-out infinite; }
.n8-spots-suggest__pulse--2 { animation-delay:-1.2s; }
@keyframes n8sugPulse {
    0%   { transform:scale(0.6); opacity:0.5; }
    80%  { transform:scale(2.1); opacity:0; }
    100% { transform:scale(2.1); opacity:0; }
}
/* Spécificité doublée : bat `.nosk8-home h3{color:navy}` (anti navy-sur-navy) */
.n8-spots-suggest .n8-spots-suggest__title {
    font-family:"Bebas Neue",sans-serif; font-size:40px; line-height:1;
    color:#fff; letter-spacing:1.2px; margin:0;
}
.n8-spots-suggest__sub {
    font-family:"Inter",sans-serif; font-size:14px; line-height:1.6;
    color:rgba(255,255,255,0.65); margin:0;
}
.n8-spots-suggest__bullets {
    list-style:none; padding:0; margin:10px 0 0;
    display:flex; flex-direction:column; gap:8px;
}
.n8-spots-suggest__bullets li {
    font-family:"Inter",sans-serif; font-size:13px;
    color:rgba(255,255,255,0.8);
    display:flex; align-items:center; gap:10px;
}
.n8-spots-suggest__check {
    color:#5cf0ff;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; flex-shrink:0; width:16px;
}

/* ── Colonne formulaire droite ── */
.n8-spots-suggest__form-wrap {
    padding:40px 44px;
    display:flex; flex-direction:column; justify-content:center;
    position:relative;
}
.n8-spots-suggest__form { display:flex; flex-direction:column; gap:14px; }
.n8-spots-suggest__row { display:flex; gap:12px; }
.n8-spots-suggest__row > .n8-spots-suggest__field { flex:1; min-width:0; }
.n8-spots-suggest__field { display:flex; flex-direction:column; gap:5px; }
.n8-spots-suggest__label {
    font-family:"Space Mono",monospace; font-size:10px; letter-spacing:1.5px;
    color:rgba(255,255,255,0.55); text-transform:uppercase; font-weight:700;
}
.n8-spots-suggest__req { color:#5cf0ff; }
.n8-spots-suggest__input {
    background:rgba(255,255,255,0.05); color:#fff;
    border:1px solid rgba(255,255,255,0.13); border-radius:10px;
    padding:11px 14px; font-family:"Inter",sans-serif; font-size:13.5px;
    outline:none; transition:border-color 0.2s, background 0.2s, box-shadow 0.2s;
    min-width:0; width:100%;
}
.n8-spots-suggest__input:focus {
    border-color:rgba(92,240,255,0.55); background:rgba(255,255,255,0.08);
    box-shadow:0 0 0 3px rgba(92,240,255,0.12);
}
.n8-spots-suggest__input::placeholder { color:rgba(255,255,255,0.3); }
.n8-spots-suggest__select {
    appearance:none; -webkit-appearance:none; cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23ffffff80%27 stroke-width=%272%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center;
    padding-right:36px;
}
.n8-spots-suggest__textarea { resize:vertical; min-height:84px; }

/* ── Drop zone image ── */
.n8-spots-suggest__drop {
    position:relative;
    border:1.5px dashed rgba(255,255,255,0.22); border-radius:12px;
    background:rgba(255,255,255,0.03);
    padding:22px 18px; min-height:120px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:border-color 0.2s, background 0.2s;
    overflow:hidden;
}
.n8-spots-suggest__drop:hover,
.n8-spots-suggest__drop:focus-visible,
.n8-spots-suggest__drop.is-dragover {
    border-color:rgba(92,240,255,0.6); background:rgba(92,240,255,0.06);
    outline:none;
}
.n8-spots-suggest__drop-inner {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    text-align:center; pointer-events:none;
}
.n8-spots-suggest__drop-ic { color:rgba(255,255,255,0.55); }
.n8-spots-suggest__drop-title {
    margin:0; font-family:"Inter",sans-serif; font-size:14px; font-weight:600;
    color:rgba(255,255,255,0.88);
}
.n8-spots-suggest__drop-hint {
    margin:0; font-family:"Inter",sans-serif; font-size:12px;
    color:rgba(255,255,255,0.5);
}
.n8-spots-suggest__drop-link { color:#5cf0ff; text-decoration:underline; text-underline-offset:2px; }
.n8-spots-suggest__drop.has-preview { padding:0; border-style:solid; border-color:rgba(255,255,255,0.16); }
.n8-spots-suggest__drop.has-preview .n8-spots-suggest__drop-inner { display:none; }
.n8-spots-suggest__drop-preview {
    position:relative; width:100%; min-height:160px;
    background:#000; border-radius:10px; overflow:hidden;
}
.n8-spots-suggest__drop-preview img {
    display:block; width:100%; height:auto; max-height:260px; object-fit:cover;
}
.n8-spots-suggest__drop-clear {
    position:absolute; top:8px; right:8px;
    width:28px; height:28px; border-radius:8px;
    background:rgba(0,0,0,0.65); color:#fff;
    border:1px solid rgba(255,255,255,0.25);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:background 0.15s, transform 0.12s;
}
.n8-spots-suggest__drop-clear:hover { background:rgba(0,0,0,0.85); transform:scale(1.08); }

/* ── Footer ── */
.n8-spots-suggest__footer {
    display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px;
}
.n8-spots-suggest__btn {
    background:#fff; color:#1a2744; border:none; border-radius:10px;
    padding:13px 22px; font-family:"Space Mono",monospace;
    font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
    cursor:pointer; transition:background 0.2s, box-shadow 0.2s, transform 0.18s;
    white-space:nowrap;
    display:inline-flex; align-items:center; gap:10px;
}
.n8-spots-suggest__btn svg { transition:transform 0.25s; }
.n8-spots-suggest__btn:hover {
    background:#e8ecf4; box-shadow:0 6px 22px rgba(92,240,255,0.18);
    transform:translateY(-1px);
}
.n8-spots-suggest__btn:hover svg { transform:translateX(3px); }
.n8-spots-suggest__btn:disabled { opacity:0.6; cursor:default; transform:none; }
.n8-spots-suggest__msg {
    padding:10px 14px; border-radius:8px; font-family:"Inter",sans-serif; font-size:13px;
    flex:1; min-width:0;
}
.n8-spots-suggest__msg--ok { background:rgba(100,220,130,0.14); color:rgba(180,255,200,0.9); border:1px solid rgba(100,220,130,0.25); }
.n8-spots-suggest__msg--err { background:rgba(255,100,100,0.12); color:rgba(255,180,180,0.9); border:1px solid rgba(255,100,100,0.25); }

/* ── Responsive ── */
@media (max-width:900px) {
    .n8-spots-suggest { padding:32px 16px 48px; }
    .n8-spots-suggest__grid { grid-template-columns:1fr; }
    .n8-spots-suggest__visual { padding:32px 24px 20px; border-right:none; border-bottom:1px solid rgba(255,255,255,0.08); }
    .n8-spots-suggest__form-wrap { padding:28px 24px; }
    .n8-spots-suggest__title { font-size:32px; }
    .n8-spots-suggest__illu { max-width:300px; }
}
@media (max-width:600px) {
    .n8-spots-suggest__row { flex-direction:column; }
    .n8-spots-suggest__visual { padding:26px 20px 16px; }
    .n8-spots-suggest__form-wrap { padding:22px 20px; }
    .n8-spots-suggest__footer { flex-direction:column; align-items:stretch; }
    .n8-spots-suggest__btn { justify-content:center; }
}

/* ════════════════════════════════════════════════════════════════
   ARTICLES — « une de journal » (skate) — 2026-06-04
   Densité éditoriale : masthead + lead + rail + colonnes.
   Typo = DA NOSK8 (Bebas nameplate, Barlow Condensed titres, Space Mono labels, Inter corps)
   ════════════════════════════════════════════════════════════════ */
.n8-articles{
  background:#faf7f1;
  background-image:radial-gradient(rgba(120,110,90,.05) 1px,transparent 1px);
  background-size:3px 3px;
  --jr-ink:#16223d; --jr-ink2:#3a4252; --jr-mut:#7c8496;
  --jr-rule:#d8d3c7; --jr-ruledk:#16223d; --jr-accent:var(--n8-navy);
}
/* Masthead */
.n8-articles .n8-mh{ padding:4px 0 0; }
.n8-articles .n8-mh__top{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-family:"Space Mono",monospace; font-size:10.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--jr-mut); border-bottom:1px solid var(--jr-rule); padding-bottom:8px; }
.n8-articles .n8-mh__name{ text-align:center; padding:16px 0 6px; }
.n8-articles .n8-mh__name h2{ font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; font-size:clamp(40px,9vw,96px); line-height:.9; letter-spacing:.02em; color:var(--jr-ink); margin:0; text-transform:uppercase; }
.n8-articles .n8-mh__tag{ font-family:"Inter",sans-serif; font-style:italic; font-size:clamp(12px,1.7vw,15px); color:var(--jr-ink2); letter-spacing:.02em; margin:8px 0 0; }
.n8-articles .n8-mh__rules{ border-top:3px double var(--jr-ruledk); border-bottom:1px solid var(--jr-ruledk); height:5px; margin-top:14px; }
.n8-articles .n8-mh__nav{ display:flex; justify-content:center; flex-wrap:wrap; gap:4px 18px; font-family:"Space Mono",monospace; font-weight:700; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--jr-ink2); padding:10px 0; border-bottom:1px solid var(--jr-ruledk); }
.n8-articles .n8-mh__nav a{ color:var(--jr-ink2); transition:color .15s; }
.n8-articles .n8-mh__nav a:hover{ color:var(--n8-navy); }

/* éléments éditoriaux */
.n8-articles .n8-kick{ font-family:"Space Mono",monospace; font-weight:700; font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--jr-accent); margin:0 0 7px; }
.n8-articles .n8-byl{ font-family:"Space Mono",monospace; font-size:11.5px; color:var(--jr-mut); margin:8px 0 0; letter-spacing:.3px; }
.n8-articles .n8-hl{ font-family:"Barlow Condensed",sans-serif; color:var(--jr-ink); line-height:1.0; letter-spacing:-.01em; font-weight:800; margin:0; text-transform:none; }
.n8-articles a:hover .n8-hl{ color:var(--n8-navy); }

/* la une : lead + rail */
.n8-articles .n8-jr-front{ display:grid; grid-template-columns:1fr; gap:0; padding-top:26px; }
.n8-articles .n8-jr-lead{ position:relative; padding-bottom:28px; border-bottom:2px solid var(--jr-ruledk); }
.n8-articles .n8-jr-lead__media{ position:relative; display:block; }
.n8-articles .n8-jr-lead__img{ aspect-ratio:16/9; width:100%; object-fit:cover; border-radius:0; border:1px solid var(--jr-ruledk); display:block; filter:brightness(.97) contrast(1.03) saturate(.98); transition:filter .35s ease; }
.n8-articles .n8-jr-lead__link:hover .n8-jr-lead__img{ filter:brightness(1) contrast(1.02) saturate(1); }

/* ══ LE BANDEAU (David 2026-09-19, 2e passe) ═══════════════════════════════════════
   « Un VRAI bandeau pour les images […] comme une vignette YouTube […] sur toutes les
     images d'aperçu, le même rendu. »

   Un dégradé n'est pas un bandeau : il se fond dans la photo. Celui-ci est un objet
   posé DESSUS — noir plein #111 (les 10 % de la charte), texte blanc condensé, liseré
   rouge sirène à gauche (« gyrophare par touches subtiles », essence NOSK8), et une
   inclinaison de 1,4° qui lui donne l'air collé à la main plutôt qu'aligné au pixel.

   Pourquoi du NOIR PLEIN et pas un voile translucide : le bandeau doit rester lisible
   sur n'importe quelle photo, claire comme sombre. Une transparence se comporte bien
   sur la photo qu'on regarde pendant qu'on code, et trahit sur la suivante.
   Posé EN BAS À GAUCHE, débordant légèrement du bord de l'image. */
/* 🔑 SÉLECTEUR DOUBLÉ, et ce n'est pas une coquetterie : le bandeau est un <span>, et
   la règle de page « .nosk8-home p, .nosk8-home span, … » (0,2,0) battait « .n8-bandeau »
   (0,1,0). Le bandeau s'affichait donc en **Inter, line-height 1.6** au lieu de Barlow
   Condensed 1.06 — mesuré au CDP le 19/09, pas lu dans la feuille. Deux conséquences :
   la largeur d'un caractère n'était pas celle sur laquelle la limite était calibrée, et
   `max-height:2.12em` (calculé sur la font-size) ne contenait qu'UNE ligne de 1.6 —
   la deuxième disparaissait en silence.
   ⚠️ Toute propriété de TEXTE posée ici doit franchir 0,2,0, sinon la page la reprend. */
.n8-bandeau.n8-bandeau{
    /* Décollé du bord (left:12px) et non collé : sans cet écart, le liseré rouge
       sortait du cadre et l'inclinaison ne se voyait pas — le bandeau avait l'air
       d'un rectangle aligné au pixel, exactement ce qu'on ne voulait pas. */
    display:inline-block; max-width:100%; padding:6px 12px 5px 11px;
    background:#111111; color:#fff;
    /* Le liseré rouge a sauté (David 2026-09-19) : « la petite bande rouge à gauche, on
       peut la retirer, et tu me mets juste au-dessus de la bannière la catégorie ». Le
       rouge disait « attention » sur TOUS les articles — il ne distinguait rien. La
       couleur sert maintenant à quelque chose : elle dit de quelle rubrique on parle. */
    font-family:"Barlow Condensed",sans-serif; font-weight:800; text-transform:uppercase;
    /* .03em et non .055em : l'interlettrage serré rend 6 caractères de plus à taille
       égale — David voulait « caser plus de caractères ». */
    letter-spacing:.03em; line-height:1.06;
    pointer-events:none;
    /* DEUX LIGNES, pas une (David 2026-09-19, 4e passe) : « mets des qualificatifs,
       un ou une ou le ou la, et un langage accessible — la faillite a 700 000 $, on
       comprend rien, il faut un minimum de contexte ».
       Sur UNE ligne a 10 px, une carte n'offrait que 22 caracteres : de quoi ecrire
       « 29 MILLIONS TROP » ou « LOI REMPORTE ELGG », c'est-a-dire des telegrammes que
       personne ne comprend. Le contexte demande ne rentre pas dans 22 caracteres ;
       il rentre dans 44. Deux lignes restent un bandeau (une vignette YouTube en
       porte souvent deux) ; trois en feraient un paragraphe, d'ou le clamp dur.
       `overflow-wrap` coupe un mot trop long plutot que de deborder le cadre. */
    white-space:normal; overflow:hidden; overflow-wrap:break-word; text-wrap:balance;
    /* `inline-block` et PAS `-webkit-box` + `line-clamp` : mesuré à l'écran, la box
       s'étalait sur toute la largeur de la une et son coin sortait du cadre une fois
       inclinée. Un inline-block fait du shrink-to-fit — il prend la largeur du texte
       s'il tient, la largeur dispo sinon. Conséquence voulue : sur la GRANDE image le
       bandeau tient sur une ligne (il y a la place), sur une CARTE il passe à deux.
       Le clamp à deux lignes est alors une simple hauteur : 2 × line-height (1,06). */
    /* TROIS lignes, une et cartes (19/09, après la police +3 px) : mesuré au rendu, la UNE
       en 19 px sur mobile met « Une seule fille dans Welcome to Hell » sur 3 lignes — le
       clamp à 2 coupait le dernier mot. Sur ordinateur la place est là, le texte n'en
       occupe qu'une ou deux ; le clamp ne sert que de butée. */
    max-height:3.18em;

    /* ── LA PATTE (David 2026-09-19, 3e passe) ────────────────────────────────────
       « Les bandeaux sont tout noirs, ça serait bien quelque chose qui ait une patte,
         entre glitch et sérigraphie, avec des imperfections, avec une ombre portée
         claire pour faire ressortir la bannière. »
       Trois gestes, et aucun n'est gratuit :
       1. BORD D'ENCRE — un clip-path très légèrement de travers. Une sérigraphie n'est
          jamais calée au pixel ; le rectangle parfait est ce qui faisait « bloc noir ».
       2. OMBRE PORTÉE CLAIRE — un drop-shadow blanc de 1,6 px qui SUIT la découpe (un
          box-shadow serait rogné par le clip-path, c'est pour ça que c'est un filtre).
          C'est lui qui détache la bannière d'une photo sombre. Un second drop-shadow,
          noir et diffus, donne la profondeur.
       3. GLITCH — décalage chromatique rouge/cyan en text-shadow plutôt qu'en calque
          dupliqué : rien à re-tronquer, rien à désaligner, coût nul. Volontairement
          LÉGER : la variante appuyée (testée) rend le texte fatigant, et illisible sur
          une carte de 165 px. */
    clip-path:polygon(0.6% 7%, 99.3% 0%, 100% 93%, 0% 100%);
    filter:drop-shadow(0 0 1.6px rgba(255,255,255,.95)) drop-shadow(0 7px 15px rgba(0,0,0,.55));
    text-shadow:1.4px -1px 0 rgba(255,45,45,.72), -1.1px 1px 0 rgba(0,229,255,.38);
}
/* Grain d'impression — la trame qui empêche l'aplat de faire « bloc ». */
/* ── LE BLOC : la catégorie, puis la bannière (David 2026-09-19) ──────────────────
   Empilés et alignés à gauche, inclinés ENSEMBLE (la rotation est ici, plus sur la
   bannière) : deux rotations séparées donneraient deux objets posés de travers l'un
   par rapport à l'autre, alors qu'on veut une seule étiquette sérigraphiée en deux
   étages. `align-items:flex-start` fait que chacun prend la largeur de son texte. */
.n8-bandeau-bloc{
    position:absolute; left:12px; bottom:14px; z-index:2; max-width:calc(100% - 26px);
    display:flex; flex-direction:column; align-items:flex-start; gap:0;
    transform:rotate(-1.4deg); transform-origin:left bottom;
    pointer-events:none;
}
.n8-bandeau-bloc--card{ left:8px; bottom:10px; max-width:calc(100% - 18px); gap:0; }

/* LA PASTILLE DE RUBRIQUE — une couleur par catégorie.
   ⚠️ Elle révise la charte « badges catégorie : TOUS gris #888888 » : David a tranché le
   19/09 (« une couleur adaptée pour chaque catégorie, comme ça on sait où on en est »).
   C'est cohérent avec la règle des néons, qui les autorise justement sur les BADGES.
   Le texte est noir ou blanc selon la teinte, jamais « au jugé » : un texte blanc sur
   #00ff88 se lit à 1,4 de contraste, c'est illisible. Repli gris pour toute rubrique
   future — une catégorie inconnue reste lisible plutôt que transparente. */
.n8-cat.n8-cat{
    /* VERRE LIQUIDE, pas un aplat (David 2026-09-19 : « des couleurs mais sobres, très
       sobres, pas pétantes comme ça, c'est pas du tout l'ADN visuel »). Les néons
       #00ff88 / #00f5ff / #ff2d7b tenaient la lisibilité mais criaient plus fort que la
       photo — exactement ce que la DA refuse. On reprend donc la recette maison
       (`nosk8-appreciation.css`, bloc VERRE LIQUIDE) : gloss blanc en diagonale sur une
       teinte sombre translucide, filet blanc à 45 %, flou d'arrière-plan. La rubrique se
       lit à la TEINTE, plus à la saturation.
       `--cat-tint` : une seule variable par rubrique, l'écriture du verre ne bouge pas. */
    --cat-tint:26,39,68;
    display:inline-flex; align-items:center; justify-content:center; text-align:center;
    position:relative; z-index:1;
    /* Elle MORD sur la bannière (« quitte à empiéter un peu ») : le chevauchement fait
       une seule étiquette en deux étages au lieu de deux objets posés l'un sur l'autre. */
    /* Texte CENTRÉ dans la bulle, hauteur comme largeur (David 2026-09-19) : le padding
       était volontairement déséquilibré (3px en haut, 8px en bas) pour créer le
       chevauchement, et le mot flottait vers le haut. Le chevauchement vient maintenant
       de la seule marge négative — le padding redevient symétrique et le texte se centre. */
    margin:0 0 -8px 3px; padding:5px 13px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.07) 45%, rgba(255,255,255,.20) 100%),
        rgba(var(--cat-tint), .62);
    border:1px solid rgba(255,255,255,.45); border-radius:999px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 14px rgba(255,255,255,.08), 0 8px 22px rgba(17,17,17,.34);
    -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
    color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45);
    font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:11px;
    letter-spacing:.13em; text-transform:uppercase; line-height:1;
    isolation:isolate;
}
.n8-cat.n8-cat--card{ font-size:10px; padding:4px 10px; margin:0 0 -6px 2px; letter-spacing:.1em; }
@media(min-width:600px){ .n8-cat--card{ font-size:10px; } }
@media(min-width:900px){ .n8-cat{ font-size:13px; } }
.n8-cat.n8-cat--chroniques{ --cat-tint:26,39,68; }   /* bleu nuit — la voix, l'ADN */
.n8-cat.n8-cat--evenements{ --cat-tint:96,42,42; }   /* brique sourde — la compétition */
.n8-cat.n8-cat--infos-pratiques{ --cat-tint:32,56,66; }   /* ardoise — le technique */
.n8-cat.n8-cat--portraits{ --cat-tint:66,40,62; }   /* prune — l'humain */
.n8-cat.n8-cat--spots{ --cat-tint:32,58,46; }   /* sapin — le terrain */
.n8-cat.n8-cat--tricks{ --cat-tint:78,62,34; }   /* ocre — le geste */

.n8-bandeau.n8-bandeau::after{
    content:""; position:absolute; inset:0; pointer-events:none; opacity:.14; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence baseFrequency=%270.85%27 numOctaves=%273%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%270.6%27/%3E%3C/svg%3E");
}
/* Tailles calées sur 42 caractères SUR DEUX LIGNES, la limite du script. */
.n8-bandeau--lead.n8-bandeau--lead{ font-size:clamp(19px,4.1vw,25px); padding:8px 15px 7px 13px; }
/* MESURÉ, pas estimé (19/09). Une carte en 2 colonnes sur téléphone offre ~186 px, donc
   ~168 px utiles. En Barlow Condensed 800 capitales, un caractère occupe ~0,65 × la
   taille de police — j'avais tablé sur 0,45, d'où trois tours de troncature (« 8 CRÉNEAUX
   SKATE À ES… »). À 10 px : 22 caractères = ~143 px + 17 px de cadre = 160 px par LIGNE.
   Une seule ligne ne laissait pas la place d'écrire de qui on parle ; DEUX lignes en
   donnent ~44, et c'est ce qui fixe ACC_MAX = 42 dans le script. On n'a PAS réduit la
   police pour gagner des caractères : sous 10 px le bandeau devient illisible, on
   échangerait un télégramme contre un texte qu'on ne lit pas. */
/* TROIS lignes sur une carte, et seulement là (mesuré le 19/09) : en passant la police
   de 10 à 13 px pour David, une colonne de 153 px ne rend plus que ~14 caractères par
   ligne — les bannières de 34 à 42 signes tombaient sur une 3e ligne et se faisaient
   couper par le clamp. Entre « plus gros » et « pas tronqué », on garde les deux en
   donnant la ligne qui manque. La UNE, elle, reste à deux lignes : la place y est. */
.n8-bandeau--card.n8-bandeau--card{ font-size:13px; padding:5px 9px 4.5px 8px; letter-spacing:.015em; max-height:3.18em; }
@media(min-width:600px){ .n8-bandeau--card.n8-bandeau--card{ font-size:15px; padding:6px 11px 5px 9px; letter-spacing:.02em; } }
@media(min-width:900px){ .n8-bandeau--lead.n8-bandeau--lead{ font-size:clamp(23px,1.9vw,28px); } }
/* Le lien survolé fait bouger le bandeau avec l'image : il appartient à la vignette. */
.n8-articles a:hover .n8-bandeau-bloc{ transform:rotate(-1.4deg) translateY(-2px); transition:transform .2s ease; }
@media (prefers-reduced-motion:reduce){ .n8-articles a:hover .n8-bandeau-bloc{ transform:rotate(-1.4deg); } }
/* Kicker du lead = cartouche encre (plate de rubrique) — répond à l'encart navy du rail */
.n8-articles .n8-jr-lead .n8-kick{ margin-top:18px; display:inline-block; background:var(--jr-ink); color:#fff; padding:5px 10px 4px; border-radius:3px; letter-spacing:2.5px; }
.n8-articles .n8-hl--lead{ font-size:clamp(32px,6.4vw,60px); font-weight:900; letter-spacing:-.015em; }
.n8-articles .n8-jr-lead__dek{ font-family:"Inter",sans-serif; font-size:16px; line-height:1.6; color:var(--jr-ink2); margin:12px 0 0; text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
.n8-articles .n8-jr-lead__dek::first-letter{ float:left; font-family:"Barlow Condensed",sans-serif; font-weight:900; font-size:58px; line-height:.72; padding:6px 10px 0 0; color:var(--jr-ink); }

/* Rail droit v2 — ENCART NAVY inversé (dispositif de presse « brèves encadrées ») :
   bloc encre pleine sur la page crème, folios en creux, titres blancs, flèche de lecture.
   Le contraste fait de « À suivre » un objet de une, pas une liste. */
.n8-articles .n8-jr-rail{ display:flex; flex-direction:column; background:linear-gradient(168deg,#16223d 0%,#131c33 70%,#111827 100%); border-radius:12px; padding:20px 20px 8px; margin-top:24px; box-shadow:0 22px 48px rgba(22,34,61,.22); position:relative; overflow:hidden; }
.n8-articles .n8-jr-rail::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.05; background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence baseFrequency=%270.9%27 numOctaves=%273%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%270.5%27/%3E%3C/svg%3E"); }
.n8-articles .n8-jr-rail > *{ position:relative; }
.n8-articles .n8-jr-rail__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 4px; padding:0 0 12px; border-bottom:3px double rgba(255,255,255,.35); }
.n8-articles .n8-jr-rail__head-lbl{ font-family:"Bebas Neue",Impact,sans-serif; font-size:24px; letter-spacing:2.5px; text-transform:uppercase; color:#fff; line-height:1; }
.n8-articles .n8-jr-rail__head-cnt{ font-family:"Space Mono",monospace; font-size:9.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.45); }
.n8-articles .n8-jr-row{ position:relative; display:grid; grid-template-columns:30px 84px 1fr; gap:14px; padding:16px 26px 16px 2px; border-bottom:1px solid rgba(255,255,255,.12); align-items:start; border-radius:8px; transition:background .25s ease; }
.n8-articles .n8-jr-rail .n8-jr-row:last-child{ border-bottom:none; }
.n8-articles .n8-jr-row:hover{ background:rgba(255,255,255,.06); }
.n8-articles .n8-jr-row__no{ font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:28px; line-height:.85; padding-top:2px; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.45); font-variant-numeric:tabular-nums; transition:color .25s ease; }
@supports not (-webkit-text-stroke:1px #fff){ .n8-articles .n8-jr-row__no{ color:rgba(255,255,255,.35); } }
.n8-articles .n8-jr-row:hover .n8-jr-row__no{ color:#fff; }
.n8-articles .n8-jr-row__img{ aspect-ratio:1/1; width:84px; object-fit:cover; border-radius:6px; border:1px solid rgba(255,255,255,.2); filter:brightness(.97) contrast(1.03) saturate(.97); transition:filter .35s ease; }
.n8-articles .n8-jr-row:hover .n8-jr-row__img{ filter:brightness(1) contrast(1.02) saturate(1); }
.n8-articles .n8-jr-row__arr{ position:absolute; right:6px; top:50%; transform:translate(-6px,-50%); display:inline-flex; color:#fff; opacity:0; transition:opacity .25s ease, transform .25s ease; }
.n8-articles .n8-jr-row:hover .n8-jr-row__arr{ opacity:1; transform:translate(0,-50%); }
.n8-articles .n8-hl--row{ font-size:20px; font-weight:800; line-height:1.06; }
.n8-articles .n8-jr-row .n8-hl--row{ color:#fff; }
.n8-articles .n8-jr-row:hover .n8-hl--row{ color:#fff; }
.n8-articles .n8-jr-row .n8-kick{ margin-bottom:4px; font-size:10px; letter-spacing:2px; color:rgba(255,255,255,.55); }
.n8-articles .n8-jr-row .n8-byl{ color:rgba(255,255,255,.4); }
.n8-articles .n8-jr-row .n8-jr-img--ph{ background:rgba(255,255,255,.12); }
@media (prefers-reduced-motion:reduce){ .n8-articles .n8-jr-row, .n8-articles .n8-jr-row__no, .n8-articles .n8-jr-row__arr, .n8-articles .n8-jr-row__img{ transition:none; } }
/* Petits écrans : colonne numéro resserrée + vignette 72px pour préserver la largeur des titres */
@media (max-width:480px){
  .n8-articles .n8-jr-rail{ padding:16px 14px 4px; }
  .n8-articles .n8-jr-row{ grid-template-columns:20px 72px 1fr; gap:12px; padding-right:8px; }
  .n8-articles .n8-jr-row__no{ font-size:20px; }
  .n8-articles .n8-jr-row__img{ width:72px; }
  .n8-articles .n8-jr-row__arr{ display:none; }
  .n8-articles .n8-hl--row{ font-size:18px; }
}

/* à lire aussi : colonnes */
.n8-articles .n8-jr-more-head{ font-family:"Space Mono",monospace; font-weight:700; font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--jr-ink); text-align:center; border-top:3px double var(--jr-ruledk); border-bottom:1px solid var(--jr-ruledk); padding:10px 0; margin:34px 0 0; }
/* « À lire aussi » — GRILLE DANS LA COLONNE (David 2026-09-19).
   Avant : un rail horizontal bord à bord (100vw), première carte collée au bord gauche,
   dernière coupée par le bord droit. David : « qu'elle soit pas de bord à bord, laisser
   un peu d'espace à droite et à gauche, et une seconde ligne plus bas ».
   Ce bloc n'est donc PLUS un rail : deux lignes alignées sur la même colonne que la une,
   et le lecteur déplie la suite. La règle « rail horizontal = bord à bord » (2026-09-12)
   reste vraie pour les rails qui défilent — « Les plus portées », « Ça va aussi te plaire ».
   Le nombre de colonnes est lu par le JS pour ne jamais révéler une ligne à moitié pleine. */
.n8-articles .n8-jr-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px; padding:18px 0 4px; }
/* Hauteurs égales : la carte occupe toute sa cellule et la date reste alignée en bas
   (sinon deux titres de longueurs différentes décalent tout le bas de la ligne). */
.n8-articles .n8-jr-card{ position:relative; min-width:0; display:flex; }
.n8-articles .n8-jr-card__link{ display:flex; flex-direction:column; flex:1; min-width:0; }
.n8-articles .n8-jr-card .n8-byl{ margin-top:auto; padding-top:8px; }
.n8-articles .n8-jr-card.is-masque{ display:none; }
.n8-articles .n8-jr-card__media{ position:relative; display:block; }
.n8-articles .n8-jr-card__img{ aspect-ratio:16/10; width:100%; object-fit:cover; border-radius:0; border:1px solid var(--jr-ruledk); margin-bottom:11px; filter:brightness(.97) contrast(1.03) saturate(.98); transition:filter .35s ease; }
.n8-articles .n8-jr-card__link:hover .n8-jr-card__img{ filter:brightness(1) contrast(1.02) saturate(1); }
.n8-articles .n8-hl--card{ font-size:18px; font-weight:800; line-height:1.05; }
.n8-articles .n8-jr-card .n8-kick{ margin-bottom:5px; font-size:10px; letter-spacing:2px; }
.n8-articles .n8-jr-img--ph{ background:var(--jr-rule); }

/* Le hook sur une carte : PAS de bandeau sur la vignette (à cette taille il couvrirait
   la photo et deviendrait illisible) — il prend la place du chapô, sous le titre, avec
   le même filet d'ancrage que sur la une pour qu'on le lise comme la même chose. */
.n8-articles .n8-hook--card{ font-family:"Inter",sans-serif; font-size:12.5px; line-height:1.45; color:var(--jr-ink2); margin:8px 0 0; padding-left:9px; border-left:2px solid var(--jr-accent); display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
/* 5 lignes sur téléphone, 3 dès que les colonnes s'élargissent : à 2 colonnes on tient
   ~22 caractères par ligne, un hook de 100 caractères coupé à 3 lignes s'achevait sur
   « les roulements qu… » — une accroche tronquée n'accroche plus rien. */
@media(min-width:600px){ .n8-articles .n8-hook--card{ font-size:13px; line-height:1.5; -webkit-line-clamp:3; } }

/* Déplier = une FLÈCHE, pas un bouton (David 2026-09-19). Aucun cercle autour de
   l'icône (règle DA) : c'est le chevron seul, posé sur un filet, avec une zone de
   touche de 48 px qui déborde de l'icône — visible discret, atteignable au pouce. */
.n8-articles .n8-jr-plus{ display:flex; justify-content:center; padding:10px 0 0; }
.n8-articles .n8-jr-plus.is-fin{ display:none; }
.n8-articles .n8-jr-plus__btn{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:48px; padding:0; background:transparent; border:none; border-top:1px solid var(--jr-rule); border-radius:0; color:var(--jr-ink); cursor:pointer; transition:color .18s,transform .18s; }
.n8-articles .n8-jr-plus__btn:hover{ color:var(--n8-navy); transform:translateY(2px); }
.n8-articles .n8-jr-plus__btn:focus-visible{ outline:2px solid var(--n8-navy); outline-offset:3px; }

@media(min-width:600px){
  .n8-articles .n8-jr-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 20px; }
  .n8-articles .n8-hl--card{ font-size:20px; }
}

/* folio / pied */
.n8-articles .n8-jr-folio{ text-align:center; font-family:"Inter",sans-serif; font-style:italic; font-size:13px; color:var(--jr-mut); border-top:1px solid var(--jr-ruledk); margin-top:30px; padding-top:16px; }
/* Le bouton vers la section dédiée — il n'a jamais eu vocation à être remplacé par la
   flèche : l'un déplie la home, l'autre emmène sur /blog/. (Rétabli le 19/09.) */
.n8-articles .n8-jr-cta{ display:flex; justify-content:center; padding:18px 0 4px; }
.n8-articles .n8-jr-lnk{ font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:18px; letter-spacing:.04em; text-transform:uppercase; color:var(--jr-ink); border-bottom:3px solid var(--jr-ink); padding-bottom:2px; transition:color .15s,border-color .15s; }
.n8-articles .n8-jr-lnk:hover{ color:var(--n8-navy); border-color:var(--n8-navy); }

@media(min-width:900px){
  .n8-articles .n8-jr-front{ grid-template-columns:1.6fr 1fr; gap:0 38px; }
  .n8-articles .n8-jr-lead{ border-bottom:none; border-right:none; padding-right:38px; padding-bottom:0; }
  .n8-articles .n8-jr-rail{ margin-top:0; align-self:start; }
  .n8-articles .n8-jr-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px 24px; }
  .n8-articles .n8-hl--card{ font-size:21px; }
  .n8-articles .n8-hl--lead{ font-size:clamp(44px,4.6vw,66px); }
}

/* ════════════════════════════════════════════════════════════════
   STREET SHOP — refonte 2026-06-04 : vidéo plein écran + produits épurés
   ════════════════════════════════════════════════════════════════ */
.n8-shp{ background:var(--n8-white); padding:0 0 30px; }
/* vidéo plein écran (break-out du conteneur) */
.n8-shp-video{ position:relative; width:100vw; left:50%; margin-left:-50vw; height:min(78vh,720px); overflow:hidden; background:#000; }
.n8-shp-video__el{ width:100%; height:100%; object-fit:cover; display:block; }
.n8-shp-video__ov{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; padding:0 22px 8vh; background:linear-gradient(to top,rgba(10,14,26,.78) 0%,rgba(10,14,26,.12) 45%,rgba(10,14,26,.34) 100%); }
.n8-shp-video__eyebrow{ font-family:"Space Mono",monospace; font-size:12px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.85); margin:0 0 14px; }
.n8-shp .n8-shp-video__title{ font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(56px,12vw,140px); line-height:.86; letter-spacing:.01em; color:#fff; margin:0; text-transform:uppercase; text-shadow:0 6px 34px rgba(0,0,0,.5); }
.n8-shp-video__sub{ font-size:clamp(14px,2vw,18px); color:rgba(255,255,255,.8); margin:14px 0 26px; max-width:46ch; }
.n8-shp-video__cta{ display:inline-block; font-family:"Bebas Neue",Impact,sans-serif; font-size:19px; letter-spacing:2px; text-transform:uppercase; color:#fff!important; border:2px solid #fff; border-radius:10px; padding:13px 34px; background:rgba(255,255,255,.08); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .2s,color .2s; }
.n8-shp-video__cta:hover{ background:#fff; color:var(--n8-navy)!important; }

/* ── Marquee drop-culture (v2 2026-07-04) : bande Bebas plein/creux qui défile.
   Vocabulaire Supreme/Palace, exécution navy NOSK8. Décoratif, coupé si reduced-motion. */
.n8-shp-marquee{ position:relative; width:100vw; left:50%; margin-left:-50vw; overflow:hidden; background:var(--n8-navy); border-bottom:1px solid rgba(255,255,255,.08); padding:13px 0; }
.n8-shp-marquee__track{ display:flex; width:max-content; animation:n8ShpMarquee 32s linear infinite; }
.n8-shp-marquee__seg{ display:flex; align-items:center; gap:26px; padding-right:26px; }
.n8-shp-marquee__seg em{ font-style:normal; font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(19px,2.6vw,27px); letter-spacing:3px; text-transform:uppercase; color:#fff; white-space:nowrap; line-height:1; }
.n8-shp-marquee__o{ color:transparent!important; -webkit-text-stroke:1px rgba(255,255,255,.8); }
@supports not (-webkit-text-stroke:1px #fff){ .n8-shp-marquee__o{ color:rgba(255,255,255,.5)!important; } }
.n8-shp-marquee__seg i{ font-style:normal; color:rgba(255,255,255,.4); font-size:10px; line-height:1; }
@keyframes n8ShpMarquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .n8-shp-marquee__track{ animation:none; } }

/* ── LE DROP : mise en scène de la pièce du moment. Panneau navy, mot-titre géant en creux,
   produit sur tuile inclinée qui se redresse au survol, prix orange néon (autorisé DA : prix
   produits), CTA blanc affirmé. Le bouton EST un .n8-shp-card__add → même flux panier. */
.n8-shp-drop{ position:relative; display:grid; grid-template-columns:1fr; gap:30px; margin:46px 0 10px; padding:44px 26px 40px; border-radius:20px; overflow:hidden; background:linear-gradient(150deg,#1a2744 0%,#151f38 55%,#111827 100%); }
.n8-shp-drop::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.07; background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence baseFrequency=%270.9%27 numOctaves=%273%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%270.5%27/%3E%3C/svg%3E"); }
.n8-shp-drop::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 70% 60% at 22% 30%, rgba(42,58,92,.55), transparent 65%); }
.n8-shp-drop__word{ position:absolute; z-index:1; bottom:-8px; left:12px; font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(88px,17vw,220px); line-height:.82; letter-spacing:.02em; text-transform:uppercase; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.13); pointer-events:none; user-select:none; white-space:nowrap; }
@supports not (-webkit-text-stroke:1px #fff){ .n8-shp-drop__word{ color:rgba(255,255,255,.05); } }
.n8-shp-drop__media-col{ position:relative; z-index:2; display:flex; justify-content:center; align-items:center; }
.n8-shp-drop .n8-shp-card__media{ width:min(78%,380px); aspect-ratio:3/4; border-radius:16px; border:1px solid rgba(255,255,255,.16); transform:rotate(-2.5deg); box-shadow:0 30px 60px rgba(0,0,0,.45); transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease, border-color .35s ease; }
.n8-shp-drop:hover .n8-shp-card__media{ transform:rotate(0deg) translateY(-4px); box-shadow:0 38px 72px rgba(0,0,0,.5); border-color:rgba(255,255,255,.28); }
.n8-shp-drop .n8-shp-card__media::after{ display:none; }
.n8-shp-drop__body{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; }
.n8-shp-drop__eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:"Space Mono",monospace; font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:6px 13px; margin:0; }
.n8-shp-drop__pulse{ width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 8px rgba(255,255,255,.7); animation:pulse-dot 1.6s ease-in-out infinite; }
/* Spécificité .n8-shp + classe : bat le `.nosk8-home h3{color:navy}` générique (sinon titre navy sur navy = invisible) */
.n8-shp .n8-shp-drop__name{ font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(42px,7vw,78px); color:#fff; letter-spacing:1px; line-height:.92; margin:0; text-transform:uppercase; overflow-wrap:break-word; max-width:100%; }
.n8-shp-drop__desc{ font-family:"Inter",sans-serif; font-size:15px; line-height:1.65; color:rgba(255,255,255,.75); margin:0; max-width:46ch; }
.n8-shp-drop__meta{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.n8-shp-drop__price{ font-family:"Space Mono",monospace; font-size:24px; font-weight:700; color:#fff; white-space:nowrap; }
.n8-shp-drop__old{ font-size:14px; color:rgba(255,255,255,.45); text-decoration:line-through; font-weight:400; margin-right:4px; }
.n8-shp-drop__tag{ font-family:"Space Mono",monospace; font-size:9px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,.85); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); padding:5px 10px; border-radius:6px; }
.n8-shp-drop__ctas{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:6px; }
/* Le CTA drop neutralise le style overlay du .n8-shp-card__add de grille (static, toujours visible) */
.n8-shp-drop .n8-shp-card__add{ position:static; opacity:1; transform:none; display:inline-flex; align-items:center; justify-content:center; width:auto; background:#fff; color:var(--n8-navy); font-family:"Bebas Neue",Impact,sans-serif; font-size:16px; letter-spacing:2px; padding:14px 30px; border-radius:999px; -webkit-backdrop-filter:none; backdrop-filter:none; transition:background .2s, transform .2s, box-shadow .25s; }
.n8-shp-drop .n8-shp-card__add:hover{ background:#e8ecf4; transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.35); }
.n8-shp-drop .n8-shp-card__add.is-added{ background:#111111; color:#fff; }
.n8-shp-drop__view{ font-family:"Space Mono",monospace; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.85); border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:3px; transition:color .2s, border-color .2s; }
.n8-shp-drop__view:hover{ color:#fff; border-color:#fff; }
@media (min-width:900px){
    .n8-shp-drop{ grid-template-columns:1fr 1.15fr; padding:60px 56px; gap:52px; margin:56px 0 14px; }
    .n8-shp-drop__word{ top:auto; bottom:-12px; left:24px; }
}
@media (prefers-reduced-motion:reduce){ .n8-shp-drop .n8-shp-card__media{ transform:none; transition:none; } .n8-shp-drop__pulse{ animation:none; } }

/* ── Apparition au scroll (classe .is-pre posée par JS seulement si IntersectionObserver dispo) ── */
.n8-shp [data-shp-reveal]{ transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.n8-shp [data-shp-reveal].is-pre{ opacity:0; transform:translateY(26px); }
@media (prefers-reduced-motion:reduce){ .n8-shp [data-shp-reveal]{ transition:none; } }

/* ── Grille produits — montée en gamme 2026-07-04, façon BBC Ice Cream :
   whitespace généreux, produit posé sur tuile dégradée (palette navy),
   type clean Inter + prix Space Mono, CTA navy sobres. Âme skate = micro-
   signature « N8 » qui se révèle au survol. Logique panier/favoris INTACTE. */
.n8-shp-inner{ max-width:1240px; margin:0 auto; padding:0 24px; }
.n8-shp-intro{ text-align:center; padding:72px 0 10px; }
.n8-shp-intro__eyebrow{ display:flex; align-items:center; justify-content:center; gap:14px; font-family:"Space Mono",monospace; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--n8-muted); margin:0 0 12px; }
.n8-shp-intro__eyebrow::before, .n8-shp-intro__eyebrow::after{ content:""; width:38px; height:1px; background:var(--n8-border); }
.n8-shp-intro__title{ font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(34px,5vw,54px); color:var(--n8-navy); margin:0; letter-spacing:2px; line-height:1; }
.n8-shp-intro__sub{ color:var(--n8-text2); font-size:15px; margin:12px auto 0; max-width:52ch; }

.n8-shp-cat{ padding:52px 0 0; }
.n8-shp-cat__head{ position:relative; display:flex; align-items:baseline; gap:14px; border-bottom:1px solid var(--n8-border); padding-bottom:14px; margin-bottom:32px; }
.n8-shp-cat__head::after{ content:""; position:absolute; left:0; bottom:-1px; width:56px; height:2px; background:var(--n8-navy); }
/* Numéral d'index en creux — rythme de catalogue drop-culture */
.n8-shp-cat__idx{ font-family:"Barlow Condensed","Bebas Neue",sans-serif; font-weight:800; font-size:clamp(34px,4.6vw,52px); line-height:.8; color:transparent; -webkit-text-stroke:1.2px rgba(26,39,68,.38); font-variant-numeric:tabular-nums; user-select:none; }
@supports not (-webkit-text-stroke:1px #000){ .n8-shp-cat__idx{ color:rgba(26,39,68,.22); } }
.n8-shp-cat__name{ font-family:"Bebas Neue",Impact,sans-serif; font-size:clamp(30px,4.4vw,46px); letter-spacing:1.5px; color:var(--n8-navy); margin:0; text-transform:uppercase; line-height:1; }
.n8-shp-cat__count{ font-family:"Space Mono",monospace; font-size:11px; color:var(--n8-muted); letter-spacing:1px; }
.n8-shp-cat__all{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:"Space Mono",monospace; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--n8-navy); transition:color .2s; }
.n8-shp-cat__all::after{ content:"\2192"; transition:transform .2s ease; }
.n8-shp-cat__all:hover{ color:var(--n8-navy-light); }
.n8-shp-cat__all:hover::after{ transform:translateX(4px); }

/* ── GRILLE produits « Les plus portées » (David 2026-09-19) ───────────────────────
   Était un rail horizontal en débord bord-à-bord (margin:0 -24px, scroll-snap).
   David : « fais en sorte qu'on ait un rendu qui s'apparente à ce qu'on a fait pour
   les articles […] que la ligne ne fasse pas du bord à bord, qu'on ait deux lignes,
   et qu'on puisse ouvrir plus ou aller directement dans le Shop. »
   Même dispositif que « À lire aussi » : 2/3/4 colonnes dans la colonne, deux lignes
   visibles, une flèche pour ouvrir, le bouton boutique juste en dessous.
   ⚠️ `.n8-shp-grid` GARDE son nom : le JS panier cible `.n8-shp-grid .n8-shp-card__media img`.
   La règle « rail produits = bord à bord » (2026-09-12) ne vaut plus ici — ce n'est plus
   un rail ; elle reste vraie pour « Ça va aussi te plaire » (fiche produit). */
.n8-shp-rail{ position:relative; }
.n8-shp-grid{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px;
    margin:0; padding:6px 0 4px;
}
.n8-shp-grid > .n8-shp-card{ min-width:0; }
.n8-shp-grid > .n8-shp-card.is-masque{ display:none; }
/* La flèche du shop reprend celle des articles (.n8-jr-plus__btn), hors contexte .n8-articles. */
.n8-shp-plus{ display:flex; justify-content:center; padding:10px 0 0; }
.n8-shp-plus.is-fin{ display:none; }
.n8-shp-plus .n8-jr-plus__btn{ display:inline-flex; align-items:center; justify-content:center; width:64px; height:48px; padding:0; background:transparent; border:none; border-top:1px solid var(--n8-border); border-radius:0; color:var(--n8-navy); cursor:pointer; transition:color .18s,transform .18s; }
.n8-shp-plus .n8-jr-plus__btn:hover{ transform:translateY(2px); }
.n8-shp-plus .n8-jr-plus__btn:focus-visible{ outline:2px solid var(--n8-navy); outline-offset:3px; }
/* Le pied de section se resserre : il suit la flèche au lieu d'ouvrir un grand vide. */
.n8-shp-rail--grille + .n8-shp-plus + .n8-shp-foot{ padding-top:22px; }
/* min-width:0 OBLIGATOIRE : sans lui, un nom nowrap gonfle sa colonne de grille (mobile cassé) */
.n8-shp-card{ position:relative; min-width:0; }
/* Tuile : ancre de positionnement (fav + panier calés dessus, jamais décalés par un nom long) */
.n8-shp-card__tile{ position:relative; border-radius:14px; }
.n8-shp-card__media{ position:relative; display:block; aspect-ratio:3/4; overflow:hidden; border-radius:14px; border:1px solid #e8ecf3; background:linear-gradient(168deg,#f7f9fc 0%,#eef1f7 55%,#e3e8f1 100%); transition:box-shadow .35s ease, border-color .35s ease, transform .35s ease; }
.n8-shp-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.n8-shp-card:hover .n8-shp-card__media{ box-shadow:0 18px 44px rgba(26,39,68,.15); border-color:#dde3ee; transform:translateY(-3px); }
.n8-shp-card:hover .n8-shp-card__media img{ transform:scale(1.05); }
/* Micro-signature skate : chip « N8 » qui se révèle au survol, bas-droite de la tuile */
.n8-shp-card__media::after{ content:"N8"; position:absolute; right:12px; bottom:12px; font-family:"Bebas Neue",Impact,sans-serif; font-size:12px; letter-spacing:1.5px; color:var(--n8-navy); background:rgba(255,255,255,.9); padding:3px 8px; border-radius:5px; opacity:0; transform:translateY(4px); transition:opacity .3s ease, transform .3s ease; pointer-events:none; }
.n8-shp-card:hover .n8-shp-card__media::after{ opacity:1; transform:none; }
.n8-shp-card__mif{ position:absolute; top:12px; left:12px; z-index:2; font-family:"Space Mono",monospace; font-size:8.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; background:var(--n8-navy); color:#fff; padding:4px 9px; border-radius:5px; }
/* Étiquette promo : CHARTE, jamais le rose néon (David 2026-09-12 : « ça correspond pas du tout à la couleur du thème ») */
.n8-shp-card__sale{ position:absolute; top:12px; left:50%; z-index:2; transform:translateX(-50%); font-family:"Space Mono",monospace; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; background:var(--n8-navy); color:#fff; padding:4px 10px; border-radius:999px; }
.n8-shp-card__fav{ position:absolute; top:8px; right:8px; width:36px; height:36px; padding:0; background:none; border:none; cursor:pointer; opacity:0; transition:opacity .25s, transform .2s; z-index:3; }
.n8-shp-card:hover .n8-shp-card__fav{ opacity:1; }
.n8-shp-card__fav:active{ transform:scale(.92); }
/* CTA panier : barre pleine largeur ancrée au bas de la tuile, révélée au survol (desktop) */
.n8-shp-card__add{ position:absolute; left:12px; right:12px; bottom:12px; display:block; width:auto; font-family:"Space Mono",monospace; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#fff; background:rgba(26,39,68,.95); border:none; border-radius:999px; padding:12px 0; cursor:pointer; opacity:0; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease, background .2s ease; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); z-index:2; }
.n8-shp-card:hover .n8-shp-card__add{ opacity:1; transform:none; }
.n8-shp-card__add:hover{ background:#2a3a5c; }
.n8-shp-card__add.is-added{ background:#111111; }
/* Tactile (pas de hover) : panier + favori TOUJOURS visibles, sinon impossibles à atteindre */
@media (hover:none){
    .n8-shp-card__add{ opacity:1; transform:none; }
    .n8-shp-card__fav{ opacity:1; }
    .n8-shp-card__media::after{ display:none; }
}
/* En grille, la carte est deux fois plus étroite qu'en rail : un nom sur une seule
   ligne se coupait à tous les coups (« TEE-SHIRT NOSK8®… »). Deux lignes, prix dessous ;
   dès 680 px la carte redevient assez large pour la présentation en ligne. */
.n8-shp-card__body{ padding:14px 2px 0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.n8-shp-card__name{ font-family:"Inter",sans-serif; font-size:13.5px; font-weight:600; color:var(--n8-navy); margin:0; line-height:1.35; min-width:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s; }
@media(min-width:680px){
  .n8-shp-card__body{ flex-direction:row; justify-content:space-between; align-items:baseline; gap:12px; }
  .n8-shp-card__name{ -webkit-line-clamp:1; }
}
.n8-shp-card__name:hover{ color:var(--n8-navy-light); }
.n8-shp-card__price{ font-family:"Space Mono",monospace; font-size:13.5px; font-weight:700; color:var(--n8-navy); white-space:nowrap; }
.n8-shp-card__old{ color:var(--n8-muted); text-decoration:line-through; font-size:11.5px; font-weight:400; margin-right:2px; }
.n8-shp-foot{ display:flex; justify-content:center; padding:56px 0 24px; }
.n8-shp-foot__btn{ font-family:"Bebas Neue",Impact,sans-serif; font-size:18px; letter-spacing:2px; text-transform:uppercase; color:#fff!important; background:var(--n8-navy); border:2px solid var(--n8-navy); border-radius:9px; padding:14px 44px; white-space:nowrap; transition:background .2s, transform .2s, box-shadow .25s; }
/* Sur les écrans étroits, « VOIR TOUTE LA BOUTIQUE → » renvoyait sa flèche à la ligne. */
@media(max-width:520px){ .n8-shp-foot__btn{ font-size:16px; letter-spacing:1.4px; padding:14px 24px; } }
.n8-shp-foot__btn:hover{ background:var(--n8-navy-light); border-color:var(--n8-navy-light); transform:translateY(-2px); box-shadow:0 10px 26px rgba(26,39,68,.22); }
@media(min-width:680px){
    .n8-shp-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 20px; }
}
@media(min-width:1000px){
    .n8-shp-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px 24px; }
}
/* Les flèches latérales et les fondus de bord appartenaient au rail : une grille ne
   défile pas, ils n'ont plus d'objet (markup retiré le 19/09). */
@media(max-width:520px){
    .n8-shp-cat__count{ display:none; }
    .n8-shp-card__add{ left:8px; right:8px; bottom:8px; padding:11px 0; font-size:10px; }
}
@media (prefers-reduced-motion:reduce){
    .n8-shp-card__media, .n8-shp-card__media img, .n8-shp-card__media::after, .n8-shp-card__add, .n8-shp-foot__btn{ transition:none; }
}

/* ════════════════════════════════════════════════════════════════
   SPOTS — FORCE apparence maquette (CSS pur, markup/JS/globe INTOUCHÉS)
   Sélecteurs #spots (ID = spécificité 1,x,x) → battent TOUT nosk8-spots-ux.css
   à tous les breakpoints, même ses !important. Globe non concerné (CSS only).
   ════════════════════════════════════════════════════════════════ */
/* liste en colonne unique (annule la grille 2-col mobile) */
#spots .n8-spots-vcarousel{ display:flex !important; flex-direction:column !important; gap:0 !important; }
/* carte = ligne : vignette + (nom/ville) + pastille type à droite */
#spots .n8-vcard{ display:grid !important; grid-template-columns:78px 1fr !important; gap:14px !important; align-items:center !important; position:relative !important; width:100% !important; max-width:100% !important; height:auto !important; padding:11px 100px 11px 10px !important; margin:0 !important; border:none !important; border-bottom:1px solid rgba(255,255,255,.08) !important; border-radius:9px !important; background:transparent !important; box-shadow:none !important; transition:background .15s !important; flex-direction:unset !important; cursor:pointer !important; }
#spots .n8-vcard:hover{ background:rgba(95,214,196,.10) !important; box-shadow:inset 3px 0 0 #5fd6c4 !important; }
#spots .n8-vcard.highlighted{ background:rgba(95,214,196,.18) !important; box-shadow:inset 3px 0 0 #5fd6c4 !important; }
#spots .n8-vcard.dimmed{ opacity:.4 !important; }
/* vignette carrée 78px (annule image-haut mobile) */
#spots .n8-vcard__img{ width:78px !important; height:78px !important; min-height:0 !important; aspect-ratio:1/1 !important; border-radius:7px !important; margin:0 !important; overflow:hidden !important; }
#spots .n8-vcard__img img,#spots .n8-vcard__ph{ width:100% !important; height:100% !important; object-fit:cover !important; }
/* infos à plat */
#spots .n8-vcard__info{ padding:0 !important; display:block !important; min-width:0 !important; }
#spots .n8-vcard__name{ font-family:"Barlow Condensed",sans-serif !important; font-weight:700 !important; font-size:18px !important; line-height:1.05 !important; color:#fff !important; letter-spacing:0 !important; margin:0 !important; white-space:normal !important; }
#spots .n8-vcard__city{ font-family:"Space Mono",monospace !important; font-size:10px !important; letter-spacing:.5px !important; text-transform:uppercase !important; color:rgba(255,255,255,.55) !important; margin:4px 0 0 !important; }
/* pastille type teal, désormais EN LIGNE sous la ville (la zone droite accueille les actions) */
#spots .n8-vcard__row{ display:block !important; margin:5px 0 0 !important; }
#spots .n8-vcard__type{ display:inline-block !important; font-family:"Space Mono",monospace !important; font-size:9px !important; font-weight:700 !important; letter-spacing:1px !important; text-transform:uppercase !important; color:#5fd6c4 !important; background:transparent !important; border:1px solid rgba(95,214,196,.4) !important; border-radius:5px !important; padding:2px 6px !important; }
/* masquer le superflu (comme la maquette) */
#spots .n8-vcard__diff,#spots .n8-vcard__iconic{ display:none !important; }

/* ── Actions rapides à droite de chaque ligne : "Y aller" (itinéraire) + Partager ──
   Finalité mobile : 1 tap pour se rendre au spot ou l'envoyer à un pote. */
#spots .n8-vcard__cta{ display:flex !important; flex-direction:column !important; gap:6px !important; position:absolute !important; right:10px !important; top:50% !important; transform:translateY(-50%) !important; margin:0 !important; width:80px !important; }
#spots .n8-vcard__go{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:5px !important; width:100% !important; min-height:32px !important; padding:6px 6px !important; background:#1a2744 !important; color:#fff !important; border:1px solid #2a3a5c !important; border-radius:8px !important; font-family:"Space Mono",monospace !important; font-size:9.5px !important; font-weight:700 !important; letter-spacing:.5px !important; text-transform:uppercase !important; text-decoration:none !important; line-height:1 !important; white-space:nowrap !important; transition:background .15s !important; }
#spots .n8-vcard__go:hover{ background:#2a3a5c !important; color:#fff !important; }
#spots .n8-vcard__go:active{ transform:scale(.96) !important; }
#spots .n8-vcard__go svg{ flex:none !important; width:13px !important; height:13px !important; }
#spots .n8-vcard__share{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:28px !important; background:transparent !important; color:rgba(255,255,255,.7) !important; border:1px solid rgba(255,255,255,.2) !important; border-radius:8px !important; cursor:pointer !important; transition:background .15s,color .15s,border-color .15s !important; }
#spots .n8-vcard__share:hover{ background:rgba(255,255,255,.1) !important; color:#fff !important; border-color:rgba(255,255,255,.35) !important; }
#spots .n8-vcard__share:active{ transform:scale(.94) !important; }
/* favori conservé mais discret, posé sur la vignette */
#spots .n8-vcard__fav{ top:14px !important; left:14px !important; right:auto !important; width:26px !important; height:26px !important; background:rgba(0,0,0,.45) !important; border-radius:7px !important; }
/* header : stats sur une ligne — chiffres cyan néon (néon autorisé sur STATS, charte DA) */
#spots .n8-spots-meta{ gap:18px !important; }
#spots .n8-spots-meta .n8-spots-stat{ flex-direction:row !important; align-items:baseline !important; gap:6px !important; }
#spots .n8-spots-meta .n8-spots-stat__num{ font-size:22px !important; color:#00f5ff !important; text-shadow:0 0 14px rgba(0,245,255,.4); }
#spots .n8-spots-meta .n8-spots-stat__label{ font-size:9px !important; letter-spacing:1.5px !important; color:rgba(255,255,255,.5) !important; }

/* ── Cadre « viseur » sur le panneau carte : 4 ticks d'angle, instrument premium.
   Décoratif pur (pointer-events:none), sous les contrôles (z-index < 520). */
#spots .n8-spots-col-map::after{
  content:""; position:absolute; inset:9px; pointer-events:none; z-index:512; border-radius:8px;
  background:
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) left top / 14px 2px no-repeat,
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) left top / 2px 14px no-repeat,
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) right top / 14px 2px no-repeat,
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) right top / 2px 14px no-repeat,
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) left bottom / 14px 2px no-repeat,
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) left bottom / 2px 14px no-repeat,
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) right bottom / 14px 2px no-repeat,
    linear-gradient(rgba(255,255,255,.4),rgba(255,255,255,.4)) right bottom / 2px 14px no-repeat;
}

/* ── Fiabilité & polish spots (2026-07-04) ─────────────────────────────────
   Zéro friction : focus clavier visible, cibles tactiles élargies, empty state,
   pas de cercle autour des icônes. Fonctionnel (JS/globe/filtres) INTOUCHÉ. */
/* Le reset `outline:none` global de la section tuait la nav clavier → on rend un focus visible propre */
#spots button:focus-visible,
#spots a:focus-visible,
#spots [tabindex]:focus-visible { outline:2px solid rgba(95,214,196,.85) !important; outline-offset:2px !important; border-radius:8px; }
#spots .n8-vcard:focus-visible { outline:2px solid rgba(95,214,196,.85) !important; outline-offset:-2px !important; }
/* Favori sur vignette : cible tactile élargie (26→28px), coins arrondis (pas un cercle) */
#spots .n8-vcard__fav{ width:28px !important; height:28px !important; border-radius:8px !important; }
#spots .n8-vcard__fav.is-fav{ color:var(--n8-fav,#ff5560) !important; }
#spots .n8-vcard__fav.is-fav svg{ fill:var(--n8-fav,#ff5560) !important; stroke:var(--n8-fav-deep,#e6404b) !important; }
/* Croix du panneau détail : carré arrondi (règle DA : jamais de cercle autour d'une icône) */
#spots .n8-spot-panel__close{ border-radius:10px !important; }
/* Empty state injecté dans la liste (voir section-spots.php) */
#spots .n8-spots-empty{ margin:6px; border:1px dashed rgba(255,255,255,.15); border-radius:10px; }
/* Distance sur les cards : lisible, monospace, calée sur la vignette */
/* top:auto obligatoire : la règle de base (nosk8-spots-ux.css) pose top:8px — sans l'annuler,
   top+bottom coexistent et la pastille s'étire sur toute la hauteur de la carte */
#spots .n8-vcard__dist:not([hidden]){ position:absolute; left:10px; top:auto; bottom:14px; z-index:2; font-family:"Space Mono",monospace; font-size:9px; font-weight:700; letter-spacing:.5px; color:#0a0f1a; background:rgba(255,255,255,.92); padding:2px 6px; border-radius:5px; }

/* ══ STREET SHOP v3 COURTE (David 2026-09-06) — en-tête · pièce du moment · un rail · confiance. Verre liquide = ADN. ══ */
.n8-shp--v3{padding:44px 0 36px}
.n8-shp--v3 .n8-shp-inner{max-width:1240px;margin:0 auto;padding:0 20px}
.n8-sh3__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 18px}
.n8-sh3__eyebrow{margin:0 0 6px;font-family:"Space Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:2.5px;text-transform:uppercase;color:#888888;display:flex;align-items:center;gap:8px}
.n8-sh3__title{margin:0;font-family:"Bebas Neue",Impact,sans-serif;font-size:clamp(36px,7vw,56px);line-height:.95;color:#111111}
.n8-sh3__sub{margin:6px 0 0;font-family:Inter,-apple-system,sans-serif;font-size:14px;line-height:1.5;color:#4a5970;max-width:520px}
/* verre liquide (ADN) — sur fond blanc, teinte navy plus soutenue pour le contraste */
.n8-glass{position:relative;isolation:isolate;overflow:hidden;--mx:50%;--my:50%;color:#fff;border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.07) 48%,rgba(255,255,255,.2)),rgba(26,39,68,.82);border:1px solid rgba(255,255,255,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(255,255,255,.1),inset 0 0 18px rgba(255,255,255,.08),0 12px 32px rgba(10,15,26,.28);backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,background .45s ease;will-change:transform}
.n8-glass::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .35s ease;background:radial-gradient(160px 100px at var(--mx) var(--my),rgba(255,255,255,.55),rgba(255,255,255,.12) 45%,transparent 72%)}
.n8-glass::after{content:"";position:absolute;left:var(--mx);top:var(--my);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:rgba(255,255,255,.65);box-shadow:0 0 0 6px rgba(255,255,255,.25);opacity:0;transform:scale(0);pointer-events:none;z-index:0}
.n8-glass>*{position:relative;z-index:1}
.n8-glass:hover{transform:translateY(-1px) scale(1.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(255,255,255,.12),inset 0 0 22px rgba(255,255,255,.12),0 16px 40px rgba(10,15,26,.34);background:linear-gradient(135deg,rgba(255,255,255,.36),rgba(255,255,255,.12) 48%,rgba(255,255,255,.26)),rgba(26,39,68,.86);color:#fff}
.n8-glass:hover::before{opacity:1}
.n8-glass.is-liquid{animation:n8-sh3-liquid .9s cubic-bezier(.2,.9,.3,1.15)}
.n8-glass.is-liquid::after{animation:n8-sh3-ripple .9s ease-out}
@keyframes n8-sh3-liquid{0%{transform:scale(1);border-radius:999px}18%{transform:scale(1.1,.86);border-radius:44% 56% 50% 50%/60% 42% 58% 40%}40%{transform:scale(.94,1.08);border-radius:55% 45% 44% 56%/42% 58% 42% 58%}62%{transform:scale(1.04,.98);border-radius:48% 52% 53% 47%/52% 48% 52% 48%}82%{transform:scale(.99,1.01);border-radius:999px}100%{transform:scale(1)}}
@keyframes n8-sh3-ripple{0%{transform:scale(0);opacity:.85}60%{opacity:.35}100%{transform:scale(30);opacity:0}}
.n8-sh3__cta{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;text-decoration:none;font-family:Inter,-apple-system,sans-serif;font-size:14px;font-weight:700;white-space:nowrap;flex:0 0 auto}
.n8-sh3__cta svg{width:18px;height:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.n8-sh3__cta:hover svg{transform:scale(1.15)}
/* pièce du moment : compacte, image à gauche */
.n8-shp--v3 .n8-sh3__drop{display:grid;grid-template-columns:42% 1fr;gap:14px;align-items:center;margin:0 0 26px;padding:12px;border:1px solid #e3e6ec;border-radius:18px;background:#fff;box-shadow:0 8px 26px rgba(26,39,68,.08)}
.n8-shp--v3 .n8-sh3__drop-media{display:block;aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:1px solid #e8ecf3;background:#f5f7fb}
.n8-shp--v3 .n8-sh3__drop-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.n8-shp--v3 .n8-sh3__drop:hover .n8-sh3__drop-media img{transform:scale(1.04)}
.n8-sh3__drop-body{min-width:0;display:flex;flex-direction:column;gap:6px}
.n8-sh3__pulse{width:8px;height:8px;border-radius:50%;background:#1a2744;box-shadow:0 0 0 0 rgba(26,39,68,.5);animation:n8-sh3-pulse 1.8s ease-out infinite}
@keyframes n8-sh3-pulse{0%{box-shadow:0 0 0 0 rgba(26,39,68,.45)}100%{box-shadow:0 0 0 10px rgba(26,39,68,0)}}
.n8-sh3__drop-name{margin:0;font-family:"Bebas Neue",Impact,sans-serif;font-size:clamp(24px,5.5vw,34px);line-height:1;letter-spacing:.01em}
.n8-sh3__drop-name a{color:#111111;text-decoration:none}
.n8-sh3__drop-desc{margin:0;font-family:Inter,-apple-system,sans-serif;font-size:13px;line-height:1.5;color:#4a5970;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.n8-sh3__price{margin:2px 0 0;display:flex;align-items:center;gap:10px;font-family:"Space Mono",ui-monospace,monospace;font-size:16px;color:#111111}
.n8-sh3__price b{font-weight:700}
.n8-sh3__old{text-decoration:line-through;color:#888888;font-size:13px}
.n8-sh3__tag{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#888888;border:1px solid #d5dae3;border-radius:6px;padding:3px 7px}
.n8-sh3__drop-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px}
.n8-shp--v3 .n8-sh3__add{position:static;opacity:1;transform:none;display:inline-flex;align-items:center;justify-content:center;width:auto;height:44px;padding:0 18px;font-family:Inter,-apple-system,sans-serif;font-size:14px;font-weight:700;text-transform:none;letter-spacing:0;cursor:pointer;border-radius:999px}
.n8-shp--v3 .n8-sh3__add.is-added{background:#111111;color:#fff}
.n8-sh3__view{font-family:Inter,-apple-system,sans-serif;font-size:13.5px;font-weight:600;color:#1a2744;text-decoration:underline;text-underline-offset:3px}
/* rail */
.n8-sh3__railhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.n8-sh3__h3{margin:0;font-family:"Bebas Neue",Impact,sans-serif;font-size:26px;letter-spacing:.02em;color:#111111;white-space:nowrap}
.n8-sh3__chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0}
.n8-sh3__chips::-webkit-scrollbar{display:none}
.n8-sh3__chip{flex:0 0 auto;height:32px;display:inline-flex;align-items:center;padding:0 12px;border:1px solid #d5dae3;border-radius:999px;font-family:Inter,-apple-system,sans-serif;font-size:12.5px;font-weight:600;color:#1a2744;text-decoration:none;background:#fff;transition:background .15s ease,color .15s ease}
.n8-sh3__chip:hover{background:#1a2744;color:#fff;border-color:#1a2744}
.n8-shp--v3 .n8-shp-grid > .n8-shp-card{flex:0 0 46%}
.n8-shp--v3 .n8-shp-card__add{opacity:1;transform:none}
/* confiance */
.n8-sh3__trust{list-style:none;margin:22px 0 0;padding:14px 0 0;border-top:1px solid #e3e6ec;display:flex;flex-wrap:wrap;gap:8px 22px}
.n8-sh3__trust li{display:inline-flex;align-items:center;gap:8px;font-family:Inter,-apple-system,sans-serif;font-size:12.5px;color:#4a5970}
.n8-sh3__trust svg{width:16px;height:16px;color:#1a2744;flex:0 0 auto}
@media(min-width:760px){.n8-shp--v3{padding:64px 0 48px}.n8-shp--v3 .n8-shp-inner{padding:0 24px}.n8-shp--v3 .n8-sh3__drop{grid-template-columns:300px 1fr;gap:26px;padding:16px}.n8-shp--v3 .n8-shp-grid > .n8-shp-card{flex:0 0 22%}.n8-sh3__trust li{font-size:13.5px}}
@media(min-width:1100px){.n8-shp--v3 .n8-shp-grid > .n8-shp-card{flex:0 0 18%}}
@media(prefers-reduced-motion:reduce){.n8-glass,.n8-glass::before,.n8-glass::after,.n8-sh3__pulse{animation:none!important;transition:none!important}}

.n8-sh3__drop-name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:759px){.n8-sh3__drop-name{font-size:clamp(20px,5vw,26px)}}

/* Vidéo shop v3 : pleine largeur, sans surcouche, hauteur contenue */
.n8-shp--v3 .n8-shp-video--pure{height:min(62vh,560px);margin:0 0 30px -50vw}
.n8-shp--v3{padding-top:0}
@media(min-width:760px){.n8-shp--v3{padding-top:0}.n8-shp--v3 .n8-shp-video--pure{height:min(70vh,640px);margin:0 0 44px -50vw}}

/* ── Le breakout 100vw des produits est RETIRÉ (David 2026-09-19) ────────────────
   Il datait du 12/09 (« fais pareil que les articles » — les articles étaient alors un
   rail bord à bord). Les deux blocs ont changé ensemble le 19/09 : « que la ligne ne
   fasse pas du bord à bord […] deux lignes […] ouvrir plus ou aller dans le Shop ».
   Les pièces vivent maintenant dans la colonne, comme le reste de la section.
   ⚠️ Ne pas remettre `width:100vw` ici : la règle bord-à-bord ne concerne plus que les
   rails qui DÉFILENT, et il n'y en a plus dans cette section. */
.n8-shp--v3 .n8-shp-rail{ width:auto; margin-left:0; margin-right:0; }