/**
 * TacTic'Hall - Composants UI Centralisés
 *
 * Regroupe les petits composants réutilisables :
 * - Buttons (3 types : Noir, Blanc, Outline)
 * - Brands (liste de marques avec filtres)
 * - Footer (navigation, copyright, liens sociaux)
 *
 * OPTIMISÉ : Utilise les classes utilitaires de base.css
 *
 * @package TacticHall
 */

/* ==========================================================================
   Base commune pour tous les boutons
   ========================================================================== */
.wp-block-button__link,
.wp-element-button,
button[type="submit"],
.button,
.woocommerce button[type="submit"],
.woocommerce input[type="submit"],
.woocommerce .button,
.woocommerce-Button {
	padding: 0.875rem 2rem !important;
	font-weight: 500;
	border: var(--border-primary);
	border-radius: 0 !important;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
}

/* Applique text-uppercase-spaced et transition-base de base.css */
.wp-block-button__link,
.wp-element-button,
button[type="submit"],
.button {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	/* Propriétés explicites (jamais `all`). `scale` est indépendant de
	   `transform` : la pression ne se bat pas avec le reveal ni le survol. */
	transition:
		transform var(--dur-ui) var(--ease-out),
		scale var(--dur-press) var(--ease-out),
		background-color var(--dur-ui) ease,
		color var(--dur-ui) ease,
		border-color var(--dur-ui) ease,
		box-shadow var(--dur-ui) ease;
}

/* Retour à la pression : le bouton confirme qu'il a reçu le clic / le tap */
.wp-block-button__link:active,
.wp-element-button:active,
button[type="submit"]:active:not(:disabled),
.button:active {
	scale: 0.97;
}

/* Hover effect lift-shadow - Mutualisé */
.wp-block-button__link:hover,
.wp-element-button:hover,
button[type="submit"]:hover,
.button:hover,
.btn-black:hover,
.btn-white:hover,
.btn-outline:hover,
.button-white:hover,
.button-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Type 1 : Bouton NOIR (par défaut)
   Fond noir, texte blanc → Hover: fond blanc, texte blanc
   ========================================================================== */
.wp-block-button__link,
.wp-element-button,
button[type="submit"],
.button,
.btn-black {
	background: var(--color-black) !important;
	color: var(--color-white) !important;
	border-color: var(--color-black) !important;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button[type="submit"]:hover,
.button:hover,
.btn-black:hover {
	background: var(--color-white) !important;
	color: var(--color-black) !important;
	border-color: var(--color-black) !important;
}

/* ==========================================================================
   Type 2 : Bouton BLANC
   Fond blanc, texte noir → Hover: fond noir, texte blanc
   ========================================================================== */
.btn-white,
.button-white {
	background: var(--color-white) !important;
	color: var(--color-black) !important;
	border-color: var(--color-black) !important;
}

.btn-white:hover,
.button-white:hover {
	background: var(--color-black) !important;
	color: var(--color-white) !important;
	border-color: var(--color-black) !important;
}

/* ==========================================================================
   Type 3 : Bouton OUTLINE
   Fond transparent, bordure noire → Hover: fond noir, texte blanc
   ========================================================================== */
.btn-outline,
.button-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--color-black) !important;
	border-color: var(--color-black) !important;
}

.btn-outline:hover,
.button-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--color-black) !important;
	color: var(--color-white) !important;
	border-color: var(--color-black) !important;
}

/* ==========================================================================
   Variante SMALL : Bouton petit format
   Peut être combiné avec tous les types (noir, blanc, outline)
   Utilisation : class="button button--small" ou class="btn-black button--small"
   ========================================================================== */
.button--small,
.btn-small,
button.button--small {
	padding: 0.625rem 1.25rem !important;
	font-size: 0.8125rem !important;
	height: auto !important;
	min-height: 36px !important;
}

/**
 * Brand Partners Components
 * Styles pour la section marques partenaires
 *
 * @package TacticHall
 */

/* ==========================================================================
   Brand Partners Section
   ========================================================================== */

.brand-partners-section {
	background: var(--color-white);
	border-top: var(--border-primary);
}

.brand-partners-section .section-header {
	text-align: center;
	margin-bottom: 3rem;
}

/* Grille des marques - Flexbox centré pour un alignement parfait */
.brands-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5rem;
	max-width: 1200px;
	margin: 0 auto;
}

/* Largeur des cartes : 4 par ligne sur desktop */
.brands-grid .brand-card {
	flex: 0 0 calc(25% - 1.125rem);
	max-width: calc(25% - 1.125rem);
}

/* Carte de marque */
.brand-card {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	border: var(--border-primary);
	background: var(--color-white);
	text-decoration: none;
	transition: all 0.3s ease;
	min-height: 100px;
	position: relative;
	overflow: hidden;
}

