/**
 * ARTICLE (.wc-post)
 * ---------------------------------------------------------------------------
 * Registre : un article se lit, il ne se parcourt pas. D'ou une colonne de
 * texte etroite (68ch), une typographie plus grande que le reste du site, et
 * un aside sticky qui porte le partage et les renvois sans encombrer.
 *
 * Le prefixe est .wc-post : .wc-article est deja pris par les cartes de la
 * page Habiter (habiter.css).
 */

.wc-post { padding-bottom: clamp(48px, 7vw, 88px); }

/* ---------- En-tete ---------- */
.wc-post__head {
	background: var(--wc-marine);
	color: #fff;
	padding-block: clamp(28px, 5vw, 52px) clamp(32px, 5vw, 56px);
	margin-bottom: 2rem;
}
.wc-post__head-inner { max-width: 68ch; }
.wc-post__fil {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5em;
	font-size: var(--wc-fs-xs); margin-bottom: 1rem;
	color: rgba(255,255,255,.55);
}
.wc-post__fil a { color: var(--wc-teal-l); font-weight: 600; }
.wc-post__fil a:hover { color: #fff; }

.wc-post__title {
	font-family: var(--wc-font-display);
	font-size: clamp(1.9rem, 4.2vw, 2.9rem);
	line-height: 1.15; color: #fff; margin: 0 0 1rem;
}
.wc-post__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5em;
	font-size: var(--wc-fs-sm); color: rgba(255,255,255,.7);
}
.wc-post__sep { opacity: .4; }

/* ---------- Photo de une ---------- */
.wc-post__cover { margin: -3.5rem 0 2.4rem; }
.wc-post__cover img {
	display: block; width: 100%; max-width: 100%; height: auto;
	aspect-ratio: 16 / 9; object-fit: cover;
	/*
	 * Le sujet d'une perspective immobilière est au centre ou légèrement
	 * au-dessus : quand la hauteur est bridée, on rogne le ciel et la
	 * pelouse plutôt que le bâtiment.
	 */
	object-position: center 42%;
	border-radius: var(--wc-radius);
	box-shadow: var(--wc-shadow);
}

/*
 * Hauteur bridée sur grand écran (05/08/2026).
 *
 * En pleine largeur, un 16/9 atteint près de 790 px de haut sur un écran
 * de bureau : l'image occupait tout l'écran et repoussait le texte sous la
 * ligne de flottaison. Le lecteur arrivait sur une image, pas sur un
 * article. On plafonne donc la hauteur — le format devient plus
 * panoramique à mesure que l'écran s'élargit, ce qui est aussi la
 * proportion des bandeaux de presse.
 */
@media (min-width: 900px) {
	.wc-post__cover img { max-height: 460px; }
}
@media (min-width: 1400px) {
	.wc-post__cover img { max-height: 520px; }
}
.wc-post__cover figcaption {
	margin-top: .6rem; font-size: var(--wc-fs-xs); color: var(--wc-muted);
}

/* ---------- Layout ---------- */
.wc-post__layout {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4rem;
	align-items: start;
}
.wc-post__body { min-width: 0; max-width: 68ch; }

/* ---------- Corps du texte ----------
   Plus grand que le reste du site : on lit ici, on ne scanne pas. */
.wc-post__body { font-size: 1.06rem; line-height: 1.75; color: var(--wc-ink); }
.wc-post__body > * + * { margin-top: 1.15em; }

.wc-post__body h2 {
	font-family: var(--wc-font-display); font-size: 1.6rem;
	color: var(--wc-marine); line-height: 1.2;
	margin-top: 2.4em; margin-bottom: .2em;
	padding-bottom: .4rem; position: relative;
}
.wc-post__body h2::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 44px; height: 2px; background: var(--wc-orange);
}
.wc-post__body h3 {
	font-family: var(--wc-font-display); font-size: 1.25rem;
	color: var(--wc-marine); margin-top: 1.8em; margin-bottom: .1em;
}
.wc-post__body strong { color: var(--wc-marine); font-weight: 700; }
.wc-post__body a { color: var(--wc-teal); text-decoration: underline; text-underline-offset: .15em; }
.wc-post__body a:hover { color: var(--wc-marine); }

.wc-post__body ul, .wc-post__body ol { padding-left: 1.3em; }
.wc-post__body li + li { margin-top: .4em; }
.wc-post__body ul li::marker { color: var(--wc-orange); }

/* Citation : l'avis tranche, la parole rapportee. */
.wc-post__body blockquote {
	margin-inline: 0; padding: 1em 1.3em;
	background: var(--wc-paper); border-left: 3px solid var(--wc-orange);
	border-radius: 0 8px 8px 0;
	font-size: var(--wc-fs-base); color: var(--wc-ink);
}
.wc-post__body blockquote p { margin: 0; }
.wc-post__body blockquote p + p { margin-top: .8em; }

