/* NOSK8 — Single article template v2 (refonte 2026-05-11)
   Inspirations : The Verge (typo condensed lourde, hairline borders, hero magazine),
   Medium/Substack (drop cap, lecture confort), Pinterest (scroll horizontal snap).
   Palette résiliante : noir #0a0f1a · bleu nuit #1a2744 · blanc · gris.
   Mobile-first absolu. Pas de sticky bottom mobile. */

:root {
    --n8-ink:        #0a0f1a;
    --n8-ink-2:      #1a2744;
    --n8-ink-3:      #4a5970;
    --n8-ink-soft:   #7a869c;
    --n8-bg:         #ffffff;
    --n8-bg-soft:    #f7f8fa;
    --n8-bg-2:       #eef0f4;
    --n8-line:       #e3e6ec;
    --n8-line-strong:#0a0f1a;
    --n8-accent:     #1a2744;
    --n8-radius:     8px;
    --n8-radius-lg:  16px;
    --n8-shadow-sm:  0 1px 2px rgba(10,15,26,.05);
    --n8-shadow-md:  0 10px 30px rgba(10,15,26,.08);
    --n8-trans:      cubic-bezier(.4,0,.2,1);
    --n8-sans:       "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --n8-condensed:  "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
    --n8-display:    "Barlow Condensed", "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
    --n8-reading:    "Source Serif Pro", "Lora", Georgia, serif;
}

/* ─── Progress bar (sticky top) ─────────────────────────────────── */
.nosk8-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--n8-bg-2);
    z-index: 9999;
    pointer-events: none;
}
.nosk8-progress::before {
    content: "";
    display: block;
    height: 100%;
    width: var(--n8-progress-w, 0%);
    background: var(--n8-ink);
    transition: width 80ms linear;
}

/* ─── Container ─────────────────────────────────────────────────── */
.nosk8-article__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 18px;
    box-sizing: border-box;
}
@media (min-width: 720px) { .nosk8-article__container { padding: 0 32px; } }

/* ─── Article wrapper ───────────────────────────────────────────── */
.nosk8-article {
    background: var(--n8-bg);
    color: var(--n8-ink);
    font-family: var(--n8-sans);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ─── Hero magazine-style (titre + image côte à côte desktop) ──── */
.nosk8-article__hero-magazine {
    padding: 28px 0 36px;
    border-bottom: 1px solid var(--n8-line);
}
.nosk8-article__hero-magazine .nosk8-article__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
}
@media (min-width: 880px) {
    .nosk8-article__hero-magazine .nosk8-article__container {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 48px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}
.nosk8-article__hero-left { display: flex; flex-direction: column; }
.nosk8-breadcrumb {
    font-size: 12px;
    font-family: var(--n8-condensed);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--n8-ink-soft);
    margin-bottom: 16px;
}
.nosk8-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.nosk8-breadcrumb a { color: var(--n8-ink-3); text-decoration: none; }
.nosk8-breadcrumb a:hover { color: var(--n8-ink); }
.nosk8-breadcrumb__sep { color: var(--n8-line); margin: 0 6px; }

.nosk8-article__title {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: clamp(30px, 6.5vw, 56px);
    line-height: 1.04;
    letter-spacing: -0.018em;
    margin: 0 0 18px;
    color: var(--n8-ink);
}

.nosk8-article__meta {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px;
    font-size: 13px;
    font-family: var(--n8-condensed);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--n8-ink-soft);
    margin-bottom: 14px;
}
.nosk8-article__cat {
    background: var(--n8-ink);
    color: var(--n8-bg);
    padding: 5px 11px;
    border-radius: 3px;
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background .15s var(--n8-trans);
}
.nosk8-article__cat:hover { background: var(--n8-ink-2); }
.nosk8-article__sep { color: var(--n8-line); }

.nosk8-article__author {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
    color: var(--n8-ink-3);
    margin-top: 4px;
}
.nosk8-article__author-avatar { border-radius: 50%; width: 28px; height: 28px; }
.nosk8-article__author a { color: var(--n8-ink); text-decoration: none; font-weight: 600; }

.nosk8-article__hero-right { position: relative; }
.nosk8-article__hero-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    border-radius: var(--n8-radius);
    background: var(--n8-bg-2);
}
.nosk8-article__hero-caption {
    font-size: 12px;
    color: var(--n8-ink-soft);
    font-style: italic;
    margin-top: 10px;
    padding: 0 2px;
}

/* ─── Chapô (descriptif fort sous le hero) ──────────────────────── */
.nosk8-article__lede {
    padding: 28px 0 8px;
    border-bottom: 1px solid var(--n8-line);
}
.nosk8-article__lede-text {
    font-family: var(--n8-reading);
    font-size: clamp(18px, 2.6vw, 22px);
    line-height: 1.55;
    color: var(--n8-ink);
    border-left: 3px solid var(--n8-ink);
    padding: 4px 0 4px 22px;
    margin: 0;
    font-style: italic;
    max-width: 720px;
}

/* ─── Tease "Pour aller plus loin" ─────────────────────────────── */
.nosk8-tease {
    padding: 20px 0;
    border-bottom: 1px solid var(--n8-line);
}
.nosk8-tease__inner {
    font-family: var(--n8-condensed);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--n8-ink-3);
    font-style: italic;
    display: flex; align-items: center; gap: 8px;
}
.nosk8-tease__chevron { color: var(--n8-ink); font-style: normal; }
.nosk8-tease a {
    color: var(--n8-ink);
    text-decoration: none;
    font-weight: 700;
    font-style: normal;
    border-bottom: 1.5px solid var(--n8-ink);
    transition: opacity .15s;
}
.nosk8-tease a:hover { opacity: 0.7; }

/* ─── Layout main + sidebar sticky ──────────────────────────────── */
.nosk8-article__layout { padding: 32px 0; }
.nosk8-article__layout > .nosk8-article__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}
@media (min-width: 1000px) {
    .nosk8-article__layout > .nosk8-article__container {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 64px;
    }
}

.nosk8-article__main { min-width: 0; }
.nosk8-article__content {
    font-family: var(--n8-reading);
    font-size: 18px;
    line-height: 1.72;
    color: var(--n8-ink);
    max-width: 700px;
}

/* Drop cap sur le premier paragraphe — lettre remontée pour que la queue (B, Q, g, p, j, y) ne touche pas la ligne d'en bas */
.nosk8-article__content > p:first-of-type {
    overflow: visible;
}
.nosk8-article__content > p:first-of-type::first-letter {
    font-family: var(--n8-display);
    font-weight: 800;
    font-size: 4.4em;
    line-height: 0.78;
    float: left;
    /* margin-top négatif → la lettre monte ; margin-bottom = 0 → la ligne d'en bas n'est pas touchée par la queue */
    margin: -0.12em 0.12em 0 -0.04em;
    color: var(--n8-ink);
    position: relative;
    z-index: 2;
}

.nosk8-article__content > * + * { margin-top: 1.2em; }
.nosk8-article__content h2 {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: clamp(24px, 3.2vw, 32px);
    line-height: 1.18;
    margin: 1.8em 0 0.5em;
    padding-top: 0.4em;
    color: var(--n8-ink);
    letter-spacing: -0.01em;
    scroll-margin-top: 80px;
    position: relative;
}
.nosk8-article__content h2::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    background: var(--n8-ink);
    margin-bottom: 14px;
}
.nosk8-article__content h3 {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: clamp(19px, 2.4vw, 22px);
    margin: 1.6em 0 0.4em;
    color: var(--n8-ink-2);
    scroll-margin-top: 80px;
}
.nosk8-article__content p { margin: 0 0 1.1em; }
.nosk8-article__content a {
    color: var(--n8-ink);
    text-decoration: underline;
    text-decoration-color: var(--n8-ink-soft);
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    transition: text-decoration-color .15s;
}
.nosk8-article__content a:hover { text-decoration-color: var(--n8-ink); }

/* Wikipedia / sites reconnus = pictogramme externe */
.nosk8-article__content a[href*="wikipedia.org"]::after,
.nosk8-article__content a[rel*="external"]::after {
    content: "";
    display: inline-block;
    width: 11px; height: 11px;
    margin-left: 4px;
    vertical-align: 0.05em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><polyline points='15 3 21 3 21 9'/><line x1='10' y1='14' x2='21' y2='3'/></svg>") no-repeat center / contain;
    opacity: 0.5;
}

/* Pull quote géant (cassure visuelle au milieu) */
.nosk8-pullquote {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: clamp(22px, 3.5vw, 32px);
    line-height: 1.2;
    color: var(--n8-ink-2);
    border: none;
    margin: 2.4em 0;
    padding: 18px 0 18px 0;
    text-align: left;
    border-top: 3px solid var(--n8-ink);
    border-bottom: 3px solid var(--n8-ink);
    font-style: normal;
    letter-spacing: -0.01em;
}
.nosk8-pullquote cite {
    display: block;
    font-family: var(--n8-condensed);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--n8-ink-soft);
    font-style: normal;
    margin-top: 14px;
}
/* Blockquote standard : exclut TOUT pullquote custom (nosk8-, chr-, tr-, futur) qui aura son propre styling */
.nosk8-article__content blockquote:not([class*="pullquote"]) {
    border-left: 3px solid var(--n8-ink);
    padding: 4px 0 4px 22px;
    margin: 1.6em 0;
    font-style: italic;
    color: var(--n8-ink-3);
    font-size: 0.94em;
}

/* Images in-content — uniquement les imgs au fil du texte, pas celles à l'intérieur de composants positionnés (YT, shop, etc.) */
.nosk8-article__content > img,
.nosk8-article__content > figure,
.nosk8-article__content > p > img {
    max-width: 100%;
    margin: 1.8em 0;
}
.nosk8-article__content > img,
.nosk8-article__content > p > img { border-radius: var(--n8-radius); height: auto; }
.nosk8-article__content > figure { width: 100%; }
.nosk8-article__content > figure img { width: 100%; height: auto; max-width: 100%; }
.nosk8-article__content figcaption {
    font-family: var(--n8-condensed);
    font-size: 12px;
    color: var(--n8-ink-soft);
    margin-top: 10px;
    padding-left: 12px;
    border-left: 2px solid var(--n8-line-strong);
    font-style: italic;
}

