/* =====================================================================
   Catalog ("Nos créations") — atelier design: gallery of custom work
   that turns into WhatsApp orders. Builds on atelier_base.css.
   ===================================================================== */

.az-cat { padding: clamp(2rem, 5vw, 3.5rem) 0 0; }

/* ── Header ───────────────────────────────────────────────────────── */
.az-cat__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.5rem 3rem; margin-bottom: 2rem; }
.az-cat__title { font-family: var(--az-serif); font-weight: 500; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: .95; letter-spacing: -.02em; margin: 0 0 1rem; }
.az-cat__title em { font-style: italic; color: var(--az-cocoa); }
html[lang="ar"] .az-cat__title { font-weight: 800; letter-spacing: 0; line-height: 1.25; }
html[lang="ar"] .az-cat__title em { font-style: normal; }
.az-cat__lead { max-width: 560px; margin: 0; color: var(--az-ink-soft); font-size: 1.05rem; line-height: 1.7; }
.az-cat__cta { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.az-cat__cta-note { font-size: .85rem; color: var(--az-ink-soft); }
@media (max-width: 767.98px) {
  .az-cat__head { grid-template-columns: 1fr; }
  .az-cat__cta { align-items: stretch; }
  .az-cat__cta-note { text-align: center; }
}

/* ── How it works ─────────────────────────────────────────────────── */
.az-cat__steps { list-style: none; padding: 0; margin: 0 0 2.25rem; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--az-line); border-radius: var(--az-radius); background: #fff; }
.az-cat__steps li { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.25rem; font-size: .88rem; color: var(--az-ink-soft); line-height: 1.45; }
.az-cat__steps li + li { border-inline-start: 1px solid var(--az-line); }
.az-cat__steps strong { display: block; color: var(--az-ink); font-size: .95rem; margin-bottom: .1rem; }
.az-cat__steps span { flex: none; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--az-paper-2); color: var(--az-cocoa); font-family: var(--az-serif); font-weight: 600; font-size: 1.1rem; }
@media (max-width: 767.98px) {
  .az-cat__steps { grid-template-columns: 1fr; }
  .az-cat__steps li + li { border-inline-start: 0; border-top: 1px solid var(--az-line); }
  .az-cat__steps li { padding: .85rem 1rem; }
}

/* ── Filter bar (sticks under the navbar) ─────────────────────────── */
.az-cat__bar { position: sticky; top: 64px; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .75rem 0; margin: 0 0 .5rem; background: color-mix(in srgb, var(--az-paper) 94%, transparent); backdrop-filter: blur(8px); }
@media (min-width: 992px) { .az-cat__bar { top: 80px; } }
.az-cat__chips { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 2px; }
.az-cat__chips::-webkit-scrollbar { display: none; }
.az-cat__chips .az-chip { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.az-cat__chips .az-chip small { font-size: .72rem; opacity: .6; font-weight: 700; }
.az-cat__chips .az-chip .az-star { color: var(--az-gold); }
.az-cat__search { flex: 0 0 260px; display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; border: 1px solid var(--az-line); border-radius: 999px; background: #fff; margin: 0; }
.az-cat__search i { color: var(--az-ink-soft); font-size: .9rem; }
.az-cat__search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: .92rem; color: var(--az-ink); }
.az-cat__search:focus-within { border-color: var(--az-cocoa); }
@media (max-width: 767.98px) {
  .az-cat__bar { position: static; flex-direction: column-reverse; align-items: stretch; gap: .6rem; background: none; backdrop-filter: none; }
  .az-cat__search { flex-basis: auto; }
}

.az-cat__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.az-cat__tag { border: 0; background: transparent; padding: .2rem .5rem; border-radius: 6px; font-size: .85rem; font-weight: 600; color: var(--az-ink-soft); cursor: pointer; }
.az-cat__tag:hover, .az-cat__tag.is-active { background: var(--az-paper-2); color: var(--az-cocoa); }

.az-cat__count { display: flex; align-items: center; gap: .3rem; margin: .5rem 0 1.25rem; font-size: .9rem; color: var(--az-ink-soft); }
.az-cat__count .az-link { border: 0; background: none; padding: 0; margin-inline-start: .75rem; }

/* ── Grid ─────────────────────────────────────────────────────────── */
.az-cat__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; grid-auto-flow: dense; }
@media (min-width: 768px) { .az-cat__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 1200px) { .az-cat__grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
@media (min-width: 992px) { .az-cat__item--wide { grid-column: span 2; grid-row: span 2; } }

.az-cat__item { position: relative; margin: 0; border-radius: var(--az-radius); overflow: hidden; background: var(--az-paper-2); aspect-ratio: 4 / 5; isolation: isolate; }
@media (min-width: 992px) { .az-cat__item--wide { aspect-ratio: auto; } }
.az-cat__open { all: unset; position: absolute; inset: 0; cursor: zoom-in; }
.az-cat__open:focus-visible { outline: 3px solid var(--az-gold); outline-offset: -3px; }
.az-cat__open img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--az-ease); }
.az-cat__item:hover .az-cat__open img { transform: scale(1.05); }

