/**
 * Observatoire WP Commander — mise en page de rapport éditorial.
 *
 * Colonne de lecture étroite pour l'éditorial et largeur contenue pour les
 * cartes, tableaux et graphiques. La marge latérale reste visible à toutes
 * les tailles d'écran.
 */

.wpcsa-obs {
    --obs-ink: #0b1220;
    --obs-muted: #5b6577;
    --obs-line: #dfe3ea;
    --obs-soft: #f7f9fc;
    --obs-accent: #fb5b1e;
    --obs-confirmed: #c0261a;
    --obs-probable: #9a6000;
    --obs-fixed: #0a6c4a;
    /* Trois largeurs distinctes, appliquées au contenu et jamais au parent. */
    --obs-read: 820px;     /* prose : paragraphes, méthodologie, idées reçues */
    --obs-content: 1120px; /* métriques, cartes et blocs de synthèse */
    --obs-wide: 1240px;    /* tableaux de vulnérabilités et graphiques */
    --obs-gutter: clamp(2rem, 8vw, 10rem);

    /* Le thème contraint ses enfants à contentSize (48rem). Cette publication
       gère ses trois largeurs elle-même : elle doit donc sortir du gabarit
       parent, sinon tableaux et graphiques restent bloqués à 768 px. */
    width: 100vw;
    max-width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    margin-bottom: clamp(48px, 6vw, 88px);
    color: var(--obs-ink);
    font-size: 1.0625rem;
    line-height: 1.7;
}

/* La sortie de gabarit en 100vw peut dépasser la zone de contenu lorsqu'une
   barre de défilement verticale est présente. On borne ce débordement au
   conteneur de la page, comme le thème le fait déjà pour sa page d'accueil,
   afin qu'aucun défilement horizontal ne remonte au document. */
.wpcsa-obs { overflow-x: clip; }

.wpcommander-main:has(.wpcsa-obs),
.wp-block-post-content:has(.wpcsa-obs) { overflow-x: clip; }

.wpcsa-obs *,
.wpcsa-obs *::before,
.wpcsa-obs *::after { box-sizing: border-box; }

/* Largeur de lecture : la prose uniquement. */
.observatory-reading-width,
.wpcsa-obs__hero > :not(.wpcsa-obs__keyfigures),
.wpcsa-obs__section > p,
.wpcsa-obs__section > h2,
.wpcsa-obs__section > h3,
.wpcsa-obs__section > ol,
.wpcsa-obs__section > ul {
    width: min(100% - var(--obs-gutter), var(--obs-read));
    margin-inline: auto;
}

/* Largeur standard : métriques et blocs de synthèse en grille. */
.observatory-content-width,
.wpcsa-obs__keyfigures,
.wpcsa-obs__split,
.wpcsa-obs__scope,
.wpcsa-obs__claims {
    width: min(100% - var(--obs-gutter), var(--obs-content));
    margin-inline: auto;
}

/* Largeur large : tout ce qui porte de la donnée tabulaire ou graphique. */
.observatory-wide-width,
.wpcsa-obs__tablewrap,
.wpcsa-obs__figure {
    width: min(100% - var(--obs-gutter), var(--obs-wide));
    margin-inline: auto;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.wpcsa-obs__hero { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); }

