/* === THÈME CAHIER D'ÉCOLE === */

:root {
  --paper-bg: #fdf6e3;
  --paper-line: #c8dae8;
  --margin-red: #e88e8e;
  --pen-blue: #1a3a6b;
  --pen-blue-light: #2a5a9b;
  --correct-green: #2e7d32;
  --incorrect-red: #d32f2f;
  --star-gold: #ffc107;
  --btn-primary: #1976d2;
  --btn-success: #388e3c;
  --btn-danger: #d32f2f;
  --parent-bg: #f5f5f5;
  --line-height: 36px;
}

body {
  font-family: 'Patrick Hand', cursive;
  background-color: var(--paper-bg);
  color: var(--pen-blue);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

/* Fond cahier avec lignes */
.notebook-bg {
  background-color: var(--paper-bg);
  background-image:
    repeating-linear-gradient(
      transparent,
      transparent calc(var(--line-height) - 1px),
      var(--paper-line) calc(var(--line-height) - 1px),
      var(--paper-line) var(--line-height)
    );
  background-size: 100% var(--line-height);
  background-position: 0 8px;
  min-height: 100vh;
}

/* Marge rouge à gauche (desktop) */
@media (min-width: 600px) {
  .notebook-bg {
    border-left: 3px solid var(--margin-red);
    margin-left: 40px;
    padding-left: 20px;
  }
}

/* Champ de saisie style écriture sur les lignes */
.word-input {
  font-family: 'Patrick Hand', cursive;
  font-size: 44px;
  color: var(--pen-blue);
  background: rgba(255, 255, 255, 0.5);
  border: 3px dashed var(--paper-line);
  border-radius: 16px;
  line-height: 1.4;
  padding: 24px 20px;
  width: 100%;
  max-width: 500px;
  text-align: center;
  outline: none;
  caret-color: var(--pen-blue);
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.word-input:focus {
  border-color: var(--pen-blue-light);
  border-style: solid;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 4px rgba(26, 58, 107, 0.1);
}

.word-input.correct {
  color: var(--correct-green);
  border-color: var(--correct-green);
  border-style: solid;
  background: rgba(46, 125, 50, 0.08);
}

.word-input.incorrect {
  color: var(--incorrect-red);
  border-color: var(--incorrect-red);
  border-style: solid;
  background: rgba(211, 47, 47, 0.08);
}

/* Texte corrections */
.correction-text {
  font-family: 'Patrick Hand', cursive;
  font-size: 24px;
  color: var(--incorrect-red);
  margin-top: 8px;
}

.correct-word {
  color: var(--correct-green);
  font-weight: bold;
}