/**
 * Base visuelle commune aux blocs Artefact.
 *
 * Composant autonome : toutes les valeurs passent par des variables déclarées
 * sur .artefact-block, qu'un thème peut surcharger sans que le plugin dépende
 * de lui. Volontairement limité au strict réutilisable — ni framework, ni
 * couche utilitaire.
 *
 * Encapsulation : chaque règle est portée par .artefact-block afin de primer
 * sur les styles globaux du thème sans recourir à !important. Hello Elementor
 * applique notamment « table td, table th { border: 1px solid …; padding: 15px }
 * » et un zébrage « table tbody > tr:nth-child(odd) > td » : deux classes
 * imbriquées suffisent à les neutraliser.
 *
 * Les sélecteurs n'utilisent que des classes (jamais th/td), afin que les
 * lignes puissent être reprises plus tard avec des <div> dans d'autres blocs.
 */

/* Le composant fixe son propre modèle de boîte. Le canevas de Gutenberg ne
   charge pas le reset du thème — Hello Elementor n'y injecte que
   editor-styles.css, dépourvu de box-sizing, et les feuilles d'éditeur du cœur
   n'en déclarent aucune de portée globale. Les éléments y retombent donc sur
   « content-box », où toute marge intérieure s'ajoute à width: 100% et fait
   déborder le bloc de la colonne d'édition. Sans effet sur le front, où
   reset.css applique déjà border-box à tout. */
.artefact-block,
.artefact-block *,
.artefact-block *::before,
.artefact-block *::after {
	box-sizing: border-box;
}

.artefact-block {
	/* Palette : identité principalement grise. Chaque jeton dérive du Design
	   System du site (jetons « --artefact-site-* » posés par le thème Artefact)
	   avec un repli égal à la valeur canonique. Le bloc suit donc la charte du
	   site quand le thème est actif, et reste correct sans lui (plugin seul).
	   Aucun couplage aux identifiants opaques générés par Elementor : la source
	   stable est la couche de jetons versionnée du thème. */
	--artefact-color-value: var(--artefact-site-text, #1f2328);
	--artefact-color-label: var(--artefact-site-muted, #50575e);
	/* Gris plus clair, nuance interne aux blocs : pas de jeton site dédié. */
	--artefact-color-muted: #6b7178;
	--artefact-color-accent: var(--artefact-site-blue, #0f84cc);
	/* Nuance foncée de l'accent, pour les états actifs. */
	--artefact-accent-strong: var(--artefact-site-blue-strong, #0b6ba6);
	/* Teinte très claire de l'accent : fonds de pastilles, badges et boîtes
	   d'information. */
	--artefact-accent-tint: var(--artefact-site-tint, #e8f3fb);
	--artefact-row-bg: var(--artefact-site-surface, #f6f7f8);
	--artefact-separator: var(--artefact-site-border, rgba(0, 0, 0, 0.06));
	--artefact-radius: var(--artefact-site-radius, 8px);
	--artefact-gap: 0.5rem;

	/* Police de marque : Manrope, fournie par le thème (auto-hébergée, chargée
	   front + éditeurs). Le repli mène lui-même par « Manrope » puis la pile
	   système : les blocs restent en Manrope même hors du jeton site (dès que le
	   @font-face est présent), et retombent proprement sur la pile système si la
	   police est absente. */
	--artefact-font: var(--artefact-site-font, "Manrope", -apple-system,
		BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
		"Noto Sans", sans-serif);

	/* Pleine largeur du conteneur éditorial : ni 100vw, ni débordement. */
	width: 100%;
	margin-block: 2rem;
	background: transparent;
	color: var(--artefact-color-value);
	font-family: var(--artefact-font);
	font-size: 1rem;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
 * Titre de bloc
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-block__title {
	position: relative;
	display: block;
	margin: 0 0 1.5rem;
	padding-block-end: 0.75rem;
	border-block-end: 1px solid var(--artefact-separator);
	color: var(--artefact-color-value);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Court trait d'accent, seul emploi de la couleur d'accent avec la puce. */
.artefact-block .artefact-block__title::after {
	content: "";
	position: absolute;
	inset-block-end: -1px;
	inset-inline-start: 0;
	inline-size: 2.5rem;
	block-size: 2px;
	background-color: var(--artefact-color-accent);
}

/* --------------------------------------------------------------------------
 * Section
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-section + .artefact-section {
	margin-block-start: 1.75rem;
}

.artefact-block .artefact-section__title {
	display: flex;
	align-items: center;
	gap: var(--artefact-gap);
	margin: 0 0 0.625rem;
	color: var(--artefact-color-muted);
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Puce décorative : invisible aux technologies d'assistance. */
.artefact-block .artefact-section__title::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background-color: var(--artefact-color-accent);
}

/* --------------------------------------------------------------------------
 * Lignes libellé / valeur
 *
 * Neutralise explicitement ce que le thème impose : border, border-collapse,
 * padding, font-size, line-height, margin, graisse et zébrage.
 * ----------------------------------------------------------------------- */

.artefact-block .artefact-rows {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	background-color: transparent;
	font-size: inherit;
	line-height: inherit;
}

/* Fond et rayons portés par les cellules, jamais par la ligne : rendu
   identique sur tous les navigateurs. */
.artefact-block .artefact-row__label,
.artefact-block .artefact-row__value {
	border: 0;
	border-block-end: 1px solid var(--artefact-separator);
	padding: 0.8125rem 1.125rem;
	background-color: var(--artefact-row-bg);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	text-align: start;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.artefact-block .artefact-row__label {
	width: 42%;
	color: var(--artefact-color-label);
	font-weight: 400;
}

.artefact-block .artefact-row__value {
	color: var(--artefact-color-value);
	font-weight: 500;
}

.artefact-block .artefact-row:last-child .artefact-row__label,
.artefact-block .artefact-row:last-child .artefact-row__value {
	border-block-end: 0;
}

.artefact-block .artefact-row:first-child .artefact-row__label {
	border-start-start-radius: var(--artefact-radius);
}

.artefact-block .artefact-row:first-child .artefact-row__value {
	border-start-end-radius: var(--artefact-radius);
}

.artefact-block .artefact-row:last-child .artefact-row__label {
	border-end-start-radius: var(--artefact-radius);
}

.artefact-block .artefact-row:last-child .artefact-row__value {
	border-end-end-radius: var(--artefact-radius);
}

/* --------------------------------------------------------------------------
 * Responsive : libellé au-dessus de la valeur
 * ----------------------------------------------------------------------- */

@media (max-width: 600px) {
	.artefact-block .artefact-row__label,
	.artefact-block .artefact-row__value {
		display: block;
		width: auto;
	}

	.artefact-block .artefact-row__label {
		padding-block-end: 0;
		border-block-end: 0;
		font-size: 0.8125rem;
	}

	.artefact-block .artefact-row__value {
		padding-block-start: 0.25rem;
	}

	/* Les rayons suivent l'empilement. */
	.artefact-block .artefact-row:first-child .artefact-row__label {
		border-start-end-radius: var(--artefact-radius);
	}

	.artefact-block .artefact-row:first-child .artefact-row__value,
	.artefact-block .artefact-row:last-child .artefact-row__label {
		border-radius: 0;
	}

	.artefact-block .artefact-row:last-child .artefact-row__value {
		border-end-start-radius: var(--artefact-radius);
		border-end-end-radius: var(--artefact-radius);
	}
}