.wpcsa-obs__eyebrow {
    margin: 0 0 1rem;
    color: var(--obs-accent);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.wpcsa-obs h1 {
    margin: 0 0 1.25rem;
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    line-height: 1.05;
    letter-spacing: -.035em;
}

.wpcsa-obs__lede {
    margin: 0 0 1.75rem;
    color: var(--obs-muted);
    font-size: 1.1875rem;
    line-height: 1.65;
}

.wpcsa-obs__stale {
    margin: 0 0 1.75rem;
    padding: .85rem 1.1rem;
    border-left: 3px solid var(--obs-probable);
    background: #fdf6e8;
    color: #6b4500;
    font-size: .9375rem;
}

/* 4 métriques d'ouverture, chacune avec sa définition. */
.wpcsa-obs__keyfigures {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 1.75rem;
    border-top: 1px solid var(--obs-line);
    border-bottom: 1px solid var(--obs-line);
}

.wpcsa-obs__keyfigure { padding: 1.25rem 1.1rem 1.25rem 0; }
.wpcsa-obs__keyfigure + .wpcsa-obs__keyfigure { padding-left: 1.1rem; border-left: 1px solid var(--obs-line); }

.wpcsa-obs__keyfigure dt {
    margin: 0 0 .5rem;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.35;
}

.wpcsa-obs__keyfigure dd { margin: 0; }

.wpcsa-obs__keyfigure strong {
    display: block;
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    line-height: 1;
    letter-spacing: -.04em;
}

.wpcsa-obs__unit {
    display: block;
    margin-top: .3rem;
    color: var(--obs-muted);
    font-size: .75rem;
    font-weight: 600;
}

/* La définition reste dans le flux : lisible, indexable, accessible. */
.wpcsa-obs__def {
    display: block;
    margin-top: .55rem;
    color: var(--obs-muted);
    font-size: .75rem;
    line-height: 1.5;
}

.wpcsa-obs__updated { margin: 0; color: var(--obs-muted); font-size: .8125rem; }

/* ── Sections ─────────────────────────────────────────────────────────── */

.wpcsa-obs__section { padding-top: clamp(2.5rem, 5vw, 4rem); }

.wpcsa-obs h2 {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 3.5vw, 3rem);
    line-height: 1.12;
    letter-spacing: -.03em;
}

.wpcsa-obs h3 {
    margin: 2rem 0 .75rem;
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.25;
    letter-spacing: -.02em;
}

.wpcsa-obs__intro { margin: 0 0 1.5rem; color: var(--obs-muted); }
.wpcsa-obs__intro strong { color: var(--obs-ink); }

.wpcsa-obs__takeaways { margin: 0; padding-left: 1.35rem; }
.wpcsa-obs__takeaways li { margin-bottom: .85rem; }

.wpcsa-obs__empty { color: var(--obs-muted); font-style: italic; }

/* ── Tableaux ─────────────────────────────────────────────────────────── */

.wpcsa-obs__tablewrap { overflow-x: auto; margin: 0 auto 1.5rem; }

.wpcsa-obs__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
    text-align: left;
}

.wpcsa-obs__table caption {
    margin-bottom: .75rem;
    color: var(--obs-muted);
    font-size: .8125rem;
    text-align: left;
}

.wpcsa-obs__table thead th {
    position: sticky;
    top: 0;
    padding: .7rem .8rem;
    border-bottom: 2px solid var(--obs-ink);
    background: #fff;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}

.wpcsa-obs__table tbody th,
.wpcsa-obs__table tbody td {
    padding: .85rem .8rem;
    border-bottom: 1px solid var(--obs-line);
    vertical-align: top;
}

.wpcsa-obs__table tbody tr:hover { background: var(--obs-soft); }
.wpcsa-obs__table tbody th { font-weight: 700; }
.wpcsa-obs__table code { font-size: .8125rem; }

.wpcsa-obs__table--compact tbody td,
.wpcsa-obs__table--compact tbody th { padding: .6rem .8rem; }

.wpcsa-obs__muted { display: block; color: var(--obs-muted); font-size: .75rem; font-weight: 400; }
.wpcsa-obs__vector { display: block; margin-top: .3rem; color: var(--obs-muted); font-size: .6875rem; word-break: break-all; }
.wpcsa-obs__sources { display: block; margin-top: .3rem; font-size: .6875rem; }
.wpcsa-obs__sources a { margin-right: .5rem; }

/* ── Cartes de vulnérabilités ────────────────────────────────────────── */

.wpcsa-obs__threat-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    width: min(100% - var(--obs-gutter), var(--obs-content));
    margin: 1.5rem auto 0;
}

.wpcsa-obs__threat-card {
    overflow: hidden;
    border: 1px solid var(--obs-line);
    border-radius: .85rem;
    background: #fff;
    box-shadow: 0 10px 30px rgba(11, 18, 32, .055);
}

.wpcsa-obs__threat-head {
    display: flex;
    gap: 1.25rem;
    justify-content: space-between;
    padding: 1.25rem;
}

