/* Héros de l'accueil : l'enseigne Roubla (logo complet) et, en bas, l'étal du dimanche : une nappe kilim où les objets se posent,
   chacun avec son étiquette ROUBLA qui se balance. */
.heros { padding-top: clamp(30px, 5vw, 64px); overflow: clip; position: relative; }
.heros-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.heros h1 { font-size: clamp(33px, 4.4vw, 58px); }
.heros h1 .ville { color: var(--brique); }
.heros-slogan { font-family: var(--titre); color: var(--canard); font-size: clamp(20px, 2.1vw, 27px); line-height: 1.25; margin: 20px 0 4px; }
.heros-ar { font-size: clamp(27px, 3vw, 38px); color: var(--brique); line-height: 1.6; margin: 0 0 12px; text-align: left; }
.heros-chapeau { color: var(--doux); font-size: clamp(18px, 1.5vw, 20px); max-width: 52ch; }
.heros .boutons { margin-top: 22px; }
.heros .note { margin-top: 14px; display: flex; gap: 8px; align-items: baseline; }
.heros .note::before { content: "✎"; font-style: normal; color: var(--brique); }
.heros-enseigne { position: relative; justify-self: center; width: min(100%, 480px); }
.heros-enseigne img { width: 100%; mix-blend-mode: multiply; animation: ens-pose .9s cubic-bezier(.2, .7, .2, 1) var(--d0, .1s) both; }
.avec-ouverture .heros { --d0: 1.45s; }

/* L'étal : la nappe et les objets posés dessus */
.etal { position: relative; margin-top: clamp(18px, 3vw, 34px); }
.etal-objets { list-style: none; margin: 0 auto; padding: 0 var(--gouttiere); max-width: var(--large); display: flex; justify-content: space-between;
  align-items: flex-end; gap: 6px; position: relative; z-index: 2; }
.etal-objets li { position: relative; flex: 0 1 auto; animation: objet-pose .75s cubic-bezier(.3, 1.35, .5, 1) both;
  animation-delay: calc(var(--d0, .1s) + .35s + var(--i) * 90ms); }
.etal-objets img { height: clamp(84px, 10vw, 136px); width: auto; max-width: none; filter: drop-shadow(0 7px 5px rgba(43, 35, 28, .2)); }
.etal-objets .etiq { position: absolute; left: 62%; top: 34%; font-family: var(--etiquette); font-weight: 600; font-size: 11px; letter-spacing: .06em;
  color: var(--encre); background: var(--moutarde-c); padding: 2px 6px 2px 12px; box-shadow: inset 0 0 0 1px var(--laiton);
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%); transform-origin: 0 50%; animation: etiq-balance 3.6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -.7s); }
.etal-objets .etiq::before { content: ""; position: absolute; left: 4px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: var(--encre); }
.etal-nappe { position: relative; height: clamp(46px, 6vw, 70px); margin-top: -12px; border-top: 4px solid var(--bois);
  background:
    linear-gradient(to bottom, transparent 0 8px, rgba(43, 35, 28, .18) 8px 10px, transparent 10px calc(100% - 12px), rgba(43, 35, 28, .2) calc(100% - 12px) calc(100% - 10px), transparent 0),
    conic-gradient(from 45deg at 50% 50%, var(--brique) 0 25%, transparent 0 50%, var(--brique) 0 75%, transparent 0) 0 50% / 26px 26px,
    repeating-linear-gradient(90deg, var(--moutarde-c) 0 13px, #e7d6b3 13px 26px);
  opacity: .9; }
.etal-nappe::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px;                     /* les franges */
  background: repeating-linear-gradient(90deg, var(--brique) 0 2px, transparent 2px 6px); opacity: .55; }
.hors-ecran .etal-objets .etiq { animation-play-state: paused; }

@keyframes ens-pose { from { opacity: 0; transform: translateY(16px) rotate(-1.5deg) scale(.97); } }
@keyframes objet-pose { from { opacity: 0; transform: translateY(-46px); } }
@keyframes etiq-balance { from { transform: rotate(-9deg); } to { transform: rotate(11deg); } }

@media (max-width: 900px) {
  .heros-in { grid-template-columns: minmax(0, 1fr); }
  .heros-enseigne { grid-row: 1; width: min(62%, 320px); }
  .etal-objets li:nth-child(n+6) { display: none; }
}
@media (max-width: 520px) {
  .heros { padding-top: 18px; }
  .etal-objets li:nth-child(n+5) { display: none; }
  .etal-objets img { height: 72px; }
  .etal-objets .etiq { font-size: 9px; }
}