/*
 * Texte SEO (inc/functions-seo-text.php) : modèle Elementor « TM – Texte SEO page Acheter »,
 * conteneur section.tm-seo-text, widget Titre (H2, .tm-seo-text__title) et un widget Éditeur de
 * texte par section (.tm-seo-text__section, H3, paragraphes, listes, tableau). Chargé partout où le
 * modèle s'affiche (inc/functions-elementor-blocks.php). Aucun style réglé dans les widgets.
 *
 * Largeur de lecture de 800 px (sans jeton correspondant). Titres : H2 --text-xl, H3 --text-lg
 * (mobile : --text-lg et --text-md). Texte --text-base, interligne --lh-relaxed, --fg-2.
 * Tableau dans .tm-seo-text__scroll : défilement horizontal quand il est plus large que l'écran.
 *
 * Les conteneurs, titres et éditeurs de texte d'Elementor ont leurs propres styles par défaut (kit) :
 * les sélecteurs « section.tm-seo-text … » sont plus spécifiques, quel que soit l'ordre des feuilles.
 */

/* Enveloppe posée par inc/functions-seo-text.php sur la page Acheter (élément du conteneur flex
   d'Elementor) : min-width 0 pour que le tableau défile au lieu d'élargir la page. */
.tm-seo-text-slot,
.tm-seo-text-slot > .elementor {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

section.tm-seo-text {
	box-sizing: border-box;
	display: block;
	width: 100%;
	/* min-width 0 : dans le conteneur flex d'Elementor, le tableau ne doit pas élargir la section
	   au-delà de l'écran (il défile dans .tm-seo-text__scroll). */
	min-width: 0;
	max-width: 800px;
	margin: var(--space-12) 0 var(--space-8);
	padding: 0;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--lh-relaxed);
	color: var(--fg-2);
	text-align: left;
}

/* Elementor limite la largeur des conteneurs de premier niveau d'un document. */
[data-elementor-id] > section.tm-seo-text.e-con {
	max-width: min(100%, 800px);
}

section.tm-seo-text > .elementor-element {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

section.tm-seo-text .tm-seo-text__section,
section.tm-seo-text .tm-seo-text__section p,
section.tm-seo-text .tm-seo-text__section li {
	font-family: var(--font-sans);
	font-size: var(--text-base);
	font-weight: var(--fw-regular);
	line-height: var(--lh-relaxed);
	color: var(--fg-2);
}

section.tm-seo-text .tm-seo-text__title .elementor-heading-title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--text-xl);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
	color: var(--fg-1);
}

section.tm-seo-text .tm-seo-text__section h3 {
	margin: var(--space-8) 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	letter-spacing: var(--ls-snug);
	color: var(--fg-1);
}

section.tm-seo-text .tm-seo-text__section p {
	margin: 0 0 var(--space-4);
}

section.tm-seo-text .tm-seo-text__section ul,
section.tm-seo-text .tm-seo-text__section ol {
	margin: 0 0 var(--space-4);
	padding: 0 0 0 var(--space-6);
}

section.tm-seo-text .tm-seo-text__section ul {
	list-style: disc;
}

section.tm-seo-text .tm-seo-text__section ol {
	list-style: decimal;
}

section.tm-seo-text .tm-seo-text__section li {
	margin: 0 0 var(--space-2);
	padding: 0;
}

section.tm-seo-text .tm-seo-text__section > :last-child,
section.tm-seo-text .tm-seo-text__section .elementor-widget-container > :last-child {
	margin-bottom: 0;
}

section.tm-seo-text .tm-seo-text__section strong {
	font-weight: var(--fw-semibold);
	color: var(--fg-1);
}

