/* Coin des Princesses — écran Catégories (/categories/). */
body.cdp:has(.cdp-cats) .cdp-page__title, body.cdp:has(.cdp-cats) .wp-block-post-title { display: none; }
.cdp-cats { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: 0; margin: 0 -16px; min-height: calc(100svh - var(--cdp-hdr-h, 120px) - var(--tabbar-h, 0px)); background: #fff; }

/* Colonne des familles. */
.cdp-cats__rail { position: sticky; top: var(--cdp-hdr-h, 0px); display: flex; flex-direction: column; max-height: calc(100svh - var(--cdp-hdr-h, 120px) - var(--tabbar-h, 0px)); overflow-y: auto; scrollbar-width: none; background: var(--paper-soft, #f6efea); padding: 6px 0 16px; }
.cdp-cats__rail::-webkit-scrollbar { display: none; }
.cdp-cats__tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 6px; border: 0; background: transparent; color: var(--muted); font: 700 11.5px/1.2 var(--font-sans); text-align: center; cursor: pointer; transition: background .2s, color .2s; }
.cdp-cats__tab::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--plum); transform: scaleY(0); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.cdp-cats__tab[aria-selected="true"] { background: #fff; color: var(--plum); }
.cdp-cats__tab[aria-selected="true"]::before { transform: scaleY(1); }
.cdp-cats__tab.is-promo { color: var(--rose, #c2557f); }
.cdp-cats__tabimg { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; background: #fff; color: var(--plum); box-shadow: 0 0 0 1px var(--line); transition: transform .25s, box-shadow .25s; }
.cdp-cats__tabimg img { width: 100%; height: 100%; object-fit: cover; }
.cdp-cats__tab[aria-selected="true"] .cdp-cats__tabimg { transform: scale(1.06); box-shadow: 0 0 0 2px var(--plum), 0 4px 10px rgba(115, 48, 74, .18); }
.cdp-cats__tab.is-promo .cdp-cats__tabimg { color: var(--rose, #c2557f); }

/* Contenu de la famille. */
.cdp-cats__panels { min-width: 0; padding: 12px 14px 24px; }
.cdp-cats__panel { display: grid; gap: 10px; }
.cdp-cats__panel.is-enter > * { animation: cdp-k-up .45s both cubic-bezier(.2, .8, .3, 1); }
.cdp-cats__panel.is-enter > *:nth-child(2) { animation-delay: .05s; }
.cdp-cats__panel.is-enter > *:nth-child(3) { animation-delay: .1s; }
.cdp-cats__panel.is-enter > *:nth-child(n+4) { animation-delay: .15s; }
.cdp-cats__panel.is-enter .cdp-cats__grid li { animation: cdp-k-up .45s both cubic-bezier(.2, .8, .3, 1); animation-delay: calc(.15s + var(--i, 0) * 50ms); }
@keyframes cdp-k-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.cdp-cats__hero { position: relative; display: block; height: 140px; overflow: hidden; border-radius: 18px; background: var(--plum-deep, #4b1f31); color: #fff !important; text-decoration: none !important; }
.cdp-cats__hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .6s; }
.cdp-cats__hero:hover img { transform: scale(1.04); }
.cdp-cats__hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(43, 37, 48, .72), rgba(43, 37, 48, .1) 75%); }
.cdp-cats__herobody { position: absolute; left: 16px; bottom: 14px; right: 16px; z-index: 1; display: grid; gap: 6px; }
.cdp-cats__herotitle { font-family: var(--font-display, var(--font-serif)); font-size: 26px; line-height: 1.05; color: #fff; }
.cdp-cats__herocta { display: inline-flex; align-items: center; gap: 5px; width: max-content; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--plum); font: 800 12px var(--font-sans); }
.cdp-cats__text { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.cdp-cats__label { margin: 6px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.cdp-cats__sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.cdp-cats__sizes a { display: grid; place-items: center; min-width: 44px; min-height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink) !important; font: 700 13px var(--font-sans); text-decoration: none !important; }
.cdp-cats__sizes a:active { background: var(--plum); color: #fff !important; }
.cdp-cats__occ { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cdp-cats__occ a { display: grid; justify-items: center; gap: 5px; color: var(--ink) !important; font: 700 11.5px var(--font-sans); text-decoration: none !important; }
.cdp-cats__occ a span { display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 999px 999px 12px 12px; border: 2px solid #f0dfb2; }
.cdp-cats__occ img { width: 100%; height: 100%; object-fit: cover; }
.cdp-cats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.cdp-cats__grid a { display: grid; gap: 3px; color: var(--ink) !important; text-decoration: none !important; }
.cdp-cats__pimg { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--rose-tint, #f8e9ef); }
.cdp-cats__pimg img { width: 100% !important; height: 100% !important; object-fit: cover; margin: 0 !important; }
.cdp-cats__pimg b { position: absolute; left: 5px; top: 5px; padding: 2px 6px; border-radius: 6px; background: var(--rose, #c2557f); color: #fff; font: 800 10px var(--font-sans); }
.cdp-cats__pname { font-size: 11.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cdp-cats__pprice { font-family: var(--font-serif); font-size: 12.5px; color: var(--plum); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdp-cats__pprice del { display: none; }
.cdp-cats__pprice ins { text-decoration: none; color: var(--rose, #c2557f); }
.cdp-cats__all { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; margin-top: 6px; border-radius: 14px; background: var(--plum); color: #fff !important; font: 800 14px var(--font-sans); text-decoration: none !important; }

@media (min-width: 761px) {
	.cdp-cats { grid-template-columns: 200px minmax(0, 1fr); margin: 20px 0 0; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); min-height: 0; }
	.cdp-cats__rail { max-height: none; top: calc(var(--header-h, 120px) + 10px); }
	.cdp-cats__tab { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 16px; font-size: 14px; text-align: left; }
	.cdp-cats__tabimg { width: 40px; height: 40px; }
	.cdp-cats__panels { padding: 20px 24px 28px; }
	.cdp-cats__hero { height: 220px; }
	.cdp-cats__herotitle { font-size: 38px; }
	.cdp-cats__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.cdp-cats__occ { max-width: 420px; }
	.cdp-cats__all { width: max-content; padding: 0 22px; }
}
@media (prefers-reduced-motion: reduce) { .cdp-cats * { animation: none !important; transition: none !important; } }
/* WordPress ajoute des paragraphes vides autour du contenu : ils ne doivent pas prendre de place. */
.cdp-cats > p, .cdp-cats > br, .cdp-cats__rail > p, .cdp-cats__rail > br, .cdp-cats__panels > p, .cdp-cats__panels > br, .cdp-cats__panel > br, .cdp-cats p:empty { display: none !important; }
.cdp-cats__rail { grid-column: 1; grid-row: 1; }
.cdp-cats__panels { grid-column: 2; grid-row: 1; }
@media (max-width: 760px) {
	body.cdp:has(.cdp-cats) main.wp-block-group { padding-top: 0 !important; }
	body.cdp:has(.cdp-cats) .entry-content { margin-top: 0 !important; }
	body.cdp:has(.cdp-cats) .cdp-footer { margin-top: 0; }
}
@media (min-width: 761px) { body.cdp:has(.cdp-cats) .cdp-reading, body.cdp:has(.cdp-cats) .wp-block-post-content { max-width: 1240px !important; } }