/**
 * Bloc : Titre & Texte (ri-titre-texte)
 * Convention : Classe complète sur la section, classes courtes scopées.
 * Utilise les variables globales de root.css (--ri-*)
 */

/* ========================================
   Base
   ======================================== */

.ri-titre-texte {
	width: 100%;
	background-color: var(--ri-color-white);
	padding-block: var(--ri-block-padding-xl);
}

/* Suit directement un hero : padding haut réduit (48px → 40px responsive) */
.ri-hero-banner + .ri-titre-texte {
	padding-block-start: var(--ri-block-padding-sm);
}

.ri-titre-texte .container {
	display: flex;
	flex-direction: column;
}

/* ========================================
   Surtitre & Titre
   Utilise les classes globales .ri-surtitre et .ri-titre
   ======================================== */

.ri-titre-texte .surtitre {
	margin-bottom: var(--ri-space-sm);
}

.ri-titre-texte .titre {
	margin-bottom: 40px;
}

.ri-titre-texte.is-narrow .titre {
	max-width: var(--ri-container-narrow);
}

.ri-titre-texte .titre p,
.ri-titre-texte .titre h1,
.ri-titre-texte .titre h2,
.ri-titre-texte .titre h3 {
	font: 700 var(--ri-size-title-h1) / 1.2 var(--ri-font-1);
}

/* ========================================
   Texte
   ======================================== */

.ri-titre-texte .texte {
	margin: 0;
	font: 500 var(--ri-size-title-h2) / 1.4 var(--ri-font-1);
	color: var(--ri-color-grey);
}

/* ========================================
   Placeholder (éditeur)
   ======================================== */

.ri-titre-texte.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: var(--ri-space-lg);
	background-color: var(--ri-color-grey-light);
	border: 2px dashed var(--ri-color-teal);
	text-align: center;
}