/* DP – Areas of expertise bar */

.dp-ab {
	--dp-ab-intro-w: 1.25fr;
	--dp-ab-min-h: 180px;
	--dp-ab-dot: 5px;          /* diamètre d'un point */
	--dp-ab-dot-gap: 6px;      /* espace entre les points */
	--dp-ab-dot-offset: 14px;  /* distance depuis le bord de la cellule */
	--dp-ab-dot-color: rgba(10, 79, 90, 0.45);
	--dp-ab-intro-dot: rgba(255, 255, 255, 0.45);

	display: grid;
	grid-template-columns: var(--dp-ab-intro-w) repeat(auto-fit, minmax(0, 1fr));
	grid-auto-flow: column;
	background: var(--dp-color-surface, #ffffff);
	font-family: var(--dp-font-base, inherit);
	font-weight: var(--dp-font-base-weight, 400);
	border-radius: var(--dp-ab-radius, var(--dp-radius-lg, 0));
	overflow: hidden;
}

/* Quand pas d'intro panel : on retombe sur des colonnes fluides */
.dp-ab:not(:has(.dp-ab__intro)) {
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.dp-ab__cell {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--dp-ab-min-h);
	text-decoration: none;
	overflow: hidden;
	transition: background-color .25s ease, transform .25s ease;
}

a.dp-ab__cell:hover {
	transform: translateY(-2px);
}

/* ----- Intro panel ----- */
.dp-ab__intro {
	color: #ffffff;
	background: var(--dp-gradient-primary, linear-gradient(134.2152deg, #1a86a2 0%, #6eb2d1 100%));
}
.dp-ab__intro-title {
	margin: 0;
	font-size: 22px;
	font-weight: var(--dp-font-heading-weight, 700);
	line-height: 1.25;
	color: #ffffff;
	letter-spacing: -0.01em;
	font-family: var(--dp-font-heading, inherit);
}
a.dp-ab__intro:hover .dp-ab__intro-title {
	opacity: .9;
}

/* ----- Cards -----
 * On pose explicitement la couleur sur .dp-ab__card pour que les <h3>/<h4>
 * (qui héritent via `color: inherit` du thème global) reprennent bien la
 * charte au lieu de remonter jusqu'à l'éventuelle couleur du conteneur
 * Elementor. .dp-ab__intro garde son blanc défini plus haut. */
.dp-ab__card {
	color: var(--dp-ab-card-text, var(--dp-color-text, #3c3c3b));
}
.dp-ab__card-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: var(--dp-font-heading-weight, 700);
	line-height: 1.3;
	letter-spacing: -0.01em;
	font-family: var(--dp-font-heading, inherit);
	color: var(--dp-ab-card-title, var(--dp-color-text, #3c3c3b));
}
.dp-ab__card-desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	max-width: 90%;
	color: var(--dp-ab-card-desc, var(--dp-color-text-muted, #6b7280));
}

/* ----- Dot pattern (SVG triangulaire) -----
 * Le SVG est dessiné avec l'angle droit en bas-gauche (le triangle « pointe » vers le haut-droit).
 * Pour les autres positions on miroite le SVG via transform et on l'ancre au coin choisi.
 *
 * Taille du SVG : (rows * dot) + (rows-1)*gap. On utilise --dp-ab-rows fourni par le PHP via la
 * classe modifier ; à défaut on retombe sur 3 rows (6 dots) pour le rendu serveur initial.
 */
.dp-ab__dots {
	--dp-ab-rows: 3;
	position: absolute;
	width: calc(var(--dp-ab-rows) * var(--dp-ab-dot) + (var(--dp-ab-rows) - 1) * var(--dp-ab-dot-gap));
	height: calc(var(--dp-ab-rows) * var(--dp-ab-dot) + (var(--dp-ab-rows) - 1) * var(--dp-ab-dot-gap));
	color: var(--dp-ab-dot-color);
	pointer-events: none;
	overflow: visible;
	display: block;
}

/* Le PHP injecte --dp-ab-rows via style="" sur le SVG (2, 3 ou 4 selon le count). */

/* ---- Positions ----
 * Le triangle source a son angle droit en bas-gauche.
 * - bottom-left  : identité
 * - bottom-right : miroir horizontal
 * - top-left     : miroir vertical
 * - top-right    : miroir des deux axes
 */
.dp-ab__dots--bottom-left  { left: var(--dp-ab-dot-offset);  bottom: var(--dp-ab-dot-offset); }
.dp-ab__dots--bottom-right { right: var(--dp-ab-dot-offset); bottom: var(--dp-ab-dot-offset); transform: scaleX(-1); }
.dp-ab__dots--top-left     { left: var(--dp-ab-dot-offset);  top: var(--dp-ab-dot-offset);    transform: scaleY(-1); }
.dp-ab__dots--top-right    { right: var(--dp-ab-dot-offset); top: var(--dp-ab-dot-offset);    transform: scale(-1, -1); }

.dp-ab__dots--intro {
	color: var(--dp-ab-intro-dot);
}

.dp-ab--no-dots .dp-ab__dots {
	display: none;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
	.dp-ab {
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: row;
	}
	.dp-ab__intro {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.dp-ab {
		grid-template-columns: 1fr;
	}
	.dp-ab__intro {
		grid-column: auto;
	}
	.dp-ab__card + .dp-ab__card,
	.dp-ab__intro + .dp-ab__card {
		border-left: 0 !important;
		border-top: 1px solid rgba(10, 79, 90, 0.08);
	}
}