/* DP – Mosaïque
   ---------------------------------------------------------------------------
   Le groupe en bref : une tuile large qui porte le propos, des repères chiffrés
   en aplat pastel, une photo voilée, une note sur gris.

   La grille est en quatre colonnes et en rangées d'au moins 150 px. Chaque
   tuile déclare son emprise (colonnes × rangées) : c'est ce qui permet à la
   mosaïque de ne pas être une grille régulière — et c'est aussi ce qui la rend
   fragile si les emprises additionnées ne bouclent pas. La règle simple : la
   somme des emprises horizontales d'une rangée doit faire quatre. */

.dp-bt {
	--dp-bt-cols: 4;
	--dp-bt-gap: 16px;
	--dp-bt-row: 150px;
	--dp-bt-radius: var(--dp-radius-lg, 20px);
	--dp-bt-pad: 26px;

	display: grid;
	grid-template-columns: repeat(var(--dp-bt-cols), minmax(0, 1fr));
	grid-auto-rows: minmax(var(--dp-bt-row), auto);
	gap: var(--dp-bt-gap);
	font-family: var(--dp-font-base, inherit);
}

/* Les emprises. Elles sont en classes et non en style inline : un style inline
   gagne sur toute media query, et une tuile qui réclame deux colonnes dans une
   grille qui n'en a qu'une fait fabriquer au navigateur une colonne implicite,
   dimensionnée au contenu. La rangée se retrouve alors à deux largeurs
   inégales, avec des libellés coupés à un mot par ligne. */

.dp-bt__tile--x2 { grid-column: span 2; }
.dp-bt__tile--x3 { grid-column: span 3; }
.dp-bt__tile--x4 { grid-column: span 4; }
.dp-bt__tile--x5 { grid-column: span 5; }
.dp-bt__tile--x6 { grid-column: span 6; }

.dp-bt__tile--y2 { grid-row: span 2; }
.dp-bt__tile--y3 { grid-row: span 3; }

