/* Tiroirs « Disponibilités » et « La maison » : acajou profond, pleine hauteur.
   Téléphone : feuilles plein écran qui montent du bas. Ordinateur : ils glissent depuis la droite. */
.tiroir {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; top: var(--demobar-offset, 0px);
  background: var(--acajou-p); display: flex; flex-direction: column; overflow: hidden; outline: none;
  padding: calc(max(var(--bord), env(safe-area-inset-top)) + var(--ph) + 20px) var(--bord-d) 0 var(--bord-g);
  transform: translateY(100%); transition: transform .32s var(--ease);
}
.tiroir.is-on { transform: none; }
.tiroir .fermer { position: absolute; right: max(4px, env(safe-area-inset-right)); top: calc(max(var(--bord), env(safe-area-inset-top)) + var(--ph) + 12px); z-index: 2; }
.tiroir .t-tiroir { margin-right: 52px; flex: none; padding-bottom: 12px; }
.tiroir-corps {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 calc(var(--bord-d) * -1) 0 calc(var(--bord-g) * -1); padding: 0 var(--bord-d) max(24px, env(safe-area-inset-bottom)) var(--bord-g);
  border-top: 1px solid rgb(255 255 255 / .12);
}

/* La maison */
.bande { margin: 0 calc(var(--bord-g) * -1) 0 calc(var(--bord-d) * -1); }
.bande img { width: 100%; height: auto; aspect-ratio: 1800 / 555; object-fit: cover; object-position: 50% 40%; }
.devise { margin-top: 22px; font: italic 400 28px/1.15 var(--d); color: var(--laiton); max-width: 22em; }
.lignes { margin-top: 18px; }
.lignes div { display: grid; grid-template-columns: 6.6em 1fr; gap: 0 14px; padding: 11px 0; border-top: 1px solid rgb(255 255 255 / .12); }
.lignes dt { font: 500 15px/1.5 var(--t); color: var(--laiton); padding-top: 1px; }
.lignes dd { font-size: 16px; line-height: 1.45; max-width: 58ch; }
.lignes a { text-underline-offset: 3px; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
.mentions { margin-top: 18px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .12); font-size: 13px; line-height: 1.5; color: var(--b70); }

@media (min-width: 1024px) {
  .tiroir {
    left: auto; width: calc(100vw - 120px); transform: translateX(100%);
    padding: calc(var(--bord) + var(--ph) + 32px) 40px 0 40px;
  }
  .tiroir-corps { margin: 0 -40px; padding: 0 40px 32px; }
  .tiroir .fermer { right: 24px; top: calc(var(--bord) + var(--ph) + 26px); }
  .bande { margin: 0 -40px; }
  .devise { font-size: 32px; }
  .lignes dd { font-size: 17px; }
  .lignes div { grid-template-columns: 7.4em 1fr; }
}
@media (min-width: 1280px) {
  .tiroir { width: min(860px, 100vw - 596px); }
}
@media (prefers-reduced-motion: reduce) { .tiroir { transition: none; } }