/* Listes */
.nosk8-article__content ul,
.nosk8-article__content ol {
    padding-left: 1.4em;
    margin: 1.1em 0;
}
.nosk8-article__content li { margin-bottom: 0.5em; }
.nosk8-article__content ul li::marker { color: var(--n8-ink); }
.nosk8-article__content ol li::marker {
    font-family: var(--n8-condensed);
    font-weight: 700;
    color: var(--n8-ink);
}

/* ─── YouTube embed lite (image + play, charge iframe au clic) ──── */
.nosk8-yt {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: var(--n8-radius);
    overflow: hidden;
    cursor: pointer;
    margin: 1.8em 0;
    display: block;
    line-height: 0;
}
.nosk8-yt::before {
    content: "VIDÉO YOUTUBE";
    position: absolute;
    top: 16px; left: 16px;
    background: rgba(0,0,0,0.62);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    color: #fff;
    font-family: var(--n8-condensed);
    font-size: 10px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 4px;
    letter-spacing: 0.1em;
    line-height: 1;
    z-index: 2;
    border: 1px solid rgba(255,255,255,0.10);
}
.nosk8-yt__thumb {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 38%;
    display: block;
    opacity: 1;
    transition: transform .3s;
}
.nosk8-yt:hover .nosk8-yt__thumb { transform: scale(1.03); }
.nosk8-yt__btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 68px; height: 48px;
    background: rgba(0,0,0,0.85);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
    z-index: 2;
    pointer-events: none;
}
.nosk8-yt:hover .nosk8-yt__btn { background: #ff0000; }
.nosk8-yt__btn::after {
    content: "";
    display: block;
    width: 0; height: 0;
    border-style: solid;
    border-width: 9px 0 9px 14px;
    border-color: transparent transparent transparent #fff;
    margin-left: 3px;
}
.nosk8-yt__title {
    position: absolute;
    bottom: 16px; left: 16px; right: 16px;
    color: #fff;
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    z-index: 2;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* ─── Tags ──────────────────────────────────────────────────────── */
.nosk8-article__tags {
    margin: 36px 0 20px;
    display: flex; flex-wrap: wrap; gap: 6px;
    padding-top: 24px;
    border-top: 1px solid var(--n8-line);
}
.nosk8-article__tag {
    background: var(--n8-bg-soft);
    color: var(--n8-ink-3);
    padding: 6px 11px;
    border-radius: 3px;
    text-decoration: none;
    font-size: 12px;
    font-family: var(--n8-condensed);
    font-weight: 500;
    border: 1px solid var(--n8-line);
    transition: all .15s;
}
.nosk8-article__tag:hover { background: var(--n8-ink); color: var(--n8-bg); border-color: var(--n8-ink); }

/* ─── Share compact ─────────────────────────────────────────────── */
.nosk8-share {
    margin: 24px 0;
    padding: 20px 0;
    border-top: 1px solid var(--n8-line);
    border-bottom: 1px solid var(--n8-line);
    display: flex; align-items: center;
    gap: 16px; flex-wrap: wrap;
}
.nosk8-share__label {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--n8-ink);
}
.nosk8-share__list { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.nosk8-share__btn {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    background: var(--n8-bg);
    color: var(--n8-ink);
    border: 1px solid var(--n8-line);
    border-radius: var(--n8-radius);
    text-decoration: none;
    cursor: pointer;
    transition: all .15s var(--n8-trans);
}
.nosk8-share__btn:hover {
    background: var(--n8-ink);
    color: var(--n8-bg);
    border-color: var(--n8-ink);
}
.nosk8-share__btn--copy.is-copied { background: var(--n8-ink); color: var(--n8-bg); border-color: var(--n8-ink); }
.nosk8-share__cmt-link {
    margin-left: auto;
    font-family: var(--n8-condensed);
    font-weight: 600;
    font-size: 13px;
    color: var(--n8-ink-3);
    text-decoration: none;
}
.nosk8-share__cmt-link:hover { color: var(--n8-ink); }

/* ─── Sidebar ───────────────────────────────────────────────────── */
.nosk8-article__sidebar { min-width: 0; }
.nosk8-sidebar__sticky {
    position: relative;
    display: flex; flex-direction: column;
    gap: 22px;
}
/* Sticky desktop : si contenu < viewport => stick ; sinon défile naturellement.
   Pas de max-height ni overflow interne (qui coupent la newsletter en bas). */
@media (min-width: 1000px) {
    .nosk8-sidebar__sticky {
        position: sticky;
        top: 80px;
        align-self: start;
    }
}

.nosk8-toc {
    padding: 0;
}
.nosk8-toc[hidden] { display: none; }
/* Smartphone : sommaire caché (apparaît tout en bas dans la sidebar → inutile en lecture mobile)
   Tablette + desktop : visible normalement */
@media (max-width: 767px) {
    .nosk8-toc { display: none !important; }
}
.nosk8-toc__title {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--n8-ink-soft);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--n8-line);
}
.nosk8-toc__list {
    list-style: none;
    padding: 0; margin: 0;
    font-size: 14px;
}
.nosk8-toc__list li {
    position: relative;
    padding: 7px 0 7px 14px;
    border-left: 2px solid var(--n8-line);
    transition: border-color .2s;
}
.nosk8-toc__list li.is-active { border-left-color: var(--n8-ink); }
.nosk8-toc__list li.is-sub { padding-left: 28px; font-size: 13px; }
.nosk8-toc__list li.is-sub::before {
    content: "";
    position: absolute;
    left: 14px; top: 14px;
    width: 8px; height: 1px;
    background: var(--n8-line);
}
.nosk8-toc__list a {
    color: var(--n8-ink-3);
    text-decoration: none;
    display: block;
    line-height: 1.4;
    transition: color .15s;
}
.nosk8-toc__list a:hover,
.nosk8-toc__list li.is-active > a { color: var(--n8-ink); font-weight: 600; }

/* TOC progressif — ticker vertical hauteur strictement constante
   Container = hauteur fixe (4 slots × --toc-slot-h).
   Chaque li est position:absolute, top calculé via JS selon son slot [0-3].
   Transition CSS sur top+opacity = animation ticker sans variation de hauteur container.
   ---------------------------------------------------------------------- */
:root {
    --toc-slot-h: 34px; /* hauteur d'un slot (px) — adapter si la typo change */
    --toc-slots: 4;     /* nombre de slots visibles */
}
/* Container de hauteur fixe */
.nosk8-toc__list {
    position: relative;
    height: calc(var(--toc-slots) * var(--toc-slot-h));
    overflow: hidden;
}
/* Chaque item est positionné via JS */
.nosk8-toc__list li {
    position: absolute;
    left: 0; right: 0;
    height: var(--toc-slot-h);
    padding: 6px 0 6px 14px;
    border-left: 2px solid var(--n8-line);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: top .35s ease, opacity .3s ease, border-color .2s;
    opacity: 1;
    will-change: top, opacity;
}
/* Entrée hors de la fenêtre : placée en dehors et invisible */
.nosk8-toc__list li.toc-hidden {
    opacity: 0;
    pointer-events: none;
}
/* Entrée courante : accent bleu nuit */
.nosk8-toc__list li.toc-current {
    border-left-color: var(--n8-ink);
}
.nosk8-toc__list li.toc-current > a {
    color: var(--n8-ink);
    font-weight: 700;
}
/* Fallback no-JS : afficher 4 premières entrées statiques */
.nosk8-toc__list.toc-no-js li {
    position: static;
    height: auto;
    opacity: 1;
    white-space: normal;
}
.nosk8-toc__list.toc-no-js li:nth-child(n+5) { display: none; }

