/* ╔═══════════════════════════════════════════════════════════════╗
   ║  SYSTÈME DE DESIGN — LA CABANE                               ║
   ║  Extrait du prototype Claude Design, août 2026               ║
   ║  Source unique pour tout le projet.                           ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ===================== PALETTE ===================== */
:root {
  /* Fonds */
  --fond-page: #efe7d8;
  --fond-clair: #FFF6E6;
  --fond-carte: #FFFDF6;
  --fond-accent: #FFF4DC;
  --fond-input: #FFFDF6;

  /* Fonds différenciés cours vs exercices */
  --fond-cours: #FFF6E6;        /* crème chaud — le cours */
  --fond-exercice: #EDF6F0;     /* vert très pâle — l'entraînement */

  /* Couleurs d'action */
  --orange: #FF8A4C;
  --orange-bas: #E0672E;
  --vert: #7CB342;
  --vert-bas: #5E9426;
  --teal: #3FB8C6;
  --teal-bas: #2E8A98;
  --or: #FFC93C;
  --or-bas: #E0A41E;
  --violet: #A78BC4;
  --violet-bas: #7E61A1;
  --rouge: #EF5D60;
  --rouge-bas: #c43e41;
  --bleu: #4FA3D1;
  --bleu-bas: #2f7ba8;

  /* Texte */
  --bois: #4A3226;
  --bois-clair: #8a6650;
  --bois-pale: #b09a82;
  --bois-sous: #6b503d;

  /* Bordures et ombres */
  --bordure: #e7d3a8;
  --bordure-input: #f0dca8;
  --ombre-carte: 0 4px 0 rgba(92,61,46,.1);
  --ombre-forte: 0 6px 0 rgba(92,61,46,.14);
  --ombre-bouton: 0 5px 0;
  --ombre-legere: 0 3px 0 #e7d3a8;
}

/* ===================== TYPOGRAPHIE ===================== */
body {
  margin: 0;
  background: var(--fond-page);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  color: var(--bois);
  -webkit-font-smoothing: antialiased;
}

.titre, h1, h2, h3 {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
}

.sous-texte {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--bois-clair);
  line-height: 1.5;
}

.micro-texte {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--bois-pale);
  line-height: 1.5;
}

/* ===================== UTILITAIRES ===================== */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
a { color: var(--orange-bas); }
a:hover { color: #c2551f; }

.tap {
  cursor: pointer;
  transition: transform .08s;
}
.tap:active {
  transform: translateY(2px);
}

@keyframes pop {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.pop { animation: pop .22s ease; }

.scr {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.scr::-webkit-scrollbar { width: 0; }

/* ===================== BOUTONS ===================== */
.btn-principal {
  background: var(--orange);
  box-shadow: var(--ombre-bouton) var(--orange-bas);
  border-radius: 18px;
  padding: 15px;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #fff;
  border: none;
  cursor: pointer;
}
.btn-principal:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--orange-bas); }

.btn-secondaire {
  background: var(--fond-carte);
  box-shadow: var(--ombre-bouton) #e7d3a8;
  border-radius: 18px;
  padding: 15px;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--bois);
  border: none;
  cursor: pointer;
}
.btn-secondaire:active { transform: translateY(4px); box-shadow: 0 1px 0 #e7d3a8; }

.btn-valider {
  background: var(--vert);
  box-shadow: var(--ombre-bouton) var(--vert-bas);
  border-radius: 14px;
  padding: 12px 18px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  border: none;
  cursor: pointer;
}
.btn-valider:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--vert-bas); }

.btn-discret {
  text-align: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--bois-clair);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.btn-danger {
  border: 3px solid var(--rouge);
  border-radius: 18px;
  padding: 15px;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--rouge-bas);
  background: none;
  cursor: pointer;
}

/* ===================== CARTES ===================== */
.carte {
  background: var(--fond-carte);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--ombre-carte);
}

.carte-forte {
  background: var(--fond-carte);
  border-radius: 24px;
  padding: 18px;
  box-shadow: var(--ombre-forte);
}

.carte-accent {
  background: var(--fond-accent);
  border: 2px solid var(--bordure);
  border-radius: 16px;
  padding: 13px;
}

