/* Comparateur de Prix — front */
:root {
	--cp-accent: #0f766e;
	--cp-ink: #0f172a;
	--cp-muted: #64748b;
	--cp-line: #e2e8f0;
	--cp-bg: #ffffff;
	--cp-soft: #f1f5f9;
	--cp-radius: 20px;
	--cp-ease: cubic-bezier(.2, .8, .2, 1);
}

.cp-wrap, .cp-modal, .cp-single { color: var(--cp-ink); box-sizing: border-box; }
.cp-wrap *, .cp-modal *, .cp-single * { box-sizing: border-box; }

/* ---------- Filtres ---------- */
.cp-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.cp-filters input[type="search"] { flex: 1 1 260px; }
.cp-filters input, .cp-filters select {
	padding: 12px 16px; border: 1px solid var(--cp-line); border-radius: 14px;
	background: var(--cp-bg); font-size: 15px; min-height: 46px; color: var(--cp-ink);
}
.cp-filters input:focus, .cp-filters select:focus { outline: 2px solid var(--cp-accent); outline-offset: 1px; }
.cp-filters button {
	padding: 12px 22px; border: 0; border-radius: 14px; min-height: 46px; cursor: pointer;
	background: var(--cp-accent); color: #fff; font-weight: 600; font-size: 15px;
	transition: transform .2s var(--cp-ease), filter .2s;
}
.cp-filters button:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ---------- Catégories ---------- */
.cp-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.cp-cats--sub { padding-left: 14px; border-left: 3px solid var(--cp-line); }
.cp-chip {
	display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border-radius: 999px;
	border: 1px solid var(--cp-line); background: var(--cp-bg); color: var(--cp-ink) !important;
	font-size: 14px; font-weight: 500; text-decoration: none !important; white-space: nowrap;
	transition: background .2s, border-color .2s, color .2s, transform .2s var(--cp-ease);
}
.cp-chip:hover { border-color: var(--cp-accent); transform: translateY(-1px); }
.cp-chip:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 2px; }
.cp-chip.is-active { background: var(--cp-accent); border-color: var(--cp-accent); color: #fff !important; }
.cp-cathead { margin: 22px 0 24px; }
.cp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; color: var(--cp-muted); }
.cp-crumbs a { color: var(--cp-accent); text-decoration: none; }
.cp-crumbs a:hover { text-decoration: underline; }
.cp-cathead__row { display: flex; align-items: center; gap: 16px; }
.cp-cathead__img { flex: none; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--cp-soft); }
.cp-cathead__img img { width: 100%; height: 100%; object-fit: cover; }
.cp-cathead__title { margin: 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; }
.cp-cathead__count { margin: 4px 0 0; color: var(--cp-muted); font-size: 14px; }
.cp-cathead__desc { margin-top: 12px; color: var(--cp-muted); font-size: 15px; line-height: 1.6; max-width: 70ch; }
.cp-empty a { margin-left: 8px; color: var(--cp-accent); font-weight: 600; }
@media (max-width: 720px) {
	.cp-cats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; scrollbar-width: thin; }
	.cp-cats--sub { padding-left: 10px; }
}

/* ---------- Grille ---------- */
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.cp-card {
	display: flex; flex-direction: column; text-decoration: none !important; color: inherit;
	background: var(--cp-bg); border: 1px solid var(--cp-line); border-radius: var(--cp-radius); overflow: hidden;
	transition: transform .35s var(--cp-ease), box-shadow .35s var(--cp-ease), border-color .35s;
	opacity: 0; animation: cp-rise .6s var(--cp-ease) forwards; animation-delay: calc(var(--i, 0) * 45ms);
}
.cp-card:hover, .cp-card:focus-visible {
	transform: translateY(-6px); border-color: transparent;
	box-shadow: 0 24px 50px -22px rgba(15, 23, 42, .35); outline: none;
}
.cp-card:focus-visible { box-shadow: 0 0 0 3px var(--cp-accent), 0 24px 50px -22px rgba(15, 23, 42, .35); }
.cp-card__media {
	display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1;
	background: linear-gradient(145deg, var(--cp-soft), #fff); overflow: hidden;
}
.cp-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .5s var(--cp-ease); }
.cp-card:hover .cp-card__media img { transform: scale(1.06); }
.cp-card__ph, .cp-detail__ph {
	display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 28px;
	background: color-mix(in srgb, var(--cp-accent) 12%, #fff); color: var(--cp-accent); font-weight: 700; font-size: 32px;
}
.cp-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 20px; }
.cp-card__brand { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cp-muted); }
.cp-card__title { font-weight: 600; font-size: 16px; line-height: 1.3; }
.cp-card__price { display: flex; flex-direction: column; margin-top: 6px; }
.cp-card__price small { color: var(--cp-muted); font-size: 12px; }
.cp-card__price strong { font-size: 20px; color: var(--cp-accent); }
.cp-card__count { font-size: 13px; color: var(--cp-muted); }

.cp-empty { padding: 40px 0; text-align: center; color: var(--cp-muted); }

