/**
 * Fiche produit — « Produits suggérés » (woocommerce/single-product/related.php).
 *
 * Cartes horizontales de la maquette « fiche produit principal » : visuel clair à gauche (~40 %),
 * panneau sombre à droite (titre, description courte, bouton pilule « Découvrir »), coins arrondis.
 * 2 cartes par ligne à partir de 64em, 1 en dessous ; empilement vertical sous 40em.
 * Mobile-first. Couleurs : custom properties de header.css uniquement.
 */

.annad-suggested {
	padding-block: 3rem 4rem;
}

.annad-suggested__title {
	margin-bottom: 1.5rem;
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}

.annad-suggested__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Clearfix de woocommerce.css : ses pseudo-éléments deviennent des cellules de la grille (première
   colonne vide, mesurée en staging). La liste ne porte pas la classe « products » : ce sont les
   règles « .woocommerce .products ul::before / ::after » (section.related.products parente) et leurs
   variantes « .woocommerce-page » et « ul.products » qui s'appliquent (spécificité 0,2,2).
   Sélecteurs à 0,3,2 + !important : on lutte contre le CSS d'une extension non modifiable. */
.woocommerce .annad-suggested ul.annad-suggested__grid::before,
.woocommerce .annad-suggested ul.annad-suggested__grid::after,
.woocommerce-page .annad-suggested ul.annad-suggested__grid::before,
.woocommerce-page .annad-suggested ul.annad-suggested__grid::after,
.annad-suggested ul.annad-suggested__grid::before,
.annad-suggested ul.annad-suggested__grid::after {
	content: none !important;
	display: none !important;
}

/* Neutralise aussi les largeurs / flottements que woocommerce.css impose aux li.product */
.annad-suggested__grid > li.annad-card {
	float: none;
	width: auto;
	margin: 0;
	clear: none;
}

@media (min-width: 64em) {
	.annad-suggested__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
	}
}

/* ---------- Carte ----------
   Markup : template-parts/product/card.php (contexte « suggested » ou « loop ») et
   template-parts/blog/card.php. Enfants directs : zone visuel, titre, [résumé : note + prix],
   extrait, zone d'actions (« Découvrir » + bouton panier et extensions en contexte « loop »).
   Carte suggérée : en empilé (< 40em) tout sur une colonne ; au-delà, le visuel occupe la colonne
   gauche sur toute la hauteur et le texte s'aligne dans la colonne droite. */

.annad-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto 1fr auto;
	overflow: hidden;
	color: var(--color-on-surface);
	/* Panneau sombre légèrement éclairci par rapport au fond de la fiche */
	background-color: var(--color-surface-3);
	border: 0;
	border-radius: var(--radius-large);
}

/* Zone visuel de hauteur fixe : ne suit jamais la hauteur du texte (1532px mesurés en staging,
   l'image étirée par la rangée 1fr qu'elle traversait). Badge promo natif positionné dedans. */
.annad-card__media {
	position: relative;
	display: block;
	height: 15rem;
	overflow: hidden;
	background-color: var(--color-surface-light);
}

.annad-card__media-link {
	display: block;
	height: 100%;
}

.annad-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 1rem;
	object-fit: contain;
}

.annad-card__title,
.annad-card__summary,
.annad-card__excerpt,
.annad-card__actions {
	margin-inline: 1.5rem;
}

.annad-card__title {
	margin-top: 1.25rem;
	padding: 0;
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.3;
}

.annad-card__title a {
	color: inherit;
	text-decoration: none;
}

.annad-card__title a:hover {
	text-decoration: underline;
}

/* Texte tronqué côté serveur (card.php) ; limite de lignes en ceinture-bretelles */
.annad-card__excerpt {
	display: -webkit-box;
	margin-top: 0.75rem;
	overflow: hidden;
	font-size: 0.9375rem;
	line-height: 1.5;
	opacity: 0.8;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

/* Zone d'actions : « Découvrir » puis sorties de woocommerce_after_shop_loop_item */
.annad-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-self: end;
	gap: 0.625rem;
	margin-block: 1rem 1.5rem;
}

/* Bouton pilule « Découvrir » */
.annad-card__cta.annad-btn {
	min-height: 2.25rem;
	padding: 0.5rem 1.5rem;
	font-size: 0.875rem;
	border-radius: 999px;
}

@media (min-width: 40em) {
	.annad-card {
		grid-template-columns: 40% minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
		align-items: start;
	}

	.annad-card__media {
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: start;
		height: 17.5rem;
	}

	.annad-card__title,
	.annad-card__excerpt,
	.annad-card__actions {
		grid-column: 2;
	}
}

/* ---------- Contexte boucle : badge promo, note, prix, bouton panier natifs ---------- */

