/**
 * Bloc « Fiche produit » — reprise à l'identique des éléments de boucle
 * Elementor (#1679, #2543, #2645, #1782, #347, #165, #564, #390) et du code court
 * [chaussure] de l'ancien thème enfant. Valeurs relevées dans _elementor_data
 * (docs/audit-elementor/) ; points de rupture d'Elementor : mobile < 768 px.
 * ⚠️ Rendu de référence : la page en ligne sans WP Rocket (`?rendu=brut`). Les
 * titres des éléments de boucle (widgets « Titre ») y ont l'interligne 1 ; le
 * CSS allégé en cache montrait 1,5 (ancien kit), mesuré à tort la première fois.
 */

.produit {
	--produit-ecart: 20px;
}

/* Grille de boucle d'Elementor : 30 px entre les fiches (mesuré, rendu brut). */
.produit__grille {
	display: grid;
	gap: 30px;
}

/* Cartes comparatives : 3 colonnes (4 avec la classe `produit--colonnes-4`), 2 sur
   tablette, 1 sur mobile ; toutes les cartes à la hauteur de la plus haute (réglage
   « hauteur égale » de la grille d'origine — l'espace se répartit entre les lignes). */
.produit--cartes .produit__grille {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
}

.produit--cartes.produit--colonnes-4 .produit__grille {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (width < 1025px) {
	.produit--cartes .produit__grille,
	.produit--cartes.produit--colonnes-4 .produit__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (width < 768px) {
	.produit--cartes .produit__grille,
	.produit--cartes.produit--colonnes-4 .produit__grille {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Boutons marchands : bloc Bouton natif, justifiés sur leur largeur. */
.produit__bouton .wp-block-button__link {
	display: block;
	inline-size: 100%;
	text-align: center;
}

/* -------------------------------------------------------------------------
   Visuel + prix + boutons (#1679, #2543, #2645)
   ------------------------------------------------------------------------- */
.produit-visuel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-block-size: 600px;
	background-color: var(--wp--preset--color--neutral);
}

/* Fiche SANS photo : la hauteur de 600 px existe pour laisser la place au visuel, qui est en
   position absolue. Sans image, elle laissait un grand rectangle gris vide — vu sur la Free Metcon 6,
   dont Nike a retiré le modèle de son catalogue ET de son serveur d'images. La boîte se referme sur
   son contenu : prix, ligne de génération, boutons. */
.produit-visuel:not(:has(.produit-visuel__image)) {
	min-block-size: 0;
	gap: 20px;
	padding-block: 20px;
}

/* La photo couvre TOUTE la boîte (22/09, demande de Loïc) : à 500 px sur 600, les 100 px du bas
   montraient le fond de la boîte, et le fond des photos varie (#f6f6f6 chez Nike, #efefef chez
   NOBULL et inov-8, dégradés de studio chez Reebok) — une démarcation visible qu'aucune couleur
   de boîte ne pouvait raccorder. Prix et boutons se posent sur la photo, dont le bas est vide. */
.produit-visuel__image {
	position: absolute;
	inset: 0;
	z-index: 1;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* En-tête de la boîte : le prix, et s'il y a lieu la génération suivante. La marge d'origine
   (30 px, mesurée sur le site Elementor) passe ici pour que le prix garde sa place exacte. */
.produit-visuel__entete {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-block-start: 30px;
}

.produit-visuel__prix {
	align-self: center;
	padding: 5px 20px;
	border: 2px solid var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--xl); /* typographie « H3 » : 24 / 22 / 20 px */
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1;
}

/* Promotion et relevé du prix (champs « Prix barré » et « Prix relevé le » de la fiche, 26/09).
   Le bloc regroupe le prix et sa date : UN seul enfant de la colonne `space-between` du visuel,
   au-dessus de la photo (qui est en position absolue). */
.produit__prix-bloc {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: center;
	gap: 6px;
}

.produit__prix-barre {
	margin-inline-end: 0.3em;
	color: var(--wp--preset--color--contrast);
	font-size: 0.6em;
	font-weight: var(--wp--custom--font-weight--regular);
	opacity: 0.7;
}

.produit__prix-releve {
	color: var(--wp--preset--color--contrast);
	font-size: 0.75rem;
	line-height: 1.2;
	opacity: 0.8;
}

.produit-visuel__boutons {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--produit-ecart);
	margin-block-end: 10px;
	/* Marge interne par défaut des conteneurs Elementor (mesuré : boutons 10 px plus haut). */
	padding: 10px;
}

.produit-visuel__boutons .produit__bouton {
	inline-size: 40%;
}

@media (width < 768px) {
	/* Boîte carrée sur mobile : une photo carrée (inov-8, Reebok) y tient exactement, sans
	   recadrage ; une photo verticale (Nike) ne perd que son fond vide, en haut et en bas.
	   À 400 px de haut, la photo couvrante rognait la pointe des chaussures larges. */
	.produit-visuel {
		min-block-size: 0;
		aspect-ratio: 1;
	}

	/* Sans photo, le carré n'a rien à cadrer : la boîte se referme, comme sur bureau. */
	.produit-visuel:not(:has(.produit-visuel__image)) {
		aspect-ratio: auto;
	}

	/* Mobile (mesuré, rendu brut) : boutons à leur largeur naturelle sur une seule
	   rangée, texte replié sur deux lignes si besoin (« initial » sans largeur saisie). */
	.produit-visuel__boutons .produit__bouton {
		flex: 0 1 auto;
		inline-size: auto;
		min-inline-size: 0;
	}

	/* Couvrante aussi sur mobile : « contain » laissait deux bandes au fond de la boîte au-dessus
	   et au-dessous des photos carrées (même démarcation que sur ordinateur). */
	.produit-visuel__image {
		block-size: 100%;
	}

	.produit-visuel__prix {
		margin-block-start: 10px;
	}

	.produit-visuel__boutons {
		flex-wrap: nowrap;
		margin-block-end: 0;
	}
}

/* -------------------------------------------------------------------------
   Encadré d'infos + avis (#1782)
   ------------------------------------------------------------------------- */
.produit-infos {
	display: flex;
	flex-direction: column;
	inline-size: 90%;
	margin-inline: auto;
	border: 2px solid var(--wp--preset--color--primary);
}

.produit-infos__colonnes {
	display: flex;
	justify-content: space-around;
	padding: 20px 40px;
}

.produit-infos__colonne {
	display: flex;
	flex-direction: column;
	gap: var(--produit-ecart);
	inline-size: 28%;
	padding: 10px;
}

/* Deux colonnes au lieu de trois : la colonne « caractéristiques » disparaît quand la marque ne
   publie ni poids, ni taille, ni différentiel (Reebok sur la Nano Court et la Nanoflex TR 3). À 28%
   chacune, les deux restantes flottaient au milieu d'un encadré vide ; elles occupent la place. */
.produit-infos__colonnes--deux .produit-infos__colonne {
	inline-size: 44%;
}

/* Fiches chaussure (templates/single-chaussure.html) : le gabarit est à la largeur de contenu
   (800 px) et l'encadré, repris d'Elementor à 90 % avec des colonnes de 28 %, n'y laissait que
   178 px par colonne — « Pour des exercices d'haltérophilie lourde » sur quatre lignes (retour de
   Loïc du 26/09). Sur une fiche, l'encadré prend la largeur « large » du thème, et les colonnes se
   partagent tout l'espace. La photo au-dessus suit la même largeur (Loïc, 26/09 : l'écart 800 / 1 140 se voyait). Les pages, où l'encadré fait déjà 1 000 px, ne bougent pas. */
.fiche-chaussure > :is(.fiche-chaussure__visuel, .fiche-chaussure__infos) {
	max-inline-size: var(--wp--style--global--wide-size);
}

/* Photo élargie : la photo remplit sa boîte (object-fit: cover), et à 1 140 px de large elle
   grossissait la chaussure d'autant — semelle sous les boutons, même en 3/2 pour les photos Nike
   (portrait) et NOBULL (chaussure sur toute la largeur). Quand le fond de la photo est UNI
   (FicheProduit::fond_photo()), la boîte en prend la couleur et la photo s'affiche ENTIÈRE ; les
   fonds en dégradé (Speed 22 TR, Nano X3) gardent le remplissage, en 3/2. Bureau seulement : sur
   téléphone, la boîte reste carrée. */
@media (width >= 768px) {
	.fiche-chaussure .produit-visuel:has(.produit-visuel__image) {
		aspect-ratio: 3 / 2;
	}

	.fiche-chaussure .produit-visuel--fond-uni:has(.produit-visuel__image) {
		aspect-ratio: 16 / 9;
		background-color: var(--fond-photo);
	}

	/* Entière, puis agrandie de 30 % : les photos des marques ont une large marge, que l'agrandissement
	   rogne sans toucher la chaussure (le fond est uni, la coupe ne se voit pas). */
	.fiche-chaussure .produit-visuel--fond-uni {
		overflow: hidden;
	}

	.fiche-chaussure .produit-visuel--fond-uni .produit-visuel__image {
		object-fit: contain;
		scale: 1.3;
	}
}

.fiche-chaussure .produit-infos {
	inline-size: 100%;
}

/* Au-dessus de 768 px seulement : sous ce palier, les colonnes s'empilent (100 % chacune, plus bas).
   Une base `flex: 1 1 0` les remettait côte à côte sur téléphone — 30 px de débordement mesurés. */
@media (width >= 768px) {
	.fiche-chaussure .produit-infos__colonnes {
		gap: 20px;
		padding-inline: 30px;
	}

	.fiche-chaussure .produit-infos__colonne {
		flex: 1 1 0;
		min-inline-size: 0;
	}
}

.produit-infos__colonne--caracteristiques {
	gap: 10px;
}

.produit-infos__titre {
	color: var(--wp--preset--color--primary);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1;
}

.produit-infos__ligne {
	line-height: 1;
}

/* Textes riches des fiches (champs ACF) : marges du thème Hello, comme dans
   l'éditeur de texte d'Elementor — le dernier paragraphe garde la sienne. */
.produit :is(.produit-infos__texte, .produit-infos__avis-texte) p,
.produit--boite-article :is(.text-detail-section, .chaussure-review) p {
	margin-block: 0 0.9rem;
}

.produit-infos__texte :is(ul, ol) {
	margin-block: 0;
}

.produit-infos__colonne--caracteristiques .produit-infos__titre {
	margin-block-end: 10px;
}

.produit-infos__texte,
.produit-infos__ligne {
	color: var(--wp--preset--color--quaternary);
}

.produit-infos__separateur {
	align-self: center;
}

.produit-infos__avis {
	display: flex;
	flex-direction: column;
	gap: var(--produit-ecart);
	padding: 20px 30px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.produit-infos__avis-titre {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--xl); /* typographie « H3 » : 24 / 22 / 20 px */
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1;
}

@media (width < 768px) {
	.produit-infos {
		inline-size: 100%;
	}

	/* Colonnes empilées : sur mobile, Elementor passe les conteneurs à 100 % et
	   les rangées en retour à la ligne. */
	.produit-infos__colonnes {
		flex-wrap: wrap;
	}

	.produit-infos__colonne {
		inline-size: 100%;
	}

	.produit-infos__separateur {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Carte « modèle » (#347, #165, #564)
   ------------------------------------------------------------------------- */
.produit-modele {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--produit-ecart);
	padding: 20px;
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--s);
}

.produit-modele__titre,
.produit-modele__prix {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--xxl); /* typographie « H2 » : 32 / 29 / 26 px */
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 1;
}

.produit-modele__titre {
	inline-size: 50%;
}

.produit-modele__prix {
	inline-size: calc(50% - 20px);
	text-align: right;
}

.produit-modele__visuel {
	inline-size: calc(50% - 10px);
}

.produit-modele__image {
	display: block;
	inline-size: 100%;
	block-size: 400px;
	object-fit: cover;
}

.produit-modele__details {
	display: flex;
	flex-wrap: wrap;
	flex-grow: 1;
	gap: var(--produit-ecart);
	inline-size: calc(50% - 10px);
}

/* Colonne « Meilleur pour » / « Insuffisant » : 20 px entre l'intertitre et la liste
   (écart par défaut des conteneurs Elementor, mesuré sur le rendu brut). */
.produit-modele__colonne {
	display: flex;
	flex-direction: column;
	gap: var(--produit-ecart);
	inline-size: calc(50% - 10px);
}

.produit-modele__intertitre {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--xl); /* typographie « H3 » : 24 / 22 / 20 px */
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1;
}

.produit-modele__intertitre--large,
.produit-modele__ligne,
.produit-modele__espace {
	inline-size: 100%;
}

.produit-modele__ligne {
	line-height: 1;
}

/* Le widget « espace » de l'élément de boucle n'est pas rendu (mesuré) : il ne reste que
   l'écart de la carte, que cet élément vide conserve — deux écarts avant les boutons. */
.produit-modele__espace {
	block-size: 0;
}

/* Boutons à 40 % de la carte, centrés par la carte (mesuré sur le rendu brut ; le CSS allégé
   de WP Rocket les montrait pleine largeur). Pleine largeur sur mobile, comme l'original. */
.produit-modele .produit__bouton {
	inline-size: 40%;
}

/* Listes « Meilleur pour » et « Insuffisant » : largeur du contenu (réglage d'origine). */
.produit-modele__liste {
	inline-size: fit-content;
}

@media (width < 768px) {
	.produit-modele .produit__bouton {
		inline-size: 100%;
	}

	/* Sur mobile, Elementor passe les conteneurs à 100 % : les colonnes s'empilent. */
	.produit-modele__details,
	.produit-modele__colonne {
		inline-size: 100%;
	}

	.produit-modele__visuel {
		inline-size: 100%;
	}

	.produit-modele__image {
		block-size: auto;
		object-fit: contain;
	}

}

/* -------------------------------------------------------------------------
   Carte comparative (#390)
   ------------------------------------------------------------------------- */
.produit-carte {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	block-size: 100%;
	padding: 10px;
	border: 2px solid #000;
	border-radius: var(--wp--custom--radius--s);
}

.produit-carte__titre {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--l);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 1;
}

