/*
 * Carte de réassurance (inc/functions-reassurance.php) : modèle Elementor « Carte de réassurance du
 * catalogue », classes tm- saisies dans les conteneurs et widgets du modèle.
 * Chargé partout où la carte s'affiche, indépendamment de css/tm-catalog.css (placement dans la grille).
 *
 * Maquette Claude Design (captures de la maquette mise à jour, sans export : valeurs estimées à
 * l'échelle 1,8 des captures, ramenées aux jetons). Ordinateur — padding ≈ 23 × 26 → --space-6,
 * rayon ≈ 19 → --radius-xl, 4 colonnes et écart ≈ 26 → --space-6, icône contour ≈ 21 → --space-5,
 * écart icône-titre 12 → --space-3, titre ≈ 14,2 → --text-sm en demi-gras (--fw-semibold),
 * interligne ≈ 18,3 → --lh-snug, écart titre-texte ≈ 4 → --space-1, texte ≈ 12,5 → --text-xs,
 * interligne 18 → --lh-normal, blanc ≈ 90 % ; mobile — une ligne par avantage en graisse normale
 * (--fw-regular), texte ≈ 13 → --text-sm, icône ≈ 18 → --space-5, écart icône-texte ≈ 13 et entre
 * lignes ≈ 12 → --space-3, padding 16 → --space-4, rayon ≈ 13,5 → --radius-lg. Largeur maximale
 * de 1080 px reprise de la maquette. Lissage « antialiased » : texte clair sur fond foncé, sans
 * l'épaississement du lissage sous-pixel de macOS (rendu des outils de maquette).
 * L'icône est centrée sur la première ligne du titre (hauteur de ligne du titre moins taille de
 * l'icône, divisé par deux), quel que soit le nombre de lignes.
 *
 * Les conteneurs Elementor (.e-con) ont leurs propres marges, espacements, largeurs et sens de flex
 * par défaut (.e-con-full.e-flex, etc.) : les sélecteurs « aside.tm-reassurance … » sont plus
 * spécifiques et les remplacent quel que soit l'ordre de chargement des feuilles. Aucun style n'est réglé dans
 * les widgets du modèle. Le texte de chaque avantage est masqué sur mobile par la visibilité
 * responsive d'Elementor (Avancé > Responsive du widget).
 * Icônes : police Material Design Iconic (widget Icône, balise <i>), chargée partout par Besa.
 */

aside.tm-reassurance {
	box-sizing: border-box;
	width: 100%;
	max-width: 1080px;
	margin: var(--space-2) auto;
	padding: var(--space-6);
	font-family: var(--font-sans);
	color: var(--fg-inverse);
	text-align: left;
	background: var(--tm-blue-500);
	border: 1px solid var(--tm-blue-500);
	border-radius: var(--radius-xl);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Conteneur de requêtes : le nombre de colonnes dépend de la largeur de la carte (voir plus bas). */
	container-type: inline-size;
	container-name: tm-reassurance;
}

/* Elementor limite la largeur des conteneurs de premier niveau d'un document
   (:is(…, [data-elementor-id]) > .e-con { max-width: min(100%, var(--width)) }). */
[data-elementor-id] > aside.tm-reassurance.e-con {
	max-width: min(100%, 1080px);
}

/* 2 × 2 par défaut (carte étroite, et repli des navigateurs sans requêtes de conteneur) ;
   4 colonnes quand la carte est assez large (@container plus bas). */
aside.tm-reassurance .tm-reassurance__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-5) var(--space-6);
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

aside.tm-reassurance .tm-reassurance__item {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--space-3);
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

aside.tm-reassurance .tm-reassurance__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-1);
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

/* Icône (widget Icône d'Elementor, police ou SVG, 1em), centrée sur la 1re ligne du titre. */
aside.tm-reassurance .tm-reassurance__icon {
	flex: 0 0 auto;
	width: var(--space-5);
	height: var(--space-5);
	margin: calc((var(--text-sm) * var(--lh-snug) - var(--space-5)) / 2) 0 0;
	color: var(--fg-inverse);
}

aside.tm-reassurance .tm-reassurance__icon .elementor-icon-wrapper,
aside.tm-reassurance .tm-reassurance__icon .elementor-icon {
	display: flex;
	font-size: var(--space-5);
	line-height: 1;
	color: var(--fg-inverse);
	fill: var(--fg-inverse);
}

aside.tm-reassurance .tm-reassurance__icon .elementor-icon i {
	width: 1em;
	font-size: inherit;
	line-height: 1;
	text-align: center;
	color: inherit;
}

aside.tm-reassurance .tm-reassurance__icon .elementor-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

aside.tm-reassurance .tm-reassurance__title,
aside.tm-reassurance .tm-reassurance__title .elementor-heading-title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	color: var(--fg-inverse);
}

aside.tm-reassurance .tm-reassurance__text,
aside.tm-reassurance .tm-reassurance__text .elementor-heading-title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--fw-regular);
	line-height: var(--lh-normal);
	color: color-mix(in srgb, var(--fg-inverse) 90%, transparent);
}

/* 4 colonnes à partir d'une carte de 1020 px (largeur intérieure 970 px : 1020 moins 2 × 24 de
   padding et 2 × 1 de bordure) : mesuré avec les textes actuels, aucun titre ni texte n'y dépasse
   2 lignes ; en deçà, 2 × 2, titres et textes sur une ligne chacun dès 860 px de carte.
   Dépend de la carte et non de l'écran : elle s'adapte à la colonne de filtres, à sa disparition
   et à toute page où le modèle est inséré. */
@container tm-reassurance (min-width: 970px) {
	aside.tm-reassurance .tm-reassurance__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		row-gap: var(--space-6);
	}
}

@media (max-width: 767px) {
	aside.tm-reassurance {
		margin: 0 auto;
		padding: var(--space-4);
		border-radius: var(--radius-lg);
	}

	aside.tm-reassurance .tm-reassurance__list {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	aside.tm-reassurance .tm-reassurance__title,
	aside.tm-reassurance .tm-reassurance__title .elementor-heading-title {
		font-weight: var(--fw-regular);
	}
}