.brand-card:hover {
	background: var(--color-black);
	transform: translateY(-4px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Logo de marque (image) */
.brand-logo {
	max-width: 100%;
	max-height: 60px;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: filter 0.3s ease;
}

.brand-card:hover .brand-logo {
	filter: invert(1) brightness(2);
}

/* Nom de marque (texte fallback) */
.brand-name {
	font-family: 'Arial Black', Arial, sans-serif;
	font-size: 1rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	color: var(--color-black);
	text-align: center;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

.brand-card:hover .brand-name {
	color: var(--color-white);
}

/* Message si aucune marque */
.no-brands-message {
	grid-column: 1 / -1;
	text-align: center;
	padding: 3rem 2rem;
	color: var(--color-steel);
	font-size: 1rem;
}

/* Responsive */
@media (max-width: 1024px) {
	.brands-grid {
		gap: 1rem;
	}

	/* Tablette : 3 par ligne */
	.brands-grid .brand-card {
		flex: 0 0 calc(33.333% - 0.667rem);
		max-width: calc(33.333% - 0.667rem);
		padding: 1.5rem 0.75rem;
		min-height: 80px;
	}

	.brand-name {
		font-size: 0.875rem;
	}
}

@media (max-width: 639px) {
	.brand-partners-section .section-header {
		margin-bottom: 2rem;
	}

	.brands-grid {
		gap: 0.75rem;
	}

	/* Mobile : 2 par ligne */
	.brands-grid .brand-card {
		flex: 0 0 calc(50% - 0.375rem);
		max-width: calc(50% - 0.375rem);
		padding: 1.25rem 0.5rem;
		min-height: 70px;
	}

	.brand-name {
		font-size: 0.75rem;
		letter-spacing: 0.05em;
	}
}

/**
 * Footer Components
 * Footer, navigation, copyright
 *
 * @package TacticHall
 */

/* ==========================================================================
   Footer
   Toujours sombre, sur les deux sites : sur la vitrine, on rétablit la
   palette d'origine dans le footer (sinon les tokens inversés le
   rendraient blanc). Fond légèrement relevé sur la vitrine pour le
   distinguer du corps de page, déjà noir.
   ========================================================================== */

.site-footer {
	--footer-bg: #000000;
	--footer-fg: #FFFFFF;
	--footer-muted: #A3A3A3;
	--footer-line: rgba(255, 255, 255, 0.14);
	position: relative;
	overflow: hidden;
	background: var(--footer-bg);
	color: var(--footer-fg);
	border-top: 1px solid var(--footer-line);
	padding: var(--spacing-2xl) 0 0;
}

.site-vitrine .site-footer {
	--color-black: #000000;
	--color-white: #FFFFFF;
	--color-gunmetal: #404040;
	--color-gray-darker: #333333;
	--border-primary: 2px solid #000000;
	--footer-bg: #0F0F0F;
}

/* Bande d'appel vers l'autre site du réseau */
.footer-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--spacing-xl);
	padding-bottom: var(--spacing-2xl);
	margin-bottom: var(--spacing-2xl);
	border-bottom: 1px solid var(--footer-line);
}

.footer-cta__title {
	font-family: 'Stencil', Impact, 'Arial Black', sans-serif;
	font-size: clamp(1.75rem, 4vw, 3rem);
	line-height: 1.05;
	margin: 0 0 var(--spacing-xs);
	color: var(--footer-fg);
}

.footer-cta__lead {
	max-width: 56ch;
	margin: 0;
	color: var(--footer-muted);
}

.footer-cta__button {
	display: inline-flex !important;
	align-items: center;
	gap: var(--spacing-sm);
	white-space: nowrap;
}

.footer-cta__arrow {
	display: inline-block;
	transition: transform 0.3s var(--ease-out-smooth);
}

.footer-cta__button:hover .footer-cta__arrow,
.footer-cta__button:focus-visible .footer-cta__arrow {
	transform: translateX(4px);
}

/* Grille : identité plus large, puis horaires, navigation, légal */
.footer-content {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2.5fr);
	gap: var(--spacing-xl);
	margin-bottom: var(--spacing-2xl);
}

.footer-section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	min-width: 0;
}

.footer-logo-text {
	font-family: 'Stencil', Impact, 'Arial Black', sans-serif;
	font-size: 1.75rem;
	line-height: 1;
	letter-spacing: 0.03em;
	margin: 0;
	color: var(--footer-fg);
}

.footer-tagline {
	font-size: 0.8125rem;
	color: var(--footer-muted);
	margin: 0 0 var(--spacing-sm);
}

/* Titres de colonnes : petits, discrets, la donnée porte la hiérarchie */
.footer-heading {
	font-family: inherit !important;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0 0 var(--spacing-xs);
	color: var(--footer-muted);
}

.footer-section ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.footer-section li {
	margin: 0;
}

.footer-section a {
	font-size: 0.9375rem;
	color: var(--footer-fg);
	text-decoration: none;
	transition: color 0.2s ease;
}

.footer-section a:hover {
	color: var(--footer-muted);
}

.footer-section address {
	font-style: normal;
	line-height: 1.5;
	margin: 0;
}

.footer-section address a {
	color: var(--footer-muted);
}

.footer-section address a:hover {
	color: var(--footer-fg);
}

/* Numéro de téléphone : information la plus utile, mise en avant */
.footer-section .footer-phone {
	font-family: 'Stencil', Impact, 'Arial Black', sans-serif;
	font-size: 1.5rem;
	line-height: 1.1;
}

/* Logo TWINT sous les informations légales (boutique) : son fond noir se fond dans le footer */
.footer-payment-logo {
	display: block;
	width: 120px;
	height: auto;
	margin-top: var(--spacing-md);
}

/* Menu sur deux colonnes (la vitrine a 7 ancres) */
.footer-section .footer-menu {
	grid-template-columns: repeat(2, minmax(0, max-content));
	column-gap: var(--spacing-lg);
}

/* Horaires — structure de base (composant réutilisé : page Contact + footer) */
.horaires-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.horaires-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.35rem 0;
	border-bottom: var(--border-light);
}

.horaires-list li:last-child {
	border-bottom: none;
}

.horaires-day {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-gunmetal);
}

.horaires-time {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-black);
}

/* Footer : horaires compacts sur fond sombre */
.footer-horaires .horaires-list {
	width: 100%;
	max-width: 320px;
	gap: 0.4rem;
}

.footer-horaires .horaires-list li {
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--spacing-sm);
	padding: 0 0 0.4rem;
	border-bottom: 1px solid var(--footer-line);
}

.footer-horaires .horaires-list li:last-child {
	border-bottom: none;
}

.footer-horaires .horaires-day {
	font-size: 0.875rem;
	color: var(--footer-muted);
}

.footer-horaires .horaires-time {
	font-size: 0.875rem;
	color: var(--footer-fg);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Réseaux sociaux : carrés (charte : angles droits) */
.footer-social-links {
	display: flex;
	gap: var(--spacing-xs);
	margin-top: var(--spacing-sm);
}

.footer-section .footer-social-links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--footer-line);
	color: var(--footer-fg);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.footer-section .footer-social-links a:hover {
	background: var(--footer-fg);
	color: var(--footer-bg);
	border-color: var(--footer-fg);
}

.footer-social-links svg {
	width: 18px;
	height: 18px;
}

/* Barre de bas de page : copyright à gauche, crédits à droite */
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--spacing-xs) var(--spacing-lg);
	padding: var(--spacing-md) 0;
	border-top: 1px solid var(--footer-line);
}

.footer-bottom p {
	font-size: 0.8125rem;
	color: var(--footer-muted);
	margin: 0;
}

.footer-bottom a {
	color: var(--footer-fg);
	text-decoration: none;
	font-weight: 600;
}

.footer-bottom a:hover {
	color: var(--footer-muted);
}

/* Signature : logotype géant qui sort par le bas, décoratif */
.footer-wordmark {
	font-family: 'Stencil', Impact, 'Arial Black', sans-serif;
	font-size: clamp(3.5rem, 15.5vw, 15rem);
	line-height: 0.78;
	text-align: center;
	white-space: nowrap;
	color: var(--footer-line);
	margin-bottom: -0.12em;
	user-select: none;
	pointer-events: none;
}

