/* Learning AI — MVP UI v2 (mobile-first, Duolingo-ish accents) */

.learning-ai-site-main {
	padding-bottom: 2rem;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.learning-ai {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	max-width: 42rem;
	margin: 0 auto;
	padding: 1rem 1rem 3rem;
	color: #1a1a2e;
	line-height: 1.45;
	box-sizing: border-box;
}

.learning-ai * {
	box-sizing: border-box;
}

/* Toast */
.learning-ai-toast {
	position: fixed;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	max-width: min(90vw, 24rem);
	padding: 0.65rem 1rem;
	background: #1a1a2e;
	color: #fff;
	border-radius: 12px;
	font-size: 0.875rem;
	font-weight: 600;
	z-index: 100000;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Hero */
.learning-ai-eyebrow {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #1cb0f6;
	margin: 0 0 0.35rem;
}

.learning-ai-title {
	font-size: 1.5rem;
	margin: 0 0 0.35rem;
	font-weight: 800;
	line-height: 1.2;
}

.learning-ai-tagline {
	margin: 0 0 0.5rem;
	color: #5c5c6d;
	font-size: 0.95rem;
}

.learning-ai-state-line {
	margin: 0;
	min-height: 1.25rem;
	font-size: 0.85rem;
	color: #304a70;
	font-weight: 600;
}

.learning-ai-lead {
	font-size: 1.05rem;
}

/* Skeleton */
.learning-ai-skeleton {
	margin: 1rem 0;
	padding: 1rem;
	background: #f0f1f3;
	border-radius: 12px;
}

.learning-ai-skeleton__bar {
	height: 12px;
	background: linear-gradient(90deg, #e2e4e8 25%, #f5f6f8 50%, #e2e4e8 75%);
	background-size: 200% 100%;
	animation: learning-ai-shimmer 1.2s ease-in-out infinite;
	border-radius: 6px;
	margin-bottom: 10px;
}

.learning-ai-skeleton__bar--short {
	width: 55%;
}

@keyframes learning-ai-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Cards */
.learning-ai-card {
	margin-top: 1rem;
	padding: 1rem 1.1rem;
	background: #fff;
	border: 1px solid #e8eaed;
	border-radius: 16px;
	box-shadow: 0 2px 8px rgba(26, 26, 46, 0.06);
}

.learning-ai-card-title {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
	font-weight: 800;
}

.learning-ai-label {
	display: block;
	font-weight: 700;
	font-size: 0.8rem;
	margin: 0.5rem 0 0.35rem;
	color: #3d3d4f;
}

.learning-ai-muted {
	color: #6b6b7b;
	font-size: 0.9rem;
	margin: 0.35rem 0;
}

/* Progress */
.learning-ai-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}

.learning-ai-pill {
	display: inline-block;
	padding: 0.35rem 0.65rem;
	background: #eef9e6;
	color: #2d5016;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
}

.learning-ai-list {
	margin: 0.25rem 0 0;
	padding-left: 1.2rem;
	font-size: 0.9rem;
}

.learning-ai-details {
	margin-top: 0.5rem;
}

.learning-ai-details summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 0.9rem;
	color: #1cb0f6;
}

.learning-ai-details-body {
	margin-top: 0.5rem;
}

.learning-ai-pref-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: flex-end;
	margin-top: 0.35rem;
}

.learning-ai-pref-row select {
	padding: 0.45rem 0.5rem;
	border: 2px solid #e5e5e5;
	border-radius: 10px;
	font-size: 0.85rem;
	background: #fff;
	max-width: 100%;
}

.learning-ai-details--inline {
	margin-top: 0.75rem;
}

/* Input */
#learning-ai-topic {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 2px solid #e5e5e5;
	border-radius: 12px;
	font-size: 1rem;
	transition: border-color 0.15s;
}

#learning-ai-topic:focus {
	outline: none;
	border-color: #1cb0f6;
}

.learning-ai-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: flex-end;
}

.learning-ai-row--split {
	justify-content: space-between;
	align-items: flex-end;
}

