/* ===================== Blog — réplique de la structure du blog PERFimmo, charte Secteur Immo ===================== */

/* Pastilles de rubrique */
.cat-pill { display: inline-flex; align-items: center; gap: 0.45em; width: fit-content; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.01em; line-height: 1.3; text-decoration: none; background: var(--cat-fond); color: var(--cat-encre); }
.cat-pill::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--cat-coul); }
a.cat-pill:hover { color: var(--cat-encre); text-decoration: underline; }

/* Navigation des rubriques */
.cat-nav { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.cat-chip { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; padding: 0 1rem; border-radius: 999px; background: #fff; border: 1.5px solid var(--c-ligne); color: var(--c-encre); font-weight: 600; font-size: var(--t-small); text-decoration: none; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.cat-chip i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--cat-coul, var(--c-encre-3)); }
.cat-chip small { color: var(--c-encre-3); font-weight: 400; }
.cat-chip:hover { border-color: var(--c-encre); color: var(--c-encre); }
.cat-chip[aria-current="page"] { background: var(--c-encre); border-color: var(--c-encre); color: #fff; }
.cat-chip[aria-current="page"] small { color: #c9ccd8; }
.cat-chip:focus-visible, .bcard:focus-visible, .sec-more:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }

/* Visuel du haut (accueil du blog, rubrique, article) */
.blog-visuel { position: relative; margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px -28px rgba(21, 25, 50, 0.45); aspect-ratio: 3 / 2; background: var(--c-fond-3); }
.blog-visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-visuel .legende { margin: 0;  position: absolute; left: var(--e-4); bottom: var(--e-4); padding: 0.6rem 0.85rem; border-radius: 12px; background: rgba(255, 255, 255, 0.95); font-size: var(--t-small); color: var(--c-encre-2); box-shadow: 0 8px 24px -12px rgba(21, 25, 50, 0.4); }
.blog-visuel .legende b { color: var(--c-encre); }

/* Bandeau sous la scène : rubriques */
.blog-barre { padding-block: var(--e-5) 0; }

/* Lien « Voir la rubrique » */
.sec-more { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; font-weight: 700; color: var(--c-bleu-encre); text-decoration: none; white-space: nowrap; }
.sec-more::after { content: "→"; transition: transform var(--dur-base) var(--ease-out); }
.sec-more:hover { color: var(--c-encre); }
.sec-more:hover::after { transform: translateX(3px); }

/* Sections par rubrique (comme PERFimmo) : en-tête collant à gauche, cartes à droite */
.bcat { padding-top: var(--e-7); }
.bcat-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
.bcat-head { display: flex; flex-direction: column; gap: var(--e-2); }
.bcat-head h2 { margin: 0; font-family: var(--f-titre); font-size: clamp(2rem, 1.5rem + 1.4vw, 2.7rem); line-height: 1.02; letter-spacing: -0.01em; color: var(--c-encre); }
.sec-sub { margin: 0; color: var(--c-encre-2); line-height: 1.5; }
@media (min-width: 1000px) {
  .bcat-in { grid-template-columns: 18.75rem minmax(0, 1fr); gap: var(--e-7); align-items: start; }
  .bcat-head { position: sticky; top: 6rem; padding-top: var(--e-2); }
  .bgrid.bgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bgrid.bgrid--seul { grid-template-columns: minmax(0, 1fr); }
}
/* Carte horizontale quand la rubrique n'a qu'un guide : elle occupe toute la largeur à droite */
@media (min-width: 700px) {
  .bcard.bcard--h { display: grid; grid-template-columns: 1.1fr 1fr; }
  .bcard--h .bcard-img { aspect-ratio: auto; min-height: 17rem; height: 100%; }
  .bcard--h .bcard-body { padding: var(--e-6) var(--e-5) var(--e-5); justify-content: center; gap: var(--e-3); }
  .bcard--h .bcard-t { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.9rem); }
}
.bcat-k { display: inline-flex; align-items: center; gap: 0.5em; margin: 0; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-encre-2); }
.bcat-k i { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--cat-coul); }