.dp-bt__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--dp-bt-tile-pad, var(--dp-bt-pad));
	border-radius: var(--dp-bt-tile-radius, var(--dp-bt-radius));
	background: var(--dp-bt-tile-bg, var(--dp-color-surface, #ffffff));
	/* La couleur du texte vient de la tuile, pas de la règle : c'est la charte
	   qui a calculé ce qui se lit sur cet aplat. Un pastel et un panneau
	   profond ne portent pas le même texte, et le gabarit ne sait pas lequel
	   des deux il rend. */
	color: var(--dp-bt-tile-text, var(--dp-color-text, #303030));
	overflow: hidden;
	text-decoration: none;
}

/* Une tuile cliquable se soulève ; une tuile inerte ne bouge pas, pour ne pas
   promettre un lien qui n'existe pas. */
a.dp-bt__tile {
	transition: var(--dp-transition-card, transform 0.25s ease, box-shadow 0.25s ease);
}

a.dp-bt__tile:hover,
a.dp-bt__tile:focus-visible {
	transform: var(--dp-lift-hover, translateY(-2px));
	box-shadow: var(--dp-shadow-hover, 0 18px 40px rgba(16, 51, 96, 0.16));
}

a.dp-bt__tile:focus-visible {
	outline: none;
	box-shadow: var(--dp-focus-ring, 0 0 0 3px rgba(65, 126, 136, 0.28));
}

/* Le grain des dégradés est décrit une seule fois, dans `nouvelle-charte.css` :
   il vaut pour tous les blocs, et deux copies auraient fini par diverger. La
   classe `dp-bt__tile--grained` suffit à le déclencher. */


/* ── Tuile large : le propos ── */

.dp-bt__tile--feature {
	justify-content: space-between;
	padding: var(--dp-bt-tile-pad, 34px);
}

.dp-bt__eyebrow {
	margin: 0;
	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: inherit;
	opacity: 0.7;
}

.dp-bt__group {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.dp-bt__title {
	margin: 0;
	font-family: var(--dp-font-heading, inherit);
	font-weight: var(--dp-font-heading-weight, 700);
	font-size: var(--dp-text-h2, clamp(28px, 3.4vw, 46px));
	line-height: 1.06;
	letter-spacing: -0.01em;
	max-width: 16ch;
	color: inherit;
}

.dp-bt__lede {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	max-width: 38ch;
	color: inherit;
	opacity: 0.82;
}

.dp-bt__btn {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 13px 26px;
	border-radius: var(--dp-radius-pill, 999px);
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	background: var(--dp-btn-bg, var(--dp-bt-btn-bg, var(--dp-color-primary-fill, #61c2d0)));
	color: var(--dp-btn-text, var(--dp-bt-btn-text, var(--dp-color-on-primary, #303030)));
	transition: var(--dp-transition-base, all 0.2s ease);
}

.dp-bt__btn:hover,
.dp-bt__btn:focus-visible {
	background: var(--dp-btn-bg-hover, var(--dp-bt-btn-bg-hover, var(--dp-color-primary-dark, #52a5b1)));
	color: var(--dp-btn-text-hover, var(--dp-bt-btn-text-hover, var(--dp-color-on-primary-dark, #303030)));
	transform: var(--dp-lift-hover, translateY(-2px));
}

/* ── Repère chiffré ── */

.dp-bt__value {
	margin: 0;
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: var(--dp-bt-value-size, clamp(30px, 3vw, 44px));
	line-height: 1;
	color: inherit;
}

.dp-bt__label {
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
	color: inherit;
	opacity: 0.8;
}

.dp-bt__heading {
	margin: 0;
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	color: inherit;
}

.dp-bt__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: inherit;
	opacity: 0.8;
}

.dp-bt__more {
	margin-top: auto;
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var(--dp-tracking-caps, 0.12em);
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
}

/* ── Picto ──
   Les pictos existent en cinq coloris de fichier. On choisit le fichier dont la
   teinte convient : jamais un filtre CSS, qui salirait la silhouette. */

img.dp-bt__picto {
	display: block;
	width: var(--dp-bt-picto-size, 34px);
	height: auto;
}

/* ── Photo voilée ── */

.dp-bt__tile--photo {
	justify-content: flex-end;
	min-height: 220px;
	padding: var(--dp-bt-tile-pad, var(--dp-bt-pad));
}

img.dp-bt__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dp-bt__scrim {
	position: absolute;
	inset: 0;
	background: var(--dp-bt-scrim, var(--dp-scrim-photo, linear-gradient(180deg, rgba(48, 48, 48, 0) 30%, rgba(48, 48, 48, 0.62) 100%)));
}

.dp-bt__tile--photo > .dp-bt__badge,
.dp-bt__tile--photo > .dp-bt__photo-title {
	position: relative;
}

.dp-bt__badge {
	align-self: flex-start;
	margin: 0;
	padding: 8px 14px;
	border-radius: var(--dp-radius-pill, 999px);
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var(--dp-tracking-caps, 0.12em);
	text-transform: uppercase;
	background: var(--dp-bt-badge-bg, var(--dp-color-surface, #ffffff));
	color: var(--dp-bt-badge-text, var(--dp-color-primary-deep, #325f66));
}

.dp-bt__photo-title {
	margin: 10px 0 0;
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.15;
	/* Posé sur une photo voilée : le blanc est ici une propriété de la surface,
	   pas un choix de marque. C'est un rôle distinct de « texte sur aplat ». */
	color: var(--dp-bt-photo-title, #ffffff);
}

/* ── Note : un grand chiffre en regard d'un texte ── */

.dp-bt__tile--note {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 22px;
	align-items: center;
}

.dp-bt__figure {
	margin: 0;
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: clamp(34px, 3.4vw, 52px);
	line-height: 1;
	color: var(--dp-bt-figure, var(--dp-color-primary-deep, #325f66));
}

.dp-bt__note-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--dp-bt-note-text, var(--dp-color-text-muted, #5b5b5b));
}

/* ── Écrans étroits ──
   Les emprises sont neutralisées avant que la grille ne devienne illisible :
   une tuile 2×2 dans une grille à une colonne ferait une bande de 300 px de
   haut pour deux lignes de texte. */

@media (max-width: 1080px) {
	.dp-bt { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Plus rien ne peut dépasser deux colonnes. */
	.dp-bt__tile--x2,
	.dp-bt__tile--x3,
	.dp-bt__tile--x4,
	.dp-bt__tile--x5,
	.dp-bt__tile--x6 {
		grid-column: span 2;
	}
}

@media (max-width: 860px) {
	/* Une tuile haute de deux rangées perd sa raison d'être dès que la grille
	   se resserre : elle n'a plus de voisine à côté de laquelle s'aligner, et
	   double seulement sa hauteur. */
	.dp-bt__tile--y2,
	.dp-bt__tile--y3 {
		grid-row: span 1;
	}
}

@media (max-width: 620px) {
	.dp-bt { grid-template-columns: 1fr; }

	.dp-bt__tile--x2,
	.dp-bt__tile--x3,
	.dp-bt__tile--x4,
	.dp-bt__tile--x5,
	.dp-bt__tile--x6 {
		grid-column: span 1;
	}

	/* La note repasse en colonne : son grand chiffre et son texte côte à côte
	   laissent moins de vingt caractères par ligne au texte. */
	.dp-bt__tile--note { grid-template-columns: 1fr; gap: 10px; }

	/* Le propos respire moins : à 34 px de rembourrage sur 390 px d'écran, il
	   ne reste que la moitié de la largeur au texte. */
	.dp-bt__tile--feature { padding: var(--dp-bt-tile-pad, 24px); }
}

/* =====================================================================
 * L'élévation au survol, sur toutes les tuiles
 * =====================================================================
 * Jusqu'ici seule une tuile cliquable se soulevait, pour ne pas promettre un
 * lien absent. La maquette demande le mouvement partout : « petite animation
 * vers le haut sur tous les blocs ».
 *
 * La promesse reste tenue autrement — une tuile inerte se soulève, mais son
 * curseur ne change pas et elle ne prend pas le halo de focus. Le geste est
 * une réaction de surface, pas une invitation à cliquer.
 * ===================================================================== */
.dp-bt--lift .dp-bt__tile {
	transition: var(--dp-transition-card, transform 0.25s ease, box-shadow 0.25s ease);
}

.dp-bt--lift .dp-bt__tile:hover,
.dp-bt--lift .dp-bt__tile:focus-within {
	transform: var(--dp-lift-hover, translateY(-2px));
	box-shadow: var(--dp-shadow-hover, 0 18px 40px rgba(16, 51, 96, 0.16));
}

/* =====================================================================
 * Tuiles jointives
 * =====================================================================
 * « Bord arrondi sauf si enchaînement de plusieurs blocs. »
 *
 * Deux tuiles arrondies collées laissent quatre encoches blanches entre elles :
 * l'arrondi n'a de sens que sur un bord extérieur. En mode jointif, c'est la
 * mosaïque qui porte le rayon et découpe ses quatre coins ; les tuiles
 * redeviennent carrées.
 *
 * L'élévation est neutralisée avec : une tuile qui remonte de deux pixels au
 * milieu d'un pavage laisse une fente blanche sous elle.
 * ===================================================================== */
.dp-bt--joined {
	gap: 0;
	border-radius: var(--dp-bt-tile-radius, var(--dp-bt-radius));
	overflow: hidden;
}

.dp-bt--joined .dp-bt__tile {
	border-radius: 0;
}

.dp-bt--joined.dp-bt--lift .dp-bt__tile:hover,
.dp-bt--joined.dp-bt--lift .dp-bt__tile:focus-within {
	transform: none;
	/* L'ombre portée serait rognée par l'`overflow: hidden` du pavage : la
	   réaction devient un éclaircissement, qui, lui, se voit. */
	box-shadow: none;
	filter: brightness(1.04);
}

/* =====================================================================
 * La bascule au survol
 * =====================================================================
 * « Mosaïque avec changement de texte / photos / couleur au hover. »
 *
 * La face révélée est posée en couche au-dessus du contenu de repos, et non
 * substituée à lui : substituer ferait sauter la hauteur de la tuile au moment
 * où le curseur l'atteint, et la tuile se déroberait sous le curseur.
 *
 * `focus-within` autant que `hover` : la bascule doit être atteignable au
 * clavier sur une tuile cliquable.
 * ===================================================================== */
.dp-bt__hover {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;

	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s var(--dp-ease, ease), visibility 0.28s;
	pointer-events: none;
}

.dp-bt__tile--hover-swap:hover .dp-bt__hover,
.dp-bt__tile--hover-swap:focus-within .dp-bt__hover {
	opacity: 1;
	visibility: visible;
}

img.dp-bt__hover-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	/* Un léger rapprochement pendant la révélation : sans lui, la photo
	   apparaît comme un calque posé, pas comme une profondeur. */
	transform: scale(1.04);
	transition: transform 0.6s var(--dp-ease, ease);
}

.dp-bt__tile--hover-swap:hover img.dp-bt__hover-photo,
.dp-bt__tile--hover-swap:focus-within img.dp-bt__hover-photo {
	transform: scale(1);
}

.dp-bt__hover-scrim {
	position: absolute;
	inset: 0;
	background: var(--dp-bt-scrim, var(--dp-scrim-photo, linear-gradient(180deg, rgba(48, 48, 48, 0.1) 0%, rgba(48, 48, 48, 0.72) 100%)));
}

.dp-bt__hover-body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--dp-bt-tile-pad, var(--dp-bt-pad));
}

/*
 * La couleur du texte révélé dépend de ce qu'il y a dessous, et seul le
 * gabarit le sait : posé sur une photo voilée c'est du blanc, hors charte et
 * assumé ; posé sur un fond de charte c'est la couleur que la charte a
 * calculée pour cet aplat.
 */
.dp-bt__hover-title,
.dp-bt__hover-text {
	color: var(--dp-bt-tile-text-hover, var(--dp-bt-tile-text, var(--dp-color-text, #303030)));
}

.dp-bt__hover--photo .dp-bt__hover-title,
.dp-bt__hover--photo .dp-bt__hover-text {
	color: var(--dp-bt-photo-title, #ffffff);
}

.dp-bt__hover-title {
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
}

.dp-bt__hover-text {
	font-size: 14px;
	line-height: 1.6;
}

/* Le fond de survol : il repeint la tuile entière, sous le contenu de repos
   comme sous la face révélée. */
.dp-bt__tile--hover-bg {
	transition: background 0.28s var(--dp-ease, ease), color 0.28s var(--dp-ease, ease),
	            transform 0.25s ease, box-shadow 0.25s ease;
}

.dp-bt__tile--hover-bg:hover,
.dp-bt__tile--hover-bg:focus-within {
	background: var(--dp-bt-tile-bg-hover, var(--dp-bt-tile-bg));
	color: var(--dp-bt-tile-text-hover, var(--dp-bt-tile-text));
}

@media (prefers-reduced-motion: reduce) {
	.dp-bt--lift .dp-bt__tile:hover,
	.dp-bt--lift .dp-bt__tile:focus-within {
		transform: none;
	}
	.dp-bt__hover { transition: opacity 0.01ms linear; }
	img.dp-bt__hover-photo { transition: none; transform: none; }
	.dp-bt__tile--hover-swap:hover img.dp-bt__hover-photo,
	.dp-bt__tile--hover-swap:focus-within img.dp-bt__hover-photo { transform: none; }
}

/* Sur un appareil tactile il n'y a pas de survol : la face révélée ne
   s'atteindrait jamais, et son contenu serait simplement perdu. Elle devient
   donc visible en permanence, en bas de la tuile. */
@media (hover: none) {
	.dp-bt__tile--hover-swap .dp-bt__hover {
		position: relative;
		inset: auto;
		opacity: 1;
		visibility: visible;
		margin-top: auto;
	}
	.dp-bt__tile--hover-swap img.dp-bt__hover-photo,
	.dp-bt__tile--hover-swap .dp-bt__hover-scrim {
		display: none;
	}
	.dp-bt__hover-body { padding: 0; }
	.dp-bt__hover--photo .dp-bt__hover-title,
	.dp-bt__hover--photo .dp-bt__hover-text {
		color: inherit;
	}
}