/**
 * Theme Name: TINH
 * Theme URI: https://artofdoing.net
 * Description: Child theme Astra — habillage haute couture pour TINH (mode femme), inspiré de chanel.com/fr. Noir/blanc/ivoire, typographie fine, grands espaces.
 * Author: Art Of Doing
 * Template: astra
 * Version: 1.0.0
 * Text Domain: tinh-child
 */

/* ───────────────────────────────────────────────────────────
   1. Tokens
   ─────────────────────────────────────────────────────────── */
:root {
	--tinh-black: #0a0a0a;
	--tinh-white: #ffffff;
	--tinh-ivory: #f6f3ef;
	--tinh-beige: #e9e2d8;
	--tinh-grey: #6f6f6f;
	--tinh-line: #dedad3;
	--tinh-focus: #0a0a0a;

	--tinh-font-display: "Cormorant Garamond", "Times New Roman", serif;
	--tinh-font-sans: "Jost", "Helvetica Neue", Arial, sans-serif;

	--tinh-tracking: 0.14em;
	--tinh-tracking-lg: 0.22em;

	/* Palette d'accent d'Astra (Personnalisateur → Couleurs globales) — pilote
	   le bouton « haut de page », la bordure des titres d'avis, et tout ce
	   qu'on n'a pas explicitly repris ailleurs. Par défaut c'est un bleu qui
	   jure avec le noir/blanc/ivoire de TINH ; `!important` car Astra pose ces
	   variables dans un <style> dynamique dans le <head>, après nos feuilles,
	   qui gagnerait sinon par l'ordre plutôt que par la spécificité. */
	--ast-global-color-0: #0a0a0a !important;
	--ast-global-color-1: #2a2a2a !important;
	--ast-global-color-2: #0a0a0a !important;
	--ast-global-color-3: #6f6f6f !important;
	--ast-global-color-5: #f6f3ef !important;
}

/* ───────────────────────────────────────────────────────────
   2. Base
   ─────────────────────────────────────────────────────────── */
body {
	background: var(--tinh-white);
	color: var(--tinh-black);
	font-family: var(--tinh-font-sans);
	font-weight: 300;
	letter-spacing: 0.01em;
}

h1, h2, h3, h4,
.aod-home__title,
.aod-home__h2 {
	font-family: var(--tinh-font-display);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--tinh-black);
}

a {
	color: var(--tinh-black);
}

/* Focus visible partout — jamais retiré, jamais dépendant d'une couleur d'accent. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--tinh-focus);
	outline-offset: 3px;
}

/* ───────────────────────────────────────────────────────────
   3. En-tête / navigation — sobre, tout en capitales, espacées,
      collant au défilement avec micro-animations.
   ─────────────────────────────────────────────────────────── */
@keyframes tinh-header-in {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

@keyframes tinh-logo-in {
	from { opacity: 0; transform: scale(.85) rotate(-6deg); }
	to   { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes tinh-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ── Bandeau d'annonce, au-dessus du header (posé par functions.php via
   le hook astra_header_before) ── */
.tinh-marquee {
	overflow: hidden;
	background: var(--tinh-black);
	color: var(--tinh-beige);
}

.tinh-marquee__track {
	display: flex;
	width: max-content;
	animation: tinh-marquee-scroll 26s linear infinite;
}

.tinh-marquee__track span {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding-block: 0.55rem;
	padding-inline-end: 3.5rem;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: var(--tinh-tracking);
}

.tinh-marquee__track span::after {
	content: "—";
	margin-inline-start: 3.5rem;
	opacity: .5;
}

#masthead {
	position: sticky;
	top: 0;
	z-index: 999;
	animation: tinh-header-in .6s cubic-bezier(.2, .8, .2, 1) both;
}

.main-header-bar,
.ast-above-header,
.ast-below-header-bar {
	background: var(--tinh-white);
	border-color: var(--tinh-line) !important;
	transition: padding .35s ease, box-shadow .35s ease;
}

.ast-primary-header-bar {
	padding-block: 1rem;
}

/* ── Logo parfaitement centré (desktop) — nav + switcher groupés à droite.
   La colonne gauche est retirée du flux (position absolute) et recentrée sur
   la largeur RÉELLE de la barre, donc le logo reste au milieu quel que soit
   le nombre de liens à droite — pas un centrage approximatif. ── */
/* La grille d'Astra taille ses pistes gauche/droite pour un logo + menu
   classiques — la piste droite n'atteint pas le vrai bord du conteneur, donc
   un simple `margin-inline-start:auto` ou `justify-content:flex-end` ne
   suffit pas (vérifié : la piste s'arrête ~400 px avant le bord). Les deux
   sections sont donc sorties de la grille et repositionnées à l'absolu
   contre le MÊME conteneur, ce qui donne un centrage et un alignement à
   droite exacts, indépendants de la grille interne d'Astra. */
#ast-desktop-header .site-primary-header-wrap {
	position: relative;
	min-height: 76px;
}

