/* Boutique (H.4). Layout sidebar + grille, mobile-first.
   Étalon : page /projets/ (matrice de packs). */

body.woocommerce {
	background: #fff;
}
body.woocommerce .wp-block-post-content,
body.woocommerce .entry-content {
	max-width: none !important;
	padding: 0 !important;
}
body.woocommerce .wp-block-post-title,
body.woocommerce .entry-header { display: none !important; }

/* ---- Bandeau d'arguments en tête ---- */

.apa-shop-topargs {
	background: #1b3a6b;
	color: #fff;
	padding: 14px 16px;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: .88rem;
}
.apa-shop-topargs-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 8px 18px;
	text-align: center;
}
.apa-shop-topargs-grid > span { min-width: 0; }
.apa-shop-topargs-grid span { color: rgba(255,255,255,.85); }
.apa-shop-topargs-grid b { color: #f6c453; font-weight: 700; }

/* ---- Wrapper ---- */

.apa-shop-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 16px 64px;
	font-family: 'Inter', system-ui, sans-serif;
	color: #14202d;
}

.apa-shop-header {
	margin: 0 0 22px;
	text-align: center;
}
.apa-shop-title {
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	color: #1b3a6b;
	font-size: 2rem;
	margin: 0 0 6px;
	letter-spacing: -.3px;
}
.apa-shop-lede {
	color: #5b6675;
	max-width: 600px;
	margin: 0 auto;
	font-size: .95rem;
}

/* ---- Layout 2 colonnes ---- */

.apa-shop-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

@media (min-width: 960px) {
	.apa-shop-layout {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 32px;
	}
}

/* ---- Sidebar filtres ---- */

