/* Couleurs de l'app (ui/components/Components.kt, objet Duo). */
:root {
  --green: #58CC02; --green-dark: #58A700; --green-light: #D7FFB8;
  --blue: #1CB0F6; --blue-dark: #1899D6; --blue-soft: #84D8FF; --blue-light: #DDF4FF;
  --red: #FF4B4B; --red-dark: #EA2B2B; --red-light: #FFDFE0;
  --orange: #FF9600; --orange-dark: #CD7900;
  --purple: #CE82FF; --purple-dark: #A568CC;
  --gray: #E5E5E5; --gray-dark: #AFAFAF; --gray-light: #F7F7F7;
  --text: #4B4B4B; --text-light: #777777;
}

* { box-sizing: border-box; }
/* Un élément caché reste caché, même si un style lui donne un affichage (images, champs…). */
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--text);
  background: #fff;
  min-height: 100vh;
}
/* Fond : la forêt de l'app, telle quelle (l'image est déjà éclaircie), derrière toutes les pages. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: url("forest_background.jpg") center / cover no-repeat;
}
main { max-width: 640px; margin: 0 auto; padding: 16px 20px 40px; }
h1 { font-size: 26px; font-weight: 900; margin: 8px 0; }
h2 { font-size: 20px; font-weight: 900; margin: 24px 0 8px; }
p.light, .light { color: var(--text-light); }
a { color: var(--blue-dark); font-weight: 800; text-decoration: none; }

/* Gros bouton en relief (DuoButton). */
.btn {
  display: block; width: 100%; padding: 15px; margin: 10px 0;
  border: 0; border-radius: 16px; font: inherit; font-weight: 900; font-size: 17px;
  text-transform: uppercase; letter-spacing: 0.5px; text-align: center; cursor: pointer;
  color: #fff; background: var(--green); box-shadow: 0 4px 0 var(--green-dark);
}
.btn:active { transform: translateY(4px); box-shadow: none; }
.btn.blue { background: var(--blue); box-shadow: 0 4px 0 var(--blue-dark); }
.btn.orange { background: var(--orange); box-shadow: 0 4px 0 var(--orange-dark); }
.btn.white { background: #fff; color: var(--blue-dark); border: 2px solid var(--gray); box-shadow: 0 4px 0 var(--gray); }
.btn[disabled] { background: var(--gray); box-shadow: 0 4px 0 var(--gray); color: var(--gray-dark); cursor: default; }

/* Carte blanche bordée. */
.card {
  display: block; background: #fff; border: 2px solid var(--gray); border-radius: 16px;
  padding: 16px; margin: 10px 0; color: var(--text);
}
a.card:hover { border-color: var(--blue-soft); }
.card .title { font-weight: 900; font-size: 18px; }
.card .sub { color: var(--text-light); font-size: 14px; }

input[type=text], input[type=password] {
  width: 100%; padding: 14px; font: inherit; font-size: 18px;
  border: 2px solid var(--gray); border-radius: 14px; background: #fff;
}
input:focus { outline: none; border-color: var(--blue-soft); }

.error { background: var(--red-light); color: var(--red-dark); font-weight: 800; padding: 12px; border-radius: 12px; }

.top { display: flex; align-items: center; justify-content: space-between; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--blue-light);
  display: inline-flex; align-items: center; justify-content: center; font-size: 24px;
}
.hello { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.hello .fox { font-size: 56px; }

.profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.profile { text-align: center; }
.profile .emoji { font-size: 48px; }

/* Éléments des pages enfant. */
.label { font-size: 12px; font-weight: 900; color: var(--text-light); letter-spacing: 0.5px; margin: 14px 0 6px; }
.label.white { color: rgba(255,255,255,.85); margin-top: 0; }
.big { font-size: 34px; font-weight: 900; }
.small { font-size: 14px; }
.row { display: flex; gap: 10px; align-items: center; }
.row > * { flex: 1; }
.btn.narrow { flex: 0 0 72px; }
.btn.narrow-half { flex: 0 0 35%; }
.btn.red { background: var(--red); box-shadow: 0 4px 0 var(--red-dark); }
.btn.small { padding: 10px; font-size: 14px; }
.card.colored { background: var(--c); box-shadow: 0 5px 0 var(--s); border: 0; color: #fff; }
.card.colored .sub { color: rgba(255,255,255,.92); }
.card.green { background: var(--green-light); color: var(--green-dark); font-weight: 900; }
.card.tile { text-align: center; }
.card.row { justify-content: space-between; }
.card.lesson.done { border-color: var(--green); }
.card.lesson.current { border-color: var(--blue); }
.bar { height: 10px; background: rgba(0,0,0,.12); border-radius: 6px; overflow: hidden; margin-top: 8px; }
.bar span { display: block; height: 100%; background: #fff; }
.bar.wide { flex: 1; background: var(--gray); margin: 0 12px; }
.bar.wide span { background: var(--green); }
.close { font-size: 26px; color: var(--gray-dark); }
.chip {
  display: inline-block; padding: 8px 14px; margin: 4px 4px 4px 0; border-radius: 12px; font: inherit; font-weight: 800;
  border: 2px solid var(--gray); background: #fff; color: var(--text); cursor: pointer;
}
.chip.on { background: var(--blue-light); border-color: var(--blue-soft); color: var(--blue-dark); }
.chip.ok { background: var(--green-light); border-color: var(--green); color: var(--green-dark); }
.chip.bad { background: var(--red-light); border-color: var(--red); }
.chip input { margin-right: 4px; }
.levels { display: flex; flex-wrap: wrap; gap: 6px; }
.bubble { display: inline-block; background: #fff; border: 2px solid var(--gray); border-radius: 16px; padding: 12px 16px; font-size: 18px; font-weight: 600; margin: 8px 0 14px; }
.blank { color: var(--blue-dark); }
.option { display: block; background: #fff; border: 2px solid var(--gray); border-radius: 14px; padding: 14px; margin: 8px 0; font-weight: 700; cursor: pointer; }
.option:has(input:checked) { border-color: var(--blue-soft); background: var(--blue-light); }
textarea { width: 100%; font: inherit; font-size: 17px; padding: 12px; border: 2px solid var(--gray); border-radius: 14px; }
.line { min-height: 56px; border-bottom: 2px solid var(--gray); margin: 10px 0; padding: 6px 0; }
.bank { margin: 12px 0; }
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pairs .chip { display: block; width: 100%; text-align: left; }
.cell { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.cell .pronoun { flex: 0 0 110px; font-weight: 800; color: var(--text-light); }
.cell input { flex: 1; }
.wrong { color: var(--red-dark); font-weight: 800; margin: 0 0 6px 120px; }
.feedback { border-radius: 14px; padding: 14px; margin: 14px 0; font-size: 16px; }
.feedback.good { background: var(--green-light); color: var(--green-dark); }
.feedback.bad { background: var(--red-light); color: var(--red-dark); }
.link { background: none; border: 0; font: inherit; color: var(--blue-dark); font-weight: 800; cursor: pointer; padding: 8px 0; }
.theory .body { margin: 10px 0; line-height: 1.5; }
.example { cursor: pointer; margin: 8px 0; }
.score { color: #fff; font-weight: 900; border-radius: 10px; padding: 4px 10px; flex: 0 0 auto !important; }
.score.good { background: var(--green); } .score.mid { background: var(--orange); } .score.low { background: var(--red); }
.check { display: block; padding: 6px 0; font-weight: 700; }
.check.sub { padding-left: 28px; font-weight: 600; }
.parts summary { padding-left: 28px; color: var(--blue-dark); font-weight: 800; cursor: pointer; }
.theme-name { font-weight: 900; margin: 10px 0 2px; }
details summary { cursor: pointer; }

.top .chip.tool { margin: 0 0 0 6px; padding: 6px 10px; white-space: nowrap; }
.panels .panel { background: var(--gray-light); border-radius: 14px; padding: 12px; margin-top: 8px; }
.panels .panel img { width: 100%; border-radius: 10px; margin: 6px 0; border: 2px solid var(--gray); }
.badge { color: var(--blue); font-weight: 900; font-size: 14px; letter-spacing: 0.5px; margin: 14px 0 0; }

/* Boutons de la séance (Passer / Vérifier, correction et Continuer) : toujours visibles en bas de l'écran. */
.actions {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  max-width: 640px; margin: 0 auto; background: #fff;
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--gray);
}
/* La place des boutons fixés est réservée sous la question, pour ne rien cacher. */
main:has(.actions) { padding-bottom: 260px; }
.actions .feedback { margin: 4px 0 10px; }
.actions .btn { margin: 6px 0; }
.card.choice { display: flex; gap: 14px; align-items: center; }
.card.choice .emoji { font-size: 36px; }
.card.tense { padding: 10px 14px; margin: 6px 0; }
.card.tense summary { display: flex; justify-content: space-between; align-items: center; list-style: none; }
.check.inline { display: inline; padding: 0; }
select { width: 100%; padding: 12px; font: inherit; font-size: 16px; border: 2px solid var(--gray); border-radius: 14px; background: #fff; margin-bottom: 6px; }
.card.upload { text-align: center; cursor: pointer; border-style: dashed; padding: 24px; }
.card.upload input { display: block; margin: 12px auto 0; }
.previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.previews img { width: 100%; border-radius: 10px; border: 2px solid var(--gray); }
.card.term input { margin: 4px 0; font-size: 16px; padding: 10px; }
.good-text { color: var(--green-dark); font-weight: 800; }
input.narrow { flex: 0 0 80px; }
.card.page img { width: 100%; border-radius: 10px; border: 2px solid var(--gray); }
@keyframes bounce { 50% { transform: translateY(-10px); } }
.fox.bounce { display: inline-block; animation: bounce 1s ease-in-out infinite; }
.hint { background: #FFF4D6; color: var(--orange-dark); font-weight: 800; padding: 10px 12px; border-radius: 12px; margin: 4px 0 8px; }

/* Texte qui se traduit au toucher. */
.tr:not([data-lang^="fr"]) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tr .w { cursor: pointer; border-radius: 4px; }
.tr .w:hover { background: var(--blue-light); }
.tr .w.sel { background: rgba(132, 216, 255, .5); }
.tr-bubble {
  position: fixed; left: 16px; right: 16px; bottom: 90px; z-index: 20; max-width: 600px; margin: 0 auto;
  background: #fff; border: 2px solid var(--blue-soft); border-radius: 18px; padding: 14px 16px; box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.tr-bubble .tr-word { font-weight: 900; font-size: 20px; }
.tr-bubble .tr-result { color: var(--blue-dark); font-weight: 800; font-size: 18px; margin: 6px 0; }
.tr-lens {
  position: absolute; z-index: 30; background: #fff; border: 2px solid var(--blue-soft); border-radius: 14px;
  padding: 8px 14px; font-size: 24px; font-weight: 900; color: var(--blue-dark); pointer-events: none;
}
.theory .row .title { flex: 1; }
.theory .row .chip.tool { flex: 0 0 auto; }
.theory-head { justify-content: space-between; }
.theory-head .label { flex: 1; margin: 0; }
.label.purple { color: var(--purple-dark); }
.chip.listen-card { flex: 0 0 auto !important; margin: 0; color: var(--blue-dark); }
.big-title { font-size: 24px; font-weight: 900; margin: 10px 0 4px; }

.score-row { align-items: center; gap: 14px; }
.score-row > .big { flex: 0 0 auto; font-size: 40px; }
.score-good { color: var(--green); } .score-mid { color: var(--orange); } .score-low { color: var(--red); }
.weeks { display: flex; gap: 6px; height: 56px; align-items: flex-end; margin-top: 10px; }
.week { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-size: 10px; }
.week i { display: block; width: 100%; border-radius: 4px; }
.w-good { background: var(--green); } .w-mid { background: var(--orange); } .w-low { background: var(--red); } .w-none { background: var(--gray); }
.warn-text { color: var(--orange); }
.bad-text { color: var(--red-dark); }
.detail { border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.detail.bad { background: var(--red-light); } .detail.good { background: var(--green-light); } .detail.neutral { background: var(--gray-light); }
.detail > div { margin-top: 4px; }

details.section > summary { list-style: none; cursor: pointer; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary h2 { display: flex; justify-content: space-between; align-items: center; }
details.section > summary h2::after { content: "▼"; font-size: 14px; color: var(--gray-dark); }
details.section[open] > summary h2::after { content: "▲"; }
.preview { background: var(--blue-light); color: var(--blue-dark); font-weight: 800; text-align: center; border-radius: 10px; padding: 6px; margin: 0 0 8px; }

.assignment { border-bottom: 2px solid var(--gray-light); padding: 8px 0; }
.assignment:last-child { border-bottom: 0; }
.assignment .row > div:first-child { flex: 1; }
.assignment .score { flex: 0 0 auto; }
.blue-text { color: var(--blue-dark); }
.actions-menu { margin-top: 4px; }
.actions-menu summary { padding: 4px 0; font-size: 14px; }
form.inline { display: inline; }
.small-select { width: auto; padding: 6px; font-size: 14px; margin: 0; }
.chip.danger, .danger-text { color: var(--red-dark); }

/* Accueil, comme dans l'app : niveaux, cartes de matière, « Continuer », version. */
.level-row { display: flex; gap: 8px; }
.level {
  flex: 1; height: 46px; border-radius: 12px; font: inherit; font-weight: 800; font-size: 14px; cursor: pointer;
  background: #fff; color: var(--text); border: 2px solid var(--gray); box-shadow: 0 3px 0 var(--gray);
}
.level.on { background: var(--blue-light); color: var(--blue-dark); border-color: var(--blue-soft); box-shadow: 0 3px 0 var(--blue-soft); }
.level:active { transform: translateY(3px); box-shadow: none; }
.card.subject { display: flex; align-items: center; gap: 14px; box-shadow: 0 4px 0 var(--gray); }
.subject-icon { flex: 0 0 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.subject-body { flex: 1; }
.subject-body .title { font-size: 20px; }
.bar.colored-bar { background: var(--gray); }
.chevron { font-size: 30px; color: var(--gray-dark); }
.card.continue { display: flex; align-items: center; gap: 12px; border-radius: 20px; box-shadow: 0 6px 0 var(--s); }
.card.continue > div { flex: 1; }
.card.continue .big-title { color: #fff; margin: 2px 0; }
.play { flex: 0 0 56px; height: 56px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.card.exam-row { display: flex; align-items: center; justify-content: space-between; }
.version { text-align: center; margin-top: 24px; }
.version a { color: var(--gray-dark); font-size: 12px; font-weight: 600; text-decoration: underline; }
details.section[open] .when-closed { display: none; }
.when-closed { font-size: 13px; font-weight: 700; margin: 0 8px 0 auto; }

/* Choix du profil (écran de démarrage de l'app). */
.welcome { text-align: center; margin: 28px 0 28px; }
.welcome-fox { font-size: 80px; line-height: 1.1; }
.welcome-name { font-size: 34px; font-weight: 900; color: var(--green); }
.welcome-question { font-size: 18px; font-weight: 700; color: var(--text-light, #777); margin: 4px 0 0; }
.card.profile-row { display: flex; align-items: center; gap: 16px; padding: 14px; box-shadow: 0 4px 0 var(--gray); }
.profile-avatar { flex: 0 0 56px; height: 56px; border-radius: 50%; background: var(--gray); display: flex; align-items: center; justify-content: center; font-size: 30px; }
.profile-avatar.child { background: var(--blue-light); }
.profile-body { flex: 1; }
.profile-body .title { font-size: 20px; }
.center { text-align: center; }
.version + .version { margin-top: 8px; }
.when-closed { white-space: nowrap; }
details.section > summary h2 .year { font-size: 14px; font-weight: 700; color: var(--text-light); margin-left: 6px; white-space: nowrap; }
details.section > summary h2 { gap: 4px; }
/* Titres repliables : le titre reste à gauche, la flèche à droite, ouvert ou fermé. */
details.section > summary h2 { justify-content: flex-start; }
details.section > summary h2::after { margin-left: auto; }
details.section:not([open]) > summary h2:has(.when-closed)::after { margin-left: 8px; }
.year-line { margin: -6px 0 10px; font-size: 14px; font-weight: 700; color: var(--text-light); }
.upload-row { gap: 10px; }
.upload-row .card.upload { flex: 1; margin: 0 0 10px; padding: 18px 8px; font-size: 26px; }
.upload-row .card.upload b { font-size: 15px; }
/* Scan : les champs de fichier restent cachés (sinon la page déborde). */
.upload-row input[type=file] { display: none; }
/* Ajustement du recadrage : poignées rondes sur les coins de la feuille. */
.crop-area { position: relative; touch-action: none; user-select: none; margin: 8px 0 12px; }
.crop-area img { display: block; width: 100%; border-radius: 10px; }
.crop-area svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.crop-area polygon { fill: rgba(28, 176, 246, .18); stroke: var(--blue); stroke-width: 3; }
.handle {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: rgba(255,255,255,.85); border: 4px solid var(--blue); box-shadow: 0 2px 6px rgba(0,0,0,.3); touch-action: none; cursor: grab;
}
.handle.drag { transform: scale(1.25); background: var(--blue-light); }
.page-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.page-view img { width: 100%; border-radius: 10px; border: 2px solid var(--gray); }
/* Appareil photo du scan : plein écran, cadre vert sur la feuille repérée. */
body.no-scroll { overflow: hidden; }
.camera { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; flex-direction: column; }
.camera.flash { background: #fff; }
.camera-view { position: relative; flex: 1; min-height: 0; }
.camera-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.camera-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.camera-hint { color: #fff; text-align: center; font-weight: 700; margin: 8px 16px; min-height: 1.4em; }
.camera-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 20px 28px; }
.camera-done { justify-self: start; background: none; border: 0; color: #fff; font: inherit; font-weight: 800; font-size: 17px; }
.camera-shot { width: 74px; height: 74px; border-radius: 50%; background: #fff; border: 6px solid rgba(255,255,255,.4); background-clip: padding-box; }
.camera-shot:active { transform: scale(.92); }
.camera-count { justify-self: end; color: #fff; font-weight: 800; }
/* Parties d'une page scannée : rectangles tracés du doigt (bleu : choisies, vert : déjà envoyées). */
.zone-area { position: relative; user-select: none; }
.zone-area img { display: block; width: 100%; border-radius: 10px; border: 2px solid var(--gray); }
.zone-area.drawing { touch-action: none; cursor: crosshair; }
.zone-area.drawing img { border-color: var(--blue); }
.zone { position: absolute; border: 3px solid var(--blue); background: rgba(28, 176, 246, .15); border-radius: 4px; }
.zone.done { border-color: var(--green); background: rgba(88, 204, 2, .18); }
.zone b {
  position: absolute; left: 4px; top: 4px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px;
  background: var(--blue); color: #fff; font-size: 15px; font-weight: 900; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.zone-remove {
  position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; border: 0;
  background: var(--blue); color: #fff; font-weight: 900; font-size: 13px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
/* Aperçu du scan (comme l'app) : l'écran entier, les pages défilent, « Envoyer à l'IA » toujours visible en bas. */
main:has(.scan-screen) { height: 100vh; height: 100svh; display: flex; flex-direction: column; padding-bottom: 0; }
.scan-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.scan-pages { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -20px; padding: 0 20px 12px; }
.scan-actions { border-top: 2px solid var(--gray); padding: 8px 0 calc(10px + env(safe-area-inset-bottom)); background: #fff; margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.scan-actions .btn { margin: 6px 0; }
.scan-actions #wait { margin: 0; text-align: center; }
body:has(.scan-screen) { min-height: 0; overflow: hidden; }

/* --- Mêmes proportions que l'app (Pressable, DuoProgressBar, BackHeader, SectionTitle) ------------------------- */
/* Cartes en relief : bordure grise de 2 px et ombre pleine de 4 px dessous, espacées de 12 px. */
.card { margin: 6px 0 12px; box-shadow: 0 4px 0 var(--gray); }
.card.colored { box-shadow: 0 6px 0 var(--s); }
a.card:active, button.node:active, a.node:active { transform: translateY(4px); box-shadow: none; }
/* En-tête : flèche ronde de 44 px et titre de 20 px sur une ligne. */
.back-header { display: flex; align-items: center; gap: 4px; margin: -8px -12px 8px; }
.back-header .back {
  flex: 0 0 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--gray-dark); font-weight: 700;
}
.back-header h1 { flex: 1; font-size: 20px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-title { font-size: 20px; margin: 8px 0; }
/* Barre de progression arrondie, avec le reflet blanc de l'app. */
.pbar { height: var(--h, 16px); background: var(--track, var(--gray)); border-radius: 999px; overflow: hidden; }
.pbar > span { display: block; height: 100%; min-width: 0; border-radius: 999px; background: var(--fill, var(--green)); position: relative; }
.pbar > span::after {
  content: ""; position: absolute; left: 8px; right: 8px; top: 20%; height: 25%; border-radius: 999px; background: rgba(255,255,255,.3);
}
.pbar > span[style*="width: 0%"]::after { display: none; }
/* Chapitres (SubjectScreen) : grandes cartes colorées. */
.card.unit-card { border-radius: 20px; padding: 20px; margin: 8px 0 14px; }
.unit-card .label { font-size: 13px; color: rgba(255,255,255,.8); margin: 0; }
.unit-title { font-size: 22px; font-weight: 900; color: #fff; }
.unit-themes { font-size: 14px; color: #fff; }
.unit-progress { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.unit-progress .pbar { flex: 1; }
/* Listes (thèmes, matières, profils) : icône, titre de 20 px, détail de 14 px, barre de 10 px. */
.card.list-card { display: flex; align-items: center; gap: 14px; padding: 16px; }
.round-icon { flex: 0 0 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.list-body { flex: 1; min-width: 0; }
.list-title { font-size: 20px; font-weight: 900; color: var(--text); }
.list-sub { font-size: 14px; color: var(--text-light); }
.list-body .pbar { margin-top: 6px; }
.chevron.small { font-size: 18px; }
/* Bouton en bas de l'écran (« Tout réviser ») : toujours visible. */
.with-bottom-button { padding-bottom: 90px; }
.bottom-button { position: fixed; left: 0; right: 0; bottom: 0; max-width: 640px; margin: 0 auto; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, #fff 30%); }
.bottom-button .btn { margin: 0; }
/* Thème (ThemePathScreen) : bandeau coloré puis parcours en zigzag de ronds de 84 × 78 px. */
.card.theme-banner { border-radius: 18px; padding: 14px 18px; margin: 0 -4px 12px; }
.theme-banner .label { margin: 0; font-size: 13px; }
.theme-banner-name { font-size: 22px; font-weight: 900; color: #fff; }
.path { display: flex; flex-direction: column; align-items: center; padding: 28px 0 40px; gap: 20px; }
.path-node { display: flex; flex-direction: column; align-items: center; transform: translateX(var(--shift)); }
.node {
  width: 84px; height: 78px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center;
  background: var(--c); box-shadow: 0 8px 0 var(--s); font-size: 30px; color: #fff; font-weight: 900; cursor: pointer; font-family: inherit;
}
.path-node.done .node { font-size: 34px; }
.path-node.todo .node { background: var(--gray); box-shadow: 0 8px 0 var(--gray-dark); font-size: 26px; }
.path-node.trophy .node { background: #FFC800; box-shadow: 0 8px 0 #CD7900; font-size: 34px; }
.node-title { width: 150px; margin-top: 14px; text-align: center; font-size: 14px; font-weight: 700; color: var(--text); }
.path-node.todo .node-title { color: var(--gray-dark); }
.node-sub { font-size: 12px; color: var(--text-light); text-align: center; }
.start-bubble {
  margin-bottom: 8px; padding: 8px 14px; border: 2px solid var(--gray); border-radius: 12px; background: #fff;
  color: var(--c); font-weight: 900; font-size: 14px; animation: bounce 1.2s ease-in-out infinite alternate;
}
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
/* Choix d'une partie de la leçon (LessonPartsDialog). */
.parts-dialog { border: 0; border-radius: 24px; padding: 20px; width: min(92vw, 420px); }
.parts-dialog::backdrop { background: rgba(0,0,0,.4); }
.parts-dialog .btn { margin: 12px 0 10px; }
.dialog-title { font-size: 20px; font-weight: 900; color: var(--text); }
.parts-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; margin-top: 8px; }
.part-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 2px solid var(--gray); border-radius: 12px; color: var(--text); }
.part-row > div { flex: 1; }
.part-title { font-size: 15px; font-weight: 700; }
.dialog-cancel { display: block; margin: 8px 0 0 auto; }
.card > .label:first-child { margin-top: 0; }
/* Barre de la séance (comme l'app) : 16 px, entre la croix et « Fiche 1/3 » ou « 2/10 ». */
.top .pbar.wide-bar { flex: 1; margin: 0 10px 0 8px; }
.top .pbar.wide-bar + .label { margin: 0; font-size: 15px; white-space: nowrap; }
/* Fiches de théorie : « ◀ » et « Suivant » fixés en bas, la fiche défile au-dessus. */
main:has(.theory-actions) { padding-bottom: 110px; }
.theory-actions .row > .narrow { flex: 0 0 72px; }

/* --- Accueil : mêmes tailles que l'app (ChildHomeScreen) ------------------------------------------------------ */
/* Boutons de l'app (DuoButton) : 54 px de haut, texte de 16 px. */
.btn { min-height: 54px; padding: 12px 15px; font-size: 16px; letter-spacing: 1px; display: flex; align-items: center; justify-content: center; }
a.btn { display: flex; }
.btn.small { min-height: 0; }
.hello { margin: 20px 0 16px; }
.hello h1 { margin: 0; }
.hello p { margin: 0; font-size: 16px; }
.btn.blue + .btn.orange { margin-top: 12px; }
.level-row { margin-bottom: 16px; }
/* Note globale : carte bordée sans relief. */
.card.flat { box-shadow: none; margin: 0 0 24px; }
.score-card .label { font-size: 12px; }
.score-label { font-size: 16px; font-weight: 900; color: var(--text); }
.tiny { font-size: 12px; }
.trend { font-size: 13px; font-weight: 700; }
.score-card .weeks { margin-top: 10px; }
.score-card > p.tiny { margin: 6px 0 0; }
/* Grandes cartes colorées (révisions demandées, contrôles, révision du jour, continuer) : 16 px entre elles. */
.home-cards .card { margin: 0 0 22px; }
.card.big-card { display: flex; align-items: center; gap: 12px; border-radius: 20px; padding: 20px; box-shadow: 0 6px 0 var(--s); }
.card.assignment-card { display: flex; align-items: center; gap: 12px; border-radius: 20px; padding: 18px; box-shadow: 0 4px 0 var(--s); }
.big-card > div, .assignment-card > div { flex: 1; min-width: 0; }
.big-card .label, .assignment-card .label { font-size: 13px; margin: 0; color: rgba(255,255,255,.9); }
.assignment-card .label { font-size: 12px; }
.card-title { font-size: 22px; font-weight: 900; color: #fff; }
.card-title.small-title { font-size: 20px; }
.card-sub { font-size: 14px; color: rgba(255,255,255,.92); }
.card-sub.tiny { font-size: 13px; }
.card-sub.strong, .tiny-strong { font-weight: 800; color: #fff; }
.tiny-strong { font-size: 14px; white-space: nowrap; }
.end-emoji { font-size: 30px; }
.play { flex: 0 0 56px; height: 56px; font-size: 24px; }
.play.small-play { flex-basis: 52px; height: 52px; font-size: 22px; }
.exam-card .unit-progress { margin: 10px 0 12px; }
.white-pill { display: inline-block; background: #fff; color: var(--purple-dark); font-weight: 900; border-radius: 12px; padding: 10px 14px; }
.card.done-card { font-size: 18px; padding: 20px; box-shadow: 0 4px 0 var(--green); border: 0; }
/* Sections « Mes contrôles » et « Mes cours » : titre de 20 px, 28 px au-dessus. */
details.section > summary h2 { margin: 28px 0 8px; }
.card.subject { padding: 16px; margin: 6px 0 12px; }
.subject-body .sub { font-size: 14px; }
/* Barre « maths » des réponses écrites (MathKey de l'app) : touches de 44 px. */
.math-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.math-key {
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px; border: 2px solid var(--gray); background: #fff;
  box-shadow: 0 3px 0 var(--gray); font: inherit; font-size: 18px; font-weight: 800; color: var(--text); cursor: pointer;
}
.math-key[data-exponent] { font-size: 15px; }
.math-key.on { background: var(--blue-light); border-color: var(--blue-soft); box-shadow: 0 3px 0 var(--blue-soft); color: var(--blue-dark); }
.math-key:active { transform: translateY(3px); box-shadow: none; }
.math-hint { font-size: 13px; color: var(--blue-dark); margin: 0 0 8px; }
/* « Réviser » : une matière repliée par carte ; on la déplie pour cocher ses leçons. */
.card.pick-subject { padding: 12px 16px; }
.pick-subject > summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; }
.pick-subject > summary::-webkit-details-marker { display: none; }
.pick-icon { flex: 0 0 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.pick-subject .list-title { flex: 1; }
.pick-count { font-size: 13px; font-weight: 800; }
.pick-arrow { color: var(--gray-dark); font-size: 14px; }
.pick-subject[open] .pick-arrow { transform: rotate(180deg); }
.pick-subject[open] > summary { margin-bottom: 8px; }
/* Galerie des photos du cours : plein écran, une page par écran, on glisse pour changer de page. */
.gallery { position: fixed; inset: 0; z-index: 200; background: #000; display: flex; flex-direction: column; }
.gallery-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: #fff; font-weight: 800; }
.gallery-close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 22px; font-weight: 900; }
.gallery-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; overflow: auto; }
.gallery-slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 12px;
  background: rgba(255,255,255,.15); color: #fff; font-size: 34px; font-weight: 900;
}
.gallery-nav.prev { left: 8px; } .gallery-nav.next { right: 8px; }
/* Contrôles : liste de l'accueil (ExamList de l'app) et création. */
.exam-day { font-size: 15px; font-weight: 900; color: var(--text-light); margin: 12px 0 2px; }
.card.exam-row { display: flex; align-items: center; justify-content: space-between; padding: 14px; margin: 5px 0 10px; }
.exam-title { font-size: 15px; font-weight: 700; color: var(--text); }
.exam-ready { font-size: 13px; font-weight: 700; color: var(--purple-dark); }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; font-size: 20px; cursor: pointer; }
.btn.purple { background: var(--purple); box-shadow: 0 4px 0 var(--purple-dark); }
.btn.white.purple-text { color: var(--purple-dark); }
.date-input { font-size: 16px; }
.exam-unit .title { margin-bottom: 4px; }
/* Date du contrôle : carte comme dans l'app ; le champ date du navigateur est invisible par-dessus (il ouvre le calendrier). */
.card.date-card { position: relative; display: block; padding: 16px; font-size: 16px; font-weight: 700; cursor: pointer; }
.date-card input[type=date] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; cursor: pointer; }
.date-card input[type=date]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
#exam-form input[type=text] { margin-bottom: 4px; }
/* Lisibilité des boutons : texte blanc légèrement ombré sur les couleurs claires (violet, orange),
   et bouton grisé avec un texte plus foncé. */
.btn.purple, .btn.orange, .btn.blue, .btn:not(.white) { text-shadow: 0 1px 2px rgba(0,0,0,.22); }
.btn.purple { background: #B66DF0; box-shadow: 0 4px 0 #8E4CC4; }
.btn[disabled] { color: #fff; background: #C9C9C9; box-shadow: 0 4px 0 #B0B0B0; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
/* Textes en langue étrangère : la traduction au toucher remplace la sélection du navigateur
   (pas de surlignage, ni de menu « Définir / Traduire / Copier » du téléphone sur un appui long). */
.tr:not([data-lang^="fr"]) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.due-pill { display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 8px; background: rgba(255,255,255,.25); color: #fff; font-size: 14px; font-weight: 900; }
.install-btn { margin-top: 24px; }
/* Espace parents : lignes de liste, petites actions, tuiles. */
.row-start { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.round-icon.small-icon { flex-basis: 52px; height: 52px; font-size: 28px; background: var(--blue-light); }
.list-line { display: flex; align-items: center; gap: 8px; padding: 7px 0; color: var(--text); border-bottom: 1px solid var(--gray-light); }
.list-line:last-of-type { border-bottom: 0; }
.list-line > div { flex: 1; min-width: 0; }
.line-title { font-weight: 800; color: var(--text); }
.line-title.small { font-size: 14px; }
.sub-line { padding-left: 16px; }
.mini-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.mini-actions form { display: inline; margin: 0; }
.mini-actions .chip { margin: 0; font-size: 14px; padding: 6px 10px; }
.inline-form { display: inline-block; }
.inline-form > summary { list-style: none; cursor: pointer; }
.inline-form form { display: flex; gap: 6px; margin-top: 6px; align-items: center; }
.sep { border: 0; border-top: 2px solid var(--gray-light); margin: 12px 0; }
.red-text { color: var(--red-dark, #EA2B2B); } .blue-text { color: var(--blue-dark); } .green-text { color: var(--green-dark); }
.theme-progress > summary { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; list-style: none; }
.theme-progress .theme-label { flex: 0 0 120px; font-size: 15px; }
.theme-progress .pbar { flex: 1; }
.score-none { color: var(--gray-dark); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card.tile-card { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px; color: var(--text); }
.tile-card span { font-size: 26px; }
.tile-card small { color: var(--text-light); font-size: 13px; }
.tile-card.danger b { color: var(--red-dark, #EA2B2B); }
.missed-card { background: #FFDFE0; border-radius: 12px; padding: 10px; margin: 8px 0; }
.list-line.boxed { padding: 12px; margin: 8px 0; border: 2px solid var(--gray); }
.orange-text { color: var(--orange); }
button.pick-line { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--gray-light); font: inherit; text-align: left; cursor: pointer; }
.member-card > summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; }
.member-card > summary::-webkit-details-marker { display: none; }
.member-form { margin-top: 12px; }
.member-form input[type=text] { width: 100%; }
.emoji-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.emoji-pick input { display: none; }
.emoji-pick span { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; font-size: 24px; border: 2px solid var(--gray); border-radius: 12px; cursor: pointer; }
.emoji-pick input:checked + span { border-color: var(--blue-soft); background: var(--blue-light); }
.share-text { font-size: 14px; }
.stack-form input { width: 100%; margin: 4px 0; }
input[type=password] { font: inherit; font-size: 17px; padding: 12px; border: 2px solid var(--gray); border-radius: 14px; }
.big-code { font-size: 22px; font-weight: 900; letter-spacing: 1px; margin: 8px 0; font-family: monospace; }
.mono { font-family: monospace; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--gray-light); font-size: 15px; }
.switch-row input { width: 22px; height: 22px; flex: 0 0 22px; }
/* Gérer les cours : arborescence avec menus ⋯. */
.manage-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.manage-row > :first-child, .manage-row .lesson-link { flex: 1; min-width: 0; }
.manage-unit { margin: 8px 0 0 6px; padding-left: 8px; border-left: 3px solid var(--gray-light); }
.manage-theme { margin: 6px 0 0 4px; }
.lesson-row { padding-left: 14px; }
.lesson-link { color: var(--text); }
.item-menu { position: relative; }
.item-menu > summary { list-style: none; cursor: pointer; font-size: 22px; font-weight: 900; color: var(--gray-dark); padding: 0 8px; }
.item-menu > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; z-index: 20; width: min(300px, 80vw); background: #fff; border: 2px solid var(--gray); border-radius: 14px; padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.15); display: flex; flex-direction: column; gap: 6px; }
.menu-panel form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0; }
.menu-panel input[type=text] { width: 100%; font-size: 15px; padding: 8px; }
.menu-panel .narrow-input { width: 70px; }
.menu-panel .label { margin: 4px 0 0; width: 100%; }
.menu-panel .chip { margin: 0; font-size: 14px; }
.sub-small { font-size: 13px; padding: 2px 0; }
.photo-chip a { color: var(--blue-dark); font-weight: 800; font-size: 13px; }
.photo-chip a:not(:first-child) { display: none; }
.part-block > summary { cursor: pointer; padding: 4px 0; }
.exercise-row { border-top: 1px solid var(--gray-light); padding: 8px 0; }
.exercise-row.is-removed { opacity: .5; }
.exercise-row form { margin: 0; }
.year-class { border-top: 1px solid var(--gray-light); padding: 10px 0; }
.year-class input[type=text] { width: 100%; margin: 6px 0; }
.kid-class > summary { cursor: pointer; padding: 4px 0; list-style: none; }
.inline-row { display: flex; gap: 6px; align-items: center; }
.inline-row input { flex: 1; }
.full-input { width: 100%; } .purple-text { color: var(--purple-dark); }
.grade-select { display: flex; flex-direction: column; gap: 6px; flex: 1; margin: 6px 0; }
.grade-select select, select { font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid var(--gray); border-radius: 14px; background: #fff; color: var(--text); }
.grade-select input { width: 100%; }
.manage-row > .pick-icon { flex: 0 0 40px; width: 40px; height: 40px; font-size: 22px; }
.manage-subject .manage-row .list-title { flex: 1; }
.manage-subject > summary { list-style: none; cursor: pointer; }
.manage-subject > summary::-webkit-details-marker { display: none; }
.manage-subject[open] > summary .pick-arrow { transform: rotate(180deg); }
.subject-options { margin-top: 6px; }
.alert-card { border-color: var(--red, #FF4B4B); }
.status-pill { font-size: 12px; font-weight: 900; padding: 3px 8px; border-radius: 8px; }
.status-active { background: var(--green-light); color: var(--green-dark); }
.status-pending { background: #FFF4D6; color: var(--orange-dark); }
.status-disabled { background: #FFDFE0; color: var(--red-dark, #EA2B2B); }
.narrow-input { width: 130px; }
input[type=search] { font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid var(--gray); border-radius: 14px; margin-bottom: 8px; }
.stack-form label { display: block; margin: 6px 0; }
.btn.link-like { background: none; box-shadow: none; border: 0; color: var(--blue-dark); min-height: 0; padding: 8px; font-size: 15px; letter-spacing: 0; text-transform: none; text-shadow: none; }
.install-help { background: var(--blue-light); color: var(--blue-dark); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 700; }
.class-form { display: flex; flex-direction: column; gap: 4px; }
.class-form .chip { align-self: flex-start; }