/* widget-section-title.css — DP Titre + Texte */

.dp-st {
	/* Variables locales (override Elementor) → fallback charte */
	/* Un titre de section est du texte de contenu, pas un accent : il reste
	   en encre. Posé dans la couleur de marque, il deviendrait illisible dès
	   que celle-ci est un pastel. */
	--dp-st-title: var(--dp-color-text, #303030);
	--dp-st-divider: var(--dp-color-primary, #61c2d0);
	--dp-st-text: var(--dp-color-text-muted, #5b5b5b);

	--dp-st-gap: 20px;
	--dp-st-divider-thickness: 3px;
	--dp-st-divider-width: 100%;

	font-family: var(--dp-font-base, inherit);
}

.dp-st__title {
	margin: 0;
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: var(--dp-font-heading-weight, 700);
	line-height: 1.2;
	color: var(--dp-st-title);
	font-family: var(--dp-font-heading, inherit);
}

/* Filet sous le titre */
.dp-st--divider .dp-st__title {
	padding-bottom: 12px;
	border-bottom: var(--dp-st-divider-thickness) solid var(--dp-st-divider);
	width: var(--dp-st-divider-width);
	max-width: 100%;
}

.dp-st__text {
	margin-top: var(--dp-st-gap);
	font-size: 16px;
	line-height: 1.7;
	color: var(--dp-st-text);
}

.dp-st__text p {
	margin: 0 0 1em;
}

.dp-st__text p:last-child {
	margin-bottom: 0;
}

/* ── Design « dôme » ──
   Le titre de section de la maquette : l'arc du Ô en tête, le titre à gauche et
   le chapô à droite, alignés par le bas — pas centrés, pour que le regard
   attrape le titre avant le chapô. */

.dp-st--dome {
	--dp-st-eyebrow: var(--dp-color-primary-strong, #417e88);
}

.dp-st__head {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 4vw, 60px);
	align-items: end;
}

.dp-st--dome:has(.dp-st__intro) .dp-st__head {
	grid-template-columns: 1fr 1.05fr;
}

.dp-st__mark {
	display: block;
	width: 56px;
	height: 56px;
	margin: 0 0 16px;
	background: var(--dp-asset-dome-mark) left center / contain no-repeat;
}

.dp-st__eyebrow {
	margin: 0 0 12px;
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var(--dp-tracking-caps, 0.12em);
	text-transform: uppercase;
	color: var(--dp-st-eyebrow);
}

.dp-st--dome .dp-st__title {
	font-size: var(--dp-text-h2, clamp(28px, 3.4vw, 46px));
	line-height: 1.06;
	letter-spacing: -0.01em;
	max-width: 24ch;
	padding-bottom: 0;
	border-bottom: 0;
	width: auto;
}

.dp-st__intro {
	margin: 0;
	font-size: 18px;
	line-height: 1.68;
	max-width: 52ch;
	color: var(--dp-st-text);
}

.dp-st__intro p { margin: 0 0 1em; }
.dp-st__intro p:last-child { margin-bottom: 0; }

/* Centré : l'arc et le chapô repassent dans l'axe, et le chapô sous le titre. */
.dp-st--dome.dp-st--center .dp-st__head,
.dp-st--dome.dp-st--center:has(.dp-st__intro) .dp-st__head {
	grid-template-columns: 1fr;
	justify-items: center;
	text-align: center;
	gap: 14px;
}

/* Chapô sous le titre plutôt qu'à côté, y compris sur bureau (le réglage
   « Position du chapô »). L'alignement gauche/droite du titre est conservé —
   seule la colonne du chapô disparaît. */
.dp-st--dome.dp-st--text-below .dp-st__head,
.dp-st--dome.dp-st--text-below:has(.dp-st__intro) .dp-st__head {
	grid-template-columns: 1fr;
	align-items: start;
	gap: 22px;
}

.dp-st--center .dp-st__mark { margin: 0 auto 16px; background-position: center; }
.dp-st--center .dp-st__title { margin-inline: auto; }
.dp-st--center .dp-st__intro { margin-inline: auto; }

/* Texte clair : réservé à une photo voilée ou à un panneau en teinte profonde,
   jamais à un pastel. Le sur-titre passe en blanc translucide plutôt qu'en
   couleur de marque, qui ne se lirait plus. */
.dp-st--invert {
	--dp-st-title: var(--dp-color-text-invert, #ffffff);
	--dp-st-text: rgba(255, 255, 255, 0.8);
	--dp-st-eyebrow: rgba(255, 255, 255, 0.72);
}

.dp-st--invert .dp-st__mark {
	filter: brightness(0) invert(1);
}

@media (max-width: 860px) {
	.dp-st--dome:has(.dp-st__intro) .dp-st__head {
		grid-template-columns: 1fr;
		gap: 22px;
		align-items: start;
	}
}

/* =====================================================================
 * Design « grand titre »
 * =====================================================================
 * « Prévoir design grand titre. »
 *
 * L'ouvreur de page du site groupe : l'arc, un sur-titre, un titre qui prend la
 * largeur, et le chapô dessous. Centré par construction — à cette échelle, deux
 * colonnes font deux blocs qui se disputent la première lecture.
 *
 * La taille est en `clamp()` et non fixe : entre un portable et un écran de
 * bureau, le même titre passe de deux lignes à six si la taille ne suit pas la
 * largeur. La typographie réglée dans Elementor prime dessus — c'est le sens de
 * la variable locale.
 * ===================================================================== */
.dp-st--display {
	--dp-st-display-size: clamp(34px, 5vw, 76px);
	--dp-st-display-measure: 22ch;
	--dp-st-intro-measure: 62ch;
}

.dp-st__display {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dp-st-gap, 20px);
	text-align: center;
}

.dp-st--left .dp-st__display {
	align-items: flex-start;
	text-align: left;
}

.dp-st__title--display {
	font-family: var(--dp-font-heading, inherit);
	font-size: var(--dp-st-display-size);
	line-height: 0.98;
	letter-spacing: -0.022em;
	/* La mesure est en `ch` : elle suit le corps, donc le titre garde le même
	   nombre de mots par ligne à toutes les tailles. En pixels, il passerait de
	   trois lignes à une entre le téléphone et le grand écran. */
	max-width: var(--dp-st-display-measure);
	margin: 0;
	color: var(--dp-st-title, var(--dp-color-text, #303030));
}

.dp-st__display .dp-st__intro {
	max-width: var(--dp-st-intro-measure);
	color: var(--dp-st-text, var(--dp-color-text-muted, #5b5b5b));
}

/* Sur une surface sombre — photo voilée ou panneau profond — le grand titre
   passe en blanc comme le reste du bloc. */
.dp-st--invert .dp-st__title--display,
.dp-st--invert .dp-st__display .dp-st__intro {
	color: #ffffff;
}

/* =====================================================================
 * Les boutons de redirection
 * =====================================================================
 * « Bouton redirection pages stylisés. »
 *
 * Ils vivent dans le bloc de titre plutôt que dans un second bloc posé
 * dessous : l'écart entre le titre et son bouton devenait sinon un réglage à
 * refaire sur chaque page, donc différent sur chaque page.
 *
 * Le secondaire garde toujours le contour, quel que soit le style choisi :
 * deux boutons pleins côte à côte ne disent plus lequel est l'action
 * principale.
 * ===================================================================== */
.dp-st__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: var(--dp-st-buttons-gap, 26px);
}

.dp-st--center .dp-st__buttons,
.dp-st__display + .dp-st__buttons {
	justify-content: center;
}
.dp-st--left .dp-st__buttons {
	justify-content: flex-start;
}

.dp-st__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 28px;
	border: 1px solid transparent;
	border-radius: var(--dp-st-button-radius, var(--dp-radius-pill, 999px));
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.2;
	text-decoration: none;
	transition: var(--dp-transition-base, all 0.2s ease);
}

.dp-st__button--pill {
	background: var(--dp-btn-bg, var(--dp-st-button-bg, var(--dp-color-primary-fill, #61c2d0)));
	/* `on-primary` et non `surface` : la charte a calculé ce qui se lit sur cet
	   aplat, et un pastel ne porte pas de texte blanc. */
	color: var(--dp-btn-text, var(--dp-st-button-text, var(--dp-color-on-primary, #303030)));
	border-color: var(--dp-btn-bg, transparent);
}
.dp-st__button--pill:hover,
.dp-st__button--pill:focus-visible {
	background: var(--dp-btn-bg-hover, var(--dp-st-button-bg-hover, var(--dp-color-primary-dark, #52a5b1)));
	color: var(--dp-btn-text-hover, var(--dp-st-button-text-hover, var(--dp-color-on-primary-dark, #303030)));
}

.dp-st__button--ghost {
	background: var(--dp-btn-bg, transparent);
	/* Écrit sur du blanc : la version soutenue, jamais la couleur brute — un
	   pastel y plafonne à 1,8:1. */
	color: var(--dp-btn-text, var(--dp-st-button-ghost-text, var(--dp-color-primary-strong, #417e88)));
	border-color: var(--dp-btn-bg, var(--dp-st-button-ghost-border, var(--dp-color-primary-strong, #417e88)));
}
.dp-st__button--ghost:hover,
.dp-st__button--ghost:focus-visible {
	background: var(--dp-btn-bg-hover, var(--dp-st-button-ghost-bg-hover, var(--dp-color-primary-soft, #eef8fa)));
	color: var(--dp-btn-text-hover, var(--dp-btn-text, var(--dp-st-button-ghost-text, var(--dp-color-primary-strong, #417e88))));
}

/*
 * Le style « équerre » : l'angle de la charte se dessine autour du bouton au
 * survol, en haut à gauche et en bas à droite. C'est le motif d'équerre des
 * pages du site groupe, employé ici comme réaction plutôt que comme décor.
 *
 * Deux ombres portées et non deux pseudo-éléments : le bouton en emploie déjà
 * un de chaque côté pour les couleurs de marque de la charte, et un troisième
 * n'existe pas.
 */
.dp-st__button--corner {
	position: relative;
	background: var(--dp-btn-bg, transparent);
	color: var(--dp-btn-text, var(--dp-st-button-ghost-text, var(--dp-color-primary-strong, #417e88)));
	border-color: var(--dp-btn-bg, transparent);
	border-radius: var(--dp-st-button-radius, var(--dp-radius-sm, 10px));
	box-shadow:
		inset 0 0 0 0 var(--dp-st-button-corner, var(--dp-color-primary, #61c2d0)),
		0 0 0 0 var(--dp-st-button-corner, var(--dp-color-primary, #61c2d0));
	outline: 1px solid var(--dp-st-button-ghost-border, var(--dp-color-border, #dedede));
	outline-offset: 0;
	transition: outline-color 0.24s var(--dp-ease, ease), color 0.24s var(--dp-ease, ease),
	            background 0.24s var(--dp-ease, ease);
}

.dp-st__button--corner:hover,
.dp-st__button--corner:focus-visible {
	outline-color: var(--dp-st-button-corner, var(--dp-color-primary, #61c2d0));
	background: var(--dp-btn-bg-hover, var(--dp-st-button-ghost-bg-hover, var(--dp-color-primary-soft, #eef8fa)));
	color: var(--dp-btn-text-hover, var(--dp-btn-text, var(--dp-st-button-ghost-text, var(--dp-color-primary-strong, #417e88))));
}

@media (max-width: 600px) {
	/* Une rangée de boutons à 390 px : chacun prend la largeur, et l'ordre de
	   lecture remplace l'ordre de gauche à droite. */
	.dp-st__buttons { flex-direction: column; align-items: stretch; }
	.dp-st__button { width: 100%; }
}