/* ==========================================================================
   Polaroid Testimonials — styles front
   ========================================================================== */

/* --- Conteneur / grille Masonry (colonnes CSS) ------------------------- */
.pt-masonry {
	column-count: var(--pt-cols, 3);
	column-gap: var(--pt-gap, 44px);
	box-sizing: border-box;
	padding: clamp(16px, 4vw, 56px) clamp(16px, 5vw, 72px);
}

.pt-masonry * {
	box-sizing: border-box;
}

/* Pleine largeur : on casse le conteneur du thème pour occuper tout le viewport. */
.pt-fullwidth {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
}

/* Largeur contrainte (option "pleine largeur" désactivée). */
.pt-constrained {
	max-width: var(--pt-maxw, 1200px);
	margin-left: auto;
	margin-right: auto;
}

/* --- La carte (élément de colonne) ------------------------------------- */
.pt-card {
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
	page-break-inside: avoid;
	display: inline-block; /* évite les coupures de colonne sur certains navigateurs */
	width: 100%;
	margin: 0 0 var(--pt-gap, 44px);
	cursor: pointer;
	perspective: 1400px;
	-webkit-perspective: 1400px;
	/* --pt-reveal-offset : point de départ de l'apparition (négatif = vient du haut).
	   --pt-ty : décalage vertical courant (0 quand la photo est en place). */
	--pt-reveal-offset: -32px;
	--pt-ty: 0px;
	transform: translateY(var(--pt-ty, 0px)) rotate(var(--pt-rot, 0deg));
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s ease;
	outline: none;
}

/* Survol : la photo se redresse légèrement et se soulève. */
@media (hover: hover) {
	.pt-card:hover {
		transform: rotate(calc(var(--pt-rot, 0deg) * 0.35)) translateY(-8px) scale(1.02);
		z-index: 3;
	}
}

/* Accessibilité clavier. */
.pt-card:focus-visible {
	transform: rotate(calc(var(--pt-rot, 0deg) * 0.35)) translateY(-8px) scale(1.02);
}

.pt-card:focus-visible .pt-polaroid,
.pt-card:focus-visible .pt-note {
	box-shadow: 0 0 0 3px rgba(60, 130, 246, 0.7), 0 18px 40px rgba(0, 0, 0, 0.22);
}

/* --- Apparition au scroll (fade-in depuis le haut) --------------------- */
/* Ne touche QUE --pt-ty et opacity : la propriété transform reste pilotée
   par les règles de base/survol, donc aucun conflit avec l'effet de survol. */
.pt-reveal .pt-card:not(.pt-visible) {
	opacity: 0;
	--pt-ty: var(--pt-reveal-offset, -32px);
	will-change: transform, opacity;
}