.learning-ai-row--wrap {
	margin-top: 0.75rem;
	gap: 0.5rem;
}

.learning-ai-field {
	flex: 1 1 140px;
	min-width: 0;
}

#learning-ai-mode {
	width: 100%;
	padding: 0.55rem 0.65rem;
	border: 2px solid #e5e5e5;
	border-radius: 12px;
	font-size: 0.9rem;
	background: #fff;
}

/* Buttons */
.learning-ai-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.1rem;
	border: none;
	border-radius: 999px;
	font-weight: 800;
	font-size: 0.88rem;
	cursor: pointer;
	transition: transform 0.08s, box-shadow 0.08s;
	font-family: inherit;
}

.learning-ai-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.learning-ai-btn--primary {
	background: #58cc02;
	color: #fff;
	box-shadow: 0 4px 0 #46a302;
}

.learning-ai-btn--primary:active:not(:disabled) {
	transform: translateY(2px);
	box-shadow: 0 2px 0 #46a302;
}

.learning-ai-btn--secondary {
	background: #1cb0f6;
	color: #fff;
	box-shadow: 0 4px 0 #1899d6;
}

.learning-ai-btn--secondary:active:not(:disabled) {
	transform: translateY(2px);
	box-shadow: 0 2px 0 #1899d6;
}

.learning-ai-btn--ghost {
	background: #fff;
	color: #1cb0f6;
	border: 2px solid #e5e5e5;
	box-shadow: none;
}

/* Lesson */
.learning-ai-prose {
	font-size: 0.95rem;
	margin-bottom: 0.75rem;
}

.learning-ai-section {
	margin-top: 0.85rem;
}

.learning-ai-section-title {
	display: block;
	margin-bottom: 0.35rem;
}

.learning-ai-graph-out {
	margin-top: 0.75rem;
	font-size: 0.9rem;
}

.learning-ai-graph-visual {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #c5d4e8;
	background: #0f172a;
	line-height: 0;
}

.learning-ai-concept-svg-wrap {
	width: 100%;
	overflow: auto;
	max-height: min(520px, 70vh);
}

.learning-ai-concept-svg-wrap .learning-ai-concept-svg {
	display: block;
	width: 100%;
	height: auto;
}

.learning-ai-graph-dl {
	margin: 0;
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
	background: rgba(255, 255, 255, 0.06);
	line-height: 1.4;
}

.learning-ai-graph-dl-link {
	color: #2563eb;
	font-weight: 600;
}

.learning-ai-graph-loading,
.learning-ai-graph-empty,
.learning-ai-graph-error {
	margin: 0;
	padding: 0.75rem;
	border-radius: 10px;
	background: #f7f9fc;
	border: 1px dashed #c5d4e8;
}

/* Quiz */
.learning-ai-q {
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #eee;
}

.learning-ai-q:last-of-type {
	border-bottom: none;
}

.learning-ai-q-title {
	font-weight: 700;
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
}

.learning-ai-choice {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 0.35rem 0;
	font-size: 0.9rem;
	cursor: pointer;
}

.learning-ai-choice input {
	margin-top: 0.2rem;
}

.learning-ai-textarea {
	width: 100%;
	padding: 0.55rem 0.65rem;
	border: 2px solid #e5e5e5;
	border-radius: 10px;
	font-size: 0.95rem;
	font-family: inherit;
	resize: vertical;
	min-height: 4rem;
}

/* Results */
.learning-ai-score {
	font-size: 1rem;
	margin: 0 0 0.5rem;
}

.learning-ai-fb {
	margin: 0.65rem 0;
	padding: 0.65rem;
	background: #f7f7f8;
	border-radius: 10px;
	font-size: 0.88rem;
}

.learning-ai-fb-q {
	font-weight: 700;
	margin: 0 0 0.35rem;
}

/* Tutor chat */
.learning-ai-chat-log {
	max-height: 220px;
	overflow-y: auto;
	border: 1px solid #e8eaed;
	border-radius: 12px;
	padding: 0.65rem;
	background: #fafbfc;
	margin-bottom: 0.65rem;
}

