/* =============================================================
   Self-hosted Poppins (latin + latin-ext, weights 400/500/600/700/800)
   ============================================================= */

/* 400 */
@font-face {
    font-family: 'Poppins';
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/poppins/poppins-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/poppins/poppins-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 500 */
@font-face {
    font-family: 'Poppins';
    font-style:  normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/poppins/poppins-500-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style:  normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/poppins/poppins-500-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 600 */
@font-face {
    font-family: 'Poppins';
    font-style:  normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/poppins/poppins-600-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style:  normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/poppins/poppins-600-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 700 */
@font-face {
    font-family: 'Poppins';
    font-style:  normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/poppins/poppins-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style:  normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/poppins/poppins-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 800 */
@font-face {
    font-family: 'Poppins';
    font-style:  normal;
    font-weight: 800;
    font-display: swap;
    src: url(../fonts/poppins/poppins-800-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Poppins';
    font-style:  normal;
    font-weight: 800;
    font-display: swap;
    src: url(../fonts/poppins/poppins-800-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =============================================================
   posts.css — Blog post layout
   Fully self-contained, no external CSS dependencies.
   HTML structure expected:
     body > header + section.hero + main + footer
   ============================================================= */

   
/* ── Design tokens ──────────────────────────────────────────── */
:root {
    --background:          0   0% 100%;
    --foreground:          0   0%  10%;
    --primary:           340 100%  53%;
    --primary-foreground:  0   0% 100%;
    --secondary:         243 100%  78%;
    --muted:             210  40%  96%;
    --muted-foreground:    0   0%  45%;
    --border:            214  32%  91%;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background:        256  24%   9%;
        --foreground:        260  26%  93%;
        --primary:           340 100%  53%;
        --primary-foreground:  0   0% 100%;
        --secondary:         243 100%  78%;
        --muted:             259  26%  16%;
        --muted-foreground:  251  12%  66%;
        --border:            260  20%  24%;
    }

    .footer-brand img.brand-logo {
        filter: invert(1) brightness(1.6);
    }
}

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

/* ── Base ───────────────────────────────────────────────────── */
body {
    font-family:      Poppins, system-ui, sans-serif;
    background-color: hsl(var(--background));
    color:            hsl(var(--foreground));
    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:      1400px;
    margin-inline:  auto;
    padding-inline: 1.5rem;
}

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

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:          hsl(var(--foreground));
    letter-spacing: 0;
}

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

body > header nav a {
    color:           hsl(var(--muted-foreground));
    font-weight:     400;
    text-decoration: none;
    transition:      color 0.15s ease;
}

body > header nav a:hover {
    color: hsl(var(--primary));
}

body > header nav .btn-cta {
    display:          inline-block;
    padding:          0.4rem 1rem;
    border-radius:    0.5rem;
    background-color: hsl(var(--primary));
    color:            hsl(var(--primary-foreground));
    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:     hsl(var(--primary-foreground));
    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:    hsl(var(--foreground));
        border-radius: 999px;
        display:       block;
        height:        2px;
        width:         20px;
    }

    body > header .mobile-menu-panel {
        background:     hsl(var(--background));
        border:         1px solid hsl(var(--border));
        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:           hsl(var(--foreground));
        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: hsl(var(--muted) / 0.65);
    }

    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;
    }
}

/* ── LANG SWITCHER ──────────────────────────────────────────── */
.lang-switcher {
    position: relative;
}

.lang-switcher-btn {
    display:    flex;
    align-items: center;
    padding:    0;
    border:     none;
    background: transparent;
    cursor:     pointer;
}

.lang-switcher-btn img {
    width:          20px;
    height:         20px;
    object-fit:    cover;
    border-radius: 50%;
    border:        1px solid transparent;
    transition:    border-color 0.15s ease;
}

.lang-switcher-btn:hover img {
    border-color: rgba(255, 255, 255, 0.5);
}

.lang-switcher-dropdown {
    position:         absolute;
    top:              calc(100% + 0.375rem);
    right:            0;
    z-index:          200;
    min-width:        7rem;
    padding:          0.25rem;
    border:           1px solid rgba(255, 255, 255, 0.12);
    border-radius:    0.5rem;
    background-color: rgb(20, 20, 20);
    box-shadow:       0 4px 12px rgba(0, 0, 0, 0.5);
    display:          none;
    flex-direction:   column;
    gap:              0.125rem;
}

.lang-switcher.is-open .lang-switcher-dropdown {
    display: flex;
}

.lang-switcher-dropdown a {
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    padding:       0.375rem 0.5rem;
    border-radius: 0.375rem;
    color:         rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size:     0.8rem;
    transition:    background-color 0.1s ease, color 0.1s ease;
}

.lang-switcher-dropdown a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color:            white;
}

.lang-switcher-dropdown a.is-current {
    color:       white;
    font-weight: 600;
}

.lang-switcher-dropdown a img {
    width:         20px;
    height:        20px;
    object-fit:    cover;
    border-radius: 50%;
    flex-shrink:   0;
}

/* ── 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,
        hsl(var(--primary)),
        hsl(var(--primary)),
        hsl(var(--secondary))
    );
    opacity: 0.95;
}

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-size:       clamp(2rem, 5vw, 3.75rem);
    font-weight:     800;
    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) ───────────────────────── */
body > main {
    padding-block: 6rem 6rem;
}

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-size:   1.5rem;
    font-weight: 700;
    margin-top:  2.5rem;
    color:       hsl(var(--foreground));
    line-height: 1.3;
}

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

article h3 {
    font-size:   1.17rem;
    font-weight: 700;
    margin-top:  1.2rem;
    color:       hsl(var(--foreground));
}

article p,
article ul,
article ol {
    margin-top:  1.25rem;
    line-height: 1.75;
    color:       hsl(var(--foreground));
}

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 hsl(var(--border));
    border-radius:   0.75rem;
    overflow:        hidden;
}

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

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

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