.nosk8-cta-newsletter {
    background: var(--n8-ink);
    color: var(--n8-bg);
    padding: 24px 22px;
    border-radius: var(--n8-radius);
    position: relative;
    overflow: hidden;
}
.nosk8-cta-newsletter::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--n8-bg);
}
.nosk8-cta-newsletter__kicker {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 8px;
    opacity: 0.6;
}
.nosk8-cta-newsletter__title {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.15;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.nosk8-cta-newsletter__desc {
    font-size: 12.5px;
    opacity: 0.7;
    line-height: 1.45;
    margin: 0 0 14px;
}
.nosk8-cta-newsletter__form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.nosk8-cta-newsletter__form input {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5px;
    padding: 10px 12px;
    color: var(--n8-bg);
    font-size: 14px;
    font-family: var(--n8-sans);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
            appearance: none;
}
.nosk8-cta-newsletter__form input::placeholder { color: rgba(255,255,255,0.45); }
.nosk8-cta-newsletter__form input:focus { outline: none; border-color: var(--n8-bg); background: rgba(255,255,255,0.12); }
.nosk8-cta-newsletter__form button {
    background: var(--n8-bg);
    color: var(--n8-ink);
    border: none;
    border-radius: 5px;
    padding: 11px 16px;
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: opacity .15s;
}
.nosk8-cta-newsletter__form button:hover { opacity: 0.9; }
.nosk8-cta-newsletter__form button {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ─── Hint scroll horizontal : fade bord droit + flèche glass (actif si rail vraiment scrollable, mobile + desktop) ─── */
.h-scroll-wrap {
    position: relative;
    --hsw-bg: var(--n8-bg, #fff);
}
.h-scroll-wrap.h-scroll-wrap--soft { --hsw-bg: var(--n8-bg-soft, #f7f8fa); }
.h-scroll-wrap::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    right: -4px;
    width: 80px;
    background: linear-gradient(to right, transparent 0%, var(--hsw-bg) 92%);
    pointer-events: none;
    opacity: 1;
    transition: opacity .22s ease-out;
    z-index: 2;
}
.h-scroll-wrap.is-end::after { opacity: 0; }
/* Flèche pure (no box, no border) : SVG chevron blanc + double drop-shadow pour lisibilité tout fond */
.h-scroll-wrap__hint {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 44px;
    height: 56px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    filter:
        drop-shadow(0 2px 8px rgba(10,15,26,0.55))
        drop-shadow(0 0 2px rgba(10,15,26,0.45));
    transition: opacity .22s ease-out, transform .22s ease-out, filter .15s;
    touch-action: manipulation;
}
.h-scroll-wrap__hint svg {
    width: 30px; height: 30px;
    stroke-width: 2.2;
    pointer-events: none;
}
.h-scroll-wrap__hint:hover {
    filter:
        drop-shadow(0 3px 12px rgba(10,15,26,0.7))
        drop-shadow(0 0 3px rgba(10,15,26,0.55));
}
.h-scroll-wrap__hint:focus-visible {
    outline: 2px solid rgba(255,255,255,0.85);
    outline-offset: 4px;
    border-radius: 4px;
}

/* Variante droite (par défaut) */
.h-scroll-wrap__hint--right {
    right: 6px;
    transform: translateY(-50%);
    animation: hsw-pulse-right 1.6s ease-in-out infinite;
}
.h-scroll-wrap__hint--right:hover { animation: none; transform: translateY(-50%) translateX(3px); }

/* Variante gauche (cachée par défaut, visible si scrollé) */
.h-scroll-wrap__hint--left {
    left: 6px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-14px);
    animation: none;
}
.h-scroll-wrap.is-scrolled .h-scroll-wrap__hint--left {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
    animation: hsw-pulse-left 1.6s ease-in-out infinite;
}
.h-scroll-wrap.is-scrolled .h-scroll-wrap__hint--left:hover { animation: none; transform: translateY(-50%) translateX(-3px); }

@media (min-width: 880px) {
    .h-scroll-wrap__hint { width: 48px; height: 64px; }
    .h-scroll-wrap__hint svg { width: 34px; height: 34px; }
    .h-scroll-wrap__hint--right { right: 12px; }
    .h-scroll-wrap__hint--left { left: 12px; }
}

@keyframes hsw-pulse-right {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(5px); }
}
@keyframes hsw-pulse-left {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(-5px); }
}

/* États : fin atteinte → cache droite ; non scrollable du tout → cache les 2 */
.h-scroll-wrap.is-end .h-scroll-wrap__hint--right {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(14px);
    animation: none;
}
.h-scroll-wrap.is-not-scrollable::after,
.h-scroll-wrap.is-not-scrollable .h-scroll-wrap__hint { display: none; }

/* ─── HERO PORTRAIT (mutualisé : portrait, standard, spots) ─── */
.nosk8-hero-portrait {
    position: relative;
    min-height: 480px;
    height: 70vh;
    overflow: hidden;
    background: #0a0f1a;
}
.nosk8-hero-portrait--compact { height: 60vh; min-height: 420px; }
.nosk8-hero-portrait__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.6;
}
.nosk8-hero-portrait__gradient {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(10,15,26,0.3) 0%, rgba(10,15,26,0.4) 60%, rgba(10,15,26,0.95) 100%);
}
.nosk8-hero-portrait__inner {
    position: absolute; inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 100px 18px 36px;
    max-width: 1200px;
    margin: 0 auto;
    color: #fff;
}
@media (min-width: 720px) { .nosk8-hero-portrait__inner { padding: 112px 32px 48px; } }
.nosk8-hero-portrait__breadcrumb {
    font-family: "Barlow Semi Condensed", system-ui, sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
    margin: 0 0 14px;
}
.nosk8-hero-portrait__breadcrumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.nosk8-hero-portrait__breadcrumb a:hover { color: #fff; }
.nosk8-hero-portrait__kicker {
    font-family: "Barlow Semi Condensed", system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.75);
    margin: 0 0 10px;
}
.nosk8-hero-portrait__title {
    font-family: "Barlow Condensed", system-ui, sans-serif;
    font-weight: 900;
    font-size: clamp(40px, 9vw, 96px);
    line-height: 0.94;
    letter-spacing: -0.025em;
    margin: 0 0 14px;
    color: #fff;
    text-wrap: balance;
}
.nosk8-hero-portrait__tagline {
    font-family: "Source Serif Pro", Georgia, serif;
    font-style: italic;
    font-size: clamp(15px, 2vw, 20px);
    line-height: 1.45;
    color: rgba(255,255,255,0.85);
    max-width: 640px;
    margin: 0 0 20px;
}
.nosk8-hero-portrait__meta {
    display: flex; flex-wrap: wrap;
    gap: 10px 14px;
    font-family: "Barlow Semi Condensed", system-ui, sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.6);
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.12);
}
.nosk8-hero-portrait__meta strong { color: #fff; font-weight: 700; }
.nosk8-hero-portrait__meta .nosk8-hero-portrait__sep { color: rgba(255,255,255,0.3); }

.nosk8-side-mini {
    padding: 16px 0;
    border-top: 1px solid var(--n8-line);
}
.nosk8-side-mini__title {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--n8-ink-soft);
    margin: 0 0 12px;
}
.nosk8-side-mini__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.nosk8-side-mini__link {
    display: flex; gap: 12px; align-items: flex-start;
    text-decoration: none;
    color: var(--n8-ink);
    transition: opacity .15s;
}
.nosk8-side-mini__link:hover { opacity: 0.7; }
.nosk8-side-mini__img {
    width: 56px; height: 56px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--n8-bg-2);
}
.nosk8-side-mini__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nosk8-side-mini__name {
    font-family: var(--n8-condensed);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.25;
    color: var(--n8-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.nosk8-side-mini__price { font-size: 12px; color: var(--n8-ink-3); font-weight: 600; }

/* ─── Bloc produits unifié "Tu vas avoir besoin de ça" ─────────── */
.nosk8-shop-strip {
    background: var(--n8-bg-soft);
    padding: 36px 0;
    border-top: 1px solid var(--n8-line);
}
.nosk8-shop-strip__head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
    margin-bottom: 24px;
}
.nosk8-shop-strip__title {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: clamp(22px, 3vw, 28px);
    margin: 0;
    color: var(--n8-ink);
    letter-spacing: -0.01em;
}
.nosk8-shop-strip__sub {
    font-family: var(--n8-condensed);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--n8-ink-soft);
    font-weight: 600;
}
.nosk8-shop-strip__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
@media (min-width: 720px) { .nosk8-shop-strip__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 1100px) { .nosk8-shop-strip__grid { grid-template-columns: repeat(6, 1fr); } }
.nosk8-shop-card {
    background: var(--n8-bg);
    border: 1px solid var(--n8-line);
    border-radius: var(--n8-radius);
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
    position: relative;
}
.nosk8-shop-card:hover { transform: translateY(-2px); box-shadow: var(--n8-shadow-md); }
.nosk8-shop-card a { display: block; color: inherit; text-decoration: none; }
.nosk8-shop-card__imgwrap {
    position: relative;
    aspect-ratio: 1/1;
    width: 100%;
    overflow: hidden;
    background: var(--n8-bg-2);
}
.nosk8-shop-card__img {
    aspect-ratio: 1/1;
    width: 100%;
    object-fit: cover;
    display: block;
    background: var(--n8-bg-2);
}
.nosk8-shop-card__img--main {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    transition: opacity .18s ease;
    will-change: opacity;
}
.nosk8-shop-card__body { padding: 12px 12px 14px; }
.nosk8-shop-card__src {
    font-family: var(--n8-condensed);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--n8-ink-soft);
    margin-bottom: 4px;
}
.nosk8-shop-card__name {
    font-family: var(--n8-condensed);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    color: var(--n8-ink);
    margin: 0 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.6em;
}
.nosk8-shop-card__price {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 15px;
    color: var(--n8-ink);
}

/* ─── Related articles ──────────────────────────────────────────── */
.nosk8-related {
    padding: 56px 0 48px;
    background: var(--n8-bg);
    overflow: hidden;
}
.nosk8-related__title {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: clamp(24px, 3.2vw, 32px);
    margin: 0 0 24px;
    color: var(--n8-ink);
    letter-spacing: -0.01em;
}

/* (anciennes règles .nosk8-related__rail retirées — duplications qui créaient 3 cards à 2px de large à gauche. Voir bloc unique plus bas ligne ~1480) */

.nosk8-related__card {
    background: var(--n8-bg);
    border: 1px solid var(--n8-line);
    border-radius: var(--n8-radius);
    overflow: hidden;
    transition: transform .2s var(--n8-trans), box-shadow .2s var(--n8-trans);
}
.nosk8-related__card:hover { transform: translateY(-3px); box-shadow: var(--n8-shadow-md); }
.nosk8-related__link { display: block; text-decoration: none; color: inherit; }
.nosk8-related__thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--n8-bg-2); }
.nosk8-related__thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s var(--n8-trans);
}
.nosk8-related__card:hover .nosk8-related__thumb img { transform: scale(1.04); }
.nosk8-related__body { padding: 14px 16px 18px; }
.nosk8-related__cat {
    display: inline-block;
    background: #fff;
    color: var(--n8-ink);
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 3px;
    margin-bottom: 8px;
    border: 1px solid var(--n8-line);
}
.nosk8-related__heading {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.22;
    margin: 0 0 8px;
    color: var(--n8-ink);
    letter-spacing: -0.005em;
}
.nosk8-related__excerpt {
    font-size: 13px;
    color: var(--n8-ink-2);
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ─── Comments — caché par défaut sur mobile, load on-demand ───── */
.nosk8-article__comments {
    padding: 36px 0;
    border-top: 1px solid var(--n8-line);
    background: var(--n8-bg);
}
.nosk8-comments__toggle {
    background: var(--n8-ink);
    border: 1.5px solid var(--n8-ink);
    border-radius: var(--n8-radius);
    padding: 14px 20px;
    width: 100%;
    cursor: pointer;
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 14px;
    color: var(--n8-bg);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: all .15s;
}
.nosk8-comments__toggle:hover { background: var(--n8-bg); color: var(--n8-ink); border-color: var(--n8-ink); }
.nosk8-comments__body { display: none; padding-top: 24px; }
.nosk8-comments__body.is-open { display: block; }

/* ─── A11y ──────────────────────────────────────────────────────── */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
    white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--n8-ink); outline-offset: 2px; border-radius: 3px; }

/* ─── Print ─────────────────────────────────────────────────────── */
@media print {
    .nosk8-progress, .nosk8-share, .nosk8-cta-newsletter, .nosk8-side-mini, .nosk8-toc, .nosk8-related, .nosk8-shop-strip, .nosk8-yt { display: none !important; }
    .nosk8-article__layout > .nosk8-article__container { grid-template-columns: 1fr !important; }
}

