/* Le blog : des cartes paysage, une colonne de lecture, et rien d'autre.
   Les couleurs viennent des variables du thème — la page suit clair et
   sombre sans règle dédiée. */

.blog-index {
    padding-bottom: 3.5rem;
}

.blog-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 1.75rem;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.blog-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5b5c3b;
    background: color-mix(in srgb, #5b5c3b 8%, var(--surface));
    border: 1px solid color-mix(in srgb, #5b5c3b 28%, var(--border));
}

.blog-tab:hover {
    color: var(--text);
    background: color-mix(in srgb, #5b5c3b 14%, var(--surface));
}

.blog-tab.is-active {
    color: #fff;
    background: #5b5c3b;
    border-color: #5b5c3b;
}

.blog-tab-count {
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    opacity: 0.72;
}

.blog-tab.is-active .blog-tab-count {
    opacity: 0.85;
}

[data-theme='dark'] .blog-tab {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

[data-theme='dark'] .blog-tab.is-active {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.blog-card {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.blog-card-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.blog-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-hover);
}

/* Le ratio est tenu par la boîte, pas par le fichier : une image un peu hors
   format ne déforme pas la grille. */
.blog-card-media {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--bg);
    overflow: hidden;
}

.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.blog-card:hover .blog-card-media img {
    transform: scale(1.04);
}

.blog-card-media-empty {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--bg), var(--surface));
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    padding: 1.1rem 1.15rem 1.2rem;
}

.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.blog-card-category {
    color: #5b5c3b;
}

.blog-card-title {
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.blog-card-excerpt {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-more {
    margin-top: auto;
    padding-top: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-hover);
}

[data-theme='dark'] .blog-card-category {
    color: var(--accent);
}

@media (min-width: 900px) {
    .blog-grid--index {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .blog-grid--index > .blog-card:first-child {
        grid-column: 1 / -1;
    }

    .blog-grid--index > .blog-card:first-child .blog-card-link {
        display: grid;
        grid-template-columns: 1.2fr minmax(16rem, 1fr);
        min-height: 18.5rem;
    }

    .blog-grid--index > .blog-card:first-child .blog-card-media {
        aspect-ratio: auto;
        min-height: 18.5rem;
        height: 100%;
    }

    .blog-grid--index > .blog-card:first-child .blog-card-body {
        justify-content: center;
        padding: 1.75rem 1.9rem 1.85rem;
        gap: 0.65rem;
    }

    .blog-grid--index > .blog-card:first-child .blog-card-title {
        font-size: 1.65rem;
        line-height: 1.2;
        letter-spacing: -0.03em;
    }

    .blog-grid--index > .blog-card:first-child .blog-card-excerpt {
        -webkit-line-clamp: 4;
        font-size: 0.98rem;
    }
}

/* ---------------------------------------------------------------- article */

.blog-article-page {
    padding-bottom: 3.5rem;
}

.blog-article {
    margin: 0 0 1rem;
}

/* Même idée que le hero des catégories : photo à droite, texte givré à gauche.
   Le titre d'article reste en casse phrase — ce n'est pas un nom de rayon. */
.blog-article-banner {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: 22rem;
    margin: 0 0 1.65rem;
    overflow: hidden;
    background-color: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.blog-article-banner.has-image {
    background-image: var(--blog-hero-image);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
}

.blog-article-banner-overlay {
    display: none;
}

.blog-article-banner.has-image .blog-article-banner-overlay {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            var(--surface) 0%,
            var(--surface) 24%,
            color-mix(in srgb, var(--surface) 90%, transparent) 38%,
            color-mix(in srgb, var(--surface) 42%, transparent) 56%,
            color-mix(in srgb, var(--surface) 8%, transparent) 74%,
            transparent 86%
        ),
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--surface) 18%, transparent) 0%,
            transparent 28%,
            transparent 72%,
            color-mix(in srgb, var(--surface) 22%, transparent) 100%
        );
}

.blog-article-banner-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 38rem;
    margin: 1.6rem;
    padding: 1.55rem 1.75rem 1.6rem;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(6px);
}

.blog-article-title {
    margin: 0;
    font-size: clamp(1.7rem, 3.2vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.94;
    text-transform: uppercase;
}

.blog-article-title-accent {
    position: relative;
    display: inline-block;
    max-width: 100%;
    color: #5b5c3b;
}

.blog-article-title-accent::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.06em;
    height: 0.18em;
    background: color-mix(in srgb, #5b5c3b 22%, transparent);
    z-index: -1;
}

[data-theme='dark'] .blog-article-title-accent {
    color: var(--accent);
}

[data-theme='dark'] .blog-article-title-accent::after {
    background: color-mix(in srgb, var(--accent) 24%, transparent);
}

.blog-article-lede {
    margin: 0.9rem 0 0;
    max-width: 34rem;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--text-muted);
}

