@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700;800&family=Spectral:wght@500;600;700&display=swap");

:root {
  --bg: #f3ece1;
  --card: #fffbf5;
  --line: #d9ccb8;
  --ink: #2c3140;
  --muted: #686676;
  --ok: #2d6a47;
  --warn: #8b6318;
  --ko: #8a3f3a;
  --primary: #31467c;
  --primary-hover: #263762;
  --primary-soft: #eceff8;
  --soft: #f4ede2;
  --soft-2: #efe5d7;
  --accent: #a56d33;
  --accent-soft: #f3e3cf;
  --shadow-1: 0 6px 18px rgba(44, 49, 64, 0.07);
  --shadow-2: 0 14px 34px rgba(44, 49, 64, 0.12);
}

[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-optical-sizing: auto;
  font-weight: 520;
  letter-spacing: 0.003em;
  color: var(--ink);
  background: linear-gradient(180deg, #faf4ea 0%, var(--bg) 100%);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

header,
main,
#app {
  width: min(1180px, calc(100vw - 2rem));
  margin: 0 auto;
}

header {
  padding: 1.35rem 0 0.75rem;
  display: grid;
  gap: 0.45rem;
}

main,
#app {
  padding: 1rem 0 2rem;
}

h1,
h2,
h3,
p,
ul {
  margin: 0;
}

h1,
h2,
h3 {
  font-family: "Spectral", Georgia, serif;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: #3a2f2a;
}

a {
  color: inherit;
}

.tagline {
  font-weight: 800;
  color: var(--primary);
}

.intro {
  max-width: 76ch;
  color: var(--muted);
}

.stack {
  display: grid;
  gap: 1rem;
}

.card,
#period-summary,
#lesson-list,
#lesson-detail {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 252, 247, 0.98) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-1);
}

.card {
  display: grid;
  gap: 0.9rem;
  padding: 1.1rem;
}

#period-summary,
#lesson-list,
#lesson-detail {
  padding: 1rem;
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}