/* Responsive Footer */
@media (max-width: 1024px) {
	.footer-content {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.site-footer {
		padding-top: var(--spacing-xl);
	}

	.footer-cta {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
		padding-bottom: var(--spacing-xl);
		margin-bottom: var(--spacing-xl);
	}

	.footer-cta__button {
		justify-content: center;
		width: 100%;
	}

	.footer-content {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
		margin-bottom: var(--spacing-xl);
	}

	.footer-bottom {
		flex-direction: column;
	}
}
/**
 * TacTic'Hall - Composants globaux réutilisables
 *
 * Composants utilisés sur plusieurs pages :
 * - Headers de page
 * - Formulaires (labels, inputs, validation)
 * - Tableaux de données
 * - Messages/Notices WooCommerce
 * - Breadcrumb
 * - Layout 2 colonnes
 *
 * @package TacticHall
 */

/* ==========================================================================
   Page Header (Utilisé sur toutes les pages)
   ========================================================================== */

.page-header {
	padding: var(--spacing-lg) 0;
	margin-bottom: 0;
	border-bottom: var(--border-primary);
}

/* Réduire le padding-top des sections shop/produit (qui suivent un page-header)
   pour éviter un grand vide entre titre+breadcrumb et les filtres/contenu */
.section.shop-page,
.section.product-section {
	padding-top: var(--spacing-lg);
}

.page-header__breadcrumb {
	margin-bottom: var(--spacing-sm);
}

.page-header__title {
	/* Utilise .font-stencil + .text-uppercase-spaced de base.css */
	font-size: clamp(2rem, 5vw, 2.5rem);
	margin: 0 0 var(--spacing-xs) 0;
	color: var(--color-black);
}

.page-header__description {
	font-size: 1.125rem;
	color: var(--color-steel);
	margin: 0;
	max-width: 800px;
}

/* ==========================================================================
   Breadcrumb (Fil d'ariane)
   ========================================================================== */

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-xs);
	font-size: 0.875rem;
	color: var(--color-steel);
	margin-bottom: var(--spacing-md);  /* 1.5rem = 24px d'espace entre breadcrumb et titre */
}

.breadcrumb__item {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.breadcrumb__link {
	color: var(--color-steel);
	text-decoration: none;
	transition: color var(--transition-base);
}

.breadcrumb__link:hover {
	color: var(--color-black);
}

.breadcrumb__separator {
	color: var(--color-border);
}

.breadcrumb__current {
	color: var(--color-black);
	font-weight: 500;
}

/* ==========================================================================
   Formulaires réutilisables
   ========================================================================== */

.form-row {
	margin-bottom: var(--spacing-md);
}

.form-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: var(--spacing-xs);
	color: var(--color-black);
}

.form-label--required::after {
	content: '*';
	color: var(--color-black);
	margin-left: 0.25rem;
}

/* Ne pas toucher aux labels - Laisser WooCommerce gérer comme il le fait de base */

/* Styles globaux pour TOUS les inputs (WordPress, WooCommerce, formulaires custom) */
.form-input,
.form-textarea,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select,
.input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select,
.woocommerce-Input,
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper textarea,
.woocommerce-input-wrapper select {
	width: 100% !important;
	padding: 0.75rem 1rem !important;
	border: 2px solid var(--color-border) !important;
	border-radius: 0 !important;
	/* 16px minimum : en dessous, iOS zoome la page au focus d'un champ */
	font-size: 1rem !important;
	color: var(--color-black) !important;
	background: var(--color-white) !important;
	transition: border-color var(--transition-base) !important;
	font-family: inherit !important;
	box-sizing: border-box !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
}

/* Styles spécifiques pour les SELECT - Ajouter flèche personnalisée */
select,
.form-select,
.woocommerce select,
.woocommerce-input-wrapper select {
	padding-right: 2.5rem !important; /* Espace pour la flèche */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23000000' d='M1.41 0L6 4.59L10.59 0L12 1.41l-6 6l-6-6z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	background-size: 12px !important;
	cursor: pointer !important;
}

/* Focus state pour tous les inputs et select.
   Cases à cocher et boutons radio exclus : sur ces contrôles la bordure EST le
   témoin visuel, `outline: none` supprimerait le seul repère de focus clavier
   (WCAG 2.4.7). Leur focus est traité dans le bloc « Checkbox & Radio ». */
.form-input:focus,
.form-textarea:focus,
.form-select:focus,
input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus,
.woocommerce input:not([type="checkbox"]):not([type="radio"]):focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
	outline: none !important;
	border-color: var(--color-black) !important;
}

/* Placeholder - Masquer au focus et à la saisie pour éviter chevauchement */
.form-input::placeholder,
.form-textarea::placeholder,
input::placeholder,
textarea::placeholder,
.woocommerce input::placeholder,
.woocommerce textarea::placeholder {
	color: var(--color-steel) !important;
	opacity: 0.6 !important;
	transition: opacity 0.2s ease !important;
}

.form-input:focus::placeholder,
.form-textarea:focus::placeholder,
input:focus::placeholder,
textarea:focus::placeholder,
.woocommerce input:focus::placeholder,
.woocommerce textarea:focus::placeholder {
	opacity: 0 !important;
}

/* Compatibilité navigateurs pour placeholder */
.form-input::-webkit-input-placeholder,
input::-webkit-input-placeholder {
	color: var(--color-steel) !important;
	opacity: 0.6 !important;
}

.form-input:focus::-webkit-input-placeholder,
input:focus::-webkit-input-placeholder {
	opacity: 0 !important;
}

.form-input:-moz-placeholder,
input:-moz-placeholder {
	color: var(--color-steel) !important;
	opacity: 0.6 !important;
}

.form-input:focus:-moz-placeholder,
input:focus:-moz-placeholder {
	opacity: 0 !important;
}

.form-input::-moz-placeholder,
input::-moz-placeholder {
	color: var(--color-steel) !important;
	opacity: 0.6 !important;
}

.form-input:focus::-moz-placeholder,
input:focus::-moz-placeholder {
	opacity: 0 !important;
}

.form-input:-ms-input-placeholder,
input:-ms-input-placeholder {
	color: var(--color-steel) !important;
	opacity: 0.6 !important;
}

.form-input:focus:-ms-input-placeholder,
input:focus:focus:-ms-input-placeholder {
	opacity: 0 !important;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.input-text:focus,
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
	outline: none !important;
	border-color: var(--color-black) !important;
	box-shadow: none !important;
}

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled,
input:disabled,
textarea:disabled,
select:disabled {
	background: var(--color-smoke) !important;
	cursor: not-allowed !important;
	opacity: 0.6 !important;
}

