/* Blog Theme - Magazine Style Override */

:root[data-design="blog"] {
    /* Typography */
    --yn-sans: "Poppins", system-ui, sans-serif;
    --yn-mono: "VT323", monospace;

    /* Color scheme - Magazine style */
    --yn-bg: #e5e1d7;
    --yn-surface: #f5f2ea;
    --yn-border: #1a1a1a;
    /* Assombri : #6b6b6b tenait tout juste le 4.5:1 du AA, et VT323 est une
       fonte pixel — elle demande plus de contraste qu'une fonte lissée. */
    --yn-muted: #5c5c5c;
    --yn-text: #1a1a1a;
    --yn-accent: #0099e5;
    --yn-label: #4a4a4a;
    --yn-surface-2: #ece8de;
    --yn-accent-dim: rgba(0, 153, 229, 0.12);
    --yn-accent-mid: rgba(0, 153, 229, 0.25);
    --yn-border-accent: var(--yn-accent);

    /* Élévation « magazine » : ombres portées dures, pas de flou */
    --yn-shadow-sm: 2px 2px 0 #bcb8ae;
    --yn-shadow-md: 4px 4px 0 #bcb8ae;
    --yn-shadow-hover: 6px 8px 0 var(--yn-accent);
    --yn-wash: #f5f2ea;
    --yn-border-w: 2px;

    /* Rayons plus francs */
    --yn-radius-sm: 4px;
    --yn-radius-md: 8px;
    --yn-radius-lg: 10px;
    --yn-radius-xl: 12px;
}

:root[data-design="blog"] body {
    background: var(--yn-bg);
    color: var(--yn-text);
    font-family: "Poppins", system-ui, sans-serif;
}

:root[data-design="blog"] .yn-nav {
    background: var(--yn-surface);
    border-bottom: 2px solid var(--yn-text);
    box-shadow: 0 3px 0 #bcb8ae;
}

:root[data-design="blog"] .yn-logo {
    font-family: "VT323", monospace;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    color: var(--yn-text);
}

:root[data-design="blog"] .yn-logo span {
    color: var(--yn-accent);
}

:root[data-design="blog"] .yn-nav-link {
    font-family: "VT323", monospace;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yn-text);
    text-decoration: none;
}

:root[data-design="blog"] .yn-nav-link:hover,
:root[data-design="blog"] .yn-nav-link.active {
    color: var(--yn-accent);
    text-decoration: underline;
}

:root[data-design="blog"] .yn-theme-btn {
    color: var(--yn-text);
    background: var(--yn-surface);
    border: 2px solid var(--yn-text);
    box-shadow: var(--yn-shadow-sm);
}

:root[data-design="blog"] .yn-theme-btn:hover {
    background: var(--yn-surface);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--yn-accent);
}

:root[data-design="blog"] h1,
:root[data-design="blog"] h2,
:root[data-design="blog"] h3,
:root[data-design="blog"] h4,
:root[data-design="blog"] h5,
:root[data-design="blog"] h6 {
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 800;
    color: var(--yn-text);
}

:root[data-design="blog"] .yn-section {
    border: none;
    background: transparent;
}

:root[data-design="blog"] .yn-container {
    background: transparent;
}

:root[data-design="blog"] .yn-card {
    background: var(--yn-surface);
    border: 2px solid var(--yn-text);
    border-radius: 10px;
    box-shadow: 4px 4px 0 #bcb8ae;
    transition: all 0.15s;
}

:root[data-design="blog"] .yn-card:hover {
    transform: translateY(-4px);
    box-shadow: 6px 8px 0 #bcb8ae;
}