.btn,
button {
  font: inherit;
}

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 0.7rem 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* option de secours pour les boutons sans classe */
button:not([class]) {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

button:not([class]):hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.btn-secondary {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

.btn-secondary:hover {
  background: var(--soft);
}

.btn-link {
  background: transparent;
  color: inherit;
  border-color: transparent;
  box-shadow: none;
}

.dashboard-view {
  gap: 1.1rem;
}

.dashboard-hero {
  gap: 0.9rem;
}

.dashboard-hero__eyebrow,
.period-card__eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dashboard-hero__headline {
  font-size: clamp(1.55rem, 2vw + 1rem, 2.35rem);
  line-height: 1.06;
}

.dashboard-hero__lead {
  max-width: 72ch;
  color: var(--muted);
  line-height: 1.5;
}

.dashboard-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.period-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.period-card {
  align-self: start;
  height: auto;
  gap: 0.8rem;
  overflow: hidden;
}

.period-card__toggle {
  appearance: none;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdfb 0%, #f7f0e6 100%);
  color: inherit;
  padding: 0.95rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  text-align: left;
  cursor: pointer;
}

.period-card__toggle:hover {
  background: linear-gradient(180deg, #fffdfb 0%, #f3eadc 100%);
}

.period-card__header-main,
.period-card__title-wrap,
.period-card__header-side {
  display: grid;
  gap: 0.26rem;
}

.period-card__header-side {
  justify-items: end;
  align-items: center;
  gap: 0.16rem;
}

.period-card__title {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.2;
}

.period-card__objective {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.period-card__header-label {
  color: var(--primary);
  font-size: 0.84rem;
  font-weight: 800;
}

.period-card__chevron {
  font-size: 1.1rem;
  line-height: 1;
  color: var(--muted);
  transition: transform 140ms ease;
}

.period-card.is-open .period-card__chevron {
  transform: rotate(180deg);
}

.period-card__summary {
  display: grid;
  gap: 0.65rem;
}

.period-card__status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.period-card__score-inline {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary);
}

.period-card__summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
}

.period-card__summary-item {
  display: grid;
  gap: 0.16rem;
  padding: 0.72rem 0.78rem;
  border-radius: 14px;
  background: var(--soft);
  border: 1px solid var(--line);
}

.period-card__summary-label {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.period-card__summary-value {
  font-size: 1rem;
  font-weight: 800;
}

.period-status-chip,
.lesson-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
}

.status-ok {
  background: #e5f3e8;
  color: var(--ok);
}

.status-warn {
  background: #f8efcf;
  color: var(--warn);
}

.status-ko {
  background: #f9e5e3;
  color: var(--ko);
}

.progress-wrapper {
  display: grid;
  gap: 0.42rem;
}

.progress-label {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.progress-track {
  height: 10px;
  border-radius: 999px;
  background: #ebe3d7;
  overflow: hidden;
}

.progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c8a15a 0%, #7c91d6 100%);
}

.period-card__details-body {
  display: grid;
  gap: 0.7rem;
  padding-top: 0.2rem;
}

.period-card__details-hint,
.helper {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.lesson-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.lesson-line {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 0.78rem 0.84rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  text-align: left;
  background: #fffdfa;
}

.lesson-line:hover {
  background: #f8f1e7;
  border-color: #d4c5af;
}

.lesson-line__left,
.lesson-line__right {
  display: grid;
  gap: 0.18rem;
}

.lesson-line__right {
  justify-items: end;
}

.lesson-id {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.lesson-title {
  font-weight: 800;
  line-height: 1.25;
}

.lesson-score {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

#period-summary {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.period-box {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem;
  display: grid;
  gap: 0.25rem;
}

.period-status {
  font-weight: 700;
}

.validated {
  color: var(--ok);
}

.not-validated {
  color: var(--warn);
}

#lesson-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.8rem;
}

.lesson-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.85rem;
  display: grid;
  gap: 0.5rem;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 0;
}

legend {
  font-weight: 700;
}

form {
  display: grid;
  gap: 1rem;
}

.radio-option {
  display: block;
  margin-bottom: 0.4rem;
}

.score-line {
  font-weight: 700;
}

input[type="text"] {
  width: 100%;
  max-width: 420px;
  padding: 0.56rem 0.68rem;
  border: 1px solid #cbbfad;
  border-radius: 10px;
  background: #fffdfa;
}

@media (max-width: 1080px) {
  .period-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 740px) {
  header,
  main,
  #app {
    width: min(100vw - 1rem, 100%);
  }

  .card,
  #period-summary,
  #lesson-list,
  #lesson-detail {
    padding: 0.95rem;
    border-radius: 16px;
  }

  .period-card__toggle,
  .lesson-line {
    grid-template-columns: 1fr;
  }

  .period-card__header-side,
  .lesson-line__right {
    justify-items: start;
  }

  .period-card__summary-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== Dashboard rebuild ===== */
/* variables unifiées dans le bloc :root principal */

.muted {
  color: var(--muted);
}

.dashboard-view {
  gap: 1.15rem;
}

.dashboard-hero {
  gap: 0.85rem;
  padding: 1.2rem;
}

.dashboard-hero__headline {
  font-size: clamp(1.6rem, 1rem + 2vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.dashboard-hero__lead {
  max-width: 68ch;
  color: var(--muted);
  line-height: 1.55;
}

.dashboard-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.meta-pill {
  background: linear-gradient(180deg, #fffdf9 0%, var(--soft) 100%);
  border-color: var(--line);
  color: var(--muted);
}

.period-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.period-card {
  align-self: start;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: 20px;
  overflow: hidden;
}

.period-card.is-open {
  box-shadow: var(--shadow-2);
}

.period-card__toggle {
  appearance: none;
  width: 100%;
  padding: 0.9rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffdfa 0%, var(--soft) 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.period-card__toggle:hover {
  background: linear-gradient(180deg, #fffdfa 0%, var(--soft-2) 100%);
  border-color: #d8cbb7;
}

.period-card__toggle:focus-visible,
.lesson-line:focus-visible {
  outline: 3px solid rgba(52, 74, 131, 0.18);
  outline-offset: 2px;
}

.period-card__header-main,
.period-card__title-wrap,
.period-card__header-side {
  display: grid;
  gap: 0.24rem;
}

.period-card__header-side {
  justify-items: end;
}

.period-card__eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 0.24rem 0.58rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.period-card__title {
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.2;
}

.period-card__objective {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.period-card__header-label {
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 800;
}

.period-card__chevron {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.period-card.is-open .period-card__chevron {
  transform: rotate(180deg);
}

.period-card__summary {
  display: grid;
  gap: 0.7rem;
}

.period-card__status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.period-card__score-inline {
  color: var(--primary);
  font-size: 1rem;
  font-weight: 800;
}

.period-card__summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.period-card__summary-item {
  display: grid;
  gap: 0.12rem;
  padding: 0.72rem 0.78rem;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffdfa 0%, var(--soft) 100%);
  border: 1px solid var(--line);
}

.period-card__summary-label {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.period-card__summary-value {
  font-size: 1rem;
  font-weight: 800;
}

.period-status-chip,
.lesson-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  width: fit-content;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  border: 1px solid transparent;
}

.status-ok {
  background: #e9f5ed;
  color: var(--ok);
  border-color: #cfe6d6;
}

.status-warn {
  background: #fbf1d8;
  color: var(--warn);
  border-color: #e8d7aa;
}

.status-ko {
  background: #fae9e7;
  color: var(--ko);
  border-color: #e8c7c1;
}

.progress-wrapper {
  display: grid;
  gap: 0.4rem;
}

.progress-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.progress-track {
  height: 9px;
  border-radius: 999px;
  background: #ece3d8;
  overflow: hidden;
}

.progress-fill {
  background: linear-gradient(90deg, #c9a35f 0%, #7b90d4 100%);
}

.period-card__details-body {
  display: grid;
  gap: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(228, 218, 205, 0.92);
}

.period-card__details-hint {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.lesson-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.lesson-line {
  width: 100%;
  padding: 0.78rem 0.82rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
  text-align: left;
  background: linear-gradient(180deg, #fffdfa 0%, #fcf7f0 100%);
}

.lesson-line:hover {
  background: linear-gradient(180deg, #fffdfa 0%, #f7efe3 100%);
  border-color: #d6c7b1;
}

.lesson-line__left,
.lesson-line__right {
  display: grid;
  gap: 0.18rem;
}

.lesson-line__right {
  justify-items: end;
}

.lesson-id {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.lesson-title {
  font-weight: 800;
  line-height: 1.28;
}

.lesson-score {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 1080px) {
  .period-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 740px) {
  .dashboard-hero,
  .period-card {
    padding: 0.95rem;
  }

  .period-card__toggle,
  .lesson-line {
    grid-template-columns: 1fr;
  }

  .period-card__header-side,
  .lesson-line__right {
    justify-items: start;
  }

  .period-card__summary-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================
   ROME LETTRÉE
   Patch cosmétique seulement
   ========================= */

.tagline,
.dashboard-hero__headline,
.period-card__title,
.lesson-title {
  font-family: "Spectral", Georgia, serif;
}

.tagline {
  color: var(--primary);
  font-weight: 700;
}

.intro,
.dashboard-hero__lead,
.period-card__objective,
.period-card__summary-label,
.helper,
.period-card__details-hint,
.lesson-score,
.meta-pill,
.lesson-id {
  color: var(--muted);
}

.dashboard-hero__eyebrow,
.period-card__eyebrow {
  background: linear-gradient(180deg, #f5ead8 0%, #efdfc8 100%);
  color: #7b5725;
  border: 1px solid rgba(165, 109, 51, 0.18);
  box-shadow: 0 1px 2px rgba(44, 49, 64, 0.05);
}

.card,
#period-summary,
#lesson-list,
#lesson-detail,
.period-card__toggle,
.lesson-line,
.period-box,
.lesson-card {
  box-shadow: var(--shadow-1);
}

.card,
#period-summary,
#lesson-list,
#lesson-detail {
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.98) 0%, rgba(252, 246, 238, 0.98) 100%);
}

.period-card__toggle {
  background: linear-gradient(180deg, #fffdf9 0%, #f6ede0 100%);
}

.period-card__toggle:hover,
.lesson-line:hover,
.btn-secondary:hover {
  background: linear-gradient(180deg, #fffaf4 0%, #f1e4d3 100%);
}

.meta-pill,
.period-card__summary-item,
.period-box,
.lesson-card {
  background: linear-gradient(180deg, rgba(249, 242, 231, 0.88) 0%, rgba(244, 235, 223, 0.88) 100%);
}

.period-status-chip,
.lesson-status-chip {
  border: 1px solid rgba(49, 70, 124, 0.10);
  box-shadow: 0 1px 2px rgba(44, 49, 64, 0.04);
}

.status-ok {
  background: #e7f0e7;
}

.status-warn {
  background: #f6edd9;
}

.status-ko {
  background: #f7e6e2;
}

.progress-track {
  background: #e8dcc8;
}

.progress-fill {
  background: linear-gradient(90deg, var(--accent) 0%, #6f85c3 100%);
}

.btn {
  font-weight: 600;
}

button,
.btn-primary {
  background: linear-gradient(180deg, #3b518c 0%, var(--primary) 100%);
  border-color: rgba(49, 70, 124, 0.65);
  box-shadow: 0 4px 10px rgba(49, 70, 124, 0.16);
}

button:hover,
.btn-primary:hover {
  background: linear-gradient(180deg, #33497e 0%, var(--primary-hover) 100%);
}

.btn-secondary {
  background: linear-gradient(180deg, #fffdf9 0%, #f6ede0 100%);
}

input[type="text"] {
  border-color: #cfbda5;
  box-shadow: inset 0 1px 1px rgba(44, 49, 64, 0.03);
}

.lesson-id,
.meta-pill,
.period-card__summary-label,
.period-card__header-label {
  font-weight: 700;
}

.dashboard-hero__headline {
  color: #3a2f2a;
}

.period-card__score-inline,
.period-card__summary-value {
  color: var(--primary);
}

a,
.btn-link {
  color: var(--primary);
}

/* =========================
   HOMEPAGE — 3 colonnes
   5e / 4e / 3e sur une ligne
   tablette incluse
   ========================= */

.home-view {
  display: grid;
  gap: 1.15rem;
}

.home-hero {
  display: grid;
  gap: 0.9rem;
}

.home-hero__headline {
  font-size: clamp(1.7rem, 1rem + 2vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.home-hero__lead {
  max-width: 72ch;
  color: var(--muted);
  line-height: 1.55;
}

.home-hero__meta,
.home-hero__actions,
.level-card__meta,
.level-card__badges,
.level-card__documents,
.level-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.level-card {
  align-self: start;
  height: auto;
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.98) 0%, rgba(252, 246, 238, 0.98) 100%);
  box-shadow: var(--shadow-1);
}

.level-card__header,
.level-card__top {
  display: grid;
  gap: 0.35rem;
}

.level-card__eyebrow {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 0.24rem 0.58rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #f5ead8 0%, #efdfc8 100%);
  color: #7b5725;
  border: 1px solid rgba(165, 109, 51, 0.18);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.level-card__title {
  font-size: 1.12rem;
  line-height: 1.18;
  font-weight: 700;
  font-family: "Spectral", Georgia, serif;
  color: #3a2f2a;
}

.level-card__summary,
.level-card__lead,
.level-card__objective {
  color: var(--muted);
  line-height: 1.5;
}

.level-card .btn,
.level-card .btn-link,
.level-card a {
  min-height: 40px;
}

.level-card .meta-pill,
.level-card .doc-link,
.level-card .btn-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdf9 0%, var(--soft) 100%);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

@media (max-width: 760px) {
  .level-grid {
    grid-template-columns: 1fr;
  }

  .level-card {
    padding: 0.95rem;
  }
}

/* =========================
   HEADER + HOME TWEAKS
   ========================= */

/* 1) masquer "Aller au contenu principal" */
.skip-link {
  display: none !important;
}

/* 2) header : titre plus gros + bouton thème à droite */
.app-header .header-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
}

.app-header .brand-block,
.app-header .header-brand {
  min-width: 0;
}

.app-header .brand-title,
.app-header .site-title,
.app-header .app-title {
  font-size: clamp(1.5rem, 1rem + 1.2vw, 2.1rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 700;
  font-family: "Spectral", Georgia, serif;
}

/* sous-titre éventuel du header */
.app-header .brand-subtitle,
.app-header .site-subtitle,
.app-header .app-subtitle {
  font-size: 0.98rem;
}

/* 3) pousser le bouton clair/sombre à droite */
.app-header .header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.app-header .theme-toggle,
.app-header .dark-mode-toggle,
.app-header button[aria-label*="thème"],
.app-header button[aria-label*="sombre"],
.app-header button[title*="thème"],
.app-header button[title*="sombre"] {
  justify-self: end;
  margin-left: auto;
}

/* sécurité si le bouton est un .btn dans le header */
.app-header .header-row > .btn:last-child,
.app-header .header-row > button:last-child {
  justify-self: end;
}

/* mobile */
@media (max-width: 760px) {
  .app-header .brand-title,
  .app-header .site-title,
  .app-header .app-title {
    font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem);
  }
}

/* Home : liens Référentiel / Outils sans soulignement */
.level-card__documents a,
.level-card__actions a,
.doc-link,
.btn-link {
  text-decoration: none;
}

.level-card__documents a:hover,
.level-card__actions a:hover,
.doc-link:hover,
.btn-link:hover {
  text-decoration: none;
}

/* =========================================
   PATCH HOME + HEADER — liens PDF + bleus plus doux
   Vérifié sur la structure actuelle :
   - Référentiel / Outils = <a> dans .level-card
   - bouton thème = .btn-theme-toggle
   ========================================= */

/* 1) Référentiel / Outils : supprimer le soulignement seulement sur la home */
.level-card a,
.level-card a:visited,
.level-card a:hover,
.level-card a:focus,
.level-card a:active {
  text-decoration: none !important;
}

/* 2) Bleus plus doux pour les "chips" / boutons concernés */
:root {
  --primary-soft-action: #dfe9fb;
  --primary-soft-action-hover: #e8effd;
  --primary-soft-border: rgba(49, 70, 124, 0.18);
  --primary-soft-text: #31467c;
}

/* Bouton thème dans le header */
.btn-theme-toggle {
  background: linear-gradient(180deg, var(--primary-soft-action) 0%, #d6e3fb 100%) !important;
  color: var(--primary-soft-text) !important;
  border: 1px solid var(--primary-soft-border) !important;
  box-shadow: 0 1px 3px rgba(35, 48, 80, 0.06) !important;
}

.btn-theme-toggle:hover {
  background: linear-gradient(180deg, var(--primary-soft-action-hover) 0%, #dfe9ff 100%) !important;
  color: #2b3f72 !important;
  border-color: rgba(49, 70, 124, 0.22) !important;
}

/* Bouton "Reprendre" et bouton "Ouvrir le dashboard" sur la home */
.home-hero .btn-primary,
.level-card .btn-primary,
.actions-row .btn-secondary,
.back-to-top-btn {
  background: linear-gradient(180deg, var(--primary-soft-action) 0%, #d6e3fb 100%) !important;
  color: var(--primary-soft-text) !important;
  border: 1px solid var(--primary-soft-border) !important;
  box-shadow: 0 1px 3px rgba(35, 48, 80, 0.06) !important;
}

.home-hero .btn-primary:hover,
.level-card .btn-primary:hover,
.actions-row .btn-secondary:hover,
.back-to-top-btn:hover {
  background: linear-gradient(180deg, var(--primary-soft-action-hover) 0%, #dfe9ff 100%) !important;
  color: #2b3f72 !important;
  border-color: rgba(49, 70, 124, 0.22) !important;
}

/* Onglets de navigation actifs en haut */
.top-nav .btn-link.active {
  background: linear-gradient(180deg, #edf3ff 0%, #e2ecff 100%) !important;
  color: #31467c !important;
  border: 1px solid rgba(49, 70, 124, 0.16) !important;
  border-radius: 999px;
}

/* Petites pills bleues éventuelles : un cran plus léger */
.dashboard-hero__eyebrow,
.period-card__eyebrow {
  background: #eef3ff;
  color: #3a4f86;
  border: 1px solid rgba(49, 70, 124, 0.10);
}

*** a/assets/css/styles.css
 :root {
   --bg: #f3ece1;
   --card: #fffbf5;
   --line: #d9ccb8;
   --ink: #2c3140;
   --muted: #686676;
   --ok: #2d6a47;
   --warn: #8b6318;
   --ko: #8a3f3a;
   --primary: #31467c;
   --primary-hover: #263762;
   --primary-soft: #eceff8;
   --soft: #f4ede2;
   --soft-2: #efe5d7;
   --accent: #a56d33;
   --accent-soft: #f3e3cf;
   --shadow-1: 0 6px 18px rgba(44, 49, 64, 0.07);
   --shadow-2: 0 14px 34px rgba(44, 49, 64, 0.12);
 }
 body {
   margin: 0;
   font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   font-optical-sizing: auto;
   font-weight: 520;
   letter-spacing: 0.003em;
   color: var(--ink);
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
 }
 .status-ok {
   color: var(--ok);
 }
 
 .status-warn {
   color: var(--warn);
 }
 
 .status-ko {
   color: var(--ko);
 }
 .progress-track {
 }
 
 .progress-fill {
 }
 .lesson-line {
 }
 
 .lesson-line:hover {
 }
 .card,
 #period-summary,
 #lesson-list,
 #lesson-detail {
 }
 
 .period-card__toggle {
 }
 
 .period-card__toggle:hover,
 .lesson-line:hover,
 .btn-secondary:hover {
 }
 
 .meta-pill,
 .period-card__summary-item,
 .period-box,
 .lesson-card {
 }
 
 .period-status-chip,
 .lesson-status-chip {
 }

/* ===== Matching / Ordering : rendu plus propre ===== */

.field-stack {
  display: grid;
  gap: 0.7rem;
}

.matching-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(190px, 1.2fr);
  align-items: center;
  gap: 0.9rem;
  padding: 0.72rem 0.82rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--card) 0%, var(--soft) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.matching-row > span {
  display: block;
  min-width: 0;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.25;
  padding-right: 0.2rem;
}

.matching-row select {
  width: 100%;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 0.68rem 2.35rem 0.68rem 0.82rem;
  border: 1px solid #cfbda5;
  border-radius: 12px;
  background-color: #fffdfa;
  color: var(--ink);
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: inset 0 1px 1px rgba(44, 49, 64, 0.04);

  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.matching-row select:hover {
  border-color: #bda98e;
  background-color: #fffaf4;
}

.matching-row select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow:
    0 0 0 3px rgba(49, 70, 124, 0.14),
    inset 0 1px 1px rgba(44, 49, 64, 0.04);
}

.matching-row select:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  background-color: var(--soft);
}

@media (max-width: 640px) {
  .matching-row {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding: 0.68rem 0.72rem;
  }

  .matching-row > span {
    padding-right: 0;
  }
}

/* optionnel : meilleur contraste en mode sombre */
[data-theme="dark"] .matching-row {
  background: linear-gradient(180deg, var(--card) 0%, var(--soft) 100%);
  box-shadow: none;
}

[data-theme="dark"] .matching-row select {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
  color: var(--ink);
}

[data-theme="dark"] .matching-row select:hover {
  background-color: rgba(255, 255, 255, 0.07);
}

/* ===== Lesson header / lexicon / progress refresh ===== */
.lesson-view {
  gap: 1rem;
}

.lesson-toolbar-shell {
  position: sticky;
  top: 0.45rem;
  z-index: 30;
}

.lesson-toolbar {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, transparent) 0%, color-mix(in srgb, var(--soft) 96%, transparent) 100%);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(12px);
}

.lesson-toolbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1rem 0.95rem;
}

.lesson-toolbar__left,
.lesson-toolbar__right {
  display: grid;
  gap: 0.55rem;
}

.lesson-toolbar__left {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
}

.lesson-toolbar__title-group {
  min-width: 0;
}

.lesson-toolbar__kicker {
  margin: 0 0 0.15rem;
  font-size: 0.73rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.lesson-toolbar__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "Spectral", Georgia, serif;
  font-size: 1.18rem;
  font-weight: 650;
  color: var(--ink);
}

.lesson-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.lesson-toolbar__btn {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--card) 0%, var(--soft) 100%);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  padding: 0.52rem 0.8rem;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.lesson-toolbar__btn:hover,
.lesson-toolbar__btn[aria-expanded="true"] {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  background: linear-gradient(180deg, var(--card) 0%, var(--primary-soft) 100%);
  box-shadow: 0 8px 18px rgba(44, 49, 64, 0.08);
}

.lesson-toolbar__btn--back {
  white-space: nowrap;
}

.lesson-toolbar__progress-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.lesson-toolbar__progress-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.58rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 78%, var(--soft));
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.lesson-toolbar__progress-track {
  position: relative;
  height: 0.52rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--soft-2) 72%, var(--line));
  overflow: hidden;
}

.lesson-toolbar__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
  transition: width 180ms ease;
}

.lesson-toolbar__panel {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 29;
}

.lesson-toolbar__panel-inner {
  margin-top: 0.45rem;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, transparent) 0%, color-mix(in srgb, var(--soft) 98%, transparent) 100%);
  box-shadow: var(--shadow-1);
}

.lesson-toolbar__panel-title {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.55rem;
}

.lesson-toolbar__panel-text {
  line-height: 1.45;
  color: var(--ink);
}

.lesson-toolbar__spacer {
  height: 0;
}

.lesson-hero {
  gap: 1rem;
  padding: 1.2rem;
}

.lesson-hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
}

.lesson-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.77rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.lesson-hero h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.4vw + 1rem, 2.2rem);
  line-height: 1.05;
  color: var(--ink);
}

.lesson-subtitle {
  margin-top: 0.45rem;
  color: var(--muted);
  line-height: 1.45;
}

.lesson-hero__scorebox {
  min-width: 220px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--card) 0%, var(--soft) 100%);
}

.lesson-hero__label {
  margin: 0 0 0.3rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.lesson-hero__scoreline {
  font-family: "Spectral", Georgia, serif;
  font-size: 1.28rem;
  font-weight: 700;
}

.lesson-hero__scoremeta {
  margin-top: 0.3rem;
}

.lesson-hero__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.lesson-hero__panel {
  padding: 0.95rem 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, transparent) 0%, color-mix(in srgb, var(--soft) 98%, transparent) 100%);
}

.lesson-hero__panel p:last-child {
  line-height: 1.48;
}

.lesson-hero__lexicon {
  display: grid;
  gap: 0.55rem;
}

.lesson-lexicon {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.lexicon-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.42rem 0.62rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 99%, transparent) 0%, color-mix(in srgb, var(--soft) 94%, transparent) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.55), 0 4px 12px rgba(44, 49, 64, 0.04);
  color: var(--ink);
}

