/**
 * Photos Invités — Feuille de styles principale
 * Version: 1.1.0
 *
 * Table des matières :
 *  1. Import Poppins + Variables CSS & reset léger
 *  2. Formulaire de dépôt
 *  3. Zone de dépôt (dropzone)
 *  4. Prévisualisation des images
 *  5. Bouton & barre de progression
 *  6. Messages (erreur, succès)
 *  7. Galerie — grille masonry CSS columns
 *  8. Galerie — légende
 *  9. Lightbox
 * 10. Responsive (1 col mobile / 2 tablette / 3 desktop)
 */

/* =========================================================================
   1. Import Poppins + Variables CSS & reset léger
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
	--pi-primary:       #a3b68d;
	--pi-primary-dark:  #8fa078;
	--pi-primary-light: #f2f5ee;
	--pi-primary-ring:  rgba(163, 182, 141, 0.35);
	--pi-success:       #5a8a5a;
	--pi-error:         #dc2626;
	--pi-border:        #dde4d5;
	--pi-text:          #1e293b;
	--pi-muted:         #64748b;
	--pi-bg:            #ffffff;
	--pi-radius:        0.5rem;
	--pi-radius-btn:    8px;
	--pi-radius-lg:     0.75rem;
	--pi-shadow:        0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
	--pi-shadow-lg:     0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
	--pi-transition:    150ms cubic-bezier(0.4, 0, 0.2, 1);
	--pi-font:          'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
}

.pi-form-wrapper,
.pi-gallery-wrapper {
	box-sizing: border-box;
	font-family: var(--pi-font);
	color: var(--pi-text);
	line-height: 1.6;
}

.pi-form-wrapper *,
.pi-form-wrapper *::before,
.pi-form-wrapper *::after,
.pi-gallery-wrapper *,
.pi-gallery-wrapper *::before,
.pi-gallery-wrapper *::after {
	box-sizing: inherit;
}

/* =========================================================================
   2. Formulaire de dépôt
   ========================================================================= */

.pi-form {
	background: var(--pi-bg);
	border: 1px solid var(--pi-border);
	border-radius: var(--pi-radius-lg);
	padding: 2rem;
	box-shadow: var(--pi-shadow);
	max-width: 680px;
	margin: 0 auto;
}

.pi-field {
	margin-bottom: 1.5rem;
}

.pi-label {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	margin-bottom: 0.4rem;
	color: var(--pi-text);
	font-family: var(--pi-font);
}

.pi-required {
	color: var(--pi-error);
	margin-left: 0.15rem;
}

.pi-input,
.pi-textarea {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 1.5px solid var(--pi-border);
	border-radius: var(--pi-radius);
	font-size: 0.95rem;
	font-family: var(--pi-font);
	font-weight: 400;
	color: var(--pi-text);
	background: var(--pi-bg);
	transition: border-color var(--pi-transition), box-shadow var(--pi-transition);
	outline: none;
}

.pi-input:focus,
.pi-textarea:focus {
	border-color: var(--pi-primary);
	box-shadow: 0 0 0 3px var(--pi-primary-ring);
}

.pi-input::placeholder,
.pi-textarea::placeholder {
	color: #a0aec0;
	font-family: var(--pi-font);
}

.pi-textarea {
	resize: vertical;
	min-height: 80px;
}

/* =========================================================================
   3. Zone de dépôt (dropzone)
   ========================================================================= */

.pi-dropzone {
	position: relative;
	border: 2px dashed var(--pi-border);
	border-radius: var(--pi-radius-lg);
	padding: 2.5rem 1.5rem;
	text-align: center;
	cursor: pointer;
	transition: border-color var(--pi-transition), background var(--pi-transition);
	background: #f8faf5;
}

.pi-dropzone:hover,
.pi-dropzone:focus {
	border-color: var(--pi-primary);
	background: var(--pi-primary-light);
	outline: none;
}

.pi-dropzone.pi-dragover {
	border-color: var(--pi-primary);
	background: var(--pi-primary-light);
	box-shadow: 0 0 0 4px var(--pi-primary-ring);
}

.pi-dropzone-icon {
	display: block;
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
	pointer-events: none;
}

.pi-dropzone-text {
	display: block;
	color: var(--pi-muted);
	font-size: 0.9rem;
	font-family: var(--pi-font);
	pointer-events: none;
}

.pi-file-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
	height: 100%;
}