.learning-ai-chat-bubble {
	max-width: 92%;
	padding: 0.5rem 0.65rem;
	border-radius: 12px;
	margin-bottom: 0.45rem;
	font-size: 0.9rem;
	line-height: 1.4;
}

.learning-ai-chat-bubble--user {
	margin-left: auto;
	background: #e8f7ff;
	color: #0d3d56;
}

.learning-ai-chat-bubble--tutor {
	margin-right: auto;
	background: #fff;
	border: 1px solid #e5e5e5;
}

.learning-ai-chat-input-row {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

#learning-ai-chat-msg {
	flex: 1 1 160px;
	min-width: 0;
	padding: 0.55rem 0.75rem;
	border: 2px solid #e5e5e5;
	border-radius: 999px;
	font-size: 0.9rem;
}

/* Error & gate */
.learning-ai-error {
	color: #b00020;
	font-size: 0.9rem;
	margin-top: 1rem;
	padding: 0.65rem;
	background: #fff5f5;
	border-radius: 10px;
	border: 1px solid #ffcdd2;
}

.learning-ai--gate {
	text-align: center;
	padding: 2.5rem 1rem;
	max-width: 28rem;
	margin: 2rem auto;
}

.learning-ai--gate .learning-ai-btn {
	text-decoration: none;
}

/* data-state subtle cue */
.learning-ai[data-state="loadingLesson"] .learning-ai-input,
.learning-ai[data-state="loadingQuiz"] .learning-ai-input {
	opacity: 0.85;
	pointer-events: none;
}

@media (min-width: 480px) {
	.learning-ai-title {
		font-size: 1.65rem;
	}
}

/* v0.3 — tabs, overlay, médias */
.learning-ai {
	max-width: 52rem;
}

.learning-ai-title--compact {
	font-size: 1.25rem;
	margin: 0.15rem 0 0;
}

.learning-ai-topbar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

.learning-ai-icon-btn {
	border: 1px solid #e8eaed;
	background: #fff;
	border-radius: 12px;
	padding: 0.45rem 0.65rem;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(26, 26, 46, 0.06);
}

.learning-ai-icon-btn:hover,
.learning-ai-icon-btn:focus-visible {
	border-color: #1cb0f6;
	outline: none;
	box-shadow: 0 0 0 3px rgba(28, 176, 246, 0.25);
}

.learning-ai-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 1rem 0 0.5rem;
	padding: 0.25rem;
	background: #f0f1f3;
	border-radius: 14px;
}

.learning-ai-tab {
	flex: 1 1 auto;
	min-width: 5.5rem;
	border: none;
	background: transparent;
	padding: 0.5rem 0.65rem;
	border-radius: 10px;
	font-size: 0.82rem;
	font-weight: 700;
	color: #5c5c6d;
	cursor: pointer;
}

.learning-ai-tab:hover,
.learning-ai-tab:focus-visible {
	color: #1a1a2e;
	outline: none;
	box-shadow: 0 0 0 2px rgba(28, 176, 246, 0.35);
}

.learning-ai-tab--active,
.learning-ai-tab[aria-selected="true"] {
	background: #fff;
	color: #1a1a2e;
	box-shadow: 0 2px 8px rgba(26, 26, 46, 0.08);
}

.learning-ai-panels {
	margin-top: 0.5rem;
}

.learning-ai-panel[hidden] {
	display: none !important;
}

.learning-ai-row--prefs {
	flex-wrap: wrap;
	gap: 0.75rem;
}

.learning-ai-row--end {
	justify-content: flex-end;
	margin-top: 0.75rem;
}

.learning-ai-pref-row--stack {
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
}

.learning-ai-overlay {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 1rem;
	box-sizing: border-box;
}

.learning-ai-overlay[hidden] {
	display: none !important;
}

.learning-ai-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(26, 26, 46, 0.45);
}

.learning-ai-overlay__dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 26rem);
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	border-radius: 16px;
	padding: 1.1rem 1.2rem 1.25rem;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
	margin-bottom: env(safe-area-inset-bottom, 0);
}