.annad-card .onsale {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	right: auto;
	z-index: 1;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-on-brand-green);
	background-color: var(--color-brand-green);
	border-radius: 999px;
}

.annad-card__summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	margin-top: 0.5rem;
}

.annad-card__summary .star-rating {
	float: none;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--color-stars);
}

/* Prix natif (loop/price.php → get_price_html) : tarifs par rôle rendus par les filtres WooCommerce */
.annad-card__summary .price {
	display: block;
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: inherit;
}

.annad-card__summary .price del {
	font-size: 0.875rem;
	font-weight: 400;
	opacity: 0.6;
}

.annad-card__summary .price ins {
	text-decoration: none;
}

/* Bouton d'ajout au panier natif (classes add_to_cart_button / ajax_add_to_cart inchangées) et
   boutons d'extensions : habillage .annad-btn (buttons.css), même format pilule que « Découvrir ». */
.woocommerce .annad-card__actions .button,
.annad-card__actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	min-height: 2.25rem;
	margin: 0;
	padding: 0.5rem 1.25rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var(--annad-btn-color);
	background-color: var(--annad-btn-bg);
	border: 1px solid var(--annad-btn-border);
	border-radius: 999px;
	box-shadow: var(--annad-btn-shadow);
	transition: background-color var(--transition), box-shadow var(--transition);
}

.woocommerce .annad-card__actions .button:hover,
.annad-card__actions .button:hover {
	color: var(--annad-btn-color);
	background-color: var(--annad-btn-bg-hover);
	box-shadow: var(--annad-btn-shadow-hover);
}

.annad-card__actions .button:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 3px;
}

/* États AJAX natifs : chargement et lien « Voir le panier » ajouté après l'ajout */
.woocommerce .annad-card__actions .button.loading {
	opacity: 0.6;
}

.annad-card__actions .added_to_cart {
	flex-basis: 100%;
	font-size: 0.8125rem;
	color: var(--color-brand-green);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Variante empilée : grilles de 2 à 3 colonnes (archives produit, actualités) ----------
   Visuel en haut, panneau sombre dessous, à toutes les largeurs ; actions calées en bas. */

.annad-card--stacked {
	display: flex;
	flex-direction: column;
	height: 100%;
	/* li.product : largeurs et flottements de woocommerce.css neutralisés */
	float: none;
	width: auto;
	margin: 0;
	max-width: 360px;
}

/* align-self : dès 40em la règle commune cale le visuel en haut de sa colonne (align-self: start,
   carte en grille). Dans cette carte en colonne flex, la même valeur l'empêchait de s'étirer en
   largeur : la zone prenait la largeur de l'image (240px pour un visuel carré, 171px pour un
   portrait, dans une carte de 360px) et laissait un trou à sa droite. */
.annad-card--stacked .annad-card__media {
	flex: 0 0 auto;
	align-self: stretch;
	height: 15rem;
}

.annad-card--stacked .annad-card__actions {
	align-self: stretch; /* axe transversal en flex : pas de calage à droite */
	margin-top: auto;
	padding-top: 1rem;
}

/* ---------- Variante article (actualités, recherche) : version sobre ----------
   Visuel en couverture (photo, pas de fond clair), date, lien texte au lieu du bouton. */

.annad-card--post .annad-card__media {
	background-color: var(--color-surface-2);
}

.annad-card--post .annad-card__media img {
	padding: 0;
	object-fit: cover;
}

/* Produits suggérés et cartes des boucles (catégories, boutique, recherche) : le visuel épouse la
   zone, recadré au centre, au lieu d'y être contenu avec 1rem de marge (règle commune
   .annad-card__media img) — sinon des bandes vides restent autour d'un visuel qui n'a pas les
   proportions de la zone. */
.annad-card--suggested .annad-card__media img,
.annad-card--loop .annad-card__media img {
	padding: 0;
	object-fit: cover;
}

.annad-card__meta,
.annad-card__more {
	margin-inline: 1.5rem;
}

.annad-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	margin-top: 1.25rem;
	margin-bottom: 0;
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

.annad-card__meta:empty {
	display: none;
}

.annad-card--post .annad-card__meta + .annad-card__title {
	margin-top: 0.5rem;
}

.annad-card__type {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.annad-card__more {
	align-self: flex-start;
	margin-top: auto;
	margin-bottom: 1.5rem;
	padding-top: 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-brand-green);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.annad-card__more:hover {
	text-decoration-thickness: 2px;
}

.annad-card__more:focus-visible,
.annad-card__title a:focus-visible {
	outline: 2px solid var(--color-brand-green);
	outline-offset: 2px;
}

/* Résultats de recherche : ligne sans image */
.annad-card--row {
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	.annad-card__actions .button {
		transition: none;
	}
}