/**
 * Header et footer globaux.
 */

/* ---------- Header ---------- */
.tp-header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	background: rgba(3, 4, 3, .78);
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.tp-header__row {
	padding: 12px var(--tp-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px clamp(20px, 2.6vw, 46px);
}

.tp-logo { display: flex; align-items: center; gap: 11px; color: var(--tp-white); }
.tp-logo__mark { width: 34px; height: 34px; object-fit: contain; flex: none; }
.tp-logo__sub { font-weight: 500; font-size: 9.5px; letter-spacing: .34em; color: var(--tp-text-mute2); }

/* Logo principal du header : seule identité visuelle à gauche (pas de texte). */
.tp-logo--header { gap: 0; }
/* Sélecteur combiné (.tp-logo__mark.tp-logo__mark--header, déjà les deux
   classes présentes sur le <img> du header) : spécificité (0,2,0), volontairement
   supérieure à .woocommerce img / .woocommerce-page img (0,1,1) de WooCommerce,
   qui neutralise sinon notre "height" et laisse le logo (fichier source
   2500×2075px) s'afficher à une taille bien supérieure à celle prévue. */
.tp-logo__mark.tp-logo__mark--header {
	width: auto;
	height: clamp(52px, 8vw, 92px);
	max-width: 110px;
	object-fit: contain;
	flex: none;
}

.tp-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px clamp(12px, 1.5vw, 26px);
	margin-left: auto;
	font-size: clamp(13px, 1.1vw, 14.5px);
	color: var(--tp-text-muted);
	font-weight: 500;
}
.tp-nav__link { color: var(--tp-text-muted); }
.tp-nav__link.is-current { color: var(--tp-white); }
.tp-nav__link:hover { color: var(--tp-green-300); }
.tp-nav__link--muted { font-size: 13.5px; color: var(--tp-text-mute2); }
.tp-nav__sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .1); flex: none; }
.tp-caret { font-size: 8px; opacity: .7; }

.tp-navmenu { position: relative; display: flex; align-items: center; }
.tp-nav__link--trigger {
	display: flex; align-items: center; gap: 6px;
	background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
	font: inherit; color: var(--tp-text-muted);
}

.tp-navmenu__panel {
	position: absolute;
	left: 50%;
	top: calc(100% + 16px);
	transform: translateX(-50%) translateY(-6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, transform .25s ease;
	min-width: 225px;
	padding: 10px;
	border-radius: var(--tp-radius-md);
	border: 1px solid rgba(255, 255, 255, .09);
	background: rgba(5, 7, 5, .97);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .72);
	display: flex;
	flex-direction: column;
	gap: 1px;
	z-index: 60;
}
/* Comble l'interstice entre le trigger et le panneau (top: calc(100% + 16px))
   par une zone invisible mais réellement survolable, pour que le curseur ne
   quitte jamais .tp-navmenu en descendant vers le menu : sans ce pont, ce
   16px est un vrai vide (survolé = header, pas .tp-navmenu) qui déclenche un
   mouseleave prématuré. Purement interactif, aucun rendu visuel ajouté. */
.tp-navmenu__panel::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
}
.tp-navmenu__panel--right { left: auto; right: 0; transform: translateY(-6px); min-width: 210px; }
.tp-navmenu.is-open .tp-navmenu__panel,
.tp-navmenu__panel.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.tp-navmenu__panel--right.is-open { transform: translateY(0); }

.tp-navmenu__item {
	font-size: 13.5px;
	color: var(--tp-text-muted);
	padding: 9px 12px;
	border-radius: var(--tp-radius-sm);
	transition: background .2s ease, color .2s ease;
}
.tp-navmenu__item:hover { background: rgba(15, 122, 61, .16); color: var(--tp-white); }
.tp-navmenu__item--muted { color: var(--tp-text-mute2); }
.tp-navmenu__item--muted:hover { background: rgba(255, 255, 255, .05); }
.tp-navmenu__divider { height: 1px; background: rgba(255, 255, 255, .07); margin: 6px 4px; }

.tp-header__actions { display: flex; flex: none; align-items: center; gap: clamp(10px, 1.2vw, 16px); }

/* Accès direct au service (Web TV) — traitement discret, distinct du CTA
   principal (S'abonner) : contour léger, accent vert, pas de fond plein. */