#ast-desktop-header .site-header-primary-section-left {
	position: absolute;
	top: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
}

#ast-desktop-header .site-header-primary-section-right {
	position: absolute;
	top: 50%;
	inset-inline-end: 0;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
}

/* Séparateur fin avant le switcher FR/AR — respire la grille, pas du texte
   collé au menu. */
.menu-item-aod-lang {
	margin-inline-start: 1.4rem;
	padding-inline-start: 1.4rem;
	border-inline-start: 1px solid var(--tinh-line);
}

/* Classe posée en JS (tinh-header.js) dès que la page défile : l'en-tête se
   resserre, gagne une ombre légère, et le bandeau d'annonce se replie. */
.tinh-scrolled .main-header-bar {
	box-shadow: 0 2px 18px rgba(10, 10, 10, 0.08);
}

.tinh-scrolled .ast-primary-header-bar {
	padding-block: 0.45rem;
}

.tinh-scrolled #ast-desktop-header .site-primary-header-wrap {
	min-height: 56px;
}

.tinh-scrolled .ast-site-identity img.custom-logo {
	max-height: 34px;
}

.ast-site-identity img.custom-logo {
	max-height: 52px;
	width: auto;
	transition: max-height .35s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
	animation: tinh-logo-in .7s cubic-bezier(.2, .8, .2, 1) both;
	animation-delay: .1s;
}

.ast-site-identity img.custom-logo:hover {
	transform: scale(1.08) rotate(-3deg);
}

/* Le logo TINH porte déjà le nom : le doublon texte à côté est masqué. */
.ast-site-identity .site-title {
	display: none;
}

.main-navigation ul li {
	opacity: 0;
	animation: tinh-logo-in .5s ease both;
}

.main-navigation ul li:nth-child(1) { animation-delay: .18s; }
.main-navigation ul li:nth-child(2) { animation-delay: .26s; }
.main-navigation ul li:nth-child(3) { animation-delay: .34s; }
.main-navigation ul li:nth-child(4) { animation-delay: .42s; }
.main-navigation ul li:nth-child(5) { animation-delay: .5s; }

.main-navigation ul li > a,
.main-header-bar-navigation .menu-link {
	position: relative;
	font-family: var(--tinh-font-sans) !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	letter-spacing: var(--tinh-tracking);
	font-size: 0.8rem;
	color: var(--tinh-black) !important;
	transition: color .25s ease, letter-spacing .25s ease;
}

.main-navigation ul li > a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 2px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.main-navigation ul li > a:hover {
	color: var(--tinh-grey) !important;
	letter-spacing: calc(var(--tinh-tracking) + 0.03em);
}

.main-navigation ul li > a:hover::after,
.main-navigation ul li.current-menu-item > a::after {
	transform: scaleX(1);
}

/* ── Switcher FR / العربية — repris en noir & blanc (le plugin le livre en
   vert par défaut, hors charte). ── */
