/**
 * Geste Person Card - Styles
 * @package SP Page Builder
 * @author GESTE Engineering
 */

/* Force toute la chaîne de conteneurs SP Page Builder à utiliser flexbox pour étirer les cartes */

/* Espacement entre les cartes empilées verticalement */
.sppb-addon-wrapper.addon-root-geste-person-card {
	margin-bottom: 30px !important;
}

.sppb-addon-wrapper.addon-root-geste-person-card:last-child {
	margin-bottom: 0 !important;
}

/* Espacement entre les rows de cartes */
.geste-cards-row:not([style*="padding-bottom"]) {
	padding-bottom: 30px !important; /* S'applique seulement si pas de padding-bottom inline */
}

.geste-cards-row:last-of-type:not([style*="padding-bottom"]) {
	padding-bottom: 0 !important;
}

/* Désactiver le padding-bottom avec la classe nopaddingbottom */
.geste-cards-row.nopaddingbottom {
	padding-bottom: 0 !important;
}

/* La row doit être en flexbox */
.sppb-row:has(.geste-person-card-wrapper) {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch !important; /* Force les colonnes à s'étirer */
}

/* Les conteneurs doivent s'étirer */
.sppb-row:has(.geste-person-card-wrapper) > .sppb-row-column,
.sppb-row:has(.geste-person-card-wrapper) > [class*="sppb-col-"] {
	display: flex !important;
	flex-direction: column;
}

/* Les conteneurs internes doivent aussi s'étirer */
.sppb-row:has(.geste-person-card-wrapper) .sppb-column {
	display: flex !important;
	flex-direction: column;
	height: 100%;
}

.sppb-row:has(.geste-person-card-wrapper) .sppb-column-addons {
	display: flex !important;
	flex-direction: column;
	flex: 1;
}

.sppb-row:has(.geste-person-card-wrapper) .sppb-addon-wrapper {
	display: flex !important;
	flex-direction: column;
	flex: 1;
}

.sppb-row:has(.geste-person-card-wrapper) .sppb-addon-wrapper > div {
	display: flex !important;
	flex-direction: column;
	height: 100%;
}

/* Card wrapper */
.geste-person-card-wrapper {
	max-width: 400px;
	margin: 0 auto 30px auto;
	border-radius: 0;
	overflow: hidden;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	height: 100%; /* Réactivé pour l'alignement sur la même ligne */
}

/* Card shadow - désactivée par défaut */
.geste-person-card-wrapper.geste-card-shadow {
	box-shadow: none;
}

/* Card hover effect - désactivé */
.geste-person-card-wrapper.geste-card-hover:hover {
	transform: none;
	box-shadow: none;
}

/* Image section - Format carré avec crop sur le haut */
.geste-person-card-image {
	position: relative;
	width: 100%;
	height: 400px; /* Hauteur fixe au lieu de padding-top pour éviter les décalages */
	overflow: hidden;
	background: #f0f0f0;
	flex-shrink: 0; /* Empêche l'image de se comprimer */
}

.geste-person-card-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: top center; /* Privilégie la partie haute de l'image */
}

/* Map section */
.geste-person-card-map {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #f0f0f0;
}

.geste-person-card-map iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

.geste-map-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f0;
	color: #999;
	font-size: 14px;
	text-align: center;
	padding: 20px;
}

/* Info section */
.geste-person-card-info {
	padding: 20px;
	background-color: #d9d9d9;
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Hauteur minimum pour la zone info (classe optionnelle) */
.hauteur-minimum .geste-person-card-info {
	min-height: 307px;
}

/* Name and label wrapper */
.geste-person-name-label-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: nowrap;
	height: 32px; /* Hauteur FIXE pour alignement parfait avec ou sans label */
}

/* Name */
.geste-person-name {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #333333;
	line-height: 1.4;
	flex: 1;
	text-align: left;
}

/* Label/Badge */
.geste-person-label {
	display: inline-block;
	padding: 4px 12px;
	background-color: #ce0f69;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 0;
	line-height: 1.4;
	white-space: nowrap;
}

