/* The four elements (homepage + Notre histoire) — an orbit: the selected element's photo in the centre,
   four round thumbnails on a fine ring; selecting one shows its details in the panel beside it. */
.elements3 { background: var(--c-ivory); }
.home .elements3 { padding-top: 0; }
.elements3__head { max-width: 640px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.elements3__eyebrow { margin: 0 0 .9rem; font-size: .7rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--c-royal); }
.headings-sans .elements3__title, .elements3__title { margin: 0; font-family: var(--f-body); font-weight: 700; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.02em; }
.elements3__title em { font-style: normal; color: inherit; }
.elements3__lead { margin: 1rem 0 0; color: var(--c-muted); line-height: 1.75; }
.elements3__note { margin: clamp(2rem, 4vw, 3rem) 0 0; text-align: center; font-size: .86rem; color: var(--c-muted); }

.el-wheel { display: grid; gap: 2rem; align-items: center; max-width: 980px; margin-inline: auto; }

/* The orbit: a fine ring, the selected element's photo in the centre, four round thumbnails on the ring */
.el-orbit { display: grid; place-items: center; padding: 2.4rem 2.6rem 3.4rem; }
.el-orbit__ring { position: relative; width: min(72vw, 290px); aspect-ratio: 1; border: 1px solid rgba(var(--c-royal-rgb), .28); border-radius: 50%; }
.el-orbit__ring::before { content: ""; position: absolute; inset: 9%; border: 1px dashed rgba(var(--c-champagne-rgb), .9); border-radius: 50%; }
.el-orbit__center { position: absolute; inset: 17%; overflow: hidden; border-radius: 50%; background: var(--c-soft-sand); box-shadow: 0 24px 50px -28px rgba(var(--c-navy-rgb), .55); }
.el-orbit__img { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease); }
.el-orbit__img.is-active { opacity: 1; }
.el-orbit__img img, .el-orbit__img .ph { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; transform: scale(1.06); transition: transform 6s linear; }
.el-orbit__img.is-active img { transform: scale(1); }

.el-q { position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .45rem; width: 22%; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -50%); }
.el-q--top { left: 50%; top: 0; }
.el-q--right { left: 100%; top: 50%; }
.el-q--bottom { left: 50%; top: 100%; }
.el-q--left { left: 0; top: 50%; }
.el-q__orb { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 50%; border: 3px solid var(--c-ivory); box-shadow: 0 0 0 1px rgba(var(--c-royal-rgb), .3); transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.el-q__orb img, .el-q__orb .ph { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; filter: saturate(.85); transition: filter .4s var(--ease); }
.el-q__label { position: absolute; top: calc(100% + .35rem); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted); transition: color .3s var(--ease); }
.el-q:hover .el-q__orb { transform: scale(1.06); }
.el-q.is-active .el-q__orb { box-shadow: 0 0 0 2px var(--c-royal); transform: scale(1.12); }
.el-q.is-active .el-q__orb img { filter: none; }
.el-q.is-active .el-q__label { color: var(--c-navy); }
.el-q:focus-visible { outline: none; }
.el-q:focus-visible .el-q__orb { box-shadow: 0 0 0 2px var(--c-royal), 0 0 0 5px rgba(var(--c-royal-rgb), .25); }

/* The panel */
.el-wheel__info { position: relative; text-align: center; }
.el-panel { animation: el-in .55s var(--ease); }
.el-panel[hidden] { display: none; }
.el-panel__icon { display: inline-block; margin-bottom: .6rem; color: var(--c-royal); }
.el-panel__icon svg { display: block; width: 40px; height: 40px; }
.headings-sans .el-panel__name, .el-panel__name { margin: 0 0 .35rem; font-family: 'Marcellus', var(--f-heading); font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 400; line-height: 1.05; letter-spacing: 0; color: var(--c-navy); }
.el-panel__sub { margin: 0 0 1.1rem; font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c-royal); }
.el-panel__text { max-width: 36ch; margin: 0 auto; font-size: .98rem; line-height: 1.75; color: var(--c-ink); }
.el-wheel__hint { margin: 1.5rem 0 0; font-size: .74rem; color: var(--c-muted); }
@keyframes el-in { from { opacity: 0; transform: translateY(8px); } }

@media (min-width: 900px) {
	.el-wheel { grid-template-columns: auto minmax(0, 1fr); gap: clamp(3rem, 7vw, 6rem); }
	.el-orbit__ring { width: clamp(300px, 27vw, 380px); }
	.el-wheel__info { text-align: left; }
	.el-panel__text { margin: 0; }
	.el-q__label { font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) { .el-panel { animation: none; } .el-orbit__img, .el-orbit__img img, .el-q__orb { transition: none; } .el-orbit__img img { transform: none; } }