/* ============================================================
   ARTICLE.CSS - Editorial Pivot (light cream)
   Palette papier creme + serif Fraunces. Bascule de palette
   par rapport au portfolio dark cyber : on assume la rupture,
   c'est l'entree dans le territoire blog / lecture longue forme.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Inter:ital,wght@0,400..700;1,400..700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --paper: #fefdfb;
    --paper-warm: #faf5ec;
    --paper-deep: #f4ecd6;
    --ink: #1c1917;
    --ink-soft: #44403c;
    --ink-muted: #78716c;
    --rule: #e7e2d5;
    --rule-warm: rgba(180, 83, 9, 0.4);
    --accent: #0e7490;
    --accent-warm: #b45309;
    --accent-warm-soft: rgba(180, 83, 9, 0.08);
    --serif: "Fraunces", "Times New Roman", Georgia, serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
    --t: 0.3s ease;
}

/* ============================================================
   BODY OVERRIDE - bascule en palette light
   ============================================================ */
body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.75;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(28, 25, 23, 0.025) 1px, transparent 0);
    background-size: 24px 24px;
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   HEADER - nav adaptee en light
   ============================================================ */
body header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(254, 253, 251, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}

body header.header-hidden {
    transform: translateY(-100%);
}

body header.scrolled {
    box-shadow: 0 4px 20px rgba(28, 25, 23, 0.06);
}

body header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

body header nav .logo {
    font-family: var(--mono);
    font-size: 1rem;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.01em;
    font-weight: 500;
}

body header nav .nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

body header nav .nav-links a {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color var(--t);
    border: none;
}

body header nav .nav-links a:hover,
body header nav .nav-links a.active {
    color: var(--ink);
    border: none;
}

body header nav .nav-links a.active {
    color: var(--accent-warm);
}

body header nav .social-links {
    display: flex;
    gap: 1rem;
}

body header nav .social-links a {
    color: var(--ink-muted);
    font-size: 1.05rem;
    transition: color var(--t);
    border: none;
}

body header nav .social-links a:hover {
    color: var(--accent-warm);
}

body header nav .menu-toggle {
    display: none;
}

body header nav .menu-toggle span {
    background: var(--ink);
}

/* Particules canvas du portfolio : on cache dans le blog (rupture nette) */
body canvas#particles-canvas {
    display: none;
}

/* ============================================================
   READING PROGRESS BAR
   ============================================================ */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: var(--accent-warm);
    z-index: 1100;
    transition: width 0.05s linear;
}

/* ============================================================
   ARTICLE LAYOUT
   ============================================================ */
.article-page {
    padding-top: 6rem;
    padding-bottom: 6rem;
    min-height: 100vh;
}

.article-grid {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 2rem;
}

@media (max-width: 600px) {
    .article-grid { padding: 0 1.5rem; }
    .article-page { padding-top: 5rem; padding-bottom: 4rem; }
}

/* ============================================================
   ARTICLE HERO - centre, signature editoriale magazine
   ============================================================ */
.article-hero {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    z-index: auto;
    margin-bottom: 2.5rem;
    text-align: center;
}

.article-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent-warm);
    font-weight: 500;
    margin-bottom: 2rem;
}

.article-source-badge::before,
.article-source-badge::after {
    content: "";
    width: 36px;
    height: 1px;
    background: var(--rule-warm);
}

.article-source-badge i {
    display: none;
}

.article-title {
    font-family: var(--serif);
    font-variation-settings: "opsz" 96, "SOFT" 50;
    font-weight: 500;
    font-size: clamp(2.4rem, 5.6vw, 3.6rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin-bottom: 1.5rem;
}

.article-lead {
    font-family: var(--sans);
    font-style: italic;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 auto 2.5rem;
    max-width: 60ch;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    padding: 1.2rem 0;
    border-top: 1px solid var(--rule-warm);
    border-bottom: 1px solid var(--rule);
    font-family: var(--sans);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-muted);
    align-items: center;
    justify-content: center;
}

.article-meta > * {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding-right: 1.5rem;
    margin-right: 1.5rem;
    border-right: 1px solid var(--rule);
}

.article-meta > *:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

.article-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.article-meta-item i {
    color: var(--accent-warm);
    font-size: 0.78rem;
}

