/**
 * Styles de l'outil d'audit.
 *
 * Feuille autonome plutôt que des classes Tailwind : le build Tailwind du thème
 * ne scanne que le dossier du thème, donc toute classe utilisée ici serait
 * purgée. Les valeurs sont celles du design system webmate, reprises à
 * l'identique de build/tailwind.config.js.
 *
 * Mobile d'abord, et pas seulement en intention : le champ et le bouton sont
 * empilés par défaut et ne passent côte à côte qu'à partir de 40rem.
 */

.wma {
	--wma-brand: #FF5C1B;
	--wma-brand-fonce: #F04A0A;
	--wma-brand-clair: #FFF1EB;
	--wma-encre: #0B0B0B;
	--wma-encre-700: #2D2D2D;
	--wma-encre-500: #737373;
	--wma-encre-400: #9E9E9E;
	--wma-surface: #FAF7F0;
	--wma-surface-100: #F5F1EA;
	--wma-bord: #E8E2D5;
	--wma-blanc: #FFFFFF;
	--wma-bon: #10B981;
	--wma-moyen: #DBA617;
	--wma-faible: #D63638;
	--wma-rayon: 1.5rem;
	/* Le filigrane des numéros : assez présent pour se deviner, jamais assez
	   pour concurrencer le titre posé dessus. */
	--wma-filigrane: rgba(11, 11, 11, .07);
	--wma-ombre: 0 1px 3px rgba(11,11,11,.06), 0 12px 32px -16px rgba(11,11,11,.14);

	background: var(--wma-surface);
	color: var(--wma-encre);
	/* Aucun débordement horizontal, jamais : c'est le défaut mobile le plus
	   fréquent et le plus mal vécu. */
	overflow-x: hidden;
}

.wma *, .wma *::before, .wma *::after { box-sizing: border-box; }

.wma-conteneur {
	width: 100%;
	max-width: 46rem;
	margin: 0 auto;
	padding: 0 1.25rem;
}

/*
 * L'en-tête du thème est en `position: fixed` : sans ce dégagement, le premier
 * élément passe dessous. Les valeurs reprennent celles du thème
 * (pt-28 / sm:pt-32 / lg:pt-36), pour que la page ne soit pas cadrée
 * différemment du reste du site.
 */
.wma-ecran { display: none; padding: 7rem 0 4rem; }
.wma-ecran--actif { display: block; }

@media (min-width: 40rem) { .wma-ecran { padding: 8rem 0 5rem; } }
@media (min-width: 64rem) { .wma-ecran { padding: 9rem 0 6rem; } }

/* ------------------------------------------------------------------ Accueil */

.wma-hero { text-align: center; padding-top: 1rem; }

.wma-eyebrow {
	margin: 0 0 1.25rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wma-brand-fonce);
}

.wma-titre {
	margin: 0 0 1.25rem;
	font-size: clamp(2.1rem, 9vw, 3.75rem);
	line-height: 1.04;
	letter-spacing: -.02em;
	font-weight: 700;
}
.wma-accent { color: var(--wma-brand); }

.wma-titre-2 {
	margin: 0 0 1.5rem;
	font-size: clamp(1.6rem, 6vw, 2.4rem);
	line-height: 1.1;
	letter-spacing: -.015em;
	font-weight: 700;
}

.wma-sous-titre {
	margin: 0 auto 2.25rem;
	max-width: 34rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wma-encre-700);
}

/* -------------------------------------------------------------- Formulaire */

.wma-form { max-width: 34rem; margin: 0 auto; text-align: left; }

.wma-label {
	display: block;
	margin-bottom: .5rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wma-encre-500);
}
.wma-facultatif {
	letter-spacing: .04em;
	text-transform: none;
	font-weight: 500;
	color: var(--wma-encre-400);
}

/* Empilé par défaut. Le bouton pleine largeur sur mobile est plus facile à
   viser au pouce qu'un bouton collé à droite du champ. */
