/* La semaine : un almanach éphéméride de 7 feuillets. Du lundi au samedi on chine ; le dimanche reçoit son coup de tampon
   (enchères en ligne, ou Rwina w l-Belbala le 2e dimanche). Deux billets donnent les prochaines dates avec un compte à rebours. */
.almanach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; perspective: 900px; }
.feuille { position: relative; background: var(--carte); box-shadow: 0 1px 0 var(--ligne), 0 10px 18px -12px rgba(43, 35, 28, .45);
  padding: 30px 12px 16px; display: grid; align-content: start; gap: 4px; min-height: 236px; transform-origin: 50% 0;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; transition-delay: calc(var(--i) * 80ms); }
.feuille::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: var(--canard-f); }                 /* la reliure */
.feuille::after { content: ""; position: absolute; left: 50%; top: 5px; width: 34px; height: 8px; margin-left: -17px; border-radius: 4px;
  background: var(--papier); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.f-date { display: grid; }
.f-jour { font-family: var(--etiquette); font-weight: 600; font-size: 16px; letter-spacing: .05em; text-transform: uppercase; color: var(--doux); }
.f-num { font-family: var(--titre); font-size: clamp(38px, 4vw, 54px); line-height: 1; color: var(--encre); }
.f-mois { font-family: var(--etiquette); font-size: 14px; color: var(--doux); margin-bottom: 8px; min-height: 1em; }
.f-quoi { font-family: var(--titre); font-size: 18px; line-height: 1.15; color: var(--canard); }
.f-detail { font-size: 15px; line-height: 1.35; color: var(--doux); }
.feuille.dimanche { background: var(--moutarde-c); }
.feuille.dimanche::before { background: var(--brique-f); }
.feuille.dimanche .f-num, .feuille.dimanche .f-quoi { color: var(--brique); }
.feuille .tampon { justify-self: center; margin-top: 10px; font-size: 19px; }
.feuille.aujourdhui { transform: translateY(-8px); box-shadow: 0 0 0 2px var(--encre), 0 16px 22px -12px rgba(43, 35, 28, .5); }
.feuille .epingle { display: none; }
.feuille.aujourdhui .epingle { display: block; position: absolute; left: 12px; bottom: 14px; font-family: var(--etiquette); font-size: 12px;
  font-weight: 600; letter-spacing: .05em; background: var(--encre); color: var(--carte); padding: 2px 7px; transform: rotate(4deg); }
.js .semaine:not(.vu) .feuille { opacity: 0; transform: rotateX(-75deg); }
.semaine.vu .feuille.dimanche .tampon { animation: coup-tampon .5s cubic-bezier(.3, 1.6, .5, 1) 1s both; }
@keyframes coup-tampon { from { opacity: 0; transform: rotate(-12deg) scale(1.9); } }

.billets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: clamp(28px, 4vw, 44px); }
.billet { position: relative; background: var(--carte); padding: 20px 24px 20px 30px; border-left: 2px dashed var(--doux);
  box-shadow: inset 0 0 0 1px var(--ligne); }
.billet::before, .billet::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--papier); }
.billet::before { top: -10px; } .billet::after { bottom: -10px; }
.billet h3 { font-size: 21px; color: var(--canard); }
.billet.rwina h3 { color: var(--brique); }
.billet p { margin: 8px 0 12px; }
.billet .quand { display: block; font-family: var(--titre); font-size: clamp(22px, 2.4vw, 28px); color: var(--encre); margin: 6px 0 2px;
  min-height: 1.2em; }
.billet .quand::first-letter { text-transform: uppercase; }
.billet .note { margin: 0; }
.semaine-regle { margin-top: 22px; color: var(--doux); }

@media (max-width: 1000px) {
  .almanach { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feuille.dimanche { grid-column: span 2; }
}
@media (max-width: 640px) {
  .almanach { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .feuille { min-height: 0; grid-template-columns: 76px 1fr; column-gap: 14px; padding: 12px 14px 12px 26px; align-items: center; }
  .feuille::before { inset: 0 auto 0 0; width: 12px; height: auto; }
  .feuille::after { display: none; }
  .feuille.dimanche { grid-column: auto; }
  .feuille > * { grid-column: 2; }
  .feuille > .f-date { grid-column: 1; grid-row: 1 / span 4; justify-items: start; }
  .f-num { font-size: 34px; }
  .f-mois { margin: 0; }
  .feuille .tampon { justify-self: start; font-size: 16px; margin: 6px 0 4px 6px; }
  .feuille.aujourdhui { transform: translateX(6px); }
  .feuille.aujourdhui .epingle { left: auto; bottom: auto; right: 10px; top: 10px; }
  .js .semaine:not(.vu) .feuille { transform: translateX(-24px); }
  .billets { grid-template-columns: minmax(0, 1fr); }
}