.ds-lesson__body .grammar-observe,
.ds-lesson__body .grammar-manipulate,
.ds-lesson__body .grammar-map {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
}

.ds-lesson__body .grammar-observe {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--color-border));
  border-top: 4px solid var(--accent);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--accent) 4%, white),
    color-mix(in srgb, var(--accent) 1%, white));
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 6%, rgba(15,23,42,.04));
}

.ds-lesson__body .grammar-observe__label,
.ds-lesson__body .grammar-manipulate__label {
  display: inline-flex;
  margin-bottom: .65rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-family: var(--font-titre);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ds-lesson__body .grammar-observe__label {
  background: color-mix(in srgb, var(--accent) 14%, white);
  color: color-mix(in srgb, var(--accent) 82%, #111827);
}

.ds-lesson__body .grammar-observe p:last-child,
.ds-lesson__body .grammar-manipulate p:last-child {
  margin-bottom: 0;
}

.ds-lesson__body .grammar-manipulate {
  border: 1px solid #ddd6fe;
  border-left: 4px solid #7c3aed;
  background: linear-gradient(145deg, #faf5ff, #f5f3ff);
  box-shadow: 0 6px 18px rgba(76, 29, 149, .06);
}

.ds-lesson__body .grammar-manipulate__label { background: #ede9fe; color: #5b21b6; }

.ds-lesson__body .grammar-example {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin: var(--space-md) 0;
  font-size: 1.05rem;
}

.ds-lesson__body .grammar-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .28rem .62rem;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--color-border));
  border-radius: .55rem;
  background: color-mix(in srgb, var(--accent) 9%, white);
  font-weight: 700;
}

/* Un chip qui contient une phrase complète (pas un mot unique)
   doit préserver les espaces autour des balises inline. */
.ds-lesson__body .grammar-chip:has(strong) {
  display: inline-block;
}

/* Partie précise d'une phrase que l'élève doit observer ou traiter.
   Le fond, le filet inférieur et l'élément sémantique <mark> complètent
   la couleur : le repère reste perceptible sans dépendre du gras. */
.ds-lesson__body mark.phrase-cible {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .02em .18em .07em;
  border-bottom: .16em solid #d97706;
  border-radius: .22em .22em .1em .1em;
  background: #fff2b8;
  color: #713f12;
  font-weight: inherit;
}

@media (forced-colors: active) {
  .ds-lesson__body mark.phrase-cible {
    border: 2px solid CanvasText;
  }
}

.ds-lesson__body .grammar-chip--subject { border-color: #2563eb; background: #eff6ff; color: #1e3a8a; }
.ds-lesson__body .grammar-chip--predicate { border-color: #dc2626; background: #fef2f2; color: #7f1d1d; }
.ds-lesson__body .grammar-chip--cp { border-color: #7c3aed; background: #f5f3ff; color: #4c1d95; }
.ds-lesson__body .grammar-chip--word { border-color: #168f5b; background: #eefbf5; color: #0f5d3d; }

.ds-lesson__body .grammar-arrow {
  color: var(--color-text-muted);
  font-weight: 800;
}

.ds-lesson__body .grammar-map {
  overflow-x: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--color-border));
  border-left: 4px solid color-mix(in srgb, var(--accent) 50%, var(--color-border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 2%, white), white);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

.ds-lesson__body .grammar-map ul {
  margin: 0;
  padding-left: 1.2rem;
}

.ds-lesson__body .grammar-map li + li {
  margin-top: .4rem;
}

.ds-lesson__body .poeme-graphique-demo,
.ds-lesson__body .oeuvre-etude {
  margin: var(--space-lg) 0;
  padding: clamp(.8rem, 2vw, 1.3rem);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--color-border));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--accent) 3%, white);
  text-align: center;
}

.ds-lesson__body .poeme-graphique-demo__couronne {
  display: grid;
  max-width: 25rem;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
  margin: 0 auto;
  padding: 1.4rem 1.8rem;
  border-radius: 50%;
  background: #dff3dc;
  color: #24502a;
  font-weight: 750;
  transform: rotate(-2deg);
}