.lexicon-chip__latin {
  font-weight: 800;
  color: var(--primary);
}

.lexicon-chip__sep {
  color: var(--muted);
  font-weight: 700;
}

.lexicon-chip__fr {
  color: var(--ink);
}

.lesson-flow-card {
  gap: 0.85rem;
}

.lesson-flow-card__topline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  align-items: end;
}

.lesson-flow-card__eyebrow {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.lesson-flow-card__title {
  margin-top: 0.2rem;
  color: var(--ink);
}

.lesson-flow-card__counter {
  font-weight: 800;
  color: var(--primary);
}

.lesson-flow-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.lesson-state-pill {
  padding: 0.72rem 0.86rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 98%, transparent) 0%, color-mix(in srgb, var(--soft) 98%, transparent) 100%);
  line-height: 1.42;
}

.lesson-focus-board {
  display: grid;
  gap: 0.85rem;
}

.lesson-step {
  display: grid;
  gap: 0.7rem;
}

.lesson-step__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.lesson-step__badge,
.lesson-step__caption {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 88%, var(--soft));
  font-size: 0.8rem;
  font-weight: 800;
}

.lesson-step__badge {
  color: var(--primary);
}

.lesson-step__caption {
  color: var(--muted);
}

@media (max-width: 900px) {
  .lesson-toolbar__inner,
  .lesson-hero__head,
  .lesson-hero__grid {
    grid-template-columns: 1fr;
  }

  .lesson-toolbar__left {
    grid-template-columns: 1fr;
  }

  .lesson-toolbar__actions,
  .lesson-toolbar__progress-meta {
    justify-content: flex-start;
  }

  .lesson-hero__scorebox {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .lesson-toolbar-shell {
    top: 0.2rem;
  }

  .lesson-toolbar__inner,
  .lesson-toolbar__panel-inner,
  .lesson-hero {
    padding-left: 0.82rem;
    padding-right: 0.82rem;
  }

  .lesson-toolbar__title {
    white-space: normal;
  }

  .lesson-toolbar__btn {
    width: fit-content;
  }

  .lexicon-chip {
    width: 100%;
    justify-content: space-between;
    border-radius: 14px;
  }
}

[data-theme="dark"] .lesson-toolbar,
[data-theme="dark"] .lesson-toolbar__panel-inner,
[data-theme="dark"] .lesson-hero__panel,
[data-theme="dark"] .lesson-hero__scorebox,
[data-theme="dark"] .lesson-state-pill,
[data-theme="dark"] .lexicon-chip {
  box-shadow: none;
}

[data-theme="dark"] .lesson-toolbar__btn:hover,
[data-theme="dark"] .lesson-toolbar__btn[aria-expanded="true"] {
  box-shadow: none;
}

/* =========================================
   LESSON VIEW — rendre le header/panels opaques
   ========================================= */

.lesson-view .lesson-toolbar-shell,
.lesson-view .lesson-toolbar,
.lesson-view .lesson-toolbar__panel,
.lesson-view .lesson-toolbar__panel-inner {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-image: none !important;
}

/* Header sticky principal */
.lesson-view .lesson-toolbar {
  background: var(--surface, #ffffff) !important;
  opacity: 1 !important;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Panneau ouvert sous le header : rappel / lexique */
.lesson-view .lesson-toolbar__panel,
.lesson-view .lesson-toolbar__panel-inner {
  background: var(--surface, #ffffff) !important;
  opacity: 1 !important;
  border-left: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-right: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}

/* Boutons dans le toolbar : lisibilité accrue */
.lesson-view .lesson-toolbar button,
.lesson-view .lesson-toolbar [role="button"],
.lesson-view .lesson-toolbar__panel button,
.lesson-view .lesson-toolbar__panel [role="button"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Chips de lexique : éviter tout effet de transparence parasite */
.lesson-view .lesson-toolbar__panel .lexicon-chip,
.lesson-view .lesson-toolbar__panel .lesson-lexicon-chip,
.lesson-view .lesson-toolbar__panel .chip {
  background: var(--surface-alt, #f5f7fb) !important;
  opacity: 1 !important;
}

/* Mode sombre : fond opaque, simple, lisible */
html[data-theme="dark"] .lesson-view .lesson-toolbar,
html[data-theme="dark"] .lesson-view .lesson-toolbar__panel,
html[data-theme="dark"] .lesson-view .lesson-toolbar__panel-inner {
  background: var(--surface, #1f2430) !important;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* =========================
   HOME BACKGROUND — ATRIUM
   ========================= */

.home-view {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 2rem);
  gap: 1.25rem;
}

/* image plein écran, uniquement sur la home */
.home-view::before,
.home-view::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.home-view::before {
  z-index: -2;
  background:
    linear-gradient(
      180deg,
      rgba(18, 15, 12, 0.76) 0%,
      rgba(33, 26, 20, 0.56) 22%,
      rgba(44, 34, 25, 0.38) 48%,
      rgba(16, 13, 10, 0.78) 100%
    ),
    url("../img/home-bg.webp") center 32% / cover no-repeat;
  transform: scale(1.02);
  transform-origin: center;
}

/* voile latéral pour garder les textes lisibles partout */
.home-view::after {
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      rgba(13, 10, 8, 0.50) 0%,
      rgba(13, 10, 8, 0.18) 24%,
      rgba(13, 10, 8, 0.14) 76%,
      rgba(13, 10, 8, 0.46) 100%
    );
}

/* la home respire un peu plus */
.home-view .card {
  border: 1px solid rgba(126, 99, 62, 0.18);
  box-shadow: 0 18px 40px rgba(16, 12, 9, 0.18);
  backdrop-filter: blur(8px) saturate(108%);
}

/* grand cartouche d’entrée */
.home-view .home-hero {
  min-height: clamp(260px, 42vh, 420px);
  align-content: end;
  padding: clamp(1.2rem, 2vw, 1.8rem);
  background:
    linear-gradient(
      180deg,
      rgba(34, 25, 19, 0.52) 0%,
      rgba(34, 25, 19, 0.72) 100%
    );
  border: 1px solid rgba(255, 245, 228, 0.16);
  box-shadow: 0 22px 54px rgba(12, 10, 8, 0.28);
  color: #f7efe2;
}

.home-view .home-hero h1,
.home-view .home-hero h2,
.home-view .home-hero h3,
.home-view .home-hero .tagline {
  color: #fff7ea;
}

.home-view .home-hero p,
.home-view .home-hero .intro {
  color: rgba(255, 244, 228, 0.92);
  max-width: 72ch;
}

/* cartes de niveaux : plus opaques pour lecture parfaite */
.home-view .level-card,
.home-view .actions-row .btn-secondary {
  background:
    linear-gradient(
      180deg,
      rgba(255, 252, 247, 0.94) 0%,
      rgba(245, 236, 223, 0.94) 100%
    );
}

.home-view .level-card {
  border: 1px solid rgba(118, 90, 49, 0.14);
}

.home-view .level-card h1,
.home-view .level-card h2,
.home-view .level-card h3 {
  color: #342922;
}

.home-view .level-card p,
.home-view .level-card .intro,
.home-view .level-card .helper,
.home-view .level-card .meta-pill {
  color: #5a4b40;
}

.home-view .level-card .meta-pill {
  background: rgba(244, 235, 223, 0.88);
  border-color: rgba(118, 90, 49, 0.12);
}

.home-view .btn-primary {
  box-shadow: 0 8px 18px rgba(36, 50, 111, 0.22);
}

.home-view .btn-secondary {
  border-color: rgba(118, 90, 49, 0.14);
}

/* un peu plus d’air sur mobile */
@media (max-width: 740px) {
  .home-view {
    min-height: auto;
  }

  .home-view::before {
    background:
      linear-gradient(
        180deg,
        rgba(18, 15, 12, 0.82) 0%,
        rgba(31, 24, 18, 0.60) 28%,
        rgba(16, 13, 10, 0.82) 100%
      ),
      url("../img/home-bg.webp") center 28% / cover no-repeat;
  }

  .home-view .home-hero {
    min-height: 220px;
    padding: 1rem;
  }
}

/* =========================
   HOME HERO TYPO — ATRIUM
   ========================= */

.home-view .home-hero {
  display: grid;
  align-content: end;
  gap: 0.65rem;
}

.home-view .home-hero__eyebrow {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 244, 228, 0.78);
}

.home-view .home-hero__brand {
  margin: 0;
  display: grid;
  gap: 0.18em;
  font-family: "Spectral", Georgia, serif;
  font-size: clamp(3rem, 8vw, 6.4rem);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff8ec;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.22),
    0 10px 28px rgba(0, 0, 0, 0.24);
}

.home-view .home-hero__brand span {
  display: block;
  font-size: 0.34em;
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 243, 224, 0.96);
}

.home-view .home-hero__headline {
  margin: 0.2rem 0 0 0;
  max-width: 26ch;
  font-size: clamp(1.08rem, 1rem + 1.1vw, 1.55rem);
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 245, 229, 0.96);
}

.home-view .home-hero__lead {
  margin: 0.2rem 0 0 0;
  max-width: 72ch;
  font-size: clamp(0.98rem, 0.94rem + 0.26vw, 1.08rem);
  line-height: 1.6;
  color: rgba(255, 244, 228, 0.9);
}

.home-view .home-hero__meta {
  margin-top: 0.45rem;
}

.home-view .home-hero .meta-pill {
  background: rgba(255, 247, 236, 0.12);
  color: #fff3df;
  border: 1px solid rgba(255, 241, 220, 0.14);
  backdrop-filter: blur(3px);
}

.home-view .home-hero__actions {
  margin-top: 0.35rem;
}

@media (max-width: 900px) {
  .home-view .home-hero__brand {
    font-size: clamp(2.6rem, 10vw, 4.5rem);
    letter-spacing: 0.04em;
  }

  .home-view .home-hero__brand span {
    font-size: 0.38em;
    letter-spacing: 0.12em;
  }

  .home-view .home-hero__headline {
    max-width: 30ch;
  }
}

@media (max-width: 740px) {
  .home-view .home-hero {
    gap: 0.55rem;
  }

  .home-view .home-hero__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }

  .home-view .home-hero__brand {
    font-size: clamp(2.2rem, 11vw, 3.2rem);
    line-height: 0.94;
    letter-spacing: 0.03em;
  }

  .home-view .home-hero__brand span {
    font-size: 0.42em;
    letter-spacing: 0.08em;
  }

  .home-view .home-hero__headline {
    font-size: 1rem;
    line-height: 1.28;
  }

  .home-view .home-hero__lead {
    font-size: 0.95rem;
    line-height: 1.5;
  }
}

/* =========================
   HOME FULLSCREEN DESKTOP
   ========================= */

.home-view {
  min-height: calc(100dvh - 2rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  align-content: stretch;
}

/* hero plus compact, mais plus noble */
.home-view .home-hero {
  min-height: clamp(180px, 26vh, 280px);
  padding: clamp(1rem, 1.4vw, 1.5rem);
  display: grid;
  align-content: end;
  gap: 0.55rem;
}

/* gros titre, mais moins gourmand verticalement */
.home-view .home-hero__brand {
  margin: 0;
  font-size: clamp(2.8rem, 5.2vw, 5.6rem);
  line-height: 0.9;
}

.home-view .home-hero__brand span {
  display: block;
  margin-top: 0.16em;
  font-size: 0.34em;
  line-height: 1.02;
}

.home-view .home-hero__headline {
  margin: 0.15rem 0 0 0;
  font-size: clamp(1rem, 1.1vw, 1.35rem);
  line-height: 1.2;
  max-width: 34ch;
}

.home-view .home-hero__lead {
  margin: 0.1rem 0 0 0;
  font-size: clamp(0.92rem, 0.85rem + 0.18vw, 1rem);
  line-height: 1.45;
  max-width: 78ch;
}

.home-view .home-hero__meta {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.home-view .home-hero .meta-pill {
  padding: 0.35rem 0.6rem;
  font-size: 0.82rem;
  line-height: 1.1;
}

/* la rangée des niveaux doit occuper le coeur de l'écran */
.home-view .level-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

/* cartes plus compactes pour tenir sans scroll */
.home-view .level-card {
  padding: 1rem;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  gap: 0.55rem;
  min-height: 0;
}

.home-view .level-card h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.15;
}

.home-view .level-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.42;
}

.home-view .level-card .metric,
.home-view .level-card .meta-pill {
  font-size: 0.8rem;
}

/* ligne finale moins envahissante */
.home-view .actions-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  padding-top: 0;
}