/* --- Mécanique du retournement 3D -------------------------------------- */
.pt-flip-inner {
	position: relative;
	display: grid; /* les 2 faces se superposent dans la même cellule */
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transition: transform 0.85s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.pt-card.is-flipped .pt-flip-inner {
	transform: rotateY(180deg);
}

.pt-face {
	grid-area: 1 / 1; /* superposition recto/verso */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.pt-back {
	transform: rotateY(180deg);
}

/* --- Recto : la photo Polaroid ----------------------------------------- */
.pt-polaroid {
	margin: 0;
	background: var(--pt-frame, #ffffff);
	padding: 14px 14px 0;
	border-radius: 3px;
	box-shadow:
		0 14px 30px rgba(0, 0, 0, 0.18),
		0 3px 8px rgba(0, 0, 0, 0.12);
	transition: box-shadow 0.45s ease;
}

@media (hover: hover) {
	.pt-card:hover .pt-polaroid {
		box-shadow:
			0 26px 50px rgba(0, 0, 0, 0.26),
			0 6px 14px rgba(0, 0, 0, 0.14);
	}
}

.pt-photo {
	position: relative;
	overflow: hidden;
	background: #111;
	/* Léger creux pour donner de la profondeur à la photo dans le cadre. */
	box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35);
}

.pt-photo .pt-img {
	display: block;
	width: 100%;
	height: auto;
}

.pt-caption {
	font-family: var(--pt-font, "Caveat", cursive);
	color: var(--pt-text, #2b2b2b);
	text-align: center;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.7rem);
	line-height: 1.2;
	padding: 16px 10px 20px; /* le bas plus épais : signature du Polaroid */
	word-break: break-word;
}

/* --- Verso : la note manuscrite ---------------------------------------- */
.pt-back .pt-note {
	height: 100%;
	background: var(--pt-back, #fdfaf2);
	border-radius: 3px;
	padding: clamp(22px, 4vw, 34px) clamp(20px, 4vw, 30px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-shadow:
		0 14px 30px rgba(0, 0, 0, 0.18),
		0 3px 8px rgba(0, 0, 0, 0.12);
	/* Très légères lignes de papier pour le côté « note écrite à la main ». */
	background-image:
		repeating-linear-gradient(
			to bottom,
			transparent 0,
			transparent 33px,
			rgba(0, 0, 0, 0.045) 34px
		);
	background-position: 0 14px;
}

.pt-message {
	margin: 0;
	font-family: var(--pt-font, "Caveat", cursive);
	color: var(--pt-text, #2b2b2b);
	font-size: clamp(1.1rem, 1rem + 0.55vw, 1.55rem);
	line-height: 1.5;
	word-break: break-word;
}

.pt-signature {
	font-family: var(--pt-font, "Caveat", cursive);
	color: var(--pt-text, #2b2b2b);
	opacity: 0.65;
	margin-top: 18px;
	text-align: right;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.5rem);
}

/* Petit indice visuel « retournable » au survol. */
.pt-card::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* --- Scroll infini (page dédiée) --------------------------------------- */
.pt-infinite-wrap {
	box-sizing: border-box;
}

.pt-sentinel {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 8px;
	padding: 6px 0 40px;
}

.pt-sentinel-done {
	display: none;
}

.pt-loader {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid rgba(0, 0, 0, 0.15);
	border-top-color: rgba(0, 0, 0, 0.55);
	animation: pt-spin 0.8s linear infinite;
	opacity: 0;
	transition: opacity 0.2s ease;
}

/* Le loader n'apparaît que pendant le chargement d'un lot. */
.pt-sentinel.is-active .pt-loader {
	opacity: 1;
}

@keyframes pt-spin {
	to {
		transform: rotate(360deg);
	}
}

/* --- Carrousel mobile (coverflow continu) ------------------------------ */
/* La classe .pt-slider-on est posée par le JS uniquement sur mobile ; sans JS
   (ou sur ordinateur) la grille Masonry reste affichée normalement. */
.pt-masonry.pt-slider-on {
	column-count: initial !important;
	column-gap: 0;
	display: block; /* le conteneur devient la « fenêtre » qui masque les débords */
	overflow: hidden;
	padding: 30px 0;
	/* Largeur de la carte centrale et espacement entre cartes. */
	--pt-slide-w: 70vw;
	--pt-slide-gap: 3vw;
}

/* La piste : rangée horizontale déplacée par transform (translate). */
.pt-slider-on .pt-track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	will-change: transform;
}

/* Chaque carte devient un élément de largeur fixe (≈ 70 % de l'écran). */
.pt-slider-on .pt-card {
	flex: 0 0 var(--pt-slide-w, 70vw);
	width: var(--pt-slide-w, 70vw);
	margin: 0 calc(var(--pt-slide-gap, 3vw) / 2);
	display: block;
	opacity: 0.6;
	--pt-ty: 0px;
	/* Voisines : un peu plus petites et inclinées ; la centrale est redressée. */
	transform: rotate(var(--pt-rot, 0deg)) scale(0.82);
	transition: transform 0.45s ease, opacity 0.45s ease, filter 0.45s ease;
	filter: saturate(0.9);
	cursor: pointer;
}

/* La carte au centre : entière, droite, mise en avant (son recto est bien lisible). */
.pt-slider-on .pt-card.pt-center {
	opacity: 1;
	transform: rotate(0deg) scale(1);
	filter: none;
	z-index: 2;
}

/* Sur ordinateur, on annule les effets de survol hérités dans le carrousel. */
.pt-slider-on .pt-card:hover {
	transform: rotate(var(--pt-rot, 0deg)) scale(0.82);
}
.pt-slider-on .pt-card.pt-center:hover {
	transform: rotate(0deg) scale(1);
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 781px) {
	.pt-masonry {
		column-count: var(--pt-cols-mobile, 2);
		column-gap: var(--pt-gap-mobile, 24px);
	}
	.pt-card {
		margin-bottom: var(--pt-gap-mobile, 24px);
	}
}

/* Sur les très petits écrans, on passe à une seule colonne pour la lisibilité.
   Supprimez ce bloc si vous voulez forcer 2 colonnes partout. */
@media (max-width: 430px) {
	.pt-masonry {
		column-count: 1;
		column-gap: 0;
		padding-left: clamp(16px, 8vw, 28px);
		padding-right: clamp(16px, 8vw, 28px);
	}
}

/* --- Accessibilité : mouvement réduit ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.pt-card,
	.pt-flip-inner,
	.pt-polaroid {
		transition: none !important;
	}
	/* Pas d'apparition animée : les photos sont visibles d'emblée. */
	.pt-reveal .pt-card {
		opacity: 1 !important;
		--pt-ty: 0px !important;
	}
	.pt-loader {
		animation: none !important;
	}
}