/* Le Magazine Roubla : la liasse des 4 pages posée sur la table ; à l'arrivée, les pages s'écartent en éventail. */
.magazine { overflow: clip; }
.magazine-in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(26px, 4vw, 60px); align-items: center; }
.liasse { position: relative; aspect-ratio: 1 / .86; max-width: 540px; width: 100%; justify-self: center; }
.liasse a { position: absolute; left: 25%; top: 3%; width: 50%; display: block; transform-origin: 50% 100%;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.15s + var(--i) * 90ms); }
.liasse img { width: 100%; box-shadow: 0 0 0 1px var(--ligne), 0 18px 26px -16px rgba(43, 35, 28, .75); background: var(--carte); }
.liasse a:nth-child(1) { z-index: 4; transform: rotate(-1deg); }
.liasse a:nth-child(2) { z-index: 3; transform: translateX(-30%) rotate(-8deg); }
.liasse a:nth-child(3) { z-index: 2; transform: translateX(22%) rotate(5deg); }
.liasse a:nth-child(4) { z-index: 1; transform: translateX(42%) rotate(10deg); }
.js .magazine:not(.vu) .liasse a { transform: none; }
.liasse a:hover, .liasse a:focus-visible { z-index: 5; }
.magazine-texte ul { margin: 0 0 20px; padding: 0; list-style: none; }
.magazine-texte li { padding: 10px 0 10px 32px; border-top: 1px solid var(--ligne); position: relative; }
.magazine-texte li::before { content: "№"; position: absolute; left: 0; top: 10px; font-family: var(--titre); color: var(--brique); }
@media (max-width: 900px) { .magazine-in { grid-template-columns: minmax(0, 1fr); } .liasse { max-width: 440px; } }
@media (max-width: 520px) {
  .liasse a:nth-child(2) { transform: translateX(-24%) rotate(-6deg); }
  .liasse a:nth-child(3) { transform: translateX(14%) rotate(4deg); }
  .liasse a:nth-child(4) { transform: translateX(28%) rotate(7deg); }
}