.tp-webtv-trigger {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--tp-text);
	padding: 8px 14px;
	border-radius: var(--tp-radius-pill);
	border: 1px solid rgba(31, 140, 74, .3);
	background: rgba(15, 122, 61, .05);
	transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.tp-webtv-trigger:hover, .tp-webtv-trigger.is-current { border-color: rgba(31, 140, 74, .6); background: rgba(15, 122, 61, .14); color: #fff; }
.tp-webtv-trigger svg { flex: none; color: var(--tp-green-300); }

.tp-login-link { font-size: 14.5px; font-weight: 600; white-space: nowrap; color: var(--tp-text); }
.tp-login-link:hover, .tp-login-link.is-current { color: var(--tp-green-300); }

.tp-account-trigger {
	display: flex; align-items: center; gap: 9px;
	font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--tp-text);
	padding: 8px 14px 8px 9px;
	border-radius: var(--tp-radius-pill);
	border: 1px solid rgba(255, 255, 255, .12);
	transition: border-color .25s ease, background .25s ease;
}
.tp-account-trigger:hover, .tp-account-trigger.is-current { border-color: rgba(31, 140, 74, .55); background: rgba(15, 122, 61, .12); color: #fff; }
.tp-account-trigger__dot {
	display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
	background: rgba(15, 122, 61, .28); border: 1px solid rgba(31, 140, 74, .5);
	font-size: 11px; color: #cfe3d7;
}

/* Mini-panier du header — le conteneur .tp-cart-trigger-wrap est toujours
   présent dans le DOM (voir header.php) afin que WooCommerce puisse le
   rafraîchir via les cart fragments même quand la page vient du cache ;
   :empty le réduit à zéro (y compris le "gap" du flex parent) tant que le
   panier réel est vide, exactement comme s'il n'existait pas. */
.tp-cart-trigger-wrap:empty,
.tp-cart-trigger-wrap--mobile:empty { display: none; }

.tp-cart-trigger {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 11px;
	border-radius: var(--tp-radius-pill);
	border: 1px solid rgba(31, 140, 74, .3);
	background: rgba(15, 122, 61, .05);
	color: var(--tp-text);
	transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.tp-cart-trigger:hover { border-color: rgba(31, 140, 74, .6); background: rgba(15, 122, 61, .14); color: #fff; }
.tp-cart-trigger svg { flex: none; color: var(--tp-green-300); }
.tp-cart-trigger__badge {
	display: grid; place-items: center;
	min-width: 16px; height: 16px; padding: 0 4px;
	border-radius: var(--tp-radius-pill);
	background: var(--tp-green-600);
	color: var(--tp-white);
	font-size: 10.5px; font-weight: 700; line-height: 1;
}

/* Burger (mobile) */
.tp-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--tp-radius-sm);
	cursor: pointer;
	flex: none;
}
.tp-burger span { display: block; width: 16px; height: 2px; margin: 0 auto; background: var(--tp-text); transition: transform .25s ease, opacity .25s ease; }
.tp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.tp-mobile-nav {
	display: none;
	flex-direction: column;
	gap: 4px;
	padding: 10px var(--tp-gutter) 26px;
	border-top: 1px solid rgba(255, 255, 255, .07);
}
.tp-mobile-nav.is-open {
	display: flex;
	max-height: calc(100vh - 80px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.tp-mobile-nav__links { display: flex; flex-direction: column; }
.tp-mobile-nav__links a {
	padding: 13px 4px;
	font-size: 15.5px;
	color: var(--tp-text);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}
/* Regroupe visuellement un accordéon (déclencheur + panneau) sans créer de
   niveau de boîte supplémentaire dans la colonne flex du menu mobile. */
.tp-mobile-nav__group { display: contents; }
.tp-mobile-nav__heading {
	padding: 14px 4px 6px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tp-green-300);
}
.tp-mobile-nav__accordion {
	display: flex; align-items: center; gap: 8px;
	background: transparent; border: none; cursor: pointer;
	text-align: left;
	padding: 13px 4px;
	font-size: 15.5px;
	font-family: var(--font-body);
	color: var(--tp-text);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.tp-mobile-nav__accordion-panel {
	display: none;
	flex-direction: column;
	padding: 4px 4px 4px 16px;
	border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.tp-mobile-nav__accordion-panel.is-open { display: flex; }
.tp-mobile-nav__accordion-panel a { padding: 10px 0; font-size: 14px; color: var(--tp-text-muted); }
.tp-mobile-nav__sep { height: 1px; }
.tp-mobile-nav__cta { margin-top: 18px; width: 100%; }

@media (max-width: 980px) {
	.tp-nav, .tp-header__actions .tp-webtv-trigger, .tp-header__actions .tp-login-link, .tp-header__actions .tp-navmenu, .tp-header__actions .tp-btn, .tp-header__actions .tp-cart-trigger-wrap { display: none; }
	.tp-burger { display: flex; }
}

/* ---------- Footer ---------- */
.tp-footer { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, .07); background: #020302; }
.tp-footer__grid {
	padding: 44px var(--tp-gutter) 28px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	align-items: start;
	gap: 40px;
}
.tp-footer__brand { max-width: 280px; }
.tp-logo--footer { gap: 0; }
.tp-logo__mark--footer {
	width: auto;
	height: clamp(66px, 7.5vw, 92px);
	object-fit: contain;
}
.tp-footer__tagline { font-size: 14px; line-height: 1.7; color: var(--tp-text-mute3); margin: 12px 0 0; }
.tp-footer__title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--tp-green-300); margin: 0 0 13px; font-weight: 500; }
.tp-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.tp-footer__links a { color: var(--tp-text-muted); }
.tp-footer__links a:hover { color: var(--tp-white); }
.tp-footer__bottom {
	padding: 18px var(--tp-gutter) 30px;
	border-top: 1px solid rgba(255, 255, 255, .06);
	display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between;
	font-size: 13px; color: var(--tp-text-mute3);
}
/* Desktop uniquement : réduction supplémentaire des paddings verticaux —
   le mobile garde des espacements plus généreux (colonnes empilées). */
@media (min-width: 981px) {
	.tp-footer__grid { padding-top: 26px; padding-bottom: 16px; gap: 32px; }
	.tp-footer__tagline { margin-top: 6px; }
	.tp-footer__title { margin-bottom: 10px; }
	.tp-footer__links { gap: 8px; }
	.tp-footer__bottom { padding-top: 12px; padding-bottom: 16px; }
}
.tp-footer__socials { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.tp-footer__socials a { color: var(--tp-text-mute3); }
.tp-footer__socials a:hover { color: var(--tp-green-300); }
.tp-footer__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: -8px 0;
	border-radius: 8px;
	transition: color .2s ease;
}
.tp-footer__social-icon svg { display: block; }