/* ============================================================
   Prof particulier — feuille de style unique.

   Contraintes qui expliquent les choix :
   · usage réel = iPhone, une main, parfois en plein soleil sur un
     chantier → cibles tactiles ≥ 44 px, contrastes élevés, thème sombre
   · deux langues à l'écran → un accent de couleur par langue, tenu
     partout (anglais = bleu, arabe = vert)
   · l'arabe a besoin de sa propre typo et du sens droite→gauche
   · aucune police distante : l'app doit s'ouvrir hors ligne
   ============================================================ */

:root {
  --fond: #0a0e14;
  --fond-2: #101822;
  --carte: #16202c;
  --carte-2: #1c2836;
  --bord: #24313f;
  --bord-clair: #33445a;
  --texte: #e9eff6;
  --doux: #8fa2b7;
  --tres-doux: #5f7288;
  --en: #5590ff;
  --en-fond: #14243f;
  --ar: #2ec48e;
  --ar-fond: #0f2c24;
  --or: #e0b341;
  --rouge: #f0555c;
  --vert: #35cd8a;
  --orange: #f0993f;
  --rayon: 16px;
  --rayon-s: 10px;
  --ombre: 0 8px 28px rgba(0, 0, 0, 0.45);
  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* À GARDER EN TÊTE DE FICHIER.
   L'attribut HTML `hidden` ne masque qu'au moyen d'un `display:none` de la
   feuille de style du navigateur — donc n'importe quel `display` déclaré
   ici le neutralise. Sans cette règle, `.connexion` (display:grid) restait
   affiché après la connexion, et `.badge` / `.notes-srs` (display:grid)
   apparaissaient alors qu'ils devaient être cachés. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
}

body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

/* L'arabe : police à empattements adaptée au tashkeel, taille majorée
   (le tashkeel devient illisible en dessous de ~1.15em) et RTL. */
.ar, [lang="ar"] {
  font-family: "Noto Naskh Arabic", "Amiri", "Geeza Pro", "Al Bayan", "Times New Roman", serif;
  font-size: 1.2em;
  line-height: 2;
  direction: rtl;
  text-align: right;
}
.en, [lang="en"] { font-variant-numeric: tabular-nums; }

/* ---------- En-tête ---------- */

header.haut {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: rgba(10, 14, 20, 0.88);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--bord);
  display: flex;
  align-items: center;
  gap: 10px;
}

.haut h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  flex: 1;
}

.serie {
  font-size: 13px;
  font-weight: 650;
  color: var(--or);
  background: rgba(224, 179, 65, 0.12);
  border: 1px solid rgba(224, 179, 65, 0.28);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- Vues ---------- */

main { padding: 14px 16px 24px; max-width: 720px; margin: 0 auto; }
.vue { display: none; }
.vue.active { display: block; animation: entree var(--transition); }
@keyframes entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h2.titre { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tres-doux); margin: 22px 0 10px; font-weight: 650; }
h2.titre:first-child { margin-top: 4px; }

/* ---------- Cartes ---------- */

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 16px;
  margin-bottom: 12px;
}
.carte.plate { background: var(--fond-2); }
.carte.langue-anglais { border-left: 3px solid var(--en); }
.carte.langue-arabe { border-left: 3px solid var(--ar); }

