/* Home · the nursery wall (see wall.js). Photos touch edge to edge: same wall, same floor, one long shelf. */
.wall { --g: clamp(20px, 3.4vw, 48px); --th: min(50vh, 470px); --tw: calc(var(--th) * .8); position: relative; z-index: 3; background: var(--chaux); }
.wall__stage { display: flex; flex-direction: column; gap: clamp(16px, 2.6vh, 28px); padding-block: clamp(72px, 11vh, 130px) clamp(40px, 7vh, 80px); overflow: hidden; }
.wall__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 48px; padding-inline: var(--g); }
.wall__sub { margin: 0; max-inline-size: 30em; font: 400 17px/1.5 var(--font-text); color: color-mix(in oklab, var(--encre) 76%, var(--chaux)); }
.wall__sub .more { margin-inline-start: 6px; white-space: nowrap; }

/* aisle tabs: the current aisle follows the wall */
.wall__aisles { display: flex; gap: 26px; padding-inline: var(--g); overflow-x: auto; scrollbar-width: none; }
.wall__aisles::-webkit-scrollbar { display: none; }
.wall__aisles button { all: unset; flex: none; cursor: pointer; padding-block: 6px; font: 400 clamp(19px, 1.6vw, 24px)/1 var(--font-serif); letter-spacing: -.01em; color: rgba(18,20,18,.42); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .35s ease, background-size .5s cubic-bezier(.16,1,.3,1); }
[dir="rtl"] .wall__aisles button { background-position: 100% 100%; }
.wall__aisles button:hover { color: var(--encre); }
.wall__aisles button[aria-current="true"] { color: var(--encre); background-size: 100% 1px; }
.wall__aisles button:focus-visible { outline: 2px solid var(--zellige); outline-offset: 4px; border-radius: 2px; }

