/* Kautzmann — Boutique 1.0.0
   Charte du site : Epilogue (titres), Gabarito (texte), prune #663864, grands arrondis. */

/* On masque le titre et le fil d'Ariane du thème : la page a les siens. */
body.kzb-page #section_page_header,
body.kzb-page #main .site-title,
body.kzb-page #main .page-title-wrap { display: none !important; }

.kzb {
	--p6: #663864; --p7: #582a56; --p8: #4e274c; --p4: #905b8e; --p05: #f4eff4;
	--ink: #2b2530; --doux: #5a5a5a;
	--r: 28px; --r-img: 18px;
	--titre: Epilogue, "PT Sans", "Helvetica Neue", Arial, sans-serif;
	--texte: Gabarito, "PT Sans", "Helvetica Neue", Arial, sans-serif;
	--ease: cubic-bezier(.22, .72, .2, 1);

	width: 100%; max-width: 1280px; margin: 0 auto; padding: 20px 0 96px; box-sizing: border-box;
	font-family: var(--texte); color: var(--ink); -webkit-font-smoothing: antialiased;
}
/* Le thème ne laisse aucune marge entre 641 et 1360 px : on en pose une. */
@media (min-width: 641px) and (max-width: 1360px) { .kzb { padding-left: 24px; padding-right: 24px; } }
.kzb *, .kzb *::before, .kzb *::after { box-sizing: border-box; }
.kzb img { max-width: 100%; height: auto; }
.kzb a { color: inherit; text-decoration: none; }
.kzb ul { list-style: none; margin: 0; padding: 0; }
.kzb :focus-visible { outline: 3px solid #e4a400; outline-offset: 3px; border-radius: 8px; }
.kzb [hidden] { display: none !important; }
.kzb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- En-tête photo ---------- */
.kzb-hero { position: relative; width: 100%; margin: 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 2000 / 560; min-height: 300px; background: var(--p8); isolation: isolate; }
.kzb-hero__media { position: absolute; inset: 0; display: block; animation: kzb-dezoom 1.8s cubic-bezier(0.23, 1, 0.32, 1) both; }
@keyframes kzb-dezoom { from { transform: scale(1.07); } to { transform: scale(1); } }
.kzb .kzb-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; max-width: none; border-radius: 0; will-change: transform; }
.kzb-par .kzb-hero__img { transform: scale(1.16); }
.kzb-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(38, 14, 40, .52); -webkit-mask-image: linear-gradient(to top, #000 0, #000 30%, transparent 90%); mask-image: linear-gradient(to top, #000 0, #000 30%, transparent 90%); pointer-events: none; }
.kzb-hero__texte { position: absolute; z-index: 2; left: clamp(24px, 4vw, 56px); right: clamp(24px, 4vw, 56px); bottom: clamp(22px, 3.6vw, 46px); color: #fff; }
.kzb-hero__titre { margin: 0; font: 800 clamp(38px, 7.4vw, 104px)/.92 var(--titre); letter-spacing: -.025em; text-transform: uppercase; color: #fff; }
.kzb-hero__sous { margin: 14px 0 0; max-width: 46ch; font: 400 clamp(18px, 1.5vw, 21px)/1.4 var(--texte); color: rgba(255, 255, 255, .95); text-wrap: balance; }

/* ---------- Page de catégorie : fil d'Ariane et texte d'introduction ---------- */
.kzb-fil { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 18px 0 0 -8px; font: 400 15px/1.4 var(--texte); color: var(--doux); }
.kzb-fil a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; border-radius: 999px; color: var(--p6); font-weight: 700; }
.kzb-fil a:hover { text-decoration: underline; }
.kzb-intro { max-width: 70ch; margin: 4px 0 0; font: 400 18px/1.7 var(--texte); color: var(--ink); }
.kzb-intro p { margin: 0 0 1em; }
.kzb-navcat__lib { margin: 0; padding: 14px 0 6px; font: 800 16px/1.2 var(--titre); color: var(--p8); }
.kzb-choix--lien { text-decoration: none; }
.kzb-choix--lien[aria-current="page"] span { font-weight: 700; color: var(--p6); }
.kzb-choix--lien[aria-current="page"] { background: var(--p05); }

/* ---------- Mise en page : colonne de gauche + grille ---------- */
.kzb-corps { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 32px; margin-top: 36px; align-items: start; }

/* ---------- Trier et filtrer ---------- */
.kzb-filtres { background: #fff; border-radius: var(--r); padding: 22px 22px 18px; }
/* Elle suit le défilement seulement si l'écran est assez haut pour la montrer en entier. */
@media (min-width: 1101px) and (min-height: 1010px) { .kzb-filtres { position: sticky; top: 112px; } }
/* Le thème décale la zone de contenu de 15 px : on la remet d'aplomb (plus de dépassement). */
body.kzb-page #site-content { padding-left: 0; padding-right: 0; }
body.kzb-page #site-content > .row, body.kzb-page .site-main .row { margin-left: 0; margin-right: 0; }
.kzb-filtres__tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kzb-filtres__titre { margin: 0; font: 800 21px/1.1 var(--titre); letter-spacing: -.01em; text-transform: uppercase; color: var(--p6); }
.kzb-filtres__plier, .kzb-filtres__fermer { position: relative; width: 44px; height: 44px; margin: -8px -10px -8px 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--p6); }
.kzb-filtres__plier:hover, .kzb-filtres__fermer:hover { background: var(--p05); }
.kzb-filtres__plier i { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translate(-50%, -70%) rotate(135deg); transition: transform .4s var(--ease); }
.kzb-filtres.kzb-plie .kzb-filtres__plier i { transform: translate(-50%, -30%) rotate(-45deg); }
.kzb-filtres__fermer { display: none; }
.kzb-filtres__fermer i, .kzb-filtres__fermer i::after { position: absolute; left: 50%; top: 50%; width: 18px; height: 2.5px; background: currentColor; border-radius: 2px; content: ""; }
.kzb-filtres__fermer i { transform: translate(-50%, -50%) rotate(45deg); }
.kzb-filtres__fermer i::after { left: 0; top: 0; transform: rotate(90deg); }
.kzb-filtres__contenu { margin-top: 10px; }
.kzb-filtres.kzb-plie .kzb-filtres__contenu { display: none; }
.kzb-filtres fieldset { margin: 0 0 4px; padding: 10px 0 4px; border: 0; }
.kzb-filtres fieldset + fieldset { border-top: 0; }
.kzb-filtres legend { padding: 0 0 6px; font: 800 16px/1.2 var(--titre); color: var(--p8); }
.kzb-choix { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 2px 8px 2px 4px; margin: 0 -4px; border-radius: 12px; cursor: pointer; font: 400 16px/1.3 var(--texte); color: var(--ink); transition: background .25s var(--ease); }
.kzb-choix:hover { background: var(--p05); }
.kzb-choix input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--p6); cursor: pointer; }
.kzb-choix span { flex: 1; min-width: 0; }
.kzb-choix b { font: 700 14px/1 var(--texte); color: var(--p4); background: var(--p05); border-radius: 999px; padding: 4px 9px; }
.kzb-choix--enfant { padding-left: 28px; }
.kzb-choix--enfant span { font-size: 16px; color: var(--doux); }
.kzb-choix:has(input:checked) span { font-weight: 700; color: var(--p6); }
.kzb-filtres__actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; margin-top: 10px; }
.kzb-filtres [data-kzb-appliquer] { display: none; }
.kzb-effacer, .kzb-lien { min-height: 40px; border: 0; background: transparent; font: 700 15px/1 var(--texte); color: var(--p6); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(102, 56, 100, .35); }
.kzb-effacer:hover, .kzb-lien:hover { text-decoration-color: var(--p6); }
html:not(.kzb-js) .kzb-filtres { display: none; }
html:not(.kzb-js) .kzb-corps { grid-template-columns: 1fr; }