/* =========================================================================
   4. Prévisualisation des images
   ========================================================================= */

.pi-preview-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 0.75rem;
	margin-top: 1rem;
}

.pi-preview-item {
	position: relative;
	border-radius: var(--pi-radius);
	overflow: hidden;
	aspect-ratio: 1;
	background: var(--pi-border);
	box-shadow: var(--pi-shadow);
}

.pi-preview-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pi-preview-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 22px;
	height: 22px;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--pi-transition);
	padding: 0;
}

.pi-preview-remove:hover {
	background: var(--pi-error);
}

/* =========================================================================
   5. Bouton & barre de progression
   ========================================================================= */

.pi-submit-row {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-start;
}

.pi-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.5rem;
	background: var(--pi-primary);
	color: #fff;
	border: none;
	border-radius: var(--pi-radius-btn);
	font-size: 0.9rem;
	font-weight: 600;
	font-family: var(--pi-font);
	letter-spacing: 0.01em;
	line-height: 1;          /* empêche le thème d'injecter de la hauteur via line-height */
	cursor: pointer;
	transition: background var(--pi-transition), transform var(--pi-transition), box-shadow var(--pi-transition);
	box-shadow: var(--pi-shadow);
	outline: none;
}

/* Neutralise les <br> et marges que certains thèmes (Hello Elementor) injectent dans les boutons */
.pi-form-wrapper .pi-button br,
.pi-form-wrapper .pi-button::before,
.pi-form-wrapper .pi-button::after {
	display: none !important;
	content: none !important;
}

.pi-button:hover:not(:disabled) {
	background: var(--pi-primary-dark);
	box-shadow: var(--pi-shadow-lg);
}

.pi-button:focus-visible {
	box-shadow: 0 0 0 3px var(--pi-primary-ring);
}

.pi-button:active:not(:disabled) {
	transform: translateY(1px);
}

.pi-button:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

.pi-loader {
	width: 18px;
	height: 18px;
	border: 2.5px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pi-spin .7s linear infinite;
	flex-shrink: 0;
}

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

.pi-progress-bar {
	width: 100%;
	max-width: 360px;
	height: 6px;
	background: var(--pi-border);
	border-radius: 9999px;
	overflow: hidden;
}

.pi-progress-fill {
	height: 100%;
	background: var(--pi-primary);
	border-radius: 9999px;
	transition: width .25s ease;
}

/* =========================================================================
   6. Messages (erreur, succès)
   ========================================================================= */

.pi-error-message {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: var(--pi-error);
	border-radius: var(--pi-radius);
	padding: 0.75rem 1rem;
	font-size: 0.875rem;
	font-family: var(--pi-font);
	line-height: 1.5;
	margin-bottom: 1rem;
}

.pi-success-message {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background: #f2f7ee;
	border: 1px solid #c8d9b8;
	color: var(--pi-success);
	border-radius: var(--pi-radius-lg);
	padding: 1.5rem;
	font-size: 1rem;
	font-weight: 500;
	font-family: var(--pi-font);
	max-width: 680px;
	margin: 1rem auto 0;
}

.pi-success-icon {
	font-size: 1.5rem;
	flex-shrink: 0;
}

/* =========================================================================
   7. Galerie — grille masonry (CSS columns)
   =========================================================================
   CSS columns = vrai masonry natif : les photos gardent leurs proportions
   naturelles et s'empilent dans chaque colonne sans espace vide.
   - Desktop  (>= 1024px) : 3 colonnes
   - Tablette (640–1023px) : 2 colonnes  (voir section 10)
   - Mobile   (< 640px)   : 1 colonne   (voir section 10)
   ========================================================================= */

.pi-gallery-empty {
	color: var(--pi-muted);
	text-align: center;
	padding: 3rem 1rem;
	font-size: 1.1rem;
	font-family: var(--pi-font);
}

.pi-gallery-grid {
	column-count: 4;
	column-gap: 1.25rem;  /* espace horizontal entre colonnes */
}

/* Wrapper card : contient la figure + le bouton téléchargement */
.pi-gallery-card {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	display: block;
	margin: 0 0 1.25rem 0; /* espace vertical entre lignes — identique au column-gap */
}

.pi-gallery-item {
	display: block;
	position: relative;
	border-radius: var(--pi-radius-lg) var(--pi-radius-lg) 0 0;
	overflow: hidden;
	margin: 0 0 1rem 0;
	cursor: pointer;
	box-shadow: var(--pi-shadow);
	background: var(--pi-border);
	transition: transform var(--pi-transition), box-shadow var(--pi-transition);
}