/* ─── Continue ta lecture (bloc next article, gros, dramatique) ── */
.nosk8-continue {
    background: var(--n8-ink);
    color: var(--n8-bg);
    padding: 56px 0;
    border-top: 1px solid var(--n8-line);
}
.nosk8-continue .nosk8-article__container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: center;
}
@media (min-width: 880px) {
    .nosk8-continue .nosk8-article__container {
        grid-template-columns: 1fr 1.2fr;
        gap: 48px;
    }
}
.nosk8-continue__kicker {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.85);
    margin: 0 0 14px;
}
.nosk8-continue__heading {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: clamp(26px, 4.2vw, 40px);
    line-height: 1.1;
    margin: 0 0 16px;
    letter-spacing: -0.015em;
}
.nosk8-continue__heading a { color: inherit; text-decoration: none; }
.nosk8-continue__excerpt {
    font-size: 15.5px;
    line-height: 1.55;
    color: rgba(255,255,255,0.92);
    margin: 0 0 22px;
    max-width: 560px;
}
.nosk8-continue__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    text-decoration: none;
    padding: 12px 22px;
    background: var(--n8-ink-2);
    border: 1px solid var(--n8-ink-2);
    border-radius: 4px;
    transition: all .2s var(--n8-trans);
}
.nosk8-continue__cta:hover {
    background: #fff;
    color: var(--n8-ink-2);
    border-color: #fff;
}
.nosk8-continue__cta::after { content: "→"; transition: transform .2s; }
.nosk8-continue__cta:hover::after { transform: translateX(3px); }
.nosk8-continue__img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: var(--n8-radius);
    background: rgba(255,255,255,0.05);
}

/* ─── Bouton save (bookmark) dans la zone share ──────────────── */
.nosk8-share__btn--save svg { transition: fill .15s; }
.nosk8-share__btn--save.is-saved {
    background: var(--n8-ink);
    color: var(--n8-bg);
    border-color: var(--n8-ink);
}
.nosk8-share__btn--save.is-saved svg { fill: currentColor; }
.nosk8-share__saved-msg {
    position: absolute;
    background: var(--n8-ink);
    color: var(--n8-bg);
    font-family: var(--n8-condensed);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 12px;
    border-radius: 4px;
    opacity: 0;
    transform: translateY(8px);
    transition: all .25s;
    pointer-events: none;
    z-index: 5;
    margin-top: 8px;
    white-space: nowrap;
}
.nosk8-share__saved-msg.is-visible { opacity: 1; transform: translateY(0); }

/* ─── Sources (E-E-A-T booster, fin d'article) ──────────────── */
.nosk8-sources {
    margin: 32px 0 0;
    padding: 24px 22px;
    background: var(--n8-bg-soft);
    border-left: 3px solid var(--n8-ink);
    border-radius: 0 var(--n8-radius) var(--n8-radius) 0;
}
.nosk8-sources__title {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--n8-ink-soft);
    margin: 0 0 14px;
}
.nosk8-sources__list {
    list-style: none;
    padding: 0; margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
}
.nosk8-sources__list li {
    padding: 5px 0;
    color: var(--n8-ink-3);
    border-bottom: 1px solid var(--n8-line);
}
.nosk8-sources__list li:last-child { border-bottom: 0; }
.nosk8-sources__list a {
    color: var(--n8-ink);
    text-decoration: none;
    font-weight: 600;
}
.nosk8-sources__list a:hover { text-decoration: underline; }

/* ─── Commentaires : liste + formulaire ──────────────────────── */
.nosk8-comments__count {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 18px;
    margin: 0 0 24px;
    color: var(--n8-ink);
}
.nosk8-comments__list {
    list-style: none;
    padding: 0; margin: 0 0 32px;
    display: flex; flex-direction: column;
    gap: 20px;
}
.nosk8-comment {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--n8-line);
}
.nosk8-comment:last-child { border-bottom: 0; }
.nosk8-comment__avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--n8-ink);
    color: var(--n8-bg);
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.nosk8-comment__body { min-width: 0; }
.nosk8-comment__head {
    display: flex; align-items: baseline;
    gap: 8px; flex-wrap: wrap;
    margin-bottom: 4px;
}
.nosk8-comment__name {
    font-family: var(--n8-condensed);
    font-weight: 700;
    color: var(--n8-ink);
    font-size: 14px;
}
.nosk8-comment__date {
    font-family: var(--n8-condensed);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--n8-ink-soft);
}
.nosk8-comment__text {
    color: var(--n8-ink-2);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0 0 8px;
}
.nosk8-comment__reply {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--n8-condensed);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--n8-ink-3);
}
.nosk8-comment__reply:hover { color: var(--n8-ink); }

.nosk8-comments__form {
    background: var(--n8-bg-soft);
    border: 1px solid var(--n8-line);
    border-radius: var(--n8-radius);
    padding: 22px;
}
.nosk8-comments__form-title {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--n8-ink);
    margin: 0 0 14px;
}
.nosk8-comments__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 10px;
}
@media (min-width: 640px) {
    .nosk8-comments__row { grid-template-columns: 1fr 1fr; }
}
.nosk8-comments__form input,
.nosk8-comments__form textarea {
    background: var(--n8-bg);
    border: 1px solid var(--n8-line);
    border-radius: 5px;
    padding: 11px 13px;
    font-family: var(--n8-sans);
    font-size: 14px;
    color: var(--n8-ink);
    width: 100%;
    box-sizing: border-box;
}
.nosk8-comments__form input:focus,
.nosk8-comments__form textarea:focus { outline: none; border-color: var(--n8-ink); }
.nosk8-comments__form textarea {
    min-height: 100px;
    resize: vertical;
    font-family: var(--n8-sans);
    line-height: 1.5;
}
.nosk8-comments__form button[type="submit"] {
    background: var(--n8-ink);
    color: var(--n8-bg);
    border: 1px solid var(--n8-ink);
    border-radius: 4px;
    padding: 8px 16px;
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background .15s, color .15s;
    margin-top: 4px;
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.nosk8-comments__form button[type="submit"]:hover {
    background: var(--n8-bg);
    color: var(--n8-ink);
}
.nosk8-comments__form button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Validation inline errors */
.nosk8-comments__error {
    display: none;
    margin: 8px 0 6px;
    padding: 8px 12px;
    background: rgba(217, 48, 37, 0.08);
    border-left: 3px solid #d93025;
    color: #a3261d;
    font-size: 13px;
    line-height: 1.4;
    border-radius: 3px;
}
.nosk8-comments__error.is-visible { display: block; }
.nosk8-comments__form .has-error input,
.nosk8-comments__form .has-error textarea {
    border-color: #d93025;
}
/* Antibot checkbox */
.nosk8-comments__bot {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 10px 0 4px;
    font-size: 13px;
    color: var(--n8-ink-3);
    user-select: none;
    cursor: pointer;
}
.nosk8-comments__bot input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--n8-ink);
    cursor: pointer;
    flex-shrink: 0;
}
.nosk8-comments__bot-text { line-height: 1.3; }
/* Honeypot (anti-bot caché) */
.nosk8-comments__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.nosk8-comments__hint {
    font-size: 11.5px;
    color: var(--n8-ink-soft);
    margin: 8px 0 0;
    font-style: italic;
}

/* ─── Maps : overlay tap-to-activate (réutilisable sur toute map Leaflet) ─── */
.leaflet-blocker {
    position: absolute;
    inset: 0;
    z-index: 800;
    background: rgba(10, 15, 26, 0.32);
    -webkit-backdrop-filter: blur(2px) saturate(120%);
            backdrop-filter: blur(2px) saturate(120%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity .25s ease-out, backdrop-filter .25s;
    border-radius: inherit;
    user-select: none;
}
.leaflet-blocker.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.leaflet-blocker__msg {
    background: rgba(10, 15, 26, 0.85);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
            backdrop-filter: blur(16px) saturate(180%);
    color: #fff;
    padding: 14px 22px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow:
        0 10px 30px rgba(10,15,26,0.32),
        inset 0 1px 0 rgba(255,255,255,0.20);
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    animation: blocker-float 2.6s ease-in-out infinite;
}
.leaflet-blocker__icon {
    width: 22px; height: 22px;
    color: #fff;
    flex-shrink: 0;
    animation: blocker-pulse 1.6s ease-in-out infinite;
}
.leaflet-blocker__icon svg { width: 100%; height: 100%; }
@keyframes blocker-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes blocker-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.18); opacity: 0.85; }
}
/* Indicateur "active" : petit chip en haut à droite pour signaler que la map est utilisable */
.leaflet-blocker-status {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 700;
    background: rgba(255,255,255,0.92);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    color: var(--n8-ink);
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 5px 10px;
    border-radius: 4px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(10,15,26,0.16);
}
.leaflet-blocker-status::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74,222,128,0.25);
}
.leaflet-blocker-wrap.is-active .leaflet-blocker-status {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .leaflet-blocker__msg, .leaflet-blocker__icon { animation: none; }
}

