/*
 * Binomm : diagnostic de financement (le logo en bas à droite, bulle, fenêtre en cinq étapes et première lecture).
 * Balisage : functions.php (wp_footer) ; comportement : diagnostic.js.
 * Mesures de la maquette XD (1920 px) multipliées par --bnm-s, comme binomm.css. Les sélecteurs commencent tous par
 * .bnm-diag ou .bnm-diag-zone : ils passent devant la typographie du kit (.elementor-kit-21 h2) et reset-neutre.css.
 */

/* ------------------------------------------------------------ zone fixe */

.bnm-diag-zone {
	/* Bleu : visible sur la page crème comme sur le pied sombre. */
	--bnm-focus: var(--bnm-bleu);
	position: fixed;
	right: max(16px, calc(40px * var(--bnm-s)));
	bottom: max(16px, calc(40px * var(--bnm-s)));
	z-index: 60;
	display: flex;
	align-items: center;
	/* La longueur de la pointe (10 px) moins la marge du symbole : la pointe touche le rond bordeaux. */
	gap: 9px;
	pointer-events: none;
	/* diagnostic.js : remonte la zone au-dessus de la barre légale et de la pastille Comm360. */
	transform: translateY(calc(-1 * var(--bnm-diag-leve, 0px)));
	transition: opacity .3s ease, visibility 0s;
}
.bnm-diag-zone > * { pointer-events: auto; }
.bnm-diag-zone[hidden] { display: none; }

html:not(.bnm-js) .bnm-diag-zone,
html.bnm-charge .bnm-diag-zone { display: none; }

/* Menu ou tiroir ouvert, fenêtre ouverte : la zone s'efface. */
html:is(.bnm-menu-ouvert, .bnm-diag-ouvert) .bnm-diag-zone,
body:has(.bnm-entete-hote.bnm-ouvert) .bnm-diag-zone {
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s .3s;
}

/* Bouton : le symbole du logo seul, dans ses couleurs, sans fond. Le contour arrondi ne sert qu'au focus. */
.bnm-diag-zone .bnm-diag-bouton {
	position: relative;
	display: block;
	flex: none;
	/* 22/10 (Tim : « réduis ça un peu ») : 108 au lieu de 128 px de maquette, 64 au lieu de 76 px au plus petit. */
	width: max(64px, calc(108px * var(--bnm-s)));
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: inherit;
	filter: drop-shadow(0 10px 16px rgba(38, 20, 23, .22));
	opacity: 0;
	visibility: hidden;
	scale: .6;
	transition: scale .9s var(--bnm-expo), opacity .4s ease, visibility 0s .4s, transform .5s var(--bnm-expo);
}
.bnm-diag-zone .bnm-diag-bouton:is(:hover, :focus, :active) {
	background: none;
	color: inherit;
}
.bnm-diag-zone .bnm-diag-bouton:focus-visible {
	outline: 2px solid var(--bnm-focus) !important;
	outline-offset: 6px;
}
.bnm-diag-zone .bnm-diag-bouton svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.bnm-diag-zone.est-visible .bnm-diag-bouton {
	opacity: 1;
	visibility: visible;
	scale: 1;
	transition: scale .9s var(--bnm-expo), opacity .4s ease, visibility 0s, transform .5s var(--bnm-expo);
}
/* Au survol, seul le bouton grossit : la flèche sombre reste collée au rond bordeaux (Tim, 22/10). */
@media (hover: hover) {
	.bnm-diag-zone:hover .bnm-diag-bouton { transform: scale(1.06); }
}
.bnm-diag-zone .bnm-diag-bouton:active { transform: scale(.96); }

/* Bulle : son texte ouvre aussi la fenêtre au clic (il est masqué aux lecteurs d'écran, le bouton porte le libellé) ;
 * la croix à droite masque la bulle pour la session (diagnostic.js). */
.bnm-diag-zone .bnm-diag-bulle {
	/* Au-dessus du bouton : son ombre portée ne grise pas la pointe, qui touche le rond bordeaux. */
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	border: 1px solid var(--bnm-taupe);
	border-radius: max(8px, calc(14px * var(--bnm-s)));
	background: var(--bnm-creme);
	color: var(--bnm-sombre);
	box-shadow: 0 18px 40px -24px rgba(38, 20, 23, .5);
	opacity: 0;
	visibility: hidden;
	translate: 16px 0;
	transition: translate .8s var(--bnm-expo) .12s, opacity .4s ease .12s, visibility 0s .5s,
		background-color .3s ease, color .3s ease, border-color .3s ease;
}
/* Pointe vers le bouton : bordure taupe dessous, fond crème dessus. */
.bnm-diag-zone .bnm-diag-bulle::before,
.bnm-diag-zone .bnm-diag-bulle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	translate: 0 -50%;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transition: background-color .3s ease;
}
.bnm-diag-zone .bnm-diag-bulle::before {
	width: 10px;
	height: 18px;
	background: var(--bnm-taupe);
}
.bnm-diag-zone .bnm-diag-bulle::after {
	width: 9px;
	height: 16px;
	margin-left: -1px;
	background: var(--bnm-creme);
}
.bnm-diag-zone .bnm-diag-bulle__texte {
	display: grid;
	gap: max(4px, calc(6px * var(--bnm-s)));
	padding: max(12px, calc(18px * var(--bnm-s))) max(6px, calc(8px * var(--bnm-s))) max(12px, calc(18px * var(--bnm-s))) max(16px, calc(26px * var(--bnm-s)));
	cursor: pointer;
}
.bnm-diag-zone .bnm-diag-bulle__titre,
.bnm-diag-zone .bnm-diag-bulle__ligne { white-space: nowrap; }
.bnm-diag-zone .bnm-diag-bulle__fermer {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	margin: max(6px, calc(10px * var(--bnm-s))) max(6px, calc(10px * var(--bnm-s))) 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	opacity: .55;
	cursor: pointer;
	transition: opacity .25s ease, background-color .25s ease;
}
.bnm-diag-zone .bnm-diag-bulle__fermer:is(:hover, :focus-visible) {
	opacity: 1;
	background: color-mix(in srgb, currentColor 12%, transparent);
	color: inherit;
}
.bnm-diag-zone .bnm-diag-bulle__fermer:focus-visible {
	outline: 2px solid var(--bnm-focus) !important;
	outline-offset: 2px;
}
.bnm-diag-zone .bnm-diag-bulle__fermer svg {
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}
.bnm-diag-zone .bnm-diag-bulle__titre {
	font: 700 max(15px, calc(22px * var(--bnm-s)))/1.2 var(--e-global-typography-bnmh3-font-family, "alverata"), Georgia, serif;
}
.bnm-diag-zone .bnm-diag-bulle__ligne {
	font: 400 max(10px, calc(14px * var(--bnm-s)))/1.2 var(--e-global-typography-bnmsurtitre-font-family, "Helvetica Neue"), "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .12em;
	opacity: .72;
}
.bnm-diag-zone.est-visible .bnm-diag-bulle {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition: translate .8s var(--bnm-expo) .12s, opacity .4s ease .12s, visibility 0s,
		background-color .3s ease, color .3s ease, border-color .3s ease;
}
@media (hover: hover) {
	.bnm-diag-zone:hover .bnm-diag-bulle {
		border-color: var(--bnm-sombre);
		background-color: var(--bnm-sombre);
		color: var(--bnm-creme);
	}
	.bnm-diag-zone:hover .bnm-diag-bulle::before,
	.bnm-diag-zone:hover .bnm-diag-bulle::after { background-color: var(--bnm-sombre); }
}
.bnm-diag-zone.est-visible.est-sans-bulle .bnm-diag-bulle {
	opacity: 0;
	visibility: hidden;
	translate: 16px 0;
	transition: translate .5s var(--bnm-expo), opacity .3s ease, visibility 0s .5s;
}
@media (max-width: 960px) {
	.bnm-diag-zone .bnm-diag-bulle { display: none; }
}

