/* Les Histoires de Julia — « Mes progrès », et l'espace parents
   =============================================================
   Deux écrans, deux publics, et c'est tout l'enjeu.

   Celui de Julia ne montre QUE ce qu'elle a réussi. Pas de pourcentage, pas de
   moyenne, et surtout aucune liste de ce qui coince : le carnet de révisions
   s'en occupe déjà, en silence, en lui représentant ses erreurs sans les
   nommer. Lui afficher ses fautes ne l'aiderait pas, ça lui apprendrait à se
   voir en retard.

   Celui de Dimitri n'est qu'une porte : un QR code vers la vraie page de suivi,
   qui vit ailleurs et dit, elle, ce qui résiste.

   Tout est préfixé #progres / #parents-qr / .pg- : aucune règle ne peut fuir
   vers un autre écran. */

#progres, #parents-qr{justify-content:flex-start; gap:14px; overflow-y:auto; padding-top:18px;}

.pg-head{text-align:center;}
.pg-head h2{color:#fff; font-size:clamp(20px,4.4vw,27px); font-weight:700;}
.pg-head p{color:#d9cff2; font-size:13.5px; margin-top:2px;}

/* La grande tuile du haut : l'étoile du jour, ce dont elle est le plus fière. */
.pg-une{
  width:100%; max-width:560px; background:linear-gradient(135deg,#ffd166,#ff9e5c);
  border-radius:22px; padding:18px 20px; color:#4a2f10;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.pg-une .gros{font-size:40px; font-weight:700; line-height:1;}
.pg-une .quoi{font-size:14.5px; font-weight:600; margin-top:2px;}
.pg-une .mot{font-size:13px; opacity:.8; margin-top:6px;}

.pg-grille{
  width:100%; max-width:560px; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.pg-carte{
  background:rgba(255,255,255,.12); border-radius:16px; padding:13px 15px; color:#fff;
}
.pg-carte .val{font-size:26px; font-weight:700; line-height:1.1;}
.pg-carte .lab{font-size:12.5px; color:#d9cff2; margin-top:1px;}

/* Les tables réussies, en pastilles : elle les voit se remplir. */
.pg-tables{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}
.pg-t{
  width:30px; height:30px; border-radius:10px; display:grid; place-items:center;
  font:700 13px/1 'Fredoka',system-ui,sans-serif;
  background:rgba(255,255,255,.14); color:#cfc4e8;
}
.pg-t.ok{background:linear-gradient(180deg,#8fd9a8,#5fb87a); color:#17361f;}

/* La fluence, montrée comme une course : elle avance vers un fanion. */
.pg-piste{
  position:relative; height:12px; border-radius:999px; margin-top:10px;
  background:rgba(255,255,255,.14); overflow:hidden;
}
.pg-piste i{
  position:absolute; left:0; top:0; bottom:0; border-radius:999px;
  background:linear-gradient(90deg,#8fd9b6,#ffd166);
}
.pg-jalon{display:flex; justify-content:space-between; font-size:11.5px; color:#cfc4e8; margin-top:5px;}

/* L'espace parents : la porte vers la vraie page. */
.pg-qr{
  background:#fffaf2; border-radius:22px; padding:18px; width:100%; max-width:330px;
  text-align:center; box-shadow:0 12px 30px rgba(0,0,0,.25);
}
.pg-qr svg{width:100%; height:auto; display:block; image-rendering:pixelated;}
.pg-qr .lien{
  font:600 12.5px/1.5 ui-monospace,monospace; color:#5b4a8a; margin-top:12px;
  word-break:break-all;
}
.pg-qr .note{font-size:12.5px; color:#7d76a8; margin-top:8px;}

@media (max-height:520px){
  #progres, #parents-qr{padding-top:10px; gap:10px;}
  .pg-une{padding:12px 16px;}
  .pg-une .gros{font-size:30px;}
}