/* Roboto et non Barlow : dans Elementor, la typographie globale « Texte » l'emportait
   sur la police saisie dans le widget (mesuré en ligne). */
.produit-carte__ligne {
	line-height: 1;
}

/* -------------------------------------------------------------------------
   Boîte d'article — ex-code court [chaussure] du thème enfant.
   Classes d'origine conservées ; variables Elementor remplacées par celles
   du thème. `isolation` : l'image est posée en z-index -1, il lui faut un
   contexte d'empilement propre, sinon elle passe sous le fond de la page.
   ------------------------------------------------------------------------- */
.produit--boite-article .bloc-article-chaussure-premiere-partie {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-block-size: 585px;
}

.produit--boite-article .image-chaussure-article {
	position: absolute;
	z-index: -1;
	inline-size: 100%;
	block-size: 500px;
	background-size: cover;
	background-position: center;
}

.produit--boite-article .libelle-prix {
	inline-size: fit-content;
	margin: 30px auto 0;
	padding: 5px 20px;
	border: 2px solid var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: 1.5rem; /* 24 px à tous les paliers (thème enfant), pas la typographie « H3 » */
	font-weight: var(--wp--custom--font-weight--semibold);
}

.produit--boite-article .conteneur-bouton-femme-homme {
	display: flex;
	justify-content: space-around;
	gap: 20px;
	padding: 10px 0;
}