.wma-champ-ligne { display: flex; flex-direction: column; gap: .75rem; }

.wma-input {
	width: 100%;
	/* 1rem minimum : en dessous, Safari iOS zoome automatiquement sur le champ
	   au focus, et le visiteur se retrouve avec une page décalée. */
	font-size: 1.0625rem;
	font-family: inherit;
	color: var(--wma-encre);
	background: var(--wma-blanc);
	border: 1.5px solid var(--wma-bord);
	border-radius: .875rem;
	padding: 1rem 1.125rem;
	min-height: 3.5rem;
	transition: border-color .15s, box-shadow .15s;
	-webkit-appearance: none;
	appearance: none;
}
.wma-input::placeholder { color: var(--wma-encre-400); }
.wma-input:focus {
	outline: none;
	border-color: var(--wma-brand);
	box-shadow: 0 0 0 4px rgba(255,92,27,.14);
}
.wma-input[aria-invalid="true"] { border-color: var(--wma-faible); }

.wma-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 100%;
	/* 3.5rem : au-delà de la cible tactile confortable de 44 px. */
	min-height: 3.5rem;
	padding: 1rem 1.75rem;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--wma-blanc);
	background: var(--wma-brand-fonce);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 8px 24px -8px rgba(240,74,10,.55);
	transition: background-color .15s, transform .1s, box-shadow .15s;
	text-decoration: none;
	white-space: nowrap;
}
.wma-cta:hover { background: var(--wma-brand); }
.wma-cta:active { transform: translateY(1px); }
.wma-cta:focus-visible { outline: 3px solid var(--wma-encre); outline-offset: 3px; }
.wma-cta[disabled] { opacity: .6; cursor: progress; box-shadow: none; }
.wma-cta--large { width: 100%; }
.wma-cta-fleche { flex: none; }

.wma-cta-secondaire {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: .75rem 1.5rem;
	font-weight: 600;
	color: var(--wma-encre);
	text-decoration: none;
	border-radius: 999px;
	border: 1.5px solid var(--wma-bord);
	background: var(--wma-blanc);
}
.wma-cta-secondaire:hover { border-color: var(--wma-encre-400); }

.wma-erreur {
	margin: .75rem 0 0;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--wma-faible);
	font-weight: 500;
}

.wma-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem 1.25rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	font-size: .875rem;
	color: var(--wma-encre-500);
}
.wma-badges li { display: flex; align-items: center; gap: .4rem; }
.wma-badges li::before {
	content: "";
	width: .375rem; height: .375rem;
	border-radius: 50%;
	background: var(--wma-brand);
	flex: none;
}

@media (min-width: 40rem) {
	.wma-champ-ligne { flex-direction: row; align-items: stretch; }
	.wma-input { flex: 1 1 auto; }
	.wma-cta { width: auto; flex: none; }
	.wma-cta--large { width: auto; }
}

/* ------------------------------------------------- Salle d'attente (bandeau) */

/*
 * Le bandeau tient le visiteur au courant pendant qu'il remplit le formulaire.
 * Il ne fait que deux choses, et jamais les deux à la fois : dire que ça
 * travaille, ou dire que c'est prêt. Le passage de l'un à l'autre est le seul
 * mouvement de l'écran, donc il se remarque sans avoir à clignoter.
 */
.wma-etat {
	background: var(--wma-blanc);
	border: 1px solid var(--wma-bord);
	border-radius: var(--wma-rayon);
	padding: 1.75rem 1.25rem;
	text-align: center;
}
@media (min-width: 40rem) { .wma-etat { padding: 2rem; } }

.wma-etat-titre {
	margin: 0;
	font-family: "Clash Display", ui-sans-serif, system-ui, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}
@media (min-width: 40rem) { .wma-etat-titre { font-size: 1.5rem; } }

.wma-etat-texte {
	margin: .5rem 0 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wma-encre-500);
}

/* Le chargeur du bandeau : plus petit que celui de l'ancien écran plein, il
   accompagne le texte au lieu de le dominer. */
