/* Appli d'entraînement de Carl — téléphone Android d'abord.
   Choix assumés pour un enfant de 9 ans : cibles tactiles larges (48 px minimum),
   texte un cran plus gros que chez Julia, et bleu plutôt que vert pour que les deux
   applis ne se confondent pas si elles finissent sur le même téléphone. */

:root {
  --fond: #f8fafc;
  --carte: #ffffff;
  --texte: #131a22;
  --gris: #5a6875;
  --bord: #dde3ea;
  --bleu: #1b5fa8;
  --bleu-clair: #e6effa;
  --rouge: #a4262c;
  --rouge-clair: #fbeceb;
  --jaune-clair: #fff8e5;
  --r: 14px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #12171c; --carte: #1b2228; --texte: #e9eef3; --gris: #9aa7b3;
    --bord: #2c353d; --bleu: #6fb0ea; --bleu-clair: #16283a;
    --rouge: #f08a86; --rouge-clair: #2c1a1a; --jaune-clair: #2a2519;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: env(safe-area-inset-top) 0 0;
}
main { max-width: 640px; margin: 0 auto; padding: 20px 16px 40px; }

h1 { font-size: 1.65rem; margin: 0 0 6px; letter-spacing: -0.3px; }
h2 { font-size: 1.15rem; margin: 26px 0 10px; }
p { margin: 0 0 12px; }
.sous { color: var(--gris); font-size: 0.95rem; }
em { color: var(--gris); font-style: normal; font-size: 0.85em; display: block; }
code { background: var(--bleu-clair); padding: 1px 5px; border-radius: 5px; font-size: 0.9em; }

a { color: var(--bleu); }
.retour { display: inline-block; margin-bottom: 12px; font-size: 0.95rem; text-decoration: none; }

/* --- cartes d'accueil --- */
.cartes { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 20px 0; }
.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: var(--r);
  padding: 18px 16px; text-decoration: none; color: inherit; display: block;
}
.carte:active { transform: scale(0.99); }
.carte .ico { font-size: 2rem; display: block; margin-bottom: 6px; }
.carte strong { display: block; font-size: 1.1rem; }
.carte .det { color: var(--gris); font-size: 0.85rem; }

.stats { display: flex; gap: 10px; margin-top: 20px; }
.stats div {
  flex: 1; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--r);
  padding: 12px 8px; text-align: center;
}
.stats b { display: block; font-size: 1.35rem; }
.stats span { color: var(--gris); font-size: 0.75rem; }

/* --- listes et boutons --- */
.liste { display: flex; flex-direction: column; gap: 9px; }
.ligne, .carte, button, select, input, textarea { font-family: inherit; font-size: 1rem; }
.ligne {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; min-height: 56px; text-align: left; background: var(--carte); color: inherit;
  border: 1px solid var(--bord); border-radius: var(--r); padding: 14px 16px;
  text-decoration: none; cursor: pointer;
}
.ligne.prio { border-left: 5px solid var(--rouge); }
.note-prio { margin-top: 14px; }
.badge {
  background: var(--bleu-clair); color: var(--bleu); border-radius: 20px;
  padding: 3px 11px; font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
button.gros {
  display: block; width: 100%; padding: 17px; margin: 18px 0 0;
  background: var(--bleu); color: #fff; border: 0; border-radius: var(--r);
  font-size: 1.1rem; font-weight: 600; cursor: pointer;
}
a.gros.lien { text-align: center; text-decoration: none; }
.lien-nu { background: none; border: 0; color: var(--bleu); cursor: pointer; padding: 0; font-size: inherit; }

.champ { margin: 16px 0 0; }
.champ label { display: block; margin-bottom: 6px; font-size: 0.95rem; }
.champ input {
  width: 100%; padding: 14px; border: 1.5px solid var(--bord); border-radius: 10px;
  background: var(--carte); color: inherit;
}

/* --- QCM --- */
.barre { height: 6px; background: var(--bord); border-radius: 3px; margin-bottom: 14px; }
.barre > div { height: 100%; background: var(--bleu); border-radius: 3px; transition: width .25s; }
.ligne-etat { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.serie { color: var(--bleu); font-weight: 600; }
.etiquette {
  display: inline-block; background: var(--bleu-clair); color: var(--bleu);
  border-radius: 20px; padding: 3px 12px; font-size: 0.8rem; font-weight: 600; margin: 0 0 10px;
}
.enonce { font-size: 1.25rem; margin: 4px 0 18px; line-height: 1.4; }
.options { display: flex; flex-direction: column; gap: 11px; }
.option {
  text-align: left; padding: 16px 18px; min-height: 56px; background: var(--carte); color: inherit;
  border: 1.5px solid var(--bord); border-radius: var(--r); cursor: pointer; line-height: 1.4;
}
.option:disabled { cursor: default; opacity: 1; }
.option.juste { border-color: var(--bleu); background: var(--bleu-clair); font-weight: 600; }
.option.faux { border-color: var(--rouge); background: var(--rouge-clair); }
.retour-info { margin: 16px 0; padding: 14px 16px; border-radius: var(--r); border: 1px solid var(--bord); }
.retour-info.ok { background: var(--bleu-clair); border-color: var(--bleu); }
.retour-info.ko { background: var(--rouge-clair); border-color: var(--rouge); }
.retour-info p { margin: 6px 0 0; font-size: 0.95rem; }
.notes { display: flex; gap: 8px; }
.notes button {
  flex: 1; padding: 15px 4px; min-height: 52px; background: var(--carte); color: inherit;
  border: 1px solid var(--bord); border-radius: var(--r); cursor: pointer; font-size: 0.92rem;
}
.rates { margin: 0 0 8px; padding-left: 22px; color: var(--gris); font-size: 0.95rem; }

.consigne {
  background: var(--jaune-clair); border-left: 4px solid var(--bleu);
  padding: 12px 14px; border-radius: 0 var(--r) var(--r) 0; font-size: 0.95rem;
}
.alerte { background: var(--jaune-clair); border: 1px solid var(--bord); padding: 12px 14px; border-radius: var(--r); }
.alerte.bravo { background: var(--bleu-clair); border-color: var(--bleu); }
.pied { max-width: 640px; margin: 0 auto; padding: 0 16px 28px; color: var(--gris); font-size: 0.85rem; }