.aod-lang__btn {
	font-family: var(--tinh-font-sans) !important;
	font-size: 0.68rem !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 1px solid var(--tinh-black) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--tinh-black) !important;
	padding: 0.3em 0.85em !important;
	transition: background-color .25s ease, color .25s ease, transform .2s ease;
}

.aod-lang__btn:hover {
	transform: translateY(-1px);
}

.aod-lang__btn.is-active {
	background: var(--tinh-black) !important;
	color: var(--tinh-white) !important;
}

/* Respecte les visiteurs qui refusent le mouvement (TEMPLATE.md — accessibilité). */
@media (prefers-reduced-motion: reduce) {
	#masthead,
	.ast-site-identity img.custom-logo,
	.main-navigation ul li,
	.tinh-marquee__track {
		animation: none;
		opacity: 1;
	}
}

/* ───────────────────────────────────────────────────────────
   4. Boutons — noir plein, texte capitales espacées, invert au survol
   ─────────────────────────────────────────────────────────── */
.aod-home__btn,
.aod-cod__submit,
button.button,
a.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
	background: var(--tinh-black);
	color: var(--tinh-white);
	border: 1px solid var(--tinh-black);
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: var(--tinh-tracking);
	font-family: var(--tinh-font-sans);
	font-size: 0.78rem;
	font-weight: 400;
	padding: 1em 2.4em;
	transition: background-color .25s ease, color .25s ease;
}

.aod-home__btn:hover,
.aod-cod__submit:hover,
button.button:hover,
a.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--tinh-white);
	color: var(--tinh-black);
}

/* ───────────────────────────────────────────────────────────
   5. Accueil — héro plein écran, sections centrées
   ─────────────────────────────────────────────────────────── */
.aod-home__hero {
	min-height: 78vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-block: 4rem;
	background-color: var(--tinh-black);
	margin-block-end: 0;
}

.aod-home__title {
	font-size: clamp(2.8rem, 7vw, 5.2rem);
	text-transform: uppercase;
	letter-spacing: var(--tinh-tracking-lg);
	margin-block-end: 1rem;
	color: var(--tinh-white);
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

.aod-home__tagline {
	font-family: var(--tinh-font-sans);
	font-weight: 300;
	letter-spacing: 0.08em;
	font-size: 1.05rem;
	color: var(--tinh-beige);
	max-width: 34ch;
	margin-inline: auto;
	margin-block-end: 2rem;
}

.aod-home__hero .aod-home__btn {
	background: transparent;
	border-color: var(--tinh-white);
	color: var(--tinh-white);
}

.aod-home__hero .aod-home__btn:hover {
	background: var(--tinh-white);
	color: var(--tinh-black);
}

/* ── Bandeau éditorial plein écran (entre le héro et les catégories) ── */
.tinh-edito-banner {
	position: relative;
	min-height: 58vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center 25%;
	margin-block-end: 4.5rem;
}

.tinh-edito-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 10, 10, 0.25), rgba(10, 10, 10, 0.55));
}

.tinh-edito-banner__inner {
	position: relative;
	z-index: 1;
	text-align: center;
	color: var(--tinh-white);
}

.tinh-edito-banner__eyebrow {
	text-transform: uppercase;
	letter-spacing: var(--tinh-tracking-lg);
	font-size: 0.72rem;
	color: var(--tinh-beige);
	margin-block-end: 0.8rem;
}

.tinh-edito-banner__inner h2 {
	font-size: clamp(2rem, 5vw, 3.2rem);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--tinh-white);
	margin-block-end: 1.6rem;
}

.tinh-edito-banner .aod-home__btn {
	background: transparent;
	border-color: var(--tinh-white);
	color: var(--tinh-white);
}

.tinh-edito-banner .aod-home__btn:hover {
	background: var(--tinh-white);
	color: var(--tinh-black);
}

.aod-home__section {
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: 1.5rem;
	margin-block-end: 4.5rem;
	text-align: center;
}