/* ─── Anti-bot widget (style Turnstile) ─── */
.nosk8-antibot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #d8dde6;
    border-radius: 6px;
    margin: 8px 0;
    cursor: pointer;
    transition: border-color .15s;
    user-select: none;
}
.nosk8-antibot:hover { border-color: #0a0f1a; }
.nosk8-antibot__check {
    width: 22px; height: 22px;
    border: 1.5px solid #b8bfc8;
    border-radius: 4px;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, border-color .2s;
    position: relative;
}
.nosk8-antibot__check::after {
    content: "";
    width: 12px; height: 12px;
    border: 2px solid #4a5970;
    border-top-color: transparent;
    border-right-color: transparent;
    border-radius: 50%;
    animation: nosk8-antibot-spin .9s linear infinite;
    opacity: 0;
}
.nosk8-antibot.is-checking .nosk8-antibot__check { background: #fff; border-color: #0a0f1a; }
.nosk8-antibot.is-checking .nosk8-antibot__check::after { opacity: 1; }
.nosk8-antibot.is-verified .nosk8-antibot__check {
    background: #1a5d3e;
    border-color: #1a5d3e;
}
.nosk8-antibot.is-verified .nosk8-antibot__check::after {
    content: "✓";
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    width: auto; height: auto;
    border: 0;
    animation: none;
    opacity: 1;
}
@keyframes nosk8-antibot-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.nosk8-antibot__lbl {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 14px;
    color: var(--n8-ink);
    line-height: 1.25;
    flex: 1;
}
.nosk8-antibot__brand {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7686;
    opacity: 0.6;
    text-align: right;
    line-height: 1.2;
}
.nosk8-antibot__brand strong { display: block; color: var(--n8-ink); font-size: 11px; }

/* ─── Panneau OTP (vérif email) ─── */
.nosk8-otp {
    background: var(--n8-bg);
    border: 1px solid #d8dde6;
    border-radius: 8px;
    padding: 18px;
    margin-top: 12px;
    display: none;
    animation: otp-slide .25s ease-out;
}
.nosk8-comments__form.is-otp .nosk8-otp { display: block; }
.nosk8-comments__form.is-otp > input,
.nosk8-comments__form.is-otp > textarea,
.nosk8-comments__form.is-otp > .nosk8-comments__row,
.nosk8-comments__form.is-otp > .nosk8-antibot,
.nosk8-comments__form.is-otp > button[type="submit"] { display: none; }
@keyframes otp-slide { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.nosk8-otp__title {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 17px;
    margin: 0 0 6px;
    color: var(--n8-ink);
}
.nosk8-otp__desc {
    font-size: 13.5px;
    color: var(--n8-ink-3);
    line-height: 1.5;
    margin: 0 0 14px;
}
.nosk8-otp__desc strong { color: var(--n8-ink); }
.nosk8-otp__input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    border: 1.5px solid #d8dde6;
    border-radius: 6px;
    font-family: "Barlow Condensed", system-ui, sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.4em;
    text-align: center;
    color: var(--n8-ink);
    background: #fff;
    -webkit-appearance: none;
            appearance: none;
}
.nosk8-otp__input:focus { outline: none; border-color: var(--n8-ink); }
.nosk8-otp__error {
    color: #c83a4a;
    font-size: 12.5px;
    font-weight: 600;
    margin: 8px 0 0;
    min-height: 1em;
}
.nosk8-otp__actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.nosk8-otp__submit {
    background: var(--n8-ink);
    color: #fff;
    border: 0;
    padding: 11px 22px;
    border-radius: 6px;
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    flex: 1;
}
.nosk8-otp__back {
    background: transparent;
    color: var(--n8-ink-soft);
    border: 1px solid #d8dde6;
    padding: 11px 18px;
    border-radius: 6px;
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
}
.nosk8-otp__back:hover { color: var(--n8-ink); border-color: var(--n8-ink); }
.nosk8-otp__resend {
    background: transparent;
    border: 0;
    padding: 8px 0 0;
    font-family: "Barlow Semi Condensed";
    font-size: 12px;
    color: var(--n8-ink-3);
    text-decoration: underline;
    cursor: pointer;
    margin-top: 4px;
}
.nosk8-otp__resend:hover { color: var(--n8-ink); }

/* État success */
.nosk8-comments__form.is-success {
    background: rgba(26,93,62,0.06);
    border: 1px solid rgba(26,93,62,0.30);
}
.nosk8-otp__success {
    display: none;
    text-align: center;
    padding: 8px 0 4px;
}
.nosk8-comments__form.is-success .nosk8-otp__success { display: block; }
.nosk8-comments__form.is-success .nosk8-otp,
.nosk8-comments__form.is-success > * { display: none; }
.nosk8-comments__form.is-success .nosk8-otp__success { display: block; }
.nosk8-otp__success-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #1a5d3e;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    margin: 0 auto 12px;
}
.nosk8-otp__success-title {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 18px;
    color: var(--n8-ink);
    margin: 0 0 4px;
}
.nosk8-otp__success-desc {
    font-size: 13.5px;
    color: var(--n8-ink-3);
    margin: 0;
}


/* ─── Bloc shop in-content (mini-sidebar mobile-friendly) ──────── */
.nosk8-incontent-shop {
    margin: 2.4em -18px;
    background: var(--n8-bg-soft);
    border-top: 2px solid var(--n8-ink);
    border-bottom: 2px solid var(--n8-ink);
    padding: 22px 18px;
    /* sort du conteneur étroit du content pour respirer */
}
@media (min-width: 720px) {
    .nosk8-incontent-shop { margin-left: 0; margin-right: 0; border-radius: var(--n8-radius); padding: 24px; }
}
.nosk8-incontent-shop__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
}
.nosk8-incontent-shop__kicker {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--n8-ink-soft);
    margin: 0 0 4px;
}
.nosk8-incontent-shop__title {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 18px;
    color: var(--n8-ink);
    margin: 0;
    letter-spacing: -0.005em;
}
.nosk8-incontent-shop__all {
    font-family: var(--n8-condensed);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--n8-ink-3);
    text-decoration: none;
    flex-shrink: 0;
}
.nosk8-incontent-shop__all:hover { color: var(--n8-ink); }
.nosk8-incontent-shop__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 18px 6px 18px;
    margin: 0 -18px;
    scrollbar-width: none;
}
.nosk8-incontent-shop__rail::-webkit-scrollbar { display: none; }
.nosk8-incontent-shop__rail > * { scroll-snap-align: start; }
@media (min-width: 720px) {
    .nosk8-incontent-shop__rail {
        grid-auto-columns: 1fr;
        grid-template-columns: repeat(3, 1fr);
        overflow: visible;
        padding: 0;
        margin: 0;
        gap: 14px;
        scroll-snap-type: none;
    }
}
.nosk8-incontent-shop__card {
    background: var(--n8-bg);
    border: 1px solid var(--n8-line);
    border-radius: 6px;
    overflow: hidden;
}
.nosk8-incontent-shop__card a {
    display: flex;
    text-decoration: none;
    color: inherit;
    align-items: center;
    gap: 12px;
    padding: 8px;
}
.nosk8-incontent-shop__img {
    width: 72px;
    height: 72px;
    aspect-ratio: 1/1;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--n8-bg-2);
    border-radius: 5px;
}
.nosk8-incontent-shop__body {
    padding: 2px 4px 2px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    flex: 1;
    gap: 4px;
}
.nosk8-incontent-shop__src {
    font-family: var(--n8-condensed);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--n8-ink-soft);
}
.nosk8-incontent-shop__name {
    font-family: var(--n8-condensed);
    font-weight: 600;
    font-size: 12.5px;
    line-height: 1.25;
    margin: 2px 0 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.nosk8-incontent-shop__price {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 14px;
    color: var(--n8-ink);
}

/* ─── À lire aussi : rail horizontal aussi sur desktop avec flèches ─── */
.nosk8-related__wrap { position: relative; }
.nosk8-related__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 18px;
    -webkit-overflow-scrolling: touch;
    padding: 4px 18px 14px 18px;
    margin: 0 -18px;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
@media (min-width: 720px) {
    .nosk8-related__rail {
        grid-auto-columns: calc((100% - 28px) / 3);
        padding: 4px 0 14px;
        margin: 0;
        scroll-padding-left: 0;
    }
}
@media (min-width: 1100px) {
    .nosk8-related__rail {
        grid-auto-columns: calc((100% - 42px) / 4);
    }
}
.nosk8-related__rail::-webkit-scrollbar { display: none; }
.nosk8-related__rail > * { scroll-snap-align: start; }

.nosk8-related__nav {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    width: 38px; height: 52px;
    background: transparent;
    color: #0a0f1a;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: none;
    transition: opacity .15s, transform .15s;
    opacity: 0.65;
    outline: none;
}
.nosk8-related__nav:hover {
    opacity: 1;
    transform: translateY(-50%) translateX(-2px);
}
.nosk8-related__nav--next:hover { transform: translateY(-50%) translateX(1px); }
.nosk8-related__nav[disabled] { opacity: 0.2; cursor: default; }
.nosk8-related__nav--prev { left: -10px; }
.nosk8-related__nav--next { right: -10px; }
@media (min-width: 720px) { .nosk8-related__nav { display: flex; } }

.nosk8-related__indicator { display: none; }

/* ─── Comments : open-by-default mobile, toggle desktop seulement ─── */
.nosk8-comments__title-mobile { display: none; }
@media (max-width: 999px) {
    .nosk8-comments__toggle { display: none; }
    .nosk8-comments__body { display: block; padding-top: 0; }
    .nosk8-comments__title-mobile { display: block; }
}

/* Title mobile commentaires : visible + accessible */
.nosk8-comments__title-mobile {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 22px;
    margin: 0 0 18px;
    color: var(--n8-ink);
    padding-bottom: 12px;
    border-bottom: 2px solid var(--n8-ink);
}


/* ─── Section Shop NOSK8 — tabs catégories + rail horizontal scroll ─── */
.nosk8-shop {
    background: var(--n8-bg);
    padding: 40px 0;
    border-top: 1px solid var(--n8-line);
    border-bottom: 1px solid var(--n8-line);
}
.nosk8-shop__head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    margin-bottom: 18px;
}
.nosk8-shop__title {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: clamp(22px, 3vw, 28px);
    margin: 0;
    letter-spacing: -0.01em;
    color: var(--n8-ink);
}
.nosk8-shop__title::before {
    content: "";
    display: inline-block;
    width: 28px; height: 3px;
    background: var(--n8-ink);
    margin-right: 12px;
    vertical-align: middle;
}
.nosk8-shop__all {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--n8-ink-3);
    text-decoration: none;
}
.nosk8-shop__all:hover { color: var(--n8-ink); }

/* Tabs catégories : chips horizontaux */
.nosk8-shop__tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 0 18px;
    margin: 0 -18px 0;
    padding-left: 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 720px) { .nosk8-shop__tabs { margin: 0; padding-left: 0; flex-wrap: wrap; overflow: visible; } }
.nosk8-shop__tabs::-webkit-scrollbar { display: none; }
.nosk8-shop__tab {
    background: transparent;
    border: 1.5px solid var(--n8-line);
    border-radius: 100px;
    padding: 8px 16px;
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--n8-ink-3);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    scroll-snap-align: start;
    transition: all .15s var(--n8-trans);
}
.nosk8-shop__tab:hover { border-color: var(--n8-ink); color: var(--n8-ink); }
.nosk8-shop__tab.is-active {
    background: var(--n8-ink);
    color: var(--n8-bg);
    border-color: var(--n8-ink);
}
.nosk8-shop__tab .count {
    font-size: 10px;
    opacity: 0.7;
    margin-left: 4px;
}

