/* Auto-evaluation. Scope sous .ae, s'appuie sur les tokens de formation-page.css. */

.ae { background: var(--fp-beige); padding-block: clamp(48px, 7vw, 96px); }
.ae__inner {
	max-width: 1280px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 40px);
	display: grid; gap: clamp(28px, 4vw, 56px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	align-items: start;
}
.ae__intro { display: flex; flex-direction: column; gap: 12px; }
.ae__eyebrow {
	display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 13px;
	letter-spacing: .12em; text-transform: uppercase; color: #9A7240;
}
.ae__eyebrow::before { content: ''; width: 36px; height: 2px; background: var(--fp-brown); flex-shrink: 0; }
.ae h2 { margin: 0; font-family: var(--fp-display); font-weight: 500; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.15; color: var(--fp-ink); }
.ae__regle {
	border-left: 3px solid var(--fp-green); padding-left: 14px; margin: 6px 0 0;
	font-size: 15px; line-height: 23px; color: var(--fp-ink-2);
}
.ae__detail { display: block; font-size: 13px; line-height: 19px; color: var(--fp-ink-2); }

.ae__outil { display: flex; flex-direction: column; gap: 20px; }
.ae__form { display: flex; flex-direction: column; gap: 18px; background: #fff; padding: clamp(20px, 3vw, 28px); box-shadow: 0 0 10px rgba(0,0,0,.08); }
.ae__champ { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ae__champ legend {
	float: none; width: auto; margin: 0 0 4px; padding: 0;
	font-weight: 500; font-size: 15px; line-height: 22px; color: var(--fp-ink);
}
.ae__option, .ae__case {
	display: flex; gap: 12px; align-items: flex-start; margin: 0; cursor: pointer;
	padding: 10px 12px; border: 1px solid var(--fp-rule); background: #fff;
	min-height: 44px; font-size: 15px; line-height: 22px; transition: all .3s ease-in-out;
}
.ae__option:hover, .ae__case:hover { background: var(--fp-beige); }
.ae__option input, .ae__case input { margin-top: 4px; flex-shrink: 0; }
.ae__option b, .ae__case b { font-weight: 500; }

.ae__resultat { background: #fff; padding: clamp(20px, 3vw, 28px); box-shadow: 0 0 10px rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 12px; }
.ae__modules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ae__modules li {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px;
	padding: 12px 0; border-top: 1px solid var(--fp-rule);
}
.ae__module-nom { font-weight: 500; font-size: 15px; }
.ae__module-etat { font-size: 14px; color: var(--fp-ink-2); text-align: right; }
.ae__modules li[data-etat="dispense"] .ae__module-etat { color: var(--fp-green-dark); font-weight: 500; }
.ae__modules li[data-etat="entretien"] .ae__module-etat { color: #9A7240; font-weight: 500; }
.ae__plancher { margin: 6px 0 0; font-size: 14px; line-height: 21px; color: var(--fp-ink); font-weight: 500; }
.ae__mention { margin: 0; font-size: 13px; line-height: 19px; color: var(--fp-meta); }

/* Tableau des equivalences : defilement horizontal plutot que debordement. */
.dn-tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dn-tableau table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.dn-tableau caption { caption-side: bottom; padding-top: 10px; text-align: left; }
.dn-tableau th, .dn-tableau td { padding: 10px 12px; border-bottom: 1px solid var(--fp-rule); text-align: left; vertical-align: top; }
.dn-tableau thead th { font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fp-ink-2); border-bottom-width: 2px; }
.dn-tableau tbody th { font-weight: 500; color: var(--fp-green-dark); white-space: nowrap; }