.aod-home__h2 {
	text-transform: uppercase;
	letter-spacing: var(--tinh-tracking-lg);
	font-size: 1.1rem;
	font-weight: 500;
	margin-block-end: 2.5rem;
	position: relative;
}

.aod-home__h2::after {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	background: var(--tinh-black);
	margin: 0.9rem auto 0;
}

.aod-home__cta {
	margin-block-start: 2.5rem;
}

/* ── Réassurance : trois promesses, séparées par de fines lignes ── */
.aod-home__reassure {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2.5rem;
	max-width: 1200px;
	margin-inline: auto;
	padding: 3.5rem 1.5rem;
	border-block: 1px solid var(--tinh-line);
	margin-block-end: 4rem;
	text-align: center;
}

.aod-home__promise h3 {
	font-family: var(--tinh-font-sans);
	text-transform: uppercase;
	letter-spacing: var(--tinh-tracking);
	font-size: 0.82rem;
	font-weight: 500;
	margin-block: 0.8rem 0.5rem;
}

.aod-home__promise p {
	font-size: 0.85rem;
	color: var(--tinh-grey);
	line-height: 1.6;
}

.aod-home__ico {
	font-size: 1.4rem;
	filter: grayscale(1);
	opacity: 0.8;
}

/* ───────────────────────────────────────────────────────────
   6. Grille produits (Boutique, Accueil, catégories) — épurée
   ─────────────────────────────────────────────────────────── */

/* ── En-tête d'archive (titre « Boutique » + fil d'Ariane) ── */
.woocommerce-products-header {
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: 1.5rem;
	padding-block-start: 3rem;
	text-align: center;
}

.woocommerce-breadcrumb {
	font-family: var(--tinh-font-sans);
	text-transform: uppercase;
	letter-spacing: var(--tinh-tracking);
	font-size: 0.68rem;
	color: var(--tinh-grey);
}

.woocommerce-breadcrumb a {
	color: var(--tinh-grey);
}

.woocommerce-products-header__title.page-title {
	font-size: clamp(2rem, 4vw, 2.8rem);
	text-transform: uppercase;
	letter-spacing: var(--tinh-tracking-lg);
	margin-block: 0.6rem 0;
	position: relative;
	display: inline-block;
}

.woocommerce-products-header__title.page-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 1px;
	background: var(--tinh-black);
	margin: 0.9rem auto 0;
}

/* ── Barre de tri — le <select> natif d'Astra, repris sobre (C8) ── */
.woocommerce-ordering,
.woocommerce-result-count {
	font-family: var(--tinh-font-sans);
	font-size: 0.78rem;
	color: var(--tinh-grey);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.woocommerce-ordering {
	margin-inline-start: auto;
}

.woocommerce-ordering select.orderby {
	appearance: none;
	-webkit-appearance: none;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230a0a0a' d='M8 11 2.5 5.5l1-1L8 9l4.5-4.5 1 1z'/%3E%3C/svg%3E") no-repeat right center;
	background-size: 11px;
	border: none;
	border-bottom: 1px solid var(--tinh-black);
	border-radius: 0;
	padding: 0.3em 1.4em 0.3em 0;
	font-family: var(--tinh-font-sans);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--tinh-black);
	cursor: pointer;
}

body.rtl .woocommerce-ordering select.orderby {
	background-position: left center;
	padding: 0.3em 0 0.3em 1.4em;
}

/* ── Cartes produit ── */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	text-align: center;
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
	height: auto;
	border-radius: 0;
	transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	overflow: hidden;
	position: relative;
}

.woocommerce ul.products li.product:hover img {
	transform: scale(1.045);
}