/* ===================== INPUTS ===================== */
.input {
  width: 100%;
  border: 3px solid var(--bordure-input);
  border-radius: 14px;
  padding: 13px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--bois);
  background: var(--fond-input);
  outline: none;
}
.input:focus {
  border-color: var(--or-bas);
}
.input::placeholder {
  color: var(--bois-pale);
}

/* ===================== BARRE DE NAVIGATION (bas) ===================== */
.navbar {
  flex: none;
  background: var(--fond-carte);
  border-top: 2px solid #efe2c9;
  display: flex;
  /* iPhone : zone de sécurité en bas — max() garde 16px sur Android et
     ordinateur, où env(safe-area-inset-bottom) vaut 0 (cf. src/styles/design-system.css). */
  padding: 8px 6px max(16px, env(safe-area-inset-bottom));
}
.navbar-item {
  flex: 1;
  text-align: center;
  color: var(--bois-clair);
  cursor: pointer;
  background: none;
  border: none;
}
.navbar-item.active {
  color: var(--bois);
}
.navbar-item .navbar-icon {
  font-size: 21px;
  display: block;
}
.navbar-item .navbar-label {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 11px;
}

/* ===================== ÉCRANS COURS vs EXERCICE ===================== */
.ecran-cours {
  background: var(--fond-cours);
  min-height: 100vh;
  padding-bottom: 80px;
}
.ecran-exercice {
  background: var(--fond-exercice);
  min-height: 100vh;
  padding-bottom: 80px;
}
.ecran-cours .topbar-titre::before {
  content: '📖 ';
}
.ecran-exercice .topbar-titre::before {
  content: '⚡ ';
}

/* ===================== TOPBAR (retour + titre) ===================== */
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.btn-retour {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--fond-carte);
  box-shadow: var(--ombre-legere);
  display: grid;
  place-items: center;
  font-size: 18px;
  border: none;
  cursor: pointer;
  color: var(--bois);
}
.btn-retour:active { transform: translateY(3px); box-shadow: 0 1px 0 #e7d3a8; }

.topbar-titre {
  flex: 1;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 20px;
}

/* ===================== TUILE PARCOURS ===================== */
.tuile {
  background: var(--fond-carte);
  border-radius: 18px;
  padding: 13px;
  box-shadow: var(--ombre-carte);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.tuile:active { transform: translateY(2px); }

.tuile-icone {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 23px;
  flex-shrink: 0;
}

.tuile-titre {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 16px;
}

.tuile-sous {
  font-size: 12px;
  font-weight: 700;
  color: var(--bois-clair);
}

/* ===================== ÉTAPE DE PARCOURS ===================== */
.etape-icone {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: #fff;
  flex-shrink: 0;
}

.etape-shortcut {
  background: var(--fond-accent);
  border: 2px solid var(--bordure);
  border-radius: 12px;
  padding: 9px 11px;
  font-size: 14px;
  cursor: pointer;
  border: none;
}

/* ===================== ONGLETS COURS ===================== */
.onglets-cours {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.onglet-cours {
  flex: 1;
  text-align: center;
  border-radius: 14px;
  padding: 10px 4px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  background: var(--fond-carte);
  color: var(--bois-clair);
  box-shadow: var(--ombre-legere);
  border: none;
  cursor: pointer;
}
.onglet-cours.active {
  background: var(--bois);
  color: var(--fond-clair);
}

/* ===================== J'AI COMPRIS / PAS COMPRIS ===================== */
.btns-comprehension {
  display: flex;
  gap: 10px;
  margin: 14px 0 12px;
}
.btn-compris {
  flex: 1;
  background: var(--vert);
  box-shadow: 0 4px 0 var(--vert-bas);
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  border: none;
  cursor: pointer;
}
.btn-pascompris {
  flex: 1;
  background: var(--fond-carte);
  box-shadow: 0 4px 0 #e7d3a8;
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--bois);
  border: none;
  cursor: pointer;
}

/* ===================== EXPLICATION ALTERNATIVE ===================== */
.expl-alt {
  background: var(--fond-accent);
  border: 2px solid var(--bordure);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
}
.expl-alt-audio {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fond-carte);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
  cursor: pointer;
}
.expl-alt-audio-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--orange);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 15px;
  flex-shrink: 0;
}
.expl-alt-texte {
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--bois-sous);
}

