/****************** PIÈCES DU JOUR (pages/piecesdujour.php) ******************/
/* Chargée par header2.php via $cssPage et versionnée par versionCss() : un envoi se voit tout de suite.
   Titre + chapô, puis une grille de vignettes : sous chaque photo, la date en bloc (29 / MAR.) à gauche du nom
   sur deux lignes. La pièce du jour est la première vignette, dans un écrin crème bordé d'or ; l'or est repris
   dans les dates et les titres de mois. Mobile d'abord, puis ordinateur à partir de 500 px comme styleDesktop2.css. */


/* Titre et chapô */

.pdjTitre {
	padding-right: 20px; /* Marges de la grille : sur iPhone, « Idées shopping - Juillet 2026 » touchait les bords de l'écran */
	padding-bottom: 10px;
	padding-left: 20px;
	text-wrap: balance; /* Deux lignes équilibrées : « Idées shopping » / « - Juillet 2026 » plutôt qu'un tiret en fin de ligne */
}
.pdjChapo {
	max-width: 32em;
	margin: 0 auto 26px auto;
	padding: 0 20px;
	text-align: center;
	font-size: 17px;
	line-height: 1.35;
	font-weight: 300;
	color: #555;
	text-wrap: balance;
}


/* Grille et vignettes */

.pdjGrille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px 12px;
	align-items: start; /* Sans ça, un bouton étiré à la hauteur de la rangée centre son contenu : photos décalées vers le bas à côté d'un nom sur 2 lignes */
}
.pdjTuile {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	text-align: left;
	font-family: 'Source Sans Pro', sans-serif;
	color: #222;
}
.pdjPhoto {
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.pdjPhoto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.pdjTuile:focus-visible {
	outline: 2px solid #EEB315;
	outline-offset: 4px;
}


/* Date en bloc à gauche (chiffre noir, jour abrégé et barre en or), nom sur deux lignes à droite */

.pdjLegende {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 10px;
}
.pdjDateBloc {
	flex: none;
	min-width: 30px;
	padding-right: 9px;
	border-right: 1px solid #D9B24C;
	text-align: center;
}
.pdjDateNum {
	display: block;
	font-size: 21px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -.5px;
	color: #222;
	font-variant-numeric: tabular-nums;
}
.pdjDateJour {
	display: block;
	margin-top: 3px;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #B8872A;
}
.pdjNom {
	display: block;
	min-width: 0;
	line-height: 1.2;
}
.pdjType {
	display: block;
	font-size: 13px;
	font-style: italic;
	font-weight: 300;
	color: #555;
}
.pdjMarque {
	display: block;
	font-size: 15px;
	font-weight: 700;
	color: #222;
	text-wrap: balance;
}


/* Titre de mois : ligne pleine largeur dans la grille, filet doré au-dessus */

.pdjMoisLigne {
	grid-column: 1 / -1;
	margin: 8px 0 -6px 0;
	padding-top: 22px;
	border-top: 1px solid #DDB75A;
	font-size: 28px;
	line-height: 30px;
	font-weight: 700;
	letter-spacing: -1px;
	color: #222;
}


/* Pièce du jour : toute la vignette dans un écrin crème bordé d'or (filet dégradé). Il déborde dans la gouttière
   (marges négatives), la photo garde sa taille. Sur iPhone il prend la largeur : photo à gauche, texte à droite. */

.pdjDuJour {
	grid-column: span 2;
}
.pdjEcrin {
	display: block;
	margin: -8px;
	padding: 2px;
	background: linear-gradient(135deg, #F5DC8E 0%, #CFA036 35%, #F2D27A 58%, #B8872A 100%);
}
.pdjEcrinIn {
	display: grid;
	grid-template-columns: calc(50% - 6px) 1fr;
	grid-template-rows: 1fr auto auto auto 1fr;
	column-gap: 16px;
	padding: 6px 14px 6px 6px;
	background-color: #FBEBC5;
}
.pdjEcrinIn > .pdjPhoto {
	grid-column: 1;
	grid-row: 1 / 6;
}
.pdjEcrinIn > .pdjDuJourLabel {
	grid-column: 2;
	grid-row: 2;
	margin-top: 0;
}
.pdjEcrinIn > .pdjLegende {
	grid-column: 2;
	grid-row: 3;
}
.pdjEcrinIn > .pdjVoir {
	grid-column: 2;
	grid-row: 4;
	justify-self: start;
}
.pdjDuJourLabel {
	display: block;
	margin-top: 12px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #8A6400;
}
.pdjDuJourLabel + .pdjLegende {
	margin-top: 6px;
}
.pdjDuJour .pdjDateNum {
	color: #8A6400;
}
.pdjVoir {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: #8A6400;
}
.pdjVoir svg {
	flex: none;
	width: 14px;
	height: 10px;
}

/* Écrin sur iPhone : la moitié droite a de la place, le texte y est plus grand */
@media screen and (max-width: 499px) {
	.pdjEcrinIn .pdjDuJourLabel {
		font-size: 11px;
	}
	.pdjEcrinIn .pdjDateNum {
		font-size: 27px;
	}
	.pdjEcrinIn .pdjDateJour {
		font-size: 9px;
	}
	.pdjEcrinIn .pdjType {
		font-size: 16px;
	}
	.pdjEcrinIn .pdjMarque {
		font-size: 19px;
	}
	.pdjEcrinIn .pdjVoir {
		margin-top: 14px;
		font-size: 11px;
	}
}


/* Ordinateur */

@media screen and (min-width: 500px) {
	.pdjTitre {
		padding-bottom: 12px;
	}
	.pdjChapo {
		margin-bottom: 44px;
		font-size: 20px;
	}
	.pdjGrille {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 40px 30px;
	}
	.pdjLegende {
		gap: 14px;
		margin-top: 14px;
	}
	.pdjDateBloc {
		min-width: 38px;
		padding-right: 12px;
	}
	.pdjDateNum {
		font-size: 28px;
	}
	.pdjDateJour {
		margin-top: 4px;
		font-size: 9px;
		letter-spacing: 1.4px;
	}
	.pdjType {
		font-size: 16px;
	}
	.pdjMarque {
		font-size: 19px;
	}
	.pdjMoisLigne {
		margin: 12px 0 -6px 0;
		padding-top: 30px;
		font-size: 38px;
		line-height: 40px;
		letter-spacing: -1.5px;
	}
	.pdjDuJour {
		grid-column: auto;
	}
	.pdjEcrin {
		margin: -14px;
	}
	.pdjEcrinIn {
		display: block;
		padding: 12px 12px 16px 12px;
	}
	.pdjDuJourLabel, .pdjEcrinIn > .pdjDuJourLabel {
		margin-top: 14px;
		font-size: 11px;
	}
	.pdjVoir {
		gap: 12px;
		margin-top: 14px;
		font-size: 11px;
		letter-spacing: 2px;
	}
	.pdjVoir svg {
		width: 16px;
		height: 12px;
	}
}

/* Survol : pas sur les tablettes, comme le reste du site */
@media only screen and (min-device-width : 1024px) {
	.pdjTuile:hover .pdjPhoto img {
		transform: scale(1.04);
	}
	.pdjTuile:hover .pdjMarque {
		text-decoration-line: underline;
		text-decoration-color: #EEB315;
		text-decoration-thickness: 2px;
		text-underline-offset: 4px;
	}
	.pdjDuJour:hover .pdjVoir {
		color: #222;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pdjPhoto img {
		transition: none;
	}
}