/* blog.css — blog-only components. Loaded AFTER main.css and built on its Voila design tokens.
   Shared chrome (navbar, footer, buttons, tokens, lang-switcher) lives in main.css — never redefine it here. */

/* ── Reset minimal ─────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

/* ── Base ───────────────────────────────────────────────────── */
body {
    font-family: var(--font-sans);
    background-color: var(--canvas);
    color:            var(--ink);
    line-height:      1.6;
    padding-top:      4rem;
}

img {
    max-width: 100%;
    height:    auto;
    display:   block;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ── Container ──────────────────────────────────────────────── */
.post-container {
    width:          100%;
    max-width:      var(--maxw);   /* aligned with .wrap (homepage + footer) */
    margin-inline:  auto;
    padding-inline: 24px;
}

/* ── HEADER ─────────────────────────────────────────────────── */
body > header {
    position:         fixed;
    inset-inline:     0;
    top:              0;
    z-index:          100;
    border-bottom:    1px solid var(--line);
    background-color: var(--canvas);
}

body > header .post-container {
    display:        flex;
    align-items:    center;
    height:         64px;
    padding-block:  0;
    position:       relative;
}

body > header .blog-title {
    font-size:      1.25rem;
    font-weight:    700;
    line-height:    1;
    color:          var(--ink);
    letter-spacing: 0;
}

body > header nav {
    display:     flex;
    align-items: center;
    gap:         2rem;
    font-size:   1rem;
    margin-left: auto;
}

body > header nav a:not(.btn-cta) {
    font-size:       14px;
    color:           var(--ink-secondary);
    font-weight:     500;
    text-decoration: none;
    transition:      color 0.15s ease;
}

body > header nav a:not(.btn-cta):hover {
    color: var(--ink);
}

body > header nav .btn-cta {
    display:          inline-block;
    padding:          0.4rem 1rem;
    border-radius:    0.5rem;
    background-color: var(--coral);
    color:            var(--on-coral);
    font-size:        0.8rem;
    font-weight:      600;
    text-decoration:  none;
    white-space:      nowrap;
    transition:       opacity 0.2s ease, transform 0.2s ease;
}

body > header nav .btn-cta:hover {
    opacity:   0.85;
    color:     var(--on-coral);
    transform: scale(1.03);
}

.mobile-menu-toggle,
.mobile-menu-panel {
    display: none;
}

@media (max-width: 767px) {
    .post-container {
        padding-inline: 1rem;
    }

    body {
        padding-top: 4rem;
    }

    body > header .post-container {
        display:     flex;
        gap:         0.75rem;
        height:      64px;
        align-items: center;
    }

    body > header .mobile-menu-toggle {
        align-items:     center;
        background:      transparent;
        border:          0;
        cursor:          pointer;
        display:         inline-flex;
        flex-direction:  column;
        gap:             4px;
        height:          38px;
        justify-content: center;
        margin-right:    auto;
        padding:         0;
        width:           38px;
    }

    body > header .mobile-menu-toggle span {
        background:    var(--ink);
        border-radius: 999px;
        display:       block;
        height:        2px;
        width:         20px;
    }

    body > header .mobile-menu-panel {
        background:     var(--canvas);
        border:         1px solid var(--line);
        border-radius:  0.75rem;
        box-shadow:     0 16px 40px hsl(0 0% 0% / 0.12);
        display:        none;
        flex-direction: column;
        gap:            0.25rem;
        left:           1rem;
        min-width:      13rem;
        padding:        0.5rem;
        position:       absolute;
        top:            calc(100% + 0.5rem);
        z-index:        200;
    }

    body > header.is-mobile-menu-open .mobile-menu-panel {
        display: flex;
    }

    body > header .mobile-menu-panel a {
        border-radius:   0.5rem;
        color:           var(--ink);
        font-size:       0.95rem;
        font-weight:     600;
        padding:         0.7rem 0.85rem;
        text-decoration: none;
        white-space:     nowrap;
    }

    body > header .mobile-menu-panel a:hover {
        background: var(--canvas-sunk);
    }

    body > header .blog-title {
        display: none;
    }

    body > header nav {
        display:     flex;
        align-items: center;
        gap:         0.75rem;
        margin-left: 0;
    }

    body > header nav > a:not(.btn-cta) {
        display: none;
    }

    body > header nav .lang-switcher {
        margin-right: 0;
    }

    body > header nav .btn-cta {
        padding:   0.4rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* ── HERO ───────────────────────────────────────────────────── */
section.hero {
    position:   relative;
    overflow:   hidden;
    padding:    4rem 0 2.5rem;
}

section.hero::before,
section.hero::after {
    content:  "";
    position: absolute;
    inset:    0;
}

section.hero::before {
    background: linear-gradient(
        135deg,
        var(--coral),
        var(--coral-hover),
        var(--clay)
    );
    opacity: 1;
}

section.hero::after {
    background:
        radial-gradient(circle at 30% 50%, rgba(255,255,255,0.10), transparent 50%),
        radial-gradient(circle at 70% 50%, rgba(255,255,255,0.10), transparent 50%);
}

section.hero .post-container {
    position: relative;
    z-index:  1;
}

section.hero h1 {
    color:           #fff;
    font-family:     var(--font-serif);
    font-size:       clamp(2rem, 5vw, 3.75rem);
    font-weight:     600;
    line-height:     1.15;
    letter-spacing:  -0.02em;
    max-width:       56rem;
}

section.hero .hero-excerpt {
    color:      rgba(255,255,255,0.9);
    font-size:  1.125rem;
    margin-top: 1rem;
    max-width:  42rem;
}

section.hero .hero-date {
    color:      rgba(255,255,255,0.7);
    font-size:  0.875rem;
    margin-top: 1rem;
}

section.hero .hero-byline {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.5rem 0.875rem;
    color:      rgba(255,255,255,0.78);
    font-size:  0.875rem;
    margin-top: 0.75rem;
}

section.hero .hero-byline span + span::before {
    content:      "";
    display:      inline-block;
    width:        4px;
    height:       4px;
    margin-right: 0.875rem;
    border-radius: 50%;
    background:    rgba(255,255,255,0.45);
    vertical-align: middle;
}

section.hero .hero-byline a {
    color:           inherit;
    font-weight:     400;
    text-decoration: none;
}

section.hero .hero-byline a:hover {
    color: #fff;
}

section.hero .hero-bar {
    margin-top:       1.5rem;
    height:           4px;
    width:            4rem;
    background-color: #fff;
    border-radius:    2px;
}

/* ── MAIN LAYOUT (article + sidebar) ───────────────────────── */
/* The article sits on a white sheet; the FAQ band below returns to canvas. */
body > main {
    padding-block:    6rem 6rem;
    background-color: var(--paper);
}

body > main .post-container {
    display:               grid;
    gap:                   3rem;
    grid-template-columns: 1fr;
    align-items:           start; /* overridden to stretch on desktop below */
}

@media (min-width: 1024px) {
    body > main .post-container {
        align-items: stretch;
    }
}

@media (min-width: 1024px) {
    body > main .post-container {
        grid-template-columns: 3fr 1fr;
    }
}

/* Wraps article + tags + faq into the left column */
.post-main-col {
    min-width: 0;
}

/* ── ARTICLE ────────────────────────────────────────────────── */
article {
    max-width: 52rem;
}

article h2 {
    font-family: var(--font-serif);
    font-size:   1.75rem;
    font-weight: 600;
    margin-top:  2.5rem;
    color:       var(--ink);
    line-height: 1.3;
}

article h2:first-child {
    margin-top: 0;
}

article h3 {
    font-size:   1.3rem;
    font-weight: 700;
    margin-top:  1.5rem;
    color:       var(--ink);
}

article p,
article ul,
article ol {
    margin-top:  1.25rem;
    font-size:   1.0625rem;
    line-height: 1.75;
    color:       var(--ink);
}

article ul {
    list-style:   disc;
    padding-left: 1.5rem;
}

article ol {
    list-style:   decimal;
    padding-left: 1.5rem;
}

article li {
    margin-top: 0.5rem;
}

article table {
    width:           100%;
    margin-top:      1.75rem;
    border-collapse: separate;
    border-spacing:  0;
    font-size:       0.8125rem;
    border:          1px solid var(--line);
    border-radius:   0.75rem;
    overflow:        hidden;
}

article thead th {
    padding:        0.625rem 1rem;
    background:     var(--canvas);
    color:          var(--ink-muted);
    font-size:      0.6875rem;
    font-weight:    700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align:     left;
    border-bottom:  1px solid var(--line);
    white-space:    nowrap;
}

article tbody td {
    padding:       0.625rem 1rem;
    color:         var(--ink);
    border-bottom: 1px solid var(--line);
    line-height:   1.4;
}

article tbody tr:last-child td {
    border-bottom: none;
}

article tbody tr:nth-child(even) td {
    background: var(--canvas);
}

/* Internal links & sources sections */
.post-main-col > section {
    margin-top: 5rem;
}

.post-main-col > section.section-sources {
    margin-top: 1.25rem;
}

.post-main-col > section .link-list {
    margin-top:     0.5rem;
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
}

.post-main-col > section .link-list a {
    color:            var(--coral);
    text-decoration:  none;
    transition:       color 0.2s ease;
}

.post-main-col > section .link-list a:hover {
    color: var(--coral-hover);
}

article a {
    color:                 var(--coral);
    text-decoration:       underline;
    text-underline-offset: 3px;
    transition:            color 0.2s ease;
}

article a:hover {
    color: var(--coral-hover);
}

/* Plain link — neutral color, underlined, stays black on hover */
article a.link-plain,
article a.link-plain:hover {
    color:                 var(--ink);
    text-decoration:       underline;
    text-underline-offset: 3px;
}

/* CTA button inside article */
article .btn-cta {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    margin-top:       1rem;
    padding:          0.75rem 1.25rem;
    border-radius:    0.75rem;
    background-color: var(--coral);
    color:            var(--on-coral);
    font-size:        0.875rem;
    font-weight:      600;
    text-decoration:  none;
    transition:       background-color 0.3s ease, transform 0.3s ease;
}

article .btn-cta:hover {
    background-color: var(--coral-hover);
    color:            var(--on-coral);
    transform:        scale(0.95);
}

/* Compact checklist: "What makes a good scanner app" */
.criteria-list {
    margin-top:    1.75rem;
    padding:       1.5rem 1.75rem;
    border:        1px solid var(--line);
    border-radius: 1rem;
    background:    var(--canvas-sunk);
}

.criteria-list h3 {
    margin-top: 1.5rem;
    font-size:  1.0625rem;
    color:      hsl(243 48% 60%);
}

.criteria-list h3:first-child {
    margin-top: 0;
}

.criteria-list p {
    margin-top:  0.35rem;
    font-size:   0.875rem;
    line-height: 1.55;
    color:       var(--ink-muted);
}

.criteria-list ul {
    margin-top:   0.4rem;
    padding-left: 1.25rem;
}

.criteria-list li {
    margin-top:  0.2rem;
    font-size:   0.875rem;
    line-height: 1.5;
}

/* Verdict / TL;DR box near the top of the article */
.verdict-box {
    max-width:        52rem;
    margin-top:       2.5rem;
    padding:          1.5rem 1.75rem;
    border:           1px solid var(--line);
    border-left:      4px solid var(--coral);
    border-radius:    1rem;
    background:       var(--canvas-sunk);
}

.verdict-box > p:first-child {
    margin-top: 0;
}

.verdict-box .btn-cta {
    margin-top: 1.25rem;
}

/* Methodology note — discreet pale-yellow callout */
.method-box {
    max-width:     52rem;
    margin-top:    2rem;
    padding:       1.1rem 1.4rem;
    border:        1px solid var(--line);
    border-left:   4px solid var(--gold);
    border-radius: 0.75rem;
    background:    var(--gold-tint);
}

.method-box h3 {
    margin-top:     0;
    font-size:      0.9375rem;
    letter-spacing: 0.01em;
    color:          hsl(38 60% 32%);
}

.method-box p {
    margin-top:  0.4rem;
    margin-bottom: 0;
    font-size:   0.875rem;
    line-height: 1.55;
    color:       hsl(40 25% 28%);
}

.method-box a {
    color:                   hsl(38 60% 32%);
    text-decoration:         underline;
    text-underline-offset:   2px;
}

.method-box ul {
    margin:       0.4rem 0 0;
    padding-left: 1.1rem;
    font-size:    0.875rem;
    line-height:  1.5;
    color:        hsl(40 25% 28%);
}

.method-box li {
    margin-top: 0.2rem;
}

.method-box li:first-child {
    margin-top: 0;
}


.author-box {
    margin-top:    4rem;
    padding:       1.5rem;
    border:        1px solid var(--line);
    border-radius: 1rem;
    background:    var(--canvas);
}

.author-box__label {
    margin-top:     0;
    color:          var(--ink-muted);
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    line-height:    1.2;
    text-transform: uppercase;
}

.author-box h2 {
    margin-top: 0.5rem;
}

.author-box h2 a {
    color:           inherit;
    text-decoration: none;
}

.author-box p {
    color: var(--ink-muted);
}

/* ── HOVER-SHOT (image avec overlay au survol) ──────────────── */
.hover-shot {
    position:      relative;
    width:         100%;
    max-width:     36rem;
    border-radius: 1rem;
    overflow:      hidden;
    margin-top:    2.5rem;
    margin-inline: auto;
}

.hover-shot img {
    display: block;
    width:   100%;
    height:  auto;
}

.hover-shot__overlay {
    position:       absolute;
    inset:          0;
    background:     linear-gradient(to top, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.35) 35%, transparent 70%);
    opacity:        0;
    transition:     opacity 260ms ease;
    pointer-events: none;
}

.hover-shot__caption {
    position:       absolute;
    left:           1rem;
    bottom:         0.875rem;
    color:          #fff;
    font-weight:    600;
    font-size:      1rem;
    line-height:    1.25;
    opacity:        0;
    transform:      translateY(6px);
    transition:     opacity 260ms ease, transform 260ms ease;
    pointer-events: none;
    text-shadow:    0 2px 8px rgba(0,0,0,0.45);
}

.hover-shot:hover .hover-shot__overlay,
.hover-shot:focus-within .hover-shot__overlay {
    opacity: 1;
}

.hover-shot:hover .hover-shot__caption,
.hover-shot:focus-within .hover-shot__caption {
    opacity:   1;
    transform: translateY(0);
}

/* ── TAGS ───────────────────────────────────────────────────── */
.post-tags {
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.5rem;
    margin-top: 5rem;
}

.post-tags span {
    display:       inline-block;
    padding:       0.25rem 0.75rem;
    border-radius: 9999px;
    border:        1px solid var(--line);
    font-size:     0.75rem;
    font-weight:   500;
    color:         var(--ink-muted);
}

/* ── FAQ — full-width band on canvas; items use the shared .faq-list rules from main.css ─ */
.post-faq {
    background-color: var(--canvas);
    padding-block:    5rem;
}
.post-faq h2 {
    font-family:   var(--font-serif);
    font-size:     1.75rem;
    font-weight:   600;
    color:         var(--ink);
    margin-bottom: 2rem;
}
/* Align the FAQ with the article column instead of the shared centered .faq-list */
.post-faq .faq-list {
    max-width: none;
    margin:    0;
}
@media (min-width: 1024px) {
    .post-faq .post-container {
        display:               grid;
        grid-template-columns: 3fr 1fr;
        column-gap:            3rem;
    }
    .post-faq h2,
    .post-faq .faq-list {
        grid-column: 1;
    }
}

/* ── SIDEBAR ────────────────────────────────────────────────── */
aside.post-sidebar {
    padding-left: 0;
}

@media (min-width: 1024px) {
    aside.post-sidebar {
        padding-left: 2rem;
        box-shadow:   -1px 0 0 0 var(--line);
    }

    /* Le sticky est sur le wrapper interne, pas sur l'aside (cellule grid stretchée) */
    aside.post-sidebar .sidebar-inner {
        position: sticky;
        top:      6rem;
    }
}

.sidebar-label {
    font-size:      0.6875rem;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--ink-muted);
    margin-bottom:  0.875rem;
}

.post-list {
    display:        flex;
    flex-direction: column;
}

.post-item {
    display:         flex;
    flex-direction:  column;
    gap:             2px;
    padding:         0.625rem 0;
    border-bottom:   1px solid var(--line);
    text-decoration: none;
    color:           inherit;
}

.post-item-title {
    font-size:   0.8125rem;
    font-weight: 500;
    color:       var(--ink);
    line-height: 1.45;
    transition:  color 0.12s;
    text-wrap:   pretty;
}

.post-item:hover .post-item-title,
.post-item.active .post-item-title {
    color: var(--coral);
}

.post-item-date {
    font-size: 0.6875rem;
    color:     var(--ink-muted);
}

.post-list details {
    border-top: 1px solid var(--line);
}

.post-list details:last-child {
    border-bottom: 1px solid var(--line);
}

.post-month {
    font-size:      0.75rem;
    font-weight:    600;
    color:          var(--ink-muted);
    padding-block:  0.5rem;
    cursor:         pointer;
    list-style:     none;
    user-select:    none;
}

.post-month::-webkit-details-marker { display: none; }

.post-month::after {
    content:      '›';
    float:        right;
    transition:   transform 0.15s;
    display:      inline-block;
    transform:    rotate(90deg);
}

details[open] .post-month::after {
    transform: rotate(-90deg);
}

.post-list details .post-item {
    padding-left: 0.5rem;
}

.post-list details .post-item:last-child {
    border-bottom: none;
}

.post-list details .post-item:first-of-type {
    border-top: 1px solid var(--line);
}


/* ── Blog index (generated by build-site.js) ────────────────── */
.blog-index main { padding-block: 4rem 6rem; }
.blog-index main .post-container { display: block; }

.blog-grid {
    display:               grid;
    gap:                   1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
    padding:        1.5rem;
    border:         1px solid var(--line);
    border-radius:  var(--radius-lg);
    background:     var(--paper);
    box-shadow:     var(--shadow-xs);
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    transition:     border-color 0.15s ease, box-shadow 0.15s ease;
}
.blog-card:hover {
    border-color: var(--coral);
    box-shadow:   var(--shadow-md);
}
.blog-card-meta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.5rem;
}
.blog-card-date { font-size: 0.75rem; color: var(--ink-muted); }
.blog-card-title {
    font-family: var(--font-serif);
    font-size:   1.2rem;
    font-weight: 600;
    line-height: 1.3;
    margin:      0;
    color:       var(--ink);
}
.blog-card-title a { color: inherit; text-decoration: none; transition: color 0.15s; }
.blog-card-title a:hover { color: var(--coral); }
.blog-card-excerpt {
    font-size:   0.9rem;
    color:       var(--ink-secondary);
    line-height: 1.6;
    flex:        1;
    margin:      0;
}

.blog-index-header { margin-bottom: 2rem; }
.blog-index-header h2 {
    font-size:      0.6875rem;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--ink-muted);
    margin-bottom:  0.375rem;
}
.blog-index-count { font-size: 0.875rem; color: var(--ink-muted); }
.blog-empty {
    padding:       3rem 1.5rem;
    border:        1px dashed var(--line);
    border-radius: var(--radius-lg);
    text-align:    center;
    color:         var(--ink-muted);
}