/* ===================== COUPS DE POUCE ===================== */
.cdp-zone {
  margin: 16px 0 8px;
}
.cdp-label {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--bois-clair);
  margin-bottom: 8px;
}
.cdp-item {
  background: var(--fond-carte);
  border: 2px solid var(--bordure);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.cdp-item.ouvert {
  background: var(--fond-accent);
  border-color: var(--or-bas);
}
.cdp-item-label {
  font-weight: 800;
  font-size: 11.5px;
  color: var(--or-bas);
  margin-bottom: 4px;
}
.cdp-item-texte {
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.5;
}
.cdp-btn-debloquer {
  background: var(--teal);
  border-radius: 11px;
  padding: 7px 13px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  color: #fff;
  border: none;
  cursor: pointer;
}

/* ===================== QUIZ ===================== */
.quiz-barre {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.quiz-barre-progress {
  flex: 1;
  height: 12px;
  background: var(--fond-carte);
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(92,61,46,.18);
}
.quiz-barre-fill {
  height: 12px;
  background: var(--or);
  border-radius: 6px;
}
.quiz-compteur {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--bois-clair);
  white-space: nowrap;
}

.quiz-question {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.4;
  text-align: center;
}

.quiz-option {
  border: 2px solid var(--bordure);
  background: var(--fond-carte);
  border-radius: 20px;
  padding: 9px 13px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--bois);
  cursor: pointer;
}
.quiz-option.correct {
  border-color: var(--vert-bas);
  background: #e8f5d6;
  color: var(--vert-bas);
}
.quiz-option.incorrect {
  border-color: var(--orange-bas);
  background: #fff0e2;
  color: var(--orange-bas);
}

.quiz-verdict {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 15px;
  margin-top: 12px;
  min-height: 22px;
  text-align: center;
}
.quiz-verdict.ok { color: var(--vert-bas); }
.quiz-verdict.no { color: var(--orange-bas); }

/* ===================== BROUILLON ===================== */
.brouillon {
  width: 100%;
  min-height: 88px;
  border: 3px dashed var(--bordure);
  border-radius: 16px;
  padding: 12px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.8;
  color: var(--bois);
  background: var(--fond-carte);
  outline: none;
  resize: vertical;
}

/* ===================== RÉSULTAT ===================== */
.resultat-score {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  text-align: center;
  margin: 8px 0;
}
.resultat-score.ok { color: var(--vert-bas); }
.resultat-score.no { color: var(--orange-bas); }

/* ===================== SCAN COPIE ===================== */
.scan-zone {
  background: #241A12;
  border-radius: 22px;
  padding: 18px;
}
.scan-viseur {
  border-radius: 16px;
  border: 3px dashed rgba(255,246,230,.4);
  background: repeating-linear-gradient(45deg, #2e2218 0 14px, #33261B 14px 28px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.scan-consignes {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.scan-consigne {
  flex: 1;
  background: var(--fond-carte);
  border-radius: 14px;
  padding: 10px 8px;
  text-align: center;
  font-weight: 800;
  font-size: 11.5px;
  line-height: 1.4;
  box-shadow: var(--ombre-legere);
}

/* ===================== COMPÉTENCES (badges) ===================== */
.competence-badge {
  border: 1.5px solid;
  border-radius: 20px;
  padding: 4px 10px;
  font-weight: 800;
  font-size: 11px;
  white-space: nowrap;
}

/* ===================== JAUGE DE PROGRESSION ===================== */
.jauge {
  height: 9px;
  background: #FFF0D6;
  border-radius: 5px;
}
.jauge-fill {
  height: 9px;
  border-radius: 5px;
}

/* ===================== PILULE (streak, score) ===================== */
.pilule {
  background: var(--fond-carte);
  box-shadow: var(--ombre-legere);
  border-radius: 20px;
  padding: 6px 10px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* ===================== AVATAR ===================== */
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--or);
  box-shadow: 0 3px 0 var(--or-bas);
  display: grid;
  place-items: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--bois);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 480px) {
  .quiz-question { font-size: 17px; }
  .btn-principal { font-size: 16px; padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
</style>