/* grand écran : zéro scroll si la fenêtre est raisonnable */
@media (min-width: 1100px) and (min-height: 760px) {
  html,
  body {
    height: 100%;
  }

  body:has(.home-view) {
    overflow: hidden;
  }

  .home-view {
    height: calc(100dvh - 2rem);
  }
}

/* écrans desktop un peu plus bas : on compacte davantage */
@media (min-width: 1100px) and (max-height: 820px) {
  .home-view {
    gap: 0.75rem;
  }

  .home-view .home-hero {
    min-height: clamp(150px, 22vh, 220px);
    padding: 0.95rem 1.1rem;
  }

  .home-view .home-hero__brand {
    font-size: clamp(2.5rem, 4.8vw, 4.8rem);
  }

  .home-view .home-hero__headline {
    font-size: 1rem;
  }

  .home-view .home-hero__lead {
    font-size: 0.9rem;
    line-height: 1.38;
  }

  .home-view .level-grid {
    gap: 0.8rem;
  }

  .home-view .level-card {
    padding: 0.9rem;
    gap: 0.45rem;
  }

  .home-view .level-card p {
    font-size: 0.88rem;
    line-height: 1.34;
  }
}

/* en-dessous, on garde un comportement fluide avec scroll */
/* desktop : les 3 niveaux restent en ligne */
@media (min-width: 980px) {
  .home-view .level-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
  }
}