.produit--boite-article :is(.bouton-femme, .bouton-homme) {
	position: relative;
	inset: 0;
	padding: 0.75rem 1.25rem 0.95rem;
	border: 2px solid;
	border-radius: var(--wp--custom--radius--s);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--tertiary);
	font-size: 18px;
	font-weight: var(--wp--custom--font-weight--semibold);
	text-decoration: none;
	transition: var(--wp--custom--bouton--transition);
}

/* Texte marine sur rose (contraste 8,3:1 ; blanc : 2,2:1), comme le bouton « Femme » du thème. */
.produit--boite-article .bouton-femme {
	border-color: var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--preset--shadow--decalee-rose);
}

.produit--boite-article .bouton-homme {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--decalee);
}

.produit--boite-article .bouton-femme:hover {
	border-color: var(--wp--preset--color--tertiary);
	background-color: var(--wp--preset--color--tertiary);
}

.produit--boite-article :is(.bouton-femme, .bouton-homme):hover {
	inset-block-start: 5px;
	inset-inline-start: 4px;
	box-shadow: none;
	color: var(--wp--preset--color--base);
}

.produit--boite-article .bloc-article-chaussure-seconde-partie {
	margin-block: 50px;
	border: 2px solid var(--wp--preset--color--primary);
}

.produit--boite-article .chaussure-details {
	display: flex;
	padding-inline: 15px;
}