.wma-etat .wma-chargeur { width: 2rem; height: 2rem; margin: 0 auto 1rem; }
.wma-etat .wma-chargeur > span { border-width: 2px; }

.wma-etat .wma-phrase { margin-top: .75rem; font-size: .9375rem; }

/* L'annonce « prête » entre par le bas, une seule fois. */
.wma-js #wma-etat-prete { opacity: 0; }
#wma-etat-prete.wma-vu { animation: wma-monte .45s cubic-bezier(.16,.84,.44,1) both; }

/* -------------------------------------------------------------- Résultats */

.wma-resultat { text-align: center; }

.wma-score-valeur {
	font-size: clamp(4rem, 20vw, 6.5rem);
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
}
.wma-score-sur { font-size: 1.25rem; font-weight: 600; color: var(--wma-encre-400); }

.wma-cartes {
	display: grid;
	/* Trois catégories, trois colonnes, à toutes les tailles : sur deux
	   colonnes la troisième carte resterait seule sur sa ligne, et une carte
	   isolée se lit comme une erreur d'affichage. */
	grid-template-columns: repeat(3, 1fr);
	gap: .75rem;
	margin-bottom: 2rem;
}

.wma-carte {
	background: var(--wma-blanc);
	border: 1px solid var(--wma-bord);
	border-radius: 1.5rem;
	padding: 1.25rem .75rem;
	text-align: center;
	transition: border-color .3s;
}
.wma-carte:hover { border-color: var(--wma-brand); }
.wma-carte-note {
	display: block;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}
.wma-carte[data-niveau="bon"]    .wma-carte-note { color: var(--wma-bon); }
.wma-carte[data-niveau="moyen"]  .wma-carte-note { color: var(--wma-moyen); }
.wma-carte[data-niveau="faible"] .wma-carte-note { color: var(--wma-faible); }
.wma-carte[data-niveau="inconnu"] .wma-carte-note { color: var(--wma-encre-400); font-size: 1rem; }
.wma-carte-nom {
	display: block;
	margin-top: .3rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--wma-encre-500);
}

/* ------------------------------------------------------ Porte (formulaire) */

/*
 * La carte qui porte le formulaire. Elle ouvre l'écran d'attente : le
 * visiteur la voit dès la première seconde, pendant que l'analyse tourne.
 */
.wma-porte {
	margin-top: 1.25rem;
	background: var(--wma-blanc);
	border: 1px solid var(--wma-bord);
	border-radius: var(--wma-rayon);
	box-shadow: var(--wma-ombre);
	padding: 1.75rem 1.25rem;
}
@media (min-width: 40rem) { .wma-porte { padding: 2.25rem 2rem; } }

/* L'étiquette dit où en est le travail, en deux états seulement. */
.wma-porte-etiquette {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1rem;
	padding: .4rem .75rem .4rem .6rem;
	border: 1px solid var(--wma-bord);
	border-radius: 999px;
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wma-encre-500);
}
/* Le point bat tant que ça travaille, et se fige en vert quand c'est fini :
   deux états, lisibles sans lire. */
.wma-porte-point {
	width: .5rem; height: .5rem;
	border-radius: 2px;
	background: var(--wma-brand);
	transition: background-color .3s;
}
.wma-porte-etiquette[data-etat="encours"] .wma-porte-point { animation: wma-battement 1.4s ease-in-out infinite; }
.wma-porte-etiquette[data-etat="prete"] .wma-porte-point { background: var(--wma-bon); animation: none; }
@keyframes wma-battement { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
	.wma-porte-etiquette[data-etat="encours"] .wma-porte-point { animation: none; }
}

.wma-porte-titre {
	margin: 0 0 .6rem;
	font-family: "Clash Display", ui-sans-serif, system-ui, sans-serif;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.015em;
}
@media (min-width: 40rem) { .wma-porte-titre { font-size: 2rem; } }

.wma-porte-texte { margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.6; color: var(--wma-encre-700); }