/* Tri : une liste déroulante, une seule ligne */
.kzb-tri { padding: 14px 0 12px; }
.kzb-tri__lib { display: block; margin: 0 0 8px; font: 800 16px/1.2 var(--titre); color: var(--p8); }
.kzb-select { position: relative; }
.kzb-select::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2.5px solid var(--p6); border-bottom: 2.5px solid var(--p6); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.kzb-select select { width: 100%; min-height: 46px; padding: 0 44px 0 16px; border: 2px solid #e3d9e3; border-radius: 999px; background: #fff; color: var(--ink); font: 700 16px/1 var(--texte); appearance: none; -webkit-appearance: none; cursor: pointer; }
.kzb-select select:hover { border-color: var(--p4); }
/* Tranches de prix : de petites pastilles */
.kzb-tranches { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.kzb-chip { position: relative; cursor: pointer; }
.kzb-chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.kzb-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border-radius: 999px; background: var(--p05); color: var(--p6); font: 700 15px/1 var(--texte); transition: background .25s, color .25s; }
.kzb-chip:hover span { background: #e9deea; }
.kzb-chip:has(input:checked) span { background: var(--p6); color: #fff; }
.kzb-chip:has(input:focus-visible) span { outline: 3px solid #e4a400; outline-offset: 2px; }

/* ---------- Barre au-dessus de la grille ---------- */
.kzb-barre { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 18px; min-height: 44px; }
.kzb-ouvrir { display: none; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: linear-gradient(90deg, #5a2a59, #774876); color: #fff; font: 700 16px/1 var(--texte); cursor: pointer; }
.kzb-ouvrir b[hidden] { display: none; }
.kzb-ouvrir b { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #fff; color: var(--p6); font-size: 13px; }
.kzb-compte { margin: 0; font: 400 17px/1.3 var(--texte); color: var(--doux); }
.kzb-compte span { font-weight: 700; color: var(--p6); }
.kzb-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.kzb-puces button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: var(--p6); font: 700 15px/1 var(--texte); cursor: pointer; transition: background .25s; }
.kzb-puces button:hover { background: var(--p05); }
.kzb-puces button::after { content: "×"; font-size: 19px; line-height: 1; }

/* ---------- Grille de cartes ---------- */
.kzb-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kzb-grille.kzb-maj { animation: kzb-maj .45s var(--ease); }
@keyframes kzb-maj { from { opacity: .35; } to { opacity: 1; } }
.kzb-cache { display: none !important; }
.kzb-carte { display: flex; }
.kzb-carte article { position: relative; display: flex; flex-direction: column; width: 100%; background: #fff; border-radius: 24px; padding: 12px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.kzb-carte__image { position: relative; border-radius: var(--r-img); overflow: hidden; aspect-ratio: 4 / 3; background: var(--p05); }
.kzb-zoom { display: block; width: 100%; height: 100%; transition: transform .9s var(--ease); }
.kzb-carte__image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.kzb-sans-image { display: block; width: 100%; height: 100%; background: var(--p6); }
.kzb-carte__image::after { content: ""; position: absolute; inset: 0; background: rgba(102, 56, 100, .16); opacity: 0; transition: opacity .6s var(--ease); pointer-events: none; }
.kzb-badge { position: absolute; top: 10px; left: 10px; z-index: 3; padding: 6px 11px; border-radius: 999px; background: var(--p6); color: #fff; font: 800 14px/1 var(--texte); }
.kzb-carte__corps { display: flex; flex-direction: column; flex: 1; padding: 14px 6px 4px; }
.kzb-carte__titre { margin: 0 0 12px; font: 700 16px/1.2 var(--titre); letter-spacing: -.005em; text-transform: uppercase; color: var(--p6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; text-wrap: balance; transition: color .4s var(--ease); }
.kzb-carte__titre a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 24px; }
.kzb-carte__pied { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.kzb-prix { margin: 0; font: 700 19px/1.2 var(--texte); color: var(--p6); }
.kzb-prix del { font-weight: 400; font-size: 16px; color: var(--doux); margin-right: 6px; }
.kzb-prix ins { text-decoration: none; }
.kzb-des { font-weight: 400; font-size: 16px; color: var(--doux); }
.kzb-prix .woocommerce-Price-amount { font-weight: 700; }

/* Boutons */
.kzb-btn { position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; text-align: center; font: 700 15px/1 var(--texte); color: #fff !important; background: linear-gradient(90deg, #5a2a59, #774876); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s; }
.kzb-btn--choix { background: #fff; color: var(--p6) !important; box-shadow: inset 0 0 0 2px var(--p6); }
.kzb-btn--off { background: var(--p05); color: var(--doux) !important; cursor: default; }
.kzb-btn--plein { width: auto; }
.kzb-btn--grand { min-height: 52px; padding: 0 34px; font-size: 16px; }
.kzb-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(78, 39, 76, .28); }
.kzb-btn--choix:hover { background: var(--p6); color: #fff !important; }
.kzb-btn--off:hover { transform: none; box-shadow: none; }
.kzb-btn:active { transform: translateY(0) scale(.98); }
.kzb-btn__ok { display: none; }
.kzb-btn.kzb-ajoute { background: #256b45; }
.kzb-btn.kzb-ajoute .kzb-btn__t { display: none; }
.kzb-btn.kzb-ajoute .kzb-btn__ok { display: inline; }
.kzb-btn.kzb-attente { opacity: .65; pointer-events: none; }
.kzb a.added_to_cart { display: none; }

.kzb-vide { margin: 40px 0; padding: 28px; border-radius: 24px; background: #fff; text-align: center; font: 400 18px/1.5 var(--texte); }
.kzb-plus { display: flex; justify-content: center; margin-top: 36px; }

@media (hover: hover) and (pointer: fine) {
	.kzb-carte article:hover { transform: translateY(-5px); box-shadow: 0 22px 46px rgba(78, 39, 76, .16); }
	.kzb-carte article:hover .kzb-zoom { transform: scale(1.06); }
	.kzb-carte article:hover .kzb-carte__image::after { opacity: 1; }
	.kzb-carte article:hover .kzb-carte__titre { color: var(--p8); }
}
@media (hover: none) { .kzb-carte article:active { transform: scale(.985); transition-duration: .12s; } }

/* ---------- Apparition en cascade (jamais cachée sans script) ---------- */
.kzb-js .kzb-rev { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.kzb-js .kzb-rev.kzb-vu { opacity: 1; transform: none; }
.kzb-js .kzb-carte.kzb-rev.kzb-fini { transition: none; }
.kzb-js .kzb-hero__sous { opacity: 0; transition: opacity .6s var(--ease); }
.kzb-js .kzb-hero.kzb-vu .kzb-hero__sous { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.kzb *, .kzb *::before, .kzb *::after { animation: none !important; }
	.kzb-js .kzb-rev, .kzb-js .kzb-hero__sous { transform: none !important; transition: opacity .35s linear !important; }
	.kzb-carte article:hover { transform: none !important; }
	.kzb-zoom { transition: none !important; }
	.kzb article:hover .kzb-zoom { transform: none !important; }
}

/* ---------- Grand écran étroit et tablette ---------- */
@media (max-width: 1240px) { .kzb-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .kzb-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .kzb-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* La colonne de gauche devient une feuille qui monte du bas. */
@media (max-width: 1100px) {
	.kzb-filtres { max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; }
	.kzb-corps { grid-template-columns: 1fr; margin-top: 26px; }
	.kzb-ouvrir { display: inline-flex; }
	.kzb-filtres__plier { display: none; }
	.kzb-filtres__fermer { display: block; }
	.kzb-filtres {
		position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 100001; max-height: 88vh; padding: 20px 20px 16px;
		border-radius: 28px 28px 0 0; transform: translate3d(0, 105%, 0); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s;
		box-shadow: 0 -20px 50px rgba(38, 14, 40, .25);
	}
	.kzb-feuille .kzb-filtres { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }
	.kzb-filtres.kzb-plie .kzb-filtres__contenu { display: block; }
	.kzb-filtres [data-kzb-appliquer] { display: inline-flex; width: 100%; }
	.kzb-filtres__actions { position: sticky; bottom: -16px; margin: 12px -20px -16px; padding: 12px 20px 16px; background: #fff; }
	.kzb-choix { min-height: 44px; }
	.kzb-fond { position: fixed; inset: 0; z-index: 100000; background: rgba(38, 14, 40, .5); }
	.kzb-fond[hidden] { display: none; }
	body.kzb-bloque { overflow: hidden; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 640px) {
	.kzb { padding: 12px 0 64px; }
	.kzb-hero { aspect-ratio: auto; height: 250px; min-height: 0; border-radius: 24px; }
	.kzb-hero__img { object-position: 40% 50%; }
	.kzb-hero__sous { max-width: 30ch; }
	.kzb-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.kzb-carte article { border-radius: 20px; padding: 8px; }
	.kzb-carte__image { border-radius: 14px; }
	.kzb-carte__corps { padding: 10px 4px 2px; }
	.kzb-carte__titre { font-size: 14px; margin-bottom: 8px; }
	.kzb-carte__titre a::after { border-radius: 20px; }
	.kzb-prix { font-size: 17px; }
	.kzb-btn { min-height: 44px; padding: 0 12px; font-size: 14px; }
	.kzb-badge { top: 6px; left: 6px; font-size: 12px; padding: 5px 9px; }
	.kzb-barre { flex-direction: column; align-items: stretch; }
	.kzb-ouvrir { justify-content: center; width: 100%; }
	.kzb-compte { text-align: center; }
	.kzb-puces { justify-content: center; }
}
@media (max-width: 360px) { .kzb-carte__titre { font-size: 13px; } .kzb-prix { font-size: 16px; } }