/*
 * Fiche produit — issue 14. Référence : planche 7 (composants), maquette 4
 * (page), décisions du 25/09. Balisage : inc/fiche.php.
 *
 * Aussi : le fil d'Ariane (planche 2) et la pastille de disponibilité
 * (issue 11), dont la fiche a besoin et qui n'existaient pas encore.
 *
 * Valeurs de la planche ramenées à l'échelle : fil et références 13 → 14,
 * intitulés 15 → 16, titres de bloc 20 → 22 (Fraunces jamais sous 22),
 * écarts 10 → 8, 14 → 16, 20 → 24, 28 → 32.
 */

/* --- pel-breadcrumb ------------------------------------------------------- */
.pel-breadcrumb__liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pel-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--pel-fs-small);
}

/* Le séparateur est décoratif : texte de remplacement vide, rien n'est lu. */
/* --suite : chaque maillon après le premier ouvre sur le séparateur. */
.pel-breadcrumb__item--suite::before {
	content: "/" / "";
	margin-inline-end: var(--pel-space-2xs);
	color: var(--pel-champagne);
}

.pel-breadcrumb__lien {
	color: var(--pel-terre-foncee);
}

.pel-breadcrumb__item.is-current {
	color: var(--pel-gris-chaud);
}

/* --- pel-availability-flag : un mot et une forme, jamais la couleur seule --- */
.pel-availability-flag {
	display: inline-flex;
	align-items: center;
	gap: var(--pel-space-2xs);
	font-size: var(--pel-fs-small);
	font-weight: 600;
}

.pel-availability-flag__forme {
	box-sizing: border-box;
	flex-shrink: 0;
	width: var(--pel-pastille);
	height: var(--pel-pastille);
	border-radius: var(--pel-radius-pill);
}

.pel-availability-flag--available {
	color: var(--pel-disponible);
}

.pel-availability-flag__forme--available {
	background: currentColor;               /* rond plein */
}

.pel-availability-flag--unavailable {
	color: var(--pel-terre-foncee);
}

.pel-availability-flag__forme--unavailable {
	border-radius: 0;                        /* carré */
	background: currentColor;
}

.pel-availability-flag--unknown {
	color: var(--pel-encre-douce);
}

.pel-availability-flag__forme--unknown {
	border: var(--pel-trait) solid currentColor;   /* rond vide */
}

/* --- pel-gallery ---------------------------------------------------------- */
/* Vignettes à gauche en desktop, sous la photo en mobile. La photo vient
   d'abord dans le balisage : c'est elle qu'on lit en premier. */
.pel-gallery {
	display: grid;
	grid-template-columns: var(--pel-vignette) minmax(0, 1fr);
	grid-template-areas: "vignettes vue";
	gap: var(--pel-space-s);
	align-items: start;
}

.pel-gallery--single {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "vue";
}

.pel-gallery__vue {
	grid-area: vue;
	overflow: hidden;
	border-radius: var(--pel-radius-l);
	background: var(--pel-sable);
}

/* Photo entière, jamais recadrée : les visuels n'ont pas tous le même format. */
.pel-gallery__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}

.pel-gallery__vignettes {
	grid-area: vignettes;
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-2xs);
}

.pel-gallery__thumb {
	box-sizing: border-box;
	display: block;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	overflow: hidden;
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-m);
	background: var(--pel-sable);
	cursor: pointer;
}

/* La vignette affichée : bordure épaisse ET aria-pressed. */
.pel-gallery__thumb.is-current {
	border: var(--pel-trait) solid var(--pel-terre-cuite);
}

.pel-gallery__vignette {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--pel-blanc);
	object-fit: contain;   /* photo produit entière (#269) */
}

/* --- pel-product-head ----------------------------------------------------- */
.pel-product-head {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-s);
}

.pel-product-head__titre {
	margin: 0;
	font-size: var(--pel-fs-h1);
	line-height: var(--pel-lh-titre);
}

.pel-product-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pel-space-xs) var(--pel-space-s);
}

/* « Vue dans 2 réalisations », vers la section Vue en situation (planche E2, issue 186). */
.pel-product-head__situation {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: var(--pel-space-xs);
	min-height: var(--pel-cible);
	color: var(--pel-terre-foncee);
	font-size: var(--pel-fs-small);
	font-weight: 600;
}

