/* Les rayons : un meuble de mercerie à tiroirs, un tiroir par univers. Porte-étiquette en laiton, poignée,
   et l'objet qui sort du tiroir quand le meuble arrive à l'écran. */
.cabinet { position: relative; background: linear-gradient(180deg, #5b3e29, var(--bois) 30%, #5b3e29);
  padding: 26px clamp(12px, 2vw, 24px) 22px; border-radius: 4px 4px 2px 2px;
  box-shadow: inset 0 0 0 3px #4a3222, inset 0 0 0 7px #7e5a3d, 0 24px 34px -24px rgba(43, 35, 28, .7); }
.cabinet::before { content: ""; position: absolute; left: -12px; right: -12px; top: -16px; height: 18px; background: #4a3222;    /* la corniche */
  border-radius: 3px; box-shadow: inset 0 -4px 0 #6b4a31, 0 4px 0 #3b281b; }
.cabinet::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -18px; height: 18px;                        /* les pieds */
  background: linear-gradient(90deg, #4a3222 0 26px, transparent 26px calc(100% - 26px), #4a3222 calc(100% - 26px)); }
.tiroirs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; }
.tiroir { display: grid; grid-template-rows: 120px auto; color: var(--encre); text-decoration: none; position: relative; height: 100%; }
.tiroir-niche { position: relative; display: grid; place-items: end center; background: #3a281c;                       /* l'intérieur du casier */
  box-shadow: inset 0 10px 16px rgba(0, 0, 0, .55); border-radius: 2px 2px 0 0; overflow: clip; }
.tiroir-niche img { height: 104px; width: auto; max-width: 92%; object-fit: contain; position: relative; z-index: 1;
  transition: transform .8s cubic-bezier(.25, 1.3, .5, 1), opacity .5s ease; transition-delay: calc(.2s + var(--i) * 90ms);
  filter: drop-shadow(0 -2px 8px rgba(242, 234, 217, .25)); }
.tiroir-niche .question { font-family: var(--titre); font-size: 82px; line-height: 1; color: var(--moutarde); margin-bottom: 6px; position: relative; z-index: 1;
  transition: transform .8s cubic-bezier(.25, 1.3, .5, 1); transition-delay: .9s; }
.js .rayons:not(.vu) .tiroir-niche img, .js .rayons:not(.vu) .tiroir-niche .question { transform: translateY(100%); }
.tiroir-face { position: relative; z-index: 2; display: grid; justify-items: center; gap: 8px; padding: 14px 10px 30px; margin-top: -4px;
  background: linear-gradient(180deg, #a47f5c, var(--bois-c) 40%, #876546); border-radius: 2px;
  box-shadow: inset 0 0 0 2px rgba(58, 40, 28, .55), inset 0 2px 0 rgba(255, 240, 210, .35), 0 3px 0 #4a3222; transition: transform .3s ease; }
.porte-etiquette { background: var(--carte); padding: 6px 12px; min-width: 76%; text-align: center; border-radius: 2px;
  box-shadow: 0 0 0 3px var(--laiton), 0 0 0 4px #7a6031, inset 0 0 6px rgba(111, 77, 51, .25); }
.porte-etiquette h3 { font-family: var(--etiquette); font-weight: 600; font-size: 18px; letter-spacing: .03em; line-height: 1.15; }
.tiroir-texte { font-size: 15px; line-height: 1.3; color: #fbf3e2; text-align: center; text-shadow: 0 1px 0 rgba(58, 40, 28, .6); max-width: 24ch; }
.poignee { position: absolute; left: 50%; bottom: 10px; width: 54px; height: 12px; margin-left: -27px; border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #d6b778, var(--laiton) 50%, #7a6031); box-shadow: 0 2px 2px rgba(0, 0, 0, .35); }
.tiroir:hover .tiroir-face, .tiroir:focus-visible .tiroir-face { transform: translateY(5px); }
.tiroir:hover .tiroir-niche img { transform: translateY(-6px); transition-delay: 0s; }
.tiroir.votre .porte-etiquette { background: var(--moutarde-c); }
.rayons-suite { margin-top: 44px; color: var(--doux); }

@media (max-width: 900px) {
  .tiroirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .tiroir { grid-template-rows: 100px auto; }
  .tiroir-niche img { height: 86px; }
  .porte-etiquette { padding: 5px 8px; min-width: 0; width: 100%; }
  .porte-etiquette h3 { font-size: 16px; }
  .tiroir-texte { font-size: 14px; }
}