.wpcsa-obs__component-type {
    display: block;
    margin-bottom: .35rem;
    color: var(--obs-accent);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.wpcsa-obs__threat-card h3 {
    margin: 0;
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    line-height: 1.25;
    letter-spacing: -.02em;
}

.wpcsa-obs__threat-card h3 a { text-decoration: none; }
.wpcsa-obs__threat-card h3 a:hover { color: var(--obs-accent); }

.wpcsa-obs__threat-identity {
    flex: 0 0 auto;
    text-align: right;
}

.wpcsa-obs__threat-identity code {
    display: block;
    font-size: .8125rem;
    font-weight: 800;
}

.wpcsa-obs__threat-identity a {
    display: inline-block;
    margin-top: .35rem;
    color: var(--obs-accent);
    font-size: .75rem;
    font-weight: 750;
    text-decoration: none;
}

.wpcsa-obs__threat-identity a:hover { text-decoration: underline; }

.wpcsa-obs__threat-signals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--obs-line);
    background: var(--obs-soft);
}

.wpcsa-obs__threat-signals > div {
    min-width: 0;
    padding: .9rem 1.25rem;
    border-bottom: 1px solid var(--obs-line);
}

.wpcsa-obs__threat-signals > div:nth-child(odd) { border-right: 1px solid var(--obs-line); }

