/* Les kiosques : une rangée d'échoppes. Chaque échoppe a son auvent rayé qui se déroule, son panneau peint et une règle vraie. */
.rangee { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 14px;
  border-bottom: 6px solid var(--bois); padding-bottom: 0; }
.echoppe { display: grid; grid-template-rows: auto 1fr; }
.auvent { height: 46px; position: relative; transform-origin: 50% 0; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); transition-delay: calc(var(--i) * 120ms);
  background: repeating-linear-gradient(90deg, var(--canard) 0 22px, var(--moutarde-c) 22px 44px); box-shadow: inset 0 6px 0 rgba(0, 0, 0, .12); }
.echoppe:nth-child(even) .auvent { background: repeating-linear-gradient(90deg, var(--brique) 0 22px, var(--moutarde-c) 22px 44px); }
.auvent::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 12px;                                        /* les festons */
  background: radial-gradient(circle at 11px 0, var(--canard) 10px, transparent 10.5px) 0 0 / 44px 12px,
              radial-gradient(circle at 33px 0, var(--moutarde-c) 10px, transparent 10.5px) 0 0 / 44px 12px; }
.echoppe:nth-child(even) .auvent::after { background: radial-gradient(circle at 11px 0, var(--brique) 10px, transparent 10.5px) 0 0 / 44px 12px,
  radial-gradient(circle at 33px 0, var(--moutarde-c) 10px, transparent 10.5px) 0 0 / 44px 12px; }
.js .kiosques:not(.vu) .auvent { transform: scaleY(0); }
.comptoir { background: var(--carte); margin: 0 6px; padding: 26px 16px 20px; box-shadow: inset 0 0 0 1px var(--ligne); display: grid; align-content: start; gap: 8px; }
.panneau { justify-self: center; text-align: center; background: var(--encre); color: var(--moutarde-c); font-family: var(--titre); font-size: 19px;
  line-height: 1.1; padding: 8px 12px 9px; box-shadow: 0 0 0 2px var(--carte), 0 0 0 3px var(--encre); margin-bottom: 6px; }
.comptoir p { margin: 0; font-size: 16px; line-height: 1.45; }
.comptoir .chiffre { font-family: var(--titre); font-size: 34px; color: var(--brique); text-align: center; line-height: 1; }
.parrainage { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: auto 1fr; gap: 18px 26px; align-items: center;
  background: var(--canard-c); padding: 20px 24px; box-shadow: inset 0 0 0 1px rgba(61, 90, 92, .35); }
.parrainage .tampon { font-size: 22px; transform: rotate(-6deg); border-color: var(--canard); outline-color: var(--canard); color: var(--canard); }
.parrainage p { margin: 0; }
.parrainage small { color: var(--doux); }
@media (max-width: 960px) { .rangee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; border-bottom: 0; }
  .echoppe { border-bottom: 6px solid var(--bois); } }
@media (max-width: 560px) { .rangee { grid-template-columns: minmax(0, 1fr); } .parrainage { grid-template-columns: minmax(0, 1fr); } }