/*
 * AlsNime - Actualités du site (/news, /news/<article>) + rendu Markdown (.news-prose),
 * aussi utilisé par l'aperçu de l'éditeur (/editorial/edit).
 * Couleur de catégorie : variable --cat (#rrggbb validé côté serveur).
 * Repli sans color-mix() : couleurs de base de la trame (als-ui.css).
 */

/* ───────────────────────────────────────── Filtres (pastilles de catégories) */
.news-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}
.news-chip {
    --cat: var(--als-accent);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .85rem;
    border-radius: var(--als-radius-pill);
    border: 1px solid var(--als-border-soft);
    border-color: color-mix(in srgb, var(--cat) 55%, transparent);
    background: var(--als-surface);
    color: var(--als-text);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}
.news-chip:hover,
.news-chip:focus-visible {
    background: color-mix(in srgb, var(--cat) 22%, var(--als-surface));
    color: #fff;
}
.news-chip.is-active {
    background: var(--cat);
    border-color: var(--cat);
    color: #0b0c2a;
}

/* ───────────────────────────────────────────────────────────────── Cartes */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.news-card {
    --cat: var(--als-accent);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--als-radius);
    border: 1px solid var(--als-border-soft);
    background: var(--als-surface);
    box-shadow: var(--als-shadow);
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease;
}
.news-card:hover,
.news-card:focus-within {
    transform: translateY(-2px);
    border-color: var(--cat);
}
@media (prefers-reduced-motion: reduce) {
    .news-card { transition: none; }
    .news-card:hover, .news-card:focus-within { transform: none; }
}
.news-card__cover {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 7;
    background: linear-gradient(135deg, #1d2160, #0e1032);
    background:
        radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--cat) 60%, transparent), transparent 58%),
        radial-gradient(circle at 85% 90%, color-mix(in srgb, var(--cat) 30%, transparent), transparent 55%),
        linear-gradient(135deg, #1d2160, #0e1032);
    overflow: hidden;
    text-decoration: none;
}
.news-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05);
}
.news-card__cover::after {
    /* trame discrète, propre au module */
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 14px 14px;
    pointer-events: none;
}
.news-card__icon {
    font-size: 2.6rem;
    line-height: 1;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
}
.news-card__cover .news-version {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    z-index: 1;
}
.news-card__body {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: .9rem 1rem 1rem;
    flex: 1 1 auto;
}
.news-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
    font-size: .78rem;
    color: var(--als-text-muted);
}
.news-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}
.news-card__title a {
    color: var(--als-text-heading);
    text-decoration: none;
}
.news-card__title a::after {
    /* toute la carte est cliquable (un seul lien annoncé) */
    content: '';
    position: absolute;
    inset: 0;
}
.news-card__title a:focus-visible { outline: none; }
.news-card:focus-within { outline: 2px solid var(--cat); outline-offset: 2px; }
.news-card__summary {
    margin: 0;
    color: var(--als-text);
    font-size: .9rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card__foot {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .76rem;
    color: var(--als-text-muted);
}

/* Carte « à la une » (premier article de la première page) */
.news-card--hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    margin-bottom: 1rem;
}
.news-card--hero .news-card__cover { aspect-ratio: auto; min-height: 240px; }
.news-card--hero .news-card__icon { font-size: 4.5rem; }
.news-card--hero .news-card__body { padding: 1.4rem 1.5rem; gap: .65rem; justify-content: center; }
.news-card--hero .news-card__title { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
.news-card--hero .news-card__summary { -webkit-line-clamp: 4; font-size: 1rem; }
@media (max-width: 767.98px) {
    .news-card--hero { grid-template-columns: 1fr; }
    .news-card--hero .news-card__cover { min-height: 0; aspect-ratio: 16 / 7; }
    .news-card--hero .news-card__icon { font-size: 3rem; }
    .news-card--hero .news-card__body { padding: 1rem; }
}

/* Carte compacte (articles liés) */
.news-card--compact .news-card__cover { aspect-ratio: 16 / 5; }
.news-card--compact .news-card__icon { font-size: 1.8rem; }
.news-card--compact .news-card__title { font-size: .95rem; }

/* ───────────────────────────────────────────────────────────────── Article */
.news-article {
    --cat: var(--als-accent);
    margin-bottom: 1.5rem;
}
.news-article__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    border-radius: var(--als-radius);
    border: 1px solid var(--als-border-soft);
    border-top: 4px solid var(--cat);
    background: var(--als-surface);
    background:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--cat) 26%, transparent), transparent 55%),
        var(--als-surface);
    box-shadow: var(--als-shadow);
    overflow: hidden;
}
.news-article__glyph {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 24px;
    font-size: 2.6rem;
    background: rgba(255, 255, 255, .06);
    background: color-mix(in srgb, var(--cat) 22%, rgba(255, 255, 255, .04));
    border: 1px solid color-mix(in srgb, var(--cat) 50%, transparent);
}
.news-article__cover {
    flex: 0 0 auto;
    width: 120px;
    height: 170px;
    object-fit: cover;
    border-radius: var(--als-radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.news-article__intro { min-width: 0; }
.news-article__tags { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.news-article__title {
    font-size: clamp(1.45rem, 3vw, 2.15rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--als-text-heading);
    margin: 0 0 .5rem;
    overflow-wrap: anywhere;
}
.news-article__lead {
    font-size: 1.05rem;
    color: var(--als-text);
    margin: 0 0 .6rem;
    max-width: 70ch;
}
.news-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    font-size: .85rem;
    color: var(--als-text-muted);
    margin: 0;
}
@media (max-width: 575.98px) {
    .news-article__head { flex-direction: column; align-items: flex-start; padding: 1.1rem; gap: .9rem; }
    .news-article__glyph { width: 64px; height: 64px; font-size: 2rem; border-radius: 18px; }
    .news-article__cover { width: 96px; height: 136px; }
}

.news-article__layout {
    display: block;
}
.news-article__layout.has-toc {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 991.98px) {
    .news-article__layout.has-toc { grid-template-columns: 1fr; gap: 1rem; }
}
.news-toc {
    position: sticky;
    top: 1rem;
    padding: 1rem;
    border-radius: var(--als-radius-sm);
    border: 1px solid var(--als-border-soft);
    background: var(--als-surface-sunken);
    font-size: .85rem;
}
@media (max-width: 991.98px) { .news-toc { position: static; } }
.news-toc__title { font-weight: 700; color: var(--als-text-heading); margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.news-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.news-toc a { color: var(--als-text-muted); text-decoration: none; display: block; padding: .15rem 0 .15rem .5rem; border-left: 2px solid transparent; }
.news-toc a:hover, .news-toc a:focus-visible { color: #fff; border-left-color: var(--cat); }
.news-toc__l3 a { padding-left: 1.1rem; font-size: .8rem; }

.news-article__layout > .news-prose {
    padding: 1.5rem;
    border-radius: var(--als-radius);
    border: 1px solid var(--als-border-soft);
    background: var(--als-surface);
    box-shadow: var(--als-shadow);
}
@media (max-width: 575.98px) { .news-article__layout > .news-prose { padding: 1.1rem; } }

.news-article__foot { margin-top: 1.25rem; display: grid; gap: 1rem; }
.news-share { display: flex; flex-wrap: wrap; gap: .5rem; }
.news-adjacent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: .75rem;
}
.news-adjacent__link {
    display: grid;
    gap: .2rem;
    padding: .85rem 1rem;
    border-radius: var(--als-radius-sm);
    border: 1px solid var(--als-border-soft);
    background: var(--als-surface);
    text-decoration: none;
    color: var(--als-text);
}
.news-adjacent__link--next { text-align: right; }
.news-adjacent__link:hover, .news-adjacent__link:focus-visible { border-color: var(--cat); color: #fff; }
.news-adjacent__dir { font-size: .75rem; color: var(--als-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.news-adjacent__title { font-weight: 600; overflow-wrap: anywhere; }
.news-related { margin-top: 1.5rem; }
.news-grid--related { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

/* ───────────────────────────────────────────────────── Texte (Markdown rendu) */
.news-prose {
    --cat: var(--als-accent);
    color: var(--als-text);
    font-size: 1rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
    max-width: 78ch;
}
.news-article__layout > .news-prose { max-width: none; }
.news-prose > :first-child { margin-top: 0; }
.news-prose > :last-child { margin-bottom: 0; }
.news-prose p { margin: 0 0 1rem; }
.news-prose h2,
.news-prose h3,
.news-prose h4 {
    color: var(--als-text-heading);
    font-weight: 700;
    line-height: 1.3;
    scroll-margin-top: 1rem;
}
.news-prose h2 {
    font-size: 1.4rem;
    margin: 2rem 0 .85rem;
    padding-left: .75rem;
    border-left: 4px solid var(--cat);
}
.news-prose h3 { font-size: 1.15rem; margin: 1.5rem 0 .6rem; }
.news-prose h4 { font-size: 1rem; margin: 1.25rem 0 .5rem; color: var(--als-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.news-prose a { color: var(--als-text-link); text-decoration: underline; text-underline-offset: 3px; }
.news-prose a:hover, .news-prose a:focus-visible { color: var(--als-text-link-hover); }
.news-prose a.news-ext::after { content: ' ↗'; font-size: .8em; text-decoration: none; display: inline-block; }
.news-prose strong { color: var(--als-text-heading); }
.news-prose mark {
    background: rgba(251, 191, 36, .25);
    color: #fff;
    padding: 0 .2em;
    border-radius: 4px;
}
.news-prose del { color: var(--als-text-muted); }
.news-prose code {
    font-size: .88em;
    background: var(--als-surface-code);
    color: var(--als-text-mono);
    padding: .1em .4em;
    border-radius: 6px;
    border: 1px solid var(--als-border-table);
}
.news-prose .news-code {
    background: var(--als-surface-code);
    border: 1px solid var(--als-border-table);
    border-radius: var(--als-radius-xs);
    padding: .9rem 1rem;
    overflow-x: auto;
    margin: 0 0 1rem;
    font-size: .85rem;
    line-height: 1.55;
}
.news-prose .news-code code { background: none; border: 0; padding: 0; font-size: inherit; }
.news-prose ul,
.news-prose ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.news-prose li { margin: .25rem 0; }
.news-prose li > ul,
.news-prose li > ol { margin: .25rem 0 0; }
.news-prose ul > li::marker { color: var(--cat); }
.news-prose ol > li::marker { color: var(--cat); font-weight: 700; }
.news-prose .news-task-item { list-style: none; margin-left: -1.4rem; display: flex; gap: .55rem; align-items: baseline; }
.news-prose .news-task-text { min-width: 0; }
.news-prose .news-task {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 5px;
    border: 2px solid var(--als-border);
    font-size: .75rem;
    line-height: 1;
    transform: translateY(2px);
}
.news-prose .news-task--done { background: var(--als-ok); border-color: var(--als-ok); color: #052e16; font-weight: 800; }
.news-prose blockquote {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border-left: 4px solid var(--als-border);
    background: var(--als-surface-sunken);
    border-radius: 0 var(--als-radius-xs) var(--als-radius-xs) 0;
    color: var(--als-text-muted);
}
.news-prose blockquote > :last-child { margin-bottom: 0; }
.news-prose hr {
    border: 0;
    height: 2px;
    margin: 2rem auto;
    width: 40%;
    background: linear-gradient(90deg, transparent, var(--cat), transparent);
    opacity: .8;
}
.news-prose .news-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1rem auto;
    border-radius: var(--als-radius-sm);
}

/* Encadrés > [!NOTE] … */
.news-callout {
    --tone: var(--als-info);
    margin: 0 0 1rem;
    padding: .85rem 1rem;
    border-radius: var(--als-radius-sm);
    border: 1px solid var(--tone);
    border: 1px solid color-mix(in srgb, var(--tone) 50%, transparent);
    border-left-width: 4px;
    background: var(--als-info-bg);
    background: color-mix(in srgb, var(--tone) 12%, transparent);
}
.news-callout > :last-child { margin-bottom: 0; }
.news-callout__title { font-weight: 700; color: var(--tone); margin: 0 0 .35rem; }
.news-callout--tip { --tone: var(--als-ok); }
.news-callout--new { --tone: #a78bfa; }
.news-callout--fix { --tone: var(--als-warn); }
.news-callout--warning { --tone: var(--als-warn); }
.news-callout--important { --tone: var(--als-err); }

/* Tableaux */
.news-table-wrap { overflow-x: auto; margin: 0 0 1rem; }
.news-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}
.news-table th,
.news-table td {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--als-border-table);
    vertical-align: top;
}
.news-table thead th {
    color: var(--als-text-heading);
    background: var(--als-surface-raised);
    border-bottom: 2px solid var(--cat);
    text-align: left;
}
.news-table tbody tr:nth-child(even) { background: var(--als-surface-stripe); }
.news-al-center { text-align: center !important; }
.news-al-right { text-align: right !important; }

/* Spoiler ||texte|| : flouté jusqu'au survol / focus (clavier) */
.news-spoiler {
    border-radius: 4px;
    padding: 0 .2em;
    background: rgba(255, 255, 255, .12);
    filter: blur(5px);
    cursor: help;
    transition: filter .2s ease;
}
.news-spoiler:hover,
.news-spoiler:focus { filter: none; outline: none; background: rgba(255, 255, 255, .06); }

/* Carte d'anime ::anime[123] */
.news-anime { margin: 0 0 1rem; }
.news-anime__link {
    display: flex;
    gap: .9rem;
    align-items: center;
    max-width: 520px;
    padding: .6rem;
    border-radius: var(--als-radius-sm);
    border: 1px solid var(--als-border-soft);
    background: var(--als-surface-sunken);
    text-decoration: none !important;
    color: var(--als-text) !important;
}
.news-anime__link:hover,
.news-anime__link:focus-visible { border-color: var(--cat); }
.news-anime__cover { width: 72px; height: 102px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: rgba(255, 255, 255, .06); }
.news-anime__body { display: grid; gap: .2rem; min-width: 0; }
.news-anime__title { font-weight: 700; color: var(--als-text-heading); }
.news-anime__meta { font-size: .8rem; color: var(--als-text-muted); }
.news-anime__cta { font-size: .8rem; color: var(--als-text-link); }

/* ── Lot V : réactions et suivi des catégories ──────────────────────────── */
.news-react { display: grid; gap: .45rem; }
.news-react__title { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--als-text-muted); margin: 0; font-weight: 600; }
.news-react__bar { display: flex; flex-wrap: wrap; gap: .4rem; }
.news-react__btn {
    display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; min-height: 2.2rem;
    border-radius: var(--als-radius-pill); border: 1px solid var(--als-border-soft); background: var(--als-surface);
    color: var(--als-text); font-size: .9rem; font-variant-numeric: tabular-nums; cursor: pointer;
    transition: background var(--als-t-fast), border-color var(--als-t-fast), transform var(--als-t-fast);
}
.news-react__btn:hover:not(.is-static), .news-react__btn:focus-visible { border-color: var(--als-accent); background: var(--als-surface-hover); }
.news-react__btn.is-mine { border-color: var(--als-accent); background: var(--als-neutral-bg); box-shadow: inset 0 0 0 1px var(--als-accent); }
.news-react__btn.is-static { cursor: default; }
.news-react__emoji { font-size: 1.05rem; line-height: 1; }
.news-react__n { font-weight: 700; font-size: .82rem; }
.news-react[aria-busy="true"] .news-react__btn { opacity: .6; pointer-events: none; }
.news-react__hint { margin: 0; font-size: .8rem; }
@media (prefers-reduced-motion: no-preference) { .news-react__btn:active:not(.is-static) { transform: scale(.94); } }

.news-follow.is-on { border-color: var(--als-ok-border); background: var(--als-ok-bg); }
.news-follow-panel { margin: 0 0 1rem; padding: .75rem 1rem; }
.news-follow-panel__title { cursor: pointer; font-weight: 700; font-size: .92rem; }
.news-follow-panel__title:focus-visible { outline: 2px solid var(--als-focus, var(--als-accent)); outline-offset: 2px; border-radius: 4px; }
.news-follow-panel[open] .news-follow-panel__title { margin-bottom: .45rem; }
.news-follow-panel__list { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ── Lot V : dossiers ───────────────────────────────────────────────────── */
.news-series-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; counter-reset: none; }
.news-series-list__item { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .6rem; align-items: start; }
.news-series-list__n {
    display: grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-top: .6rem; border-radius: 50%;
    background: var(--als-neutral-bg); border: 1px solid var(--als-accent); font-weight: 800; color: var(--als-text-heading);
}
.news-series-box {
    margin-top: 1.25rem; padding: 1rem 1.15rem; border-radius: var(--als-radius);
    border: 1px solid var(--als-border-soft); border-left: 4px solid var(--als-accent); background: var(--als-surface);
}
.news-series-box__kicker { margin: 0 0 .2rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--als-text-muted); display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.news-series-box__pos { text-transform: none; letter-spacing: 0; }
.news-series-box__title { font-size: 1.05rem; margin: 0 0 .5rem; }
.news-series-box__title a { color: var(--als-text-heading); text-decoration: none; }
.news-series-box__title a:hover, .news-series-box__title a:focus-visible { text-decoration: underline; }
.news-series-box__list { margin: 0; padding-left: 1.3rem; display: grid; gap: .2rem; font-size: .9rem; }
.news-series-box__list a { color: var(--als-text-link); }
.news-series-box__list .is-current { font-weight: 700; color: var(--als-text-heading); }
.news-series-strip { margin-top: 1.5rem; }
.news-series-strip__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: .75rem; }
.news-series-card {
    display: flex; gap: .75rem; align-items: center; padding: .7rem .8rem; border-radius: var(--als-radius-sm);
    border: 1px solid var(--als-border-soft); background: var(--als-surface); color: var(--als-text); text-decoration: none;
    transition: border-color var(--als-t-fast), background var(--als-t-fast);
}
.news-series-card:hover, .news-series-card:focus-visible { border-color: var(--als-accent); background: var(--als-surface-hover); }
.news-series-card img { width: 48px; height: 68px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; }
.news-series-card__icon { font-size: 2rem; width: 48px; text-align: center; flex: 0 0 auto; }
.news-series-card__body { display: grid; gap: .15rem; min-width: 0; }
.news-series-card__title { font-weight: 700; color: var(--als-text-heading); }
.news-series-card__desc { font-size: .8rem; color: var(--als-text-muted); }
.news-series-card__count { font-size: .75rem; color: var(--als-text-link); }