.entete-carte { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.entete-carte .nom { font-weight: 650; font-size: 16px; flex: 1; }

.pastille {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.pastille.anglais { background: var(--en-fond); color: var(--en); }
.pastille.arabe { background: var(--ar-fond); color: var(--ar); }
.pastille.neutre { background: var(--carte-2); color: var(--doux); }
.pastille.ok { background: rgba(53, 205, 138, 0.14); color: var(--vert); }
.pastille.alerte { background: rgba(240, 85, 92, 0.14); color: var(--rouge); }
.pastille.attente { background: rgba(240, 153, 63, 0.14); color: var(--orange); }

/* ---------- Barres et jauges ---------- */

.jauge { height: 6px; background: var(--carte-2); border-radius: 999px; overflow: hidden; margin: 8px 0; }
.jauge > i { display: block; height: 100%; border-radius: 999px; transition: width 400ms ease; }
.jauge.anglais > i { background: linear-gradient(90deg, #2f6ad9, var(--en)); }
.jauge.arabe > i { background: linear-gradient(90deg, #1c8f66, var(--ar)); }

.ligne-competence { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font-size: 14px; padding: 5px 0; }
.ligne-competence .lib { color: var(--doux); }
.ligne-competence .val { font-weight: 650; font-variant-numeric: tabular-nums; }
.ligne-competence .jauge { grid-column: 1 / -1; margin: 2px 0 0; }

.stats { display: flex; gap: 8px; flex-wrap: wrap; }
.stat {
  flex: 1 1 88px;
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-radius: var(--rayon-s);
  padding: 10px;
  text-align: center;
}
.stat b { display: block; font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat span { font-size: 11px; color: var(--tres-doux); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Boutons ---------- */

button, .bouton {
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--bord-clair);
  background: var(--carte-2);
  color: var(--texte);
  border-radius: var(--rayon-s);
  padding: 12px 16px;
  min-height: 46px;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), opacity var(--transition);
}
button:active { transform: scale(0.975); }
button:disabled { opacity: 0.45; cursor: default; }
button.principal { background: var(--en); border-color: var(--en); color: #061020; width: 100%; }
button.principal.arabe { background: var(--ar); border-color: var(--ar); }
button.discret { background: transparent; border-color: var(--bord); color: var(--doux); }
button.petit { padding: 8px 12px; min-height: 38px; font-size: 14px; }
button.danger { color: var(--rouge); border-color: rgba(240, 85, 92, 0.4); background: transparent; }
.rangee { display: flex; gap: 8px; flex-wrap: wrap; }
.rangee > * { flex: 1; }

/* ---------- Champs ---------- */

input[type="text"], input[type="password"], input[type="number"], textarea, select {
  font: inherit;
  width: 100%;
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--bord-clair);
  border-radius: var(--rayon-s);
  padding: 12px 14px;
  min-height: 46px;
}
input:focus, textarea:focus { outline: 2px solid var(--en); outline-offset: 1px; border-color: var(--en); }
textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
label.champ { display: block; font-size: 13px; color: var(--doux); margin: 12px 0 5px; font-weight: 600; }

/* ---------- Séance ---------- */

.progression-seance { display: flex; gap: 4px; margin-bottom: 14px; }
.progression-seance > i {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--carte-2);
}
.progression-seance > i.faite { background: var(--vert); }
.progression-seance > i.courante { background: var(--en); }

.consigne { color: var(--doux); font-size: 15px; margin: 0 0 14px; }
.support {
  background: var(--fond-2);
  border: 1px solid var(--bord);
  border-left: 3px solid var(--bord-clair);
  border-radius: var(--rayon-s);
  padding: 14px;
  margin-bottom: 14px;
  white-space: pre-wrap;
  line-height: 1.75;
}

.item { padding: 14px 0; border-top: 1px solid var(--bord); }
.item:first-of-type { border-top: none; }
.item .question { font-weight: 600; margin-bottom: 10px; }
.item .aide { font-size: 13px; color: var(--tres-doux); margin-top: 6px; }

.choix { display: flex; flex-direction: column; gap: 8px; }
.choix button { text-align: left; justify-content: flex-start; }
.choix button.choisi { border-color: var(--en); background: var(--en-fond); color: var(--texte); }

.resultat-item { font-size: 14px; margin-top: 8px; padding: 10px 12px; border-radius: var(--rayon-s); }
.resultat-item.juste { background: rgba(53, 205, 138, 0.1); color: #9de8c4; }
.resultat-item.faux { background: rgba(240, 85, 92, 0.1); color: #ffb3b7; }
.resultat-item .attendu { font-weight: 700; }

.note-globale { font-size: 34px; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.feedback { white-space: pre-wrap; line-height: 1.65; }

/* ---------- Enregistrement audio ---------- */

.enregistreur { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; }
.micro {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--en); border: none; color: #061020;
  font-size: 30px; display: grid; place-items: center;
  box-shadow: 0 0 0 0 rgba(85, 144, 255, 0.5);
}
.micro.arabe { background: var(--ar); }
.micro.actif { background: var(--rouge); color: #fff; animation: pulse 1.5s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(240, 85, 92, 0.5); }
  70% { box-shadow: 0 0 0 22px rgba(240, 85, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(240, 85, 92, 0); }
}
.chrono { font-variant-numeric: tabular-nums; font-size: 15px; color: var(--doux); font-weight: 650; }

/* ---------- Révision (cartes mémoire) ---------- */

.flash {
  min-height: 190px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px 18px;
  background: linear-gradient(160deg, var(--carte-2), var(--carte));
  border: 1px solid var(--bord-clair);
  border-radius: var(--rayon);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
}
.flash .verso { color: var(--vert); font-weight: 650; }
.flash .exemple { font-size: 15px; color: var(--doux); font-weight: 400; margin-top: 10px; }
.notes-srs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.notes-srs button { padding: 12px 4px; font-size: 13px; flex-direction: column; }
.notes-srs button small { display: block; font-size: 10px; color: var(--tres-doux); font-weight: 500; }
.notes-srs button.n1 { border-color: rgba(240, 85, 92, 0.45); }
.notes-srs button.n4 { border-color: rgba(53, 205, 138, 0.45); }

/* ---------- Chat ---------- */

.fil { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.bulle { padding: 12px 14px; border-radius: 14px; max-width: 88%; white-space: pre-wrap; line-height: 1.6; }
.bulle.eleve { align-self: flex-end; background: var(--en); color: #061020; border-bottom-right-radius: 4px; font-weight: 500; }
.bulle.eleve.arabe { background: var(--ar); }
.bulle.prof { align-self: flex-start; background: var(--carte); border: 1px solid var(--bord); border-bottom-left-radius: 4px; }
.bulle.prof h3 { font-size: 15px; margin: 10px 0 4px; }
.bulle.prof code { background: var(--fond); padding: 1px 5px; border-radius: 4px; font-size: 0.92em; }
.bulle.prof strong { color: #fff; }

/* ---------- Courbe de progression ---------- */

.courbe { width: 100%; height: 170px; display: block; }
.courbe .grille { stroke: var(--bord); stroke-width: 1; }
.courbe .palier-txt { fill: var(--tres-doux); font-size: 9px; }
.courbe .trace-anglais { stroke: var(--en); fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.courbe .trace-arabe { stroke: var(--ar); fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.courbe .cible { stroke: var(--or); stroke-dasharray: 4 4; stroke-width: 1.5; }

/* ---------- Divers ---------- */

.vide { text-align: center; color: var(--tres-doux); padding: 34px 16px; font-size: 15px; }
.chargement { text-align: center; color: var(--doux); padding: 26px; font-size: 15px; }
.chargement::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; border: 2px solid var(--bord-clair); border-top-color: var(--en); border-radius: 50%; animation: tourne 700ms linear infinite; vertical-align: -2px; }
@keyframes tourne { to { transform: rotate(360deg); } }

.avis { padding: 12px 14px; border-radius: var(--rayon-s); font-size: 14px; margin-bottom: 12px; line-height: 1.55; }
.avis.info { background: var(--en-fond); color: #cfe0ff; border: 1px solid rgba(85, 144, 255, 0.3); }
.avis.attention { background: rgba(240, 153, 63, 0.1); color: #ffd8ab; border: 1px solid rgba(240, 153, 63, 0.3); }
.avis.erreur { background: rgba(240, 85, 92, 0.1); color: #ffc0c3; border: 1px solid rgba(240, 85, 92, 0.3); }

.miniature { width: 100%; border-radius: var(--rayon-s); border: 1px solid var(--bord); margin: 10px 0; }
.correction-ligne { font-size: 14px; padding: 9px 0; border-top: 1px solid var(--bord); }
.correction-ligne .barre { text-decoration: line-through; color: var(--rouge); }
.correction-ligne .bon { color: var(--vert); font-weight: 650; }
.correction-ligne .exp { color: var(--doux); font-size: 13px; display: block; margin-top: 3px; }

/* ---------- Barre d'onglets ---------- */

nav.onglets {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(13, 18, 26, 0.94);
  backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid var(--bord);
  padding-bottom: env(safe-area-inset-bottom);
}
nav.onglets button {
  background: none;
  border: none;
  border-radius: 0;
  padding: 9px 2px 8px;
  min-height: 62px;
  color: var(--tres-doux);
  font-size: 10.5px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
nav.onglets button svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
nav.onglets button.actif { color: var(--en); }
nav.onglets button .badge {
  position: absolute;
  transform: translate(15px, -4px);
  background: var(--rouge);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 0 4px;
}

/* ---------- Connexion ---------- */

.connexion { display: grid; place-items: center; min-height: 82vh; padding: 20px; }
.connexion .boite { width: 100%; max-width: 330px; text-align: center; }
.connexion h1 { font-size: 25px; margin: 0 0 6px; letter-spacing: -0.02em; }
.connexion p { color: var(--doux); margin: 0 0 22px; font-size: 15px; }

@media (min-width: 700px) {
  main { padding: 22px 24px 32px; }
  .stat b { font-size: 24px; }
}