.trs-article-header {
background: var(--trs-offwhite);
text-align: center;
padding-top: var(--trs-space-2xl);
padding-bottom: var(--trs-space-md);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--trs-space-sm);
} .trs-article-header__scroll {
margin-top: var(--trs-space-xs);
align-self: center;
} .trs-article-hero-img {
width: 100%;
padding: 0 var(--trs-space-lg);
}
.trs-article-hero-img img {
width: 100%;
max-height: clamp(280px, 50vw, 550px);
object-fit: cover;
display: block;
border-radius: 2px;
} .trs-article-content {
background: var(--trs-offwhite);
padding: var(--trs-space-xl) var(--trs-spacing-h) 0 var(--trs-spacing-h);
}
.trs-article-content__inner {
max-width: 780px;
margin: 0 auto;
} .trs-article-content__inner p {
font-size: var(--trs-fs-p);
line-height: var(--trs-lh-relaxed);
margin-bottom: var(--trs-space-sm);
color: var(--trs-black);
}
.trs-article-content__inner h2 {
font-size: var(--trs-fs-h3);
margin-top: var(--trs-space-lg);
margin-bottom: var(--trs-space-sm);
}
.trs-article-content__inner h3 {
font-size: var(--trs-fs-h4);
margin-top: var(--trs-space-md);
margin-bottom: var(--trs-space-xs);
}
.trs-article-content__inner ul,
.trs-article-content__inner ol {
padding-left: 1.5em;
margin-bottom: var(--trs-space-sm);
}
.trs-article-content__inner li {
font-size: var(--trs-fs-p);
line-height: var(--trs-lh-relaxed);
margin-bottom: 4px;
}
.trs-article-content__inner img {
width: 100%;
height: auto;
border-radius: 2px;
margin: var(--trs-space-md) 0;
}
.trs-article-content__inner figure {
margin: var(--trs-space-md) 0;
}
.trs-article-content__inner figcaption {
font-size: var(--trs-fs-p-xs);
color: rgba(28,28,28,.55);
text-align: center;
margin-top: var(--trs-space-xs);
} .trs-article-content__inner .wp-block-image.alignwide,
.trs-article-content__inner .wp-block-image.alignfull {
margin-left: calc(-1 * var(--trs-spacing-h));
margin-right: calc(-1 * var(--trs-spacing-h));
max-width: none;
}
.trs-article-content__inner .wp-block-image.alignwide img,
.trs-article-content__inner .wp-block-image.alignfull img {
border-radius: 0;
} .trs-article-content__inner blockquote {
border-left: 2px solid var(--trs-black);
padding-left: var(--trs-space-md);
margin: var(--trs-space-md) 0;
font-style: normal;
}
.trs-article-content__inner blockquote p {
font-size: var(--trs-fs-p-lg);
line-height: var(--trs-lh-loose);
} .trs-article-autres { background: var(--trs-offwhite); } .trs-article-autres__header {
display: flex;
flex-direction: column;
gap: var(--trs-space-lg);
margin-bottom: var(--trs-space-xl);
}
.trs-article-autres__title    { margin: 0; }
.trs-article-autres__subtitle { margin: var(--trs-space-xs) 0 0; }
.trs-article-autres__header-right {
display: flex;
flex-direction: column;
gap: 0;
}
.trs-article-autres__cta  { align-self: flex-start; }
.trs-article-autres__text {
margin: 0 0 var(--trs-space-sm);
} .trs-article-autres__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--trs-space-md);
}
.trs-article-autres__card { display: block; text-decoration: none; }
.trs-article-autres__card-img {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 2px;
}
.trs-article-autres__card-img img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 600ms var(--trs-ease);
}
.trs-article-autres__card:hover .trs-article-autres__card-img img {
transform: scale(1.05);
}
.trs-article-autres__card-overlay {
position: absolute; inset: 0;
background: rgba(28,28,28,.4);
transition: background var(--trs-dur-fast) ease;
z-index: 1;
}
.trs-article-autres__card:hover .trs-article-autres__card-overlay {
background: rgba(28,28,28,.55);
}
.trs-article-autres__card-title {
position: absolute;
bottom: var(--trs-space-md);
left: var(--trs-space-md);
right: var(--trs-space-md);
font-family: var(--trs-font-nav);
font-size: var(--trs-fs-p-lg);
font-weight: 400;
color: var(--trs-offwhite);
line-height: var(--trs-lh-snug);
display: block;
text-transform: none;
z-index: 2;
} @media (min-width: 768px) { .trs-article-autres__header {
flex-direction: row;
align-items: stretch;
gap: 0;
}
.trs-article-autres__header-left  { flex: 1;  }
.trs-article-autres__header-right { flex: 1;  } .trs-article-autres__grid {
grid-template-columns: repeat(3, 1fr);
}
}