.material{margin:0;min-width:0}
.material-stage{position:relative;isolation:isolate;overflow:hidden;width:100%;aspect-ratio:1;background:var(--c-bg)}
.material-stage>.layer{position:absolute;inset:0;display:block;width:100%;height:100%}
.material-stage>.layer img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;display:block;user-select:none}
.layer-fond{z-index:0}.layer-ombre{z-index:1}.layer-volume{z-index:2}.layer-profondeur{z-index:3}.layer-surface{z-index:4}
.material .layer-profondeur,.material .layer-surface{visibility:hidden;clip-path:inset(0 100% 0 0)}
.material[data-reading=surface] .layer-surface,.material[data-reading=profondeur] .layer-profondeur{visibility:visible;clip-path:inset(0)}
.material[data-reading=surface] .layer-volume,.material[data-reading=profondeur] .layer-volume{visibility:hidden}
.material[data-reading=volume] .layer-volume{visibility:visible}
.material-caption{padding-top:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--c-line);margin-top:0}
.material-caption>span,.material-caption>p{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--c-text-2);margin:0}
.reading-controls{display:inline-flex;gap:2px;padding:4px;border:1px solid var(--c-line);border-radius:999px;background:rgb(255 255 255 / 3%)}
.reading-controls button{border:0;background:transparent;color:var(--c-text-2);border-radius:999px;font-size:11px;min-height:44px;padding:8px 12px;line-height:20px}
.reading-controls button:hover{color:var(--c-text);background:rgb(255 255 255 / 8%)}
.reading-controls button[aria-pressed=true]{background:var(--c-accent);color:var(--c-on-accent)}
.reading-controls button:disabled{opacity:.45}
.material[data-reading] .material-stage{touch-action:pan-y}
@media(prefers-reduced-motion:no-preference){.material.is-switching .layer-profondeur,.material.is-switching .layer-surface{transition:clip-path var(--t-reveal) var(--ease-reveal)}}
@media(width<768px){
 .material-stage{aspect-ratio:1.08}
 .material-stage>.layer img{object-position:50% 100%;object-fit:cover}
 .material-caption{padding-top:14px;display:flex;flex-wrap:wrap;gap:8px}
 .reading-controls{flex:1;justify-content:space-between}
 .reading-controls button{min-height:44px;padding:8px 12px;font-size:11px}
}