/* Cartes d'articles */
.bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--e-5); }
.bcard { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--c-ligne); border-top: 3px solid var(--cat-coul); color: var(--c-encre-2); box-shadow: 0 1px 2px rgba(21, 25, 50, 0.04); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.bcard-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--c-fond-3); }
.bcard-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
.bcard-body { display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-4) var(--e-5) var(--e-5); flex: 1; }
.bcard-t { margin: 0; font-family: var(--f-titre); font-weight: 700; font-size: 1.45rem; line-height: 1.15; color: var(--c-encre); }
.bcard-t a { color: inherit; text-decoration: none; }
.bcard-t a::after { content: ""; position: absolute; inset: 0; } /* toute la carte est cliquable, un seul lien */
.bcard-d { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--c-encre-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard-m { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-top: auto; padding-top: var(--e-1); font-size: var(--t-xs); color: var(--c-encre-2); }
.bcard-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.bcard .cat-pill { position: relative; z-index: 1; }
.etiquette-brouillon { display: inline-flex; padding: 0.15rem 0.55rem; border-radius: 6px; background: #fff4d6; color: #7a4a00; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .bcard:hover { transform: translateY(-4px); border-color: var(--c-encre-3); border-top-color: var(--cat-coul); box-shadow: 0 22px 44px -26px rgba(21, 25, 50, 0.45); }
  .bcard:hover .bcard-img img { transform: scale(1.045); }
  .bcard:hover .bcard-t { color: var(--c-bleu-encre); }
}
.bcard:active { transform: scale(0.99); }
.une { display: inline-flex; width: fit-content; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--c-orange); color: var(--c-encre); font-size: var(--t-xs); font-weight: 800; letter-spacing: 0.02em; }
.bcard--big .bcard-t { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.bcard--big .bcard-d { -webkit-line-clamp: 4; font-size: var(--t-base); }
@media (min-width: 900px) {
  .bcard--big { display: grid; grid-template-columns: 1.3fr 1fr; }
  .bcard--big .bcard-img { aspect-ratio: auto; min-height: 24rem; }
  .bcard--big .bcard-body { padding: var(--e-7) var(--e-6) var(--e-6); justify-content: center; gap: var(--e-3); }
}

/* Encadré d'appel en bas de page */
.blog-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4) var(--e-6); margin-block: var(--e-8); padding: var(--e-6); border-radius: 22px; background: linear-gradient(120deg, #e3f1fd 0%, #fff0db 100%); border: 1px solid #d3e4f2; }
.blog-cta div { display: flex; flex-direction: column; gap: var(--e-1); flex: 999 1 18rem; }
.blog-cta b { font-family: var(--f-titre); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; color: var(--c-encre); }
.blog-cta span { color: var(--c-encre-2); }

/* ===================== Page article ===================== */
.apercu { background: #fff4d6; border-bottom: 1px solid #f0d58c; color: #5c3a00; font-size: var(--t-small); padding: 0.6rem 0; }
.apercu b { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; margin-right: 0.5em; }
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); }
.post-read { font-size: var(--t-small); color: var(--c-encre-2); }
.post-meta { margin: var(--e-3) 0 0; font-size: var(--t-small); color: var(--c-encre-2); }
.post-bref { margin: var(--e-6) 0 0; padding: var(--e-4) var(--e-5); border-radius: 14px; background: #fff; border: 1px solid var(--c-ligne); border-left: 4px solid var(--cat-coul); max-width: 62rem; }
.post-bref b { display: block; margin-bottom: var(--e-1); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-encre-2); }
.post-bref p { margin: 0; color: var(--c-encre); font-size: 1.08rem; line-height: 1.55; }

.post-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); padding-block: var(--e-6) var(--e-4); }
@media (min-width: 1000px) {
  .post-grid { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--e-7); }
  .post-toc { position: sticky; top: 6rem; align-self: start; }
}
.post-toc { padding: var(--e-4); border-radius: 14px; background: #fff; border: 1px solid var(--c-ligne); font-size: var(--t-small); }
.post-toc p { margin: 0; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-encre-2); }
.post-toc ol { margin: var(--e-2) 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: var(--e-2); }
.post-toc a { color: var(--c-encre-2); text-decoration: none; }
.post-toc a:hover { color: var(--c-bleu-encre); text-decoration: underline; }