.form-input[readonly],
.form-textarea[readonly],
input[readonly],
textarea[readonly] {
	background: var(--color-smoke) !important;
	cursor: not-allowed !important;
}

.form-textarea,
textarea {
	min-height: 120px !important;
	resize: vertical !important;
}

/* Select - Flèche custom */
.form-select,
select,
.woocommerce select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: calc(100% - 1rem) center !important;
	background-size: 12px !important;
	padding-right: 3rem !important;
}

/* Exceptions : inputs qui ne doivent PAS avoir les styles ci-dessus */
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="file"],
input[type="range"],
.quantity input[type="number"],
button {
	width: auto !important;
	padding: initial !important;
	border: initial !important;
	appearance: initial !important;
	-webkit-appearance: initial !important;
}

/* Checkbox & Radio : même reset que les exceptions ci-dessus, mais SANS
   `border: initial`. `appearance: none` supprime le rendu natif du navigateur ;
   combiné à une remise à zéro de la bordure en !important, la case devenait
   blanche sur blanc — invisible tant qu'elle n'était pas cochée, et impossible
   à rétablir depuis un composant. Le cadre est posé juste en dessous. */
.form-checkbox,
.form-radio,
input[type="checkbox"],
input[type="radio"] {
	margin-right: var(--spacing-xs);
	accent-color: var(--color-black);
	width: auto !important;
	padding: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

/* Cadre gris toujours visible à l'état décoché (4,7:1 sur blanc, au-dessus du
   3:1 exigé par WCAG 1.4.11 pour les contours de contrôles). Angles droits
   conformes à la charte. Les contrôles WooCommerce Blocks, plus spécifiques,
   gardent leur propre rendu — voir pages/checkout.css. */
input[type="checkbox"] {
	border: 2px solid var(--color-steel);
	border-radius: 0;
	background-color: var(--color-white);
	transition: border-color var(--transition-fast),
		background-color var(--transition-fast);
}

input[type="checkbox"]:hover {
	border-color: var(--color-black);
}

/* Coché : case pleine noire */
input[type="checkbox"]:checked {
	border-color: var(--color-black);
	background-color: var(--color-black);
}

/* Focus clavier visible (la bordure seule ne suffit pas à le distinguer) */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: 2px solid var(--color-black);
	outline-offset: 2px;
}

.form-checkbox-label,
.form-radio-label {
	display: flex;
	align-items: center;
	font-size: 0.9375rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

/* Messages de validation */
.form-error {
	display: block;
	margin-top: var(--spacing-xs);
	font-size: 0.875rem;
	color: #d32f2f;
}

.form-input--error {
	border-color: #d32f2f;
}

/* ==========================================================================
   Tableaux de données
   ========================================================================== */

.data-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--spacing-lg);
}

.data-table thead {
	background: var(--color-black);
	color: var(--color-white);
}

.data-table th {
	padding: var(--spacing-sm);
	text-align: left;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.data-table td {
	padding: var(--spacing-sm);
	border-bottom: 1px solid var(--color-border);
	font-size: 0.9375rem;
}

.data-table tbody tr:hover td {
	background: var(--color-smoke);
}

/* Variante avec bordures */
.data-table--bordered th,
.data-table--bordered td {
	border: var(--border-primary);
}

/* Responsive : scroll horizontal sur mobile */
@media (max-width: 767px) {
	.data-table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.data-table th,
	.data-table td {
		padding: var(--spacing-xs);
		font-size: 0.875rem;
	}
}

/* ==========================================================================
   Messages / Notices WooCommerce
   ========================================================================== */

.woocommerce-notice {
	padding: var(--spacing-sm) var(--spacing-md);
	margin-bottom: var(--spacing-md);
	border-left: 4px solid var(--color-black);
	background: var(--color-smoke);
	font-size: 0.9375rem;
	line-height: 1.6;
	position: relative;
}

.woocommerce-notice::before {
	display: none;
}

/* Variantes */
.woocommerce-notice--info {
	border-left-color: #2196F3;
	background: #E3F2FD;
}

.woocommerce-notice--success {
	border-left-color: #4CAF50;
	background: #E8F5E9;
}

.woocommerce-notice--error {
	border-left-color: #d32f2f;
	background: #FFEBEE;
	color: #d32f2f;
}

/* Message avec icône */
.woocommerce-notice--with-icon {
	padding-left: 3.5rem;
}

.woocommerce-notice--with-icon::before {
	display: block;
	position: absolute;
	left: var(--spacing-md);
	top: var(--spacing-sm);
	font-size: 1.25rem;
}

/* Boutons dans les messages */
.woocommerce-notice .button {
	margin-top: var(--spacing-xs);
	padding: var(--spacing-xs) var(--spacing-sm);
	font-size: 0.8125rem;
	height: auto;
	min-width: auto;
}

/* ==========================================================================
   Layout 2 colonnes (Sidebar + Contenu principal)
   ========================================================================== */

.two-col-layout {
	display: flex;
	gap: var(--grid-gap);
	align-items: flex-start;
}

.two-col-layout__main {
	flex: 1;
	min-width: 0;
}

.two-col-layout__sidebar {
	flex: 0 0 280px;
}

.two-col-layout__sidebar--wide {
	flex: 0 0 384px;
}

.two-col-layout__sidebar--sticky {
	position: sticky;
	top: 120px;
}

/* Responsive : passage en colonne unique */
@media (max-width: 1024px) {
	.two-col-layout {
		flex-direction: column;
	}

	.two-col-layout__sidebar {
		width: 100%;
		flex: 1;
	}

	.two-col-layout__sidebar--sticky {
		position: static;
	}
}

/* ==========================================================================
   Page WooCommerce
   ========================================================================== */

/* Note: Le padding est géré par les .container dans chaque template (page.php, archive-product.php, etc.)
   Pas besoin de padding global sur .woocommerce-page qui cible le <body> */

/* ==========================================================================
   Titres de section réutilisables
   ========================================================================== */

.section-title {
	/* Utilise .title-stencil de base.css */
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	margin: 0 0 var(--spacing-md) 0;
	color: var(--color-black);
}

.subsection-title {
	/* Utilise .title-stencil de base.css */
	font-size: clamp(1.25rem, 3vw, 1.5rem);
	margin: 0 0 var(--spacing-md) 0;
	color: var(--color-black);
}

.section-subtitle {
	font-size: 1.125rem;
	color: var(--color-steel);
	margin: calc(var(--spacing-xs) * -1) auto var(--spacing-md) auto; /* Centrage horizontal avec auto */
	max-width: 600px; /* Limite la largeur pour meilleure lisibilité */
}

/* Variantes tailles de titres */
.title-hero {
	font-size: clamp(2rem, 5vw, 3.5rem);
}

.title-large {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.title-small {
	font-size: 0.875rem;
	letter-spacing: 0.8px;
}

/* ==========================================================================
   Composants - Badge réutilisable
   ========================================================================== */

.badge {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: var(--border-primary);
}

.badge--black {
	background: var(--color-black);
	color: var(--color-white);
}

.badge--white {
	background: var(--color-white);
	color: var(--color-black);
}

.badge--smoke {
	background: var(--color-smoke);
	color: var(--color-black);
}

/* ==========================================================================
   Composants - Card Box réutilisable
   ========================================================================== */

.card-box {
	padding: var(--spacing-md);
	background: var(--color-white);
	border: var(--border-primary);
}

.card-box--smoke {
	background: var(--color-smoke);
}

/* ==========================================================================
   Composants - Icon Box réutilisable
   ========================================================================== */

.icon-box-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	border: var(--border-primary);
}

.icon-box-circle--sm {
	width: 48px;
	height: 48px;
}

.icon-box-circle--md {
	width: 64px;
	height: 64px;
}

.icon-box-circle--lg {
	width: 80px;
	height: 80px;
}

.icon-box-round {
	border-radius: 50%;
}

/* ==========================================================================
   Composants - CTA Sections (réutilisable)
   ========================================================================== */

.cta-section {
	background: var(--color-smoke);
	border-top: var(--border-primary);
	border-bottom: var(--border-primary);
	text-align: center;
}

.cta-content {
	max-width: 800px;
	margin: 0 auto;
}

.cta-title {
	font-family: var(--wp--preset--font-family--stencil);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 var(--spacing-md) 0;
}

.cta-text {
	font-size: 1.125rem;
	color: var(--color-gunmetal);
	margin: 0 0 var(--spacing-xl) 0;
	line-height: 1.6;
}

.cta-buttons {
	display: flex;
	gap: var(--spacing-sm);
	justify-content: center;
	flex-wrap: wrap;
}

/* ==========================================================================
   Composants - Icon Box (réutilisable)
   ========================================================================== */

.icon-box {
	text-align: center;
	padding: var(--spacing-sm) var(--spacing-md);
}

/* Dans reassurance-grid, pas de padding vertical sur les icon-box */
.reassurance-grid .icon-box {
	padding-top: 0;
	padding-bottom: 0;
}

.icon-box__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	background: var(--color-white);
	border: var(--border-primary);
	margin: 0 auto var(--spacing-md);
	color: var(--color-black);
}