/* Tableau : la grille de disponibilite, les chiffres cles. */
.wc-post__body table {
	width: 100%; border-collapse: collapse; font-size: var(--wc-fs-sm);
	border: 1px solid var(--wc-line); border-radius: var(--wc-radius);
	overflow: hidden;
}
.wc-post__body thead { background: var(--wc-marine); color: #fff; }
.wc-post__body th {
	text-align: left; padding: .7em 1em; font-family: var(--wc-font-body);
	font-weight: 600; font-size: var(--wc-fs-xs);
	text-transform: uppercase; letter-spacing: .04em;
}
.wc-post__body td { padding: .65em 1em; border-top: 1px solid var(--wc-line); }
.wc-post__body tbody tr:nth-child(even) { background: var(--wc-paper); }
/* Tableau a deux colonnes sans en-tete : la 1re colonne est un libelle. */
.wc-post__body td:first-child strong { color: var(--wc-marine); }

.wc-post__body img { max-width: 100%; height: auto; border-radius: var(--wc-radius); }
.wc-post__body hr { border: 0; border-top: 1px solid var(--wc-line); margin-block: 2.4em; }

/* Mentions legales de fin d'article : plus petit, plus gris. */
.wc-post__body > p > em:only-child { font-size: var(--wc-fs-xs); color: var(--wc-muted); font-style: normal; }

/* ---------- Aside ---------- */
.wc-post__box {
	background: #fff; border: 1px solid var(--wc-line);
	border-radius: var(--wc-radius); padding: 1.2rem;
	margin-bottom: 1rem;
}
.wc-post__box-label {
	font-size: var(--wc-fs-xs); font-weight: 700;
	text-transform: uppercase; letter-spacing: .06em;
	color: var(--wc-muted); margin-bottom: .8rem;
}
.wc-post__prog {
	display: block; padding: .7rem 0; border-top: 1px solid var(--wc-line);
	text-decoration: none;
}
.wc-post__prog:first-of-type { border-top: 0; padding-top: 0; }
.wc-post__prog b {
	display: block; font-family: var(--wc-font-display);
	font-size: var(--wc-fs-lg); color: var(--wc-marine); line-height: 1.2;
}
.wc-post__prog span { font-size: var(--wc-fs-xs); color: var(--wc-muted); }
.wc-post__prog:hover b { color: var(--wc-teal); }

.wc-post__villes { list-style: none; margin: 0; padding: 0; }
.wc-post__villes li + li { margin-top: .5rem; }
.wc-post__villes a { font-size: var(--wc-fs-sm); font-weight: 600; color: var(--wc-teal); }
.wc-post__villes a:hover { color: var(--wc-marine); }

/* ---------- Partage ---------- */
.wc-post__share { display: flex; flex-wrap: wrap; gap: .5rem; }
.wc-share {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.4rem; height: 2.4rem; border-radius: 8px;
	font-size: var(--wc-fs-sm); font-weight: 700;
	color: #fff; text-decoration: none;
	transition: transform .12s, filter .12s;
}
.wc-share:hover { transform: translateY(-2px); filter: brightness(1.1); }
.wc-share--li   { background: #0a66c2; }
.wc-share--fb   { background: #1877f2; }
.wc-share--x    { background: #000; }
.wc-share--wa   { background: #25d366; }
.wc-share--mail { background: var(--wc-muted); }

/* ---------- CTA ---------- */
.wc-post__box--cta {
	background: var(--wc-marine); border-color: var(--wc-marine); color: #fff;
}
.wc-post__box--cta b {
	display: block; font-family: var(--wc-font-display);
	font-size: var(--wc-fs-lg); margin-bottom: .4rem;
}
.wc-post__box--cta p {
	margin: 0 0 1rem; font-size: var(--wc-fs-sm); color: rgba(255,255,255,.75);
}
.wc-post__box--cta .wc-btn { width: 100%; justify-content: center; }
.wc-post__tel {
	display: block; text-align: center; margin-top: .7rem;
	font-size: var(--wc-fs-sm); font-weight: 600; color: var(--wc-teal-l);
}

/* ---------- Paliers ---------- */
@media (min-width: 980px) {
	.wc-post__layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; }
	.wc-post__aside { position: sticky; top: 96px; }
}

/* =========================================================================
   INDEX DU BLOG ET ARCHIVES — namespace .wc-blog*
   Ajouté le 27/07/2026 : le thème n'avait ni home.php ni archive.php, la
   liste des articles retombait sur le repli index.php.
   ========================================================================= */

.wc-blog__head{
  background:linear-gradient(165deg,#0f2c3f 0%,#16405a 100%);
  color:#fff;padding:2.6rem 0 2.4rem;
}
.wc-blog__head .wc-post__fil,
.wc-blog__head .wc-post__fil a{color:rgba(255,255,255,.72)}
.wc-blog__head .wc-post__fil a:hover{color:#fff}
.wc-blog__title{
  font-family:var(--wc-font-display,Georgia,serif);
  font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.15;
  margin:.5rem 0 .6rem;color:#fff;
}
.wc-blog__lede{
  margin:0;max-width:60ch;line-height:1.6;
  color:rgba(255,255,255,.82);font-size:1.02rem;
}
.wc-blog__cats{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.wc-blog__cat{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .85rem;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;text-decoration:none;font-size:.85rem;font-weight:600;
  transition:background .15s,border-color .15s;
}
.wc-blog__cat:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.4)}
.wc-blog__cat span{
  font-size:.72rem;opacity:.7;background:rgba(0,0,0,.2);
  border-radius:999px;padding:.05rem .4rem;
}

.wc-blog__wrap{padding:2.5rem 0 3rem}
.wc-blog__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.6rem}

.wc-blog-card{
  background:#fff;border:1px solid var(--wc-line);border-radius:var(--wc-radius);
  overflow:hidden;display:flex;flex-direction:column;transition:.22s ease;
}
.wc-blog-card:hover{transform:translateY(-4px);box-shadow:var(--wc-shadow);border-color:transparent}

/* Le plus récent occupe toute la largeur : c'est lui qui porte la fraîcheur. */
.wc-blog-card--une{grid-column:1/-1;flex-direction:row}
.wc-blog-card--une .wc-blog-card__media{flex:0 0 46%;aspect-ratio:auto}
.wc-blog-card--une .wc-blog-card__title{font-size:1.5rem}
.wc-blog-card--une .wc-blog-card__body{padding:1.8rem 2rem;justify-content:center}

.wc-blog-card__media{
  display:block;position:relative;aspect-ratio:16/10;
  background:var(--wc-paper-2);overflow:hidden;
}
.wc-blog-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.wc-blog-card__ph{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:2.2rem;color:var(--wc-line);
}
.wc-blog-card__body{padding:1.2rem 1.3rem 1.35rem;display:flex;flex-direction:column;flex:1}
.wc-blog-card__cat{
  display:inline-block;align-self:flex-start;
  font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:#fff;background:var(--wc-teal);border-radius:5px;
  padding:.28em .6em;margin-bottom:.6rem;
}
.wc-blog-card__title{
  font-family:var(--wc-font-display,Georgia,serif);
  font-size:1.15rem;line-height:1.3;margin:0 0 .55rem;
}
.wc-blog-card__title a{color:var(--wc-marine);text-decoration:none}
.wc-blog-card__title a:hover{color:var(--wc-teal)}
.wc-blog-card__excerpt{
  margin:0 0 .9rem;font-size:.93rem;line-height:1.6;color:var(--wc-muted);
}
.wc-blog-card__meta{
  margin-top:auto;padding-top:.7rem;border-top:1px solid var(--wc-line);
  font-size:.8rem;color:var(--wc-muted);display:flex;gap:.5rem;align-items:center;
}
.wc-blog-card__link{
  margin-top:.7rem;font-weight:700;font-size:.9rem;
  color:var(--wc-teal);text-decoration:none;
}
.wc-blog-card__link:hover{text-decoration:underline}

.wc-blog__pagination{margin-top:2.4rem}
.wc-blog__pagination ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;
}
.wc-blog__pagination a,.wc-blog__pagination span{
  display:inline-block;padding:.5rem .85rem;border-radius:8px;
  border:1px solid var(--wc-line);color:var(--wc-marine);
  text-decoration:none;font-weight:600;font-size:.9rem;
}
.wc-blog__pagination .current{background:var(--wc-marine);color:#fff;border-color:var(--wc-marine)}
.wc-blog__pagination a:hover{border-color:var(--wc-teal);color:var(--wc-teal)}

.wc-blog__vide{
  text-align:center;padding:3rem 1rem;background:var(--wc-paper-2);
  border-radius:var(--wc-radius);max-width:620px;margin:0 auto;
}
.wc-blog__vide h2{
  font-family:var(--wc-font-display,Georgia,serif);
  color:var(--wc-marine);margin:0 0 .7rem;font-size:1.3rem;
}
.wc-blog__vide p{color:var(--wc-muted);line-height:1.6;margin:0 0 1.3rem}

@media (max-width:820px){
  .wc-blog-card--une{flex-direction:column}
  .wc-blog-card--une .wc-blog-card__media{flex:none;aspect-ratio:16/10}
  .wc-blog-card--une .wc-blog-card__body{padding:1.2rem 1.3rem 1.35rem}
  .wc-blog-card--une .wc-blog-card__title{font-size:1.3rem}
}