.cp-pagination ul { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 36px 0 0; flex-wrap: wrap; }
.cp-pagination a, .cp-pagination span {
	display: inline-flex; min-width: 42px; height: 42px; align-items: center; justify-content: center;
	border-radius: 12px; border: 1px solid var(--cp-line); text-decoration: none; color: var(--cp-ink); padding: 0 12px;
}
.cp-pagination .current { background: var(--cp-accent); border-color: var(--cp-accent); color: #fff; }

/* ---------- Modale ---------- */
html.cp-lock { overflow: hidden; }

.cp-modal {
	position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px;
	visibility: hidden; pointer-events: none; transition: visibility 0s linear .4s;
}
.cp-modal.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }

.cp-modal__backdrop {
	position: absolute; inset: 0; background: rgba(8, 13, 24, 0);
	-webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
	transition: background .4s ease, backdrop-filter .4s ease, -webkit-backdrop-filter .4s ease;
}
.cp-modal.is-open .cp-modal__backdrop {
	background: rgba(8, 13, 24, .42);
	-webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.cp-modal.is-open .cp-modal__backdrop { background: rgba(8, 13, 24, .82); }
}

.cp-modal__panel {
	position: relative; width: min(1180px, 100%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
	background: var(--cp-bg); border-radius: 28px; outline: none;
	box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
	opacity: 0; transform: translateY(32px) scale(.96);
	transition: opacity .3s ease, transform .5s var(--cp-ease);
}
.cp-modal.is-open .cp-modal__panel { opacity: 1; transform: none; }

.cp-modal__close {
	position: absolute; top: 16px; right: 16px; z-index: 3; width: 42px; height: 42px; border: 0; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	background: rgba(15, 23, 42, .06); color: var(--cp-ink); transition: transform .3s var(--cp-ease), background .2s;
}
.cp-modal__close:hover { background: rgba(15, 23, 42, .12); transform: rotate(90deg); }
.cp-modal__close:focus-visible { outline: 2px solid var(--cp-accent); }

/* ---------- Détail produit (popup + page) ---------- */
.cp-detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 560px; }
.cp-detail__media {
	display: flex; align-items: center; justify-content: center; padding: 48px;
	background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--cp-accent) 14%, #fff), var(--cp-soft) 70%);
}
.cp-detail__media img { max-width: 100%; max-height: 480px; object-fit: contain; animation: cp-float 6s ease-in-out infinite; filter: drop-shadow(0 24px 24px rgba(15, 23, 42, .18)); }
.cp-detail__body { padding: 56px 52px 48px; }
.cp-detail__body > * { opacity: 0; animation: cp-rise .4s var(--cp-ease) forwards; }
.cp-detail__body > *:nth-child(1) { animation-delay: .02s; }
.cp-detail__body > *:nth-child(2) { animation-delay: .05s; }
.cp-detail__body > *:nth-child(3) { animation-delay: .08s; }
.cp-detail__body > *:nth-child(4) { animation-delay: .11s; }
.cp-detail__body > *:nth-child(5) { animation-delay: .14s; }
.cp-detail__body > *:nth-child(n+6) { animation-delay: .17s; }