/* La promesse de non-revente, sous le bouton et volontairement discrète :
   placée avant, elle installerait un doute que le visiteur n'avait pas. */
.wma-porte-promesse {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--wma-encre-400);
	text-align: center;
}

.wma-form-lead { display: flex; flex-direction: column; gap: 1.125rem; }
.wma-form-ligne { display: block; }

.wma-consentement {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--wma-encre-700);
	cursor: pointer;
}
.wma-consentement input {
	flex: none;
	width: 1.375rem; height: 1.375rem;
	margin: .0625rem 0 0;
	accent-color: var(--wma-brand-fonce);
	cursor: pointer;
}
.wma-consentement a { color: var(--wma-brand-fonce); }

/* ---------------------------------------------------------------- Rapport */

.wma-bloc { margin-bottom: 2.5rem; }
.wma-bloc-titre {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.25rem;
	font-family: "Clash Display", ui-sans-serif, system-ui, sans-serif;
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -.01em;
}
@media (min-width: 40rem) { .wma-bloc-titre { font-size: 1.75rem; } }
.wma-bloc-note { font-variant-numeric: tabular-nums; font-size: 1.5rem; }
.wma-bloc-note[data-niveau="bon"]     { color: var(--wma-bon); }
.wma-bloc-note[data-niveau="moyen"]   { color: var(--wma-moyen); }
.wma-bloc-note[data-niveau="faible"]  { color: var(--wma-faible); }
.wma-bloc-note[data-niveau="inconnu"] { color: var(--wma-encre-400); font-size: .9375rem; }

.wma-verdict {
	margin: 0 0 2rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wma-encre-700);
	text-align: center;
}

/*
 * Les actions prioritaires reprennent la charpente de la section « Les étapes »
 * de la page d'accueil : un gros numéro en filigrane derrière la carte, le
 * texte par-dessus. Les valeurs (rayon 1.5rem, 8rem puis 11rem, opacité 6 %,
 * décalage -0.5rem / -1rem) sont celles du thème, pour que les deux pages
 * soient reconnaissables comme une seule.
 *
 * `overflow: hidden` est ce qui fait tenir l'effet : le numéro déborde
 * volontairement de la carte et c'est le coin arrondi qui le recoupe.
 */
.wma-probleme {
	position: relative;
	overflow: hidden;
	background: var(--wma-blanc);
	border: 1px solid var(--wma-bord);
	border-radius: 1.5rem;
	padding: 2.5rem 1.5rem 1.75rem;
	margin-bottom: 1rem;
	transition: border-color .3s;
}
@media (min-width: 40rem) {
	/* Le texte se décale à droite pour laisser voir le numéro, comme le
	   `lg:pl-10` de la page d'accueil. Sur mobile il n'y a pas la place :
	   le numéro passe simplement derrière. */
	.wma-probleme { padding: 3.25rem 2rem 2.25rem 3rem; }
}
.wma-probleme:hover { border-color: var(--wma-brand); }

.wma-probleme-num {
	position: absolute;
	top: -1.75rem;
	left: -.75rem;
	font-family: "Clash Display", ui-sans-serif, system-ui, sans-serif;
	font-size: 9.5rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--wma-filigrane);
	/* Décoratif : il ne doit jamais intercepter un clic ni se retrouver dans
	   une copie de texte. */
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}
@media (min-width: 40rem) { .wma-probleme-num { font-size: 13rem; } }

/* Le contenu est positionné pour passer AU-DESSUS du numéro : sans cela, un
   élément absolu l'emporte sur ses voisins restés dans le flux. */