.produit--boite-article :is(.detail-section, .detail-section-derniere) {
	display: flex;
	flex-direction: column;
	padding: 10px 10px 10px 20px;
}

.produit--boite-article .detail-section {
	gap: 20px;
	inline-size: 28%;
}

.produit--boite-article .detail-section-derniere {
	inline-size: 40%;
}

.produit--boite-article .titre-detail-section {
	color: var(--wp--preset--color--primary);
	font-weight: var(--wp--custom--font-weight--semibold);
}

.produit--boite-article .detail-section-derniere .titre-detail-section {
	padding-block-end: 20px;
}

.produit--boite-article .text-detail-section {
	color: var(--wp--preset--color--quaternary);
}

.produit--boite-article .bloc-separateur {
	display: flex;
	align-items: center;
}

.produit--boite-article .seperateur-chaussure {
	block-size: 120px;
}

.produit--boite-article .chaussure-review {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 20px 30px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.produit--boite-article .titre-review {
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--preset--font-size--xl); /* typographie « H3 » : 24 / 22 / 20 px */
	font-weight: var(--wp--custom--font-weight--semibold);
}

@media (width <= 756px) {
	.produit--boite-article .chaussure-details {
		flex-direction: column;
	}

	.produit--boite-article :is(.detail-section, .detail-section-derniere) {
		inline-size: 100%;
	}

	.produit--boite-article .bloc-separateur {
		display: none;
	}
}

