/* Ajouts de Sorotama aux écrans D v2 (même palette, mêmes traits) : carte d'introduction d'une leçon. */
.intro-lecon { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px; background: rgba(43, 30, 38, .38); }
.intro-lecon[hidden] { display: none; }
.intro-lecon .carte-intro { width: min(100%, 460px); max-height: calc(100svh - 36px); overflow: auto; display: grid; gap: 14px; justify-items: center; text-align: center; padding: 22px 20px 20px; }
.intro-lecon .etiquette { justify-self: center; }
.intro-lecon h2 { margin: 0; font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.1; }
.intro-lecon p { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.45; }
.intro-lecon p b { font-weight: 900; }
.intro-lecon .btn { width: 100%; justify-content: center; }
.d-lecon.trois-tiges #boulier, .lecon.trois-tiges #boulier { max-width: 100%; }
.montre { display: grid; gap: 12px; justify-items: center; text-align: center; max-width: 420px; margin: 4px auto 6px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .14); }
.montre p { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
/* Fin de séance : avec « Montre à Maman », le contenu peut dépasser l'écran ; il défile au lieu d'être coupé. */
.d-lecon .fin { align-content: safe center; }
.d-lecon .fin .tampons { max-width: min(360px, 100%); }
.d-lecon .fin .bulle { max-width: min(20em, 100%); }
.d-lecon .fin { grid-template-columns: minmax(0, 1fr); }
.d-lecon .fin .montre { width: min(420px, 100%); }
/* Ronds de progression : une leçon en compte jusqu'à 10 ; sur petit téléphone ils rétrécissent au lieu d'élargir l'écran. */
.lecon-haut .progres { flex: 1 1 auto; min-width: 0; justify-content: center; }
.lecon-haut .progres li { width: auto; flex: 0 1 34px; min-width: 12px; }