/* =====================================================================
   Le prof principal : l'onglet médaillon, son cahier de la semaine, la discussion.
   Le plan se lit comme un cahier de textes ; ses bulles sont des fiches bristol, celles de l'élève des étiquettes jaunes.
   ===================================================================== */

/* ---------- L'onglet médaillon (au centre de la barre sur téléphone) ---------- */
@media (max-width: 899px){
  .onglets{grid-template-columns:repeat(5, minmax(0, 1fr))}
  .onglets .onglet span{font-size:9.5px; font-stretch:88%; letter-spacing:0}
}
.onglet-prof .medaillon{position:relative; width:46px; height:46px; margin-top:-22px; border-radius:50%; overflow:hidden; display:block;
  border:2.5px solid var(--encre); background:var(--jaune-clair); box-shadow:0 3px 0 var(--encre), 0 10px 18px -8px rgba(8,22,17,.6);
  transition:transform .35s var(--ease-ressort)}
.onglet-prof .medaillon canvas{width:100% !important; height:100% !important; display:block}
.onglet-prof[aria-current="page"] .medaillon{transform:translateY(-3px) scale(1.07); background:var(--jaune)}
.onglet-prof::after{bottom:4px}
@media (min-width: 900px){
  .onglet-prof .medaillon{margin-top:0; width:44px; height:44px}
}

/* ---------- En-tête ---------- */
.feuille-prof .defil{scroll-padding-bottom:90px}
.prof-tete{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:center; padding-bottom:6px}
.prof-visage{grid-row:span 2; width:64px; height:64px; border-radius:50%; overflow:hidden; border:2.5px solid var(--encre); background:var(--jaune-clair); box-shadow:0 3px 0 var(--encre)}
.prof-visage canvas{display:block; width:100% !important; height:100% !important}
.prof-id{min-width:0}
.prof-id .titre{margin:2px 0 0}
.prof-tete .btn-texte{justify-self:start; margin-top:4px}

/* ---------- La semaine (cahier de textes) ---------- */
.prof-semaine{position:relative}
.prof-semaine .titre-m{margin:2px 0 0}
.avancee-semaine{display:flex; flex-direction:column; align-items:flex-end; gap:1px}
.avancee-semaine b{font-size:18px}
.jours-semaine{display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; margin:14px 0 10px}
.jour{position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:9px 0 8px; border-radius:var(--r-s);
  background:var(--papier-3); border:1.5px solid var(--trait-moyen); color:var(--encre-2); font-family:var(--f-titre); font-style:italic; font-weight:800; font-size:15px;
  transition:transform .25s var(--ease-ressort), background .2s, border-color .2s}
.jour:active{transform:translateY(2px)}
.jour.auj{border-color:var(--encre); color:var(--encre)}
.jour.auj::before{content:""; position:absolute; top:-5px; left:50%; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--brique); border:1.5px solid var(--encre)}
.jour[aria-selected="true"]{background:var(--jaune); border-color:var(--encre); color:var(--encre); box-shadow:0 3px 0 var(--encre); transform:translateY(-2px)}
.jour.repos{background:transparent; border-style:dashed; color:var(--encre-3)}
.jour.complet{background:var(--ok-pale)}
.jour.complet[aria-selected="true"]{background:var(--jaune)}
.points-jour{display:flex; gap:3px; height:6px; align-items:center}
.points-jour i{width:6px; height:6px; border-radius:50%; border:1.2px solid currentColor; opacity:.7}
.points-jour i.fait{background:var(--ok); border-color:var(--ok); opacity:1}
.points-jour i.vide{border-style:dotted; opacity:.35}

.taches{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0;
  background:var(--papier-3) repeating-linear-gradient(transparent 0 61px, rgba(63,138,107,.18) 61px 62px); border:1.5px solid var(--encre); border-radius:var(--r);
  box-shadow:0 3px 0 var(--encre); overflow:hidden; position:relative}