.wpcsa-obs__threat-signals dt {
    margin-bottom: .35rem;
    color: var(--obs-muted);
    font-size: .6875rem;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.wpcsa-obs__threat-signals dd {
    margin: 0;
    font-size: .875rem;
    line-height: 1.45;
}

.wpcsa-obs__threat-signals dd > strong {
    font-size: 1.2rem;
    letter-spacing: -.025em;
}

.wpcsa-obs__threat-vector {
    margin: 0;
    padding: .75rem 1.25rem;
    border-bottom: 1px solid var(--obs-line);
    color: var(--obs-muted);
    font-size: .6875rem;
}

.wpcsa-obs__threat-vector span {
    display: block;
    margin-bottom: .2rem;
    font-weight: 750;
}

.wpcsa-obs__threat-vector code {
    overflow-wrap: anywhere;
    color: var(--obs-ink);
}

.wpcsa-obs__threat-branches { padding: 1rem 1.25rem 1.15rem; }

.wpcsa-obs__threat-branches h4 {
    margin: 0 0 .65rem;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

/* Branches : une ligne par plage, jamais réduite à la première. */
.wpcsa-obs__branches { min-width: 18rem; }
.wpcsa-obs__branch { display: block; margin-bottom: .3rem; font-size: .8125rem; }
.wpcsa-obs__branch:last-child { margin-bottom: 0; }
.wpcsa-obs__fix { color: var(--obs-fixed); font-weight: 700; }
.wpcsa-obs__nofix { color: var(--obs-muted); font-style: italic; }

.wpcsa-obs__flag {
    margin-left: .3rem;
    padding: .05rem .3rem;
    border-radius: .25rem;
    background: #fdf0d5;
    color: #6b4500;
    font-size: .625rem;
    font-weight: 700;
    text-decoration: none;
    cursor: help;
}

/* Statuts : la couleur ne porte jamais seule l'information, le mot est écrit. */
.wpcsa-obs__tag {
    display: inline-block;
    padding: .15rem .45rem;
    border-radius: .25rem;
    font-size: .6875rem;
    font-weight: 800;
}

.wpcsa-obs__tag--confirmed { background: #fdeceb; color: var(--obs-confirmed); }
.wpcsa-obs__tag--ransomware { margin-top: .25rem; background: var(--obs-confirmed); color: #fff; }
.wpcsa-obs__tag--stale { background: #fdf0d5; color: #6b4500; }

.wpcsa-obs__delta--hausse { color: var(--obs-confirmed); font-weight: 700; }
.wpcsa-obs__delta--baisse { color: var(--obs-fixed); font-weight: 700; }
.wpcsa-obs__delta--stable { color: var(--obs-muted); }

/* ── Blocs à deux et trois colonnes ───────────────────────────────────── */

.wpcsa-obs__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.wpcsa-obs__scope { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.wpcsa-obs__scope h3 { margin-top: 0; }
.wpcsa-obs__scope ul { margin: 0; padding-left: 1.15rem; font-size: .9375rem; }
.wpcsa-obs__scope li { margin-bottom: .6rem; color: var(--obs-muted); }

.wpcsa-obs__ranked { margin: 0; padding: 0; list-style: none; counter-reset: obs-rank; }

.wpcsa-obs__ranked li {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: .6rem 0;
    border-bottom: 1px solid var(--obs-line);
    font-size: .875rem;
}

.wpcsa-obs__ranked li > span:last-child { color: var(--obs-muted); white-space: nowrap; }

.wpcsa-obs__citation {
    padding: 1rem 1.15rem;
    border-left: 3px solid var(--obs-accent);
    background: var(--obs-soft);
    font-size: .9375rem;
}

/* ── Accessibilité ────────────────────────────────────────────────────── */

.wpcsa-obs a:focus-visible,
.wpcsa-obs [tabindex]:focus-visible {
    outline: 3px solid var(--obs-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .wpcsa-obs * { transition: none !important; animation: none !important; }
}

/* ── Adaptation mobile : la donnée reste entière ──────────────────────── */

@media (max-width: 1000px) {
    .wpcsa-obs__keyfigures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wpcsa-obs__keyfigure:nth-child(odd) { padding-left: 0; border-left: 0; }
    .wpcsa-obs__keyfigure:nth-child(n+3) { border-top: 1px solid var(--obs-line); }
    .wpcsa-obs__scope { grid-template-columns: 1fr; gap: 1.5rem; }
    .wpcsa-obs__threat-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .wpcsa-obs { font-size: 1rem; }
    .wpcsa-obs__keyfigures { grid-template-columns: 1fr; }
    .wpcsa-obs__keyfigure { padding: 1rem 0; border-left: 0 !important; padding-left: 0 !important; }
    .wpcsa-obs__keyfigure + .wpcsa-obs__keyfigure { border-top: 1px solid var(--obs-line); }
    .wpcsa-obs__split { grid-template-columns: 1fr; gap: 1.5rem; }
    /* Les en-têtes collants n'ont pas de sens dans un tableau qui défile. */
    .wpcsa-obs__table thead th { position: static; }
    .wpcsa-obs__threat-head { align-items: flex-start; flex-direction: column; gap: .85rem; }
    .wpcsa-obs__threat-identity { text-align: left; }
    /* Zones tactiles confortables. */
    .wpcsa-obs__ranked li { padding: .75rem 0; min-height: 44px; }
}

/* ── Graphiques : SVG rendu serveur, aucun script requis ──────────────── */

.wpcsa-obs__figure { margin: 0 0 1.5rem; }

.wpcsa-obs__chart {
    display: block;
    width: 100%;
    height: clamp(180px, 26vw, 260px);
    overflow: visible;
}

.wpcsa-obs__figure figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    justify-content: space-between;
    margin-top: .6rem;
    color: var(--obs-muted);
    font-size: .8125rem;
}

.wpcsa-obs__legend { display: flex; flex-wrap: wrap; gap: .9rem; }
.wpcsa-obs__legend span { display: inline-flex; align-items: center; gap: .35rem; }
.wpcsa-obs__legend i { width: .7rem; height: .7rem; border-radius: .15rem; }

.wpcsa-obs__note {
    padding: .85rem 1.1rem;
    border-left: 3px solid var(--obs-line);
    background: var(--obs-soft);
    color: var(--obs-muted);
    font-size: .875rem;
}

/* ── Constats éditoriaux ──────────────────────────────────────────────── */

.wpcsa-obs__claims {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 2rem auto 3rem;
}

.wpcsa-obs__claim {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border: 1px solid var(--obs-line);
    border-radius: .8rem;
    background: #fff;
    box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .045);
}

.wpcsa-obs__claim h3 {
    max-width: none;
    margin: 0 0 .75rem;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 1.2;
    letter-spacing: -.025em;
}

.wpcsa-obs__claim-proof { margin: 0 0 .6rem; }

/* Le score EPSS et l'âge de la CVE sont deux dates différentes. */
.wpcsa-obs__epss-current { font-weight: 800; }
.wpcsa-obs__epss-window { display: block; color: var(--obs-muted); font-size: .6875rem; line-height: 1.4; }

@media (max-width: 1000px) {
    .wpcsa-obs__claims { grid-template-columns: 1fr; }
    .wpcsa-obs__claim h3 { max-width: none; }
}