/* Rail produits */
.nosk8-shop__rail-wrap { position: relative; }
.nosk8-shop__rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 60%;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 18px 14px;
    margin: 0 -18px;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.nosk8-shop__rail::-webkit-scrollbar { display: none; }
.nosk8-shop__rail > * { scroll-snap-align: start; }
@media (min-width: 720px) {
    .nosk8-shop__rail {
        grid-auto-columns: calc((100% - 42px) / 4);
        padding: 4px 0 14px;
        margin: 0;
        gap: 14px;
    }
}
@media (min-width: 1100px) {
    .nosk8-shop__rail {
        grid-auto-columns: calc((100% - 56px) / 5);
    }
}

.nosk8-shop-card {
    background: var(--n8-bg);
    border: 1px solid var(--n8-line);
    border-radius: var(--n8-radius);
    overflow: hidden;
    position: relative;
    transition: transform .15s, box-shadow .15s;
}
.nosk8-shop-card:hover { transform: translateY(-3px); box-shadow: var(--n8-shadow-md); }
.nosk8-shop-card a { display: block; color: inherit; text-decoration: none; }
.nosk8-shop-card__badge {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--n8-ink);
    color: var(--n8-bg);
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 8px;
    border-radius: 3px;
    z-index: 2;
}
.nosk8-shop-card__img {
    aspect-ratio: 4/5;
    width: 100%;
    object-fit: cover;
    display: block;
    background: var(--n8-bg-2);
}
.nosk8-shop-card__body { padding: 12px 14px 14px; }
.nosk8-shop-card__src {
    font-family: var(--n8-condensed);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--n8-ink-soft);
    margin: 0 0 6px;
}
.nosk8-shop-card__name {
    font-family: var(--n8-condensed);
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--n8-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.6em;
}
.nosk8-shop-card__price {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 15px;
    color: var(--n8-ink);
    margin: 0;
}

/* Animation au switch de tab */
.nosk8-shop-card.is-hidden { display: none; }

/* ─── SHOP CARDS PRO — galerie + flip back + impulse buy ─── */
.nosk8-shop-card.is-pro { padding: 0; background: var(--n8-bg); border-radius: 10px; overflow: hidden; }
.nosk8-shop-card.is-pro:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(10,15,26,0.10); }
.nosk8-shop-card.is-pro a { all: unset; }

.shop-pro__gallery {
    position: relative;
    aspect-ratio: 4/5;
    background: var(--n8-bg-2);
    overflow: hidden;
    cursor: zoom-in;
}
.shop-pro__slide {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.01);
    transition: opacity .32s var(--n8-trans), transform .5s var(--n8-trans);
}
.shop-pro__slide.is-active { opacity: 1; transform: scale(1); z-index: 1; }

/* Toolbar navigation SOUS l'image (transparente → glass révèle vraiment derrière) */
.shop-pro__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 10px;
    background: transparent;
    border: 0;
}
.shop-pro__nav {
    width: 28px; height: 28px;
    background: rgba(10, 15, 26, 0.32);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
            backdrop-filter: blur(18px) saturate(180%);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.28);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s;
    padding: 0;
    flex-shrink: 0;
    box-shadow:
        0 6px 14px rgba(10,15,26,0.16),
        inset 0 1px 0 rgba(255,255,255,0.22);
}
.shop-pro__nav:hover { background: rgba(10, 15, 26, 0.55); transform: translateY(-1px); }
.shop-pro__nav:disabled { opacity: 0.3; cursor: default; }
.shop-pro__nav svg { width: 12px; height: 12px; }