.taches::before{content:""; position:absolute; top:0; bottom:0; left:44px; width:1.5px; background:rgba(194,73,47,.35)}  /* la marge rouge du cahier */
.tache{position:relative; display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:12px; min-height:62px; padding:8px 12px 8px 7px}
.tache + .tache{border-top:1px solid var(--trait-doux)}
.tache.vide{display:block; padding:18px 16px 18px 58px; color:var(--encre-2); font-size:14.5px}
.coche{width:28px; height:28px; border-radius:7px; border:2px solid var(--encre); background:var(--papier-3); display:grid; place-items:center; z-index:1}
.coche svg{width:16px; height:16px; fill:none; stroke:var(--papier-3); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:20; stroke-dashoffset:20; transition:stroke-dashoffset .35s ease}
.coche[aria-pressed="true"]{background:var(--ok); border-color:var(--ok)}
.coche[aria-pressed="true"] svg{stroke-dashoffset:0}
.t-txt{min-width:0; display:flex; flex-direction:column; gap:2px; padding-left:8px}
.t-txt b{font-size:15px; line-height:1.25; font-weight:650; overflow-wrap:anywhere}
.t-txt small{font-size:12.5px; color:var(--encre-2); line-height:1.3; overflow-wrap:anywhere}
.tache.faite .t-txt b{text-decoration:line-through; text-decoration-color:var(--ok); text-decoration-thickness:2px; color:var(--encre-2)}
.t-go{min-height:38px; padding:0 14px}
.prof-semaine .ligne-actions{margin-top:10px; justify-content:flex-end}

/* ---------- Le questionnaire ---------- */
.questionnaire{padding:6px 0 4px}
.q-tete{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:start}
.mini-visage{width:34px; height:34px; border-radius:50%; overflow:hidden; border:2px solid var(--encre); background:var(--jaune-clair); flex:none; display:block}
.mini-visage canvas{display:block; width:100% !important; height:100% !important}
.bulle-q{margin:0; padding:11px 14px; border-radius:4px 16px 16px 16px; background:var(--papier-3); border:1.5px solid var(--trait-moyen); font-size:15.5px; line-height:1.4; font-weight:550}
.q-num{padding-top:6px}
.q-choix{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0 44px}
.q-choix .puce{min-height:40px; padding:8px 14px; font-size:14px; cursor:pointer; text-align:left; line-height:1.25; white-space:normal; max-width:100%}
.q-choix .puce[aria-pressed="true"]{background:var(--jaune); border-color:var(--encre); box-shadow:0 2px 0 var(--encre)}
.q-choix .choix-simple:hover{border-color:var(--encre)}
.questionnaire .ligne-actions{margin-left:44px}

/* ---------- La discussion ---------- */
.prof-discussion{padding-bottom:0}
.prof-retour{margin:8px 0 2px}
.prof-fil{display:flex; flex-direction:column; gap:14px; padding:14px 0 6px}
.bulle-prof-fil{display:grid; grid-template-columns:30px minmax(0, 1fr); gap:8px; align-items:start; max-width:94%}
.bulle-prof-fil .mini-visage{width:30px; height:30px}
.bulle-prof-fil .bulle{padding:12px 14px; border-radius:4px 16px 16px 16px; background:var(--papier-3); border:1.5px solid var(--trait-moyen);
  box-shadow:0 1px 0 rgba(29,27,22,.06); font-size:15px; line-height:1.48; min-width:0}
.prof-texte p{margin:0 0 8px}
.prof-texte p:last-child{margin-bottom:0}
.prof-texte ul{margin:4px 0 8px; padding-left:18px}
.prof-texte li{margin:2px 0}
.prof-texte b{font-weight:700; background:linear-gradient(transparent 62%, var(--jaune-clair) 62%)}
.prof-sources{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px}
.puce.source{font-size:11.5px; text-decoration:none; color:var(--encre); max-width:100%; white-space:normal; line-height:1.25; padding:5px 10px}
.puce.source svg{width:14px; height:14px; flex:none}
.prof-actions{display:flex; flex-direction:column; align-items:flex-start; gap:8px; margin-top:12px}
.prof-actions .puce svg{width:14px; height:14px}
.puce.note{background:var(--ok-pale); max-width:100%; white-space:normal; font-size:12px; line-height:1.3}
.carte-action{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:10px; align-items:center; width:100%; padding:10px 10px 10px 10px; text-align:left;
  border-radius:var(--r-s); background:var(--jaune-pale); border:1.5px solid var(--encre); box-shadow:0 3px 0 var(--encre); transition:transform .15s}
.carte-action:active{transform:translateY(2px); box-shadow:0 1px 0 var(--encre)}
.carte-action:disabled{opacity:.6}
.ca-icone{width:36px; height:36px; border-radius:50%; background:var(--jaune); border:1.5px solid var(--encre); display:grid; place-items:center}
.ca-icone svg{width:18px; height:18px}
.ca-txt{display:flex; flex-direction:column; min-width:0}
.ca-txt b{font-size:14.5px; line-height:1.25; overflow-wrap:anywhere}
.ca-txt small{font-size:12px; color:var(--encre-2); line-height:1.3; overflow-wrap:anywhere}
.ca-go{font-family:var(--f-titre); font-style:italic; font-weight:800; font-size:13px; text-transform:uppercase; padding:8px 10px; border-radius:8px; background:var(--encre); color:var(--jaune-clair)}