/* Le plugin fournit déjà un vrai lien d'action sur chaque carte — le bouton
   « Commander » (`.aod-loop-cta`, posé par `AOD_COD_No_Tunnel::loop_cta_args`)
   qui mène à la fiche produit (pas de panier, cf. TEMPLATE.md §5). Livré en
   vert fixe par le plugin (demande d'un précédent client, codée en dur avec
   une spécificité (0,2,2) exprès pour qu'un child theme la réécrive) : on le
   reprend en noir/blanc plutôt que d'ajouter un second repère qui ferait
   doublon.
   ⚠️ Spécificité : il faut égaler `body a.aod-loop-cta.aod-loop-cta`
   (0,2,2) — un simple `.aod-loop-cta` ne suffit pas, cf. le commentaire du
   plugin dans aod-cod-pages.css. */
body a.aod-loop-cta.aod-loop-cta {
	background: var(--tinh-black);
	color: var(--tinh-white);
	font-family: var(--tinh-font-sans);
	font-size: 0.72rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: var(--tinh-tracking);
}

.aod-loop-qwrap a.aod-loop-cta.aod-loop-cta {
	background: rgba(255, 255, 255, .82);
	color: var(--tinh-black);
}

.aod-loop-qwrap a.aod-loop-cta.aod-loop-cta:hover,
.aod-loop-qwrap a.aod-loop-cta.aod-loop-cta:focus-visible {
	background: var(--tinh-black);
	color: var(--tinh-white);
}

.aod-loop-qwrap a.aod-loop-cta.aod-loop-cta:focus-visible {
	outline: 2px solid var(--tinh-black);
	outline-offset: 2px;
}

/* Astra ajoute sa PROPRE icône panier flottante sur la carte (`.ast-on-card-button`,
   un sac au coin de l'image) en plus du bouton « Commander » ci-dessus — même
   destination, deux repères pour un seul geste. On garde le bouton texte,
   plus lisible et déjà pensé pour ce gabarit par le plugin. */
.woocommerce ul.products li.product .ast-on-card-button {
	display: none;
}

.ast-woo-product-category {
	display: block;
	font-family: var(--tinh-font-sans);
	text-transform: uppercase;
	letter-spacing: var(--tinh-tracking);
	font-size: 0.68rem;
	color: var(--tinh-grey);
	margin-block-start: 1.1rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
	font-family: var(--tinh-font-sans);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 0.92rem;
	color: var(--tinh-black);
	margin-block: 0.35rem;
}

.woocommerce ul.products li.product .price {
	font-family: var(--tinh-font-sans);
	font-weight: 300;
	font-size: 0.88rem;
	color: var(--tinh-grey);
}

.woocommerce span.onsale {
	background: var(--tinh-black);
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.65rem;
	font-weight: 400;
	min-height: unset;
	min-width: unset;
	padding: 0.35em 0.7em;
}

/* ── Pagination de la Boutique ── */
.woocommerce-pagination {
	margin-block-start: 3rem;
}

.woocommerce-pagination ul.page-numbers {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	padding: 0;
}

.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	font-family: var(--tinh-font-sans);
	font-size: 0.8rem;
	color: var(--tinh-black);
	border: 1px solid var(--tinh-line);
	transition: background-color .2s ease, color .2s ease;
}

.woocommerce-pagination .page-numbers li a:hover,
.woocommerce-pagination .page-numbers li span.current {
	background: var(--tinh-black);
	color: var(--tinh-white);
	border-color: var(--tinh-black);
}

/* ── Aucun produit (catalogue vide) ── */
.woocommerce-info,
.woocommerce-no-products-found {
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: 1.5rem;
	text-align: center;
	font-family: var(--tinh-font-sans);
	color: var(--tinh-grey);
	border: none;
	background: none;
}

/* ── Catégories (Accueil, shortcode [product_categories]) ──
   Traitement éditorial dédié : image plein cadre + titre en surimpression,
   distinct des cartes produit de la Boutique (qui gardent bloc info sous
   l'image). `.product-category` distingue ces <li> des <li class="product">
   du loop produits classique (les deux partagent la classe "product"). */