:root[data-design="blog"] .yn-tag {
    background: var(--yn-text);
    color: var(--yn-surface);
    border: none;
    font-family: "VT323", monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

:root[data-design="blog"] .yn-tag.accent {
    background: var(--yn-accent);
    color: #fff;
}

:root[data-design="blog"] .yn-footer {
    background: var(--yn-surface);
    border-top: 2px solid var(--yn-text);
    box-shadow: 0 -3px 0 #bcb8ae;
    color: var(--yn-text);
}

:root[data-design="blog"] a {
    color: var(--yn-accent);
    text-decoration: none;
}

:root[data-design="blog"] a:hover {
    text-decoration: underline;
}

:root[data-design="blog"] .yn-partners {
    --yn-partners-fade: var(--yn-surface);
    border-top: 2px solid var(--yn-text);
    border-bottom: 2px solid var(--yn-text);
    background: var(--yn-surface);
}

:root[data-design="blog"] .impact-card {
    background: var(--yn-surface);
    box-shadow: var(--yn-shadow-md);
}

:root[data-design="blog"] .impact-card:hover {
    border-color: var(--yn-accent);
    box-shadow: var(--yn-shadow-hover);
}

:root[data-design="blog"] .impact-value {
    font-family: "VT323", monospace;
    font-size: 3rem;
}

:root[data-design="blog"] .yn-partners-label {
    color: var(--yn-text);
    font-family: "VT323", monospace;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 1;
}

:root[data-design="blog"] .yn-partner-item {
    border-right: 2px solid var(--yn-text);
}

:root[data-design="blog"] .yn-partner-name {
    color: var(--yn-text);
    font-family: "VT323", monospace;
    font-weight: 700;
    font-size: 14px;
}

:root[data-design="blog"] .yn-partner-cat {
    color: var(--yn-accent);
    font-family: "VT323", monospace;
}

/* La pluie de code est un motif propre au design moderne : sur fond clair
   elle peint des traînées sombres par-dessus la page. */
:root[data-design="blog"] #code-canvas {
    display: none;
}

:root[data-design="blog"] .yn-section-title {
    font-weight: 800;
}

:root[data-design="blog"] .yn-divider {
    background: var(--yn-text);
    opacity: 0.25;
}

:root[data-design="blog"] .yn-domain {
    background: var(--yn-surface);
    box-shadow: var(--yn-shadow-sm);
}

:root[data-design="blog"] .yn-domain h3 {
    font-family: "VT323", monospace;
    font-size: 1.05rem;
}

:root[data-design="blog"] .yn-domain:hover {
    background: var(--yn-surface);
    box-shadow: 4px 4px 0 var(--yn-accent);
}

/* ================
   LISTE DES PROJETS
   ================ */

:root[data-design="blog"] .project-card {
    background: var(--yn-surface);
    box-shadow: var(--yn-shadow-md);
}

:root[data-design="blog"] .project-card:hover {
    border-color: var(--yn-accent);
    box-shadow: var(--yn-shadow-hover);
}

:root[data-design="blog"] .project-domain,
:root[data-design="blog"] .project-details h4 {
    font-family: "VT323", monospace;
    font-size: 0.9rem;
}

/* ================
   PAGE PROJET
   ================ */

:root[data-design="blog"] .back-link {
    font-family: "VT323", monospace;
    font-size: 1rem;
    color: var(--yn-text);
}

:root[data-design="blog"] .project-header {
    background: var(--yn-surface);
    box-shadow: var(--yn-shadow-md);
}

:root[data-design="blog"] .project-header h1 {
    letter-spacing: -0.01em;
}

:root[data-design="blog"] .project-image {
    filter: saturate(0.9);
}

:root[data-design="blog"] .section-block {
    box-shadow: var(--yn-shadow-md);
}

:root[data-design="blog"] .section-block:hover {
    border-color: var(--yn-accent);
}

:root[data-design="blog"] .section-block h2 {
    font-family: "VT323", monospace;
    font-size: 1.15rem;
    color: var(--yn-text);
}

:root[data-design="blog"] .section-block h2::before {
    background: var(--yn-accent);
    height: 3px;
}

/* Les composants génériques réutilisés par les pages projet */
:root[data-design="blog"] .yn-eyebrow,
:root[data-design="blog"] .yn-project-tag,
:root[data-design="blog"] .yn-card-meta,
:root[data-design="blog"] .yn-footer-left,
:root[data-design="blog"] .yn-footer-links {
    font-family: "VT323", monospace;
    font-size: 0.95rem;
}

