/* ==========================================================================
   TattooClub — Le Club.
   Layout of the landing = Elementor containers + native widgets. This file
   styles only the server-rendered dynamic parts (member card, levels,
   rewards, vouchers, history, My Account Club area), the Club modal, and
   the guest/member visibility switch.
   Tokens: ink #111111, ivory #F9F5EF, line #E8E4DC, muted #68645E,
   electric green #B7E41C (text-safe green #4F7A00).
   ========================================================================== */
:root { --club-ink: #111111; --club-muted: #68645E; --club-line: #E8E4DC; --club-ivory: #F9F5EF; --club-green: #B7E41C; --club-green-d: #4F7A00; }

/* ---------------------------------------------- guest / member switch */
body:not(.logged-in) .tc-club-member-only,
body.logged-in .tc-club-guest-only { display: none !important; }

/* ------------------------------------------------------------ buttons */
.tc-club-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--club-ink);
	font: 700 13px/1 "Space Grotesk", system-ui, sans-serif; letter-spacing: 0; text-transform: none;
	text-decoration: none !important; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
	background: transparent; color: var(--club-ink); white-space: nowrap;
}
.tc-club-btn--primary { background: var(--club-ink); color: #fff !important; }
.tc-club-btn--primary:hover { background: #2a2a2a; color: #fff; }
.tc-club-btn--outline:hover, .tc-club-btn--ghost:hover { background: var(--club-ink); color: #fff; }
.tc-club-btn--ghost { border-color: var(--club-line); }
.tc-club-btn[disabled] { opacity: .6; cursor: default; }
.tc-club-btn:focus-visible, .tc-club-copy:focus-visible, .tc-club-links a:focus-visible, .tc-club-modal__x:focus-visible { outline: 2px solid var(--club-ink); outline-offset: 2px; }

.tc-club-copy {
	border: 1px solid var(--club-line); background: #fff; color: var(--club-ink); border-radius: 999px;
	padding: 6px 12px; font: 700 12px/1 "Space Grotesk", system-ui, sans-serif; cursor: pointer;
}
.tc-club-copy:hover { border-color: var(--club-ink); }

/* ------------------------------------------------------ member card */
.tc-club-card {
	background: var(--club-ink); color: #fff; border-radius: 20px; padding: 20px;
	display: flex; flex-direction: column; gap: 12px; font-family: inherit;
	box-shadow: 0 18px 40px rgba(17,17,17,.18); max-width: 460px; width: 100%; box-sizing: border-box;
}
.tc-club-card__who { display: flex; align-items: center; gap: 12px; }
.tc-club-card__avatar img { width: 48px; height: 48px; border-radius: 50%; display: block; border: 2px solid var(--club-green); }
.tc-club-card__id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tc-club-card__name { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-club-card__level { font-size: 13px; color: var(--club-green); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.tc-club-badge { background: var(--club-green); color: var(--club-ink); border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 15px; white-space: nowrap; }
.tc-club-progress { height: 8px; background: rgba(255,255,255,.16); border-radius: 999px; overflow: hidden; }
.tc-club-progress span { display: block; height: 100%; background: var(--club-green); border-radius: inherit; min-width: 4px; transition: width .4s ease; }
.tc-club-card__next, .tc-club-card__meta { margin: 0 !important; font-size: 13px; color: rgba(255,255,255,.82); }
.tc-club-card__meta { color: rgba(255,255,255,.6); font-size: 12px; }

/* ------------------------------------------------------------ levels */
.tc-club-levels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; font-family: inherit; }
.tc-club-level {
	position: relative; background: #fff; border: 1px solid var(--club-line); border-radius: 18px; padding: 22px 18px;
	display: flex; flex-direction: column; gap: 14px; margin: 0;
}
.tc-club-level.is-current { border: 2px solid var(--club-ink); box-shadow: 0 10px 28px rgba(17,17,17,.1); }
.tc-club-level__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--club-ivory); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: var(--club-ink); }
.tc-club-level.is-current .tc-club-level__icon { background: var(--club-green); }
.tc-club-level__body { display: flex; flex-direction: column; gap: 4px; }
.tc-club-level__name { font-family: "Archivo Black", sans-serif; font-size: 18px; text-transform: uppercase; color: var(--club-ink); }
.tc-club-level__range { font-size: 13px; color: var(--club-muted); font-weight: 700; }
.tc-club-level__perks { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 13px; color: var(--club-ink); }
.tc-club-level__perks span::before { content: "✓"; color: var(--club-green-d); font-weight: 800; margin-right: 6px; }
.tc-club-level__badge { position: absolute; top: 14px; right: 14px; background: var(--club-ink); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 5px 10px; text-transform: uppercase; letter-spacing: .05em; }

/* ---------------------------------------------------------- rewards */
.tc-club-rewards {
	list-style: none; margin: 0; padding: 4px 2px 12px; display: grid; grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 320px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch; scrollbar-width: thin; font-family: inherit;
}
.tc-club-reward { scroll-snap-align: start; background: #fff; border: 1px solid var(--club-line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; margin: 0; }
.tc-club-reward__media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--club-ink); }
.tc-club-reward__media img { width: 100%; height: 100%; object-fit: cover; }
.tc-club-reward__glyph { font-family: "Archivo Black", sans-serif; font-size: 56px; color: var(--club-green); letter-spacing: -.02em; }
.tc-club-reward__pts { position: absolute; left: 12px; top: 12px; background: var(--club-green); color: var(--club-ink); font-weight: 800; font-size: 13px; border-radius: 999px; padding: 5px 11px; }
.tc-club-reward__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.tc-club-reward__title { font-weight: 800; font-size: 16px; color: var(--club-ink); }
.tc-club-reward__desc, .tc-club-reward__meta { font-size: 13px; color: var(--club-muted); }
.tc-club-reward__meta { font-size: 12px; }
.tc-club-reward__foot { margin-top: auto; padding-top: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tc-club-reward__missing { font-size: 12px; color: var(--club-muted); font-weight: 700; }

/* --------------------------------------------- vouchers / history */
.tc-club-vouchers, .tc-club-history, .tc-club-links { list-style: none; margin: 0; padding: 0; font-family: inherit; }
.tc-club-vouchers { display: grid; gap: 12px; }
.tc-club-voucher { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; border: 1px solid var(--club-line); border-radius: 14px; padding: 14px 16px; background: #fff; margin: 0; }
.tc-club-voucher__title { font-weight: 800; }
.tc-club-voucher__state { grid-column: 2; grid-row: 1; justify-self: end; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 9px; border-radius: 999px; background: var(--club-ivory); }
.tc-club-voucher.is-available .tc-club-voucher__state { background: var(--club-green); }
.tc-club-voucher.is-used, .tc-club-voucher.is-expired, .tc-club-voucher.is-cancelled { opacity: .65; }
.tc-club-voucher__code { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tc-club-voucher__code code, .tc-club-modal__code code { font: 700 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; background: var(--club-ivory); border: 1px dashed #DCD6CB; border-radius: 8px; padding: 8px 10px; color: var(--club-ink); }
.tc-club-voucher__meta { grid-column: 1 / -1; font-size: 12px; color: var(--club-muted); }
.tc-club-history li { display: grid; grid-template-columns: 88px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--club-line); margin: 0; font-size: 14px; }
.tc-club-history__pts { font-weight: 800; }
.tc-club-history .is-plus .tc-club-history__pts { color: #4F7A00; }
.tc-club-history .is-minus .tc-club-history__pts { color: #B42318; }
.tc-club-history__date { font-size: 12px; color: var(--club-muted); white-space: nowrap; }
.tc-club-empty { font-family: inherit; color: var(--club-muted); font-size: 14px; margin: 0; padding: 16px; border: 1px dashed var(--club-line); border-radius: 14px; background: #fff; }

/* ---------------------------------------- My Account: Club area */
.tc-club-account { display: flex; flex-direction: column; gap: 24px; font-family: inherit; }
.tc-club-h { font-family: "Archivo Black", sans-serif; text-transform: uppercase; font-size: 26px; margin: 0; color: var(--club-ink); }
.tc-club-h3 { font-family: "Archivo Black", sans-serif; text-transform: uppercase; font-size: 17px; margin: 0 0 12px; color: var(--club-ink); }
.tc-club-account .tc-club-card { max-width: none; }
.tc-club-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tc-club-links li, .tc-club-vouchers li, .tc-club-history li, .tc-club-levels li, .tc-club-rewards li { list-style: none !important; }
.tc-club-links li::marker, .tc-club-vouchers li::marker, .tc-club-history li::marker, .tc-club-levels li::marker, .tc-club-rewards li::marker { content: none; }
.tc-club-links li { margin: 0; }
.tc-club-links a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--club-line); border-radius: 12px; background: #fff; color: var(--club-ink); text-decoration: none; font-weight: 700; font-size: 14px; }
.tc-club-links a:hover { border-color: var(--club-ink); }
.tc-club-links i { width: 18px; text-align: center; color: var(--club-ink); }
.tc-club-sec { scroll-margin-top: 110px; }
.tc-club-account .tc-club-rewards { grid-auto-columns: minmax(240px, 300px); }
.tc-club-more { margin: 0; font-weight: 700; }
.tc-club-more a { color: var(--club-ink); }

/* My Account dashboard shortcut (points in the existing dashboard). */
.tc-dashboard__club-pts { margin-left: auto; background: var(--club-green); color: var(--club-ink); border-radius: 999px; padding: 4px 10px; font-weight: 800; font-size: 13px; white-space: nowrap; }

/* ------------------------------------------- Landing (page Le Club) */
.tc-club-grid { display: grid !important; gap: 20px; }
.tc-club-grid > .e-con, .tc-club-grid > .elementor-widget { width: auto !important; max-width: none !important; min-width: 0; margin: 0 !important; }
.tc-club-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tc-club-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tc-club-ig { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tc-club-ig img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .25s ease, opacity .25s; }
.tc-club-ig a:hover img { opacity: .85; }
.tc-club-benefit .elementor-icon-box-icon .elementor-icon { background: var(--club-green) !important; color: var(--club-ink) !important; fill: var(--club-ink) !important; }
.tc-club-hero__card > .elementor-widget, .tc-club-hero__member, .tc-club-hero__member .elementor-shortcode { width: 100%; max-width: 460px; }
.tc-club-sc, .tc-club-sc .elementor-shortcode { width: 100%; }
.tc-club-cta .elementor-button { width: 100%; justify-content: center; }
@media (max-width: 1024px) {
	.tc-club-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.tc-club-grid--4, .tc-club-grid--3 { grid-template-columns: 1fr; gap: 12px; }
	.tc-club-ig { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.tc-club-ig > :nth-child(n+5) { display: none !important; }
	.tc-club-cta { width: 100% !important; }
	.tc-club-hero__member, .tc-club-hero__member .elementor-shortcode, .tc-club-hero__card > .elementor-widget { max-width: none; }
}

/* ------------------------------------------------------------ modal */
html.tc-club-modal-open { overflow: hidden; }
.tc-club-modal { position: fixed; inset: 0; z-index: 2147470000; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .2s; font-family: inherit; }
.tc-club-modal.is-open { opacity: 1; }
.tc-club-modal__backdrop { position: absolute; inset: 0; background: rgba(17,17,17,.55); }
.tc-club-modal__panel { position: relative; background: #fff; border-radius: 22px; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 32px 24px 24px; text-align: center; box-sizing: border-box; transform: translateY(12px); transition: transform .2s; }
.tc-club-modal.is-open .tc-club-modal__panel { transform: none; }
.tc-club-modal__x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; background: transparent; border-radius: 50%; cursor: pointer; font-size: 18px; color: var(--club-ink); }
.tc-club-modal__icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; background: var(--club-green); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--club-ink); }
.tc-club-modal__title { font-family: "Archivo Black", sans-serif; text-transform: uppercase; font-size: 20px; line-height: 1.2; margin: 0 0 8px; color: var(--club-ink); }
.tc-club-modal__text, .tc-club-modal__hint { margin: 0 0 16px; font-size: 14px; color: var(--club-muted); line-height: 1.5; }
.tc-club-modal__hint { font-size: 12px; }
.tc-club-modal__code { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tc-club-modal__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.tc-club-modal__actions .tc-club-btn { width: 100%; }

/* -------------------------------------------------------- responsive */
@media (max-width: 1024px) {
	.tc-club-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.tc-club-levels { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(220px, 78%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
	.tc-club-level { scroll-snap-align: start; }
	.tc-club-rewards, .tc-club-account .tc-club-rewards { grid-auto-columns: minmax(240px, 84%); }
	.tc-club-links { grid-template-columns: 1fr 1fr; }
	.tc-club-h { font-size: 22px; }
	.tc-club-card { padding: 16px; border-radius: 18px; }
	.tc-club-history li { grid-template-columns: 76px 1fr; }
	.tc-club-history__date { grid-column: 2; }
	.tc-club-modal { align-items: flex-end; padding: 0; }
	.tc-club-modal__panel { width: 100%; border-radius: 22px 22px 0 0; max-height: 92vh; padding: 28px 16px calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 359px) {
	.tc-club-links { grid-template-columns: 1fr; }
	.tc-club-badge { padding: 6px 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.tc-club-modal, .tc-club-modal__panel, .tc-club-progress span { transition: none; }
}

/* ---------------------------------------- charte 2026-10-04 */
/* Initials avatar, same as the account sidebar. */
.tc-club-card__initials { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--club-green); color: var(--club-ink); font: 400 16px/1 "Archivo Black", sans-serif; }
/* Card texts stay readable on the black card (theme p colour was winning). */
.tc-club-card p.tc-club-card__next { color: rgba(249, 245, 239, .82) !important; }
.tc-club-card p.tc-club-card__meta { color: rgba(249, 245, 239, .6) !important; }
/* Buttons: brand font everywhere; disabled = quiet outline, not the theme's grey/blue. */
button.tc-club-btn, a.tc-club-btn { font: 700 13px/1 "Space Grotesk", system-ui, sans-serif !important; }
button.tc-club-btn[disabled], button.tc-club-btn[disabled]:hover { opacity: 1; background: var(--club-ivory) !important; border-color: var(--club-line) !important; color: var(--club-muted) !important; }
/* Empty states + « Découvrir » link, like the Parrainage page. */
.tc-club-empty { background: var(--club-ivory); border: 1px solid var(--club-line); }
.tc-club-more a { display: inline-flex; align-items: center; gap: 6px; color: var(--club-ink) !important; font-size: 14px; text-decoration: underline !important; text-decoration-color: var(--club-green) !important; text-decoration-thickness: 2px !important; text-underline-offset: 5px; }
.tc-club-more a:hover { text-decoration-color: var(--club-ink) !important; }
/* Inside My Account the theme colours every button (light blue): keep the Club button colours. */
body.woocommerce-account .woocommerce .tc-club-btn { background: transparent; color: var(--club-ink); border-color: var(--club-ink); }
body.woocommerce-account .woocommerce .tc-club-btn--ghost { border-color: var(--club-line); }
body.woocommerce-account .woocommerce .tc-club-btn--primary { background: var(--club-ink); color: #fff; }
body.woocommerce-account .woocommerce .tc-club-btn--outline:hover, body.woocommerce-account .woocommerce .tc-club-btn--ghost:hover, body.woocommerce-account .woocommerce .tc-club-btn--primary:hover { background: var(--club-ink); border-color: var(--club-ink); color: #fff; }
body.woocommerce-account .woocommerce .tc-club-copy { color: var(--club-ink); background: #fff; }
/* (theme account button colours) */

/* hover states 2026-10-04 (beat the theme's account button hover). */
body.woocommerce-account .woocommerce button.tc-club-btn--outline:hover, body.woocommerce-account .woocommerce button.tc-club-btn--ghost:hover { background: var(--club-ink) !important; border-color: var(--club-ink) !important; color: #fff !important; }
body.woocommerce-account .woocommerce button.tc-club-btn--primary:hover, body.woocommerce-account .woocommerce a.tc-club-btn--primary:hover { background: var(--club-green) !important; border-color: var(--club-green) !important; color: var(--club-ink) !important; }
body.woocommerce-account .woocommerce button.tc-club-copy:hover { background: var(--club-green) !important; border-color: var(--club-green) !important; color: var(--club-ink) !important; }
.tc-club-btn--primary:hover { background: var(--club-green); border-color: var(--club-green); color: var(--club-ink) !important; }
.tc-club-modal__x:hover { background: var(--club-ivory); }