/*
 * Diagnostic — accordéon à stepper latéral.
 *
 * Cette feuille ne charge que sur la page qui porte le diagnostic, et elle
 * consomme les jetons du thème : aucune couleur, aucune taille n'est redéclarée
 * ici. Les trois règles absolues valent ici comme partout — `border-radius: 0`,
 * filets de 1 px, aucune ombre portée.
 *
 * L'ÉTAT PAR DÉFAUT EST « TOUT VISIBLE ». Le repliement est enfermé dans
 * `.au-diag--interactif`, classe posée par le script. Sans script, le parcours
 * est un formulaire long et complet — jamais un formulaire tronqué.
 */

/* ── Disposition ────────────────────────────────────────────────────────── */

.au-diag__forme {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

/* Le stepper reste visible pendant que l'on répond : c'est ce qui donne au
   parcours l'allure d'un diagnostic plutôt que celle d'un tunnel. */
.au-diag__stepper {
	position: sticky;
	top: 96px;
}

@media (max-width: 900px) {
	.au-diag__forme {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--50);
	}

	/* En mobile, le stepper devient un bandeau qui défile horizontalement — il ne
	   doit jamais élargir la page. */
	.au-diag__stepper {
		position: static;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.au-diag__stepper::-webkit-scrollbar { display: none; }

	.au-diag__stepper-liste {
		display: flex;
		gap: var(--wp--preset--spacing--30);
	}

	.au-diag__pas { flex: 0 0 auto; }
	.au-diag__pas-mesure { display: none; }
}

/* ── Stepper ────────────────────────────────────────────────────────────── */

.au-diag__stepper-liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
	counter-reset: none;
}

.au-diag__pas + .au-diag__pas {
	border-top: 1px solid var(--au-filet);
}

.au-diag__pas-bouton {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	width: 100%;
	padding: var(--wp--preset--spacing--30) 0;
	background: transparent;
	border: none;
	/* Le filet de gauche marque l'étape courante : c'est le seul relief
	   disponible sans ombre. */
	border-left: 2px solid transparent;
	padding-left: var(--wp--preset--spacing--30);
	color: var(--au-texte-doux);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--petit);
	text-align: left;
	cursor: pointer;
}

.au-diag__pas-bouton[disabled] {
	cursor: default;
	opacity: 0.55;
}

.au-diag__pas--courant .au-diag__pas-bouton {
	border-left-color: var(--au-accent);
	color: var(--au-texte);
}

.au-diag__pas-numero {
	font-family: var(--wp--preset--font-family--titre);
	color: var(--au-accent);
	letter-spacing: 0.08em;
	flex: none;
}

/* Une étape franchie porte une coche : le numéro a fait son travail. */
.au-diag__pas--complet .au-diag__pas-numero::before {
	content: "✓ ";
}

.au-diag__pas-corps {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.au-diag__pas-libelle {
	font-weight: 600;
	letter-spacing: 0.02em;
}

.au-diag__pas-mesure {
	color: var(--au-texte-doux);
	font-size: 0.8125rem;
	line-height: 1.4;
}

.au-diag__pas-score {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid var(--au-filet);
	color: var(--au-accent);
	font-family: var(--wp--preset--font-family--titre);
}

/* ── Étapes ─────────────────────────────────────────────────────────────── */

.au-diag__etape {
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--au-filet);
	min-width: 0;
}

/* Hors mode interactif, les étapes s'empilent, séparées par un espace. */
.au-diag__etape + .au-diag__etape {
	margin-top: var(--wp--preset--spacing--50);
}

.au-diag--interactif .au-diag__etape + .au-diag__etape {
	margin-top: 0;
}

.au-diag--interactif .au-diag__etape--ouverte {
	border-color: var(--au-accent);
}

.au-diag__legende {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--wp--preset--spacing--30);
	padding: 0;
	margin-bottom: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h4);
	color: var(--au-texte);
}

.au-diag__legende:focus-visible {
	outline: 2px solid var(--au-accent);
	outline-offset: 4px;
}

.au-diag__legende-rang {
	color: var(--au-accent);
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: 0.12em;
}

.au-diag__mesure {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--au-filet);
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	max-width: 62ch;
}

/* ── Questions ──────────────────────────────────────────────────────────── */

.au-diag__question + .au-diag__question {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--au-filet);
}

.au-diag__enonce {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--h6);
	line-height: 1.5;
	max-width: 62ch;
}

.au-diag__reponses {
	display: grid;
	gap: 0;
}

/* Chaque réponse est une cible pleine largeur : au pouce, viser un bouton radio
   de 20 px est un abandon en puissance. La hauteur minimale de 48 px est celle
   du design system. */
.au-diag__reponse {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	min-height: 48px;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--au-filet);
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}

.au-diag__reponse + .au-diag__reponse {
	border-top: none;
}

.au-diag__reponse:hover {
	border-color: var(--au-accent);
}

.au-diag__reponse:has(input:checked) {
	border-color: var(--au-accent);
	background: var(--au-fond-alt);
}

/* Le filet de gauche épaissi remplace l'aplat de couleur d'un état sélectionné :
   visible, sobre, et compatible avec « aucune ombre ». */
.au-diag__reponse:has(input:checked) {
	border-left-width: 3px;
}

.au-diag__reponse:has(input:focus-visible) {
	outline: 2px solid var(--au-accent);
	outline-offset: -1px;
}