/* tablette : 2 colonnes */
@media (min-width: 700px) and (max-width: 979px) {
  body:has(.home-view) {
    overflow: auto;
  }

  .home-view {
    min-height: auto;
    height: auto;
    grid-template-rows: auto auto auto;
  }

  .home-view .level-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
  }
}

/* mobile : 1 colonne */
@media (max-width: 699px) {
  body:has(.home-view) {
    overflow: auto;
  }

  .home-view {
    min-height: auto;
    height: auto;
    grid-template-rows: auto auto auto;
  }

  .home-view .level-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}

/* =========================
   GLOBAL BACKGROUND — ATRIUM
   image de fond sur tout le site
   ========================= */

html {
  background: #14110f;
}

body {
  position: relative;
  isolation: isolate;
  background: transparent;
}

/* fond global unique */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: -2;
  background:
    linear-gradient(
      180deg,
      rgba(15, 12, 10, 0.84) 0%,
      rgba(28, 21, 16, 0.58) 24%,
      rgba(40, 30, 22, 0.30) 50%,
      rgba(15, 12, 10, 0.84) 100%
    ),
    url("../img/home-bg.webp") center center / cover no-repeat;
  transform: scale(1.02);
  transform-origin: center;
}

body::after {
  z-index: -1;
  background:
    radial-gradient(
      circle at 50% 12%,
      rgba(255, 248, 236, 0.08) 0%,
      rgba(255, 248, 236, 0) 34%
    ),
    linear-gradient(
      90deg,
      rgba(10, 8, 7, 0.34) 0%,
      rgba(10, 8, 7, 0.12) 18%,
      rgba(10, 8, 7, 0.12) 82%,
      rgba(10, 8, 7, 0.34) 100%
    );
}