.icon-box__icon svg {
	width: 48px;
	height: 48px;
}

.icon-box__title {
	font-family: var(--wp--preset--font-family--stencil);
	font-size: 1.125rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 var(--spacing-sm) 0;
	color: var(--color-black);
}

.icon-box__text {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-gunmetal);
	margin: 0;
}

/* ==========================================================================
   Composants - Boutons Icon (carousel, pagination)
   ========================================================================== */

.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	background: var(--color-white);
	border: var(--border-primary);
	cursor: pointer;
	transition: all var(--transition-base);
	color: var(--color-black);
}

.btn-icon:hover:not(:disabled) {
	background: var(--color-black);
	color: var(--color-white);
}

.btn-icon:active:not(:disabled) {
	transform: scale(0.95);
}

.btn-icon:disabled {
	opacity: 0.3;
	cursor: not-allowed;
	pointer-events: none;
}

.btn-icon svg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   Composants - Boutons utilitaires
   ========================================================================== */

.btn-small {
	padding: var(--spacing-xs) var(--spacing-sm);
	font-size: 0.8125rem;
}

.btn-full-width {
	width: 100%;
	text-align: center;
	justify-content: center;
}
/**
 * WooCommerce Styles Centralisés
 * Tous les overrides et styles WooCommerce du thème
 *
 * @package TacticHall
 */

/* ==========================================================================
   CART - WooCommerce Cart Blocks
   ========================================================================== */

/* Largeur max des blocs */
.wp-block-woocommerce-cart {
	max-width: none !important;
}

/* Panier vide - Masquer le bloc "Nouveau dans la boutique" (Product New Block) */
/* Ce bloc est ajouté dans l'éditeur WordPress sur la page Panier */
.woocommerce-cart .wp-block-product-new,
.woocommerce-cart .wp-block-woocommerce-product-new,
.woocommerce-cart .wc-block-product-new {
	display: none !important;
}

/* Masquer le titre H2 "Nouveau dans la boutique" qui précède le bloc de produits */
/* Utilise le sélecteur adjacent pour cibler uniquement le H2 suivi du bloc produits */
.woocommerce-cart h2.wp-block-heading + .wp-block-product-new,
.woocommerce-cart h2.wp-block-heading + .wp-block-woocommerce-product-new,
.woocommerce-cart h2.wp-block-heading + .wc-block-product-new {
	display: none !important;
}

.woocommerce-cart h2.wp-block-heading:has(+ .wp-block-product-new),
.woocommerce-cart h2.wp-block-heading:has(+ .wp-block-woocommerce-product-new),
.woocommerce-cart h2.wp-block-heading:has(+ .wc-block-product-new) {
	display: none !important;
}

/* Items du panier - bordure cohérente avec le thème */
.wc-block-components-order-summary-item {
	border: var(--border-primary) !important;
	padding: var(--spacing-sm) !important;
	margin-bottom: var(--spacing-sm) !important;
	border-radius: 0 !important;
	background: var(--color-white);
}

/* Image produit - Sans bordure pour un affichage propre */
.wc-block-components-order-summary-item__image {
	border: none;
}

/* Lien supprimer (simple, discret) */
.wc-block-cart-item__remove-link {
	font-size: 0.875rem !important;
	color: var(--color-steel) !important;
	text-decoration: underline !important;
	transition: color var(--transition-base);
	border: none !important;
	background: none !important;
	padding: 0 !important;
}

.wc-block-cart-item__remove-link:hover {
	color: var(--color-black) !important;
	text-decoration: underline !important;
	background: none !important;
}

/* Récapitulatif (totaux) */
.wp-block-woocommerce-cart-totals-block {
	border: var(--border-primary) !important;
	padding: var(--spacing-lg) var(--spacing-md) !important;
	background: var(--color-white);
	border-radius: 0 !important;
}