.au-diag__reponse input {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--au-accent);
}

.au-diag__reponse-texte {
	line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
	.au-diag__reponse { transition: none; }
}

/* ── Navigation ─────────────────────────────────────────────────────────── */

.au-diag__navigation {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--au-filet);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.au-diag__suivant,
.au-diag__envoyer {
	min-height: 48px;
	border: 1px solid var(--au-accent);
	font-family: inherit;
	cursor: pointer;
}

/* Le bouton inerte reste LISIBLE : grisé au point d'être illisible, il ne dit
   plus ce qu'il attend. */
.au-diag__suivant[disabled] {
	background: transparent;
	color: var(--au-texte-doux);
	border-color: var(--au-filet);
	cursor: not-allowed;
}

/* Hors mode interactif, il n'y a rien à naviguer : un seul envoi. */
.au-diag:not(.au-diag--interactif) .au-diag__suivant {
	display: none;
}

.au-diag__mention {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding-left: var(--wp--preset--spacing--30);
	border-left: 1px solid var(--au-accent);
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	max-width: 62ch;
}

/* ── Restitution ────────────────────────────────────────────────────────── */

.au-diag--restitution {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.au-diag__titre {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--h3);
}

.au-diag__scores {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
	border-top: 1px solid var(--au-filet);
}

.au-diag__score {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"axe valeur"
		"jauge jauge"
		"niveau niveau";
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	align-items: baseline;
	padding: var(--wp--preset--spacing--40) 0;
	border-bottom: 1px solid var(--au-filet);
}

.au-diag__score-axe {
	grid-area: axe;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h5);
}

.au-diag__score-valeur {
	grid-area: valeur;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h3);
	color: var(--au-accent);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.au-diag__score-sur {
	font-size: var(--wp--preset--font-size--petit);
	color: var(--au-texte-doux);
}

.au-diag__jauge {
	grid-area: jauge;
	display: block;
	height: 3px;
	background: var(--au-filet);
}

.au-diag__jauge-part {
	display: block;
	height: 100%;
	background: var(--au-accent);
}

.au-diag__score-niveau {
	grid-area: niveau;
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* L'axe le plus faible est le goulot : c'est lui qu'on doit voir en premier. */
.au-diag__score--faible {
	padding-left: var(--wp--preset--spacing--30);
	border-left: 3px solid var(--au-accent);
}

.au-diag__goulot {
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--au-accent);
	max-width: 68ch;
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h5);
	line-height: 1.5;
}

/* --- Recommandations ---------------------------------------------------- */

.au-diag__recos {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.au-diag__reco {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--au-filet);
}

.au-diag__reco-rang {
	font-family: var(--wp--preset--font-family--titre);
	font-size: var(--wp--preset--font-size--h4);
	color: var(--au-accent);
	line-height: 1;
}

.au-diag__reco-titre {
	grid-column: 2;
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--h5);
}

.au-diag__reco-texte {
	grid-column: 2;
	margin: 0;
	color: var(--au-texte-doux);
	max-width: 62ch;
	line-height: 1.6;
}

/* --- Projection --------------------------------------------------------- */

.au-diag__projection {
	padding: var(--wp--preset--spacing--50);
	border: 1px solid var(--au-filet);
	max-width: 68ch;
}

.au-diag__montant {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-size: clamp(2rem, 3vw + 1rem, 3.25rem);
	color: var(--au-accent);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* Les hypothèses sont À CÔTÉ du chiffre, jamais en note de bas de page : c'est
   ce qui distingue un argument d'une publicité. Le filet les rattache
   visuellement au montant. */
.au-diag__hypotheses {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--au-filet);
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	line-height: 1.6;
}

.au-diag__passerelle {
	margin-block-start: 0;
}

/* ── Étape de coordonnées ───────────────────────────────────────────────────
 *
 * Les champs héritent du thème par `.au-formulaire__champ` : rien n'est
 * redéclaré ici, sinon les deux formulaires du site divergeraient au premier
 * ajustement.
 * ------------------------------------------------------------------------ */

/* Les champs occupent TOUTE la largeur de l'étape, en deux colonnes. La version
   précédente les bornait à 520 px : sur une étape qui fait elle-même la largeur
   du parcours, cela laissait la moitié droite vide, et la dernière étape se
   lisait comme un formulaire tronqué juste avant l'envoi — le pire endroit. */
.au-diag__coordonnees {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: var(--wp--preset--spacing--40);
}

.au-diag__etape--coordonnees .au-formulaire__champ {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	align-content: start;
}

/* La case de consentement et la mention courent sous les deux colonnes : elles
   se lisent en pleine largeur, pas en colonne étroite. */
.au-diag__etape--coordonnees .au-formulaire__champ--case {
	grid-column: 1 / -1;
	margin-top: var(--wp--preset--spacing--30);
	max-width: 72ch;
}

.au-diag__etape--coordonnees .au-diag__mention {
	max-width: 78ch;
}

/* La mention sous le bouton inerte. Un bouton inactif sans explication est une
   impasse ; avec elle, c'est une consigne. */
.au-diag__attente {
	margin: 0;
	align-self: center;
	color: var(--au-texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	max-width: 46ch;
}

.au-diag__envoyer[disabled] {
	background: transparent;
	color: var(--au-texte-doux);
	border-color: var(--au-filet);
	cursor: not-allowed;
}