.article-meta-item strong {
    color: var(--ink);
    font-weight: 600;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.article-tag {
    font-size: 0.72rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    transition: color var(--t);
}

.article-tag:hover { color: var(--accent-warm); }

/* ============================================================
   PROSE - body de l'article
   ============================================================ */
.article-prose {
    font-family: var(--sans);
    font-size: 1.115rem;
    line-height: 1.78;
    color: var(--ink);
    word-wrap: break-word;
}

.article-prose > * + * { margin-top: 1.5rem; }

/* DROP CAP - signature visuelle (premier paragraphe uniquement) */
.article-prose > p:first-of-type::first-letter {
    font-family: var(--serif);
    font-variation-settings: "opsz" 144, "SOFT" 100;
    font-weight: 400;
    font-size: 4.8rem;
    float: left;
    line-height: 1;
    margin: 0.05em 0.12em -0.05em 0;
    color: var(--accent-warm);
}

.article-prose p {
    color: var(--ink);
}

.article-prose strong {
    color: var(--ink);
    font-weight: 600;
}

.article-prose em { font-style: italic; }

.article-prose a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(14, 116, 144, 0.35);
    transition: all var(--t);
}

.article-prose a:hover {
    color: var(--accent-warm);
    border-bottom-color: var(--accent-warm);
}

.article-prose a.external::after {
    content: "\f08e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7em;
    margin-left: 0.3em;
    opacity: 0.5;
}

/* Headings */
.article-prose h2 {
    font-family: var(--serif);
    font-variation-settings: "opsz" 60, "SOFT" 40;
    font-weight: 500;
    font-size: 1.95rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--rule-warm);
    scroll-margin-top: 5rem;
}

/* Premier H2 : pas de separateur (le hero fait la rupture) */
.article-prose > h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.article-prose h3 {
    font-family: var(--serif);
    font-variation-settings: "opsz" 36;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.3;
    color: var(--ink);
    margin-top: 2.8rem;
    scroll-margin-top: 5rem;
}

.article-prose h4 {
    font-family: var(--serif);
    font-variation-settings: "opsz" 24;
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--ink);
    margin-top: 2rem;
}

.article-prose .header-anchor {
    margin-left: 0.4rem;
    opacity: 0;
    color: var(--accent-warm);
    transition: opacity var(--t);
    text-decoration: none;
    border: none;
    font-family: var(--sans);
    font-size: 0.7em;
}

.article-prose h2:hover .header-anchor,
.article-prose h3:hover .header-anchor,
.article-prose h4:hover .header-anchor {
    opacity: 1;
}

/* Lists */
.article-prose ul,
.article-prose ol {
    padding-left: 1.5rem;
}

.article-prose li {
    color: var(--ink);
    margin-top: 0.5rem;
}

.article-prose ul li::marker { color: var(--accent-warm); }
.article-prose ol li::marker { color: var(--accent-warm); font-weight: 600; }

/* ============================================================
   PULL QUOTE - signature editoriale
   ============================================================ */
.article-prose blockquote.pull-quote {
    margin: 3.5rem auto;
    max-width: 600px;
    padding: 2.2rem 0;
    text-align: center;
    border-top: 1px solid var(--rule-warm);
    border-bottom: 1px solid var(--rule-warm);
    border-left: none;
    background: transparent;
    border-radius: 0;
    font-style: normal;
    color: var(--ink);
    position: relative;
}

.article-prose blockquote.pull-quote::before {
    content: "\201C";
    font-family: var(--serif);
    font-size: 3.5rem;
    color: var(--accent-warm);
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--paper);
    padding: 0 1rem;
    line-height: 1;
}

.article-prose blockquote.pull-quote p {
    font-family: var(--serif);
    font-variation-settings: "opsz" 48;
    font-weight: 400;
    font-style: italic;
    font-size: 1.55rem;
    line-height: 1.4;
    color: var(--ink);
    letter-spacing: -0.005em;
    margin-bottom: 1rem;
}

.article-prose blockquote.pull-quote cite {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--ink-muted);
}

/* Blockquote standard (sans pull-quote) */
.article-prose blockquote:not(.pull-quote) {
    border-left: 3px solid var(--accent-warm);
    background: var(--accent-warm-soft);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 4px 4px 0;
    color: var(--ink-soft);
    font-style: italic;
}