.cp-detail__meta { margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-accent); font-weight: 600; }
.cp-detail__title { margin: 0 0 6px; font-size: clamp(24px, 3vw, 38px); line-height: 1.15; padding-right: 48px; }
.cp-detail__ean { margin: 0 0 22px; color: var(--cp-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.cp-detail__desc { margin-top: 24px; color: var(--cp-muted); font-size: 15px; line-height: 1.6; }

.cp-best {
	display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: baseline;
	padding: 18px 20px; margin-bottom: 26px; border-radius: 18px; color: #fff;
	background: linear-gradient(135deg, var(--cp-accent), color-mix(in srgb, var(--cp-accent) 55%, #000));
	box-shadow: 0 18px 36px -18px var(--cp-accent);
}
.cp-best__label { grid-column: 1 / -1; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.cp-best__price { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.cp-best__where { opacity: .9; }
.cp-best__save { grid-column: 1 / -1; margin-top: 6px; font-size: 13px; opacity: .85; }

.cp-prices__title { margin: 0 0 12px; font-weight: 600; font-size: 14px; color: var(--cp-muted); }
.cp-prices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cp-price {
	position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
	padding: 14px 16px 18px; border: 1px solid var(--cp-line); border-radius: 16px; background: var(--cp-bg);
	opacity: 0; animation: cp-rise .4s var(--cp-ease) forwards; animation-delay: calc(var(--i, 0) * 40ms + .1s);
	transition: transform .25s var(--cp-ease), box-shadow .25s;
}
.cp-price:hover { transform: translateX(4px); box-shadow: 0 10px 24px -16px rgba(15, 23, 42, .4); }
.cp-price.is-best { border-color: var(--cp-accent); background: color-mix(in srgb, var(--cp-accent) 5%, #fff); }
.cp-price__logo {
	display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; overflow: hidden;
	background: var(--cp-soft); font-weight: 700; font-size: 14px; color: var(--cp-muted);
}
.cp-price__logo img { width: 100%; height: 100%; object-fit: cover; }
.cp-price__info { display: flex; flex-direction: column; min-width: 0; }
.cp-price__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-price__date { font-size: 12px; color: var(--cp-muted); }
.cp-price__amount { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cp-price__amount strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.cp-badge { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--cp-accent); color: #fff; }
.cp-diff { font-style: normal; font-size: 12px; color: #b45309; font-variant-numeric: tabular-nums; }
.cp-price__bar { position: absolute; left: 16px; right: 16px; bottom: 8px; height: 3px; border-radius: 3px; background: var(--cp-soft); overflow: hidden; }
.cp-price__bar span {
	display: block; height: 100%; width: 0; border-radius: inherit; background: #cbd5e1;
	animation: cp-fill .6s var(--cp-ease) forwards; animation-delay: calc(var(--i, 0) * 40ms + .25s);
}
.cp-price.is-best .cp-price__bar span { background: var(--cp-accent); }

/* Page produit directe */
.cp-single .cp-detail { border: 1px solid var(--cp-line); border-radius: 28px; overflow: hidden; }

/* Squelette de chargement */
.cp-skel { display: grid; grid-template-columns: 5fr 7fr; min-height: 560px; }
.cp-skel__media { background: var(--cp-soft); }
.cp-skel__body { padding: 44px 40px; display: flex; flex-direction: column; gap: 16px; }
.cp-skel__body i { display: block; height: 22px; border-radius: 10px; background: linear-gradient(90deg, var(--cp-soft) 25%, #e8eef5 50%, var(--cp-soft) 75%); background-size: 200% 100%; animation: cp-shimmer 1.3s linear infinite; }
.cp-skel__body i:nth-child(1) { width: 30%; height: 14px; }
.cp-skel__body i:nth-child(2) { width: 75%; height: 32px; }
.cp-skel__body i:nth-child(3) { width: 100%; height: 84px; border-radius: 18px; margin-top: 12px; }
.cp-skel__body i:nth-child(4) { width: 100%; height: 56px; border-radius: 16px; }
/* Aperçu instantané (image / marque / titre de la carte) pendant le chargement des prix */
.cp-detail--preview .cp-detail__body > *, .cp-detail--instant .cp-detail__meta, .cp-detail--instant .cp-detail__title { opacity: 1; animation: none; }
.cp-pv-lines { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.cp-pv-lines i { display: block; height: 64px; border-radius: 16px; background: linear-gradient(90deg, var(--cp-soft) 25%, #e8eef5 50%, var(--cp-soft) 75%); background-size: 200% 100%; animation: cp-shimmer 1.3s linear infinite; }
.cp-pv-lines i:nth-child(1) { height: 104px; border-radius: 20px; }
.cp-pv-lines i:nth-child(3) { height: 20px; width: 60%; border-radius: 10px; }
.cp-price__pv { font-weight: 400; color: var(--cp-muted); }
.cp-error { padding: 60px 40px; text-align: center; color: var(--cp-muted); }
.cp-error p { margin: 0 0 18px; }
.cp-retry { appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; padding: 12px 26px; border-radius: 999px; background: var(--cp-accent); color: #fff; transition: transform .2s ease, filter .2s ease; }
.cp-retry:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cp-retry:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 3px; }

/* ---------- Animations ---------- */
@keyframes cp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes cp-fill { from { width: 0; } to { width: var(--w, 100%); } }
@keyframes cp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes cp-shimmer { to { background-position: -200% 0; } }

/* ---------- Mobile : panneau qui monte du bas ---------- */
@media (max-width: 720px) {
	.cp-modal { align-items: flex-end; padding: 0; }
	.cp-modal__panel { width: 100%; max-height: 92dvh; border-radius: 26px 26px 0 0; transform: translateY(100%); transition: opacity .25s ease, transform .5s var(--cp-ease); }
	.cp-detail, .cp-skel { grid-template-columns: 1fr; min-height: 0; }
	.cp-detail__media { padding: 28px 24px 8px; }
	.cp-detail__media img { max-height: 200px; }
	.cp-detail__body, .cp-skel__body { padding: 24px 22px 32px; }
	.cp-skel__media { height: 160px; }
	.cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.cp-card__body { padding: 12px 14px 16px; }
}

/* ---------- Accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
	.cp-card, .cp-detail__body > *, .cp-price, .cp-price__bar span, .cp-detail__media img { animation: none !important; opacity: 1 !important; }
	.cp-price__bar span { width: var(--w, 100%) !important; }
	.cp-modal__panel, .cp-modal__backdrop, .cp-card, .cp-card__media img { transition-duration: .01ms !important; }
}

/* Page produit WooCommerce : bloc comparatif sous le titre */
.cp-single--wc { margin: 18px 0 24px; }
.cp-single--wc .cp-best, .cp-single--wc .cp-prices__title, .cp-single--wc .cp-prices, .cp-single--wc .cp-empty { opacity: 1; animation: none; }
.cp-single--wc .cp-price { opacity: 1; animation: none; }
.cp-single--wc .cp-price__bar span { width: var(--w, 100%); animation: none; }