/* the wall: a row that moves sideways (tabs, arrows, swipe); the page itself scrolls normally */
.wall__view { overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--g); overscroll-behavior-x: contain; }
.wall__view::-webkit-scrollbar { display: none; }
.wall__track { display: flex; inline-size: max-content; margin: 0; padding: 0 var(--g); list-style: none; will-change: transform; }
.tile { position: relative; flex: none; inline-size: var(--tw); display: grid; grid-template-rows: 30px var(--th) auto; }
.tile__aisle { display: flex; align-items: flex-start; }
.tile__aisle a { display: inline-flex; align-items: baseline; gap: 6px; color: var(--encre); text-decoration: none; font: 500 13px/1 var(--font-text); }
.tile__aisle small { font-size: 12px; opacity: .5; }
.tile__aisle a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tile__pic { position: relative; display: block; overflow: hidden; background: #dcdad3; }
.tile--first .tile__pic::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 2; inline-size: 2px; background: var(--chaux); }   /* the aisle break */
.tile:first-child .tile__pic { border-start-start-radius: 14px; border-end-start-radius: 14px; }
.tile:first-child .tile__pic::before { display: none; }
.tile:nth-last-child(2) .tile__pic { border-start-end-radius: 14px; border-end-end-radius: 14px; }
.tile__pic img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: opacity .55s ease, transform 1.1s cubic-bezier(.16,1,.3,1); }
.tile__b { opacity: 0; }
.tile__info { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 14px 0; }
.tile__name { color: var(--encre); text-decoration: none; font: 400 20px/1.15 var(--font-serif); letter-spacing: -.01em; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s cubic-bezier(.16,1,.3,1); }
.tile__price { flex: none; font: 500 14px/1 var(--font-text); } .tile__price span { opacity: .6; font-weight: 400; }
.tile__add { position: absolute; inset-block-start: calc(30px + var(--th) - 56px); inset-inline-end: 14px; display: grid; place-items: center; inline-size: 42px; block-size: 42px; padding: 0; border: 0; border-radius: 50%; background: #f6f6f2; color: var(--encre); cursor: pointer; box-shadow: 0 8px 20px -10px rgba(10,14,12,.45); opacity: 0; translate: 0 8px; transition: opacity .3s ease, translate .45s cubic-bezier(.16,1,.3,1), background-color .25s, color .25s; }
.tile__add svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.tile__add:hover, .tile__add.is-added { background: var(--zellige); color: #f6f6f2; }
.tile__add:focus-visible { opacity: 1; translate: 0 0; outline: 2px solid var(--zellige); outline-offset: 2px; }
@media (hover: hover) {
  .tile:hover .tile__b { opacity: 1; } .tile:hover .tile__a { transform: scale(1.03); }
  .tile:has(.tile__b):hover .tile__a { opacity: 0; }
  .tile:hover .tile__name { background-size: 100% 1px; }
  .tile:hover .tile__add { opacity: 1; translate: 0 0; }
}
@media (hover: none) { .tile__add { opacity: 1; translate: 0 0; } }

/* last tile: the way into the whole shop */
.tile--end { inline-size: calc(var(--tw) * .9); margin-inline-start: 16px; }
.tile__all { display: grid; align-content: space-between; padding: 26px; border-radius: 14px; background: var(--zellige); color: #f6f6f2; text-decoration: none; transition: background-color .3s; }
.tile__all b { font: 400 clamp(34px, 3vw, 48px)/1 var(--font-serif); letter-spacing: -.02em; font-weight: 400; }
.tile__all span { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1.2 var(--font-text); }
.tile__all svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate .4s cubic-bezier(.16,1,.3,1); }
[dir="rtl"] .tile__all svg { scale: -1 1; }
.tile__all:hover { background: #0a3a2d; } .tile__all:hover svg { translate: 4px 0; } [dir="rtl"] .tile__all:hover svg { translate: -4px 0; }

/* progress line */
.wall__bar { margin-inline: var(--g); block-size: 2px; background: rgba(18,20,18,.1); overflow: hidden; }
.wall__bar i { display: block; block-size: 100%; background: var(--encre); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .wall__bar i { transform-origin: right; }

/* arrival: the wall slides in from its end, tiles settle one after another */
@media (prefers-reduced-motion: no-preference) {
  .wall .tile { opacity: 0; translate: 40px 0; transition: opacity .8s ease, translate 1.1s cubic-bezier(.16,1,.3,1); transition-delay: calc(min(var(--i, 0), 6) * 70ms); }
  [dir="rtl"] .wall .tile { translate: -40px 0; }
  .wall.is-in .tile { opacity: 1; translate: 0 0; }
}

/* phones (and reduced motion): a swipeable row */
@media (max-width: 900px), (max-height: 639px) {
  .wall { --th: min(64vw, 340px); }
  .wall__view { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--g); }
  .wall__view::-webkit-scrollbar { display: none; }
  .tile { scroll-snap-align: start; }
  .tile__name { font-size: 17px; }
  .tile__info { flex-direction: column; gap: 6px; padding: 10px 10px 0; }
  .wall__aisles { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) { .wall__view { overflow-x: auto; } }

/* tabs on the left, arrows on the right */
.wall__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline-end: var(--g); }
.wall__row .wall__aisles { flex: 1; min-inline-size: 0; }
.wall__arrows { display: flex; gap: 8px; flex: none; }
.wall__arrows button { display: grid; place-items: center; inline-size: 46px; block-size: 46px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--encre); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(18,20,18,.22); transition: background-color .25s, color .25s, box-shadow .25s, opacity .25s; }
.wall__arrows button:hover:not(:disabled) { background: var(--encre); color: #f6f6f2; box-shadow: none; }
.wall__arrows button:disabled { opacity: .3; cursor: default; }
.wall__arrows button:focus-visible { outline: 2px solid var(--zellige); outline-offset: 3px; }
.wall__arrows svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wall__arrows [data-prev] svg { scale: -1 1; }
[dir="rtl"] .wall__arrows [data-prev] svg { scale: 1 1; } [dir="rtl"] .wall__arrows [data-next] svg { scale: -1 1; }
@media (max-width: 600px) { .wall__arrows { display: none; } }

/* touch: snap photo by photo under the finger (not on desktop, where it would fight the tab and arrow jumps) */
@media (hover: none) { .wall__view { scroll-snap-type: x mandatory; } .tile { scroll-snap-align: start; } }

/* under « Les préférées »: the same section continues, a quieter heading, one divider */
section.s4 { padding-block-end: clamp(48px, 7vh, 80px); }
.wall__stage { padding-block-start: 0; }
.wall__head { margin-inline: var(--g); padding: clamp(32px, 5vh, 52px) 0 0; border-block-start: 1px solid rgba(18,20,18,.12); }
.wall__t { margin: 0; font: 400 clamp(28px, 2.6vw, 40px)/1.1 var(--font-serif); letter-spacing: -.02em; }
.tile__aisle { padding-inline-start: 14px; }

/* details: the tiles speak like the favourite cards above them */
.tile__aisle a { gap: 8px; align-items: baseline; }
.tile__aisle b { font: 600 13px/1 var(--font-text); }
.tile__aisle small { font: 400 13px/1 var(--font-text); opacity: .55; }
.tile__aisle small::before { content: "·"; margin-inline-end: 8px; }
.tile__aisle a:hover { text-decoration: none; } .tile__aisle a:hover small { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.tile__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; row-gap: 6px; padding: 14px 14px 0; }
.tile__name { font-size: 24px; line-height: 1.15; justify-self: start; }
.tile__price { font: 500 16px/1.2 var(--font-text); }
.tile__sub { grid-column: 1 / -1; font: 400 14px/1.3 var(--font-text); opacity: .62; }
/* a hairline track with a slim rounded marker */
.wall__bar { block-size: 3px; background: linear-gradient(rgba(18,20,18,.12), rgba(18,20,18,.12)) 0 50% / 100% 1px no-repeat; overflow: visible; margin-block-start: 6px; }
.wall__bar i { border-radius: 3px; }
@media (max-width: 900px), (max-height: 639px) { .tile__info { grid-template-columns: 1fr; padding: 10px 10px 0; } .tile__name { font-size: 18px; } .tile__price { font-size: 15px; } .tile__sub { grid-column: auto; font-size: 13px; } }

/* slider timer: the current tab's underline fills while the wall waits, then the wall moves on */
.wall__aisles button.is-timing { background-size: 0 1px; animation: wallTimer var(--dur, 4.5s) linear forwards; }
@keyframes wallTimer { to { background-size: 100% 1px; } }
.wall.is-paused .wall__aisles button.is-timing { animation-play-state: paused; }

/* slider, not scroll: no progress line, no per-aisle labels; the row is cut cleanly at the page margin on the side
   it comes from and runs off the other edge (there is more to see) */
.wall__bar { display: none; }
.tile { grid-template-rows: var(--th) auto; }
.tile__aisle { display: none; }
.tile__add { inset-block-start: calc(var(--th) - 56px); }
.wall__view { clip-path: inset(-20px 0 -20px var(--g)); }
[dir="rtl"] .wall__view { clip-path: inset(-20px var(--g) -20px 0); }
.wall__stage { padding-block-end: clamp(56px, 9vh, 100px); }
/* the current aisle's "whole aisle" link sits with the arrows */
.wall__all { flex: none; margin-inline-end: 8px; color: var(--encre); font: 500 15px/1 var(--font-text); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-block: 6px; transition: opacity .2s; }
.wall__all:hover { opacity: .65; }
@media (max-width: 600px) { .wall__row { flex-wrap: wrap; } .wall__all { order: 2; margin-inline-start: var(--g); } .wall__row .wall__aisles { flex-basis: 100%; } }

/* ===== « Ce qui pousse à [ville] »: the city menu (city-menu.js) ===== */
.city[role="button"]:focus-visible { outline: 2px solid var(--zellige); outline-offset: 8px; border-radius: 6px; }
.city.is-open .city__btn svg { rotate: 180deg; } .city .city__btn svg { transition: rotate .35s cubic-bezier(.16,1,.3,1); }
.cm { position: absolute; z-index: 30; inline-size: min(600px, 100%); padding: 22px 24px 18px; box-sizing: border-box; border-radius: 18px; background: #fff; color: var(--encre);
  box-shadow: 0 0 0 1px rgba(18,20,18,.06), 0 30px 70px -28px rgba(10,14,12,.38); opacity: 0; transform: translateY(-8px); transform-origin: top left;
  transition: opacity .25s ease, transform .45s cubic-bezier(.16,1,.3,1); font: 400 15px/1.3 var(--font-text); letter-spacing: 0; }
.cm.is-on { opacity: 1; transform: none; }
.cm__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; outline: none; }
.cm__zone { margin: 0 0 6px; padding-block-end: 8px; border-block-end: 1px solid rgba(18,20,18,.1); font: 500 12.5px/1 var(--font-text); opacity: .55; }
.cm__opt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-inline: -10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.cm__name { font: 400 22px/1.15 var(--font-serif); letter-spacing: -.01em; }
.cm__day { flex: none; font: 400 12.5px/1 var(--font-text); opacity: .5; }
.cm__opt.is-active { background: var(--menthe); }
.cm__opt.is-active .cm__day { opacity: .75; }
.cm__opt[aria-selected="true"] .cm__name { color: var(--zellige); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cm__foot { margin: 16px 0 0; padding-block-start: 12px; border-block-start: 1px solid rgba(18,20,18,.08); font-size: 13px; opacity: .6; }
:lang(ar) .cm__name { font-size: 19px; }
@media (prefers-reduced-motion: reduce) { .cm { transition: none; } }