/* =====================================================================
   /produits, design rules v3 (docs/DESIGN.md, 2026-10-26). The search as a
   sentence under the title, then one catalogue row per product with the
   patch on the right (no card frame: the patch marks the engaged product).
   Shared parts (hero, buttons, patch, inline fields, lists, the hundred
   dots, the end) come from redesign.css and home.css.
   ===================================================================== */

.pr-box { margin-top: 40px; }
.pr-q { max-width: 760px; margin: 0 auto; text-wrap: balance; }
.pr-q .inl input { max-width: 100%; }
.pr-q .inl { white-space: nowrap; }
.pr-city input::placeholder { color: var(--pink); opacity: 1; }

/* the product field completes inline: the rest of the best name in grey after the caret; Tab or a tap takes it */
.pr-ghost { position: absolute; left: 0; top: 0; white-space: pre; color: var(--unread); pointer-events: none; opacity: 0; transform: translateX(-4px);
  transition: opacity .2s var(--ease), transform .25s var(--ease); }
.pr-ghost.on { opacity: 1; transform: none; pointer-events: auto; cursor: pointer; }

/* « en ligne », « en boutique »: one list with two custom boxes (navy when ticked, the tick draws); the sentence follows */
.picklist.multi [role="option"] { display: flex; align-items: center; gap: 12px; padding-left: 14px; }
.picklist.multi [role="option"]::before { display: none; }
.picklist.multi [aria-selected="true"] .tbox { background: var(--ink); border-color: var(--ink); transform: scale(1.06); }
.picklist.multi [aria-selected="true"] .tbox path { stroke-dashoffset: 0; }
.pr-where, .pr-p { transition: opacity .22s var(--ease); }
.pr-where.gone, .pr-p.gone { opacity: 0; }

/* the lists also leave softly */
.picklist.closing { opacity: 0; transform: translateY(4px) scale(.99); transition: opacity .16s var(--ease), transform .16s var(--ease); pointer-events: none; }
.pr-count { margin: 16px 0 0; font-size: 14px; color: var(--mute); }
.pr-empty { margin: 0 auto; max-width: 44ch; color: var(--mute); }

/* the cards: a product is a real object, so a small white card (never a strip); the name stretches over the card so the
   whole card is the link. Same top lines in a row: the picture has one ratio, the name keeps two lines, the company one. */
.pr-list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 40px auto 0; text-align: left; }
.pr-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(20,46,98,.05), 0 10px 24px -18px rgba(20,46,98,.4); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.pr-pic { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; }
.pr-pic img, .pr-pic svg { transition: transform .5s var(--ease); }
.pr-pic img { width: 100%; height: 100%; object-fit: cover; }
.pr-pic svg { width: 34px; height: 34px; fill: none; stroke: var(--ink); opacity: .45; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pr-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px 16px; }
:where(body.v3 main) .pr-name { font: 600 16px/1.3 var(--body); color: var(--ink); text-decoration: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.6em; }
.pr-name::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.pr-by, .pr-av { font-size: 13.5px; line-height: 1.45; color: var(--mute); }
.pr-by { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(body.v3 main) .pr-by a { position: relative; z-index: 1; color: var(--mute); text-decoration-color: var(--line); }
:where(body.v3 main) .pr-by a:hover { color: var(--ink); text-decoration-color: currentColor; }
.pr-promo { color: var(--pink); font-weight: 600; white-space: nowrap; }
/* fewer products than a row (computer): the cards keep their size and sit in the middle */
@media (min-width: 1001px) { .pr-list:not(:has(> .pr-card:nth-of-type(4))) { grid-template-columns: repeat(auto-fit, calc((100% - 72px) / 4)); justify-content: center; } }

/* hover (a mouse only): the card lifts 2px with a soft shadow, the picture zooms a little; no tilt */
@media (hover: hover) {
  .pr-card:has(a.pr-name:hover) { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(20,46,98,.05), 0 18px 32px -18px rgba(20,46,98,.45); }
  .pr-card:has(a.pr-name:hover) .pr-pic img, .pr-card:has(a.pr-name:hover) .pr-pic svg { transform: scale(1.04); }
}
:where(body.v3 main) .pr-name:focus-visible { outline: 0; }
.pr-card:has(.pr-name:focus-visible) { outline: 3px solid var(--sky-700); outline-offset: 3px; }

/* site.js adds these under the list: the « Afficher plus » button and the no-match line */
.pr-box .grid-more { display: flex; margin: 28px auto 0; }
.pr-box .grid-more[hidden] { display: none; }
.pr-box .grid-empty { grid-column: 1 / -1; padding: 28px 14px; color: var(--mute); text-align: center; }

@media (max-width: 1000px) { .pr-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .pr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* phone: two small cards a row, still readable at 360 */
@media (max-width: 760px) {
  .pr-box { margin-top: 28px; }
  .pr-list { gap: 12px; margin-top: 28px; }
  .pr-txt { padding: 10px 12px 12px; gap: 2px; }
  :where(body.v3 main) .pr-name { font-size: 15px; }
  .pr-by, .pr-av { font-size: 12.5px; }
  .pr-pic svg { width: 26px; height: 26px; }
}