.nuage-mots-images__placeholder {
margin: 0;
padding: var(--wp--preset--spacing--2);
font-family: var(--wp--preset--font-family--cera-pro);
font-size: var(--wp--preset--font-size--2);
background: var(--wp--preset--color--tertiary);
}
.nuage-mots-images__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem 2rem;
align-items: center;
} .nuage-mots-images__grid--images-first .nuage-mots-images__left {
order: 2;
}
.nuage-mots-images__grid--images-first .nuage-mots-images__right {
order: 1;
}
.nuage-mots-images__content {
margin-bottom: clamp(14px, 2vw, 24px);
}
.nuage-mots-images__content :where(p, li, a, strong, em, span, h1, h2, h3, h4, h5, h6) {
color: inherit;
}
.nuage-mots-images__cloud {
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 14px 18px;
}
.nuage-mots-images__item {
list-style: none;
}
.nuage-mots-images__keyword {
display: inline-block;
font-family: var(--wp--preset--font-family--cera-pro);
font-weight: 700;
font-size: clamp(28px, 3vw, 54px);
line-height: 1.05;
color: var(--wp--preset--color--secondary);
text-decoration: none;
transition: color 0.2s ease, transform 0.2s ease;
will-change: transform;
}
.nuage-mots-images__keyword:hover,
.nuage-mots-images__keyword:focus-visible {
color: var(--wp--preset--color--primary);
transform: translateY(-1px);
}
.nuage-mots-images__keyword.is-active {
color: var(--wp--preset--color--default);
}
.nuage-mots-images__keyword.is-active:hover,
.nuage-mots-images__keyword.is-active:focus-visible {
color: var(--wp--preset--color--default);
transform: translateY(-1px);
}
.nuage-mots-images__right {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.nuage-mots-images__stack {
position: relative;
width: 100%;
max-width: 460px;
aspect-ratio: 3 / 4;
height: auto;
}
.nuage-mots-images__image {
position: absolute;
inset: 0;
margin: 0;
display: flex;
align-items: stretch;
justify-content: stretch;
transform-origin: center center;
transform: rotate(var(--nmi-rot, 0deg)) translateZ(0); z-index: calc(var(--nmi-stack-n, 10) - var(--nmi-order, 0));
transition: transform 0.25s ease, filter 0.25s ease;
filter: saturate(0.98) contrast(0.98);
}
.nuage-mots-images__frame {
position: relative;
width: 100%;
height: 100%;
min-height: 0;
}
.nuage-mots-images__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: 10px;
}
.nuage-mots-images__discover {
position: absolute;
left: 50%;
bottom: clamp(12px, 2.5vw, 20px);
transform: translateX(-50%);
z-index: 2;
width: max-content;
max-width: calc(100% - 24px);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.nuage-mots-images__image.is-active .nuage-mots-images__discover {
opacity: 1;
pointer-events: auto;
}
.nuage-mots-images__image.is-active {
z-index: 900;
transform: rotate(0deg) translateZ(0);
filter: none;
transition: transform 0.25s ease, filter 0.25s ease;
}
@media (max-width: 900px) {
.nuage-mots-images__grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.nuage-mots-images__grid--images-first .nuage-mots-images__left {
order: -1;
}
.nuage-mots-images__grid--images-first .nuage-mots-images__right .nuage-mots-images__stack {
max-width: 75%;
}
}