/* kit-base.css — couche de base partagée par toutes les leçons V1+.
   Trois rôles :
   1) Typo + paddings confort dyslexie : .lesson-step
   2) Hover global feedback cohérent (cyan soft) sur tout ce qui est cliquable
   3) Cibles cliquables ≥ 44px (norme accessibilité Apple/WCAG)

   IMPORTANT : pas de !important agressif — on cible avec une spécificité
   suffisante pour passer devant les classes utilitaires Tailwind sans casser. */

/* ========================================================================
   1) Wrapper leçon — typo confort dyslexie
   ======================================================================== */
.lesson-step {
  font-size: 15px;
  line-height: 1.65;
}
.lesson-step p,
.lesson-step li {
  line-height: 1.65;
}
.lesson-step h1 { font-size: 1.75rem; }
.lesson-step h2 { font-size: 1.4rem; }
.lesson-step h3 { font-size: 1.15rem; }

/* Les cards génériques (rounded-lg/xl + border) gagnent un peu de respiration */
.lesson-step .rounded-lg,
.lesson-step .rounded-xl {
  /* Pas de padding override agressif : on laisse Tailwind décider, mais on
     augmente le gap interne via la classe .lesson-pad si besoin. */
}
.lesson-step .lesson-pad { padding: 1.1rem; }

/* ========================================================================
   2) Hover global feedback — cyan soft cohérent
   Ne s'applique pas aux éléments qui ont déjà leur propre hover défini
   (anatomy-zone, flip, etc.) — ils gardent leur comportement.
   ======================================================================== */
.lesson-step [role="button"]:hover,
.lesson-step button:not(:disabled):hover,
.lesson-step [data-gloss]:hover,
.lesson-step .kit-quiz-opt:not(:disabled):hover,
.lesson-step .kit-qna-opt:not(:disabled):hover,
.lesson-step .kit-drag-item:hover {
  outline: 2px solid rgba(34,211,238,0.35);
  outline-offset: 2px;
  transition: outline-color 150ms, transform 150ms;
}

/* Focus visible cohérent (clavier) — plus net que hover */
.lesson-step [role="button"]:focus-visible,
.lesson-step button:not(:disabled):focus-visible,
.lesson-step [data-gloss]:focus-visible {
  outline: 2px solid #22d3ee;
  outline-offset: 3px;
}

/* ========================================================================
   3) Cibles cliquables ≥ 44px (accessibilité tactile)
   ======================================================================== */
.lesson-step .kit-quiz-opt,
.lesson-step .kit-qna-opt,
.lesson-step button[data-quiz-opt],
.lesson-step button[data-qna-opt],
.lesson-step button[data-quiz-next] {
  min-height: 44px;
}

/* Les data-gloss inline ne sont pas des cibles tactiles plein écran — on garde
   leur taille de texte mais on s'assure que la zone de clic est généreuse. */
.lesson-step [data-gloss] {
  padding: 0.1em 0.25em;
}

/* ========================================================================
   4) Dévoilement progressif (helper transverse)
   Un élément avec [data-progressive-hidden] est invisible et inerte au
   départ. Un autre composant (kit-qna, kit-cascade, etc.) ajoute
   data-progressive-shown="1" pour le révéler avec animation soft.
   ======================================================================== */
[data-progressive-hidden]:not([data-progressive-shown="1"]) {
  opacity: 0;
  pointer-events: none;
  filter: blur(6px);
  transform: translateY(8px);
  transition: opacity 450ms ease, filter 450ms ease, transform 450ms ease;
}
[data-progressive-hidden][data-progressive-shown="1"] {
  opacity: 1;
  pointer-events: auto;
  filter: none;
  transform: none;
}