/* ------------------------------------------------------------- fenêtre */

html.bnm-diag-ouvert { overflow: hidden; }

.bnm-diag {
	--bnm-focus: var(--bnm-sombre);
	--marge: clamp(24px, 4.5vw, 64px);
	width: min(1040px, calc(100vw - 48px));
	max-width: none;
	min-height: min(680px, calc(100dvh - 48px));
	max-height: calc(100dvh - 48px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: max(8px, calc(14px * var(--bnm-s)));
	background: var(--bnm-creme);
	color: var(--bnm-sombre);
	font: 400 clamp(16px, calc(24px * var(--bnm-s)), 18px)/1.45 var(--e-global-typography-bnmtexte-font-family, "Helvetica Neue"), "Helvetica Neue", Helvetica, Arial, sans-serif;
	overflow: hidden;
	opacity: 0;
	translate: 0 24px;
	transition: opacity .45s ease, translate .7s var(--bnm-expo);
}
.bnm-diag[open] {
	display: flex;
	flex-direction: column;
}
.bnm-diag.est-ouvert {
	opacity: 1;
	translate: 0 0;
}
.bnm-diag.est-fermeture { transition: opacity .3s ease, translate .3s ease; }
.bnm-diag::backdrop {
	background: rgba(38, 20, 23, .6);
	opacity: 0;
	transition: opacity .45s ease;
}
.bnm-diag.est-ouvert::backdrop { opacity: 1; }
.bnm-diag.est-fermeture::backdrop { transition-duration: .3s; }

:is(.bnm-diag, .bnm-form) [hidden] { display: none !important; }
:is(.bnm-diag, .bnm-form) [tabindex="-1"]:focus { outline: none !important; }

.bnm-diag .bnm-diag__corps {
	flex: 1;
	min-height: 0;
	overflow: auto;
	overscroll-behavior: contain;
	padding: var(--marge);
}

.bnm-diag .bnm-diag__fermer {
	position: absolute;
	top: max(10px, calc(var(--marge) / 2 - 12px));
	right: max(10px, calc(var(--marge) / 2 - 12px));
	z-index: 1;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bnm-creme);
	color: var(--bnm-sombre);
	transition: background-color .3s ease;
}
.bnm-diag .bnm-diag__fermer:is(:hover, :focus) {
	background: var(--bnm-creme-claire);
	color: var(--bnm-sombre);
}
.bnm-diag .bnm-diag__fermer svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

/* Titres */
:is(.bnm-diag, .bnm-form) .bnm-diag__surtitre {
	margin: 0 0 max(10px, calc(16px * var(--bnm-s)));
	padding-right: 44px;
	font: 400 max(12px, calc(20px * var(--bnm-s)))/1.2 var(--e-global-typography-bnmsurtitre-font-family, "Helvetica Neue"), "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .06em;
}
:is(.bnm-diag, .bnm-form) :is(h2, h3, h4, h5, legend) {
	margin: 0;
	padding: 0;
	color: var(--bnm-sombre);
	font-family: var(--e-global-typography-bnmh2-font-family, "alverata"), Georgia, serif;
	font-weight: 700;
	line-height: 1.17;
	letter-spacing: 0;
	text-transform: none;
}
.bnm-diag .bnm-diag__titre {
	padding-right: 44px;
	font-size: max(26px, calc(48px * var(--bnm-s)));
}