.geste-person-label-link {
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.geste-person-label-link:hover {
	opacity: 0.8;
}

/* Designation */
.geste-person-designation {
	margin: 0 0 15px 0;
	font-size: 16px !important;
	color: #666666;
	line-height: 1.4 !important;
	text-align: left;
	font-weight: normal !important;
}

/* Description (alternative au titre) */
.geste-person-description {
	margin: 10px 0 15px 0;
	font-size: 16px !important;
	color: #666666;
	line-height: 1.4 !important;
	text-align: left;
	font-weight: normal !important;
}

/* Contact section */
.geste-person-contact {
	margin: 15px 0 30px;
}

.geste-contact-item {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	font-size: 16px !important;
	line-height: 1.5;
	color: #666666 !important;
	font-weight: normal !important;
}

.geste-contact-item:last-child {
	margin-bottom: 0;
}

.geste-contact-link {
	display: flex;
	align-items: center;
	color: #666666 !important;
	text-decoration: none;
	transition: color 0.3s ease;
	font-weight: normal !important;
}

.geste-contact-link:hover {
	color: #ce0f69 !important;
}

.geste-contact-icon {
	margin-right: 8px;
	font-size: 14px;
	color: #666666;
	min-width: 16px;
	text-align: center;
}

.geste-contact-text {
	color: #666666 !important;
	line-height: 1.5;
	font-weight: normal !important;
}

/* Button */
.geste-person-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	margin-top: auto;
	background-color: #ce0f69;
	color: #ffffff;
	border: none;
	border-radius: 0;
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
	transition: all 0.3s ease;
	width: 100%;
	justify-content: center;
}

/* Button as link */
.geste-person-btn.geste-person-btn-link {
	text-decoration: none;
}

.geste-person-btn:hover {
	background-color: #a60c55;
}

.geste-person-btn.expanded {
	background-color: #666666;
}

.geste-person-btn i {
	font-size: 12px;
}

/* Expanded content (for expand mode) */
.geste-person-expanded-content {
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #e0e0e0;
}

.geste-expanded-content-inner {
	color: #666666;
	line-height: 1.6;
}

.geste-expanded-content-inner p:first-child {
	margin-top: 0;
}

.geste-expanded-content-inner p:last-child {
	margin-bottom: 0;
}

/* Modal */
.geste-person-modal {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 2147483647 !important;
	display: none !important;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.geste-person-modal.active {
	display: flex !important;
	isolation: isolate !important;
}

.geste-modal-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	background-color: rgba(0, 0, 0, 0.9) !important;
	cursor: pointer;
	z-index: 2147483646 !important;
}

.geste-modal-content {
	position: relative !important;
	background: #ffffff;
	border-radius: 0;
	max-width: 800px;
	width: 90%;
	max-height: 90vh;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	animation: modalFadeIn 0.3s ease;
	z-index: 2 !important;
}

@keyframes modalFadeIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.geste-modal-close {
	position: absolute;
	top: 15px;
	right: 15px;
	width: 40px;
	height: 40px;
	background: #ffffff;
	border: 2px solid #e0e0e0;
	border-radius: 50%;
	font-size: 28px;
	line-height: 36px;
	color: #333333;
	cursor: pointer;
	z-index: 10;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 300;
}

.geste-modal-close:hover {
	background: #ce0f69;
	color: #ffffff;
	transform: rotate(90deg);
}

.geste-modal-body {
	padding: 40px;
	max-height: 90vh;
	overflow-y: auto;
	color: #666666;
	line-height: 1.4;
}

.geste-modal-body p:first-child {
	margin-top: 0;
}

.geste-modal-body p:last-child {
	margin-bottom: 0;
}

/* Styles pour le contenu HTML dans la modale */
.geste-modal-body h1,
.geste-modal-body h2,
.geste-modal-body h3,
.geste-modal-body h4,
.geste-modal-body h5,
.geste-modal-body h6 {
	color: #333333;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	line-height: 1.3;
}

.geste-modal-body h1:first-child,
.geste-modal-body h2:first-child,
.geste-modal-body h3:first-child {
	margin-top: 0;
}

.geste-modal-body ul,
.geste-modal-body ol {
	margin: 1em 0;
	padding-left: 2em;
}

.geste-modal-body li {
	margin-bottom: 0.5em;
}

.geste-modal-body a {
	color: #ce0f69;
	text-decoration: none;
	transition: color 0.3s ease;
}

.geste-modal-body a:hover {
	color: #a60c55;
	text-decoration: underline;
}

.geste-modal-body strong,
.geste-modal-body b {
	font-weight: 700;
	color: #333333;
}

.geste-modal-body em,
.geste-modal-body i {
	font-style: italic;
}

.geste-modal-body img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 1em 0;
}

