/* La page de connexion : un grenier la nuit, une lampe, des étiquettes de prix qui se balancent au bout de leur
   ficelle, de la poussière dans la lumière. Le formulaire est posé sur une grande étiquette. Rien n'explique ce que
   fait le site (demande d'Anthony du 01/11/2026). Mobile d'abord ; tout s'arrête si l'appareil demande moins de
   mouvement (base.css). */

.accueil {
  background: var(--nuit) var(--grain);
  color: var(--papier);
  overflow-x: hidden;
}

/* La scène, derrière tout. */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scene-lueur {
  position: absolute;
  inset: -10% -20% auto;
  height: 95%;
  background: radial-gradient(42% 60% at 50% 22%, rgb(244 199 123 / .28), rgb(244 199 123 / .08) 45%, transparent 72%);
  animation: lueur 7s ease-in-out infinite;
}
.scene-dessin { position: absolute; inset: 0; width: 100%; height: 100%; }

.poutre { filter: drop-shadow(0 6px 8px rgb(0 0 0 / .45)); }
.poutre-bois { fill: #3a2d22; }
.poutre-veine { fill: none; stroke: #4d3b2c; stroke-width: 2; }

.ficelle { stroke: #b9a27f; stroke-width: 1.6; }
.ficelle-lampe { stroke: #6f5a43; stroke-width: 2.4; }
.etiquette { transform-box: fill-box; transform-origin: 50% 0; }
.etiquette-carton { fill: #e9d9bd; stroke: #c8b08a; stroke-width: 1.2; }
.etiquette-trou { fill: var(--nuit); stroke: #b48329; stroke-width: 2; }
.etiquette-prix { font-family: var(--titre); font-weight: 800; font-size: 26px; fill: var(--brique); text-anchor: middle; }
.etiquette-1 { animation: balance 6.5s ease-in-out infinite; }
.etiquette-2 { animation: balance 5.2s ease-in-out -1.4s infinite; }
.etiquette-3 { animation: balance 7.4s ease-in-out -3s infinite; }
.etiquette-4 { animation: balance 5.8s ease-in-out -.6s infinite; }
.etiquette-5 { animation: balance 4.9s ease-in-out -2.2s infinite; }
.etiquette-6 { animation: balance 6.1s ease-in-out -.9s infinite; }
.etiquette-prix-petit { font-size: 18px; }

.lampe { transform-box: fill-box; transform-origin: 50% 0; animation: balance-doux 9s ease-in-out infinite; }
.lampe-abat { fill: #2d241c; stroke: var(--ocre); stroke-width: 2; }
.lampe-ampoule { fill: var(--lueur); filter: drop-shadow(0 0 14px rgb(244 199 123 / .9)); }

.etagere { opacity: .38; }
.etagere-planche { fill: #3a2d22; }
.objet-trait { fill: none; stroke: #d8c3a2; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.objet { animation: apparait 1.6s var(--souple) both; }
.objet-horloge { animation-delay: 0s; }
.objet-vase { animation-delay: .25s; }
.objet-radio { animation-delay: .5s; }
.objet-chaise { animation-delay: .75s; }

/* La poussière dans la lumière : douze grains, chacun son chemin. */
.poussiere { position: absolute; inset: 0; }
.grain-poussiere {
  position: absolute;
  bottom: -2%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgb(244 199 123 / .7);
  animation: flotte 16s linear infinite;
}
.grain-poussiere:nth-child(1) { left: 38%; animation-duration: 15s; }
.grain-poussiere:nth-child(2) { left: 46%; animation-duration: 19s; animation-delay: -4s; width: 2px; height: 2px; }
.grain-poussiere:nth-child(3) { left: 52%; animation-duration: 13s; animation-delay: -9s; }
.grain-poussiere:nth-child(4) { left: 57%; animation-duration: 21s; animation-delay: -2s; width: 4px; height: 4px; opacity: .6; }
.grain-poussiere:nth-child(5) { left: 43%; animation-duration: 17s; animation-delay: -12s; }
.grain-poussiere:nth-child(6) { left: 61%; animation-duration: 14s; animation-delay: -6s; width: 2px; height: 2px; }
.grain-poussiere:nth-child(7) { left: 49%; animation-duration: 23s; animation-delay: -15s; }
.grain-poussiere:nth-child(8) { left: 35%; animation-duration: 18s; animation-delay: -1s; width: 2px; height: 2px; }
.grain-poussiere:nth-child(9) { left: 64%; animation-duration: 20s; animation-delay: -10s; }
.grain-poussiere:nth-child(10) { left: 54%; animation-duration: 16s; animation-delay: -7s; width: 4px; height: 4px; opacity: .5; }
.grain-poussiere:nth-child(11) { left: 41%; animation-duration: 22s; animation-delay: -18s; }
.grain-poussiere:nth-child(12) { left: 59%; animation-duration: 12s; animation-delay: -3s; width: 2px; height: 2px; }

/* Le contenu, devant la scène. */
.accueil-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 1.6rem;
  padding: 7.5rem 16px 2rem;
}
.accueil-entete { text-align: center; animation: monte .9s var(--souple) both; }
.accueil-nom {
  margin: 0;
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(3rem, 15vw, 6.5rem);
  line-height: .9;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--papier);
  text-shadow: 0 0 34px rgb(244 199 123 / .25);
}
.accueil-phrase { margin: .7rem 0 0; color: #cdbba1; font-size: 1.05rem; letter-spacing: .02em; }

/* La grande étiquette : un coin coupé, un œillet cerclé de laiton. */
.ticket {
  position: relative;
  width: min(100%, 23rem);
  padding: 2.2rem 1.4rem 1.5rem;
  background: #f0e3cc var(--grain);
  color: var(--encre);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / .9);
  transform-origin: 50% 0;
  animation: pend 1.1s var(--souple) .15s both;
}
.ticket-oeillet {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--nuit);
  box-shadow: 0 0 0 3px var(--ocre), inset 0 1px 2px rgb(0 0 0 / .6);
}
.ticket-titre { margin: .4rem 0 .1rem; font-size: 1.7rem; text-transform: uppercase; letter-spacing: .06em; }
.ticket-aide { margin: 0 0 1.1rem; color: var(--encre-douce); font-size: .9rem; }
.ticket-erreur, .ticket-message { margin: 0 0 .9rem; font-size: .92rem; }
.ticket-message { color: var(--encre-douce); }
.ticket .champ-nom { color: #5b5047; }
.ticket input { background: #fffaf1; border-color: #d6c5a8; }
.ticket-bouton { width: 100%; margin-top: .2rem; }

.accueil-pied { color: #8d7c67; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

@keyframes balance { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes balance-doux { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes lueur { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes apparait { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes flotte {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate(24px, -55vh); }
  90% { opacity: .6; }
  100% { transform: translate(-16px, -105vh); opacity: 0; }
}
@keyframes pend {
  0% { opacity: 0; transform: translateY(-30px) rotate(-6deg); }
  60% { opacity: 1; transform: translateY(0) rotate(2deg); }
  100% { transform: rotate(0); }
}

@media (min-width: 48rem) {
  .etiquette-telephone { display: none; }
  .accueil-page { padding-top: 8.5rem; gap: 2.2rem; }
  .ticket { padding: 2.5rem 2rem 1.8rem; }
  .etagere { opacity: .5; }
}