/* ============================================================
   CALLOUTS - Stripe Press pur (fond teinte + label, pas de bordure)
   Palette harmonisee : 4 hues max, toutes desaturees au meme niveau
   ============================================================ */
.article-prose .callout {
    --callout-color: #0e7490;
    --callout-bg: rgba(14, 116, 144, 0.06);
    margin: 2.5rem 0;
    padding: 1.2rem 1.4rem;
    background: var(--callout-bg);
    border-radius: 4px;
    font-family: var(--sans);
}

.article-prose .callout-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--callout-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-family: var(--sans);
}

.article-prose .callout p {
    font-size: 1.05rem;
    color: var(--ink);
    line-height: 1.7;
}

.article-prose .callout p strong { color: var(--ink); font-weight: 600; }

.article-prose .callout-info {
    --callout-color: #0e7490;
    --callout-bg: rgba(14, 116, 144, 0.06);
}

.article-prose .callout-warning {
    --callout-color: #b45309;
    --callout-bg: rgba(180, 83, 9, 0.07);
}

.article-prose .callout-success {
    --callout-color: #0f766e;
    --callout-bg: rgba(15, 118, 110, 0.06);
}

.article-prose .callout-danger {
    --callout-color: #9f1239;
    --callout-bg: rgba(159, 18, 57, 0.06);
}

.article-prose .callout-note {
    --callout-color: #5b21b6;
    --callout-bg: rgba(91, 33, 182, 0.05);
}

/* Compatibilite : ancienne structure callout-title */
.article-prose .callout-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--callout-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.article-prose .callout-title i { display: none; }

.article-prose .callout-content > * + * { margin-top: 0.8rem; }

/* ============================================================
   CODE - inline + blocks
   ============================================================ */
.article-prose code:not(pre code) {
    background: var(--paper-warm);
    padding: 0.15em 0.45em;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 0.9em;
    color: var(--accent-warm);
    border: 1px solid var(--rule);
}

.article-prose .codehilite {
    --code-bg: #292524;
    --code-header-bg: #342f2a;
    --code-border: rgba(255, 255, 255, 0.07);
    --code-text: #e2d9d0;
    background: var(--code-bg);
    border: none;
    border-radius: 6px;
    margin: 2.2rem 0;
    overflow: hidden;
}

.article-prose .codehilite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--code-header-bg);
    border-bottom: 1px solid var(--code-border);
    font-family: var(--mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #8a7d74;
}

.article-prose .codehilite-lang { font-weight: 500; color: #b09880; }

.article-prose .codehilite-copy {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #8a7d74;
    padding: 0.2rem 0.6rem;
    border-radius: 3px;
    font-family: inherit;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    cursor: pointer;
    transition: all var(--t);
}

.article-prose .codehilite-copy:hover {
    color: #e8956d;
    border-color: rgba(232, 149, 109, 0.4);
}

.article-prose .codehilite-copy.copied {
    color: #85c1a0;
    border-color: rgba(133, 193, 160, 0.4);
}

.article-prose .codehilite pre {
    margin: 0;
    padding: 1.2rem 1.4rem;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--code-text);
    background: transparent;
}

