

html:root #services .p-service-mots { grid-template-columns: 1fr !important; }
html:root #services .p-service-mots > * { grid-column: 1 !important; grid-row: auto !important; }
html:root #services .p-service-mots h3 { border-bottom: 0; padding-bottom: 0; width: auto; }

html:root #services .p-service-mots { position: relative; z-index: 1; gap: 1.1rem; background: #FFFCF7; padding: clamp(1.6rem, 3vw, 2.75rem); border-radius: 4px; box-shadow: 0 34px 70px -46px rgba(70, 48, 22, 0.42), 0 0 0 1px rgba(31, 30, 28, 0.05); }
html:root #services .p-service-mots h3 { font-family: var(--police); font-weight: 400; font-size: clamp(1.2rem, 1.7vw, 1.5rem); letter-spacing: 0.24em; line-height: 1.3; }
html:root #services .p-service-mots h3::after { content: ""; display: block; width: 3rem; margin-top: 1rem; border-top: 1px solid var(--p-ligne-rose); }
html:root #services .p-service-mots > p:not(.p-discret) { font-size: 0.98rem; line-height: 1.8; }

html:root #services .p-projets { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; border: 0; margin-top: 0.25rem; }
html:root #services .p-projets li { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.1rem; padding-block: 0.6rem !important; border: 0; border-top: 1px solid rgba(31, 30, 28, 0.1); }
html:root #services .p-projets li span:last-child { text-align: left; color: var(--noir); font: 300 1.02rem/1.3 var(--affiche); }
html:root #services .p-projets li span:first-child { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze); }
html:root #services .p-discret { font-size: 0.78rem; font-style: italic; }

html:root #services .p-boutons .m-bouton { background: #DCCAB0 !important; border-color: #DCCAB0 !important; color: var(--noir) !important; }

html:root #services .p-boutons .m-bouton:is(:hover, :active, :focus-visible) { background: #CDB896 !important; border-color: #CDB896 !important; color: var(--noir) !important; }

@media (min-width: 64rem) {
  
  html:root #services .p-service { column-gap: clamp(2rem, 4vw, 4rem); }
  html:root #services .p-service .p-service-mots { margin-left: -5rem; align-self: center; }
  html:root #services .p-service--inverse .p-service-mots { margin-left: 0; margin-right: -5rem; }
  html:root #services .p-service[data-ecran] .p-service-mots { align-content: center; }
  html:root #services .p-service .p-service-photos .p-photo:nth-child(2),
  html:root #services .p-service .p-service-photos .p-photo:nth-child(3) { width: calc(50% - 6px); }
}
@media (max-width: 63.99rem) {
  
  html:root #services .p-service { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  html:root #services .p-service-photos { display: contents; }
  html:root #services .p-service-photos .p-photo--grande,
  html:root #services .p-service-photos--seule .p-photo { grid-column: 1 / -1; order: 1; aspect-ratio: 4 / 3; }
  html:root #services .p-service-mots { grid-column: 1 / -1; order: 2; margin: -3.5rem 0.75rem 0.5rem; }
  html:root #services .p-service-photos .p-photo:not(.p-photo--grande) { order: 3; aspect-ratio: 1 / 1; }
  html:root #services .p-service-photos--seule .p-photo { aspect-ratio: 4 / 3; }
}

html:root #services .p-service-photos .p-photo:not(.p-photo--grande) { position: relative; z-index: 2; box-shadow: 0 22px 40px -26px rgba(70, 48, 22, 0.55); }
@media (min-width: 64rem) {
  
  html:root #services .p-service-mots { padding-bottom: calc(clamp(1.6rem, 3vw, 2.75rem) + 2.25rem); }
  html:root #services .p-service .p-service-photos .p-photo:not(.p-photo--grande) { margin-top: -3.25rem; }
  html:root #services .p-service[data-ecran] .p-service-photos .p-photo:not(.p-photo--grande) { height: calc(100% + 3.25rem); }
}
@media (max-width: 63.99rem) {
  html:root #services .p-service-mots { margin-bottom: 0; padding-bottom: calc(clamp(1.6rem, 3vw, 2.75rem) + 2.25rem); }
  html:root #services .p-service-photos .p-photo:not(.p-photo--grande) { margin-top: -2.25rem; }
  html:root #services .p-boutons .m-bouton { white-space: nowrap; letter-spacing: 0.12em; }
}

#services .p-service[data-anime] .p-service-mots,
#services .p-service[data-anime] .p-service-photos .p-photo:not(.p-photo--grande) { transition: opacity 0.8s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1); }
#services .p-service[data-anime]:not([data-vu]) .p-service-mots { opacity: 0; transform: translateX(90px); transition-duration: 0.2s; }
#services .p-service--inverse[data-anime]:not([data-vu]) .p-service-mots { transform: translateX(-90px); }
#services .p-service[data-anime]:not([data-vu]) .p-service-photos .p-photo:not(.p-photo--grande) { opacity: 0; transform: translateY(80px); transition-duration: 0.2s; }
#services { overflow-x: clip; }