:root[data-design="blog"] .yn-project {
    background: var(--yn-surface);
    box-shadow: var(--yn-shadow-md);
}

:root[data-design="blog"] .yn-project:hover {
    border-color: var(--yn-accent);
    box-shadow: var(--yn-shadow-hover);
}

:root[data-design="blog"] .yn-cta.secondary:hover,
:root[data-design="blog"] .yn-card:hover {
    box-shadow: var(--yn-shadow-hover);
}

/* ================
   PARCOURS
   ================ */

:root[data-design="blog"] .timeline {
    border-left-color: var(--yn-text);
}

:root[data-design="blog"] .timeline-item {
    box-shadow: var(--yn-shadow-md);
}

:root[data-design="blog"] .timeline-item:hover {
    border-color: var(--yn-accent);
    box-shadow: var(--yn-shadow-hover);
}

:root[data-design="blog"] .timeline-item::before {
    border-color: var(--yn-text);
}

:root[data-design="blog"] .timeline-period,
:root[data-design="blog"] .timeline-org {
    font-family: "VT323", monospace;
    font-size: 1rem;
}

:root[data-design="blog"] .timeline-period {
    color: var(--yn-text);
}

/* ================
   BLOG & LABS
   ================ */

:root[data-design="blog"] .section-tag,
:root[data-design="blog"] .crt-strip,
:root[data-design="blog"] .lab-sys-strip,
:root[data-design="blog"] .pop-ticker-label,
:root[data-design="blog"] .news-freshness-banner,
:root[data-design="blog"] .search-count,
:root[data-design="blog"] .stat-label,
:root[data-design="blog"] .boot-titlebar,
:root[data-design="blog"] .boot-progress-label,
:root[data-design="blog"] .loading-text {
    font-family: "VT323", monospace;
    font-size: 0.95rem;
}

:root[data-design="blog"] .blog-toolbar,
:root[data-design="blog"] .labs-toolbar,
:root[data-design="blog"] .pop-ticker,
:root[data-design="blog"] .stat-tile,
:root[data-design="blog"] .boot-panel,
:root[data-design="blog"] .coming-soon-hero,
:root[data-design="blog"] .labs-cta,
:root[data-design="blog"] .accordion-header {
    background: var(--yn-surface);
    box-shadow: var(--yn-shadow-md);
}

:root[data-design="blog"] .mp-blog-card,
:root[data-design="blog"] .lab-card {
    background: var(--yn-surface);
    box-shadow: var(--yn-shadow-md);
}

:root[data-design="blog"] .mp-card-link:hover .mp-blog-card,
:root[data-design="blog"] .lab-card:hover,
:root[data-design="blog"] .accordion-header:hover {
    border-color: var(--yn-accent);
    box-shadow: var(--yn-shadow-hover);
}

:root[data-design="blog"] .mp-card-cat,
:root[data-design="blog"] .mp-card-meta,
:root[data-design="blog"] .mp-card-soon,
:root[data-design="blog"] .lab-status,
:root[data-design="blog"] .lab-meta,
:root[data-design="blog"] .lab-tag,
:root[data-design="blog"] .lab-link,
:root[data-design="blog"] .accordion-title,
:root[data-design="blog"] .accordion-count,
:root[data-design="blog"] .category-filter-btn,
:root[data-design="blog"] .filter-btn,
:root[data-design="blog"] .filter-row-label,
:root[data-design="blog"] .view-btn,
:root[data-design="blog"] .planned-chip {
    font-family: "VT323", monospace;
    font-size: 0.9rem;
}

:root[data-design="blog"] .stat-num,
:root[data-design="blog"] .hologram-text .text-line {
    font-family: "VT323", monospace;
}

:root[data-design="blog"] .boot-body {
    font-family: "VT323", monospace;
    font-size: 1rem;
    background: var(--yn-bg);
}

:root[data-design="blog"] .search-input {
    font-family: "Poppins", system-ui, sans-serif;
    background: var(--yn-bg);
}

@media (max-width: 768px) {
    :root[data-design="blog"] .yn-nav {
        height: auto;
        min-height: auto;
        padding: 0.65rem 0.85rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
}