.pi-gallery-item:hover,
.pi-gallery-item:focus {
	transform: translateY(-2px) scale(1.01);
	box-shadow: var(--pi-shadow-lg);
	outline: none;
}

.pi-gallery-item:focus-visible {
	box-shadow: var(--pi-shadow-lg), 0 0 0 3px var(--pi-primary);
}

/* Hauteur naturelle de l'image — cœur du masonry */
.pi-gallery-thumb {
	width: 100%;
	height: auto;
	display: block;
	transition: transform .4s ease;
}

.pi-gallery-item:hover .pi-gallery-thumb {
	transform: scale(1.03);
}

/* Bouton téléchargement */
.pi-download-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: 100%;
	padding: 0.5rem 0.75rem;
	background: #f8faf5;
	color: var(--pi-primary-dark) !important;
	border: 1px solid var(--pi-border);
	border-top: none;
	border-radius: 0 0 var(--pi-radius-lg) var(--pi-radius-lg);
	font-size: 0.78rem;
	font-weight: 600;
	font-family: var(--pi-font);
	text-decoration: none !important;
	line-height: 1;
	cursor: pointer;
	transition: background var(--pi-transition), color var(--pi-transition);
}

.pi-download-btn:hover {
	background: var(--pi-primary) !important;
	color: #fff !important;
	border-color: var(--pi-primary) !important;
}

.pi-download-btn svg {
	flex-shrink: 0;
	transition: transform var(--pi-transition);
}

.pi-download-btn:hover svg {
	transform: translateY(2px);
}

/* =========================================================================
   8. Galerie — légende
   ========================================================================= */

.pi-gallery-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0.75rem 0.875rem 0.6rem;
	background: linear-gradient(transparent, rgba(0, 0, 0, .6));
	color: #fff;
	transform: translateY(100%);
	transition: transform var(--pi-transition);
	pointer-events: none;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.pi-gallery-item:hover .pi-gallery-caption,
.pi-gallery-item:focus .pi-gallery-caption {
	transform: translateY(0);
}

.pi-caption-author {
	font-weight: 700;
	font-size: 0.875rem;
	font-family: var(--pi-font);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pi-caption-comment {
	font-size: 0.8rem;
	font-family: var(--pi-font);
	opacity: .9;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =========================================================================
   9. Lightbox
   ========================================================================= */

.pi-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, .92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	animation: pi-fade-in .2s ease;
}

.pi-lightbox[hidden] {
	display: none;
}

@keyframes pi-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.pi-lightbox-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 90vw;
	max-height: 90vh;
	gap: 0.75rem;
}

.pi-lightbox-img {
	max-width: 100%;
	max-height: 80vh;
	border-radius: var(--pi-radius);
	object-fit: contain;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
	display: block;
	animation: pi-zoom-in .2s ease;
}

@keyframes pi-zoom-in {
	from { transform: scale(.95); opacity: 0; }
	to   { transform: scale(1);   opacity: 1; }
}

.pi-lightbox-meta {
	color: #e2e8f0;
	text-align: center;
	font-size: 0.9rem;
	font-family: var(--pi-font);
	max-width: 540px;
}

.pi-lightbox-meta strong {
	display: block;
	font-size: 1rem;
	font-family: var(--pi-font);
	margin-bottom: 0.2rem;
}

.pi-lightbox-close,
.pi-lightbox-prev,
.pi-lightbox-next {
	position: fixed;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--pi-transition);
	outline: none;
	line-height: 1;
	font-family: var(--pi-font);
}

.pi-lightbox-close {
	top: 1.25rem;
	right: 1.25rem;
	width: 44px;
	height: 44px;
	font-size: 1.5rem;
}

.pi-lightbox-prev,
.pi-lightbox-next {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	font-size: 2rem;
}

.pi-lightbox-prev { left: 1rem; }
.pi-lightbox-next { right: 1rem; }

.pi-lightbox-close:hover,
.pi-lightbox-prev:hover,
.pi-lightbox-next:hover {
	background: rgba(255, 255, 255, .3);
}

.pi-lightbox-close:focus-visible,
.pi-lightbox-prev:focus-visible,
.pi-lightbox-next:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .5);
}