#app {
  position: relative;
  z-index: 1;
}

/* on neutralise les couches de fond spécifiques à la home
   pour éviter une double image ou un double voile */
.home-view::before,
.home-view::after {
  content: none;
}

/* conteneurs principaux : plus opaques pour lecture parfaite */
.card,
#period-summary,
#lesson-list,
#lesson-detail {
  background: linear-gradient(
    180deg,
    rgba(255, 252, 246, 0.94) 0%,
    rgba(247, 239, 227, 0.94) 100%
  );
  backdrop-filter: blur(6px) saturate(108%);
}

/* éléments internes des dashboards et leçons */
.period-card__toggle,
.lesson-line,
.period-box,
.lesson-card {
  background: linear-gradient(
    180deg,
    rgba(249, 242, 231, 0.90) 0%,
    rgba(244, 235, 223, 0.90) 100%
  );
}

/* champs de réponse : rester très clairs sur fond illustré */
input[type="text"],
textarea,
select {
  background: rgba(255, 253, 249, 0.97);
}

/* boutons secondaires un peu plus solides visuellement */
.btn-secondary {
  background: rgba(255, 250, 244, 0.92);
}

/* sur mobile, on garde le même principe mais avec un voile un peu plus fort */
@media (max-width: 740px) {
  body::before {
    background:
      linear-gradient(
        180deg,
        rgba(15, 12, 10, 0.88) 0%,
        rgba(30, 23, 18, 0.66) 28%,
        rgba(15, 12, 10, 0.88) 100%
      ),
      url("../img/home-bg.webp") center 30% / cover no-repeat;
  }

  body::after {
    background:
      linear-gradient(
        180deg,
        rgba(10, 8, 7, 0.10) 0%,
        rgba(10, 8, 7, 0.18) 100%
      );
  }
}

