*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-active);
  background-color: var(--bg-primary);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  line-height: 1.6;
  letter-spacing: var(--letter-spacing);
  word-spacing: var(--word-spacing);
  transition: background-color var(--transition-normal), color var(--transition-normal);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Typographie Dyslexie */
body.font-dys {
  font-family: var(--font-dys) !important;
  line-height: 2 !important;
  word-spacing: 0.18em !important;
  letter-spacing: 0.06em !important;
}

/* Échelles de taille de police accessibilité */
body.text-scale-sm {
  font-size: 13.5px;
}

body.text-scale-md {
  font-size: 15px;
}

body.text-scale-lg {
  font-size: 17px;
}

body.text-scale-xl {
  font-size: 19px;
}

/* Masque / Règle de lecture pour canaliser le regard (TDAH / Dyspraxie) */
#reading-ruler {
  position: fixed;
  left: 0;
  width: 100%;
  height: 40px;
  background: rgba(254, 240, 138, 0.28);
  border-top: 2px dashed rgba(202, 138, 4, 0.6);
  border-bottom: 2px dashed rgba(202, 138, 4, 0.6);
  pointer-events: none;
  z-index: 9999;
  display: none;
  transition: top 0.05s ease-out;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.18);
}

#reading-ruler.active {
  display: block;
}

/* Boutons accessibles */
button,
.btn {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 38px;
  transition: all var(--transition-fast);
  text-decoration: none;
  touch-action: manipulation;
}

button:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 3px;
}

button:active,
.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: #2563EB;
  color: white;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover {
  background: #1D4ED8;
  transform: translateY(-1px);
}

.btn-success {
  background: #10B981;
  color: white;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}

.btn-success:hover {
  background: #059669;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-main);
  border: 2px solid var(--border-color);
}

.btn-secondary:hover {
  background: var(--bg-panel-left);
  border-color: var(--text-muted);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
}

.btn-ghost:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-main);
}

.btn-help {
  background: #FEF3C7;
  color: #B45309;
  border: 2px solid #FCD34D;
}

.btn-help:hover {
  background: #FDE68A;
}

.btn-audio {
  background: #E0E7FF;
  color: #4338CA;
  border: 2px solid #C7D2FE;
}

.btn-audio:hover {
  background: #C7D2FE;
}

.btn-icon-only {
  padding: 0.6rem;
  border-radius: var(--radius-full);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-verb {
  background: var(--color-verb-light);
  color: var(--color-verb);
  border: 1.5px solid var(--color-verb);
}

.badge-target {
  background: var(--color-target-light);
  color: var(--color-target);
  border: 1.5px solid var(--color-target);
}

.badge-constraint {
  background: var(--color-constraint-light);
  color: var(--color-constraint);
  border: 1.5px solid var(--color-constraint);
}

/* Animations légères */
@keyframes popSuccess {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

  60% {
    transform: scale(1.06);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pulseGently {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }
}

@keyframes wiggle {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-3deg);
  }

  75% {
    transform: rotate(3deg);
  }
}