/*
 * AB Team Popup — styles.
 *
 * Variables CSS exposées en surface = Aurélie peut overrider couleurs/spacing
 * depuis le thème enfant sans toucher au plugin.
 *
 * Pattern BEM : .abtp-block__element--modifier
 */

:root {
	/* Couleurs (extraites du popup agence-dpc.com) */
	--abtp-bg:            #ffffff;
	--abtp-backdrop:      rgba(0, 0, 0, 0.55);
	--abtp-title:         #333333;
	--abtp-role:          #9a9a9a;
	--abtp-body:          #666;
	--abtp-divider:       #E6E7E8;
	--abtp-close:         #6f6f6f;
	--abtp-accent:        #C1D42D; /* ligne vert-lime bordure bas */
	--abtp-radius:        0;        /* angles droits comme l'actuel */
	--abtp-shadow:        0 30px 60px rgba(0, 0, 0, 0.18);

	/* Spacing */
	--abtp-modal-pad:     2.5rem;
	--abtp-gap:           2rem;
}

/* ====================================================
 * GRID (cartes)
 * ==================================================== */

.abtp-grid {
	display: grid;
	gap: 4rem 1.5rem;
	grid-template-columns: repeat(var(--abtp-cols, 4), minmax(0, 1fr));
}

.abtp-grid--cols-1 { --abtp-cols: 1; }
.abtp-grid--cols-2 { --abtp-cols: 2; }
.abtp-grid--cols-3 { --abtp-cols: 3; }
.abtp-grid--cols-4 { --abtp-cols: 4; }
.abtp-grid--cols-5 { --abtp-cols: 5; }
.abtp-grid--cols-6 { --abtp-cols: 6; }

@media (max-width: 900px) { .abtp-grid { --abtp-cols: 2; } }
@media (max-width: 540px) { .abtp-grid { --abtp-cols: 1; } }

/* ====================================================
 * CARD
 * ==================================================== */

.abtp-grid .abtp-card {
	display: flex;
	flex-direction: column;
    align-items: flex-start;
    text-align: left;
	padding: 0;
	background: transparent;
	gap: 1rem;
}

.abtp-card p {
    margin: 0;
}

.abtp-grid .abtp-card__photo {
    line-height: 0;
}
.abtp-grid .abtp-card__photo img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

.abtp-grid .abtp-card__divider {
    width: 100%;
    border: 0;
    border-top: 1px solid var(--abtp-divider);
}

.abtp-grid .abtp-card__cta {
	background: transparent;
	border: 0;
	padding: 0.25rem 0;
	cursor: pointer;
	font: inherit;
	color: #6ACBDF; /* bleu CTA, matche "+ VOIR LE PROFIL" actuel */
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.85rem;
	margin-top: 0.25rem;
}

.abtp-grid .abtp-card__cta:hover,
.abtp-grid .abtp-card__cta:focus,
.abtp-grid .abtp-card__cta:focus-visible {
	border: none;
	color: #54A1B0;
	background-color: transparent;
	text-decoration: none;
	outline: none;
}

/* ====================================================
 * MODAL (<dialog>)
 * ==================================================== */

.abtp-modal {
	border: 0;
	padding: 0;
	background: var(--abtp-bg);
	color: var(--abtp-body);
	border-radius: var(--abtp-radius);
	box-shadow: var(--abtp-shadow);
	max-width: 1100px;
	width: calc(100% - 2rem);
	max-height: 90vh;
}

.abtp-modal::backdrop {
	background: var(--abtp-backdrop);
}

.abtp-modal[open] {
	animation: abtp-fade-in 0.25s ease-out;
	overscroll-behavior: contain;   /*empêche la page sous-jacente de scroller*/
}

@keyframes abtp-fade-in {
	from { opacity: 0; transform: scale(0.97); }
	to   { opacity: 1; transform: scale(1); }
}

/* Close button */
.abtp-modal .abtp-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: #666;
	cursor: pointer;
	padding: 0;
	z-index: 2;
}

.abtp-modal .abtp-modal__close svg {
	width: 28px;
	height: 28px;
}

.abtp-modal .abtp-modal__close:hover,
.abtp-modal .abtp-modal__close:focus,
.abtp-modal .abtp-modal__close:focus-visible {
	opacity: 1;
	border: none;
	outline: none;
	background: transparent;
	color: #666;
}

/* Body : grid 2 colonnes desktop */
.abtp-modal .abtp-modal__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--abtp-gap);
	padding: var(--abtp-modal-pad);
	overflow-y: auto;
	max-height: 90vh;
	align-items: start;
}

.abtp-modal .abtp-modal__photo-wrap {
	width: 100%;
}

.abtp-modal .abtp-modal__photo {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	margin-bottom: 5px;
}

.abtp-modal .abtp-modal__text {
	padding-top: 0.5rem;
	line-height: 1.2;
}

.abtp-modal .abtp-modal__divider {
	border: 0;
	border-top: 1px solid var(--abtp-divider);
	margin: 0 0 1.5rem;
}


/* ====================================================
 * RESPONSIVE — mobile : stack vertical
 * ==================================================== */

@media (max-width: 768px) {
    .abtp-grid {
        gap: 2.5rem;
    }
    
	.abtp-modal {
		width: calc(100% - 1rem);
		max-height: 95vh;
	}

	.abtp-modal .abtp-modal__body {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding: 1.5rem;
	}

	.abtp-modal .abtp-modal__photo {
		aspect-ratio: 1 / 1; /* mobile : un peu plus carré */
	}

	.abtp-modal .abtp-modal__close {
        top: 0.5rem;
        right: 0.5rem;
	}
}

/* ====================================================
 * ADAPTATIONS agence-dpc (déploiement 2026-07-09)
 * member_fields() sort dynamiquement TOUS les champs JetEngine
 * (titre, bio, ordre_affichage, ordre2025). On masque ceux qui ne
 * doivent pas paraître, et on ajoute la barre accent sous la photo.
 * ==================================================== */

/* Barre vert-lime collée sous la photo (accent du design original). */
.abtp-grid .abtp-card__photo {
	border-bottom: 6px solid var(--abtp-accent);
}

/* Carte : nom + titre (rôle) seulement. On cache bio + champs d'ordre. */
.abtp-card__bio,
.abtp-card__ordre_affichage,
.abtp-card__ordre2025 {
	display: none;
}

/* Nom foncé (le thème colore les titres en vert : ici c'est un <p>, pas un h3). */
.abtp-grid .abtp-card__name {
	color: var(--abtp-title);
	font-weight: 600;
	font-size: 1.05rem;
}

/* Rôle (champ titre) en gris. */
.abtp-grid .abtp-card__titre {
	color: var(--abtp-role);
	font-size: 0.95rem;
}

/* Modal : garde nom + titre + bio, cache les champs d'ordre. */
.abtp-modal__ordre_affichage,
.abtp-modal__ordre2025 {
	display: none;
}

/* Barre vert-lime au bas du popup (accent du design original). */
.abtp-modal {
	border-bottom: 6px solid var(--abtp-accent);
}

/* Hiérarchie texte du popup (matche le design original agence-dpc). */
.abtp-modal .abtp-modal__name {
	color: var(--abtp-title);
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 0.6rem;
}
.abtp-modal .abtp-modal__titre {
	color: var(--abtp-role);
	font-size: 1.05rem;
	margin: 0 0 1.4rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid var(--abtp-divider);
}
.abtp-modal .abtp-modal__bio {
	color: #666666;
	font-size: 1rem;
	line-height: 1.65;
	margin: 0;
}