/* Mailathlon — scène de lecture (public/js/scene.js), résultat simple, rappel du point à travailler, coach.
   Seules transform et opacity sont animées. Mouvement réduit : voir la règle globale de style.css. */

/* ---------- Scène ---------- */
.scene{position:relative;margin-top:10px}
.sc-av,.avatar{--av-bg:var(--soft);--av-ink:#1A1A1E}
.sc-top{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:16px;box-shadow:var(--shadow)}
.sc-reader{display:flex;align-items:center;gap:14px}
.sc-av{position:relative;width:76px;height:76px;flex:none}
.sc-av .avatar{width:100%;height:100%;display:block}
.sc-badge{position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;border-radius:11px;background:var(--accent-strong);color:var(--accent-ink);font:600 12px/22px var(--sans);text-align:center;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.scene[data-phase="notif"] .sc-badge,.scene[data-mode="full"][data-phase="wait"] .sc-badge{transform:scale(1)}
.sc-id{min-width:0;flex:1}
.sc-id strong{display:block;font-size:16px;line-height:1.25}
.sc-id small{display:block;color:var(--muted);font-size:13px;line-height:1.3}
.sc-status{display:inline-block;margin-top:5px;font-family:var(--mono);font-size:12px;color:var(--accent-strong)}
.scene[data-phase="done"] .sc-status{color:var(--muted)}
.sc-skip{align-self:flex-start;flex:none;font-family:var(--mono);font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 14px;min-height:40px;background:var(--bg)}
.sc-skip:hover{color:var(--ink);border-color:var(--ink)}
.sc-notif{position:absolute;left:50%;top:-15px;display:flex;gap:8px;align-items:center;max-width:calc(100% - 32px);background:var(--ink);color:var(--bg);border-radius:999px;padding:6px 14px;font-size:13px;white-space:nowrap;opacity:0;transform:translate(-50%,-10px);transition:opacity .25s,transform .4s cubic-bezier(.2,.8,.2,1);pointer-events:none;z-index:3;box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
.sc-notif span{overflow:hidden;text-overflow:ellipsis}
.sc-notif svg{flex:none}
.scene[data-phase="notif"] .sc-notif,.scene[data-mode="full"][data-phase="wait"] .sc-notif{opacity:1;transform:translate(-50%,0)}
.sc-bubble{position:relative;margin-top:16px;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:14px 18px;font-family:var(--serif);font-size:25px;line-height:1.2;transform-origin:40px 0}
.sc-bubble:before{content:"";position:absolute;left:30px;top:-8px;width:14px;height:14px;background:var(--bg);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}

/* Avatar : expressions en fondu, clignement, tête qui suit la lecture */
.avatar .ex{opacity:0;transition:opacity .2s}
.sc-av[data-expr="neutral"] .ex-neutral,.sc-av[data-expr="focused"] .ex-focused,.sc-av[data-expr="happy"] .ex-happy,
.sc-av[data-expr="puzzled"] .ex-puzzled,.sc-av[data-expr="annoyed"] .ex-annoyed,.sc-av[data-expr="sad"] .ex-sad{opacity:1}
.avatar .eyes{transform-box:fill-box;transform-origin:center;animation:sc-blink 4.6s infinite}
.avatar .head{transform-box:view-box;transform-origin:60px 90px}
.scene[data-phase="read"] .avatar .head{animation:sc-bob 1.5s ease-in-out infinite}
.avatar .qmark{animation:sc-float 1.4s ease-in-out infinite}
@keyframes sc-blink{0%,94%,100%{transform:scaleY(1)}96.5%{transform:scaleY(.1)}}
@keyframes sc-bob{50%{transform:translateY(1.5px) rotate(-1.5deg)}}
@keyframes sc-float{50%{transform:translateY(-3px)}}

/* Envoi */
.sc-stage{position:relative;margin-top:14px}
.sc-draft{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:12px 18px 16px;box-shadow:var(--shadow);transform-origin:50% 0}
.sc-draft-body{margin-top:10px;font-size:15px;max-height:200px;overflow:hidden;color:var(--muted);-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.sc-env{position:absolute;left:0;top:0;width:56px;height:56px;color:var(--ink);z-index:5;pointer-events:none;will-change:transform}
.sc-env svg{width:100%;height:100%;display:block}

/* Le mail lu */
.sc-paper{position:relative}
.sc-mail{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:12px 18px 18px;box-shadow:var(--shadow)}
.sc-line{font-size:14px;color:var(--muted);padding:7px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:baseline}
.sc-line > span{font-family:var(--mono);font-size:12px;min-width:46px}
.sc-line b{font-weight:600;color:var(--ink)}
.sc-body{margin-top:12px;font-size:16px;line-height:1.7;overflow-wrap:anywhere}
.sc-paper:not(.all-read) .w{color:color-mix(in srgb,var(--ink) 38%,transparent);transition:color .2s}
.sc-paper .w.read{color:var(--ink)}
.sc-paper .w.cur{background:color-mix(in srgb,var(--accent) 24%,transparent);border-radius:4px;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 24%,transparent)}
mark.mo{background:none;color:inherit;border-radius:4px;transition:background .35s,box-shadow .35s}
mark.mo.lit.pos{background:color-mix(in srgb,var(--good) 15%,transparent);box-shadow:inset 0 -2px 0 var(--good)}
mark.mo.lit.neg{background:color-mix(in srgb,var(--bad) 13%,transparent);box-shadow:inset 0 -2px 0 var(--bad)}
.mo-n{display:none}
.mo-n.lit{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;margin-left:3px;font:700 10px/1 var(--sans);color:#fff;vertical-align:4px}
.mo-n.pos,.note.pos .note-n{background:var(--good)}
.mo-n.neg,.note.neg .note-n{background:var(--bad)}
.sc-notes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.note{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);opacity:0;transform:translateY(6px);transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.note.lit{opacity:1;transform:none}
.note.pos{border-color:color-mix(in srgb,var(--good) 45%,var(--line));background:color-mix(in srgb,var(--good) 7%,var(--paper))}
.note.neg{border-color:color-mix(in srgb,var(--bad) 45%,var(--line));background:color-mix(in srgb,var(--bad) 6%,var(--paper))}
.note-n{flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--sans);color:#fff}
.note-t{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.25}

/* PC : pensées dans la marge, à hauteur de l'extrait */
.sc-paper.margin{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:18px;align-items:start}
.sc-paper.margin .sc-notes{display:block;position:relative;margin:0;align-self:stretch}
.sc-paper.margin .note{position:absolute;left:0;right:0;top:0;transform:translateX(-8px)}
.sc-paper.margin .note.lit{transform:none}
.sc-paper.margin .note:before{content:"";position:absolute;left:-19px;top:19px;width:18px;border-top:2px dotted var(--line)}
.sc-paper.margin .note.pos:before{border-color:var(--good)}
.sc-paper.margin .note.neg:before{border-color:var(--bad)}

/* Mobile : bulle éphémère sous l'extrait (la liste reste sous le mail) */
.sc-pop{position:absolute;left:12px;right:12px;z-index:3;padding:10px 14px;border-radius:14px;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.25;color:#fff;box-shadow:0 12px 30px -12px rgba(0,0,0,.45);animation:sc-popin .3s cubic-bezier(.2,.8,.2,1)}
.sc-pop.pos{background:var(--good)}
.sc-pop.neg{background:var(--bad)}
.sc-pop.out{opacity:0;transform:translateY(-4px);transition:opacity .25s,transform .25s}
@keyframes sc-popin{from{opacity:0;transform:translateY(8px) scale(.96)}}
.muted{color:var(--muted)}

/* ---------- Résultat simple ---------- */
.res .score{position:relative;margin:20px 0 4px}
.res .score .engine{flex-basis:100%}
.confetti{position:absolute;left:60px;top:30px;width:0;height:0;pointer-events:none;z-index:4}
.confetti i{position:absolute;left:-4px;top:-6px;width:8px;height:12px;border-radius:2px;will-change:transform}
.res-cards{display:grid;gap:10px;margin-top:14px}
.res-card{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.res-card .ic{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px}
.res-card.good .ic{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.res-card.focus{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:color-mix(in srgb,var(--accent) 4%,var(--paper))}
.res-card.focus .ic{background:var(--soft);color:var(--accent-strong)}
.res-card b{display:block;font-family:var(--mono);font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:4px}
.res-card p{font-size:16px;line-height:1.45}
.chip{display:inline-block;font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;color:var(--accent-strong);background:var(--soft);border-radius:999px;padding:2px 9px;margin-left:6px;vertical-align:1px}
.res-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 8px}
.res-actions .cta{flex:1 1 100%;justify-content:center}
.res-actions .ghost{flex:1 1 0;justify-content:center;min-height:48px;white-space:nowrap}
@media (min-width:640px){.res-actions .cta,.res-actions .ghost{flex:0 1 auto}}
details.more{margin-top:18px}
details.more > summary{font-weight:600}
.more h3{font-family:var(--mono);font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:20px 0 8px}
.more .sc-mail{box-shadow:none}
.more .rows{margin-top:0}

/* ---------- Rappel du point à travailler (réécriture) ---------- */
.focus-recall{display:flex;gap:12px;align-items:flex-start;margin-top:12px;background:color-mix(in srgb,var(--accent) 6%,var(--paper));border:1px solid color-mix(in srgb,var(--accent) 50%,var(--line));border-radius:16px;padding:12px 16px}
.focus-recall .ic{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--accent-strong);font-weight:700}
.focus-recall b{display:block;font-family:var(--mono);font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-strong)}

/* ---------- Coach (page Progression) ---------- */
.coach{margin-top:20px;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:14px;padding:14px 16px}
.coach p{font-size:16px}
.coach small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.coach-recos{display:grid;gap:8px;margin-top:12px}
.coach-recos a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;font-weight:500;min-height:48px}
.coach-recos a:hover{border-color:var(--ink)}
.coach-recos small{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}

@media (min-width:760px){.sc-av{width:92px;height:92px}.sc-top{padding:20px 22px}.sc-bubble{font-size:28px}}
@media (max-width:420px){.sc-bubble{font-size:22px}.sc-av{width:68px;height:68px}.sc-top{padding:14px}}
.res-read h3{font-family:var(--mono);font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:20px 0 8px}