/* =========================================================================
   10. Responsive
   ========================================================================= */

/* Tablette : 2 colonnes */
@media (max-width: 1023px) {

	.pi-gallery-grid {
		column-count: 3;
		column-gap: 1.25rem;
	}
}

/* Mobile : 1 colonne */
@media (max-width: 639px) {

	.pi-form {
		padding: 1.25rem;
	}

	.pi-gallery-grid {
		column-count: 2;
	}

	.pi-gallery-card {
		margin-bottom: 1rem; /* légèrement réduit sur mobile mais cohérent */
	}

	.pi-lightbox-prev { left: 0.25rem; }
	.pi-lightbox-next { right: 0.25rem; }

	.pi-lightbox-prev,
	.pi-lightbox-next {
		width: 40px;
		height: 40px;
		font-size: 1.5rem;
	}

	.pi-preview-grid {
		grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	}
}

/* =========================================================================
   11. Surcharge thème Hello Elementor — forçage couleurs plugin
   =========================================================================
   Hello Elementor applique une couleur d'accentuation (souvent rose/violet)
   sur les boutons et liens via des sélecteurs globaux.
   On augmente la spécificité ici pour s'assurer que les couleurs du plugin
   ne sont jamais écrasées, quelle que soit la configuration du thème.
   ========================================================================= */

.pi-form-wrapper .pi-button,
.pi-form-wrapper .pi-button:link,
.pi-form-wrapper .pi-button:visited,
.pi-form-wrapper .pi-button:hover,
.pi-form-wrapper .pi-button:focus,
.pi-form-wrapper .pi-button:active {
	background-color: var(--pi-primary) !important;
	color: #ffffff !important;
	border-color: transparent !important;
	text-decoration: none !important;
	line-height: 1 !important;
	padding-top: 0.6rem !important;
	padding-bottom: 0.6rem !important;
}

.pi-form-wrapper .pi-button:hover:not(:disabled),
.pi-form-wrapper .pi-button:focus:not(:disabled) {
	background-color: var(--pi-primary-dark) !important;
}

/* Flèches et croix de la lightbox */
.pi-lightbox .pi-lightbox-close,
.pi-lightbox .pi-lightbox-prev,
.pi-lightbox .pi-lightbox-next,
.pi-lightbox .pi-lightbox-close:link,
.pi-lightbox .pi-lightbox-close:visited,
.pi-lightbox .pi-lightbox-prev:link,
.pi-lightbox .pi-lightbox-prev:visited,
.pi-lightbox .pi-lightbox-next:link,
.pi-lightbox .pi-lightbox-next:visited {
	color: #ffffff !important;
	background-color: rgba(255, 255, 255, .15) !important;
	border-color: transparent !important;
	text-decoration: none !important;
}

.pi-lightbox .pi-lightbox-close:hover,
.pi-lightbox .pi-lightbox-prev:hover,
.pi-lightbox .pi-lightbox-next:hover {
	color: #ffffff !important;
	background-color: rgba(255, 255, 255, .3) !important;
}

/* Focus ring vert sur les éléments interactifs du plugin */
.pi-form-wrapper .pi-input:focus,
.pi-form-wrapper .pi-textarea:focus {
	border-color: var(--pi-primary) !important;
	box-shadow: 0 0 0 3px var(--pi-primary-ring) !important;
	outline: none !important;
}

.pi-form-wrapper .pi-dropzone:hover,
.pi-form-wrapper .pi-dropzone:focus,
.pi-form-wrapper .pi-dropzone.pi-dragover {
	border-color: var(--pi-primary) !important;
}

/* =========================================================================
   12. Champ select soirée
   ========================================================================= */

.pi-form-wrapper select.pi-input {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a3b68d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.875rem center;
	padding-right: 2.5rem;
	cursor: pointer;
}

/* =========================================================================
   13. Badge soirée dans la légende galerie
   ========================================================================= */

.pi-caption-soiree {
	display: inline-block;
	font-size: 0.72rem;
	font-family: var(--pi-font);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: rgba(163, 182, 141, 0.75);
	color: #fff;
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
	align-self: flex-start;
}

/* =========================================================================
   14. Icône SVG dropzone (remplace l'emoji)
   ========================================================================= */

.pi-dropzone-icon {
	color: var(--pi-primary);
	margin-bottom: 0.75rem;
}

.pi-dropzone-icon svg {
	display: block;
	margin: 0 auto;
}