.learning-ai-media {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #e8eaed;
}

.learning-ai-yt-wrap {
	margin-bottom: 1rem;
}

.learning-ai-yt-embed {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
}

.learning-ai-yt-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.learning-ai-img-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.65rem;
}

.learning-ai-img-card {
	margin: 0;
	background: #f7f8fa;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #e8eaed;
}

.learning-ai-img-card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.learning-ai-img-cap {
	font-size: 0.68rem;
	color: #5c5c6d;
	padding: 0.35rem 0.45rem;
	line-height: 1.3;
}

.learning-ai-history-list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.learning-ai-history-open {
	width: 100%;
	text-align: left;
	border: 1px solid #e8eaed;
	border-radius: 12px;
	padding: 0.65rem 0.75rem;
	background: #fff;
	cursor: pointer;
	font: inherit;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.learning-ai-history-open:hover,
.learning-ai-history-open:focus-visible {
	border-color: #1cb0f6;
	outline: none;
	box-shadow: 0 0 0 3px rgba(28, 176, 246, 0.2);
}

.learning-ai-history-topic {
	display: block;
	font-weight: 700;
	color: #1a1a2e;
}

.learning-ai-history-meta {
	display: block;
	font-size: 0.75rem;
	color: #5c5c6d;
	margin-top: 0.15rem;
}

.learning-ai-history-excerpt {
	display: block;
	font-size: 0.82rem;
	color: #304a70;
	margin-top: 0.35rem;
	line-height: 1.35;
}

.learning-ai-script-line {
	margin: 0.35rem 0;
	font-size: 0.95rem;
}

.learning-ai--auth .learning-ai-auth-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.learning-ai-input {
	padding: 0.55rem 0.75rem;
	border: 2px solid #e5e5e5;
	border-radius: 10px;
	font-size: 0.95rem;
	width: 100%;
}

.learning-ai-auth-msg {
	margin-top: 1rem;
	padding: 0.65rem;
	border-radius: 10px;
	font-size: 0.9rem;
}

.learning-ai-auth-msg--ok {
	background: #e8f8ef;
	color: #0d4f2b;
	border: 1px solid #b7e1c6;
}

.learning-ai-auth-msg--err {
	background: #fff5f5;
	color: #8b0000;
	border: 1px solid #ffcdd2;
}

/* ========== Plein écran + refonte visuelle (0.3.1) ========== */
body.learning-ai-shell {
	margin: 0;
	min-height: 100vh;
	font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background: radial-gradient(120% 80% at 20% 0%, #1e2a4a 0%, #0f111a 45%, #0a0c12 100%);
	color: #e8eaef;
	-webkit-font-smoothing: antialiased;
}

body.learning-ai-shell .learning-ai-site-main {
	padding: 0;
	min-height: 100vh;
}

.learning-ai-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999999;
	padding: 0.5rem 1rem;
	background: #fff;
	color: #111;
	font-weight: 700;
}
.learning-ai-skip-link:focus {
	left: 0.5rem;
	top: 0.5rem;
}

body.learning-ai-shell .learning-ai {
	max-width: 44rem;
	margin: 0 auto;
	padding: 1.5rem 1.25rem 3rem;
	color: #e8eaef;
	line-height: 1.5;
}

body.learning-ai-shell .learning-ai-eyebrow {
	color: #7eb8ff;
	letter-spacing: 0.08em;
}

body.learning-ai-shell .learning-ai-title,
body.learning-ai-shell .learning-ai-card-title {
	color: #f4f6fb;
}

body.learning-ai-shell .learning-ai-tagline,
body.learning-ai-shell .learning-ai-muted,
body.learning-ai-shell .learning-ai-state-line {
	color: #9aa3b5;
}

body.learning-ai-shell .learning-ai-state-line {
	color: #b8c0d4;
}

body.learning-ai-shell .learning-ai-hint-format {
	font-size: 0.82rem;
	margin: 0 0 0.75rem;
}

body.learning-ai-shell .learning-ai-card {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(12px);
}

body.learning-ai-shell .learning-ai-label {
	color: #c5cdd8;
}

body.learning-ai-shell #learning-ai-topic,
body.learning-ai-shell #learning-ai-depth,
body.learning-ai-shell .learning-ai-pref-row select,
body.learning-ai-shell .learning-ai-input,
body.learning-ai-shell #learning-ai-chat-msg,
body.learning-ai-shell .learning-ai-textarea {
	background: rgba(0, 0, 0, 0.25);
	border-color: rgba(255, 255, 255, 0.15);
	color: #f4f6fb;
}

body.learning-ai-shell #learning-ai-topic::placeholder,
body.learning-ai-shell #learning-ai-chat-msg::placeholder {
	color: #6d7688;
}

