/* ============================================================
   LIVRE BLANC (/livre-blanc) — l'intro, le sommaire et la carte formulaire.

   Le chrome vient de `v2.css` (`pricing-page-*`, `btn-*`, `eyebrow`,
   `price-kicker`) et le socle de `subpage.css` (`sub-section`, `sub-title`,
   `sub-tile`, `sub-cards`, `sub-actions`). Ici : la grille du hero et le
   formulaire, que cette page est seule à porter.

   Le formulaire ne réutilise pas `.module-configurator-field` : ces règles sont
   écrites pour une modale à défilement, pas pour une carte posée dans un hero.
   Elles partagent en revanche la même mécanique d'erreur
   (`aria-invalid` + `[role="alert"][hidden]`), pour que les deux formulaires
   publics se comportent pareil.
   ============================================================ */

.lb-hero { padding-block-end: clamp(56px, 8vw, 96px); }
.lb-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: start;
	gap: clamp(28px, 5vw, 72px);
}
.lb-intro .lead { max-width: 54ch; }

/* ---------- Sommaire ---------- */
.lb-toc {
	display: grid;
	gap: 10px;
	margin-top: 26px;
	padding: 0;
	list-style: none;
}
.lb-toc li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	color: var(--ink-d);
	font-size: 14.5px;
	line-height: 1.55;
}
.lb-toc svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	color: var(--brand-violet);
}
.lb-meta {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 24px;
	color: var(--muted-d);
	font-size: 13px;
}
.lb-meta svg { width: 16px; height: 16px; color: var(--brand-violet); }

/* ---------- La carte ---------- */
.lb-card {
	position: relative;
	padding: 30px 28px;
	border: 1px solid var(--line-d);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 34px 80px -50px rgba(7, 25, 87, .5);
}
.lb-card-title { color: var(--brand-navy); font-size: clamp(20px, 2vw, 25px); line-height: 1.2; }
.lb-card-sub { margin-top: 8px; color: var(--muted-d); font-size: 14px; line-height: 1.6; }

/* `[hidden]` doit gagner : une règle `display` sur le formulaire écrase
   l'attribut, et l'état de succès se superpose alors au formulaire. */
.lb-form[hidden] { display: none; }
.lb-form label {
	display: block;
	margin-top: 18px;
	margin-bottom: 6px;
	color: var(--brand-navy);
	font-size: 12.5px;
	font-weight: 600;
}
.lb-form input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line-d);
	border-radius: 12px;
	background: #fff;
	color: var(--ink-d);
	font: inherit;
	font-size: 14.5px;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.lb-form input:focus-visible {
	outline: none;
	border-color: var(--brand-violet);
	box-shadow: 0 0 0 3px rgba(74, 31, 168, .16);
}
.lb-form input[aria-invalid="true"] { border-color: var(--brand-red); }
.lb-error { margin-top: 6px; color: var(--brand-red); font-size: 11.5px; }
.lb-error[hidden] { display: none; }

.lb-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 18px;
	color: var(--muted-d);
	font-size: 13px;
	line-height: 1.45;
	cursor: pointer;
}
.lb-consent input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--brand-violet); }

.lb-submit { width: 100%; justify-content: center; margin-top: 24px; }
.lb-submit:disabled { cursor: progress; opacity: .72; }
.lb-privacy {
	margin-top: 14px;
	color: var(--muted-d);
	font-size: 11.5px;
	line-height: 1.5;
}
.lb-privacy a { color: var(--brand-violet); text-decoration: underline; text-underline-offset: 2px; }
.lb-failure {
	margin-top: 14px;
	padding: 12px 14px;
	border: 1px solid rgba(205, 34, 59, .3);
	border-radius: 12px;
	color: var(--brand-red);
	font-size: 13px;
	line-height: 1.5;
}
.lb-failure[hidden] { display: none; }

/* ---------- Succès ----------
   `[hidden]` porte la visibilité : sans JavaScript, la page ne doit pas
   annoncer un bouton de téléchargement qui n'arrivera jamais. */
.lb-done[hidden] { display: none; }
.lb-done { text-align: start; }
.lb-done-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: 14px;
	background: rgba(52, 211, 153, .16);
	color: #0f8b62;
}
.lb-done-icon svg { width: 23px; height: 23px; }
.lb-download { width: 100%; justify-content: center; margin-top: 22px; }
.lb-expiry { margin-top: 12px; color: var(--muted-d); font-size: 12px; }

/* ---------- Adaptatif ---------- */
@media (max-width: 980px) {
	.lb-grid { grid-template-columns: 1fr; }
	.lb-card { margin-top: 8px; }
}
@media (max-width: 560px) {
	.lb-card { padding: 24px 20px; }
}