.ds-lesson__body .poeme-graphique-demo__couronne span:nth-child(even) { transform: rotate(10deg); }
.ds-lesson__body .poeme-graphique-demo__tronc { width: 6.5rem; margin: 0 auto; padding: .35rem; background: #8b5e3c; color: white; font-weight: 750; }
.ds-lesson__body .poeme-graphique-demo figcaption,
.ds-lesson__body .oeuvre-etude figcaption { margin-top: .75rem; color: var(--color-text-muted); }
.ds-lesson__body .poeme-effets { display: grid; gap: .8rem; margin-bottom: 1rem; text-align: center; }
.ds-lesson__body .poeme-effets__fort { font-size: clamp(1.35rem, 4vw, 2.2rem); font-weight: 950; letter-spacing: .06em; }
.ds-lesson__body .poeme-effets__faible { justify-self: end; color: #64748b; font-size: .72rem; }
.ds-lesson__body .poeme-effets__eclate { justify-self: center; line-height: 1.45; transform: rotate(-5deg); }
.ds-lesson__body .oeuvre-etude svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: .75rem; box-shadow: 0 10px 28px rgba(15, 23, 42, .16); }

.ds-lesson__body .grammar-keypoint {
  margin: var(--space-sm) 0 var(--space-lg);
  padding: .7rem .85rem;
  border-left: 3px solid #60a5fa;
  border-radius: 0 .55rem .55rem 0;
  background: #f8fafc;
  color: #334155;
}

.ds-lesson__body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
}

/* Les tableaux de conjugaison défilent dans leur wrapper spécialisé. Ils
 * restent de vrais tableaux afin de conserver leurs largeurs de colonnes. */
.ds-lesson__body .ds-conjugation-table-wrap .ds-conjugation-table {
  display: table;
  overflow: visible;
}

.ds-lesson__body th,
.ds-lesson__body td {
  min-width: 8rem;
  padding: .65rem .75rem;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.ds-lesson__body th {
  background: color-mix(in srgb, var(--accent) 8%, var(--color-surface));
  color: color-mix(in srgb, var(--accent) 72%, #111827);
  font-weight: 800;
}

.ds-lesson__body .grammar-tests {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}

.ds-lesson__body .grammar-test {
  padding: var(--space-md);
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--color-border));
  border-top: 3px solid color-mix(in srgb, var(--accent) 50%, var(--color-border));
  border-radius: var(--radius-lg);
  background: white;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 5%, rgba(15,23,42,.04));
}

.ds-lesson__body .grammar-test strong {
  display: block;
  margin-bottom: var(--space-xs);
  color: color-mix(in srgb, var(--accent) 82%, #111827);
}

.ds-lesson__body .grammar-return {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.ds-lesson__body .grammar-return a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: .5rem;
  padding: .55rem .85rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--color-border));
  border-radius: .65rem;
  background: white;
  color: color-mix(in srgb, var(--accent) 72%, #111827);
  font-weight: 720;
  text-decoration: none;
}

.ds-lesson__body .grammar-return a:hover,
.ds-lesson__body .grammar-return a:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, white);
  outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
  outline-offset: 2px;
}

/* Rythme visuel des fiches courtes : sections nettes, sans sommaire redondant. */
.ds-lesson__body > h2 {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: clamp(2rem, 5vw, 3.25rem);
  margin-bottom: var(--space-md);
  color: color-mix(in srgb, var(--accent) 78%, #111827);
  font-size: clamp(1.28rem, 2vw, 1.55rem);
}

.ds-lesson__body > h2::before {
  content: "";
  width: 1.8rem;
  height: .24rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--accent);
}

.ds-lesson__body > .grammar-practice-title {
  color: color-mix(in srgb, var(--accent) 72%, #111827);
}

.ds-lesson__body > .grammar-practice-title::before {
  background: var(--accent);
}

.ds-lesson__body > h2:first-of-type {
  margin-top: var(--space-lg);
}

.ds-lesson__body .grammar-legend {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: var(--space-md) 0 var(--space-xl);
  padding: 0;
  list-style: none;
  counter-reset: grammar-legend;
}

.ds-lesson__body .grammar-legend li {
  position: relative;
  display: flex;
  min-height: 6.5rem;
  flex-direction: column;
  gap: .35rem;
  padding: .8rem .85rem .8rem 2.6rem;
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-border-strong);
  border-radius: .75rem;
  background: white;
  counter-increment: grammar-legend;
}