.wma-probleme-corps { position: relative; }
.wma-probleme-tete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-bottom: .6rem;
}
.wma-impact {
	font-size: .625rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .25rem .5rem;
	border-radius: .3rem;
}
.wma-impact[data-gravite="eleve"]  { background: #FDECEC; color: #A3211F; }
.wma-impact[data-gravite="moyen"]  { background: #FDF3DC; color: #8A5A00; }
.wma-impact[data-gravite="faible"] { background: var(--wma-surface-100); color: var(--wma-encre-500); }
.wma-probleme-cat { font-size: .75rem; color: var(--wma-encre-400); }

.wma-probleme-titre {
	margin: 0 0 .5rem;
	font-family: "Clash Display", ui-sans-serif, system-ui, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
}
@media (min-width: 40rem) { .wma-probleme-titre { font-size: 1.5rem; } }
.wma-probleme-mesure {
	margin: 0 0 .75rem;
	font-size: .875rem;
	color: var(--wma-encre-500);
	word-break: break-word;
}
.wma-probleme-mesure code {
	background: var(--wma-surface-100);
	padding: .1em .35em;
	border-radius: .25rem;
	font-size: .875em;
}
.wma-probleme-bloc { margin: 0 0 .6rem; font-size: .9375rem; line-height: 1.6; }
.wma-probleme-bloc:last-child { margin-bottom: 0; }
.wma-probleme-bloc strong { display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--wma-encre-400); margin-bottom: .2rem; }

.wma-ok {
	display: flex; align-items: center; gap: .5rem;
	font-size: .9375rem; color: var(--wma-encre-500);
	padding: .875rem 1.125rem;
	background: var(--wma-blanc);
	border: 1px solid var(--wma-bord);
	border-radius: .75rem;
}
.wma-indetermine {
	font-size: .8125rem;
	color: var(--wma-encre-400);
	margin: .6rem 0 0;
	line-height: 1.5;
}

.wma-final {
	margin-top: 1rem;
	background: var(--wma-encre);
	color: #F5F1EA;
	border-radius: var(--wma-rayon);
	padding: 2rem 1.25rem;
	text-align: center;
}
@media (min-width: 40rem) { .wma-final { padding: 2.75rem 2rem; } }
.wma-final-titre { margin: 0 0 .75rem; font-size: 1.625rem; font-weight: 700; line-height: 1.2; }
.wma-final-texte { margin: 0 auto 1.75rem; max-width: 28rem; font-size: 1rem; line-height: 1.6; color: #C9C9C9; }
.wma-final-actions { display: flex; flex-direction: column; align-items: center; gap: .875rem; }
@media (min-width: 40rem) { .wma-final-actions { flex-direction: row; justify-content: center; } }
.wma-final .wma-cta-secondaire { background: transparent; color: #F5F1EA; border-color: #2D2D2D; }
.wma-final .wma-cta-secondaire:hover { border-color: #9E9E9E; }

/* Thème sombre du site : on suit, sans jamais laisser un fond transparent. */
/*
 * Le sombre suit LA BASCULE DU SITE, pas la préférence du système.
 *
 * Le thème pose `class="dark"` sur `<html>` : au chargement depuis
 * `localStorage.wm-theme`, et à chaque clic sur le bouton lune/soleil. La
 * préférence système ne sert que de valeur par défaut, et c'est le thème qui
 * la lit — pas cette feuille.
 *
 * Écouter `prefers-color-scheme` ici était le défaut : un visiteur dont le
 * système est en sombre mais qui choisit le clair sur le site se retrouvait
 * avec une page d'audit sombre au milieu d'un site clair, et le bouton de
 * bascule n'avait aucun effet sur elle.
 */
.dark .wma {
	--wma-encre: #FAF7F0;
	--wma-encre-700: #C9C9C9;
	--wma-encre-500: #9E9E9E;
	--wma-encre-400: #737373;
	--wma-surface: #0B0B0B;
	--wma-surface-100: #1A1A1A;
	--wma-bord: #2D2D2D;
	--wma-blanc: #141414;
	--wma-brand-clair: #2A1408;
	--wma-filigrane: rgba(250, 247, 240, .07);
}
.dark .wma-final { background: #1A1A1A; }


/* ══════════════════════════════════════════════════════════ Animations
 *
 * Trois règles que je me suis données :
 *  - rien qui retarde une action. Une animation qui empêche de cliquer est un
 *    défaut, pas une finition.
 *  - les entrées sont décalées de quelques dizaines de millisecondes : l'œil
 *    suit une séquence, pas un bloc qui apparaît d'un coup.
 *  - tout s'annule sous `prefers-reduced-motion`. Ce n'est pas une option de
 *    confort : les animations déclenchent des malaises chez certaines
 *    personnes, et le parcours doit rester entier sans elles.
 */

@keyframes wma-monte {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes wma-apparait {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes wma-surgit {
	0%   { opacity: 0; transform: scale(.94) translateY(10px); }
	60%  { opacity: 1; transform: scale(1.015) translateY(0); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes wma-glisse {
	from { opacity: 0; transform: translateX(-14px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes wma-halo {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,92,27,.35); }
	50%      { box-shadow: 0 0 0 12px rgba(255,92,27,0); }
}

/* Élément à révéler : invisible tant que le script ne l'a pas activé. */
.wma-js [data-reveal] { opacity: 0; }
[data-reveal].wma-vu {
	animation: wma-monte .58s cubic-bezier(.16,.84,.44,1) both;
	animation-delay: var(--wma-retard, 0ms);
}

.wma-ecran--actif { animation: wma-apparait .3s ease both; }

/* --------------------------------------------------- Étapes de l'analyse */


/* ------------------------------------------------------- Anneau du score */

.wma-anneau {
	position: relative;
	display: block;
	width: 13.5rem;
	height: 13.5rem;
	margin: 0 auto 1.75rem;
}
@media (min-width: 40rem) { .wma-anneau { width: 15.5rem; height: 15.5rem; } }

.wma-anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wma-anneau-fond { fill: none; stroke: var(--wma-bord); stroke-width: 7; }
.wma-anneau-jauge {
	fill: none;
	stroke-width: 7;
	stroke-linecap: round;
	stroke: var(--wma-encre-400);
	/* Le tracé est piloté par le script, en même temps que le compteur :
	   l'anneau et le chiffre arrivent ensemble à destination. */
	transition: stroke .4s ease;
}
.wma-anneau[data-niveau="bon"]    .wma-anneau-jauge { stroke: var(--wma-bon); }
.wma-anneau[data-niveau="moyen"]  .wma-anneau-jauge { stroke: var(--wma-moyen); }
.wma-anneau[data-niveau="faible"] .wma-anneau-jauge { stroke: var(--wma-faible); }

.wma-anneau-centre {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .1rem;
}
.wma-anneau .wma-score-valeur {
	font-size: clamp(3.25rem, 14vw, 4.5rem);
	line-height: 1;
}
.wma-anneau .wma-score-sur { font-size: .95rem; }

/* Les cartes de catégorie surgissent l'une après l'autre. */
.wma-js .wma-carte { opacity: 0; }
.wma-carte.wma-vu {
	animation: wma-surgit .46s cubic-bezier(.16,.84,.44,1) both;
	animation-delay: var(--wma-retard, 0ms);
}


.wma-js .wma-porte { opacity: 0; }
.wma-porte.wma-vu { animation: wma-monte .6s cubic-bezier(.16,.84,.44,1) both; animation-delay: 120ms; }

/* Le bouton principal respire tant qu'on ne l'a pas touché : c'est le seul
   élément de la page qui attire volontairement l'œil. */
.wma-cta--pulse { animation: wma-halo 2.6s ease-out infinite; }
.wma-cta--pulse:hover, .wma-cta--pulse:focus-visible { animation: none; }

/* Les problèmes du rapport se révèlent à l'approche, pas tous d'un coup. */
.wma-js .wma-probleme { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(.16,.84,.44,1); }
.wma-probleme.wma-vu { opacity: 1; transform: translateY(0); }

.wma-js .wma-bloc { opacity: 0; }
.wma-bloc.wma-vu { animation: wma-monte .5s cubic-bezier(.16,.84,.44,1) both; }

@media (prefers-reduced-motion: reduce) {
	[data-reveal], [data-reveal].wma-vu,
	.wma-carte, .wma-carte.wma-vu,
	.wma-porte, .wma-bloc,
	.wma-ecran--actif,
	#wma-etat-prete, #wma-etat-prete.wma-vu {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
	.wma-js .wma-probleme { opacity: 1 !important; transform: none !important; transition: none; }
	.wma-cta--pulse { animation: none; }
	.wma-anneau-jauge { transition: none; }
}

/* ------------------------------------------------- Phrase de chargement */

.wma-phrase {
	min-height: 1.6em;
	margin: 1.25rem 0 0;
	font-size: 1rem;
	color: var(--wma-encre-500);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .26s ease, transform .26s ease;
}
.wma-phrase--visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.wma-phrase { transition: none; transform: none; }
}

/* --------------------------------------------------------- Constat */

/* La phrase qui nomme le déséquilibre. En couleur de marque et en gras :
   c'est elle qu'on lit avant tout le reste du rapport. */
.wma-constat {
	max-width: 34rem;
	margin: 0 auto 1rem;
	font-size: clamp(1.25rem, 4.5vw, 1.6rem);
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -.015em;
	color: var(--wma-brand);
}

/* ----------------------------------------------------- Points forts */

.wma-forts { margin: 0; padding: 0; list-style: none; }
.wma-forts li {
	position: relative;
	margin-bottom: .625rem;
	padding: 1rem 1.25rem 1rem 2.75rem;
	background: var(--wma-blanc);
	border: 1px solid var(--wma-bord);
	/* Un liseré vert à gauche, en écho au liseré orange des problèmes :
	   on distingue les deux blocs d'un coup d'œil, sans lire. */
	border-left: 3px solid var(--wma-bon);
	border-radius: 1.5rem;
	font-size: .9375rem;
	line-height: 1.55;
}
.wma-forts li::before {
	content: "";
	position: absolute;
	left: 1.25rem; top: 1.3rem;
	width: .375rem; height: .6875rem;
	border: solid var(--wma-bon);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Note d'attente de l'étape longue. */
.wma-note--visible { opacity: 1; }


/* ------------------------------------------------------------- Chargeur */

/*
 * Un seul anneau, à la place de la liste d'étapes.
 *
 * La liste montrait cinq coches vertes et une étape qui tournait seule
 * pendant quinze secondes : le regard se fixait sur celle qui ne bougeait
 * pas. Un anneau continu ne promet pas d'avancement par paliers, et les
 * phrases au-dessus disent ce qui se passe.
 */
.wma-chargeur {
	width: 3rem;
	height: 3rem;
	margin: 2.5rem auto 0;
}
.wma-chargeur > span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 3px solid var(--wma-bord);
	border-top-color: var(--wma-brand);
	animation: wma-tourne .75s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
	.wma-chargeur > span { animation-duration: 2.4s; }
}

/* La phrase passe au-dessus de l'anneau et devient l'élément principal. */

/* --------------------------------------------------- Rapport de référence */
/*
 * Le rapport de référence s'affiche dès l'envoi du formulaire, avec la vraie
 * note, sans attendre la reformulation. Ce bandeau dit que la version rédigée
 * arrive ; elle remplace le contenu en place, sans nouvelle attente.
 */
.wma-rapport-attente {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	margin: 0 0 1.75rem;
	font-size: .875rem;
	color: var(--wma-encre-400);
}
.wma-rapport-attente::before {
	content: "";
	width: .8rem;
	height: .8rem;
	flex: none;
	border-radius: 50%;
	border: 2px solid var(--wma-bord);
	border-top-color: var(--wma-brand);
	animation: wma-rapport-tourne .75s linear infinite;
}
@keyframes wma-rapport-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.wma-rapport-attente::before { animation-duration: 2.4s; }
}
.wma-rapport-erreur { margin: 0 0 1.5rem; }