/* Titre récapitulatif panier */
.wp-block-woocommerce-cart-order-summary-heading,
.wp-block-woocommerce-cart-order-summary-heading-block,
.wc-block-cart__totals-title {
	/* Utilise .font-stencil de base.css */
	font-size: 1.5rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	margin: 0 0 var(--spacing-md) 0 !important;
	font-weight: normal !important;
}

/* Total agrandi */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	color: var(--color-black);
}

/* Bouton "Passer commande" */
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button,
.wc-block-cart__submit-button {
	width: 100% !important;
	height: 48px !important;
	background: var(--color-black) !important;
	border: var(--border-primary) !important;
	border-radius: 0 !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	color: var(--color-white) !important;
	cursor: pointer;
	transition: all var(--transition-base);
}

.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover,
.wc-block-cart__submit-button:hover {
	background: var(--color-white) !important;
	color: var(--color-black) !important;
}

/* ==========================================================================
   CHECKOUT BLOCKS - Style "outlined label" (WooCommerce Blocks)
   Label fixe sur la bordure supérieure de l'input, fond blanc qui masque
   la bordure en dessous. Design cohérent quel que soit l'état (vide/rempli),
   pas d'animation de floating label native.
   ========================================================================== */

/* Wrapper : position relative pour positionner le label en absolute */
.wc-block-components-text-input,
.wc-block-components-combobox-control {
	position: relative;
}

/* Inputs et selects : padding uniforme, plus besoin de place pour label flottant */
.wc-block-components-text-input input,
.wc-block-components-combobox-control input,
.wc-block-components-address-form select,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
	padding: 1rem !important;
	height: 56px !important;
	min-height: 56px !important;
}

/* Selects WC Blocks : place pour la flèche à droite */
.wc-block-components-address-form select,
.wc-block-components-country-input select,
.wc-block-components-state-input select {
	padding-right: 2.5rem !important;
}

/* Label : toujours ancré sur la bordure supérieure (fond blanc masque la bordure) */
.wc-block-components-text-input label,
.wc-block-components-combobox-control label {
	position: absolute !important;
	top: -0.5rem !important;
	left: 0.75rem !important;
	margin: 0 !important;
	padding: 0 0.375rem !important;
	background: var(--color-white) !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	color: var(--color-black) !important;
	line-height: 1 !important;
	transform: none !important;
	pointer-events: none !important;
	transition: color var(--transition-base) !important;
	z-index: 1;
}

/* ==========================================================================
   CHECKOUT - Page Commande
   ========================================================================== */

/* Message légal TacTic'Hall (Retrait en magasin) */
.tactichall-legal-notice {
	background: var(--color-smoke) !important;
	padding: var(--spacing-sm) !important;
	margin-bottom: var(--spacing-md) !important;
	border-left: 4px solid var(--color-black) !important;
	border-top: var(--border-primary);
	border-right: var(--border-primary);
	border-bottom: var(--border-primary);
}

/* Récapitulatif de commande (Sidebar) */
#order_review {
	position: sticky;
	top: 120px;
	border: var(--border-primary);
	padding: var(--spacing-lg) var(--spacing-md);
	background: var(--color-white);
}

#order_review_heading {
	/* Utilise .font-stencil de base.css */
	font-size: 1.125rem;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 var(--spacing-md) 0;
}

/* Tableau récapitulatif commande */
.woocommerce-checkout-review-order-table img {
	border: none !important;
	max-width: 60px;
	height: auto;
}

/* Total agrandi */
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
	font-size: 1.25rem;
	font-weight: 700;
	padding-top: var(--spacing-md);
}

/* Méthodes de paiement WooCommerce */
#payment {
	background: transparent;
	border: none;
	padding: 0;
	margin-top: var(--spacing-lg);
}

#payment ul.payment_methods {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--spacing-md) 0;
	border: none;
}

#payment ul.payment_methods li {
	margin-bottom: var(--spacing-xs);
	padding: var(--spacing-sm);
	border: 2px solid var(--color-border);
	background: var(--color-white);
	transition: border-color var(--transition-base);
}

#payment ul.payment_methods li.wc_payment_method input[type="radio"]:checked + label {
	font-weight: 600;
}

#payment ul.payment_methods li:hover {
	border-color: var(--color-black);
}

#payment ul.payment_methods li label {
	font-size: 0.9375rem;
	font-weight: 500;
	margin: 0;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
}

#payment div.payment_box {
	background: var(--color-smoke);
	border: none;
	padding: var(--spacing-sm);
	margin: var(--spacing-xs) 0 0 0;
	font-size: 0.875rem;
	border-radius: 0;
}

#payment div.payment_box::before {
	display: none;
}

/* Conditions générales */
.woocommerce-terms-and-conditions-wrapper {
	margin: var(--spacing-md) 0;
}

.woocommerce-checkout .woocommerce-terms-and-conditions {
	max-height: 200px;
	overflow-y: auto;
	border: 2px solid var(--color-border);
	padding: var(--spacing-sm);
	font-size: 0.875rem;
	line-height: 1.6;
	margin-bottom: var(--spacing-sm);
}

/* Bouton "Passer commande" */
.woocommerce-checkout #place_order {
	width: 100%;
	height: 56px;
	background: var(--color-black);
	border: var(--border-primary);
	border-radius: 0;
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-white);
	cursor: pointer;
	transition: all var(--transition-base);
	margin-top: var(--spacing-sm);
}

.woocommerce-checkout #place_order:hover {
	background: var(--color-white);
	color: var(--color-black);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.woocommerce-checkout #place_order:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Responsive Checkout */
@media (max-width: 767px) {
	#order_review {
		position: static;
		padding: var(--spacing-md) var(--spacing-sm);
	}

	.woocommerce-checkout #place_order {
		height: 52px;
		font-size: 0.9375rem;
	}
}

/* ==========================================================================
   MY ACCOUNT - Page Mon Compte
   ========================================================================== */

/* Navigation latérale My Account */
.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 280px;
	border: var(--border-primary);
	background: var(--color-white);
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	border-bottom: var(--border-primary);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child {
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: var(--spacing-sm) var(--spacing-md);
	color: var(--color-black);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all var(--transition-base);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--color-smoke);
	padding-left: var(--spacing-lg);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--color-black);
	color: var(--color-white);
	font-weight: 600;
}

/* Contenu My Account */
.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1;
	min-width: 0;
	border: var(--border-primary);
	background: var(--color-white);
	padding: var(--spacing-lg);
}

/* Statuts commandes (Spécifique My Account) */
.woocommerce-account .woocommerce-order-status {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: var(--border-primary);
	background: var(--color-white);
}