.az-cat__flag { position: absolute; top: .75rem; inset-inline-start: .75rem; z-index: 2; display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--az-ink); font-size: .72rem; font-weight: 700; letter-spacing: .04em; pointer-events: none; }
.az-cat__flag .az-star { color: var(--az-gold); }

.az-cat__like { position: absolute; top: .65rem; inset-inline-end: .65rem; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; min-width: 2.4rem; height: 2.4rem; padding: 0 .7rem; justify-content: center; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--az-ink); font-size: .8rem; font-weight: 700; cursor: pointer; transition: transform .2s var(--az-ease); }
.az-cat__like:hover { transform: scale(1.06); }
.az-cat__like.is-liked i { color: #d6455d; }

.az-cat__cap { position: absolute; inset: auto 0 0 0; z-index: 1; display: flex; flex-direction: column; gap: .2rem; padding: 3rem 1rem 1rem; color: #fff; background: linear-gradient(to top, rgba(20, 12, 6, .85), rgba(20, 12, 6, .35) 60%, transparent); pointer-events: none; }
.az-cat__cat { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--az-gold); }
html[lang="ar"] .az-cat__cat { letter-spacing: 0; font-size: .78rem; }
.az-cat__name { font-family: var(--az-serif); font-size: 1.15rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[lang="ar"] .az-cat__name { font-weight: 700; font-size: 1rem; }
.az-cat__item--wide .az-cat__name { font-size: 1.6rem; }
.az-cat__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; pointer-events: auto; }
.az-cat__order, .az-cat__product { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 700; text-decoration: none; line-height: 1; }
.az-cat__order { background: #25d366; color: #fff; }
.az-cat__order:hover { background: #1fb457; color: #fff; }
.az-cat__product { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
.az-cat__product:hover { background: #fff; color: var(--az-ink); }

/* Desktop: actions appear on hover/focus; touch screens always see them */
@media (hover: hover) and (min-width: 768px) {
  .az-cat__actions { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; transition: max-height .35s var(--az-ease), opacity .25s, margin-top .35s; }
  .az-cat__item:hover .az-cat__actions, .az-cat__item:focus-within .az-cat__actions { max-height: 4rem; opacity: 1; margin-top: .55rem; }
}
@media (max-width: 575.98px) {
  .az-cat__cap { padding: 2.2rem .7rem .7rem; }
  .az-cat__name { font-size: .98rem; -webkit-line-clamp: 1; }
  .az-cat__order-long { display: none; }
  .az-cat__order { padding: .4rem .6rem; font-size: .72rem; }
  .az-cat__product { display: none; }
  .az-cat__flag { font-size: 0; padding: .35rem; gap: 0; }
  .az-cat__flag .az-star { font-size: .8rem; }
}

/* ── More / empty ─────────────────────────────────────────────────── */
.az-cat__more { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin: 2.5rem 0 0; }
.az-cat__more p { margin: 0; font-size: .85rem; color: var(--az-ink-soft); }
.az-cat__empty { text-align: center; padding: 4rem 1rem; }
.az-cat__empty > .az-star { font-size: 2rem; color: var(--az-gold); }
.az-cat__empty h2 { font-family: var(--az-serif); font-size: 2rem; margin: 1rem 0 .5rem; }
.az-cat__empty p { color: var(--az-ink-soft); margin: 0 auto 1.5rem; max-width: 420px; }
.az-cat__empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* ── Closing band ─────────────────────────────────────────────────── */
.az-cat__band { margin-top: clamp(3rem, 7vw, 5rem); background: var(--az-ink); color: var(--az-paper); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.az-cat__band-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem 3rem; }
.az-page .az-cat__band h2 { font-family: var(--az-serif); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; color: var(--az-paper); margin: 0 0 .8rem; }
.az-cat__band h2 em { font-style: italic; color: var(--az-gold); }
html[lang="ar"] .az-cat__band h2 { font-weight: 800; }
html[lang="ar"] .az-cat__band h2 em { font-style: normal; }
.az-cat__band p { margin: 0; max-width: 560px; color: rgba(251, 246, 238, .75); line-height: 1.7; }
.az-cat__band .az-eyebrow { color: var(--az-gold); }
.az-cat__band-actions { display: flex; flex-direction: column; gap: .75rem; }
@media (max-width: 767.98px) { .az-cat__band-inner { grid-template-columns: 1fr; } }

/* ── Full-screen viewer tweaks ────────────────────────────────────── */
#sliderDownloadBtn { display: none !important; }

@media (min-width: 576px) { .az-cat__order-short { display: none; } }
@media (max-width: 767.98px) {
  .az-cat__tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; }
  .az-cat__tags::-webkit-scrollbar { display: none; }
  .az-cat__tag { flex: none; }
}