body.learning-ai-shell #learning-ai-topic:focus,
body.learning-ai-shell #learning-ai-depth:focus,
body.learning-ai-shell .learning-ai-pref-row select:focus {
	border-color: #5b9fff;
	outline: none;
	box-shadow: 0 0 0 3px rgba(91, 159, 255, 0.25);
}

body.learning-ai-shell .learning-ai-field--grow {
	flex: 1 1 100%;
}

body.learning-ai-shell .learning-ai-tabs {
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

body.learning-ai-shell .learning-ai-tab {
	color: #9aa3b5;
}

body.learning-ai-shell .learning-ai-tab--active,
body.learning-ai-shell .learning-ai-tab[aria-selected="true"] {
	background: rgba(91, 159, 255, 0.2);
	color: #f4f6fb;
	box-shadow: none;
	border: 1px solid rgba(91, 159, 255, 0.35);
}

body.learning-ai-shell .learning-ai-pill {
	background: rgba(88, 204, 2, 0.2);
	color: #b8f28a;
}

body.learning-ai-shell .learning-ai-btn--primary {
	background: linear-gradient(180deg, #6ae02a 0%, #4bbd16 100%);
	color: #0a1f06;
	box-shadow: 0 4px 14px rgba(74, 189, 22, 0.35);
}

body.learning-ai-shell .learning-ai-btn--primary:active:not(:disabled) {
	box-shadow: 0 2px 8px rgba(74, 189, 22, 0.3);
}

body.learning-ai-shell .learning-ai-btn--secondary {
	background: linear-gradient(180deg, #4da3ff 0%, #2b7ddb 100%);
	box-shadow: 0 4px 14px rgba(43, 125, 219, 0.35);
}

body.learning-ai-shell .learning-ai-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.2);
	color: #9dc6ff;
}

body.learning-ai-shell .learning-ai-icon-btn {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.15);
	color: #e8eaef;
}

body.learning-ai-shell .learning-ai-skeleton {
	background: rgba(255, 255, 255, 0.06);
}

body.learning-ai-shell .learning-ai-toast {
	background: #1a2333;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

body.learning-ai-shell .learning-ai-error {
	background: rgba(176, 0, 32, 0.15);
	border-color: rgba(255, 120, 140, 0.4);
	color: #ffb4bf;
}

body.learning-ai-shell .learning-ai-overlay__backdrop {
	background: rgba(5, 8, 14, 0.75);
}

body.learning-ai-shell .learning-ai-overlay__dialog {
	background: #151b28;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #e8eaef;
}

body.learning-ai-shell .learning-ai-history-open {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.12);
	color: inherit;
}

body.learning-ai-shell .learning-ai-history-topic {
	color: #f4f6fb;
}

body.learning-ai-shell .learning-ai-graph-visual {
	border-color: rgba(255, 255, 255, 0.18);
}

body.learning-ai-shell .learning-ai-graph-dl {
	background: rgba(0, 0, 0, 0.35);
}

body.learning-ai-shell .learning-ai-graph-dl-link {
	color: #93c5fd;
}

body.learning-ai-shell .learning-ai-graph-loading,
body.learning-ai-shell .learning-ai-graph-empty,
body.learning-ai-shell .learning-ai-graph-error {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
	color: #e8eaef;
}