.geste-modal-body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1em 0;
}

.geste-modal-body table td,
.geste-modal-body table th {
	padding: 8px 12px;
	border: 1px solid #e0e0e0;
}

.geste-modal-body table th {
	background: #f5f5f5;
	font-weight: 700;
}

.geste-modal-body blockquote {
	margin: 1em 0;
	padding: 1em 1.5em;
	border-left: 4px solid #ce0f69;
	background: #f9f9f9;
	font-style: italic;
}

.geste-modal-body code {
	background: #f5f5f5;
	padding: 2px 6px;
	border-radius: 3px;
	font-family: monospace;
	font-size: 0.9em;
}

.geste-modal-body pre {
	background: #f5f5f5;
	padding: 1em;
	border-radius: 4px;
	overflow-x: auto;
	margin: 1em 0;
}

.geste-modal-body pre code {
	background: none;
	padding: 0;
}

/* Fix pour les z-index - VERSION FINALE SIMPLE */
body.geste-modal-open {
	overflow: hidden !important;
}

/* La modale est déplacée dans le body par JS, donc un z-index énorme suffit */
.geste-person-modal.active {
	z-index: 2147483647 !important;
}

.geste-modal-overlay {
	z-index: 2147483646 !important;
}

.geste-modal-content {
	z-index: 2147483647 !important;
}

/* Layout 5 colonnes : 1+2+2+2+2+2+1 */
.cinq-colonnes .sppb-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0 !important;
}

.cinq-colonnes .sppb-col-md-2 {
	flex: 1 1 0 !important;
	max-width: none !important;
}

.cinq-colonnes .sppb-col-md-2 .sppb-addon-text-block {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Responsive pour 5 colonnes */
@media (max-width: 1199px) {
	.cinq-colonnes .sppb-col-md-1 {
		display: none !important;
	}
	
	.cinq-colonnes .sppb-col-md-2 {
		flex: 0 0 33.333% !important;
		max-width: 33.333% !important;
	}
}

@media (max-width: 768px) {
	.cinq-colonnes .sppb-col-md-2 {
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}
}

@media (max-width: 480px) {
	.cinq-colonnes .sppb-col-md-2 {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

/* Responsive */

/* Grands écrans : augmenter la largeur des cartes */
@media (min-width: 1400px) {
	.geste-person-card-wrapper {
		max-width: 460px !important;
		margin: 0 0;
	}
}

/* Smartphones et tablettes */
@media (max-width: 768px) {
	/* Désactiver le padding-bottom des rows sur mobile */
	.geste-cards-row {
		padding-bottom: 0 !important;
	}
	
	.geste-person-card-wrapper {
		max-width: 100%;
		margin: 0 20px 40px 20px !important; /* top, right, bottom, left */
	}
	
	/* Supprimer les paddings des colonnes contenant les cartes en mode mobile */
	.sppb-row-container:has(.geste-person-card-wrapper) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	[class*="sppb-col-"]:has(.geste-person-card-wrapper) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	.sppb-column:has(.geste-person-card-wrapper) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	/* Alternative : cibler les colonnes qui contiennent les cartes */
	[class*="sppb-col-"]:has(.geste-person-card-wrapper) {
		margin-bottom: 40px !important;
	}
	
	/* Dernière colonne sans marge */
	[class*="sppb-col-"]:has(.geste-person-card-wrapper):last-child {
		margin-bottom: 0 !important;
	}
	
	.geste-person-name {
		font-size: 20px;
	}
	
	.geste-person-designation {
		font-size: 14px;
	}
	
	.geste-modal-body {
		padding: 20px;
	}
	
	.geste-modal-content {
		margin: 10px;
	}
}

/* Padding réduit pour tablettes et smartphones */
@media (max-width: 1199px) {
	.geste-person-card-info {
		padding: 20px 10px !important;
	}
}

@media (max-width: 480px) {
	/* Garder le nom et le label sur la même ligne sur mobile */
	.geste-person-name-label-wrapper {
		flex-wrap: nowrap !important;
		justify-content: space-between !important;
		align-items: center !important;
	}
	
	/* Ajuster la taille du nom si nécessaire */
	.geste-person-name {
		font-size: 14px !important;
		flex: 1 !important;
		margin-right: 5px !important;
	}
	
	/* Garder le label à droite */
	.geste-person-label {
		flex-shrink: 0 !important;
	}
}