.pel-product-head__situation-image {
	width: var(--pel-cible);
	height: var(--pel-cible);
	border-radius: var(--pel-radius-pill);
	object-fit: cover;
}

.pel-product-head__ref {
	color: var(--pel-gris-chaud);
	font-size: var(--pel-fs-small);
}

.pel-product-head__description {
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

.pel-product-head__description > :first-child {
	margin-top: 0;
}

.pel-product-head__description > :last-child {
	margin-bottom: 0;
}

/* --- pel-availability-check ----------------------------------------------- */
/* Le composant le plus important de la fiche : avant la quantité, jamais après. */
.pel-availability-check {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pel-space-s);
	padding: var(--pel-space-m);
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-l);
	background: var(--pel-blanc);
}

.pel-availability-check.is-available {
	border-color: var(--pel-champagne);     /* décoratif : le fond porte la zone */
	background: var(--pel-champagne-pale);
}

.pel-availability-check.is-unavailable {
	border-color: var(--pel-terre-foncee);
}

.pel-availability-check__ligne {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pel-space-xs);
	align-self: stretch;
}

.pel-availability-check__etat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pel-space-2xs) var(--pel-space-xs);
	margin: 0;
}

.pel-availability-check__periode,
.pel-availability-check__texte {
	color: var(--pel-encre-douce);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

.pel-availability-check__texte {
	margin: 0;
}

.pel-availability-check__ajout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pel-space-s);
	align-self: stretch;
	padding-top: var(--pel-space-s);
	border-top: var(--pel-filet) solid var(--pel-champagne);
}

.pel-availability-check__label {
	color: var(--pel-encre);
	font-size: var(--pel-fs-small);
	font-weight: 600;
}

/* Produit à options (#257) : la liste prend toute la ligne, au-dessus de la quantité. */
.pel-availability-check__option {
	flex-basis: 100%;
}

/* Le bouton d'ajout prend la place qui reste, à droite. */
.pel-availability-check__bouton {
	margin-inline-start: auto;
}

.pel-availability-check__note {
	margin: 0;
	color: var(--pel-gris-chaud);
	font-size: var(--pel-fs-small);
	line-height: var(--pel-lh-texte);
}

/* L'alternative elle-même : pel-alternative, css/carte.css. */
.pel-availability-check__alternative {
	align-self: stretch;
	padding-top: var(--pel-space-s);
	border-top: var(--pel-filet) solid var(--pel-lin);
}

/* --- pel-spec-table ------------------------------------------------------- */
.pel-spec-table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.pel-spec-table__legende {
	padding-bottom: var(--pel-space-xs);
	font-family: var(--pel-font-titre);
	font-size: var(--pel-fs-h3);
	font-weight: 600;
	line-height: var(--pel-lh-titre);
	text-align: left;
}

.pel-spec-table__cle,
.pel-spec-table__valeur {
	padding-block: var(--pel-space-xs);
	border-bottom: var(--pel-filet) solid var(--pel-lin);
	font-size: var(--pel-fs-small);
	vertical-align: top;
}

.pel-spec-table__cle {
	width: 45%;
	padding-inline-end: var(--pel-space-s);
	color: var(--pel-encre-douce);
	font-weight: 600;
}

/* --- pel-rental-terms ----------------------------------------------------- */
.pel-rental-terms {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pel-space-s);
}

.pel-rental-terms__titre,
.pel-cross-sell__titre {
	margin: 0;
	font-size: var(--pel-fs-h3);
}

.pel-rental-terms__liste {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pel-rental-terms__point {
	display: flex;
	align-items: flex-start;
	gap: var(--pel-space-xs);
	color: var(--pel-encre-douce);
	line-height: var(--pel-lh-texte);
}

/* Puce champagne : décorative, dessinée, pas lue ; centrée sur la première ligne. */
.pel-rental-terms__point::before {
	content: "";
	flex-shrink: 0;
	width: calc(var(--pel-space-3xs) * 1.5);
	height: calc(var(--pel-space-3xs) * 1.5);
	margin-top: calc((1lh - var(--pel-space-3xs) * 1.5) / 2);
	border-radius: var(--pel-radius-pill);
	background: var(--pel-champagne);
}

/* Lien seul sur sa ligne : 44 px de cible, pas seulement sa hauteur de texte. */
.pel-rental-terms__cgl {
	display: inline-flex;
	align-items: center;
	min-height: var(--pel-cible);
}

/* --- pel-cross-sell ------------------------------------------------------- */
.pel-cross-sell {
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-m);
}