/* !important : Astra pose son propre grid-template-columns/display fixe sur
   .products.columns-3 (3 colonnes en desktop, 2 très étroites dès le
   breakpoint tablette) avec une spécificité/ordre qui gagne sinon — même
   catégorie de conflit que --ast-global-color-* plus haut.
   Repli sans JS / prefers-reduced-motion : simple rangée scrollable à la
   main (overflow-x:auto). Avec JS + mouvement autorisé, tinh-header.js
   double le contenu et ajoute .tinh-cat-marquee (cf. plus bas) : l'anim
   passe alors par transform, jamais par overflow-x, donc les deux réglages
   ne se contredisent pas — seule la classe change le comportement. */
.aod-home__section .products.columns-3 {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 1.5rem !important;
	list-style: none;
	margin: 0;
	padding: 0 0 .75rem;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.aod-home__section .products.columns-3::-webkit-scrollbar {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.aod-home__section .products.columns-3.tinh-cat-marquee {
		overflow-x: hidden;
		animation: tinh-cat-scroll var(--tinh-cat-duration, 30s) linear infinite;
	}

	.aod-home__section .products.columns-3.tinh-cat-marquee.tinh-cat-paused {
		animation-play-state: paused;
	}

	@keyframes tinh-cat-scroll {
		from { transform: translateX(0); }
		to { transform: translateX(-50%); }
	}
}

.woocommerce ul.products li.product.product-category,
.woocommerce-page ul.products li.product.product-category {
	flex: 0 0 auto;
	width: min(330px, 72vw);
	margin: 0;
	text-align: start;
}

.woocommerce ul.products li.product.product-category > a,
.woocommerce-page ul.products li.product.product-category > a {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--tinh-ivory);
}

.woocommerce ul.products li.product.product-category > a img,
.woocommerce-page ul.products li.product.product-category > a img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	object-position: center 72%;
}

/* Neutralise le zoom générique des cartes produit (§ Cartes produit plus
   haut, `li.product:hover img`) : ces <li> portent aussi la classe
   "product", donc la règle s'applique ici sans ce correctif — et un
   transform sur cette image précise casse le rendu du dégradé/titre
   superposés (bug de peinture Chrome constaté, cf. plus bas). */
.woocommerce ul.products li.product.product-category:hover img {
	transform: none;
}

.woocommerce ul.products li.product.product-category > a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(10, 10, 10, .8) 0%, rgba(10, 10, 10, .18) 48%, transparent 72%);
	transition: opacity .4s ease;
}

/* Pas de zoom d'image au survol ici : combiné au défilement automatique du
   conteneur (overflow-x:auto + scrollLeft animé en JS), un transform sur
   l'image provoquait un bug de compositing Chrome — le dégradé et le titre
   (pourtant corrects dans le CSSOM, vérifié via getComputedStyle) cessaient
   de se peindre tant que l'image restait scale()e. La carte garde la flèche
   + le léger soulèvement du titre comme retour de survol. */
.woocommerce ul.products li.product.product-category:hover > a::before {
	opacity: .92;
}

/* Anneau + flèche « découvrir », révélés au survol. Opacité seule (pas de
   transform) : cf. note plus haut sur le bug de peinture Chrome déclenché
   par un transform sur un élément superposé dans cette rangée défilante. */
.woocommerce ul.products li.product.product-category > a::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset-inline-end: 1.4rem;
	inset-block-end: 1.55rem;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M3 8h9.2M8 3.2 12.8 8 8 12.8' stroke='%23ffffff' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
	opacity: 0;
	transition: opacity .35s ease;
}

.woocommerce ul.products li.product.product-category:hover > a::after,
.woocommerce ul.products li.product.product-category:focus-within > a::after {
	opacity: 1;
}

.woocommerce ul.products li.product.product-category .woocommerce-loop-category__title,
.woocommerce-page ul.products li.product.product-category .woocommerce-loop-category__title {
	position: absolute;
	z-index: 2;
	inset-inline: 0;
	inset-block-end: 0;
	margin: 0;
	padding: 1.7rem 4.2rem 1.4rem 1.5rem;
	font-family: var(--tinh-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--tinh-white);
	background-color: transparent;
}