.article-prose .codehilite pre::-webkit-scrollbar { height: 6px; }
.article-prose .codehilite pre::-webkit-scrollbar-track { background: transparent; }
.article-prose .codehilite pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* Pygments tokens - warm dark theme, cohérent avec palette éditoriale */
.article-prose .codehilite .c,
.article-prose .codehilite .c1,
.article-prose .codehilite .cm { color: #7a6e65; font-style: italic; }
.article-prose .codehilite .k,
.article-prose .codehilite .kd,
.article-prose .codehilite .kn,
.article-prose .codehilite .kr { color: #e8956d; font-weight: 500; }
.article-prose .codehilite .s,
.article-prose .codehilite .s1,
.article-prose .codehilite .s2,
.article-prose .codehilite .sb { color: #85c1a0; }
.article-prose .codehilite .nf,
.article-prose .codehilite .nc { color: #6db8d4; }
.article-prose .codehilite .nb { color: #c5a8e0; }
.article-prose .codehilite .nv,
.article-prose .codehilite .n { color: var(--code-text); }
.article-prose .codehilite .nt { color: #85c1a0; }
.article-prose .codehilite .o,
.article-prose .codehilite .ow { color: #a89880; }
.article-prose .codehilite .mi,
.article-prose .codehilite .mf,
.article-prose .codehilite .mh { color: #c5a8e0; }
.article-prose .codehilite .p { color: #c8bdb5; }
.article-prose .codehilite .na { color: #6db8d4; }
.article-prose .codehilite .nd { color: #e8956d; }

/* ============================================================
   TABLE
   ============================================================ */
.article-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 2.5rem 0;
    font-family: var(--sans);
    font-size: 0.95rem;
}

.article-prose th {
    text-align: left;
    padding: 0.75rem 0.5rem;
    border-bottom: 2px solid var(--accent-warm);
    font-family: var(--sans);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent-warm);
    font-weight: 600;
    background: transparent;
}

.article-prose td {
    padding: 0.85rem 0.5rem;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
}

.article-prose tr:hover td { background: var(--accent-warm-soft); }

/* ============================================================
   IMAGES
   ============================================================ */
.article-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 2rem 0;
    border: 1px solid var(--rule);
}

.article-prose figure { margin: 2rem 0; }

.article-prose figcaption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--ink-muted);
    margin-top: 0.6rem;
    font-style: italic;
}

/* HR */
.article-prose hr {
    border: none;
    height: 1px;
    background: var(--rule-warm);
    margin: 3rem auto;
    max-width: 200px;
}

/* Keyboard */
.article-prose kbd {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-bottom-width: 2px;
    border-radius: 3px;
    padding: 0.1em 0.4em;
    font-family: var(--mono);
    font-size: 0.85em;
    color: var(--ink);
}

/* ============================================================
   ARTICLE FOOTER
   ============================================================ */
.article-footer {
    margin-top: 5rem;
    padding-top: 3rem;
    border-top: 1px solid var(--rule-warm);
    background: var(--paper);
    color: var(--ink);
}

.article-sources {
    margin-bottom: 3rem;
}

.article-sources-title {
    font-family: var(--sans);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--accent-warm);
    margin-bottom: 1.2rem;
    font-weight: 600;
}

.article-sources ol {
    list-style: none;
    counter-reset: sources;
    padding: 0;
}

.article-sources li {
    counter-increment: sources;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule);
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    font-family: var(--sans);
    font-size: 0.92rem;
    line-height: 1.5;
}

.article-sources li:last-child { border-bottom: none; }

.article-sources li::before {
    content: counter(sources, decimal-leading-zero);
    font-family: var(--mono);
    color: var(--accent-warm);
    font-size: 0.78rem;
    padding-top: 0.15rem;
}

.article-sources a {
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: all var(--t);
    word-break: break-word;
}

.article-sources a:hover {
    color: var(--accent-warm);
    border-bottom-color: var(--accent-warm);
}

.article-share {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-family: var(--sans);
    margin-bottom: 3rem;
}

.article-share-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ink-muted);
    margin-right: 0.5rem;
}

.article-share a {
    padding: 0.5rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
    color: var(--ink-soft);
    background: transparent;
    text-decoration: none;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: all var(--t);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.article-share a:hover {
    color: var(--accent-warm);
    border-color: var(--accent-warm);
}

.article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

@media (max-width: 640px) {
    .article-nav { grid-template-columns: 1fr; }
}

.article-nav-link {
    padding: 1.2rem 1.5rem;
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-radius: 4px;
    transition: all var(--t);
    display: block;
    text-decoration: none;
}

.article-nav-link:hover {
    border-color: var(--accent-warm);
    background: var(--accent-warm-soft);
    transform: translateY(-1px);
}

.article-nav-direction {
    font-family: var(--sans);
    font-size: 0.7rem;
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.4rem;
}

.article-nav-title {
    font-family: var(--serif);
    color: var(--ink);
    font-weight: 500;
    line-height: 1.3;
    font-size: 1.05rem;
}

.article-nav-link.next { text-align: right; }

.article-nav-link.disabled {
    opacity: 0.4;
    pointer-events: none;
}