article tbody tr:nth-child(even) td {
    background: hsl(var(--muted) / 0.5);
}

/* 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:            hsl(var(--primary));
    text-decoration:  none;
    transition:       color 0.2s ease;
}

.post-main-col > section .link-list a:hover {
    color: hsl(var(--primary) / 0.75);
}

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

article a:hover {
    color: hsl(var(--primary) / 0.75);
}

/* Plain link — neutral color, underlined, stays black on hover */
article a.link-plain,
article a.link-plain:hover {
    color:                 hsl(var(--foreground));
    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: hsl(var(--primary));
    color:            hsl(var(--primary-foreground));
    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: hsl(var(--primary) / 0.8);
    color:            hsl(var(--primary-foreground));
    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 hsl(var(--border));
    border-radius: 1rem;
    background:    hsl(var(--muted) / 0.55);
}

.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:       hsl(var(--muted-foreground));
}

.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 hsl(var(--border));
    border-left:      4px solid hsl(var(--primary));
    border-radius:    1rem;
    background:       hsl(var(--muted) / 0.55);
}

.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 hsl(45 70% 80%);
    border-left:   4px solid hsl(43 90% 52%);
    border-radius: 0.75rem;
    background:    hsl(48 100% 96%);
}

.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;
}

@media (prefers-color-scheme: dark) {
    .method-box {
        border:      1px solid hsl(45 40% 30%);
        border-left: 4px solid hsl(45 80% 55%);
        background:  hsl(45 60% 50% / 0.1);
    }

    .method-box h3 { color: hsl(45 75% 72%); }
    .method-box p  { color: hsl(45 20% 80%); }
    .method-box ul { color: hsl(45 20% 80%); }
    .method-box a  { color: hsl(45 75% 72%); }
}

.author-box {
    margin-top:    4rem;
    padding:       1.5rem;
    border:        1px solid hsl(var(--border));
    border-radius: 1rem;
    background:    hsl(var(--muted) / 0.55);
}

.author-box__label {
    margin-top:     0;
    color:          hsl(var(--muted-foreground));
    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: hsl(var(--muted-foreground));
}

/* ── 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 hsl(var(--border));
    font-size:     0.75rem;
    font-weight:   500;
    color:         hsl(var(--muted-foreground));
}

/* ── FAQ ────────────────────────────────────────────────────── */
#faq {
    margin-top:    4rem;
    margin-bottom: 0rem;
    max-width:     820px;
}