/* LE bug : Astra pose `background-color:#fff` sur ce titre au survol
   (compatibility/woocommerce/woocommerce.min.css — pensé pour son propre
   gabarit où le titre est SOUS l'image, jamais en surimpression). Ici le
   titre est superposé en blanc sur l'image : ce fond blanc rendait le texte
   illisible (blanc sur blanc) et masquait le dégradé — exactement le
   symptôme « texte qui disparaît » constaté. */
.woocommerce ul.products li.product.product-category > a:hover .woocommerce-loop-category__title,
.woocommerce-page ul.products li.product.product-category > a:hover .woocommerce-loop-category__title {
	background-color: transparent;
}

.woocommerce ul.products li.product.product-category .woocommerce-loop-category__title .count,
.woocommerce-page ul.products li.product.product-category .woocommerce-loop-category__title .count {
	display: block;
	margin-block-start: .4rem;
	font-family: var(--tinh-font-sans);
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: var(--tinh-tracking);
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

/* ───────────────────────────────────────────────────────────
   6bis. Fiche produit — galerie + résumé + formulaire COD
   ─────────────────────────────────────────────────────────── */
.single-product div.product .woocommerce-breadcrumb {
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: 1.5rem;
	padding-block-start: 2rem;
}

.single-product div.product .product_title {
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-block: 0.3rem 0.8rem;
}

.single-product div.product p.price {
	font-family: var(--tinh-font-sans);
	font-weight: 300;
	font-size: 1.3rem;
	color: var(--tinh-black);
}

.single-product div.product .posted_in,
.single-product div.product .product_meta {
	display: block;
	font-family: var(--tinh-font-sans);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.7rem;
	color: var(--tinh-grey);
	margin-block-start: 1rem;
}

.single-product div.product .posted_in a {
	color: var(--tinh-grey);
}

/* Loupe de zoom (PhotoSwipe) — reprise en noir, elle héritait du bleu lien
   par défaut. */
.woocommerce-product-gallery .aod-gallery-nav,
.woocommerce-product-gallery__image a::after {
	color: var(--tinh-black);
}

/* ── Formulaire COD (« checkout Shopify ») — ses propres variables CSS,
   posées directement sur `.aod-cod` par le plugin (aod-cod-form.css). Les
   redéfinir ici retinte tout le formulaire (focus, bouton, états choisis)
   sans reprendre chaque règle une à une. `!important` : ce sont les MÊMES
   propriétés, sur le MÊME sélecteur — seul l'ordre de chargement déciderait
   sinon, fragile dès qu'un enqueue change d'ordre. */
.aod-cod {
	--sh-accent: var(--tinh-black) !important;
	--sh-accent-dark: #2a2a2a !important;
	--sh-accent-wash: var(--tinh-ivory) !important;
	--sh-green: var(--tinh-black) !important;
	--sh-line-strong: var(--tinh-black) !important;
	--sh-radius: 0 !important;
	--sh-radius-sm: 0 !important;
	font-family: var(--tinh-font-sans) !important;
}

.aod-cod .aod-cod__submit {
	text-transform: uppercase;
	letter-spacing: var(--tinh-tracking);
}

/* ───────────────────────────────────────────────────────────
   7. Page Contact
   ─────────────────────────────────────────────────────────── */
.aod-contact {
	max-width: 1100px;
	margin-inline: auto;
	padding: 3rem 1.5rem 5rem;
	display: grid;
	gap: 3rem;
}

@media (min-width: 782px) {
	.aod-contact {
		grid-template-columns: 1fr 1.3fr;
		align-items: start;
	}
}

.aod-contact__intro {
	color: var(--tinh-grey);
	font-size: 0.92rem;
	line-height: 1.7;
	margin-block-end: 1.5rem;
}

.aod-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
	font-size: 0.9rem;
}

.aod-contact__list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.aod-cod__field label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: var(--tinh-tracking);
	color: var(--tinh-grey);
	margin-block-end: 0.5rem;
}