body.learning-ai-shell .learning-ai-chat-log {
	background: rgba(0, 0, 0, 0.35);
	border-color: rgba(255, 255, 255, 0.14);
}

body.learning-ai-shell .learning-ai-chat-bubble--user {
	background: #2563eb;
	color: #ffffff;
	border: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

body.learning-ai-shell .learning-ai-chat-bubble--tutor {
	background: #f1f5f9;
	border: 1px solid #cbd5e1;
	color: #0f172a;
}

body.learning-ai-shell .learning-ai-choice span {
	color: #dce1ea;
}

/* Illustrations : image + texte */
body.learning-ai-shell .learning-ai-figure-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 1rem;
	align-items: start;
	margin-bottom: 1.25rem;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 560px) {
	body.learning-ai-shell .learning-ai-figure-row {
		grid-template-columns: 1fr;
	}
}

body.learning-ai-shell .learning-ai-figure-media {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #000;
}

body.learning-ai-shell .learning-ai-figure-media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 220px;
	object-fit: cover;
}

body.learning-ai-shell .learning-ai-figure-title {
	margin: 0 0 0.4rem;
	font-size: 1rem;
	font-weight: 800;
	color: #f4f6fb;
}

body.learning-ai-shell .learning-ai-figure-desc {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
	color: #b8c0d4;
	line-height: 1.45;
}

body.learning-ai-shell .learning-ai-figure-attr {
	margin: 0;
	font-size: 0.72rem;
	color: #7a8499;
}

body.learning-ai-shell .learning-ai-media-yt .learning-ai-muted a {
	color: #7eb8ff;
}

body.learning-ai-shell.learning-ai-shell--auth .learning-ai {
	max-width: 28rem;
}

body.learning-ai-shell.learning-ai-shell--auth .learning-ai-title {
	font-size: 1.45rem;
}

body.learning-ai-shell .learning-ai--gate {
	color: #e8eaef;
}

body.learning-ai-shell .learning-ai--gate .learning-ai-lead {
	color: #f4f6fb;
}

/* Leçon : texte à gauche, vidéos empilées à droite, illustrations en dessous */
.learning-ai-lesson-stack {
	margin-top: 0.75rem;
}

.learning-ai-lesson-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
	gap: 1.25rem;
	align-items: start;
}

@media (max-width: 768px) {
	.learning-ai-lesson-layout {
		grid-template-columns: 1fr;
	}
}

body.learning-ai-shell .learning-ai-lesson-aside {
	position: sticky;
	top: 0.75rem;
}

body.learning-ai-shell .learning-ai-lesson-aside .learning-ai-yt-embed {
	max-width: 100%;
}

body.learning-ai-shell .learning-ai-lesson-illustrations {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Quiz : questions lisibles sur fond sombre */
body.learning-ai-shell #learning-ai-quiz-body .learning-ai-q-title,
body.learning-ai-shell #learning-ai-quiz-body .learning-ai-choice span {
	color: #e8eaef;
}

body.learning-ai-shell #learning-ai-quiz-body .learning-ai-q {
	border-bottom-color: rgba(255, 255, 255, 0.12);
}

body.learning-ai-shell #learning-ai-quiz-body .learning-ai-textarea {
	background: rgba(0, 0, 0, 0.25);
	border-color: rgba(255, 255, 255, 0.15);
	color: #f4f6fb;
}

/* Résultats quiz : cartes claires + texte foncé (contraste fort) */
body.learning-ai-shell #learning-ai-results .learning-ai-details,
body.learning-ai-shell #learning-ai-results .learning-ai-fb {
	background: #e8ecf4;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: #141820;
}

body.learning-ai-shell #learning-ai-results .learning-ai-fb-q,
body.learning-ai-shell #learning-ai-results .learning-ai-fb p {
	color: #141820;
}

body.learning-ai-shell #learning-ai-results .learning-ai-muted {
	color: #2c3544;
}

body.learning-ai-shell #learning-ai-results .learning-ai-score {
	color: #f4f6fb;
}

body.learning-ai-shell #learning-ai-results .learning-ai-details summary {
	color: #1a4d8c;
}