.ds-lesson__body .grammar-legend li::before {
  content: counter(grammar-legend);
  position: absolute;
  top: .72rem;
  left: .72rem;
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface-alt);
  font-size: .75rem;
  font-weight: 800;
}

.ds-lesson__body .grammar-legend li[data-kind="cp"] { border-top-color: #7c3aed; background: #faf8ff; }
.ds-lesson__body .grammar-legend li[data-kind="subject"] { border-top-color: #2563eb; background: #f7faff; }
.ds-lesson__body .grammar-legend li[data-kind="predicate"] { border-top-color: #dc2626; background: #fff8f8; }
.ds-lesson__body .grammar-legend span { color: #4b5563; font-size: .9rem; line-height: 1.45; }


/* La méthode est le geste intellectuel que l'élève doit retenir. */
.ds-lesson__body .grammar-method {
  position: relative;
  overflow: hidden;
  margin: var(--space-md) 0 var(--space-xl);
  border: 1px solid #1e3a5f;
  border-radius: 1rem;
  background: linear-gradient(145deg, #0b1f3a, #102c50);
  box-shadow: 0 12px 28px rgba(8, 30, 58, .16);
  color: white;
}

.ds-lesson__body .grammar-method::after {
  content: "";
  position: absolute;
  top: -3rem;
  right: -2rem;
  width: 9rem;
  height: 9rem;
  border: 1px solid rgba(147, 197, 253, .16);
  border-radius: 50%;
  pointer-events: none;
}

.ds-lesson__body .grammar-method__heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin: 0;
  padding: 1rem 1.1rem .85rem;
}

.ds-lesson__body .grammar-method__heading span {
  color: #93c5fd;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.ds-lesson__body .grammar-method__heading strong {
  color: #dbeafe;
  font-size: .9rem;
  font-weight: 650;
}

.ds-lesson__body .grammar-method ol {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  background: rgba(147, 197, 253, .18);
  list-style: none;
  counter-reset: grammar-method;
}

.ds-lesson__body .grammar-method li {
  position: relative;
  display: grid;
  min-height: 3.45rem;
  grid-template-columns: 2.15rem 1fr;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  background: rgba(8, 30, 58, .96);
  counter-increment: grammar-method;
}

.ds-lesson__body .grammar-method li::before {
  content: counter(grammar-method);
  display: grid;
  width: 2.05rem;
  height: 2.05rem;
  place-items: center;
  border: 1px solid #60a5fa;
  border-radius: 50%;
  background: #163f70;
  color: white;
  font-size: .9rem;
  font-weight: 850;
}

.ds-lesson__body .grammar-method li p {
  margin: 0;
  color: #eaf3ff;
  line-height: 1.45;
}

.ds-lesson__body .grammar-method li p > strong:first-child {
  color: #7dd3fc;
  font-weight: 850;
}

@media (max-width: 42rem) {
  .ds-lesson__body .grammar-observe,
  .ds-lesson__body .grammar-manipulate,
  .ds-lesson__body .grammar-map,
  .ds-lesson__body .grammar-test {
    padding: var(--space-sm);
  }

  .ds-lesson__body .grammar-example {
    align-items: flex-start;
    flex-direction: column;
  }

  .ds-lesson__body .grammar-arrow {
    transform: rotate(90deg);
    margin-left: .6rem;
  }

  .ds-lesson__body .grammar-legend {
    grid-template-columns: 1fr;
  }

  .ds-lesson__body .grammar-legend li {
    min-height: 0;
  }


  .ds-lesson__body .grammar-method__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: .15rem;
  }

  .ds-lesson__body .grammar-method li {
    min-height: 3.75rem;
    grid-template-columns: 1.9rem 1fr;
    gap: .6rem;
    padding-inline: .8rem;
  }

  .ds-lesson__body .grammar-method li::before {
    width: 1.8rem;
    height: 1.8rem;
  }


}