.woocommerce-account .woocommerce-order-status.status-completed {
	background: var(--color-black);
	color: var(--color-white);
}

/* Adresses (1 colonne - Facturation puis Livraison) */
.woocommerce-account .woocommerce-Addresses {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--spacing-lg) !important;
	margin: 0 !important;
}

.woocommerce-account .woocommerce-Address {
	border: var(--border-primary) !important;
	padding: var(--spacing-lg) !important;
	background: var(--color-white) !important;
	display: flex !important;
	flex-direction: column !important;
	min-height: 200px;
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
	margin: 0 !important;
}

.woocommerce-account .woocommerce-Address-title h3 {
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	margin: 0 0 var(--spacing-md) 0 !important;
	padding-bottom: var(--spacing-sm) !important;
	border-bottom: 2px solid var(--color-border) !important;
	color: var(--color-black) !important;
}

.woocommerce-account .woocommerce-Address address {
	font-style: normal;
	line-height: 1.6;
	margin-bottom: var(--spacing-sm);
	flex-grow: 1;
}

.woocommerce-account .woocommerce-Address .edit {
	font-size: 0.875rem !important;
	text-decoration: underline !important;
	color: var(--color-black) !important;
	transition: color var(--transition-base);
	text-align: left !important;
	display: block !important;
	width: auto !important;
	margin-left: 0 !important;
	float: none !important;
}

.woocommerce-account .woocommerce-Address .edit:hover {
	color: var(--color-gunmetal) !important;
}

/* Responsive My Account */
@media (max-width: 1024px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		flex: 1;
		width: 100%;
		margin-bottom: var(--spacing-lg);
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.woocommerce-account .woocommerce-MyAccount-content {
		padding: var(--spacing-md);
	}

	/* Navigation mobile */
	.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
		padding: var(--spacing-sm) var(--spacing-sm);
		font-size: 0.8125rem;
	}

	/* Adresses - Réduire padding sur mobile */
	.woocommerce-account .woocommerce-Address {
		padding: var(--spacing-md) !important;
	}
}

/* ==========================================================================
   PRODUCT PAGE - Styles spécifiques produits
   ========================================================================== */

/* Galerie produit */
.product-gallery .woocommerce-product-gallery {
	border: var(--border-primary);
	background: var(--color-white);
	padding: 1rem;
	position: relative;
}

.product-gallery .woocommerce-product-gallery__wrapper {
	margin: 0;
}

.product-gallery .woocommerce-product-gallery__image {
	border: none;
	margin-bottom: var(--spacing-xs);
}

.product-gallery .woocommerce-product-gallery__image img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain; /* Sécurité : évite tout crop si une future photo a un ratio différent */
}

/* Thumbnails galerie */
.product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spacing-xs);
	margin-top: var(--spacing-sm);
	padding: 0;
	list-style: none;
}

.product-gallery .flex-control-thumbs li {
	margin: 0;
}

.product-gallery .flex-control-thumbs li img {
	border: var(--border-primary);
	cursor: pointer;
	opacity: 0.6;
	transition: opacity var(--transition-base);
}

.product-gallery .flex-control-thumbs li img:hover,
.product-gallery .flex-control-thumbs li img.flex-active {
	opacity: 1;
	border-color: var(--color-black);
}

/* Sale badge - Style rectangulaire collé en haut à gauche */
.product-gallery .onsale {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	background: var(--color-black) !important;
	color: var(--color-white) !important;
	border: var(--border-primary) !important;
	border-top: none !important;
	border-left: none !important;
	padding: 0.625rem 1.25rem !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	z-index: 2 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	min-width: 80px !important;
	min-height: auto !important;
	text-align: center !important;
	line-height: 1.4 !important;
	width: auto !important;
	height: auto !important;
}

/* Prix produit */
.product-price {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-black);
}

.product-price del {
	opacity: 0.5;
	font-size: 1.5rem;
	margin-right: var(--spacing-xs);
}

/* Box action unifiée : prix + quantité + bouton panier */
.product-add-to-cart {
	margin: 0;
	padding: var(--spacing-md);
	background: var(--color-smoke);
	border: var(--border-primary);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

/* Prix à l'intérieur de la box panier - grand et visible */
.product-add-to-cart .product-price {
	margin: 0;
}

.product-add-to-cart .cart {
	display: flex;
	gap: var(--spacing-sm);
	align-items: stretch;
	flex-wrap: wrap;
}

/* Sélecteur quantité - input-group 48px aligné avec .single_add_to_cart_button
   (le reset global `* { box-sizing: border-box }` de style.css rend toutes les hauteurs
   identiques : 48px = 48px total, bordures incluses) */
.quantity-wrapper {
	display: inline-flex;
	align-items: stretch;
	border: 2px solid var(--color-black);
	background: var(--color-white);
	height: 48px;
	flex-shrink: 0;
	overflow: hidden;
	line-height: 0;
}

/* !important nécessaire pour écraser les règles globales
   button { width: auto !important; border: initial !important; padding: initial !important } */
.quantity-btn {
	flex: 0 0 44px;
	width: 44px !important;
	min-width: 44px;
	align-self: stretch;
	border: none !important;
	background: var(--color-white);
	color: var(--color-black);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background var(--transition-base), color var(--transition-base);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	box-sizing: border-box !important;
}

.quantity-btn:first-child {
	border-right: 2px solid var(--color-black) !important;
}

.quantity-btn:last-child {
	border-left: 2px solid var(--color-black) !important;
}

.quantity-btn:hover:not(:disabled) {
	background: var(--color-black);
	color: var(--color-white);
}

.quantity-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* !important nécessaire pour écraser les règles globales
   input[type="number"] { width: 100% !important; padding: 0.75rem 1rem !important; border: 2px solid ... !important; box-sizing: border-box !important } */
.quantity input[type="number"],
.quantity-wrapper input[type="number"] {
	flex: 0 0 64px;
	width: 64px !important;
	min-width: 64px !important;
	align-self: stretch;
	height: auto !important;
	text-align: center;
	border: none !important;
	background: var(--color-white) !important;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-black);
	appearance: textfield !important;
	-moz-appearance: textfield !important;
	-webkit-appearance: textfield !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}

