/* ===== Services bento — cards éditoriales slide-up panel (migration fidèle) ===== */
.services { position: relative; background-color: var(--blanc-ivoire); padding: 6rem 6rem; overflow: hidden; }
.services__inner { max-width: var(--max-width); margin: 0 auto; }
.services__header { max-width: 930px; margin-bottom: 3rem; }
.services__title { font-family: var(--font-titre); color: var(--noir-onyx); font-size: clamp(2rem, 4vw, 3rem); line-height: 0.95; margin-bottom: 1rem; }
.services__title-mark { color: var(--bleu-cobalt); font-weight: 400; }
.services__intro { color: var(--noir-onyx); max-width: 720px; }

.services__bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; height: clamp(500px, 60vh, 640px); }

.service-card {
    --card-accent: var(--bleu-cobalt);
    --panel-hidden: 150px;
    position: relative; border-radius: 28px; overflow: hidden; isolation: isolate;
    background-color: var(--noir-onyx); color: var(--blanc-ivoire);
    cursor: var(--cursor-link);
}
.service-card[data-color="bleu"]   { --card-accent: var(--bleu-cobalt); }
.service-card[data-color="orange"] { --card-accent: var(--orange-sanguine); }
.service-card[data-color="jaune"]  { --card-accent: var(--jaune-safran); }

.service-card__media { position: absolute; inset: 0; z-index: 0; }
.service-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.service-card:hover .service-card__media img { transform: scale(1.06); }
.service-card::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0) 55%);
}
.service-card__num {
    position: absolute; top: -2.5rem; right: -1rem; z-index: 4;
    font-family: var(--font-titre); font-size: clamp(8rem, 14vw, 13rem); line-height: 0.85; font-weight: 400;
    color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.55); letter-spacing: -0.02em; pointer-events: none;
}
.service-card__top { position: absolute; top: 1.75rem; left: 1.75rem; right: 5rem; z-index: 3; }
.service-card__title { font-family: var(--font-titre); font-size: clamp(2rem, 2.8vw, 2.6rem); line-height: 0.95; color: var(--blanc-ivoire); font-weight: 400; letter-spacing: 0.5px; text-shadow: 0 2px 16px rgba(0,0,0,0.35); }

.service-card__panel {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    background-color: var(--bleu-celeste); padding: 2.25rem 1.75rem 1.75rem; color: var(--bleu-cobalt);
    transform: translateY(var(--panel-hidden, 0px)); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    border-top-left-radius: 24px; border-top-right-radius: 24px;
}
.service-card:hover .service-card__panel { transform: translateY(0); }
.service-card__monogram {
    position: absolute; top: -28px; right: 1.5rem; width: 56px; height: 56px; object-fit: contain;
    background-color: var(--blanc-ivoire); border-radius: 50%; padding: 8px; box-shadow: 0 8px 22px rgba(0,0,0,0.18);
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); z-index: 2;
}
.service-card:hover .service-card__monogram { transform: rotate(-12deg) scale(1.08); }

/* Le contenu WYSIWYG de la description reprend le rendu liste designé (2 colonnes) */
.service-card__desc { margin-bottom: 1rem; }
.service-card__desc p { color: var(--bleu-cobalt); margin: 0 0 1rem; }
.service-card__desc ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1rem; margin: 0 0 0.5rem; padding: 0; }
.service-card__desc ul li { position: relative; padding-left: 1rem; color: var(--bleu-cobalt); }
.service-card__desc ul li::before { content: ''; position: absolute; left: 0; top: 0.5em; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background-color: var(--bleu-cobalt); }

.service-card__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap);
    padding: var(--btn-padding-y) var(--btn-padding-x); border-radius: var(--btn-radius);
    background-color: var(--blanc-ivoire); color: var(--noir-onyx);
    font-family: var(--font-corps); font-weight: var(--btn-font-weight); font-size: var(--btn-font-size);
    text-transform: uppercase; letter-spacing: var(--btn-letter-spacing); line-height: var(--btn-line-height);
    text-decoration: none; transition: var(--btn-transition);
}
.service-card__cta-icon { width: var(--btn-icon-size); height: var(--btn-icon-size); border-radius: 50%; background-color: var(--card-accent); color: var(--blanc-ivoire); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--btn-transition); }
.service-card__cta-icon svg { width: var(--btn-icon-svg); height: var(--btn-icon-svg); }
.service-card__cta:hover { background-color: var(--card-accent); color: var(--blanc-ivoire); }
.service-card__cta:hover .service-card__cta-icon { background-color: var(--blanc-ivoire); color: var(--card-accent); }

@media (max-width: 1024px) {
    .services { padding: 5rem 2rem; }
    .services__bento { grid-template-columns: 1fr; height: auto; gap: 1rem; }
    .service-card { min-height: 480px; }
}
@media (max-width: 640px) {
    .services { padding: 4rem 1.25rem; }
    .service-card__top { top: 1.5rem; left: 1.5rem; right: 4rem; }
    .service-card__panel { padding: 1.75rem 1.5rem 1.5rem; }
    .service-card__desc ul { grid-template-columns: 1fr; }
}