#faq h2 {
    font-size:   1.875rem;
    font-weight: 700;
    line-height: 1.3;
    color:       hsl(var(--foreground));
}

.faq-accordion {
    display:    grid;
    gap:        14px;
    margin-top: 2.5rem;
}

.faq-item {
    background:    hsl(var(--muted));
    border:        1px solid hsl(var(--border));
    border-radius: 1rem;
    overflow:      hidden;
}

.faq-trigger {
    width:           100%;
    background:      transparent;
    border:          0;
    padding:         1.125rem 1.25rem;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    cursor:          pointer;
    text-align:      left;
}

.faq-question {
    flex:        1 1 0;
    font-size:   1rem;
    font-weight: 700;
    color:       hsl(var(--foreground));
    transition:  color 180ms ease;
}

.faq-icon {
    flex:       0 0 18px;
    color:      hsl(var(--foreground));
    transition: transform 220ms ease, color 180ms ease;
}

.faq-panel {
    max-height: 0;
    overflow:   hidden;
    opacity:    0;
    transition: max-height 400ms ease, opacity 250ms ease;
}

.faq-answer {
    padding:     0.5rem 1.25rem 1.25rem;
    color:       hsl(var(--muted-foreground));
    line-height: 1.75;
}

.faq-item.is-open .faq-question  { color:     hsl(var(--primary)); }
.faq-item.is-open .faq-panel     { max-height: 800px; opacity: 1; }
.faq-item.is-open .faq-icon      { color:     hsl(var(--primary)); transform: rotate(90deg); }

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

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

    /* 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:          hsl(var(--muted-foreground));
    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 hsl(var(--border));
    text-decoration: none;
    color:           inherit;
}

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

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

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

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

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

.post-month {
    font-size:      0.75rem;
    font-weight:    600;
    color:          hsl(var(--muted-foreground));
    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 hsl(var(--border) / 0.5);
}

/* ── FOOTER ─────────────────────────────────────────────────── */
body > footer {
    border-top:       1px solid hsl(var(--border));
    padding-block:    3rem;
    background-color: hsl(var(--muted) / 0.7);
}

body > footer .post-container {
    display:        flex;
    flex-direction: column;
    gap:            1.5rem;
}

@media (max-width: 767px) {
    body > footer .post-container {
        align-items: center;
    }
}

@media (min-width: 768px) {
    body > footer .post-container {
        flex-direction:  row;
        justify-content: space-between;
        align-items:     center;
    }
}

.footer-brand {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    text-decoration: none;
    color:       inherit;
}

@media (max-width: 767px) {
    .footer-brand {
        justify-content: center;
    }
}

.footer-brand img.brand-icon {
    width:  2.5rem;
    height: 2.5rem;
}

.footer-brand img.brand-logo {
    max-width: 100px;
}

.footer-links {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             1.5rem;
    font-size:       0.875rem;
}

.footer-links a {
    color:      hsl(var(--muted-foreground));
    transition: color 0.15s ease;
}

.footer-links a:hover {
    color: hsl(var(--primary));
}

@media (max-width: 767px) {
    .footer-links {
        display:               grid;
        grid-template-columns:  repeat(6, max-content);
        justify-content:        center;
        gap:                    1.5rem;
    }

    .footer-links a:nth-child(1) { grid-column: 1 / 2; }
    .footer-links a:nth-child(2) { grid-column: 2 / 4; }
    .footer-links a:nth-child(3) { grid-column: 4 / 7; }
    .footer-links a:nth-child(4) { grid-column: 2 / 4; }
    .footer-links a:nth-child(5) { grid-column: 4 / 6; }

    .footer-links a {
        justify-self: center;
    }
}

.footer-legal {
    max-width:      1400px;
    margin-inline:  auto;
    padding-inline: 1.5rem;
    margin-top:     2rem;
    padding-top:    2rem;
    border-top:     1px solid hsl(var(--border));
    text-align:     center;
    font-size:      0.875rem;
    line-height:    1.6;
    color:          hsl(var(--muted-foreground));
}

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

.footer-legal p + p {
    margin-top: 0.5rem;
    font-size:  0.75rem;
}