.apa-shop-sidebar {
	background: var(--apa-vignette-bg, #eef0f4);
	border-radius: 14px;
	padding: 16px;
	font-size: .92rem;
	align-self: start;
}
.apa-shop-fblock { margin: 0 0 18px; }
.apa-shop-fblock:last-child { margin-bottom: 0; }
.apa-shop-fblock h3 {
	font-family: var(--apa-font-menu, 'Poppins', 'Inter', system-ui, sans-serif);
	color: #1b3a6b;
	font-size: .82rem;
	margin: 0 0 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
}
.apa-shop-radio {
	display: block;
	padding: 6px 0;
	cursor: pointer;
	color: #14202d;
	min-height: 30px;
	line-height: 1.4;
}
.apa-shop-radio input { margin-right: 8px; }
.apa-shop-cats {
	list-style: none;
	margin: 0;
	padding: 0;
}
.apa-shop-cats li { padding: 2px 0; }
.apa-shop-cats a {
	display: block;
	color: #14202d;
	text-decoration: none;
	padding: 8px 12px;
	border-radius: 8px;
	min-height: 36px;
	line-height: 1.3;
	transition: background .15s, color .15s;
}
.apa-shop-cats a:hover {
	background: rgba(27,58,107,.06);
	color: #1b3a6b;
}
.apa-shop-cats a.is-active {
	background: #1b3a6b;
	color: #fff;
	font-weight: 600;
}
.apa-shop-cats small {
	color: #5b6675;
	margin-left: 4px;
	font-size: .82rem;
}
.apa-shop-cats a.is-active small { color: rgba(255,255,255,.72); }

.apa-shop-reset {
	display: block;
	margin-top: 8px;
	text-align: center;
	font-size: .85rem;
	color: #5b6675;
	text-decoration: none;
}
.apa-shop-reset:hover { color: #1b3a6b; text-decoration: underline; }

.apa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 18px;
	border-radius: 10px;
	border: 0;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	font-size: .92rem;
	text-decoration: none;
	min-height: 44px;
}
.apa-btn-primary { background: #ef5a4c; color: #fff; }
.apa-btn-primary:hover { background: #d8412f; }
.apa-btn-block { width: 100%; }

/* ---- Toolbar ---- */

.apa-shop-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 18px;
	gap: 12px;
	flex-wrap: wrap;
	font-size: .9rem;
	color: #5b6675;
}
.apa-shop-toolbar .woocommerce-result-count {
	margin: 0;
}
.apa-shop-toolbar select,
.apa-shop-toolbar .woocommerce-ordering select {
	padding: 8px 14px;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,.12);
	font-family: inherit;
	font-size: .9rem;
}

/* ---- Grille de produits ---- */

ul.products.apa-shop-grid {
	list-style: none !important;
	display: grid !important;
	grid-template-columns: 1fr;
	grid-auto-flow: row !important;
	gap: 16px !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* WC injecte ::before/::after { content: " "; display: table } sur
   ul.products pour clearfix le layout float legacy. En display: grid,
   ces pseudo-éléments deviennent des ENFANTS du grid et prennent des
   cellules — d'où le décalage « 1ʳᵉ case vide » signalé. On les tue. */
ul.products.apa-shop-grid::before,
ul.products.apa-shop-grid::after {
	content: none !important;
	display: none !important;
}

@media (min-width: 640px) {
	ul.products.apa-shop-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
	ul.products.apa-shop-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* WC injecte des classes .first / .last et un layout en float / pourcent
   hérité du legacy. On neutralise tout placement explicite pour laisser
   le grid auto-placer dans l'ordre du DOM (sinon : un produit peut
   sembler partir en col 2 alors qu'il devrait être en col 1).
   Sélecteurs ultra-spécifiques pour battre toute règle parente. */
ul.products.apa-shop-grid > li,
ul.products.apa-shop-grid > li.product,
ul.products.apa-shop-grid > li.product.first,
ul.products.apa-shop-grid > li.product.last,
.woocommerce ul.products.apa-shop-grid li.product {
	width: 100% !important;
	margin: 0 !important;
	clear: none !important;
	float: none !important;
	grid-area: auto !important;
	grid-column-start: auto !important;
	grid-column-end: auto !important;
	grid-row-start: auto !important;
	grid-row-end: auto !important;
}

/* ---- Carte produit ---- */

.apa-shop-card {
	display: flex !important;
	flex-direction: column;
	background: #fff;
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 14px;
	overflow: hidden;
	transition: transform .15s, box-shadow .15s;
	position: relative;
}
.apa-shop-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
.apa-shop-card-link {
	display: block;
	background: #eef0f4;
	position: relative;
	aspect-ratio: 280 / 200;
	overflow: hidden; /* clippe toute image trop haute → protège le bouton dessous */
}
.apa-product-thumb { width: 100%; height: 100%; }
.apa-thumb-svg { display: block; width: 100%; height: 100%; }
/* Image WC réelle (posée par wp apa import-images). position:absolute + inset:0 :
   l'image REMPLIT le cadre au ratio 280/200 SANS pouvoir le pousser en hauteur.
   Sinon, sur Safari/mobile, la règle WooCommerce « .woocommerce-page img
   { height:auto } » la fait grandir à sa taille naturelle → carte immense et
   bouton masqué (même bug que le logo géant du header). */
.apa-shop-card-img,
.apa-shop-card-link img {
	position: absolute;
	inset: 0;
	display: block;
	/* !important : `.apa-shop-card-link img` (0-1-1) était À ÉGALITÉ avec la règle
	   WooCommerce `.woocommerce-page img { height:auto }` (0-1-1) ; WC chargeant
	   après, son height:auto gagnait sur Safari → image à sa taille naturelle qui
	   déborde et masque le bouton. On tranche l'égalité par !important. */
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* Cartes « Affiches à décorer » (1 style = 1 produit) : la vignette est un POSTER
   d'exemple, portrait pour la plupart (aquarelle, croquis, cœur…) ou paysage pour
   d'autres (cartoon 3D). Le cadre paysage 280/200 + object-fit:cover coupait le
   haut/bas des posters portrait. Ici on montre l'image ENTIÈRE (contain) sur un
   fond papier, dans un cadre un peu plus haut — aucune coupe, quel que soit le ratio.
   Ciblé sur ces cartes uniquement : le reste du catalogue garde son cadrage plein. */
.apa-shop-card--poster .apa-shop-card-link {
	aspect-ratio: 4 / 5;
	/* Fond BLANC (et pas le beige papier) : avec object-fit:contain il reste des
	   bandes au-dessus/en-dessous du visuel. Les vignettes de styles ont un fond
	   blanc ou très clair, et le corps de la carte est blanc → en blanc les bandes
	   se fondent et la carte redevient d'un seul tenant. En beige, elles formaient
	   un liseré visible qui tranchait avec l'image. */
	background: #fff;
}
.apa-shop-card--poster .apa-shop-card-img,
.apa-shop-card--poster .apa-shop-card-link img {
	object-fit: contain !important;
}

/* Bannière d'ambiance en tête de catégorie (image représentative des produits). */
.apa-shop-hero {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	min-height: 240px;
	display: flex;
	align-items: flex-end;
	padding: 28px 30px;
	margin-bottom: 26px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.apa-shop-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, rgba( 27, 58, 107, .06 ) 0%, rgba( 27, 58, 107, .74 ) 100% );
}
.apa-shop-hero-inner {
	position: relative;
	z-index: 1;
}
.apa-shop-hero .apa-shop-hero-title {
	color: #fff;
	margin: 0;
	text-shadow: 0 1px 10px rgba( 0, 0, 0, .35 );
}
.apa-shop-hero .apa-shop-hero-lede {
	color: #fff;
	margin: 6px 0 0;
	max-width: 640px;
	opacity: .95;
	text-shadow: 0 1px 8px rgba( 0, 0, 0, .35 );
}
@media (max-width: 600px) {
	.apa-shop-hero { min-height: 170px; padding: 20px; }
}


.apa-shop-card-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
}
.apa-shop-card-title {
	margin: 0;
	font-family: var(--apa-font-display, 'Poppins', 'Inter', system-ui, sans-serif);
	font-size: 1.05rem;
	color: #1b3a6b;
	line-height: 1.25;
}
.apa-shop-card-title a {
	color: inherit;
	text-decoration: none;
}
.apa-shop-card-desc {
	margin: 0;
	color: #5b6675;
	font-size: .88rem;
	line-height: 1.45;
}
.apa-shop-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px dashed rgba(0,0,0,.08);
	gap: 10px;
}
.apa-shop-card-price {
	font-weight: 700;
	color: #1b3a6b;
	font-size: 1.05rem;
}
.apa-shop-card-price .woocommerce-Price-amount { color: #1b3a6b !important; }
.apa-shop-card-cta {
	background: var(--apa-bleu, #1b3a6b);
	color: #fff !important;
	box-sizing: border-box;
	padding: 6px 15px;
	border-radius: 999px;
	font-weight: 600;
	font-size: .8rem;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	box-shadow: 0 3px 9px rgba(27,58,107,.22);
	transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.apa-shop-card-cta:hover {
	background: var(--apa-bleu-clair, #2f5fa3);
	transform: translateY(-1px);
	box-shadow: 0 7px 16px rgba(27,58,107,.34);
}
.apa-shop-card-cta:active {
	transform: translateY(0);
	box-shadow: 0 3px 8px rgba(27,58,107,.28);
}

/* ---- État vide ---- */

.apa-shop-empty {
	text-align: center;
	padding: 48px 24px;
	background: #f4f1ea;
	border-radius: 14px;
}
.apa-shop-empty p {
	color: #5b6675;
	margin: 0 0 18px;
	font-size: 1rem;
}

/* ---- Suppressions du WC original qui dépassent ---- */

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce-loop-product__link {
	/* On les remplace via notre carte — au cas où la nôtre n'aurait pas
	   matché on laisse WC rendre les défauts. */
}