.quantity-wrapper input[type="number"]:focus {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quantity input[type="number"]::-webkit-outer-spin-button,
.quantity input[type="number"]::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/* Bouton Add to Cart */
.single_add_to_cart_button {
	flex: 1;
	min-width: 180px;
	height: 48px;
	padding: 0 var(--spacing-md) !important;
	background: var(--color-black);
	border: var(--border-primary);
	color: var(--color-white);
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
	cursor: pointer;
	transition: all var(--transition-base);
}

.single_add_to_cart_button:hover {
	background: var(--color-white);
	color: var(--color-black);
}

.single_add_to_cart_button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ==========================================================================
   Produit variable : sélecteur d'attribut (Montant) + add-to-cart
   WooCommerce génère un markup natif (table.variations + .single_variation_wrap)
   qu'il faut remettre en forme pour coller au design du thème.
   ========================================================================== */
.variations_form.cart {
	flex-direction: column;
	align-items: stretch;
}

.variations_form .variations {
	width: 100%;
	margin: 0;
	border: none;
}

.variations_form .variations tbody,
.variations_form .variations tr {
	display: block;
	width: 100%;
}

.variations_form .variations th.label,
.variations_form .variations td.value {
	display: block;
	width: 100%;
	padding: 0;
	background: transparent;
	text-align: left;
}

.variations_form .variations th.label label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-steel);
	margin-bottom: var(--spacing-xs);
}

.variations_form .variations td.value select {
	width: 100%;
	height: 48px;
	padding: 0 0.75rem;
	border: 2px solid var(--color-black);
	background: var(--color-white);
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-black);
	cursor: pointer;
}

.variations_form .variations td.value select:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--color-gunmetal);
}

/* Masquer le lien "Effacer" natif (redondant avec le select) */
.variations_form .reset_variations {
	display: none !important;
}

/* Masquer le prix de la variation (déjà affiché dans .product-price au-dessus) */
.woocommerce-variation-price {
	display: none !important;
}

/* Wrapper de la variation sélectionnée */
.single_variation_wrap {
	width: 100%;
	margin: 0;
}

.single_variation {
	margin: 0;
}

/* Zone quantité + message + bouton : message en full width au-dessus */
.woocommerce-variation-add-to-cart,
.variations_button {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	align-items: stretch;
	margin: 0;
}

.variations_form .gift-card-message-field {
	flex: 1 0 100%;
	width: 100%;
	margin: 0;
	order: -1;
}

/* Product Tabs */
.product-tabs-section {
	padding: var(--spacing-xl) 0;
	background: var(--color-smoke);
}

.woocommerce-tabs {
	border: var(--border-primary);
	background: var(--color-white);
}

.woocommerce-tabs .tabs {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: var(--border-primary);
}

.woocommerce-tabs .tabs li {
	margin: 0;
	flex: 1;
}

.woocommerce-tabs .tabs li a {
	display: block;
	padding: var(--spacing-sm) var(--spacing-md);
	text-align: center;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-gunmetal);
	text-decoration: none;
	border-right: var(--border-primary);
	transition: all var(--transition-base);
}

.woocommerce-tabs .tabs li:last-child a {
	border-right: none;
}

.woocommerce-tabs .tabs li.active a,
.woocommerce-tabs .tabs li a:hover {
	background: var(--color-black);
	color: var(--color-white);
}

.woocommerce-tabs .panel {
	padding: var(--spacing-lg);
}

.woocommerce-tabs .panel h2 {
	font-size: 1.25rem;
	margin-bottom: var(--spacing-md);
}

/* Responsive Product */
@media (max-width: 768px) {
	.product-price {
		font-size: 1.5rem;
	}

	.product-add-to-cart .cart {
		flex-direction: column;
	}

	.quantity-wrapper {
		width: 100%;
	}

	.quantity input[type="number"],
	.quantity-wrapper input[type="number"] {
		flex: 1 1 auto;
		width: auto !important;
		min-width: 64px !important;
	}

	.single_add_to_cart_button {
		width: 100%;
	}

	.woocommerce-tabs .tabs {
		flex-direction: column;
	}

	.woocommerce-tabs .tabs li a {
		border-right: none;
		border-bottom: var(--border-primary);
	}

	.woocommerce-tabs .tabs li:last-child a {
		border-bottom: none;
	}
}

/* ==========================================================================
   PAGINATION - Archives produits / Blog
   ========================================================================== */

.shop-footer__pagination,
.shop-pagination,
.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.shop-footer__pagination > .page-numbers,
.shop-pagination .page-numbers,
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--spacing-xs);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	color: var(--color-black);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: all var(--transition-base);
}

a.page-numbers:hover,
.shop-footer__pagination > .page-numbers:hover,
.shop-pagination .page-numbers:hover,
.pagination .page-numbers:hover {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
}

.shop-footer__pagination > .page-numbers.current,
.shop-pagination .page-numbers.current,
.pagination .page-numbers.current {
	background: var(--color-black);
	border-color: var(--color-black);
	color: var(--color-white);
	cursor: default;
}

.shop-footer__pagination > .page-numbers.dots,
.shop-pagination .page-numbers.dots,
.pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	cursor: default;
}

.shop-footer__pagination > .page-numbers.dots:hover,
.shop-pagination .page-numbers.dots:hover,
.pagination .page-numbers.dots:hover {
	background: transparent;
	border-color: transparent;
	color: var(--color-gunmetal);
}

/* Fallback : masque les puces si paginate_links est appelé avec type=list */
.shop-footer__pagination ul.page-numbers,
.shop-pagination ul.page-numbers,
.pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	list-style: none;
	margin: 0;
	padding: 0;
}

.shop-footer__pagination ul.page-numbers li,
.shop-pagination ul.page-numbers li,
.pagination ul.page-numbers li {
	list-style: none;
	margin: 0;
}

/* ==========================================================================
   Shop AJAX Error Message
   ========================================================================== */
.shop-ajax-error {
	padding: var(--spacing-lg);
	margin-bottom: var(--spacing-lg);
	background: var(--color-smoke);
	border: var(--border-primary);
	text-align: center;
}

.shop-ajax-error p {
	margin: 0 0 var(--spacing-sm);
	font-size: 1rem;
	color: var(--color-black);
}

.shop-ajax-error .button {
	margin-top: var(--spacing-xs);
}

/* ==========================================================================
   Gift Card — Champ message personnel (page produit)
   ========================================================================== */
.gift-card-message-field {
	margin: var(--spacing-md) 0;
}

.gift-card-message-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4em;
}

.gift-card-message-field textarea {
	width: 100%;
	padding: 0.6em;
	border: 1px solid var(--color-steel);
	font-family: inherit;
	resize: vertical;
}

.gift-card-message-field small {
	display: block;
	color: var(--color-steel);
	margin-top: 0.3em;
}