/************************************************************
	P|C&I — MARKET NEWS (listing, catégories, article)
	Chargé uniquement sur ces pages, après pci.css dont il reprend
	les variables et composants (.news-card, .search-card…).
************************************************************/

/************************************************************
	LISTING · HERO
************************************************************/
.blog-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: calc(var(--header-h) + clamp(32px, 5vw, 80px)) 0 0;
}
.blog-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.blog-hero__media img {
    position: absolute;
    left: 0;
    top: -10%;
    width: 100%;
    height: 120%;
    object-fit: cover;
}
.blog-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 22, 34, 0.68) 0%, rgba(13, 22, 34, 0.5) 50%, rgba(13, 22, 34, 0.82) 100%);
}
.blog-hero__content {
    row-gap: 1.6rem;
    padding-bottom: clamp(2.5rem, 5vw, 5rem);
}
.blog-hero__titre .eyebrow {
    margin-bottom: 1.4rem;
    color: rgba(241, 242, 248, 0.85);
}
.blog-hero__intro {
    align-self: end;
    color: rgba(241, 242, 248, 0.82);
}
.blog-filtres ul {
    display: flex;
    gap: clamp(1.2rem, 2.4vw, 2.6rem);
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--line-dark);
}
.blog-filtres ul::-webkit-scrollbar {
    display: none;
}
.blog-filtres li {
    flex: none;
}
.blog-filtres a {
    position: relative;
    display: block;
    padding: 1.1rem 0;
    font-size: .95rem;
    font-weight: 500;
    color: rgba(241, 242, 248, 0.72);
    transition: color .4s;
}
.blog-filtres a:hover,
.blog-filtres a.is-active {
    color: var(--paper);
}
.blog-filtres a.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: var(--paper);
}
.blog-filtres sup {
    font-size: .68em;
    opacity: .7;
}
@media (min-width: 992px) {
    .blog-hero__titre {
        grid-column: 1 / span 8;
    }
    .blog-hero__intro {
        grid-column: 9 / -1;
    }
}

/************************************************************
	LISTING · ARTICLE À LA UNE ET GRILLE
************************************************************/
.blog-liste {
    padding-block: clamp(3rem, 6vw, 6rem) var(--section);
}
.blog-une {
    row-gap: 1.8rem;
    align-items: center;
    margin-bottom: clamp(3.5rem, 7vw, 7rem);
}
.blog-une__media {
    display: block;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: var(--mist);
}
.blog-une__media img {
    width: 100%;
    height: 100%;
    /* couvertures de formats variés : affichées entières sur fond gris */
    object-fit: contain;
    padding: 6%;
    mix-blend-mode: multiply;
    transition: transform 1.4s var(--ease-out);
}
.blog-une:hover .blog-une__media img {
    transform: scale(1.03);
}
.blog-une__texte {
    display: grid;
    gap: 1.2rem;
    justify-items: start;
}
.blog-une__titre {
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(2rem, 1.2rem + 2.4vw, 4rem);
    line-height: 1;
    letter-spacing: -0.04em;
}
.blog-une__extrait {
    color: var(--muted);
}
.blog-grille {
    row-gap: clamp(2.5rem, 4vw, 4rem);
}
.blog-grille .search-card {
    grid-column: 1 / -1;
}
@media (min-width: 768px) {
    .blog-grille .news-card,
    .blog-grille .search-card {
        grid-column: span 6;
    }
}
@media (min-width: 992px) {
    .blog-une__media {
        grid-column: 1 / span 6;
    }
    .blog-une__texte {
        grid-column: 8 / -1;
    }
    .blog-grille .news-card,
    .blog-grille .search-card {
        grid-column: span 4;
    }
}
/* Carte sur fond clair : même traitement que sur /biens/ */
.section--light .search-card {
    border-color: transparent;
    background: var(--ink);
    color: var(--paper);
}
.section--light .search-card .eyebrow {
    color: var(--muted-dark);
}
.section--light .search-card:hover {
    background: var(--steel);
}

/************************************************************
	ARTICLE · EN-TÊTE
	La couverture déborde sur la section claire suivante.
************************************************************/
.article-hero {
    --debord: clamp(48px, 7vw, 120px);
    padding: calc(var(--header-h) + 1.4rem) 0 clamp(2.5rem, 5vw, 5rem);
}
.article-hero .pci-grid {
    row-gap: 2rem;
}
.article-hero__retour {
    justify-self: start;
    font-size: .9rem;
    font-weight: 500;
}
.article-hero__titre {
    display: grid;
    gap: 1.6rem;
    justify-items: start;
    align-content: end;
}
.article-hero__h1 {
    margin: 0;
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(2.2rem, 1.3rem + 3vw, 4.8rem);
    line-height: 1;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
}
.article-hero__couverture {
    position: relative;
    z-index: 2;
    max-width: 22rem;
    background: var(--paper);
    box-shadow: 0 32px 56px -32px rgba(13, 22, 34, 0.6);
}
.article-hero__couverture img {
    width: 100%;
    height: auto;
}
@media (min-width: 992px) {
    .article-hero__retour {
        grid-column: 1 / span 7;
        grid-row: 1;
    }
    .article-hero__titre {
        grid-column: 1 / span 7;
        grid-row: 2;
    }
    .article-hero__couverture {
        grid-column: 9 / -1;
        grid-row: 1 / span 2;
        align-self: end;
        justify-self: end;
        max-width: none;
        width: 100%;
        margin-bottom: calc(-1 * var(--debord) - clamp(2.5rem, 5vw, 5rem));
    }
    .article-hero--sans-image .article-hero__titre {
        grid-column: 1 / span 10;
    }
}