.aod-cod__field input,
.aod-cod__field textarea {
	width: 100%;
	border: 1px solid var(--tinh-line);
	border-radius: 0;
	padding: 0.8em 1em;
	font-family: var(--tinh-font-sans);
	font-size: 0.92rem;
	background: var(--tinh-white);
}

.aod-cod__field input:focus,
.aod-cod__field textarea:focus {
	border-color: var(--tinh-black);
}

/* ───────────────────────────────────────────────────────────
   8. Pied de page — éditorial (inspiré chanel.com/fr) : bloc marque +
   navigation + réassurance (tinh_child_footer_content(), rendu par
   astra_footer_before donc juste AVANT <footer>, hors de cet élément — son
   propre fond noir referme visuellement le même bloc que la barre de
   copyright ci-dessous), puis la barre légale d'Astra.
   ─────────────────────────────────────────────────────────── */
.tinh-footer {
	background: var(--tinh-black);
	color: var(--tinh-beige);
	padding-block: 4.5rem 3rem;
}

.tinh-footer__grid {
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: 1.5rem;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2.5rem;
}

.tinh-footer__logo {
	font-family: var(--tinh-font-display);
	font-size: 1.6rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tinh-white);
	margin: 0 0 .6rem;
}

.tinh-footer__tagline {
	font-size: 0.82rem;
	color: var(--tinh-beige);
	max-width: 32ch;
	margin: 0;
}

.tinh-footer__heading {
	font-family: var(--tinh-font-sans);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: var(--tinh-tracking-lg);
	color: var(--tinh-white);
	margin: 0 0 1.1rem;
}

.tinh-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .7rem;
}

.tinh-footer__nav a {
	color: var(--tinh-beige);
	font-size: 0.85rem;
	text-decoration: none;
	transition: color .2s ease;
}

.tinh-footer__nav a:hover,
.tinh-footer__nav a:focus-visible {
	color: var(--tinh-white);
}

.tinh-footer__promise li {
	font-size: 0.82rem;
	color: var(--tinh-beige);
}

.ast-small-footer,
footer.site-footer {
	background: var(--tinh-black);
	color: var(--tinh-beige);
	border: 0;
}

.ast-small-footer a,
footer.site-footer a {
	color: var(--tinh-white);
}

/* !important : Astra cible ce fond via `.site-below-footer-wrap[data-section=…]`
   (attribut = même poids qu'une classe), plus spécifique qu'un simple
   `.site-below-footer-wrap` — sans quoi le texte blanc de la barre de
   copyright se peint en blanc sur blanc (fond `--ast-global-color-4`,
   jamais repris ci-dessus, contrairement aux autres --ast-global-color-*). */
.site-below-footer-wrap {
	background: var(--tinh-black) !important;
	border-block-start: 1px solid rgba(255, 255, 255, .14);
	margin-inline: 1.5rem;
	padding-block: 1.5rem;
}

.ast-footer-copyright,
.ast-small-footer p {
	max-width: 1600px;
	margin-inline: auto;
	text-align: center;
	font-family: var(--tinh-font-sans);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--tinh-beige);
}

.ast-footer-copyright p {
	margin: 0;
}

/* ───────────────────────────────────────────────────────────
   9. RTL — logique, pas de left/right en dur (règle C2/TEMPLATE.md)
   ─────────────────────────────────────────────────────────── */
body.rtl .aod-home__h2::after {
	margin-inline: auto;
}

/* ───────────────────────────────────────────────────────────
   10. Mobile — resserre le héro et les espacements
   ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.aod-home__hero {
		min-height: 62vh;
		padding-block: 3rem;
	}
	.aod-home__section {
		margin-block-end: 3rem;
	}
	.aod-home__reassure {
		padding: 2.5rem 1.25rem;
	}
	.tinh-edito-banner {
		min-height: 42vh;
		margin-block-end: 3rem;
	}
	.tinh-footer__grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
}