.pel-cross-sell__liste {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pel-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pel-cross-sell__article {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--pel-space-2xs);
	padding-bottom: var(--pel-space-s);
	overflow: hidden;
	border: var(--pel-filet) solid var(--pel-lin);
	border-radius: var(--pel-radius-m);
	background: var(--pel-blanc);
	box-shadow: var(--pel-shadow-s);
}

/* Photo produit : détourée sur blanc, montrée entière, jamais recadrée (#269). */
.pel-cross-sell__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--pel-blanc);
	object-fit: contain;
}

.pel-cross-sell__nom,
.pel-cross-sell__prix {
	margin-inline: var(--pel-space-s);
}

.pel-cross-sell__nom {
	color: var(--pel-encre);
	font-weight: 600;
	text-decoration: none;
}

/* --category : les autres catégories de l'univers (page catégorie), un compteur au lieu du prix. */
.pel-cross-sell__liste--category {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991px) {
	.pel-cross-sell__liste--category {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 478px) {
	.pel-cross-sell__liste--category {
		grid-template-columns: minmax(0, 1fr);
	}
}

.pel-cross-sell__intro {
	margin: 0;
	color: var(--pel-encre-douce);
}

.pel-cross-sell__compte {
	margin: 0 var(--pel-space-s);
	color: var(--pel-gris-chaud);
	font-size: var(--pel-fs-small);
}

/* « Ajouter » (#146) passe au-dessus du lien qui couvre la carte. */
.pel-cross-sell__ajout {
	position: relative;
	z-index: 1;
	margin: var(--pel-space-2xs) var(--pel-space-s) 0;
}

/* Toute la carte est cliquable ; le focus se voit sur la carte entière. */
.pel-cross-sell__nom::after {
	content: "";
	position: absolute;
	inset: 0;
}

.pel-cross-sell__article:hover {
	box-shadow: var(--pel-shadow-m);
}

.pel-cross-sell__article:hover .pel-cross-sell__nom {
	text-decoration: underline;
	text-underline-offset: var(--pel-soulignement);
}

/* --- pel-sticky-bar : mobile seulement ------------------------------------ */
.pel-sticky-bar {
	display: none;
}

@media (max-width: 991px) {
	.pel-cross-sell__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	/* Vignettes sous la photo, en ligne. */
	.pel-gallery {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "vue" "vignettes";
		gap: var(--pel-space-2xs);
	}

	.pel-gallery__vignettes {
		flex-direction: row;
	}

	.pel-gallery__thumb {
		flex: 1 1 0;
		min-width: 0;
		max-width: var(--pel-vignette);
	}

	.pel-availability-check {
		padding: var(--pel-space-s);
	}

	.pel-sticky-bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 40;                         /* sous l'en-tête (50) et les panneaux (60) */
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--pel-space-xs);
		height: var(--pel-barre-h);
		padding: var(--pel-space-xs) var(--pel-space-s);
		border-top: var(--pel-filet) solid var(--pel-lin);
		background: var(--pel-blanc);
		box-shadow: var(--pel-shadow-m);
		transition: transform var(--pel-duree-courte) var(--pel-courbe);
	}

	/* Avec JavaScript, la barre attend le premier défilement. Cachée, elle
	   sort aussi de l'ordre de tabulation. */
	.pel-sticky-bar.is-enhanced:not(.is-visible) {
		visibility: hidden;
		transform: translateY(100%);
	}

	/* La barre ne masque jamais le dernier paragraphe : la page réserve sa hauteur. */
	.pel-price__montant--barre {
		font-size: var(--pel-fs-body);
	}
}

@media (max-width: 478px) {
	.pel-cross-sell__liste {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pel-sticky-bar {
		transition: none;
	}
}