/************************************************************
	ARTICLE · CONTENU (éditeur WordPress)
************************************************************/
.article-corps {
    padding-block: clamp(3rem, 6vw, 6rem) clamp(4rem, 7vw, 7rem);
}
.article-contenu {
    min-width: 0;
    font-size: 1.05em;
    line-height: 1.65;
}
.article-contenu > * + * {
    margin-top: 1.1em;
}
/* Couleurs posées dans l'ancien éditeur : le site garde sa palette */
.article-contenu [style*="color"] {
    color: inherit !important;
}
.article-contenu h2,
.article-contenu h3,
.article-contenu h4 {
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
}
.article-contenu h2 {
    margin-top: 2em;
    margin-bottom: 0;
    font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
}
.article-contenu h3 {
    margin-top: 1.8em;
    margin-bottom: 0;
    font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem);
}
.article-contenu h4 {
    margin-top: 1.5em;
    margin-bottom: 0;
    font-size: 1.1rem;
}
.article-contenu > :first-child {
    margin-top: 0;
}
.article-contenu strong {
    font-weight: 500;
}
.article-contenu a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .3s;
}
.article-contenu a:hover {
    color: var(--accent);
}
.article-contenu ul,
.article-contenu ol {
    padding-left: 1.2em;
}
.article-contenu ul {
    list-style: disc;
}
.article-contenu li + li {
    margin-top: .35em;
}
.article-contenu hr {
    margin-block: 2.4em;
    border: 0;
    border-top: 1px solid var(--line);
    color: var(--line);
    opacity: 1;
}
.article-contenu blockquote {
    margin-inline: 0;
    padding-left: 1.4rem;
    border-left: 1px solid var(--ink);
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(1.3rem, 1.1rem + .7vw, 1.9rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.article-contenu img {
    height: auto;
}
.article-contenu .alignleft,
.article-contenu .alignright {
    max-width: 50%;
    margin-bottom: 1em;
}
.article-contenu .alignleft {
    float: left;
    margin-right: 1.6em;
}
.article-contenu .alignright {
    float: right;
    margin-left: 1.6em;
}
.article-contenu .aligncenter {
    margin-inline: auto;
}
.article-contenu::after {
    content: '';
    display: block;
    clear: both;
}
.article-contenu figure {
    max-width: 100%;
}
.article-contenu figcaption,
.article-contenu .wp-caption-text {
    margin-top: .6em;
    color: var(--muted);
    font-size: .85rem;
}
.article-contenu table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}
.article-contenu th,
.article-contenu td {
    padding: .6em .4em;
    border-bottom: 1px solid var(--line);
    text-align: left;
}
.article-contenu iframe {
    max-width: 100%;
}
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 2.4rem;
    font-size: .85rem;
}
.article-tags a {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 .8rem;
    border: 1px solid var(--line);
    font-weight: 500;
}
@media (min-width: 992px) {
    .article-contenu,
    .article-tags {
        grid-column: 1 / span 7;
    }
    .article-hero--sans-image + .article-corps .article-contenu,
    .article-hero--sans-image + .article-corps .article-tags {
        grid-column: 1 / span 8;
    }
}

/************************************************************
	ARTICLE · VOISINS ET SUGGESTIONS
************************************************************/
.article-nav .pci-grid {
    row-gap: 1px;
}
.article-nav__lien {
    display: grid;
    gap: .7rem;
    padding-block: clamp(2rem, 3.5vw, 3.5rem);
}
.article-nav__titre {
    font-weight: 500;
    font-size: clamp(1.2rem, 1rem + .8vw, 1.8rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
    transition: transform .8s var(--ease-out);
}
.article-nav__lien--avant:hover .article-nav__titre {
    transform: translateX(-.6rem);
}
.article-nav__lien--apres:hover .article-nav__titre {
    transform: translateX(.6rem);
}
.article-similaires {
    padding-block: var(--section);
}
.article-similaires__head {
    row-gap: 2rem;
    margin-bottom: clamp(3rem, 5vw, 5rem);
}
@media (min-width: 768px) {
    .article-nav__lien {
        grid-column: span 6;
    }
    .article-nav__lien--apres {
        grid-column: 7 / -1;
        text-align: right;
        justify-items: end;
    }
}
@media (min-width: 992px) {
    .article-similaires__head .h-display {
        grid-column: 1 / span 8;
    }
    .article-similaires__head .link-arrow {
        grid-column: 9 / -1;
        justify-self: end;
        align-self: end;
    }
}