/* =========================
   HOME: suppression du faux header
   ========================= */

/* lien d’évitement accessible, mais hors flux tant qu’il n’est pas focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  overflow: visible;
  z-index: 2000;
  padding: 0.7rem 0.95rem;
  border-radius: 12px;
  background: #fffaf2;
  color: #2c241d;
  border: 1px solid rgba(120, 93, 58, 0.22);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  text-decoration: none;
}

/* sur la home, on retire la coque supérieure qui fait doublon avec le hero */
#app[data-route="home"] > .app-header,
#app[data-route="home"] > .top-nav {
  display: none;
}

/* on enlève l’espace haut parasite sur la home */
#app[data-route="home"] {
  padding-top: 0;
}

#app[data-route="home"] > #view-root {
  padding-top: 0;
}

/* si tu veux vraiment coller le hero au haut utile de l’écran */
#app[data-route="home"] .home-view {
  margin-top: 0;
}

/* ===== Références de leçon : tableaux de conjugaison / déclinaison ===== */

.reference-panel-stack {
  display: grid;
  gap: 14px;
}

.reference-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.reference-card {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 18px;
  padding: 12px 13px 11px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.reference-card h4 {
  margin: 0 0 8px;
  font-size: 0.98rem;
  line-height: 1.24;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.reference-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 320px;
}

.reference-table th,
.reference-table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
}

