/* ===== Réalisations — masonry asymétrique + overlays (migration fidèle) ===== */
.realisations { position: relative; background-color: var(--blanc-ivoire); padding: 6rem 6rem; overflow: hidden; }
.realisations__inner { max-width: var(--max-width); margin: 0 auto; }
.realisations__header { text-align: center; max-width: 820px; margin: 0 auto 4rem; }
.realisations__title { font-family: var(--font-titre); color: var(--noir-onyx); font-size: clamp(2rem, 4vw, 3rem); line-height: 0.95; margin-bottom: 1.25rem; font-weight: 400; letter-spacing: 0.3px; }
.realisations__title .accent { color: var(--bleu-cobalt); font-weight: 400; }
.realisations__intro { color: var(--noir-onyx); }

.realisations__masonry { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; gap: 1.5rem; grid-auto-flow: dense; }

.realisation-card { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 12px 30px rgba(31,31,31,0.15); isolation: isolate; grid-row: span 1; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: var(--cursor-link); }
.realisation-card--tall { grid-row: span 2; }
.realisation-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 0.5s ease; }
.realisation-card:hover .realisation-card__image { transform: scale(1.05); }
.realisation-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(31,31,31,0.7) 30%, rgba(31,31,31,0) 40%); }

.realisation-card__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem; color: var(--blanc-ivoire); display: flex; flex-direction: column; gap: 0.4rem; }
.realisation-card__category { display: inline-block; background-color: var(--bleu-celeste); color: var(--bleu-cobalt); border: 1px solid rgba(15,16,244,0.15); font-family: var(--font-corps); font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1.2px; padding: 0.35rem 0.75rem; border-radius: 999px; align-self: flex-start; }
.realisation-card__title { font-family: var(--font-titre); font-size: 1.5rem; line-height: 1.05; color: var(--blanc-ivoire); margin: 0.25rem 0 0; }
.realisation-card--tall .realisation-card__title { font-size: 2.25rem; }
.realisation-card__desc { color: var(--blanc-ivoire); margin: 0; max-width: 420px; }

.realisation-card__cta { position: absolute; top: 1rem; right: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; background-color: var(--blanc-ivoire); color: var(--bleu-cobalt); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,0.18); transition: var(--btn-transition); }
.realisation-card__cta svg { width: 1.05rem; height: 1.05rem; }
.realisation-card:hover .realisation-card__cta { background-color: var(--bleu-celeste); color: var(--bleu-cobalt); }
.realisation-card__rich { display: none; }

.realisations__promo { position: relative; border-radius: 24px; background-color: var(--bleu-cobalt); color: var(--blanc-ivoire); padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; overflow: hidden; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 12px 30px rgba(31,31,31,0.15); grid-row: span 1; grid-column: span 1; cursor: var(--cursor-link); }
.realisations__promo-label { font-family: var(--font-corps); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1.3px; color: var(--jaune-safran); }
.realisations__promo-title { font-family: var(--font-titre); font-size: 2rem; line-height: 1; color: var(--blanc-ivoire); }
.realisations__promo-link { align-self: flex-end; width: 2.6rem; height: 2.6rem; border-radius: 50%; background-color: var(--blanc-ivoire); color: var(--bleu-cobalt); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,0.18); transition: var(--btn-transition); }
.realisations__promo-link svg { width: 1.05rem; height: 1.05rem; }
.realisations__promo:hover .realisations__promo-link { background-color: var(--bleu-celeste); }

@media (max-width: 960px) {
    .realisations__masonry { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }
}
@media (max-width: 560px) {
    .realisations { padding: 4rem 1.25rem; }
    .realisations__masonry { grid-template-columns: 1fr; grid-auto-rows: 260px; }
    .realisation-card--tall { grid-row: span 1; }
    .realisations__promo { grid-row: span 1; }
}