/* Catalogue, carte produit v2, header, footer, 404 (spec 20 §3.3, §3.5, §3.10-3.12 ; spec 19 §2.2). */

/* ---------- Bandeau flash info (rotation par theme.js) ---------- */
.promo-bar { display: grid; padding: 0 var(--sp-4); min-height: 2.25rem; overflow: hidden; }
.promo-bar p { grid-area: 1 / 1; align-self: center; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .32s var(--ease), transform .32s var(--ease), visibility 0s .32s; }
.promo-bar p.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .32s var(--ease), transform .32s var(--ease); }

/* ---------- Header ---------- */
.hdr-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 96px; pointer-events: none; }
.site-header { transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.site-header.is-solid { border-bottom: 2px solid; border-image: var(--g-cta) 1; }
/* Accueil : le header se pose sur le ciel du hero, puis devient plein au défilement. */
.home .site-header { margin-bottom: -66px; }
.home .site-header:not(.is-solid) { background: linear-gradient(180deg, rgba(26, 11, 46, .85), rgba(26, 11, 46, 0)); border-color: transparent; backdrop-filter: none; }
.home:has(.site-nav.open) .site-header { background: var(--c-night); }
@media (max-width: 899px) {
  .site-nav { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: 100%; overflow-y: auto; border-top: 2px solid var(--c-pink); border-bottom: 0; visibility: hidden; opacity: 0; transition: opacity .2s var(--ease), visibility 0s .2s; }
  .site-nav.open { visibility: visible; opacity: 1; transition: opacity .2s var(--ease); }
  .site-nav ul { padding: var(--sp-5) var(--sp-5) var(--sp-7); }
  .site-nav a { font-size: 1.8rem; padding: 1rem 0; }
  .site-nav.open li { animation: navIn .32s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
  .nav-open, .nav-open body { overflow: hidden; }
  .nav-open .sun-btn { display: none; }
  .nav-open .site-header { backdrop-filter: none; } /* sinon le header devient le repère du panneau fixe */
}
@keyframes navIn { from { opacity: 0; transform: translateX(-16px); } }

/* ---------- En-tête de catégorie ---------- */
.cat-hero { isolation: isolate; }
.cat-hero.has-banner { background: var(--c-night); min-height: clamp(220px, 26vw, 340px); display: flex; align-items: flex-end; }
.cat-banner { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.cat-hero.has-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(26, 11, 46, .92) 0%, rgba(26, 11, 46, .6) 45%, rgba(26, 11, 46, 0) 75%); }
@media (max-width: 699px) { .cat-hero.has-banner::after { background: linear-gradient(0deg, rgba(26, 11, 46, .95) 15%, rgba(26, 11, 46, .35) 100%); } }
.cat-hero .lead p { margin: 0; }
.cat-hero .lead strong { color: var(--c-sun); }

/* ---------- Barre d'outils : catégories, puces, tri ---------- */
.cat-tools { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.cat-row { display: flex; gap: var(--sp-2); align-items: center; overflow-x: auto; scrollbar-width: none; padding: 4px 4px 6px; margin: -4px; }
.cat-row::-webkit-scrollbar { display: none; }
/* Puces qui débordent : fondu à droite pour signaler le défilement (la marge droite laisse la dernière sortir du fondu). */
.cat-row { padding-right: 40px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.cat-row > * { flex: none; }
.cat-group { display: contents; }
.cat-row .filter-btn { display: inline-flex; align-items: center; color: var(--c-ink); text-decoration: none; font-size: var(--fs-sm); white-space: nowrap; }
.cat-row a.filter-btn[aria-current] { background: var(--c-night); color: var(--c-sun); }
.chip-check { position: relative; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check:has(input:checked) { background: var(--c-night); color: var(--c-sun); }
.chip-check:has(input:checked)::before { content: "✓"; margin-right: .35rem; }
.chip-check:has(input:focus-visible) { box-shadow: var(--focus); }
.cat-row .select { font-size: var(--fs-sm); font-weight: 700; }
.cat-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed rgba(26, 11, 46, .25); }
.cat-bar .result-count { margin: 0; }
.cat-bar .sort .select { font-size: var(--fs-sm); }
.cat-tools.is-live .cat-submit { display: none; }

/* ---------- Grille : 2 colonnes dès le mobile, 4 sur desktop ---------- */
.grid-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 700px) { .grid-products { gap: var(--sp-5); } }
@media (min-width: 1000px) { .grid-products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid-products li.is-wide { grid-column: span 2; }

/* ---------- Carte produit v2 ---------- */
.card--v2 { box-shadow: 4px 4px 0 var(--c-night); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.card--v2:hover { transform: none; box-shadow: 4px 4px 0 var(--c-night); }
@media (hover: hover) and (pointer: fine) {
  .card--v2:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--c-night); }
  .card--v2:hover .medal-photo, .card--v2:hover .medal-flower { transform: translateY(-6px) rotate(-2deg); }
}
.card--v2:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--c-night); transition-duration: 100ms; transition-timing-function: ease-out; }
.card--v2 .card-art { background: var(--g-postcard); border-bottom: 2px solid var(--c-night); overflow: hidden; }
.card .medal { position: absolute; inset: 0; display: block; isolation: isolate; }
.card .medal-sun { position: absolute; left: 12%; top: 6%; width: 76%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(180deg, var(--v1, #FFC94A), var(--v2, #FF4F9A));
  -webkit-mask: linear-gradient(180deg, #000 0 56%, transparent 56% 60%, #000 60% 68%, transparent 68% 73%, #000 73% 80%, transparent 80% 86%, #000 86%);
          mask: linear-gradient(180deg, #000 0 56%, transparent 56% 60%, #000 60% 68%, transparent 68% 73%, #000 73% 80%, transparent 80% 86%, #000 86%); }
.card .medal::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: 13%; height: 3px; background: var(--c-teal); z-index: 0; }
.card .medal-photo { position: absolute; z-index: 1; left: 21%; bottom: 7%; width: 58%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: color-mix(in srgb, var(--v1, #FFC94A) 22%, #fff); box-shadow: 0 0 0 3px var(--c-night), 4px 6px 0 rgba(26, 11, 46, .3); transition: transform .2s var(--ease); }
.card .medal-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.card .medal-flower { position: absolute; z-index: 1; left: 50%; bottom: 10%; width: 80%; height: auto; translate: -50% 0; filter: drop-shadow(0 6px 0 rgba(26, 11, 46, .35)); transition: transform .2s var(--ease); }
.card.is-off .medal-sun { background: var(--c-night-3); }
.card.is-off .medal-photo img, .card.is-off .medal-flower { filter: grayscale(1); opacity: .6; }

.sticker { display: inline-block; padding: .2rem .7rem; border: 2px solid var(--c-night); border-radius: var(--r-pill); font: italic 800 .8rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .04em; color: var(--c-night); background: var(--sticker-bg, var(--c-sun)); box-shadow: 3px 3px 0 var(--c-night); transform: rotate(-4deg); }
.sticker--new { --sticker-bg: var(--c-teal); }
.sticker--pack { background: var(--g-cta); }
.sticker--off { --sticker-bg: var(--c-night-3); color: var(--c-lilac); box-shadow: none; transform: none; }
.card .sticker { position: absolute; z-index: 2; top: var(--sp-3); left: var(--sp-3); }

.card--v2 .card-body { gap: var(--sp-1); padding: var(--sp-3); }
.card-denom { margin: 0; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); }
.card--v2 .card-title { font-size: clamp(1.15rem, 1rem + .9vw, 1.6rem); overflow-wrap: anywhere; }
.card-aromes { margin: 0; font-size: var(--fs-xs); color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card--v2 .card-stats { margin-top: var(--sp-1); }
.card--v2 .chip { font-size: .7rem; }
.card--v2 .chip--thc { font-family: var(--f-mono); font-weight: 400; }
.card--v2 .card-foot { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
.card--v2 .card-price { margin: 0; font-size: 1.15rem; }
.card-ppg { display: block; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); color: var(--c-ink); }
.card--v2 .card-price small { font-size: .75rem; }
.card--v2 .card-foot .btn { position: relative; z-index: 2; font-size: clamp(.82rem, .7rem + .5vw, 1rem); padding: .45rem .6rem; white-space: nowrap; }
.card--v2 .btn.loading { pointer-events: none; opacity: .7; }
.card--v2 .btn.added { background: var(--c-teal); }
.card--v2 .added_to_cart { display: none; } /* le drawer panier confirme l'ajout */
.card-more { position: relative; z-index: 2; align-self: center; font-size: var(--fs-xs); font-weight: 700; color: var(--c-pink-deep); min-height: 44px; display: inline-flex; align-items: center; }

/* Pack découverte : carte large, photo à gauche */
.is-wide .card--v2 { flex-direction: row; }
.is-wide .card-art { flex: 0 0 42%; aspect-ratio: auto; min-height: 200px; border-bottom: 0; border-right: 2px solid var(--c-night); }
.is-wide .card .medal-sun { top: 50%; translate: 0 -50%; }
@media (min-width: 560px) {
  .is-wide .card-art { min-height: 260px; }
  .is-wide .card-body { padding: var(--sp-5); justify-content: center; }
  .is-wide .card-foot { flex-direction: row; align-items: center; justify-content: space-between; }
  .is-wide .card-foot .btn { width: auto; }
}

/* Pack découverte (woocommerce/content-product.php) : carte postale, visuel du coffret, variétés en pastilles. */
.card--pack { background: var(--g-postcard); border-width: 3px; box-shadow: var(--shadow-pop); }
.card--pack .pack-art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 3px solid var(--c-night); background: var(--c-night); }
.card--pack .pack-art img { width: 100%; height: 100%; object-fit: cover; }
.card--pack .sticker--pack { position: absolute; top: var(--sp-3); left: var(--sp-3); background: var(--g-cta); }
.card--pack .card-body { gap: var(--sp-2); }
.card--pack .card-denom { color: var(--c-violet-deep); }
.pack-vars { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pack-vars li { display: inline-flex; align-items: center; gap: 5px; padding: .15rem .55rem .15rem .2rem; border: 1.5px solid var(--c-night); border-radius: var(--r-pill); background: var(--c-white); font-size: .74rem; font-weight: 700; }
.pack-vars li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(180deg, var(--v1) 0 50%, var(--v2) 50%); box-shadow: 0 0 0 1.5px var(--c-night); }
.card--pack .card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: auto; }
.card--pack .card-price { font: italic 800 1.8rem/1 var(--f-display); margin: 0; }
.card--pack .btn { position: relative; z-index: 2; }
/* Le coffret (pack-bg, 3:2, centré) reste en haut à toutes les tailles : en colonne latérale il serait recadré en portrait. */
.is-wide .card--pack { flex-direction: column; }
@media (min-width: 768px) { .card--pack .pack-art { aspect-ratio: 16 / 9; } .card--pack .card-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); } }

/* ---------- Footer ---------- */
.site-footer { padding-top: 0; }
.foot-sun { position: relative; height: 96px; overflow: hidden; margin-bottom: var(--sp-6); }
.foot-sun::before { content: ""; position: absolute; left: 50%; bottom: -110px; width: 220px; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: linear-gradient(180deg, #FFC94A 0%, #FF8A3D 55%, #FF4F9A 100%);
  -webkit-mask: linear-gradient(180deg, #000 0 30%, transparent 30% 34%, #000 34% 40%, transparent 40% 45%, #000 45%);
          mask: linear-gradient(180deg, #000 0 30%, transparent 30% 34%, #000 34% 40%, transparent 40% 45%, #000 45%); }
.foot-sun::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-teal); }
.foot-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin: 0 0 var(--sp-7) !important; padding-bottom: var(--sp-6) !important; border-bottom: 1px solid var(--c-night-3); }
@media (min-width: 900px) { .foot-trust { grid-template-columns: repeat(4, 1fr); } }
.foot-trust li { display: flex; gap: var(--sp-3); align-items: flex-start; margin: 0; }
.foot-trust .ico { flex: none; width: 28px; height: 28px; fill: none; stroke: var(--c-sun); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.foot-trust b { display: block; color: var(--c-white); font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 1.05rem; }
.foot-news { margin-top: var(--sp-5); padding: var(--sp-4); border: 2px solid var(--c-night-3); border-radius: var(--r-md); }
.foot-news h2 { margin-bottom: var(--sp-2); }
.foot-news p { margin: 0 0 var(--sp-3); }
.site-footer .foot-news .btn { color: var(--c-ink); text-decoration: none; }
.foot-mono { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-white); }
.footer-legal { font-family: var(--f-mono); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

/* ---------- 404 ---------- */
.nf-hero { padding-bottom: var(--sp-7); }
.nf-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.nf-hero .wrap { display: grid; gap: var(--sp-5); align-items: center; }
.nf-art { width: min(320px, 70vw); height: auto; justify-self: center; }
@media (min-width: 900px) { .nf-hero .wrap { grid-template-columns: 1.3fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .promo-bar p, .site-nav, .card--v2, .card .medal-photo { transition: none; }
  .site-nav.open li { animation: none; }
  .card--v2:hover, .card--v2:hover .medal-photo, .card--v2:hover .medal-flower { transform: none; }
}