/**
 * CEG Piliers de service — styles du widget.
 * Aucun fond n'est appliqué : la section Elementor s'en charge.
 */

.ceg-cap {
	--cap-cols: 3;
	--cap-gap: 56px;
	--cap-ratio: 1 / 1;
	--cap-marker: #c4a265;
	--cap-indent: 18px;

	display: grid;
	grid-template-columns: repeat(var(--cap-cols), minmax(0, 1fr));
	column-gap: var(--cap-gap);
	row-gap: var(--cap-gap);
	width: 100%;
	background: none;
}

.ceg-cap *,
.ceg-cap *::before,
.ceg-cap *::after {
	box-sizing: border-box;
}

.ceg-cap__col {
	min-width: 0;
}

/* --- Visuel --------------------------------------------------------------- */

.ceg-cap__media {
	display: block;
	margin: 0 0 26px;
	overflow: hidden;
	line-height: 0;
}

.ceg-cap__media img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: var(--cap-ratio);
	object-fit: cover;
	object-position: center;
	transition: transform 0.6s ease;
}

.ceg-cap--zoom .ceg-cap__col:hover .ceg-cap__media img {
	transform: scale(1.04);
}

/* --- Titre et accroche ---------------------------------------------------- */

.ceg-cap h3.ceg-cap__title {
	margin: 0 0 6px;
	padding: 0;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 25px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	color: #1c2b4a;
	text-align: center;
	text-transform: none;
}

.ceg-cap h3.ceg-cap__title a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.25s ease;
}

.ceg-cap h3.ceg-cap__title a:hover {
	opacity: 0.7;
	text-decoration: none;
}

.ceg-cap p.ceg-cap__tagline {
	margin: 0 0 28px;
	padding: 0;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.4;
	color: #c4a265;
	text-align: center;
}

/* --- Paragraphe ----------------------------------------------------------- */

.ceg-cap p.ceg-cap__text {
	margin: 0 0 32px;
	padding: 0;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.75;
	color: #2d2d2d;
	text-align: left;
}

/* --- Liste ---------------------------------------------------------------- */

.ceg-cap ul.ceg-cap__list {
	margin: 0;
	padding: 0 0 0 var(--cap-indent);
	list-style: none;
	color: #2d2d2d;
}

.ceg-cap ul.ceg-cap__list > li {
	position: relative;
	margin: 0;
	padding-left: 20px;
	font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.6;
	list-style: none;
}

.ceg-cap ul.ceg-cap__list > li + li {
	margin-top: 9px;
}

.ceg-cap ul.ceg-cap__list > li::marker {
	content: none;
}

.ceg-cap ul.ceg-cap__list > li::before {
	position: absolute;
	top: 0.62em;
	left: 0;
	color: var(--cap-marker);
}

.ceg-cap--marker-dot ul.ceg-cap__list > li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

.ceg-cap--marker-circle ul.ceg-cap__list > li::before {
	content: "";
	width: 6px;
	height: 6px;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: none;
}

.ceg-cap--marker-dash ul.ceg-cap__list > li::before {
	content: "";
	width: 10px;
	height: 1px;
	background: currentColor;
	top: 0.78em;
}

.ceg-cap--marker-none ul.ceg-cap__list > li {
	padding-left: 0;
}

.ceg-cap--marker-none ul.ceg-cap__list > li::before {
	content: none;
}

/* --- Alignement du contenu de la liste ------------------------------------ */

.ceg-cap--list-left ul.ceg-cap__list    { text-align: left; }
.ceg-cap--list-justify ul.ceg-cap__list { text-align: justify; }
.ceg-cap--list-center ul.ceg-cap__list  { text-align: center; }
.ceg-cap--list-right ul.ceg-cap__list   { text-align: right; }

/* Centré ou aligné à droite, une puce posée dans la marge se retrouve
   orpheline : on la remet dans le flux, collée au texte. */
.ceg-cap--list-center ul.ceg-cap__list,
.ceg-cap--list-right ul.ceg-cap__list {
	padding-left: 0;
}

.ceg-cap--list-center ul.ceg-cap__list > li,
.ceg-cap--list-right ul.ceg-cap__list > li {
	padding-left: 0;
}

.ceg-cap--list-center ul.ceg-cap__list > li::before,
.ceg-cap--list-right ul.ceg-cap__list > li::before {
	position: static;
	display: inline-block;
	margin-right: 9px;
	vertical-align: middle;
}

/* --- Alignement des listes entre colonnes --------------------------------- */
/* Chaque colonne emprunte les lignes de la grille parente : le visuel, le
   titre, l'accroche, le paragraphe et la liste démarrent tous à la même
   hauteur, quelles que soient les longueurs de texte. */

@supports (grid-template-rows: subgrid) {

	.ceg-cap--aligned {
		grid-template-rows: auto auto auto auto auto;
		/* L'espacement entre colonnes ne doit pas se glisser entre les lignes
		   internes : ce sont les marges de chaque bloc qui règlent le vertical. */
		row-gap: 0;
	}

	.ceg-cap--aligned .ceg-cap__col {
		display: grid;
		grid-row: span 5;
		grid-template-rows: subgrid;
	}

	.ceg-cap--aligned .ceg-cap__media   { grid-row: 1; }
	.ceg-cap--aligned .ceg-cap__title   { grid-row: 2; }
	.ceg-cap--aligned .ceg-cap__tagline { grid-row: 3; }
	.ceg-cap--aligned .ceg-cap__text    { grid-row: 4; }
	.ceg-cap--aligned .ceg-cap__list    { grid-row: 5; }
}

/* --- Adaptatif ------------------------------------------------------------ */

/* Une seule colonne : plus rien à aligner, on rend l'espacement vertical
   entre les blocs empilés. */
@media (max-width: 767px) {
	.ceg-cap--aligned {
		grid-template-rows: none;
		row-gap: var(--cap-gap);
	}

	.ceg-cap--aligned .ceg-cap__col {
		display: block;
		grid-row: auto;
	}

	.ceg-cap--aligned .ceg-cap__media,
	.ceg-cap--aligned .ceg-cap__title,
	.ceg-cap--aligned .ceg-cap__tagline,
	.ceg-cap--aligned .ceg-cap__text,
	.ceg-cap--aligned .ceg-cap__list {
		grid-row: auto;
	}
}

@media (max-width: 1024px) {
	.ceg-cap {
		grid-template-columns: repeat(var(--cap-cols, 2), minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.ceg-cap p.ceg-cap__text {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ceg-cap__media img,
	.ceg-cap h3.ceg-cap__title a {
		transition: none;
	}
}