/* Dots indicateurs centrés dans la toolbar */
.shop-pro__dots {
    display: flex;
    gap: 6px;
    flex: 1;
    justify-content: center;
    align-items: center;
}
.shop-pro__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(10,15,26,0.22);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background .15s, transform .15s;
}
.shop-pro__dot.is-active { background: #0a0f1a; transform: scale(1.3); }

/* Badge urgence + best-seller — top de la galerie */
.shop-pro__stickers {
    position: absolute;
    top: 8px; left: 8px; right: 8px;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    gap: 5px;
    pointer-events: none;
}
.shop-pro__sticker {
    background: #0a0f1a;
    color: #fff;
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 7px;
    border-radius: 3px;
}
.shop-pro__sticker--urgency { background: #c83a4a; }
.shop-pro__sticker--new { background: #1a5d3e; }

/* Sizes : bloc rétractable (header cliquable + chips dépliables) */
.shop-pro__sizes-block { margin: 0 0 8px; }
.shop-pro__sizes-header {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(10,15,26,0.12);
    border-radius: 5px;
    padding: 7px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color .12s, background .12s;
    color: var(--n8-ink);
    font-family: var(--n8-sans);
}
.shop-pro__sizes-header:hover { border-color: #0a0f1a; background: var(--n8-bg-2, #f0f2f6); }
.shop-pro__sizes-header-left {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.shop-pro__sizes-header-lbl {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--n8-ink-soft);
}
.shop-pro__sizes-header-val {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 13px;
    color: var(--n8-ink);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.shop-pro__sizes-chevron {
    width: 12px; height: 12px;
    transition: transform .22s ease-out;
    color: var(--n8-ink);
    flex-shrink: 0;
}
.shop-pro__sizes-block.is-open .shop-pro__sizes-chevron { transform: rotate(180deg); }

/* Chips taille : hidden par défaut, déployées via .is-open */
.shop-pro__sizes {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin: 0;
    transition: max-height .28s ease-out, opacity .22s, margin-top .22s;
}
.shop-pro__sizes-block.is-open .shop-pro__sizes {
    max-height: 200px;
    opacity: 1;
    margin-top: 8px;
}
.shop-pro__size {
    flex: 1;
    min-width: 28px;
    background: #fff;
    color: #0a0f1a;
    border: 1px solid rgba(10,15,26,0.14);
    border-radius: 4px;
    padding: 6px 4px;
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.shop-pro__size:hover { background: var(--n8-bg-2, #f0f2f6); border-color: #0a0f1a; }
.shop-pro__size.is-active {
    background: #0a0f1a;
    color: #fff;
    border-color: #0a0f1a;
}
.shop-pro__size.is-out { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

/* État "priming" du bouton Acheter (1er clic = expand sizes) */
.shop-pro__buy.is-priming {
    background: #0a0f1a;
    animation: buy-pulse 1.4s ease-in-out infinite;
}
@keyframes buy-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(101,128,196,0.45); }
    50% { box-shadow: 0 0 0 6px rgba(101,128,196,0); }
}

/* Body card — densifié */
.shop-pro__body { padding: 9px 12px 12px; }
.shop-pro__cat-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; gap: 6px; }
.shop-pro__cat {
    font-family: var(--n8-condensed);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--n8-ink-soft);
    margin: 0;
}
.shop-pro__rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--n8-semicondensed);
    font-size: 10.5px;
    color: var(--n8-ink-3);
    white-space: nowrap;
}
.shop-pro__rating-stars { color: #ffb600; letter-spacing: -0.5px; font-size: 11px; }
.shop-pro__name {
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.2;
    margin: 0 0 6px;
    color: var(--n8-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.4em;
}
.shop-pro__name a { color: inherit; text-decoration: none; }
.shop-pro__name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.shop-pro__price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.shop-pro__price {
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 16px;
    color: var(--n8-ink);
    margin: 0;
}
.shop-pro__shipping {
    font-family: var(--n8-semicondensed);
    font-size: 10px;
    font-weight: 600;
    color: #1a5d3e;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Actions impulse buy */
.shop-pro__actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
}
.shop-pro__add {
    background: #fff;
    color: #0a0f1a;
    border: 1.5px solid #0a0f1a;
    border-radius: 5px;
    padding: 7px 10px;
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.shop-pro__add:hover { background: #0a0f1a; color: #fff; }
.shop-pro__add.is-added {
    background: #1a5d3e;
    border-color: #1a5d3e;
    color: #fff;
}
.shop-pro__buy {
    background: #0a0f1a;
    color: #fff;
    border: 1.5px solid #0a0f1a;
    border-radius: 5px;
    padding: 7px 11px;
    font-family: var(--n8-condensed);
    font-weight: 800;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: transform .15s, box-shadow .15s;
}
.shop-pro__buy:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(10,15,26,0.22); }
.shop-pro__buy svg { width: 11px; height: 11px; }

/* Toast confirmation Ajouté au panier */
.shop-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #0a0f1a;
    color: #fff;
    padding: 12px 18px;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(10,15,26,0.28);
    font-family: var(--n8-condensed);
    font-weight: 700;
    font-size: 13px;
    z-index: 9999;
    opacity: 0;
    transition: transform .25s, opacity .25s;
    display: flex;
    align-items: center;
    gap: 10px;
}
.shop-toast.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.shop-toast a { color: #fff; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }


/* ============================================================
   NETTOYAGE CONTENU LEGACY — éléments inline redondants
   Masque les éléments générés dans le post_content avant la
   refonte v6 (reading-time, sommaire nav HTML, intro p styled,
   <p class="reading-time">, etc.)
   Sans retirer les styles de la DB.
   ============================================================ */

/* reading-time injecté dans le contenu */
.nosk8-article__content .reading-time,
.nosk8-article__content p.reading-time {
    display: none;
}

/* Sommaire HTML inline (nav avec lien internes) — remplacé par le TOC JS */
.nosk8-article__content > nav,
.nosk8-article__content > p > nav {
    display: none;
}

/* <p class="intro"> inline — déjà rendu en lede par le template PHP */
.nosk8-article__content p.intro:first-of-type {
    display: none;
}

/* Titres h1 résiduels dans le contenu (normalement retirés par le filtre PHP,
   mais fallback CSS au cas où) */
.nosk8-article__content h1 {
    font-size: var(--n8-fs-2xl, 1.75rem);
    font-family: var(--n8-condensed);
    font-weight: 800;
    margin-top: 2rem;
}

/* ─── Fix Blocksy : #main-container overflow:hidden casse position:sticky ──
   Blocksy injecte `overflow:hidden;overflow:clip` sur #main-container, ce qui
   bloque la sidebar sticky sur les single posts v6.
   On surcharge UNIQUEMENT sur .nosk8-single-refonte pour ne pas casser le reste.
   ───────────────────────────────────────────────────────────────────────────── */
body.nosk8-single-refonte #main-container {
    overflow: visible !important;
}

/* ─── FIX 1 : Gap header ↔ hero ─────────────────────────────────────────────
   DIAGNOSTIC Playwright (2026-05-12) :
   - Header Blocksy = position:static, height≈90px desktop / 77px mobile
   - main#main.site-main a padding-top:92px injecté par Blocksy
   - body a aussi padding-top:92px (barre admin WP — ne pas toucher)
   - Le hero.nosk8-hero-portrait commence donc à top:184px au lieu de ≈90px
   - Coupable unique : main#main.site-main { padding-top: 92px }
   Scoppé à body.nosk8-single-refonte → zéro impact sur les 290 autres articles.
   Le body padding-top reste intact (nécessaire pour la barre admin WP).
   ─────────────────────────────────────────────────────────────────────────── */
body.nosk8-single-refonte main#main.site-main {
    padding-top: 0 !important;
}

/* ─── Fix LiteSpeed : hero portrait image en background
   LiteSpeed lazy-load remplace src par un SVG placeholder même avec no-lazyload
   sur les images position:absolute. On s'assure que l'image background est visible
   dès le chargement CSS sans attendre le JS lazy-loader.
   ─────────────────────────────────────────────────────────────────────────── */
.nosk8-hero-portrait__img[data-no-lazy="1"],
.nosk8-hero-portrait__img.no-lazyload {
    content-visibility: auto;
}

/* ============================================================
   MINI-SHOP INLINE — nouveau markup preview (spots-incontent-shop*)
   Source DA : blocksy-refonte/preview/spots/index.html
   Markup IDENTIQUE a la preview locale — mix 2 WooCommerce + 2 Amazon
   ============================================================ */
/* MINI-SHOP INLINE — version compacte impulse-buy
   Hauteur réduite de ~35% vs version précédente.
   Mobile : 2 cols. Desktop : 4 cols. Image max-height:110px portrait.
   -------------------------------------------------------------------- */
.spots-incontent-shop {
    background: #f7f8fa;
    border: 1px solid #e3e6ec;
    border-radius: 10px;
    padding: 13px 14px;
    margin: 20px 0;
}
.spots-incontent-shop__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.spots-incontent-shop__kicker {
    font-family: "Barlow Semi Condensed", system-ui, sans-serif;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #4a5970;
    margin: 0 0 2px;
}
.spots-incontent-shop__title {
    font-family: "Barlow Condensed", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(16px, 2.5vw, 19px);
    margin: 0;
    color: #0a0f1a;
    letter-spacing: -0.01em;
}
.spots-incontent-shop__all {
    font-family: "Barlow Semi Condensed", system-ui, sans-serif;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0a0f1a;
    text-decoration: none;
    white-space: nowrap;
}
.spots-incontent-shop__grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 13px;
    -webkit-overflow-scrolling: touch;
    padding: 2px 13px 8px;
    margin: 0 -13px;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.spots-incontent-shop__grid::-webkit-scrollbar { display: none; }
.spots-incontent-shop__grid > * { scroll-snap-align: start; }
@media (min-width: 720px) {
    .spots-incontent-shop__grid {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        overflow: visible;
        padding: 0;
        margin: 0;
        scroll-snap-type: none;
    }
}
.spots-incontent-shop__card {
    background: #fff;
    border: 1px solid #e3e6ec;
    border-radius: 7px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s;
    position: relative;
}
.spots-incontent-shop__card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(10,15,26,0.08); }
/* Image portrait compact — max 110px height */
.spots-incontent-shop__img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    object-position: center;
    background: #eef0f4;
    display: block;
}
.spots-incontent-shop__body { padding: 7px 9px 9px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.spots-incontent-shop__name {
    font-family: "Barlow Condensed", system-ui, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.2;
    color: #0a0f1a;
    margin: 0;
    /* 1 seule ligne, ellipsis si trop long */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spots-incontent-shop__src {
    font-family: "Barlow Semi Condensed", system-ui, sans-serif;
    font-size: 9px;
    color: #6b7686;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.spots-incontent-shop__src strong { color: #c83a4a; }
.spots-incontent-shop__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding-top: 0; }
.spots-incontent-shop__price {
    font-family: "Barlow Condensed", system-ui, sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #0a0f1a;
}
.spots-incontent-shop__cta {
    background: #1a2744;
    color: #fff;
    font-family: "Barlow Condensed", system-ui, sans-serif;
    font-weight: 800;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Badges tier */
.spots-incontent-shop__badge {
    position: absolute;
    top: 6px; left: 6px;
    font-family: "Barlow Semi Condensed", system-ui, sans-serif;
    font-weight: 700;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1.4;
}
.spots-incontent-shop__badge--best {
    background: #1a2744;
    color: #fff;
}
.spots-incontent-shop__badge--cheap {
    background: #0a8c5a;
    color: #fff;
}

/* Legacy — anciennes classes n8-inline-shop (conservees pour rétrocompatibilite) */
.n8-inline-shop { background: #f7f8fa; border: 1px solid #e3e6ec; border-radius: 12px; padding: 22px; margin: 32px 0; }
.n8-inline-shop__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.n8-inline-shop__head-left { display: flex; flex-direction: column; gap: 2px; }
.n8-inline-shop__kicker { font-family: "Barlow Semi Condensed", system-ui, sans-serif; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: #4a5970; margin: 0 0 4px; }
.n8-inline-shop__title { font-family: "Barlow Condensed", system-ui, sans-serif; font-weight: 800; font-size: clamp(20px,3vw,24px); margin: 0; color: #0a0f1a; letter-spacing: -0.01em; }
.n8-inline-shop__all { font-family: "Barlow Semi Condensed", system-ui, sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #0a0f1a; text-decoration: none; }
.n8-inline-shop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 720px) { .n8-inline-shop__grid { grid-template-columns: repeat(4, 1fr); } }
.n8-inline-shop__card { background: #fff; border: 1px solid #e3e6ec; border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.n8-inline-shop__card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10,15,26,.08); }
.n8-inline-shop__img-wrap { aspect-ratio: 1; overflow: hidden; background: #eef0f4; flex-shrink: 0; }
.n8-inline-shop__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.n8-inline-shop__info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.n8-inline-shop__kicker-card { font-family: "Barlow Semi Condensed", system-ui, sans-serif; font-size: 10px; color: #6b7686; margin: 0; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.n8-inline-shop__kicker-card strong { color: #c83a4a; }
.n8-inline-shop__name { font-family: "Barlow Condensed", system-ui, sans-serif; font-weight: 700; font-size: 13px; line-height: 1.2; color: #0a0f1a; margin: 0; }
.n8-inline-shop__price { font-family: "Barlow Condensed", system-ui, sans-serif; font-weight: 800; font-size: 15px; color: #0a0f1a; margin: 0; }
.n8-inline-shop__cta { background: #0a0f1a; color: #fff; font-family: "Barlow Condensed", system-ui, sans-serif; font-weight: 800; font-size: 11px; padding: 5px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.n8-inline-shop__disclaimer { font-size: .67rem; color: #bbb; margin: 14px 0 0; line-height: 1.5; text-align: center; }

/* ============================================================
   BLOCK AUTEUR (.chr-author) — affiche sur tous les articles
   Source : preview Chroniques (identique)
   ============================================================ */
.chr-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 0;
    margin: 24px 0;
    border-top: 1px solid #e3e6ec;
    border-bottom: 1px solid #e3e6ec;
}
.chr-author__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #1a2744;
    box-shadow: 0 4px 12px rgba(10,15,26,.18);
    display: block;
}
.chr-author__body { min-width: 0; }
.chr-author__name {
    font-family: var(--n8-condensed, 'Bebas Neue', sans-serif);
    font-size: 17px;
    font-weight: 800;
    color: #0a0f1a;
    margin: 0 0 2px;
}
.chr-author__name a { color: inherit; text-decoration: none; }
.chr-author__name a:hover { text-decoration: underline; }
.chr-author__role {
    font-size: 11.5px;
    font-weight: 700;
    color: #4a5970;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 6px;
}
.chr-author__bio { font-size: 13.5px; color: #1a2744; line-height: 1.5; margin: 0; }
.chr-author__bio em { font-style: italic; color: #4a5970; }

/* ============================================================
   CONTINUE TA LECTURE — section cinema plein fond
   ============================================================ */
.nosk8-continue {
    position: relative;
    overflow: hidden;
    min-height: 380px;
    display: flex;
    align-items: center;
}
.nosk8-continue__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    transition: transform 6s ease;
    will-change: transform;
}
.nosk8-continue:hover .nosk8-continue__bg { transform: scale(1.0); }
.nosk8-continue__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(10,15,26,.88) 45%, rgba(10,15,26,.45) 100%);
}
.nosk8-continue__inner {
    position: relative;
    z-index: 2;
    padding-top: 56px;
    padding-bottom: 56px;
}
.nosk8-continue__text {
    max-width: 560px;
}
.nosk8-continue__kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.65);
    margin: 0 0 10px;
}
.nosk8-continue__cat {
    display: inline-block;
    background: #1a2744;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 3px;
    margin-bottom: 12px;
}
.nosk8-continue__heading {
    font-family: var(--n8-condensed, 'Bebas Neue', sans-serif);
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.08;
    color: #fff;
    margin: 0 0 12px;
}
.nosk8-continue__heading a { color: inherit; text-decoration: none; }
.nosk8-continue__heading a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.nosk8-continue__excerpt {
    font-size: .9rem;
    line-height: 1.55;
    color: rgba(255,255,255,.72);
    margin: 0 0 20px;
}
.nosk8-continue__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.nosk8-continue__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #1a2744;
    color: #fff;
    border: 1px solid #1a2744;
    font-weight: 800;
    font-size: .85rem;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
    letter-spacing: .02em;
}
.nosk8-continue__cta:hover { background: #fff; color: #1a2744; border-color: #fff; transform: translateY(-1px); }
.nosk8-continue__meta {
    font-size: .78rem;
    color: rgba(255,255,255,.5);
}

/* ============================================================
   ARTICLES SIMILAIRES — grille 6 cards uniformes 16:9
   ============================================================ */
.nosk8-related { padding: 56px 0; background: #f7f7f5; }
.nosk8-related__title {
    font-family: var(--n8-condensed, 'Bebas Neue', sans-serif);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 800;
    color: #0a0f1a;
    margin: 0 0 28px;
    letter-spacing: .02em;
}
.nosk8-related__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    list-style: none;
    padding: 0;
    margin: 0;
}
@media (min-width: 680px) { .nosk8-related__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .nosk8-related__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.nosk8-related__card { background: #fff; border-radius: 10px; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.nosk8-related__card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(10,15,26,.12); }
.nosk8-related__link { display: block; text-decoration: none; height: 100%; }
.nosk8-related__thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e8e8e8;
}
.nosk8-related__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.nosk8-related__card:hover .nosk8-related__thumb img { transform: scale(1.04); }
.nosk8-related__thumb-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #1a2744 0%, #0a0f1a 100%); }
.nosk8-related__body { padding: 14px 14px 16px; }
.nosk8-related__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.nosk8-related__cat {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #888;
}
.nosk8-related__time {
    font-size: .68rem;
    color: #bbb;
    margin-left: auto;
}
.nosk8-related__heading {
    font-size: .9rem;
    font-weight: 700;
    color: #0a0f1a;
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   SIDEBAR — zones complementaires
   ============================================================ */
.nosk8-side-shop__kicker {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 4px;
}
.nosk8-side-shop__title {
    font-family: var(--n8-condensed, 'Bebas Neue', sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #0a0f1a;
    margin: 0 0 16px;
    letter-spacing: .02em;
}
.nosk8-side-shop__list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 12px; }
.nosk8-side-shop__item {}
.nosk8-side-shop__link {
    display: flex;
    gap: 12px;
    text-decoration: none;
    align-items: flex-start;
    padding: 10px;
    border-radius: 8px;
    background: #f7f7f5;
    transition: background .15s;
}
.nosk8-side-shop__link:hover { background: #eef0f6; }
.nosk8-side-shop__img-wrap {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #e8e8e8;
}
.nosk8-side-shop__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nosk8-side-shop__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nosk8-side-shop__name { font-size: .82rem; font-weight: 700; color: #0a0f1a; line-height: 1.3; }
.nosk8-side-shop__price { font-size: .8rem; font-weight: 800; color: #1a2744; }
.nosk8-side-shop__price del { opacity: .45; font-weight: 400; }
.nosk8-side-shop__cta {
    display: inline-block;
    margin-top: 4px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #1a2744;
    text-transform: uppercase;
}
.nosk8-side-shop__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 700;
    color: #1a2744;
    text-decoration: none;
    margin-top: 4px;
    transition: gap .15s;
}
.nosk8-side-shop__more:hover { gap: 10px; }

/* ============================================================
   COMMENTAIRES v6 — OTP email + Turnstile
   ============================================================ */
.nosk8-article__comments { padding: 56px 0; background: #fff; }

/* ═══════════════════════════════════════════════════════════════
   RÈGLE RÉSILIENTE — TOUTE ZONE À FOND FONCÉ
   David : "sur fond noir/foncé l'écriture claire voire très claire"
   On force UNIQUEMENT la color blanche pour la lisibilité.
   font-family et font-style préservés (richesse typo existante,
   italique du sous-titre tagline volontaire).
   Le forçage police complet ne s'applique qu'aux NOUVEAUX
   composants via classe utilitaire .is-dark ou [data-bg="dark"].
   ═══════════════════════════════════════════════════════════════ */
.nosk8-continue,
.nosk8-continue *:not(.nosk8-continue__cta):not(a),
.nosk8-hero-portrait__inner,
.nosk8-hero-portrait__inner *:not(a):not(button) {
    color: #fff;
}
/* Classe utilitaire pour nouveaux composants à fond foncé */
.is-dark,
.is-dark *,
[data-bg="dark"],
[data-bg="dark"] * {
    font-family: var(--n8-sans, "Barlow", system-ui, sans-serif);
    font-style: normal;
}
.is-dark,
.is-dark *:not(a):not(button),
[data-bg="dark"],
[data-bg="dark"] *:not(a):not(button) {
    color: #fff;
}
.nosk8-continue a,
.nosk8-hero-portrait__inner a,
.is-dark a,
[data-bg="dark"] a {
    color: #f0f4ff;
}
.nosk8-continue a:hover,
.nosk8-hero-portrait__inner a:hover,
.is-dark a:hover,
[data-bg="dark"] a:hover {
    color: #fff;
}

/* ─── Toast notification (feedback copy URL, etc.) ───────────────── */
.nosk8-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%) translateY(20px);
    background: #0a0f1a;
    color: #fff;
    font-family: var(--n8-semi, "Barlow Semi Condensed", system-ui, sans-serif);
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: 0.02em;
    padding: 11px 18px;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(10, 15, 26, 0.28);
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    max-width: calc(100vw - 32px);
    text-align: center;
}
.nosk8-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (max-width: 480px) {
    .nosk8-toast { bottom: 16px; font-size: 13px; padding: 10px 16px; }
}

/* Fin d'article : © NOSK8 — Média skate indépendant + bordure grisée au-dessus */
.nosk8-article__end {
    background: #fff;
    color: #7a869c;
    padding: 22px 18px;
    text-align: center;
    font-family: var(--n8-semi, "Barlow Semi Condensed", system-ui, sans-serif);
    font-size: 11px;
    letter-spacing: 0.04em;
    border-top: 1px solid #e3e6ec;
    margin-top: 8px;
}
.n8-comments__locked { padding: 24px; text-align: center; color: #888; font-size: .9rem; }
.n8-comments__head { margin-bottom: 28px; }
.n8-comments__title {
    font-family: var(--n8-condensed, 'Bebas Neue', sans-serif);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    color: #0a0f1a;
    margin: 0;
    letter-spacing: .02em;
}
.n8-comments__subtitle {
    font-family: var(--n8-condensed, 'Bebas Neue', sans-serif);
    font-size: 1.2rem;
    font-weight: 800;
    color: #0a0f1a;
    margin: 0 0 8px;
}
.n8-comments__notice {
    font-size: .82rem;
    color: #666;
    margin: 0 0 20px;
    line-height: 1.5;
}

/* Liste des commentaires */
.n8-comments__list { list-style: none; padding: 0; margin: 0 0 40px; display: flex; flex-direction: column; gap: 20px; }
.n8-comment { padding-bottom: 20px; border-bottom: 1px solid rgba(10,15,26,.06); }
.n8-comment:last-child { border-bottom: none; }
.n8-comment__header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.n8-comment__avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.n8-comment__meta { display: flex; flex-direction: column; gap: 2px; }
.n8-comment__author { font-weight: 700; font-size: .88rem; color: #0a0f1a; }
.n8-comment__date { font-size: .75rem; color: #aaa; }
.n8-comment__body { font-size: .88rem; line-height: 1.6; color: #333; }
.n8-comment__body p:first-child { margin-top: 0; }
.n8-comment__body p:last-child { margin-bottom: 0; }

/* Formulaire OTP */
.n8-comments__form-wrap {
    background: #f7f7f5;
    border-radius: 12px;
    padding: 28px 24px;
    border: 1px solid rgba(26,39,68,.08);
}
.n8-otp-step[hidden] { display: none; }
.n8-form-row { margin-bottom: 16px; }
.n8-form-label { display: block; font-size: .8rem; font-weight: 700; color: #0a0f1a; margin-bottom: 6px; letter-spacing: .02em; }
.n8-form-req { font-weight: 400; color: #999; font-size: .75rem; }
.n8-form-input {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid rgba(26,39,68,.18);
    border-radius: 7px;
    font-size: .9rem;
    color: #0a0f1a;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
    font-family: inherit;
}
.n8-form-input:focus { outline: none; border-color: #1a2744; box-shadow: 0 0 0 3px rgba(26,39,68,.10); }
.n8-form-textarea {
    width: 100%;
    padding: 10px 13px;
    border: 1.5px solid rgba(26,39,68,.18);
    border-radius: 7px;
    font-size: .9rem;
    color: #0a0f1a;
    background: #fff;
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
    line-height: 1.55;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}
.n8-form-textarea:focus { outline: none; border-color: #1a2744; box-shadow: 0 0 0 3px rgba(26,39,68,.10); }
.n8-form-counter { font-size: .72rem; color: #aaa; margin: 4px 0 0; text-align: right; }
.n8-form-actions { margin-top: 4px; }
.n8-otp-input {
    letter-spacing: .18em;
    font-size: 1.3rem;
    font-family: 'Space Mono', monospace;
    text-align: center;
    max-width: 180px;
}
.n8-otp__hint { font-size: .82rem; color: #555; margin: 0 0 16px; }
.n8-otp__error { font-size: .8rem; color: #c0392b; margin: 8px 0 0; background: rgba(192,57,43,.06); padding: 8px 12px; border-radius: 5px; }
.n8-otp__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* Boutons commentaires */
.n8-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .85rem;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 7px;
    border: none;
    cursor: pointer;
    letter-spacing: .02em;
    transition: background .15s, transform .15s, opacity .15s;
    font-family: inherit;
    text-decoration: none;
}
.n8-btn:disabled { opacity: .55; cursor: not-allowed; }
.n8-btn--primary { background: #1a2744; color: #fff; }
.n8-btn--primary:hover:not(:disabled) { background: #2a3a5c; transform: translateY(-1px); }
.n8-btn--ghost { background: transparent; color: #1a2744; border: 1.5px solid rgba(26,39,68,.25); }
.n8-btn--ghost:hover:not(:disabled) { background: rgba(26,39,68,.06); }
.n8-btn--full { width: 100%; justify-content: center; }

/* Succes */
.n8-comments__success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 32px;
    text-align: center;
}
.n8-comments__success p { font-size: .92rem; color: #333; margin: 0; line-height: 1.5; }