.reference-table--compact th,
.reference-table--compact td {
  padding: 7px 9px;
  font-size: 0.94rem;
  line-height: 1.3;
  white-space: nowrap;
}

/* Conjugaisons : confort large écran */
.lesson-view .reference-panel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Déclinaisons : alignées sur PC */
.lesson-view .reference-panel-stack {
  grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1fr) minmax(260px, 1.1fr);
  align-items: start;
}

/* Tablette */
@media (max-width: 1100px) {
  .lesson-view .reference-panel-grid,
  .lesson-view .reference-panel-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 700px) {
  .lesson-view .reference-panel-grid,
  .lesson-view .reference-panel-stack {
    grid-template-columns: 1fr;
  }
}

  .reference-card {
    padding: 11px 11px 10px;
    border-radius: 14px;
  }

  .reference-table {
    min-width: 280px;
  }

  .reference-table--compact th,
  .reference-table--compact td {
    font-size: 0.9rem;
    padding: 6px 8px;
  }
}

/* Déclinaisons : pas de mini-scroll, tableau resserré au contenu */
.table-wrap--flat {
  overflow: visible;
}

.reference-table--declension {
  width: auto;
  max-width: 100%;
  min-width: 0;
  display: inline-table;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.22;
}

.reference-table--declension th,
.reference-table--declension td {
  padding: 0.34rem 0.46rem;
  white-space: nowrap;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.reference-table--declension th {
  font-weight: 700;
}

.reference-table--declension tr:last-child td {
  border-bottom: none;
}

.reference-table--declension th:first-child,
.reference-table--declension td:first-child {
  padding-left: 0;
  padding-right: 0.72rem;
  text-align: left;
}

.reference-table--declension th:not(:first-child),
.reference-table--declension td:not(:first-child) {
  text-align: center;
}

@media (max-width: 700px) {
  .reference-table--declension {
    font-size: 0.9rem;
  }

  .reference-table--declension th,
  .reference-table--declension td {
    padding: 0.3rem 0.38rem;
  }

  .reference-table--declension th:first-child,
  .reference-table--declension td:first-child {
    padding-right: 0.58rem;
  }
}

/* Hover plus doux : bleu grisé */
.btn-primary:hover,
button:not([class]):hover {
  background: #6b7f93;
  border-color: #6b7f93;
  color: #ffffff;
}

.btn-primary:focus,
.btn-primary:focus-visible,
button:not([class]):focus,
button:not([class]):focus-visible {
  background: #5f7286;
  border-color: #5f7286;
  color: #ffffff;
  outline: none;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:focus-visible,
a.btn-secondary:hover,
a.btn-secondary:focus,
a.btn-secondary:focus-visible,
.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:focus-visible {
  background: #5f7286 !important;
  border-color: #5f7286 !important;
  color: #ffffff !important;
  outline: none;
}

.btn-secondary:hover *,
.btn-secondary:focus *,
.btn-secondary:focus-visible *,
a.btn-secondary:hover *,
a.btn-secondary:focus *,
a.btn-secondary:focus-visible * {
  color: #ffffff !important;
}


/* =========================
   Home view — Option A
   sobre, éditoriale, app premium
   ========================= */

.level-card {
  gap: 1rem;
  padding: 1.2rem 1.2rem 1.15rem;
}

.level-card__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  margin-top: 0.1rem;
}

.level-card__tool.btn {
  min-height: 34px;
  padding: 0.42rem 0.78rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.56);
  border-color: rgba(63, 79, 116, 0.16);
  color: var(--ink);
  box-shadow: none;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1;
}

.level-card__tool.btn:hover {
  background: rgba(255, 255, 255, 0.74);
  border-color: rgba(63, 79, 116, 0.26);
  box-shadow: 0 8px 20px rgba(24, 34, 54, 0.06);
}

.level-card__tool-emoji {
  font-size: 0.95rem;
  line-height: 1;
}

.level-card__cta.btn {
  margin-top: 0.15rem;
  width: min(100%, 21rem);
  min-height: 48px;
  padding: 0.78rem 1.12rem;
  border-radius: 16px;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(74, 101, 153, 0.96) 0%,
    rgba(55, 82, 131, 0.96) 100%
  );
  border-color: rgba(46, 70, 117, 0.68);
  color: #fff;
  box-shadow: 0 10px 22px rgba(32, 49, 84, 0.18);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.level-card__cta.btn:hover {
  background: linear-gradient(
    180deg,
    rgba(86, 114, 168, 0.98) 0%,
    rgba(63, 89, 141, 0.98) 100%
  );
  border-color: rgba(46, 70, 117, 0.82);
  box-shadow: 0 14px 28px rgba(32, 49, 84, 0.22);
}

.level-card__cta-emoji {
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 640px) {
  .level-card__cta.btn {
    width: 100%;
  }
}