.bulle-eleve-fil{display:flex; justify-content:flex-end}
.bulle-eleve-fil .bulle{max-width:82%; padding:10px 14px; border-radius:16px 4px 16px 16px; background:var(--jaune); border:1.5px solid var(--encre); box-shadow:0 2px 0 var(--encre);
  font-size:15px; line-height:1.42; overflow-wrap:anywhere; white-space:pre-wrap}

.bulle.attente, .bulle-prof-fil.attente .bulle{display:flex; gap:5px; align-items:center; min-height:42px; width:max-content}
.bulle.attente i, .bulle-prof-fil.attente .bulle i{width:7px; height:7px; border-radius:50%; background:var(--encre-3); animation:prof-pense 1.1s infinite ease-in-out}
.bulle.attente i:nth-child(2), .bulle-prof-fil.attente .bulle i:nth-child(2){animation-delay:.15s}
.bulle.attente i:nth-child(3), .bulle-prof-fil.attente .bulle i:nth-child(3){animation-delay:.3s}
@keyframes prof-pense{0%, 80%, 100%{transform:translateY(0); opacity:.4} 40%{transform:translateY(-5px); opacity:1}}

.prof-suggestions{display:flex; gap:8px; overflow-x:auto; padding:4px 0 10px; scrollbar-width:none; max-width:100%}
.prof-suggestions::-webkit-scrollbar{display:none}
.prof-sugg{flex:none; min-height:36px; padding:7px 12px; font-size:13px; cursor:pointer; white-space:nowrap; background:var(--papier-3)}
.prof-sugg:hover{border-color:var(--encre)}

.prof-saisie{position:sticky; bottom:0; z-index:2; display:flex; align-items:flex-end; gap:8px; padding:10px 0 12px;
  background:linear-gradient(180deg, rgba(246,238,223,0) 0, var(--papier) 14px)}
.prof-saisie textarea{flex:1; min-width:0; resize:none; min-height:46px; max-height:140px; padding:11px 14px; border-radius:var(--r-s); border:2px solid var(--encre); background:var(--papier-3);
  font:inherit; font-size:16px; line-height:1.4; color:var(--encre); outline:none}
.prof-saisie textarea:focus{border-color:var(--brique)}
.prof-saisie .btn{min-height:46px; width:52px; padding:0; flex:none}

.jauge-mini{display:inline-block; width:38px; height:6px; border-radius:3px; background:var(--trait-doux); overflow:hidden; vertical-align:middle; margin-left:4px}
.jauge-mini i{display:block; height:100%; background:var(--ok); border-radius:3px}
#energie{font-size:10.5px}

/* ---------- Mémoire ---------- */
.prof-memoire{max-height:min(80dvh, 640px); overflow:auto}
.liste-memoire{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.liste-memoire li{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-s); background:var(--papier); border:1px solid var(--trait-moyen); font-size:14.5px}
.liste-memoire li span{min-width:0; overflow-wrap:anywhere}
.liste-memoire li.muet{display:block}

/* ---------- « Pourquoi ? » dans le bandeau de correction ---------- */
.bulle-prof-fil.pourquoi{margin-top:12px; max-width:100%; grid-template-columns:28px minmax(0, 1fr)}
.bulle-prof-fil.pourquoi .mini-visage{width:28px; height:28px}
.bulle-prof-fil.pourquoi .bulle{font-size:14.5px}
.btn-pourquoi{margin-top:10px}

/* ---------- Le mot du jour (Mission) ---------- */
.prof .actions-prof{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.prof .prochaine{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13.5px; color:var(--encre-2)}

@media (min-width: 900px){
  .prof-suggestions{flex-wrap:wrap; overflow:visible}
  .prof-sugg{flex:0 1 auto; max-width:100%; white-space:normal; text-align:left}
}
@media (max-width: 380px){
  .jours-semaine{gap:4px}
  .jour{font-size:13.5px; padding:8px 0 7px}
  .tache{grid-template-columns:28px 1fr auto; gap:8px}
  .t-go{padding:0 10px}
}
@media (prefers-reduced-motion: reduce){
  .bulle.attente i, .bulle-prof-fil.attente .bulle i{animation:none; opacity:.7}
}

/* les réponses et suggestions se lisent comme du texte, pas comme des étiquettes techniques */
.q-choix .puce, .prof-sugg{font-family:var(--f-texte); letter-spacing:0; text-transform:none; font-weight:600}