/* Page d'attente publique, le temps de choisir le design. */

.attente {
  display: grid; grid-template-rows: 1fr auto;
  min-height: 100vh; min-height: 100dvh;
  font-family: "Montserrat", system-ui, sans-serif;
  color: #fff; background: #111;
  text-align: center;
}
.attente main {
  display: grid; justify-items: center; align-content: center; gap: 18px;
  padding: clamp(32px, 6vw, 80px) clamp(16px, 5vw, 64px);
}
.attente__logo { width: clamp(180px, 30vw, 300px); margin-bottom: 10px; }
.attente__sur { font-size: 12px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: #a9a59e; }
.attente h1 {
  max-width: 16ch;
  font-size: clamp(32px, 6vw, 72px); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em;
  text-wrap: balance;
}
.attente__texte { max-width: 52ch; font-size: clamp(16px, 1.6vw, 19px); color: #d6d3cd; }
.attente__texte strong { color: #fff; font-weight: 600; }
.attente__devise { max-width: 46ch; font-size: 14px; font-style: italic; color: #a9a59e; }

/* Six colonnes qui montent : la boutique se construit. */
.attente__colonnes { display: flex; align-items: flex-end; gap: 9px; height: 64px; margin-top: 18px; }
.attente__colonnes i { width: 9px; height: 100%; background: #fff; transform-origin: bottom; animation: attente-monte 3.6s ease-in-out infinite; }
.attente__colonnes i:nth-child(2) { animation-delay: 0.15s; }
.attente__colonnes i:nth-child(3) { animation-delay: 0.3s; }
.attente__colonnes i:nth-child(4) { animation-delay: 0.45s; }
.attente__colonnes i:nth-child(5) { animation-delay: 0.6s; }
.attente__colonnes i:nth-child(6) { animation-delay: 0.75s; }
@keyframes attente-monte {
  0%, 100% { transform: scaleY(0.25); }
  45%, 70% { transform: scaleY(1); }
}

.attente footer { padding: 22px 16px; font-size: 13px; color: #a9a59e; border-top: 1px solid #2a2a2a; }
.attente footer a { color: #fff; text-underline-offset: 4px; }