/* Étapes */
:is(.bnm-diag, .bnm-form) .bnm-diag__pas {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: max(8px, calc(14px * var(--bnm-s)));
	margin: max(22px, calc(40px * var(--bnm-s))) 0 max(26px, calc(48px * var(--bnm-s)));
	padding: 0;
	list-style: none;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__pas li {
	padding-top: 10px;
	border-top: 3px solid var(--bnm-filet);
	font-size: max(12px, calc(17px * var(--bnm-s)));
	line-height: 1.25;
	color: rgba(38, 20, 23, .6);
	transition: border-color .5s var(--bnm-expo), color .3s ease;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__pas li span {
	display: block;
	margin-bottom: 2px;
	font: 700 max(14px, calc(22px * var(--bnm-s)))/1.2 var(--e-global-typography-bnmnum-font-family, "alverata"), Georgia, serif;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__pas li.est-fait {
	border-top-color: var(--bnm-sombre);
	color: var(--bnm-sombre);
}
:is(.bnm-diag, .bnm-form) .bnm-diag__pas li.est-actif {
	border-top-color: var(--bnm-bleu);
	color: var(--bnm-sombre);
}
.bnm-diag .bnm-diag__pas-mobile { display: none; }

/* Étape affichée */
:is(.bnm-diag, .bnm-form) .bnm-diag__etape {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__etape:not([hidden]),
:is(.bnm-diag, .bnm-form) .bnm-diag__resultat:not([hidden]) { animation: bnm-diag-etape .6s var(--bnm-expo); }
@keyframes bnm-diag-etape {
	from { opacity: 0; translate: 0 12px; }
	to { opacity: 1; translate: 0 0; }
}
:is(.bnm-diag, .bnm-form) legend {
	display: block;
	width: 100%;
	margin-bottom: max(16px, calc(28px * var(--bnm-s)));
	font-size: max(20px, calc(34px * var(--bnm-s)));
}
:is(.bnm-diag, .bnm-form) .bnm-diag__question {
	margin: max(22px, calc(36px * var(--bnm-s))) 0 max(10px, calc(14px * var(--bnm-s)));
	font-weight: 500;
}
:is(.bnm-diag, .bnm-form) legend + .bnm-diag__question { margin-top: 0; }
:is(.bnm-diag, .bnm-form) :is(.bnm-diag__note, .bnm-diag__intro, .bnm-diag__direct) {
	margin: max(12px, calc(18px * var(--bnm-s))) 0 0;
	font-size: max(14px, calc(19px * var(--bnm-s)));
	line-height: 1.4;
	color: rgba(38, 20, 23, .72);
}
:is(.bnm-diag, .bnm-form) .bnm-diag__intro { margin: 0 0 max(18px, calc(28px * var(--bnm-s))); }
:is(.bnm-diag, .bnm-form) .bnm-diag__direct {
	min-height: 1.4em;
	margin-top: max(16px, calc(24px * var(--bnm-s)));
	font: 700 max(17px, calc(28px * var(--bnm-s)))/1.2 var(--e-global-typography-bnmh3-font-family, "alverata"), Georgia, serif;
	color: var(--bnm-sombre);
}

/* Tuiles de choix */
:is(.bnm-diag, .bnm-form) .bnm-diag__tuiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: max(8px, calc(14px * var(--bnm-s)));
}
:is(.bnm-diag, .bnm-form) .bnm-diag__tuiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:is(.bnm-diag, .bnm-form) .bnm-diag__tuile {
	position: relative;
	display: block;
	padding: max(14px, calc(24px * var(--bnm-s))) max(16px, calc(26px * var(--bnm-s)));
	padding-right: max(34px, calc(52px * var(--bnm-s)));
	border-radius: max(6px, calc(10px * var(--bnm-s)));
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(38, 20, 23, .2);
	color: var(--bnm-sombre);
	line-height: 1.3;
	vertical-align: top;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__tuile input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__tuile b {
	display: block;
	font-weight: 500;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__tuile small {
	display: block;
	margin-top: 4px;
	font-size: max(13px, calc(18px * var(--bnm-s)));
	line-height: 1.35;
	opacity: .72;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__tuile::after {
	content: "✓";
	position: absolute;
	top: max(12px, calc(20px * var(--bnm-s)));
	right: max(12px, calc(20px * var(--bnm-s)));
	font-size: max(14px, calc(20px * var(--bnm-s)));
	line-height: 1;
	opacity: 0;
	scale: .6;
	transition: opacity .25s ease, scale .4s var(--bnm-expo);
}
@media (hover: hover) {
	:is(.bnm-diag, .bnm-form) .bnm-diag__tuile:hover { box-shadow: inset 0 0 0 1px var(--bnm-sombre); }
}
:is(.bnm-diag, .bnm-form) .bnm-diag__tuile:has(input:checked) {
	background: var(--bnm-sombre);
	box-shadow: inset 0 0 0 1px var(--bnm-sombre);
	color: var(--bnm-creme);
}
:is(.bnm-diag, .bnm-form) .bnm-diag__tuile:has(input:checked)::after {
	opacity: 1;
	scale: 1;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__tuile:has(input:focus-visible) {
	outline: 2px solid var(--bnm-focus);
	outline-offset: 3px;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__tuile input:focus-visible { outline: none !important; }

/* Montants */
:is(.bnm-diag, .bnm-form) .bnm-diag__chiffres {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: max(18px, calc(32px * var(--bnm-s)));
}
:is(.bnm-diag, .bnm-form) .bnm-diag__chiffre {
	display: grid;
	gap: max(6px, calc(10px * var(--bnm-s)));
	align-content: end;
	line-height: 1.3;
	vertical-align: top;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__etiquette {
	font-size: max(14px, calc(19px * var(--bnm-s)));
	line-height: 1.3;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__champ {
	display: flex;
	align-items: baseline;
	gap: 8px;
	border-bottom: 1px solid var(--bnm-sombre);
	font: 700 max(22px, calc(36px * var(--bnm-s)))/1.2 var(--e-global-typography-bnmnum-font-family, "alverata"), Georgia, serif;
	transition: box-shadow .3s ease;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__champ input {
	flex: 1;
	width: 100%;
	min-width: 0;
	padding: 4px 0 8px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	appearance: none;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__champ input::placeholder { color: rgba(38, 20, 23, .32); }
:is(.bnm-diag, .bnm-form) .bnm-diag__champ input:focus-visible { outline: none !important; }
:is(.bnm-diag, .bnm-form) .bnm-diag__champ:has(input:focus) { box-shadow: 0 1px 0 0 var(--bnm-sombre), 0 3px 0 0 var(--bnm-bleu); }

/* Champs de texte */
:is(.bnm-diag, .bnm-form) .bnm-diag__ligne {
	display: grid;
	gap: max(6px, calc(10px * var(--bnm-s)));
	margin-top: max(14px, calc(22px * var(--bnm-s)));
	line-height: 1.3;
	vertical-align: top;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__ligne :is(input, textarea) {
	width: 100%;
	padding: max(12px, calc(18px * var(--bnm-s))) max(14px, calc(20px * var(--bnm-s)));
	border: 0;
	border-bottom: 1px solid var(--bnm-sombre);
	border-radius: 0;
	background: transparent;
	color: var(--bnm-sombre);
	font: inherit;
	line-height: 1.3;
	transition: background-color .3s ease, box-shadow .3s ease;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__ligne :is(input, textarea)::placeholder { color: rgba(38, 20, 23, .45); }
:is(.bnm-diag, .bnm-form) .bnm-diag__ligne :is(input, textarea):focus {
	border-color: var(--bnm-sombre);
	background: transparent;
	box-shadow: inset 0 -2px 0 0 var(--bnm-bleu);
}
:is(.bnm-diag, .bnm-form) .bnm-diag__ligne :is(input, textarea):focus-visible { outline: none !important; }
:is(.bnm-diag, .bnm-form) .bnm-diag__ligne textarea {
	min-height: 9em;
	font-size: max(13px, calc(18px * var(--bnm-s)));
	resize: vertical;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__coordonnees {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: max(14px, calc(24px * var(--bnm-s)));
}
:is(.bnm-diag, .bnm-form) .bnm-diag__coordonnees .bnm-diag__ligne:last-child { grid-column: 1 / -1; }
:is(.bnm-diag, .bnm-form) .bnm-diag__accord {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: max(18px, calc(28px * var(--bnm-s)));
	font-size: max(14px, calc(19px * var(--bnm-s)));
	line-height: 1.4;
	cursor: pointer;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__accord input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: .1em 0 0;
	accent-color: var(--bnm-sombre);
	cursor: pointer;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Navigation */
:is(.bnm-diag, .bnm-form) .bnm-diag__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: max(14px, calc(24px * var(--bnm-s)));
	margin-top: max(28px, calc(52px * var(--bnm-s)));
}
:is(.bnm-diag, .bnm-form) .bnm-diag__retour {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--bnm-sombre);
	font: 500 max(14px, calc(20px * var(--bnm-s)))/1.25 var(--e-global-typography-bnmbouton-font-family, "Helvetica Neue"), "Helvetica Neue", Helvetica, Arial, sans-serif;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__retour:is(:hover, :focus) {
	background: none;
	color: var(--bnm-sombre);
}
:is(.bnm-diag, .bnm-form) .bnm-diag__retour::before {
	content: "";
	width: 1.1em;
	height: .62em;
	background: currentColor;
	-webkit-mask: var(--bnm-fleche) center / contain no-repeat;
	mask: var(--bnm-fleche) center / contain no-repeat;
	scale: -1 1;
	transition: translate .25s ease;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__retour:is(:hover, :focus-visible)::before { translate: -4px 0; }
/* « Refaire » : pas de flèche de retour, un trait sous le libellé. */
:is(.bnm-diag, .bnm-form) .bnm-diag__retour--refaire::before { content: none; }
:is(.bnm-diag, .bnm-form) .bnm-diag__retour--refaire {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__erreur {
	flex-basis: 100%;
	margin: 0;
	color: var(--bnm-bordeaux);
	font-size: max(14px, calc(19px * var(--bnm-s)));
	line-height: 1.4;
}
:is(.bnm-diag, .bnm-form) .bnm-diag__erreur:empty { display: none; }

/* Boutons pleins : le style des boutons bleus du site (couleurs et mesures posées par Elementor ailleurs). */
:is(.bnm-diag, .bnm-form) .bnm-bouton .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: max(44px, calc(64px * var(--bnm-s)));
	padding: 0 max(18px, calc(34px * var(--bnm-s)));
	border: 0;
	border-radius: 100px;
	background: var(--bnm-bleu);
	color: var(--bnm-creme);
	font: 500 max(14px, calc(20px * var(--bnm-s)))/1.25 var(--e-global-typography-bnmbouton-font-family, "Helvetica Neue"), "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .3s ease, color .3s ease, scale .2s var(--button-004-ease-click, ease);
}
:is(.bnm-diag, .bnm-form) .bnm-bouton .elementor-button:is(:hover, :focus-visible) {
	background: var(--bnm-sombre);
	color: var(--bnm-creme);
}
:is(.bnm-diag, .bnm-form) .bnm-bouton .elementor-button:disabled {
	opacity: .6;
	cursor: progress;
}

/* ----------------------------------------------------- première lecture */

.bnm-diag .bnm-diag__res-titre {
	font-size: max(22px, calc(40px * var(--bnm-s)));
}
.bnm-diag .bnm-diag__res-chiffres {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: max(22px, calc(40px * var(--bnm-s)));
	border-top: 1px solid var(--bnm-filet);
	border-bottom: 1px solid var(--bnm-filet);
}
.bnm-diag .bnm-diag__res-chiffre {
	display: grid;
	align-content: start;
	gap: 6px;
	padding: max(16px, calc(28px * var(--bnm-s))) max(12px, calc(22px * var(--bnm-s)));
	border-left: 1px solid var(--bnm-filet);
}
.bnm-diag .bnm-diag__res-chiffre:first-child {
	padding-left: 0;
	border-left: 0;
}
.bnm-diag .bnm-diag__res-chiffre b {
	font: 700 max(24px, calc(50px * var(--bnm-s)))/1.18 var(--e-global-typography-bnmnum-font-family, "alverata"), Georgia, serif;
	white-space: nowrap;
}
.bnm-diag .bnm-diag__res-chiffre span {
	font-size: max(13px, calc(18px * var(--bnm-s)));
	line-height: 1.35;
	color: rgba(38, 20, 23, .72);
}
.bnm-diag .bnm-diag__res-colonnes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: max(24px, calc(56px * var(--bnm-s)));
	margin-top: max(28px, calc(52px * var(--bnm-s)));
}
.bnm-diag .bnm-diag__res-sous-titre {
	margin-bottom: max(12px, calc(20px * var(--bnm-s)));
	font-size: max(18px, calc(28px * var(--bnm-s)));
}
.bnm-diag .bnm-diag__res-colonnes + .bnm-diag__res-sous-titre { margin-top: max(28px, calc(52px * var(--bnm-s))); }
.bnm-diag .bnm-diag__liste {
	display: grid;
	gap: max(10px, calc(16px * var(--bnm-s)));
	margin: 0;
	padding: 0;
	list-style: none;
}
.bnm-diag .bnm-diag__liste li {
	display: flex;
	gap: 12px;
	line-height: 1.45;
}
.bnm-diag .bnm-diag__liste i {
	flex: none;
	width: 1em;
	color: var(--bnm-bleu);
	font-style: normal;
	line-height: inherit;
}
.bnm-diag .bnm-diag__liste--pieces i { color: var(--bnm-bordeaux); }
.bnm-diag .bnm-lien-fleche a {
	color: var(--bnm-sombre);
	font-weight: 500;
	text-decoration: none;
}
.bnm-diag .bnm-diag__liste .bnm-lien-fleche__texte {
	background-position: 0 100%;
	background-size: 100% 1px;
}

.bnm-diag .bnm-diag__res-pages {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: max(10px, calc(18px * var(--bnm-s)));
}
.bnm-diag .bnm-diag__carte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: max(8px, calc(12px * var(--bnm-s)));
	padding: max(18px, calc(30px * var(--bnm-s)));
	border-radius: max(10px, calc(18px * var(--bnm-s)));
	background: var(--bnm-sombre);
	color: var(--bnm-creme);
	transition: background-color .3s ease;
}
.bnm-diag .bnm-diag__carte:nth-child(3n + 2) { background: var(--bnm-bordeaux); }
.bnm-diag .bnm-diag__carte:nth-child(3n) { background: var(--bnm-bleu); }
@media (hover: hover) {
	.bnm-diag .bnm-diag__carte:hover { background: var(--bnm-bordeaux); }
	.bnm-diag .bnm-diag__carte:is(:nth-child(3n + 2), :nth-child(3n)):hover { background: var(--bnm-sombre); }
}
.bnm-diag .bnm-diag__carte :is(.bnm-diag__carte-titre, .bnm-lien-fleche a) { color: var(--bnm-creme); }
.bnm-diag .bnm-diag__carte-surtitre {
	margin: 0;
	font-size: max(12px, calc(16px * var(--bnm-s)));
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: rgba(241, 235, 234, .78);
}
.bnm-diag .bnm-diag__carte-titre {
	flex: 1;
	font-size: max(17px, calc(26px * var(--bnm-s)));
}
.bnm-diag .bnm-diag__carte .bnm-lien-fleche a::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.bnm-diag .bnm-diag__carte .bnm-lien-fleche a:focus-visible { outline: none !important; }
.bnm-diag .bnm-diag__carte:has(a:focus-visible) {
	outline: 2px solid var(--bnm-sombre);
	outline-offset: 3px;
}

.bnm-diag .bnm-diag__envoi {
	margin-top: max(32px, calc(60px * var(--bnm-s)));
	padding-top: max(24px, calc(44px * var(--bnm-s)));
	border-top: 1px solid var(--bnm-filet);
}
.bnm-diag .bnm-diag__envoi > p { margin: max(10px, calc(16px * var(--bnm-s))) 0 0; }
:is(.bnm-diag, .bnm-form) .bnm-diag__boutons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: max(14px, calc(28px * var(--bnm-s)));
	margin-top: max(20px, calc(32px * var(--bnm-s)));
}

/* -------------------------------------------------------------- tailles */

@media (max-width: 960px) {
	:is(.bnm-diag, .bnm-form) .bnm-diag__tuiles,
	:is(.bnm-diag, .bnm-form) .bnm-diag__tuiles--4,
	:is(.bnm-diag, .bnm-form) .bnm-diag__chiffres,
	.bnm-diag .bnm-diag__res-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bnm-diag .bnm-diag__res-chiffre:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}
	.bnm-diag .bnm-diag__res-chiffre:nth-child(n + 3) { border-top: 1px solid var(--bnm-filet); }
}

@media (max-width: 767px) {
	/* Plein écran : la fenêtre devient une page. */
	.bnm-diag {
		width: 100vw;
		height: 100dvh;
		min-height: 0;
		max-height: none;
		border-radius: 0;
	}
	/* Le bouton de fermeture a sa propre ligne : le contenu défile dessous sans passer sous lui. */
	.bnm-diag .bnm-diag__fermer {
		position: static;
		order: -1;
		flex: none;
		align-self: flex-end;
		margin: 6px 6px 0 0;
	}
	.bnm-diag .bnm-diag__corps { padding-top: 0; }
	.bnm-diag .bnm-diag__pas { display: none; }
	.bnm-diag .bnm-diag__pas-mobile {
		display: block;
		margin: 14px 0 22px;
		padding-top: 10px;
		border-top: 3px solid var(--bnm-bleu);
		font-size: 14px;
		line-height: 1.3;
	}
	.bnm-diag .bnm-diag__res-colonnes,
	.bnm-diag .bnm-diag__res-pages { grid-template-columns: minmax(0, 1fr); }
	:is(.bnm-diag, .bnm-form) .bnm-diag__nav .bnm-bouton { flex: 1 1 auto; }
	:is(.bnm-diag, .bnm-form) .bnm-diag__nav .bnm-bouton .elementor-button { width: 100%; }
}

@media (max-width: 560px) {
	:is(.bnm-diag, .bnm-form) .bnm-diag__tuiles { grid-template-columns: minmax(0, 1fr); }
	:is(.bnm-diag, .bnm-form) .bnm-diag__coordonnees { grid-template-columns: minmax(0, 1fr); }
}

/* ----------------------------------------------------------- préférences */

@media (prefers-reduced-motion: reduce) {
	.bnm-diag-zone,
	.bnm-diag-zone *,
	.bnm-diag,
	.bnm-diag::backdrop,
	.bnm-diag *,
	.bnm-form * {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.bnm-diag-zone,
	.bnm-diag { display: none !important; }
}

/* ======================================================= proposition : deux volets */

/* Hauteur fixe : la fenêtre ne change plus de taille d'une étape à l'autre. */
.bnm-diag.bnm-diag--v2 {
	width: min(1180px, calc(100vw - 48px));
	height: min(780px, calc(100dvh - 48px));
	min-height: 0;
}
.bnm-diag.bnm-diag--v2[open] {
	display: grid;
	grid-template-columns: minmax(280px, 35%) minmax(0, 1fr);
}

/* Volet sombre : titre, étapes et réponses données, sur les arcs des bandes sombres du site. */
.bnm-diag--v2 .bnm-diag__cote {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: var(--marge) calc(var(--marge) * .85);
	background: var(--bnm-sombre) url("arcs.svg") no-repeat;
	background-position: right -440px bottom -170px;
	background-size: 560px auto;
	color: var(--bnm-creme);
	overflow: hidden;
}
.bnm-diag--v2 .bnm-diag__symbole {
	display: block;
	width: max(44px, calc(64px * var(--bnm-s)));
}
.bnm-diag--v2 .bnm-diag__symbole svg {
	display: block;
	width: 100%;
	height: auto;
}
.bnm-diag--v2 .bnm-diag__symbole .bnm-s-sombre { fill: var(--bnm-creme); }
.bnm-diag--v2 .bnm-diag__cote .bnm-diag__surtitre {
	margin: max(22px, calc(36px * var(--bnm-s))) 0 max(8px, calc(12px * var(--bnm-s)));
	padding: 0;
	color: rgba(241, 235, 234, .7);
	font-size: max(12px, calc(17px * var(--bnm-s)));
	letter-spacing: .1em;
}
.bnm-diag--v2 .bnm-diag__cote .bnm-diag__titre {
	padding: 0;
	color: var(--bnm-creme);
	font-size: max(26px, calc(46px * var(--bnm-s)));
	line-height: 1.12;
}

/* Étapes en colonne, reliées par un trait ; la réponse donnée s'inscrit sous l'étape faite. */
.bnm-diag--v2 .bnm-diag__cote .bnm-diag__pas {
	display: grid;
	grid-template-columns: none;
	gap: 0;
	margin: max(26px, calc(48px * var(--bnm-s))) 0 0;
}
.bnm-diag--v2 .bnm-diag__cote .bnm-diag__pas li {
	position: relative;
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: 14px;
	align-items: center;
	min-height: 28px;
	padding: 0 0 max(14px, calc(22px * var(--bnm-s)));
	border: 0;
	color: rgba(241, 235, 234, .5);
	font-size: max(14px, calc(20px * var(--bnm-s)));
	transition: color .3s ease;
}
.bnm-diag--v2 .bnm-diag__cote .bnm-diag__pas li:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 30px;
	bottom: 2px;
	left: 13.5px;
	width: 1px;
	background: rgba(241, 235, 234, .2);
}
.bnm-diag--v2 .bnm-diag__cote .bnm-diag__pas li span {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(241, 235, 234, .35);
	font: 700 13px/1 var(--e-global-typography-bnmnum-font-family, "alverata"), Georgia, serif;
	transition: background-color .4s var(--bnm-expo), box-shadow .4s var(--bnm-expo), color .3s ease;
}
.bnm-diag--v2 .bnm-diag__cote .bnm-diag__pas li em {
	font-style: normal;
	line-height: 1.25;
}
.bnm-diag--v2 .bnm-diag__cote .bnm-diag__pas li small {
	grid-column: 2;
	overflow: hidden;
	color: rgba(241, 235, 234, .62);
	font-size: max(12px, calc(16px * var(--bnm-s)));
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.bnm-diag--v2 .bnm-diag__cote .bnm-diag__pas li:not(.est-fait) small,
.bnm-diag--v2 .bnm-diag__cote .bnm-diag__pas li small:empty { display: none; }
.bnm-diag--v2 .bnm-diag__cote .bnm-diag__pas li.est-actif { color: var(--bnm-creme); }
.bnm-diag--v2 .bnm-diag__cote .bnm-diag__pas li.est-actif span {
	background: var(--bnm-bleu);
	box-shadow: inset 0 0 0 1px var(--bnm-bleu);
	color: var(--bnm-creme);
}
.bnm-diag--v2 .bnm-diag__cote .bnm-diag__pas li.est-fait { color: rgba(241, 235, 234, .88); }
/* Étape faite : une coche à la place du numéro. */
.bnm-diag--v2 .bnm-diag__cote .bnm-diag__pas li.est-fait span {
	background: var(--bnm-creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23261417' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
	box-shadow: inset 0 0 0 1px var(--bnm-creme);
	color: transparent;
}
.bnm-diag--v2 .bnm-diag__cote-note {
	max-width: 16em;
	margin: auto 0 0;
	padding-top: 24px;
	color: rgba(241, 235, 234, .7);
	font-size: max(13px, calc(17px * var(--bnm-s)));
	line-height: 1.4;
}
.bnm-diag--v2 .bnm-diag__avance { display: none; }

/* Volet clair : la question, les réponses et, toujours en bas, la navigation. */
.bnm-diag--v2 .bnm-diag__corps {
	display: flex;
	flex-direction: column;
	padding: var(--marge) var(--marge) 0;
	container-type: inline-size;
}
.bnm-diag--v2 .bnm-diag__form {
	display: flex;
	flex: 1;
	flex-direction: column;
}
.bnm-diag--v2 .bnm-diag__etape { padding-bottom: max(24px, calc(40px * var(--bnm-s))); }
.bnm-diag--v2 legend {
	padding-right: 48px;
	margin-bottom: max(18px, calc(36px * var(--bnm-s)));
	font-size: max(24px, calc(46px * var(--bnm-s)));
}
.bnm-diag--v2 .bnm-diag__question {
	margin-top: max(22px, calc(40px * var(--bnm-s)));
	font: 700 max(17px, calc(26px * var(--bnm-s)))/1.2 var(--e-global-typography-bnmh3-font-family, "alverata"), Georgia, serif;
}
.bnm-diag--v2 .bnm-diag__nav {
	position: sticky;
	bottom: 0;
	z-index: 2;
	margin: auto calc(-1 * var(--marge)) 0;
	padding: max(14px, calc(22px * var(--bnm-s))) var(--marge) max(18px, calc(var(--marge) * .6));
	border-top: 1px solid var(--bnm-filet);
	background: var(--bnm-creme);
}
.bnm-diag--v2 .bnm-diag__nav .bnm-bouton { margin-left: auto; }
.bnm-diag--v2 .bnm-diag__nav .bnm-diag__erreur { order: -1; }

/* Réponses : des cartes crème foncé, un pictogramme, un rond qui se coche. */
.bnm-diag--v2 .bnm-diag__tuiles {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: max(10px, calc(16px * var(--bnm-s)));
}
.bnm-diag--v2 .bnm-diag__tuiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bnm-diag--v2 .bnm-diag__tuile {
	display: flex;
	flex-direction: column;
	padding: max(16px, calc(26px * var(--bnm-s)));
	padding-right: max(46px, calc(64px * var(--bnm-s)));
	border-radius: max(10px, calc(16px * var(--bnm-s)));
	background: var(--bnm-creme-claire);
	box-shadow: none;
}
.bnm-diag--v2 .bnm-diag__tuile b { line-height: 1.25; }
.bnm-diag--v2 .bnm-diag__icone {
	display: grid;
	place-items: center;
	width: max(40px, calc(56px * var(--bnm-s)));
	height: max(40px, calc(56px * var(--bnm-s)));
	margin-bottom: max(14px, calc(26px * var(--bnm-s)));
	border-radius: 50%;
	background: var(--bnm-creme);
	color: var(--bnm-bordeaux);
	transition: background-color .3s ease, color .3s ease;
}
.bnm-diag--v2 .bnm-diag__icone svg {
	width: 46%;
	height: 46%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.bnm-diag--v2 .bnm-diag__tuile::after {
	content: "";
	top: max(16px, calc(26px * var(--bnm-s)));
	right: max(16px, calc(24px * var(--bnm-s)));
	width: 22px;
	height: 22px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px rgba(38, 20, 23, .28);
	opacity: 1;
	scale: 1;
	transition: background-color .3s ease, box-shadow .3s ease;
}
@media (hover: hover) {
	.bnm-diag--v2 .bnm-diag__tuile:hover {
		background: var(--bnm-taupe);
		box-shadow: none;
	}
	.bnm-diag--v2 .bnm-diag__tuile:hover::after { box-shadow: inset 0 0 0 1.5px var(--bnm-sombre); }
}
.bnm-diag--v2 .bnm-diag__tuile:has(input:checked) {
	background: var(--bnm-sombre);
	box-shadow: none;
}
.bnm-diag--v2 .bnm-diag__tuile:has(input:checked) .bnm-diag__icone {
	background: rgba(241, 235, 234, .12);
	color: var(--bnm-creme);
}
.bnm-diag--v2 .bnm-diag__tuile:has(input:checked)::after {
	background: var(--bnm-bleu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1EBEA' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
	box-shadow: none;
}
/* Réponses courtes (étape 4) : une ligne, le rond à droite. */
.bnm-diag--v2 .bnm-diag__tuiles--4 .bnm-diag__tuile {
	justify-content: center;
	min-height: max(56px, calc(84px * var(--bnm-s)));
	padding-block: max(12px, calc(18px * var(--bnm-s)));
}
.bnm-diag--v2 .bnm-diag__tuiles--4 .bnm-diag__tuile::after {
	top: 50%;
	translate: 0 -50%;
}

/* Chiffres : quatre cases, et le montant à emprunter en bandeau sombre. */
.bnm-diag--v2 .bnm-diag__chiffres {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: max(10px, calc(16px * var(--bnm-s)));
}
.bnm-diag--v2 .bnm-diag__chiffre {
	align-content: start;
	padding: max(14px, calc(22px * var(--bnm-s))) max(16px, calc(26px * var(--bnm-s))) max(8px, calc(12px * var(--bnm-s)));
	border-radius: max(10px, calc(16px * var(--bnm-s)));
	background: var(--bnm-creme-claire);
	cursor: text;
	transition: box-shadow .3s ease;
}
.bnm-diag--v2 .bnm-diag__chiffre:has(input:focus) { box-shadow: inset 0 0 0 1px var(--bnm-sombre); }
.bnm-diag--v2 .bnm-diag__champ {
	border-bottom: 0;
	font-size: max(24px, calc(44px * var(--bnm-s)));
}
.bnm-diag--v2 .bnm-diag__champ:has(input:focus) { box-shadow: none; }
.bnm-diag--v2 .bnm-diag__direct:not(:empty) {
	padding: max(16px, calc(26px * var(--bnm-s))) max(18px, calc(28px * var(--bnm-s)));
	border-radius: max(10px, calc(16px * var(--bnm-s)));
	background: var(--bnm-sombre);
	color: var(--bnm-creme);
}

/* Coordonnées : des champs pleins, comme les cases des chiffres. */
.bnm-diag--v2 .bnm-diag__coordonnees { gap: max(12px, calc(18px * var(--bnm-s))) max(12px, calc(18px * var(--bnm-s))); }
.bnm-diag--v2 .bnm-diag__coordonnees .bnm-diag__ligne { margin-top: 0; }
.bnm-diag--v2 .bnm-diag__ligne :is(input, textarea) {
	border-bottom: 0;
	border-radius: max(8px, calc(12px * var(--bnm-s)));
	background: var(--bnm-creme-claire);
}
.bnm-diag--v2 .bnm-diag__ligne :is(input, textarea):focus {
	background: var(--bnm-creme-claire);
	box-shadow: inset 0 0 0 1px var(--bnm-sombre);
}
.bnm-diag--v2 .bnm-diag__ligne .bnm-diag__etiquette { font-size: max(14px, calc(18px * var(--bnm-s))); }

/* Première lecture : la mensualité en case sombre, les trois autres chiffres en cases claires. */
.bnm-diag--v2 .bnm-diag__resultat { padding-bottom: var(--marge); }
.bnm-diag--v2 .bnm-diag__resultat > .bnm-diag__surtitre { padding-right: 48px; }
.bnm-diag--v2 .bnm-diag__res-titre {
	padding-right: 48px;
	font-size: max(24px, calc(44px * var(--bnm-s)));
}
.bnm-diag--v2 .bnm-diag__res-chiffres {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: max(10px, calc(16px * var(--bnm-s)));
	border: 0;
}
.bnm-diag--v2 .bnm-diag__res-chiffre,
.bnm-diag--v2 .bnm-diag__res-chiffre:first-child,
.bnm-diag--v2 .bnm-diag__res-chiffre:nth-child(n) {
	padding: max(16px, calc(26px * var(--bnm-s)));
	border: 0;
	border-radius: max(10px, calc(16px * var(--bnm-s)));
	background: var(--bnm-creme-claire);
}
.bnm-diag--v2 .bnm-diag__res-chiffre:first-child { background: var(--bnm-sombre); color: var(--bnm-creme); }
.bnm-diag--v2 .bnm-diag__res-chiffre:first-child span { color: rgba(241, 235, 234, .75); }
.bnm-diag--v2 .bnm-diag__envoi .bnm-diag__res-titre { padding-right: 0; font-size: max(20px, calc(34px * var(--bnm-s))); }

/* Volet clair étroit : deux colonnes, puis une ; pictogramme à gauche du libellé. */
@container (max-width: 640px) {
	.bnm-diag--v2 .bnm-diag__tuiles,
	.bnm-diag--v2 .bnm-diag__tuiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 460px) {
	.bnm-diag--v2 .bnm-diag__tuiles:not(.bnm-diag__tuiles--4),
	.bnm-diag--v2 .bnm-diag__coordonnees,
	.bnm-diag--v2 .bnm-diag__res-colonnes,
	.bnm-diag--v2 .bnm-diag__res-pages { grid-template-columns: minmax(0, 1fr); }
	.bnm-diag--v2 .bnm-diag__tuile:has(.bnm-diag__icone) {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 14px;
		align-items: center;
	}
	.bnm-diag--v2 .bnm-diag__tuile:has(.bnm-diag__icone) .bnm-diag__icone {
		grid-row: 1 / span 2;
		margin: 0;
	}
	.bnm-diag--v2 .bnm-diag__tuile:has(.bnm-diag__icone) :is(b, small) { grid-column: 2; }
	.bnm-diag--v2 .bnm-diag__tuile:has(.bnm-diag__icone) small { margin-top: 2px; }
	.bnm-diag--v2 .bnm-diag__tuile:has(.bnm-diag__icone)::after {
		top: 50%;
		translate: 0 -50%;
	}
}

/* Jusqu'à 960 px : le volet sombre devient une barre, « Étape n sur 5 » et un trait d'avancement. */
@media (max-width: 960px) {
	.bnm-diag.bnm-diag--v2[open] {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto minmax(0, 1fr);
	}
	.bnm-diag--v2 .bnm-diag__cote {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 14px 68px 17px max(16px, calc(var(--marge) * .85));
		background-position: 105% 40%;
		background-size: 520px auto;
	}
	.bnm-diag--v2 .bnm-diag__symbole { width: 38px; flex: none; }
	.bnm-diag--v2 .bnm-diag__cote :is(.bnm-diag__surtitre, .bnm-diag__pas, .bnm-diag__cote-note) { display: none; }
	.bnm-diag--v2 .bnm-diag__cote .bnm-diag__titre {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.bnm-diag--v2 .bnm-diag__cote .bnm-diag__pas-mobile {
		display: block;
		margin: 0;
		padding: 0;
		border: 0;
		color: var(--bnm-creme);
		font-size: 15px;
		line-height: 1.3;
	}
	.bnm-diag--v2 .bnm-diag__avance {
		display: block;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 3px;
		background: rgba(241, 235, 234, .16);
	}
	.bnm-diag--v2 .bnm-diag__avance::before {
		content: "";
		display: block;
		width: calc(var(--avance, 1) / 6 * 100%);
		height: 100%;
		background: var(--bnm-bleu);
		transition: width .6s var(--bnm-expo);
	}
	.bnm-diag.bnm-diag--v2 .bnm-diag__fermer {
		position: absolute;
		top: 9px;
		right: 10px;
		order: 0;
		margin: 0;
		background: transparent;
		color: var(--bnm-creme);
	}
	.bnm-diag.bnm-diag--v2 .bnm-diag__fermer:is(:hover, :focus) {
		background: rgba(241, 235, 234, .12);
		color: var(--bnm-creme);
	}
	.bnm-diag--v2 legend,
	.bnm-diag--v2 .bnm-diag__resultat > .bnm-diag__surtitre,
	.bnm-diag--v2 .bnm-diag__res-titre { padding-right: 0; }
	.bnm-diag--v2 .bnm-diag__corps { padding-top: max(24px, calc(var(--marge) * .8)); }
}
.bnm-diag--v2:has(.bnm-diag__pas li:nth-child(2).est-actif) { --avance: 2; }
.bnm-diag--v2:has(.bnm-diag__pas li:nth-child(3).est-actif) { --avance: 3; }
.bnm-diag--v2:has(.bnm-diag__pas li:nth-child(4).est-actif) { --avance: 4; }
.bnm-diag--v2:has(.bnm-diag__pas li:nth-child(5).est-actif) { --avance: 5; }
.bnm-diag--v2:has(.bnm-diag__pas li:nth-child(6).est-actif) { --avance: 6; }

@media (max-width: 767px) {
	.bnm-diag.bnm-diag--v2 {
		width: 100vw;
		height: 100dvh;
	}
	.bnm-diag--v2 .bnm-diag__corps { padding: 24px 20px 0; }
	.bnm-diag--v2 .bnm-diag__nav {
		margin-inline: -20px;
		padding: 12px 20px max(14px, env(safe-area-inset-bottom));
	}
	.bnm-diag--v2 .bnm-diag__chiffres { gap: 10px; }
}