section.tm-seo-text .tm-seo-text__section a {
	color: var(--fg-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

section.tm-seo-text .tm-seo-text__section a:hover {
	color: var(--tm-blue-700);
}

section.tm-seo-text .tm-seo-text__section a:focus-visible,
section.tm-seo-text .tm-seo-text__scroll:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
	border-radius: var(--radius-xs);
}

/* Tableau comparatif */
section.tm-seo-text .tm-seo-text__scroll {
	max-width: 100%;
	overflow-x: auto;
	margin: 0 0 var(--space-4);
	background: var(--bg-surface);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
}

section.tm-seo-text .tm-seo-text__scroll table {
	width: 100%;
	min-width: 560px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
}

section.tm-seo-text .tm-seo-text__scroll th,
section.tm-seo-text .tm-seo-text__scroll td {
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	line-height: var(--lh-normal);
	color: var(--fg-2);
	text-align: left;
	vertical-align: top;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--border-subtle);
}

section.tm-seo-text .tm-seo-text__scroll thead th,
section.tm-seo-text .tm-seo-text__scroll thead td {
	font-weight: var(--fw-semibold);
	color: var(--fg-1);
	background: var(--bg-sunken);
	border-bottom-color: var(--border-default);
}

section.tm-seo-text .tm-seo-text__scroll tbody th {
	font-weight: var(--fw-semibold);
	color: var(--fg-1);
	white-space: nowrap;
}

section.tm-seo-text .tm-seo-text__scroll tbody tr:last-child > * {
	border-bottom: 0;
}

/* ---------- Repli (js/tm-seo-text.js) ----------
 * Replié : la section est rognée sous la ligne du point de repli (hauteur mesurée par le script,
 * --tm-seo-collapsed-height) ; la suite du paragraphe (.tm-seo-text__rest) passe à la ligne pour
 * qu'aucun début de phrase suivante ne reste visible. Le texte reste dans le HTML et dans l'arbre
 * d'accessibilité (ni display:none ni hidden sur le texte ; seuls les boutons sont masqués selon
 * l'état). Déplié : paragraphe continu, bouton « Réduire » à la fin.
 */

section.tm-seo-text.tm-seo-text--collapsed {
	max-height: var(--tm-seo-collapsed-height, none);
	overflow: hidden;
	overflow: clip;
}

section.tm-seo-text.tm-seo-text--collapsed .tm-seo-text__rest {
	display: block;
}

section.tm-seo-text .tm-seo-text__rest:focus {
	outline: none;
}

section.tm-seo-text .tm-seo-text__toggle {
	display: inline;
	margin: 0;
	padding: 0 var(--space-1);
	font-family: var(--font-sans);
	font-size: inherit;
	font-weight: var(--fw-semibold);
	line-height: inherit;
	color: var(--fg-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	background: none;
	border: 0;
	border-radius: var(--radius-xs);
}

section.tm-seo-text .tm-seo-text__toggle:hover {
	color: var(--tm-blue-700);
}

section.tm-seo-text .tm-seo-text__toggle:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

section.tm-seo-text .tm-seo-text__less {
	margin: var(--space-6) 0 0;
}

section.tm-seo-text .tm-seo-text__less .tm-seo-text__toggle {
	padding: 0;
}

section.tm-seo-text:not(.tm-seo-text--collapsed) .tm-seo-text__toggle--more,
section.tm-seo-text.tm-seo-text--collapsed .tm-seo-text__less {
	display: none;
}

@media print {
	section.tm-seo-text.tm-seo-text--collapsed {
		max-height: none;
		overflow: visible;
	}

	section.tm-seo-text.tm-seo-text--collapsed .tm-seo-text__rest {
		display: inline;
	}

	section.tm-seo-text .tm-seo-text__toggle,
	section.tm-seo-text .tm-seo-text__less {
		display: none;
	}
}

@media (max-width: 767px) {
	section.tm-seo-text {
		margin: var(--space-10) 0 var(--space-6);
	}

	section.tm-seo-text .tm-seo-text__title .elementor-heading-title {
		font-size: var(--text-lg);
	}

	section.tm-seo-text .tm-seo-text__section h3 {
		margin-top: var(--space-6);
		font-size: var(--text-md);
	}
}