/* [HOME-BENEFIT-PROF-20261004] Scènes prof IA (« ton prof IA avec
   toi 24h/24 », rangée APRÈS le correcteur, + variante lycée) :
   cinématiques SANS cadre téléphone et SANS contour autour du chat,
   en boucle — seul le message du prof a un contour. L'élève pose
   sa question d'EXERCICE en NOIR (« Je n'ai pas compris dans
   l'exo … Pourquoi … ? », avec sa tentative), le prof répond en
   BLANC : réponse DÉVELOPPÉE en 3 temps (verdict, point clé
   calculé, méthode), tapée lettre à lettre, SANS surlignage et
   sans exos conseillés, puis message graphique (tracé).
   Le fil défile comme un vrai chat, décalé vers la gauche ; les
   bulles grandissent au fil de la frappe (rien ne prend de place
   avant d'être révélé), l'élève comme le prof tapent lettre à
   lettre avec un seul curseur visible. Puis fondu et nouveau
   cycle. Pas de zoom. Deux variantes via
   data-variant (topo, integrale), même mécanique. Couleurs et rayons
   repris de src/theme.ts. La machine à états vit dans
   benefit-prof.js et pilote data-act (ask, answer). Les maths sont
   en vrai HTML (<sub>/<sup>, jamais de caractères souscrits
   Unicode).
   Contenu réduit (~0,87, [HOME-PROF-SHRINK-20261005]) pour que
   le fil tienne dans la fenêtre : la bulle noire de l'élève n'est
   jamais coupée en haut. Le cadre est inchangé (scène 640/700,
   fenêtre 430×600/660). */

.benefit-prof-stage {
  flex: 0 1 540px;
  min-width: 0;
  display: flex;
  justify-content: center;
  margin: 0;
}

/* Portée Lycée/Prépa : une seule des deux variantes affichée (site).
   Sans cette règle, le display:flex ci-dessus gagnerait sur hidden. */
.benefit-prof-stage[hidden] {
  display: none;
}

.benefit-prof-scene {
  position: relative;
  width: min(100%, 540px);
  height: 640px;
  color: #0a0d0c;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
  transition: opacity 450ms ease;
}

/* Boîte prévisible, scopée à la scène : sans ça les bulles (larges
   de 100 % + leur padding) débordent de leur colonne et se font
   couper à droite par la fenêtre du fil. */
.benefit-prof-scene,
.benefit-prof-scene *,
.benefit-prof-scene *::before,
.benefit-prof-scene *::after {
  box-sizing: border-box;
}

/* Fin de boucle : fondu de sortie avant le nouveau cycle. */
.benefit-prof-scene.is-fading {
  opacity: 0;
}

.benefit-prof-scene sub,
.benefit-prof-scene sup {
  font-size: 0.72em;
  line-height: 0;
}

/* ---------------- Fenêtre du fil, sans contour ---------------- */

/* Le fil est décalé vers la gauche : les messages respirent à
   droite, jamais coupés. */
.benefit-prof-thread {
  position: absolute;
  left: 46%;
  top: 50%;
  width: min(100%, 430px);
  height: 600px;
  max-height: 100%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.benefit-prof-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 8px;
  transition: transform 500ms ease;
  will-change: transform;
}

/* ---------------- Messages ---------------- */

.benefit-prof-bubble {
  max-width: 90%;
  border-radius: 14px;
  padding: 8px 11px;
  font-size: 13px;
  line-height: 1.45;
}

.benefit-prof-bubble p {
  margin: 0;
}

/* Rangée élève : bulle NOIRE avec contour + icône noire. */
.benefit-prof-srow {
  display: flex;
  gap: 7px;
  align-items: flex-end;
  justify-content: flex-end;
}

.benefit-prof-bubble.is-user {
  min-width: 150px;
  min-height: 40px;
  background: #0a0d0c;
  border: 1px solid #0a0d0c;
  color: #fff;
  border-top-right-radius: 4px;
}

.benefit-prof-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: #fff;
  animation: benefit-prof-blink 1s infinite;
}

/* Curseur du prof : sombre, sur fond blanc. */
.benefit-prof-caret.is-prof {
  background: #0a0d0c;
}

.benefit-prof-caret.is-off {
  display: none;
}

/* Heure du message (23h11), révélée à l'envoi : discrète, en bas
   à droite de la bulle, lisible sur fond noir comme sur blanc. */