[data-theme='dark'] .blog-article-banner-copy {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.blog-article-byline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.75rem 1.25rem;
    margin: 0 0 1rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent));
}

.blog-article-byline-cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.blog-article-byline-cell + .blog-article-byline-cell {
    padding-left: 1.25rem;
    border-left: 1px solid color-mix(in srgb, var(--border) 80%, var(--accent));
}

.blog-article-byline dt {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.blog-article-byline dd {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}

.blog-article-byline a {
    color: inherit;
}

.blog-article-byline a:hover {
    color: var(--accent-hover);
}

.blog-article-byline time {
    font-variant-numeric: tabular-nums;
}

/* Même largeur que le hero, sur le fond blanc de la boutique. */
.blog-article-main {
    max-width: none;
    margin: 0 0 1.65rem;
    padding: 2.35rem 2.6rem 2.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.blog-article-body {
    font-size: 1.025rem;
    line-height: 1.75;
}

.blog-article-body > * + * {
    margin-top: 1.15rem;
}

.blog-article-body p:empty {
    display: none;
}

.blog-article-body > p:first-child {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text);
}

.blog-article-body h2,
.blog-article-body h3,
.blog-article-body h4 {
    line-height: 1.25;
}

.blog-article-body h2 {
    margin-top: 2.6rem;
    padding-top: 1.45rem;
    font-size: 1.28rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    color: #5b5c3b;
    border-top: 1px solid color-mix(in srgb, #5b5c3b 22%, var(--border));
}

.blog-article-body h2::after {
    content: '';
    display: block;
    width: 2.35rem;
    height: 0.16em;
    margin-top: 0.55rem;
    background: color-mix(in srgb, #5b5c3b 42%, transparent);
}

.blog-article-body h3 {
    margin-top: 1.7rem;
    padding-left: 0.8rem;
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: #5b5c3b;
    border-left: 2px solid color-mix(in srgb, #5b5c3b 55%, var(--border));
}

.blog-article-body h3 + figure,
.blog-article-body h3 + img {
    margin-top: 1.75rem;
}

.blog-article-body h4 {
    margin-top: 1.45rem;
    font-size: 1.025rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

[data-theme='dark'] .blog-article-body h2,
[data-theme='dark'] .blog-article-body h3 {
    color: var(--accent);
}

[data-theme='dark'] .blog-article-body h2 {
    border-top-color: color-mix(in srgb, var(--accent) 28%, var(--border));
}

[data-theme='dark'] .blog-article-body h2::after {
    background: color-mix(in srgb, var(--accent) 42%, transparent);
}

[data-theme='dark'] .blog-article-body h3 {
    border-left-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.blog-article-body a {
    color: var(--accent-hover);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.blog-article-body a:hover {
    color: var(--text);
}

.blog-article-body ul,
.blog-article-body ol {
    padding-left: 1.2rem;
}

.blog-article-body li + li {
    margin-top: 0.55rem;
}

.blog-article-body li strong {
    font-weight: 600;
}

.blog-article-body blockquote {
    margin-left: 0;
    padding: 0.35rem 0 0.35rem 1.05rem;
    border-left: 3px solid var(--accent);
    color: var(--text-muted);
}

.blog-article-body img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--border);
}

.blog-article-body figure {
    margin: 1.85rem 0;
}

.blog-article-body figcaption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Photo d'un côté, texte de l'autre.
   La mise en page se décide ici et pas dans le contenu : le nettoyeur HTML
   retire toute classe qui ne vient pas de l'éditeur, donc un article ne peut
   pas porter ses propres classes de gabarit. Une figure suffit, le CSS fait
   le reste, et n'importe quelle image insérée plus tard en profitera sans que
   le rédacteur ait à y penser. */
@media (min-width: 901px) {
    .blog-article-body figure {
        float: right;
        /* Réglée pour que la photo fasse à peu près la hauteur du texte de sa
           section : trop large, elle dépasse et laisse une bande blanche sous
           les paragraphes, puisque le titre suivant repart d'une ligne nette. */
        width: min(32%, 15.5rem);
        margin: 0.4rem 0 1.35rem 2rem;
    }

    /* Une figure sur deux passe à gauche : trois photos alignées du même côté
       donneraient une colonne d'images plutôt qu'une mise en page. */
    .blog-article-body figure:nth-of-type(even) {
        float: left;
        margin: 0.4rem 2rem 1.35rem 0;
    }

    .blog-article-body h3 + figure,
    .blog-article-body h3 + figure:nth-of-type(even) {
        margin-top: 1.75rem;
    }

    .blog-article-body figure img {
        width: 100%;
        height: auto;
    }

    /* Un titre repart toujours d'une ligne propre, sinon il se glisse à côté
       de l'image de la section précédente. */
    .blog-article-body h2,
    .blog-article-body h3 {
        clear: both;
    }
}

/* Une figure flottante ne compte pas dans la hauteur de son parent : sans
   cela, une photo plus haute que son texte déborderait de la carte. */
.blog-article-body::after {
    content: '';
    display: block;
    clear: both;
}

.blog-article-body pre {
    padding: 0.9rem 1rem;
    overflow-x: auto;
    background: var(--bg);
    border: 1px solid var(--border);
}

.blog-article-ask {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin: 0 0 1.65rem;
    padding: 1.4rem 1.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.blog-article-ask-kicker {
    margin: 0 0 0.3rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.blog-article-ask-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}

.blog-article-ask .btn {
    flex-shrink: 0;
}

.blog-article-section-head {
    margin: 0 0 1.15rem;
}

.blog-section-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.blog-article-products,
.blog-article-related {
    margin-top: 2.75rem;
}

.blog-article-back {
    margin-top: 2.5rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--border);
    font-size: 0.9375rem;
}

.blog-article-back a {
    color: var(--text-muted);
}

.blog-article-back a:hover {
    color: var(--text);
}

/* Le renvoi depuis une fiche produit. */
.product-blog-posts {
    margin-top: 2.5rem;
}

@media (max-width: 900px) {
    .blog-article-banner {
        min-height: 0;
        align-items: flex-end;
    }

    .blog-article-banner.has-image {
        min-height: 22rem;
        background-position: center top;
    }

    .blog-article-banner.has-image .blog-article-banner-overlay {
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--surface) 8%, transparent) 0%,
            color-mix(in srgb, var(--surface) 55%, transparent) 42%,
            var(--surface) 78%
        );
    }

    .blog-article-banner-copy {
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 1.35rem 1.2rem 1.4rem;
    }

    .blog-article-title {
        font-size: 1.7rem;
    }

    .blog-article-main {
        padding: 1.6rem 1.25rem 1.75rem;
    }
}

@media (min-width: 960px) {
    .blog-article-main {
        padding: 2.6rem 3rem 2.85rem;
    }
}

@media (max-width: 640px) {
    .blog-article-title {
        font-size: 1.7rem;
    }

    .blog-article-byline-cell + .blog-article-byline-cell {
        padding-left: 0.9rem;
    }

    .blog-article-banner.has-image {
        min-height: 18rem;
    }

    .blog-article-ask {
        align-items: stretch;
    }

    .blog-article-ask .btn {
        width: 100%;
    }

    .blog-grid {
        gap: 1.1rem;
    }
}

/* Le crédit du visuel de bandeau.
   Posé dans le coin bas droit, au-dessus de la surimpression mais derrière
   le texte : il doit se lire sans jamais disputer la place au titre. */
.blog-article-credit {
    position: absolute;
    right: 1rem;
    bottom: 0.75rem;
    z-index: 2;
    max-width: 60%;
    margin: 0;
    padding: 0.28rem 0.6rem;
    font-size: 0.6875rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-align: right;
    /* Un blanc adouci plutôt que pur : une mention n'est pas une information
       de premier plan, et le contraste reste largement suffisant. */
    color: rgb(255 255 255 / 82%);
    background: rgb(0 0 0 / 32%);
    border-radius: 0.2rem;
    backdrop-filter: blur(2px);
}

/* Sans image, le bandeau retombe sur la surface du thème et le blanc
   deviendrait illisible. */
.blog-article-banner:not(.has-image) .blog-article-credit {
    color: var(--text-muted);
    background: none;
    backdrop-filter: none;
}

@media (max-width: 640px) {
    .blog-article-credit {
        position: static;
        max-width: none;
        margin-top: 0.75rem;
        padding: 0;
        text-align: left;
        color: var(--text-muted);
        background: none;
        backdrop-filter: none;
    }
}

/* Formulaire : le crédit suit la zone de dépôt de l'image. */
.blog-cover-credit {
    margin-top: 0.9rem;
}

.form-optional {
    margin-left: 0.35rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}