.post-body { max-width: 72ch; font-size: 1.0625rem; line-height: 1.7; color: var(--c-encre); }
.post-body h2 { font-family: var(--f-titre); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.15; margin: var(--e-7) 0 var(--e-3); scroll-margin-top: 6rem; color: var(--c-encre); }
.post-body h2:first-child { margin-top: 0; }
.post-body h3 { font-size: 1.2rem; margin: var(--e-5) 0 var(--e-2); color: var(--c-encre); scroll-margin-top: 6rem; }
.post-body p { margin: 0 0 var(--e-4); }
.post-body ul, .post-body ol { margin: 0 0 var(--e-4); padding-left: 1.4rem; }
.post-body li { margin-bottom: var(--e-2); }
.post-body a { color: var(--c-bleu-encre); font-weight: 600; }
.post-body strong { color: var(--c-encre); }
.post-body table { width: 100%; border-collapse: collapse; margin: var(--e-2) 0 var(--e-5); font-size: var(--t-small); background: #fff; border-radius: 12px; overflow: hidden; display: block; overflow-x: auto; }
.post-body th, .post-body td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--c-ligne); text-align: left; vertical-align: top; }
.post-body thead th { background: var(--cat-fond); color: var(--cat-encre); }
.post-body blockquote { margin: var(--e-2) 0 var(--e-5); padding: var(--e-3) var(--e-4); border-radius: 12px; background: #fff; border-left: 4px solid var(--cat-coul); color: var(--c-encre-2); }
.post-body blockquote p:last-child { margin: 0; }

.post-note { margin: var(--e-6) 0; padding: var(--e-4) var(--e-5); border-radius: 12px; background: #fff8f0; border: 1px solid #f6d3a6; color: #5a3405; font-size: var(--t-small); line-height: 1.6; max-width: 72ch; }
.post-note b { display: block; margin-bottom: var(--e-1); color: #5a3405; }
.post-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3) var(--e-5); margin: var(--e-6) 0; padding: var(--e-5); border-radius: 18px; background: var(--cat-fond); max-width: 72ch; }
.post-cta div { display: flex; flex-direction: column; gap: var(--e-1); flex: 999 1 16rem; }
.post-cta b { font-family: var(--f-titre); font-size: 1.5rem; line-height: 1.15; color: var(--c-encre); }
.post-cta span { color: var(--c-encre-2); font-size: var(--t-small); }
.post-pros { margin-top: var(--e-7); }
.post-pros h2 { font-family: var(--f-titre); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin: 0 0 var(--e-2); }
.post-pros > p { margin: 0 0 var(--e-5); color: var(--c-encre-2); max-width: 64ch; }
.post-faq, .post-src { margin-top: var(--e-7); max-width: 72ch; }
.post-src h2 { font-family: var(--f-titre); font-size: 1.6rem; margin: 0 0 var(--e-3); }
.post-src ul { margin: 0; padding-left: 1.2rem; font-size: var(--t-small); }
.post-src li { margin-bottom: var(--e-2); }
.post-disc { margin: var(--e-6) 0 0; font-size: var(--t-xs); color: var(--c-encre-2); max-width: 72ch; line-height: 1.6; }
.post-connexes { margin-top: var(--e-8); }

@media (max-width: 899px) {
  .blog-visuel { border-radius: 16px; }
  .blog-cta { padding: var(--e-5); }
}
@media (prefers-reduced-motion: reduce) {
  .bcard, .bcard-img img, .sec-more::after, .cat-chip { transition: none; }
  .bcard:hover, .bcard:active { transform: none; }
  .bcard:hover .bcard-img img { transform: none; }
}
@media print {
  .post-toc, .post-cta, .post-pros, .post-connexes, .cat-nav, .blog-cta, .apercu { display: none !important; }
  .post-grid { display: block; }
}
.bgrid > div { display: grid; }

/* ===================== Accueil du blog : mosaïque et tuiles de rubriques ===================== */
.titre-bloc { margin: var(--e-2) 0 var(--e-5); font-family: var(--f-titre); font-size: clamp(2rem, 1.5rem + 1.4vw, 2.7rem); line-height: 1.02; color: var(--c-encre); }
.mosaique { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
.mosaique > div { display: grid; }
.mosaique-liste { display: grid; gap: var(--e-4); align-content: start; }
.mosaique-liste > div { display: grid; }
@media (min-width: 900px) { .mosaique { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; } }
.bcard.bcard--mini { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); border-top-width: 1px; border-left: 4px solid var(--cat-coul); }
.bcard--mini .bcard-img { aspect-ratio: auto; height: 100%; min-height: 7.5rem; }
.bcard--mini .bcard-body { padding: var(--e-3) var(--e-4); gap: var(--e-1); justify-content: center; }
.bcard--mini .bcard-t { font-size: 1.2rem; }
.bcard--mini .etiquette-brouillon { display: none; }
@media (max-width: 480px) { .bcard.bcard--mini { grid-template-columns: 6.5rem minmax(0, 1fr); } }

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--e-4); }
.tuile { position: relative; display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-5); border-radius: 18px; background: var(--cat-fond); border: 1px solid color-mix(in srgb, var(--cat-coul) 30%, transparent); color: var(--c-encre); text-decoration: none; overflow: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.tuile::after { content: ""; position: absolute; right: -2.5rem; bottom: -2.5rem; width: 8rem; height: 8rem; border-radius: 50%; background: var(--cat-coul); opacity: 0.12; }
.tuile-k { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cat-encre); }
.tuile-k i { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--cat-coul); }
.tuile-t { font-family: var(--f-titre); font-weight: 700; font-size: 1.8rem; line-height: 1.05; }
.tuile-d { font-size: var(--t-small); line-height: 1.5; color: var(--c-encre-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tuile-lien { margin-top: auto; padding-top: var(--e-2); font-weight: 700; color: var(--cat-encre); }
.tuile-lien::after { content: " →"; }
@media (hover: hover) and (pointer: fine) { .tuile:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--cat-coul) 70%, transparent); color: var(--c-encre); } }
.tuile:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tuile { transition: none; } .tuile:hover { transform: none; } }