.benefit-prof-time {
  display: none;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.benefit-prof-time.is-on {
  display: block;
}

.benefit-prof-bubble.is-user .benefit-prof-time {
  color: rgba(255, 255, 255, 0.55);
}

.benefit-prof-bubble.is-prof .benefit-prof-time {
  color: rgba(10, 13, 12, 0.45);
}

.benefit-prof-student {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 999px;
  background: #0a0d0c;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-prof-student svg {
  width: 17px;
  height: 17px;
}

/* Rangée prof : icône chapeau + bulle BLANCHE avec contour. */
.benefit-prof-prow {
  display: none;
  gap: 7px;
  align-items: flex-start;
}

.benefit-prof-prow.is-on {
  display: flex;
}

.benefit-prof-pcol {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.benefit-prof-bubble.is-prof {
  background: #fff;
  border: 1px solid #e1e4e2;
  color: #0a0d0c;
  border-top-left-radius: 4px;
  box-shadow: 0 6px 18px rgba(10, 13, 12, 0.06);
}

.benefit-prof-avatar {
  position: relative;
  width: 28px;
  height: 28px;
  flex: none;
  margin-top: 2px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e1e4e2;
  color: #0a0d0c;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-prof-avatar svg {
  width: 17px;
  height: 17px;
}

/* Pastille de présence, posée sur l'icône. */
.benefit-prof-presence {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #16a34a;
  border: 2px solid #fff;
}

/* Indicateur de frappe du prof. */
.benefit-prof-dots {
  display: none;
  align-self: flex-start;
  gap: 4px;
  padding: 10px 12px;
}

.benefit-prof-dots.is-on {
  display: flex;
}

.benefit-prof-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #0a0d0c;
  animation: benefit-prof-blink 1s infinite;
}

.benefit-prof-dots span:nth-child(2) { animation-delay: 0.15s; }
.benefit-prof-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes benefit-prof-blink {
  0%, 60%, 100% { opacity: 0.3; transform: none; }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* ---------------- Réponses du prof ---------------- */

.benefit-prof-answer {
  display: none;
  max-width: 100%;
  width: 100%;
  padding: 8px 10px 9px;
}

.benefit-prof-answer.is-on {
  display: block;
}

/* Étiquette du 3e message : Exercices conseillés. */
.benefit-prof-tag {
  display: none;
  margin: 2px 0 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(10, 13, 12, 0.55);
}

.benefit-prof-tag:first-child {
  margin-top: 0;
}

.benefit-prof-tag.is-on {
  display: block;
  animation: benefit-prof-capin 400ms ease;
}

.benefit-prof-line {
  margin: 0 0 6px;
}

.benefit-prof-line:last-child {
  margin-bottom: 0;
}

/* Frappe du prof, lettre à lettre comme l'élève : les caractères
   cachés ne prennent pas de place (la bulle grandit au fil de la
   frappe) et apparaissent nets, sans flou ni fondu. */
.benefit-prof-ch {
  display: none;
}

.benefit-prof-ch.is-on {
  display: inline;
}

/* ---------------- Exercices conseillés : des liens ---------------- */
/* Bleu souligné : on comprend sans le dire qu'on peut cliquer pour
   être redirigé vers l'exercice. */
.benefit-prof-exos {
  margin: 0 0 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.benefit-prof-exo {
  display: none;
  font-size: 14px;
  font-weight: 600;
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.benefit-prof-exo.is-on {
  display: block;
  animation: benefit-prof-capin 400ms ease;
}

/* ---------------- Message graphique : tracé ---------------- */

.benefit-prof-graph {
  border-radius: 10px;
  overflow: hidden;
}

.benefit-prof-graph canvas {
  display: block;
  width: 100%;
  height: 172px;
}

@keyframes benefit-prof-capin {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* État statique (tests, prefers-reduced-motion) : tout visible. */
.benefit-prof-scene.is-final .benefit-prof-flow {
  transition: none;
}

.benefit-prof-scene.is-final .benefit-prof-prow,
.benefit-prof-scene.is-final .benefit-prof-answer {
  display: block;
}

.benefit-prof-scene.is-final .benefit-prof-prow {
  display: flex;
}

.benefit-prof-scene.is-final .benefit-prof-tag {
  display: block;
}

.benefit-prof-scene.is-final .benefit-prof-exo {
  display: block;
}

.benefit-prof-scene.is-final .benefit-prof-ch {
  display: inline;
}

.benefit-prof-scene.is-final .benefit-prof-time {
  display: block;
}

.benefit-prof-scene.is-final .benefit-prof-caret {
  display: none;
}

/* [HOME-PROF-MOBILE-INSET-20261005] Téléphone uniquement
   (<= 680 px) : le fil, décalé à 46 % sur bureau, est recentré
   dans la scène (qui a retrouvé les 14 px de marges de la section,
   benefits.css) : plus rien ne touche les bords de l'écran. Et le
   fil, ancré en bas par JS (les vieux messages sortent par le haut,
   coupés nets par overflow hidden), reçoit un fondu haut/bas : le
   contenu qui dépasse se dissout au lieu d'être coupé net. Le
   padding vertical du flot garde le contenu courant hors des
   zones de fondu. Bureau inchangé (46 %, coupe nette). */
@media (max-width: 680px) {
  .benefit-prof-thread {
    left: 50%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .benefit-prof-flow {
    padding: 24px 8px 28px;
  }
}

@media (max-width: 480px) {
  .benefit-prof-scene {
    height: 700px;
  }
  .benefit-prof-thread {
    height: 660px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .benefit-prof-scene,
  .benefit-prof-flow {
    transition: none;
  }
  .benefit-prof-dots span,
  .benefit-prof-caret,
  .benefit-prof-exo.is-on {
    animation: none;
  }
}