/* WC Tips Notifications – 4 styles */
.wctn {
	--wctn-accent: #0F766E;
	position: fixed;
	z-index: 99990;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.4;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease, transform .35s ease;
}
.wctn.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.wctn *, .wctn *::before, .wctn *::after { box-sizing: border-box; }
.wctn a { text-decoration: none; color: inherit; }
.wctn strong { font-weight: 700; }
.wctn img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border: 0; }
.wctn-ico { display: inline-flex; line-height: 0; }
.wctn-row { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.wctn-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.wctn-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; opacity: .75; }
.wctn-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; padding: 0; margin: 0;
	border: 0; border-radius: 8px; background: transparent; color: inherit;
	cursor: pointer; flex-shrink: 0;
}
.wctn-btn:focus-visible, .wctn a:focus-visible { outline: 2px solid var(--wctn-accent); outline-offset: 2px; }
.wctn-progress { display: block; height: 4px; margin-top: 5px; border-radius: 4px; background: rgba(0,0,0,.1); overflow: hidden; }
.wctn-progress > span { display: block; height: 100%; background: var(--wctn-accent); border-radius: 4px; }

/* ---------- A · Discrète ---------- */
.wctn--discrete { left: 20px; bottom: 20px; width: 340px; max-width: calc(100vw - 24px); transform: translateY(12px); }
.wctn--discrete .wctn-card {
	display: flex; align-items: flex-start; gap: 4px; padding: 12px;
	background: #fff; color: #1C1917; border-radius: 10px;
	box-shadow: 0 6px 24px rgba(28,25,23,.14);
}
.wctn--discrete .wctn-thumb, .wctn--carte .wctn-thumb {
	width: 48px; height: 48px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center; background: #E7E5E4;
}
.wctn-thumb--icon { color: var(--wctn-accent); background: color-mix(in srgb, var(--wctn-accent) 14%, #fff) !important; }
.wctn--discrete .wctn-meta .wctn-ico { color: var(--wctn-accent); }
.wctn--discrete .wctn-close { color: #78716C; width: 28px; height: 28px; }

/* ---------- B · Capsule ---------- */
.wctn--capsule { top: 20px; left: 50%; transform: translate(-50%, -12px); max-width: calc(100vw - 24px); }
.wctn--capsule.is-visible { transform: translate(-50%, 0); }
.wctn--capsule .wctn-pill {
	display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 6px;
	background: #18181B; color: #FAFAFA; border-radius: 999px;
	box-shadow: 0 8px 28px rgba(0,0,0,.28); white-space: nowrap;
}
.wctn--capsule .wctn-text { overflow: hidden; text-overflow: ellipsis; }
.wctn--capsule .wctn-text strong { color: var(--wctn-accent); }
.wctn--capsule .wctn-avatar {
	width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--wctn-accent); color: #18181B; font-weight: 700; font-size: 12px;
}
.wctn--capsule .wctn-avatar--icon { background: #3F3F46; color: var(--wctn-accent); }
.wctn--capsule .wctn-meta { color: #A1A1AA; opacity: 1; }
.wctn--capsule .wctn-close { width: 28px; height: 28px; border-radius: 999px; color: #A1A1AA; }

/* ---------- C · Barre d'astuces ---------- */
.wctn--astuce { left: 16px; right: 16px; bottom: 16px; transform: translateY(16px); }
.wctn--astuce .wctn-bar {
	max-width: 1100px; margin: 0 auto; overflow: hidden;
	background: var(--wctn-accent); color: #fff; border-radius: 12px;
	box-shadow: 0 10px 30px rgba(15,23,42,.25);
}
.wctn--astuce .wctn-row { padding: 12px 10px 12px 14px; gap: 14px; }
.wctn--astuce .wctn-bar-icon {
	width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16);
}
.wctn--astuce .wctn-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.wctn--astuce .wctn-text { font-size: 14px; }
.wctn--astuce .wctn-link { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.wctn--astuce .wctn-controls { display: flex; gap: 4px; flex-shrink: 0; }
.wctn--astuce .wctn-btn { width: 40px; height: 40px; background: rgba(255,255,255,.12); }
.wctn--astuce .wctn-close { background: transparent; }
.wctn--astuce .wctn-btn:focus-visible, .wctn--astuce a:focus-visible { outline-color: #fff; }
.wctn--astuce .wctn-timer { display: block; height: 3px; background: rgba(255,255,255,.2); }
.wctn--astuce .wctn-timer > span {
	display: block; height: 100%; background: #fff; width: 100%;
	transform-origin: left; animation: wctn-timer var(--wctn-interval, 12s) linear forwards;
}
.wctn--astuce.is-paused .wctn-timer > span { animation-play-state: paused; }
@keyframes wctn-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- D · Carte riche ---------- */
.wctn--carte { right: 20px; bottom: 20px; width: 280px; max-width: calc(100vw - 24px); transform: translateY(12px); }
.wctn--carte .wctn-card {
	background: #FFFDF8; color: #1C1917; border-radius: 14px; overflow: hidden;
	box-shadow: 0 14px 40px rgba(68,48,20,.2);
}
.wctn--carte .wctn-card--mini { display: flex; align-items: flex-start; gap: 4px; padding: 12px; }
.wctn--carte .wctn-media-wrap { position: relative; }
.wctn--carte .wctn-media { display: block; height: 140px; background: #E7DFD2; }
.wctn--carte .wctn-media-wrap .wctn-close {
	position: absolute; top: 6px; right: 6px; border-radius: 999px;
	background: rgba(255,253,248,.92); color: #44403C;
}
.wctn--carte .wctn-badge {
	position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px;
	background: var(--wctn-accent); color: #fff; font-size: 11px; font-weight: 600;
}
.wctn--carte .wctn-card--rich .wctn-body { padding: 12px 16px 16px; gap: 5px; }
.wctn--carte .wctn-title { font-size: 17px; font-weight: 700; line-height: 1.25; }
.wctn--carte .wctn-price { font-size: 14px; font-weight: 600; color: var(--wctn-accent); }
.wctn--carte .wctn-cta {
	display: flex; align-items: center; justify-content: center; height: 44px; margin-top: 6px;
	border-radius: 8px; background: #1C1917; color: #FFFDF8 !important; font-weight: 600; font-size: 14px;
}
.wctn--carte .wctn-cta:hover { background: #000; }

/* ---------- Aperçu admin (dans un cadre) ---------- */
.wctn.wctn--inline { position: absolute; }
.wctn--inline.wctn--discrete, .wctn--inline.wctn--carte { max-width: calc(100% - 24px); }
.wctn--inline.wctn--capsule { max-width: calc(100% - 24px); }

/* ---------- Mode démo (administrateurs) ---------- */
.wctn[data-demo]::before {
	content: attr(data-demo);
	position: absolute; top: -22px; left: 0;
	padding: 2px 8px; border-radius: 4px;
	background: #1D2327; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.wctn--capsule[data-demo]::before { top: auto; bottom: -24px; left: 50%; transform: translateX(-50%); }

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.wctn--discrete, .wctn--carte { left: 12px; right: 12px; bottom: 12px; width: auto; }
	.wctn--carte .wctn-media { height: 110px; }
	.wctn--astuce { left: 8px; right: 8px; bottom: 8px; }
	.wctn--astuce .wctn-bar-icon { display: none; }
	.wctn--astuce .wctn-text { font-size: 13px; }
	.wctn--capsule { top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.wctn { transition: opacity .2s; transform: none !important; }
	.wctn--capsule { transform: translateX(-50%) !important; }
	.wctn--astuce .wctn-timer { display: none; }
}