/* =============================================================
   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:          0  0%   8%;
        --foreground:          0  0%  98%;
        --primary:           353 88%  50%;
        --primary-foreground:  0  0% 100%;
        --secondary:         221 83%  60%;
        --muted:               0  0%  15%;
        --muted-foreground:    0  0%  65%;
        --border:              0  0%  20%;
    }
}

/* ── 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:      5rem; /* offset for fixed header */
}

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:          50;
    border-bottom:    1px solid hsl(var(--border));
    background-color: hsl(var(--background));
}

body > header .post-container {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-block:   1rem;
}

body > header .blog-title {
    font-size:   1.875rem;
    font-weight: 700;
    line-height: 1;
}

body > header nav {
    display:     flex;
    align-items: center;
    gap:         1.5rem;
    font-size:   0.875rem;
}

body > header nav a {
    color:      hsl(var(--muted-foreground));
    transition: color 0.15s ease;
}

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

body > header nav .btn-cta {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    padding:          0.75rem 1rem;
    border-radius:    0.75rem;
    background-color: hsl(var(--primary));
    color:            hsl(var(--primary-foreground));
    font-size:        1rem;
    font-weight:      600;
    text-decoration:  none;
    transition:       background-color 0.3s ease, transform 0.3s ease;
}

body > header nav .btn-cta:hover {
    background-color: hsl(var(--primary) / 0.8);
    transform:        scale(0.95);
}

/* ── 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-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: none;
}

/* 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);
    transform:        scale(0.95);
}

/* ── 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;
}

.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:first-child {
    border-top: 1px solid hsl(var(--border));
}

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

/* ── 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 (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;
}

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

.footer-legal {
    margin-top:  2rem;
    padding-top: 2rem;
    border-top:  1px solid hsl(var(--border));
    text-align:  center;
    font-size:   0.875rem;
    color:       hsl(var(--muted-foreground));
}

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