/* Éditeur : bloc sans fiche choisie. */
.produit-vide {
	padding: 20px;
	border: 2px dashed var(--wp--preset--color--quaternary);
	color: var(--wp--preset--color--quaternary);
}

/* « Remplacée par … » — modèle arrêté : la ligne prend la place du prix, en plus discret, et mène à
   la fiche du modèle suivant. Voir ChaussurefitFicheProduit::remplacement(). */
.produit-visuel__remplacement {
	padding: 2px 10px;
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
}

.produit__remplacement {
	margin-block-start: 4px;
	font-size: 13px;
	line-height: 18px;
	font-style: italic;
}

/* La lignée (« Prend la suite de … ») reprend l'aspect du remplacement : même famille d'information,
   même discrétion. */
.produit__lignee {
	font-size: 13px;
	line-height: 18px;
	font-style: italic;
}

/* Cible tactile : à 13 px de texte, le lien ne faisait que 15 px de haut au doigt — mesuré à 390 px
   le 24/09. On l'épaissit sans bouger la mise en page : la marge intérieure verticale déborde sur
   l'interligne, qui est déjà plus grand que le texte. */
:is(.produit__remplacement, .produit__lignee) a {
	display: inline-block;
	padding-block: 7px;
	margin-block: -7px;
	color: inherit;
	text-decoration: underline;
}