{% extends "v3/base.html" %}

{% block content %}
<style>
/* === Wizard plein écran : cache sidebar + header parent === */
.app > .header,
.app > .sidebar,
#permission-banner {
    display: none !important;
}
.main {
    margin-left: 0 !important;
    padding-top: 0 !important;
    min-height: 100vh;
}

/* === Conteneur tuto === */
.acad-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2.5rem 1.5rem 4rem;
    position: relative;
}
.acad-brand {
    position: absolute;
    top: 1.25rem;
    left: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.5px;
}
.acad-skip {
    position: absolute;
    top: 1.15rem;
    right: 1.5rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.18s ease;
}
.acad-skip:hover { background: var(--bg-hover); color: var(--text); border-color: var(--text-muted); }

/* === Progress dots (4 slides) === */
.acad-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.acad-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    transition: all 0.3s ease;
}
.acad-dot.done { background: var(--accent); }
.acad-dot.current {
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-light);
}
.acad-bar {
    width: 30px;
    height: 2px;
    background: var(--border);
    transition: background 0.3s ease;
}
.acad-bar.done { background: var(--accent); }

/* === Badge format Explication / Action (gros badge en haut de slide) === */
.acad-badge-big {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}
.acad-badge-explication {
    background: rgba(26, 143, 255, 0.10);
    color: var(--accent);
    border: 1.5px solid rgba(26, 143, 255, 0.35);
}
.acad-badge-action {
    background: rgba(255, 171, 26, 0.10);
    color: #c97400;
    border: 1.5px solid rgba(255, 171, 26, 0.45);
}
[data-theme="dark"] .acad-badge-action { color: #FFAB1A; }
.acad-badge-big::before {
    font-size: 1rem;
    line-height: 1;
}
.acad-badge-explication::before { content: "📖"; }
.acad-badge-action::before { content: "👉"; }

/* === Frise visuelle (slide 2 et 4) — flow d'étapes pédagogique === */
.acad-frise {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    flex-wrap: wrap;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.1rem 0.8rem;
    margin: 0.5rem 0 1.25rem;
}
.acad-frise-step {
    flex: 1 1 0;
    min-width: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 0.5rem 0.4rem;
    position: relative;
}
.acad-frise-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin-bottom: 0.55rem;
    box-shadow: 0 2px 8px rgba(26, 143, 255, 0.18);
}
.acad-frise-icon svg { width: 26px; height: 26px; }

/* Variante : raccourci clavier comme icône (mini-clavier inline) */
.acad-frise-kbd {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 9px 11px;
    background: var(--card);
    border: 2px solid var(--accent);
    border-radius: 12px;
    margin-bottom: 0.55rem;
    box-shadow: 0 2px 8px rgba(26, 143, 255, 0.18);
    min-height: 56px;
    box-sizing: border-box;
}
.acad-frise-kbd .kbd-mini {
    padding: 5px 9px;
    background: white;
    border: 1.5px solid #d1d5db;
    border-radius: 6px;
    font-family: Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
    box-shadow: 0 1px 0 #d1d5db;
    line-height: 1;
}
[data-theme="dark"] .acad-frise-kbd .kbd-mini { background: #f9fafb; }
.acad-frise-kbd .kbd-plus {
    color: var(--accent);
    font-size: 1rem;
    font-weight: 600;
}

/* === Warning / Astuce (sous la frise slide 2) === */
.acad-warning {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid #ef4444;
    border-radius: 0 8px 8px 0;
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.5;
}
.acad-warning::before { content: "⚠ "; color: #ef4444; font-weight: 700; margin-right: 0.2rem; }
.acad-warning strong { color: #c1170a; }
[data-theme="dark"] .acad-warning strong { color: #fca5a5; }
.acad-frise-num {
    font-size: 0.66rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}
.acad-frise-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    max-width: 130px;
}
.acad-frise-arrow {
    display: flex;
    align-items: center;
    color: var(--accent);
    font-size: 1.3rem;
    padding-top: 22px;
    opacity: 0.6;
}
@media (max-width: 640px) {
    .acad-frise { flex-direction: column; padding: 1rem; }
    .acad-frise-arrow { transform: rotate(90deg); padding: 0.3rem 0; }
}

/* === CTA encouragement (slide 1) === */
.acad-cta-hint {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    background: var(--accent-light);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.5;
}
.acad-cta-hint strong { color: var(--accent); }

/* === Astuce (slide 4 — déplacement capsule) === */
.acad-tip {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    background: rgba(255, 171, 26, 0.08);
    border-left: 3px solid #FFAB1A;
    border-radius: 0 8px 8px 0;
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.5;
}
.acad-tip::before { content: "💡 "; }

/* === Schéma 3 états capsule (slide 4) === */
.capsule-states {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.3rem 0.8rem;
    margin: 0.5rem 0 1rem;
}
.capsule-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    flex: 1 1 0;
    min-width: 140px;
    padding: 0.4rem;
}
.capsule-state-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
}
.capsule-state-label small {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0.15rem;
}
.capsule-state .cap-pill { transform: scale(0.65); transform-origin: center; }
.capsule-state .cap-pill.mini { transform: scale(1); }
.capsule-states-arrow {
    color: var(--accent);
    font-size: 1.4rem;
    opacity: 0.6;
}
@media (max-width: 640px) {
    .capsule-states { flex-direction: column; }
    .capsule-states-arrow { transform: rotate(90deg); }
}

/* Mini popup résultat (pour le schéma slide 4 — version réduite du vrai popup) */
.capsule-state .mini-popup {
    width: 160px;
    background: #FAFAFC;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.capsule-state .mini-popup-body {
    padding: 0.5rem 0.6rem;
    font-size: 0.7rem;
    color: #1f1f1f;
    line-height: 1.4;
    min-height: 38px;
}
.capsule-state .mini-popup-darkbar {
    height: 22px;
    background: #1F1F22;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.capsule-state .mini-popup-darkbar span {
    color: #9B9BA1;
    font-size: 9px;
}

/* === Step container === */
.acad-step {
    width: 100%;
    max-width: 760px;
    display: none;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.acad-step.active {
    display: block;
    opacity: 1;
    transform: scale(1);
}
.acad-eyebrow {
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.acad-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.7rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.acad-lead {
    color: var(--text-muted);
    font-size: 1.08rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
}

/* === Bloc À vous (seul bloc qui garde son badge) === */
.block-action {
    background: var(--accent-light);
    border: 1px solid var(--accent-light);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 1.5rem 1.25rem 1.25rem;
    margin: 1rem 0 1.25rem;
    position: relative;
}
.block-action::before {
    content: "👉 À vous de jouer";
    position: absolute;
    top: -10px;
    left: 14px;
    background: var(--accent);
    color: white;
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === Scène d'animation (slide 1) === */
.acad-stage {
    position: relative;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0;
    background: var(--bg-hover);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    margin: 0.5rem 0 1.25rem;
}
.scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
    pointer-events: none;
    padding: 0 1rem;
}
.scene.active { opacity: 1; transform: translateY(0); }
.scene-caption {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    max-width: 90%;
    line-height: 1.5;
}

/* === Keyboard === */
.kbd-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    position: relative;
}
.kbd-key {
    padding: 10px 16px;
    background: white;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-family: Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 0.95rem;
    color: #374151;
    box-shadow: 0 2px 0 #d1d5db, 0 1px 4px rgba(0,0,0,0.08);
    transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 200ms ease-out,
                background 200ms ease-out,
                border-color 200ms ease-out,
                color 200ms ease-out;
}
.kbd-key.appear { animation: kbdAppear 500ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.kbd-key.pressed {
    transform: translateY(3px) scale(0.96);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
}
.kbd-plus { color: #9ca3af; font-size: 1.1rem; font-weight: 500; }
.kbd-ripple {
    position: absolute;
    inset: -14px;
    border-radius: 14px;
    background: rgba(26, 143, 255, 0.18);
    animation: kbdRipple 700ms ease-out forwards;
    pointer-events: none;
}
@keyframes kbdAppear {
    0% { opacity: 0; transform: translateY(-10px) scale(0.88); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kbdRipple {
    0% { transform: scale(0.85); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* === Capsule (constants alignées sur capsule_window_qt.py) === */
.cap-pill {
    width: 300px;
    height: 84px;
    background: #1F1F22;
    border-radius: 22px;
    position: relative;
    box-shadow: 0 8px 24px rgba(0,0,0,0.22);
    transition: width 450ms cubic-bezier(0.34, 1.56, 0.64, 1),
                height 450ms cubic-bezier(0.34, 1.56, 0.64, 1),
                border-radius 450ms cubic-bezier(0.34, 1.56, 0.64, 1),
                transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 400ms ease-out;
}
.cap-pill.grow-in { animation: capGrowIn 600ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
@keyframes capGrowIn {
    0%   { opacity: 0; transform: scale(0.35); }
    60%  { opacity: 1; }
    100% { transform: scale(1); }
}
.cap-pill.mini {
    width: 80px;
    height: 22px;
    border-radius: 11px;
}

/* Barres écoute (revues : moins violentes, hauteurs variées) */
.cap-bars {
    position: absolute;
    inset: 24px 70px auto 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 36px;
}
.cap-bars > span {
    width: 5px;
    background: #FFAB1A;
    border-radius: 2px;
    transform-origin: center;
    animation: audioBar 1.1s ease-in-out infinite alternate;
}
.cap-bars > span:nth-child(1)  { height: 8px;  animation-delay: 0.00s; }
.cap-bars > span:nth-child(2)  { height: 16px; animation-delay: 0.08s; }
.cap-bars > span:nth-child(3)  { height: 22px; animation-delay: 0.16s; }
.cap-bars > span:nth-child(4)  { height: 28px; animation-delay: 0.24s; }
.cap-bars > span:nth-child(5)  { height: 14px; animation-delay: 0.32s; }
.cap-bars > span:nth-child(6)  { height: 24px; animation-delay: 0.40s; }
.cap-bars > span:nth-child(7)  { height: 18px; animation-delay: 0.48s; }
.cap-bars > span:nth-child(8)  { height: 30px; animation-delay: 0.56s; }
.cap-bars > span:nth-child(9)  { height: 12px; animation-delay: 0.64s; }
.cap-bars > span:nth-child(10) { height: 20px; animation-delay: 0.72s; }
.cap-bars > span:nth-child(11) { height: 10px; animation-delay: 0.80s; }
@keyframes audioBar {
    0%   { transform: scaleY(0.5); opacity: 0.7; }
    100% { transform: scaleY(1.1); opacity: 1; }
}

/* Dots réflexion : NOIR/BLANC (pas bleu/orange) */
.cap-dots {
    position: absolute;
    inset: 20px 0 auto 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.cap-dots > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C9C9CE;
    animation: capDot 0.9s ease-in-out infinite;
}
.cap-dots > span:nth-child(2) { animation-delay: 0.18s; }
.cap-dots > span:nth-child(3) { animation-delay: 0.36s; }
@keyframes capDot {
    0%, 100% { opacity: 0.25; transform: scale(0.7); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

.cap-label {
    position: absolute;
    inset: auto 0 30px 0;
    text-align: center;
    color: #F5F5F7;
    font-family: Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
/* Le label "En écoute…" est masqué sur l'état recording (animation plus propre) */
.cap-pill[data-state="recording"] .cap-label { display: none; }
.cap-label-mini {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #F5F5F7;
    font-family: Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 600;
}
.cap-label-mini::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3DDB72;
}

.cap-controls {
    position: absolute;
    inset: auto 0 10px 0;
    display: flex;
    justify-content: center;
    gap: 9px;
}
.cap-ctrl {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9B9BA1;
    font-family: Menlo, Consolas, "Segoe UI Symbol", monospace;
    font-size: 12px;
}
/* Stop : GRIS (pas rouge), centré verticalement (comme dans l'app réelle) */
.cap-ctrl.stop {
    width: 26px;
    height: 22px;
    background: rgba(255, 255, 255, 0.12);
    color: #E5E5EA;
    border-radius: 5px;
    font-size: 9px;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Speech bubble (dialogue parlé pendant l'écoute) */
.scene-speech {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.6rem 1rem;
    font-size: 0.92rem;
    color: var(--text);
    font-style: italic;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    max-width: 360px;
    position: relative;
    line-height: 1.4;
}
.scene-speech::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 28px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: white;
    border-bottom: 0;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.06));
}
.scene-speech .typing-caret {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: var(--accent);
    animation: caretBlink 0.8s infinite step-end;
    vertical-align: text-bottom;
    margin-left: 1px;
}
@keyframes caretBlink {
    0%, 50%   { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Textarea cible (où le texte transcrit se colle) */
.receiver-app {
    width: 420px;
    max-width: 100%;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.receiver-bar {
    background: #f3f4f6;
    border-bottom: 1px solid var(--border);
    padding: 6px 12px;
    font-size: 0.78rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.receiver-textarea {
    width: 100%;
    min-height: 70px;
    border: none;
    padding: 0.7rem 0.9rem;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #1F1F22;
    resize: none;
    background: white;
    outline: none;
}

/* Bouton replay */
.acad-replay {
    margin-top: 0.5rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.18s ease;
}
.acad-replay:hover { background: var(--bg-hover); color: var(--text); }

/* Boutons explication */
.btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1.5rem;
    margin: 1rem 0 0.5rem;
}
@media (max-width: 600px) {
    .btn-grid { grid-template-columns: 1fr; }
}
.btn-row {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.45;
}
.btn-glyph {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: #1F1F22;
    color: #9B9BA1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-family: Menlo, Consolas, "Segoe UI Symbol", monospace;
}
.btn-row strong { display: block; font-weight: 600; margin-bottom: 0.15rem; color: var(--text); }
.btn-row .btn-desc { color: var(--text-muted); font-size: 0.86rem; }

/* === Slide 2 : visuel clavier live + textarea === */
.kbd-live {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 1rem;
}
.acad-steps-list {
    counter-reset: step;
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}
.acad-steps-list li {
    counter-increment: step;
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 0.75rem;
    color: var(--text);
    line-height: 1.55;
    font-size: 1rem;
}
.acad-steps-list li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kbd-inline {
    display: inline-block;
    padding: 3px 9px;
    background: var(--card);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 1px 0 var(--border);
    font-family: Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 0.9rem;
}
.acad-textarea {
    width: 100%;
    min-height: 90px;
    padding: 0.85rem 1rem;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    margin-top: 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.acad-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-light);
}
.acad-textarea.success {
    border-color: var(--success);
    background: #f0fdf4;
}
[data-theme="dark"] .acad-textarea.success { background: #052e16; }
.acad-success-msg {
    margin-top: 0.6rem;
    padding: 0.4rem 0.7rem;
    background: var(--success);
    color: white;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    display: none;
}
.acad-success-msg.show { display: inline-block; }

/* === Slide 3 : Mini-clone HTML/CSS de la page Agents === */
.mini-agents {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    position: relative;
}
.mini-agents-bar {
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mini-agents-bar .mini-new {
    background: var(--accent);
    color: white;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 6px;
}
.mini-section-title {
    padding: 0.65rem 1rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 700;
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border);
}
.mini-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}
.mini-row:last-child { border-bottom: 0; }
.mini-star {
    color: var(--text-muted);
    font-size: 1.15rem;
    width: 20px;
    text-align: center;
}
.mini-name {
    font-weight: 600;
    color: var(--text);
    flex: 0 0 120px;
    font-size: 0.95rem;
}
.mini-desc {
    color: var(--text-muted);
    font-size: 0.86rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mini-icons {
    display: flex;
    gap: 0.3rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.mini-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--bg-hover);
    font-size: 0.9rem;
}
.mini-mic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--text-muted);
}
.mini-icons {
    min-width: 26px;
}
.mini-hotkey {
    font-family: Menlo, Consolas, monospace;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.84rem;
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
    min-width: 120px;
    text-align: center;
}

/* Bulles d'annotation positionnées en % sur le mini-clone */
.annot-wrap {
    position: relative;
    margin: 0.75rem 0 0.5rem;
}
.annot {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--accent);
    color: white;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    white-space: nowrap;
    z-index: 2;
}
.annot-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.78rem;
}
.annot::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}
.annot.point-left::after  { left: -10px; top: 50%; transform: translateY(-50%); border-right-color: var(--accent); border-left: 0; }
.annot.point-right::after { right: -10px; top: 50%; transform: translateY(-50%); border-left-color: var(--accent); border-right: 0; }
.annot.point-down::after  { bottom: -10px; left: 14px; border-top-color: var(--accent); border-bottom: 0; }
.annot.point-up::after    { top: -10px; left: 14px; border-bottom-color: var(--accent); border-top: 0; }

/* Légende icônes input (slide 3) */
.acad-icon-legend {
    margin-top: 1rem;
    padding: 0.95rem 1.05rem;
    background: var(--bg-hover);
    border-radius: 10px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.legend-intro {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    color: var(--text);
    line-height: 1.6;
}
.legend-intro em { color: var(--accent); font-style: italic; }
.legend-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.96rem;
    color: var(--text);
    line-height: 1.5;
}
.legend-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 1.05rem;
    color: var(--text-muted);
}
.legend-icon-empty {
    color: var(--border);
    font-weight: 700;
}
.legend-row strong { color: var(--text); margin-right: 0.15rem; }

/* === Slide 4 : Du simple au puissant === */
.section-sub {
    font-size: 1.08rem;
    color: var(--text);
    font-weight: 700;
    margin: 1.2rem 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.section-sub::before {
    content: "";
    width: 4px;
    height: 18px;
    background: var(--accent);
    border-radius: 2px;
}
/* Stacked rows (Correction + Traduction = agents sans voix) */
.stacked-cards {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}
.row-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    flex-wrap: wrap;
    transition: border-color 0.15s ease;
}
.row-card:hover { border-color: var(--accent); }
.row-card-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1;
}
.row-card-body { flex: 1; min-width: 160px; }
.row-card-name { font-weight: 600; color: var(--text); font-size: 1rem; margin-bottom: 0.1rem; }
.row-card-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.45; }

.input-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}
.input-badge.voice {
    background: rgba(26, 143, 255, 0.10);
    color: var(--accent);
    border-color: rgba(26, 143, 255, 0.25);
}
.input-badge.selection {
    background: rgba(107, 114, 128, 0.10);
    color: #6b7280;
    border-color: rgba(107, 114, 128, 0.25);
}
[data-theme="dark"] .input-badge.selection {
    background: rgba(156, 163, 175, 0.12);
    color: #d1d5db;
    border-color: rgba(156, 163, 175, 0.3);
}

.simple-card-hotkey {
    display: inline-block;
    padding: 3px 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: Menlo, Consolas, monospace;
    font-size: 0.83rem;
    color: var(--text);
    font-weight: 600;
}

/* === Hero raccourci (slide 6 — Ctrl+G en gros) === */
.hero-kbd {
    background: linear-gradient(135deg, var(--accent-light) 0%, var(--bg-hover) 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    margin: 0.5rem 0 0.75rem;
}
.hero-kbd-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    font-weight: 700;
}
.hero-kbd-keys {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.hero-kbd-caption {
    font-size: 0.95rem;
    color: var(--text);
    font-style: italic;
    text-align: center;
    margin-top: 0.25rem;
}
.hero-tree {
    width: 100%;
    max-width: 360px;
    height: 50px;
    margin: 0.7rem 0 0;
}
.hero-tree svg { width: 100%; height: 100%; display: block; }
.hero-tree-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    width: 100%;
    max-width: 360px;
}
.hero-tree-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 0.55rem 0.5rem;
    text-align: center;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.hero-tree-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.hero-tree-card-icon { font-size: 1.4rem; line-height: 1; margin-bottom: 0.2rem; }
.hero-tree-card-name { font-weight: 600; font-size: 0.85rem; color: var(--text); }

/* === Slide 5 : zone de test avec 2 exercices === */
.test-exo {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.7rem 0.85rem 0.85rem;
}
[data-theme="dark"] .test-exo { background: rgba(255, 255, 255, 0.04); }
.test-exo-title {
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--text);
    margin-bottom: 0.55rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.test-exo-num {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-weight: 700;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.test-exo-textarea {
    margin-top: 0 !important;
    min-height: 70px;
}

/* === Slide 4 : spotlight orange sur 1 raccourci pour montrer qu'il est cliquable === */
.mini-row-spotlight .mini-hotkey {
    border-color: #FFAB1A;
    box-shadow: 0 0 0 3px rgba(255, 171, 26, 0.22);
    background: rgba(255, 171, 26, 0.10);
    color: var(--text);
    animation: spotlightPulse 2.4s ease-in-out infinite;
    cursor: pointer;
}
.mini-row-spotlight { position: relative; }
.spotlight-arrow {
    position: absolute;
    right: -132px;
    top: -8px;
    pointer-events: none;
    animation: arrowBob 2.4s ease-in-out infinite;
}
@keyframes arrowBob {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-4px); }
}
.spotlight-hint {
    position: absolute;
    right: -198px;
    top: -22px;
    font-size: 0.82rem;
    color: #FFAB1A;
    font-weight: 700;
    font-style: italic;
    white-space: nowrap;
    pointer-events: none;
}
@media (max-width: 900px) {
    .spotlight-arrow, .spotlight-hint { display: none; }
}

/* === Slide 8 : raccourcis encadrés orange + bénéfices === */
.mini-agents-spotlight .mini-hotkey {
    border-color: #FFAB1A;
    box-shadow: 0 0 0 3px rgba(255, 171, 26, 0.22);
    background: rgba(255, 171, 26, 0.08);
    color: var(--text);
    position: relative;
    animation: spotlightPulse 2.4s ease-in-out infinite;
}
@keyframes spotlightPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(255, 171, 26, 0.22); }
    50%      { box-shadow: 0 0 0 5px rgba(255, 171, 26, 0.32); }
}
.spotlight-legend {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.9rem 0 0.5rem;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 171, 26, 0.08);
    border-left: 3px solid #FFAB1A;
    border-radius: 0 8px 8px 0;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.45;
}
.spotlight-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FFAB1A;
    box-shadow: 0 0 0 4px rgba(255, 171, 26, 0.25);
    flex-shrink: 0;
}

/* Bénéfices */
.benefits-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin-top: 1.1rem;
}
@media (max-width: 640px) { .benefits-row { grid-template-columns: 1fr; } }
.benefit {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--text);
}
.benefit-icon {
    font-size: 1.35rem;
    line-height: 1;
    flex-shrink: 0;
}
.benefit-sub {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 400;
}

/* === Connecteurs (slide 7) === */
.connector-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
    margin: 0.5rem 0 0.75rem;
}
@media (max-width: 640px) { .connector-grid { grid-template-columns: repeat(2, 1fr); } }
.connector-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.85rem 0.7rem;
    text-align: center;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.connector-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.connector-card-soon { opacity: 0.55; }
.connector-card-icon {
    font-size: 1.7rem;
    line-height: 1;
    margin-bottom: 0.35rem;
}
.connector-card-name {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text);
    margin-bottom: 0.2rem;
}
.connector-card-status {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}
.connector-card:not(.connector-card-soon) .connector-card-status {
    color: var(--success);
}

/* Détail du groupe Mail */
.mail-detail {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    align-items: start;
}
@media (max-width: 640px) { .mail-detail { grid-template-columns: 1fr; } }
.mail-providers {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    padding-right: 1rem;
    border-right: 1px solid var(--border);
}
@media (max-width: 640px) {
    .mail-providers { flex-direction: row; justify-content: center; border-right: 0; border-bottom: 1px solid var(--border); padding: 0 0 0.8rem; }
}
.mail-provider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--text);
    font-weight: 600;
}
.mail-tools {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.mail-tool {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}
.mail-tool-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    line-height: 1.4;
}
.mail-tool-name {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text);
    margin-bottom: 0.1rem;
}
.mail-tool-ex {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.mail-tool-ex em { font-style: italic; }

/* === Popup Assistant (slide 3) — panneau clair + bande noire 36px === */
.assistant-popup {
    width: 460px;
    max-width: 100%;
    background: #FAFAFC;
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18);
    animation: popupAppear 500ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    display: flex;
    flex-direction: column;
}
@keyframes popupAppear {
    0%   { opacity: 0; transform: translateY(10px) scale(0.94); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.assistant-popup-body {
    padding: 1rem 1.1rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #1f1f1f;
    white-space: pre-wrap;
    min-height: 110px;
    background: #FAFAFC;
}
.assistant-popup-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem 0.75rem;
    background: #FAFAFC;
}
.assistant-popup-btn {
    font-size: 0.78rem;
    color: #4b5563;
    padding: 4px 11px;
    border-radius: 5px;
    background: white;
    border: 1px solid #e5e7eb;
    font-weight: 500;
}
/* Bande noire 36px avec les 4 boutons capsule (toujours visible) */
.assistant-popup-darkbar {
    height: 36px;
    background: #1F1F22;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.assistant-popup-darkbar .cap-ctrl {
    width: 22px;
    height: 22px;
    color: #9B9BA1;
}

/* === Group cards (slide 6, arbre Ctrl+G) === */
.group-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.group-card-mail { border-style: dashed; opacity: 0.92; }
.group-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.group-card-name {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text);
}
.group-card-hotkey {
    font-family: Menlo, Consolas, monospace;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.72rem;
    color: var(--text);
    font-weight: 600;
}
.group-card-children {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding-left: 0.4rem;
}
.group-card-child { line-height: 1.4; }

/* === Animation surlignage (slide 4) === */
.select-anim {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
}
.select-doc {
    background: white;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.select-doc-bar {
    background: #f3f4f6;
    border-bottom: 1px solid var(--border);
    padding: 6px 12px;
    font-size: 0.78rem;
    color: #6b7280;
}
.select-doc-body {
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #1f1f1f;
    user-select: text;
    -webkit-user-select: text;
    cursor: text;
}
.select-doc-body ::selection { background: #1A8FFF; color: white; }
.select-doc-body ::-moz-selection { background: #1A8FFF; color: white; }

.select-highlight {
    position: relative;
    border-radius: 2px;
    padding: 1px 2px;
    background-image: linear-gradient(90deg, #1A8FFF 0%, #1A8FFF 100%);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    background-position: left center;
    color: inherit;
    transition: color 200ms ease-out;
    animation: select-sweep 3s ease-in-out 0.5s forwards;
}
@keyframes select-sweep {
    0%   { background-size: 0% 100%; color: inherit; }
    40%  { background-size: 100% 100%; color: white; }
    85%  { background-size: 100% 100%; color: white; }
    100% { background-size: 100% 100%; color: white; }
}
.select-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    margin: 0.4rem 0 0;
    font-style: italic;
}
.select-kbd {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.select-result {
    background: white;
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #1f1f1f;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    box-shadow: 0 2px 8px rgba(26, 143, 255, 0.12);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.select-result.visible { opacity: 1; transform: translateY(0); }
.select-result-arrow {
    color: var(--accent);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.select-result-text { flex: 1; }

/* === Schéma groupe (slide 4) === */
.group-schema {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.1rem 1rem 1.3rem;
}
.group-trigger {
    background: var(--card);
    border: 1.5px solid var(--accent);
    border-radius: 10px;
    padding: 0.7rem 1.1rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(26, 143, 255, 0.12);
    min-width: 240px;
}
.group-trigger-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.group-trigger-hotkey {
    font-family: Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent);
    margin-bottom: 0.2rem;
}
.group-trigger-name {
    font-size: 0.85rem;
    color: var(--text);
    font-weight: 600;
}
.group-arrows {
    width: 100%;
    max-width: 380px;
    height: 50px;
    margin: 0;
}
.group-arrows svg {
    width: 100%;
    height: 100%;
    display: block;
}
.group-children {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    width: 100%;
}
@media (max-width: 640px) {
    .group-children { grid-template-columns: 1fr; }
    .group-arrows { display: none; }
}
.group-child {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.65rem 0.7rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}
.group-child-icon {
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.group-child-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.88rem;
}
.group-child-ex {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.group-child-ex em { font-style: italic; }

/* === Boutons navigation === */
.acad-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.btn-acad {
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--card);
    color: var(--text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.btn-acad-primary {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}
.btn-acad-primary:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-1px);
}
.btn-acad-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-acad-secondary {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
}
.btn-acad-secondary:hover {
    background: var(--bg-hover);
    color: var(--text);
}
</style>

<div class="acad-wrap">
    <div class="acad-brand">VICSIA</div>
    <button class="acad-skip" id="acad-skip" title="Passer le tutoriel">Passer →</button>

    <div class="acad-progress">
        <div class="acad-dot current" data-step-dot="1"></div>
        <div class="acad-bar" data-step-bar="1"></div>
        <div class="acad-dot" data-step-dot="2"></div>
        <div class="acad-bar" data-step-bar="2"></div>
        <div class="acad-dot" data-step-dot="3"></div>
        <div class="acad-bar" data-step-bar="3"></div>
        <div class="acad-dot" data-step-dot="4"></div>
        <div class="acad-bar" data-step-bar="4"></div>
        <div class="acad-dot" data-step-dot="5"></div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════════ -->
    <!-- SLIDE 1 — La capsule (transcription pure)                       -->
    <!-- ═══════════════════════════════════════════════════════════════ -->
    <section class="acad-step active" data-step="1">
        <span class="acad-badge-big acad-badge-explication">Explication</span>
        <div class="acad-eyebrow">1 sur 5 · Rapide présentation</div>
        <h1 class="acad-title">Voici la capsule Vicsia, votre assistant IA</h1>
        <p class="acad-lead">
            La capsule est une petite fenêtre qui s'active avec un raccourci clavier.
            <strong style="color: var(--text);">Boostée à l'IA, elle vous accompagne au quotidien</strong> :
            transcrire votre voix, reformuler un texte, se connecter à vos outils
            (CRM, boîte mail), rédiger des mails… le tout sans quitter votre application.
        </p>

        <div class="acad-stage" id="acad-stage">

            <!-- SCÈNE 1 — Clavier Ctrl + Espace -->
            <div class="scene" data-scene="1">
                <div class="kbd-group" id="kbd-group">
                    <span class="kbd-key" id="kbd-ctrl">Ctrl</span>
                    <span class="kbd-plus" id="kbd-plus">+</span>
                    <span class="kbd-key" id="kbd-space">Espace</span>
                </div>
                <p class="scene-caption">Vous appuyez sur un raccourci pour activer Vicsia.</p>
            </div>

            <!-- SCÈNE 2 — Capsule en écoute + speech bubble -->
            <div class="scene" data-scene="2">
                <div class="scene-speech" id="scene-speech">
                    <span id="speech-text"></span><span class="typing-caret"></span>
                </div>
                <div class="cap-pill" data-state="recording" id="cap-recording">
                    <div class="cap-bars">
                        <span></span><span></span><span></span><span></span><span></span><span></span>
                        <span></span><span></span><span></span><span></span><span></span>
                    </div>
                    <div class="cap-controls">
                        <span class="cap-ctrl">↻</span>
                        <span class="cap-ctrl">⚙</span>
                        <span class="cap-ctrl">?</span>
                        <span class="cap-ctrl">✕</span>
                    </div>
                    <span class="cap-ctrl stop">■</span>
                </div>
            </div>

            <!-- SCÈNE 3 — Réflexion (dots gris) -->
            <div class="scene" data-scene="3">
                <div class="cap-pill" data-state="processing">
                    <div class="cap-dots">
                        <span></span><span></span><span></span>
                    </div>
                    <div class="cap-label">Réflexion…</div>
                    <div class="cap-controls">
                        <span class="cap-ctrl">↻</span>
                        <span class="cap-ctrl">⚙</span>
                        <span class="cap-ctrl">?</span>
                        <span class="cap-ctrl">✕</span>
                    </div>
                </div>
                <p class="scene-caption">Vicsia transcrit ce que vous venez de dire.</p>
            </div>

            <!-- SCÈNE 4 — Texte transcrit dans le textarea -->
            <div class="scene" data-scene="4">
                <div class="receiver-app">
                    <div class="receiver-bar">📝 &nbsp;Document — Texte en cours</div>
                    <textarea class="receiver-textarea" id="receiver-textarea" readonly></textarea>
                </div>
                <p class="scene-caption">Le texte transcrit se colle là où votre curseur est placé.</p>
            </div>

            <!-- SCÈNE 5 — Ré-appui Ctrl + Espace pour stopper l'enregistrement -->
            <div class="scene" data-scene="5">
                <div class="kbd-group" id="kbd-group-stop">
                    <span class="kbd-key" id="kbd-ctrl-stop">Ctrl</span>
                    <span class="kbd-plus">+</span>
                    <span class="kbd-key" id="kbd-space-stop">Espace</span>
                </div>
                <p class="scene-caption">Vous ré-appuyez sur <strong>Ctrl + Espace</strong> pour stopper l'enregistrement.</p>
            </div>

        </div>
        <div style="display:flex; justify-content:center;">
            <button class="acad-replay" id="acad-replay" type="button">↻ Rejouer l'animation</button>
        </div>

        <h2 style="font-size:1rem; font-weight:600; margin:1.25rem 0 0.5rem; color:var(--text);">Les boutons de la capsule</h2>
        <div class="btn-grid">
            <div class="btn-row">
                <span class="btn-glyph">↻</span>
                <span><strong>Redémarrer</strong><span class="btn-desc">redémarre Vicsia (avec confirmation)</span></span>
            </div>
            <div class="btn-row">
                <span class="btn-glyph">⚙</span>
                <span><strong>Paramètres</strong><span class="btn-desc">ouvre la fenêtre Vicsia (agents, raccourcis…)</span></span>
            </div>
            <div class="btn-row">
                <span class="btn-glyph">?</span>
                <span><strong>Favoris</strong><span class="btn-desc">accès rapide à vos agents préférés</span></span>
            </div>
            <div class="btn-row">
                <span class="btn-glyph">✕</span>
                <span><strong>Fermer</strong><span class="btn-desc">quitte Vicsia (avec confirmation)</span></span>
            </div>
            <div class="btn-row" style="grid-column: 1 / -1;">
                <span class="btn-glyph">■</span>
                <span><strong>Stop</strong><span class="btn-desc">interrompt l'enregistrement ou le traitement — visible uniquement pendant ces phases</span></span>
            </div>
        </div>

        <div class="acad-cta-hint">
            <strong>Cliquez sur Suivant</strong> pour la tester en action — vous allez faire votre première dictée tout de suite.
        </div>

        <div class="acad-actions">
            <button class="btn-acad btn-acad-primary" id="step1-next">Suivant →</button>
        </div>
    </section>

    <!-- ═══════════════════════════════════════════════════════════════ -->
    <!-- SLIDE 2 — Votre première dictée                                  -->
    <!-- ═══════════════════════════════════════════════════════════════ -->
    <section class="acad-step" data-step="2">
        <span class="acad-badge-big acad-badge-action">Action</span>
        <div class="acad-eyebrow">2 sur 5 · Première dictée</div>
        <h1 class="acad-title">En action — votre première dictée à la capsule&nbsp;!</h1>
        <p class="acad-lead">
            Voici le geste à apprendre par cœur — il est le même partout, dans toutes vos applications.
        </p>

        <!-- Frise visuelle : Raccourci → Dicte → Raccourci → Colle -->
        <div class="acad-frise">
            <div class="acad-frise-step">
                <div class="acad-frise-kbd" data-hotkey-kbd="transcription">
                    <span class="kbd-mini">Ctrl</span>
                    <span class="kbd-plus">+</span>
                    <span class="kbd-mini">Espace</span>
                </div>
                <div class="acad-frise-num">Étape 1</div>
                <div class="acad-frise-label">Lancer l'enregistrement</div>
            </div>
            <div class="acad-frise-arrow">→</div>
            <div class="acad-frise-step">
                <div class="acad-frise-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <rect x="9" y="3" width="6" height="12" rx="3"/>
                        <path d="M5 11v1a7 7 0 0 0 14 0v-1"/>
                        <line x1="12" y1="19" x2="12" y2="22"/>
                        <line x1="9" y1="22" x2="15" y2="22"/>
                    </svg>
                </div>
                <div class="acad-frise-num">Étape 2</div>
                <div class="acad-frise-label">Parlez à la capsule</div>
            </div>
            <div class="acad-frise-arrow">→</div>
            <div class="acad-frise-step">
                <div class="acad-frise-kbd" data-hotkey-kbd="transcription">
                    <span class="kbd-mini">Ctrl</span>
                    <span class="kbd-plus">+</span>
                    <span class="kbd-mini">Espace</span>
                </div>
                <div class="acad-frise-num">Étape 3</div>
                <div class="acad-frise-label">Stopper l'enregistrement</div>
            </div>
            <div class="acad-frise-arrow">→</div>
            <div class="acad-frise-step">
                <div class="acad-frise-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <rect x="4" y="5" width="16" height="15" rx="2"/>
                        <line x1="8" y1="10" x2="16" y2="10"/>
                        <line x1="8" y1="14" x2="13" y2="14"/>
                        <line x1="11" y1="2" x2="11" y2="6"/>
                        <polyline points="9 4 11 6 13 4"/>
                    </svg>
                </div>
                <div class="acad-frise-num">Étape 4</div>
                <div class="acad-frise-label">Le texte se colle dans le champ</div>
            </div>
        </div>

        <div class="acad-warning">
            <strong>Attention :</strong> le curseur doit être placé dans une zone de texte avant la dictée
            — sinon le texte ne pourra pas se coller.
        </div>

        <div class="acad-tip">
            <strong>Astuce :</strong> vous pouvez aussi récupérer le texte transcrit en le collant manuellement
            (<span class="kbd-inline" style="font-size:0.78rem;">Ctrl + V</span>, ou
            <span class="kbd-inline" style="font-size:0.78rem;">Cmd + V</span> sur Mac) — il est toujours dans le presse-papier.
        </div>

        <!-- Visuel touches live : s'illuminent quand l'utilisateur les presse -->
        <div class="kbd-live">
            <div class="kbd-group" id="kbd-group-live">
                <span class="kbd-key" id="kbd-ctrl-live">Ctrl</span>
                <span class="kbd-plus">+</span>
                <span class="kbd-key" id="kbd-space-live">Espace</span>
            </div>
        </div>

        <h2 style="font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 0.6rem; color: var(--text);">
            Les 3 apparences de la capsule
        </h2>

        <!-- Schéma 3 états de la capsule -->
        <div class="capsule-states">
            <div class="capsule-state">
                <div class="cap-pill mini">
                    <div class="cap-label-mini">Vicsia</div>
                </div>
                <div class="capsule-state-label">Au repos<small>discrète, en attente</small></div>
            </div>
            <div class="capsule-states-arrow">→</div>
            <div class="capsule-state">
                <div class="cap-pill" data-state="recording">
                    <div class="cap-bars">
                        <span></span><span></span><span></span><span></span><span></span><span></span>
                        <span></span><span></span><span></span><span></span><span></span>
                    </div>
                    <div class="cap-controls">
                        <span class="cap-ctrl">↻</span>
                        <span class="cap-ctrl">⚙</span>
                        <span class="cap-ctrl">?</span>
                        <span class="cap-ctrl">✕</span>
                    </div>
                    <span class="cap-ctrl stop">■</span>
                </div>
                <div class="capsule-state-label">En enregistrement<small>elle écoute votre voix</small></div>
            </div>
            <div class="capsule-states-arrow">→</div>
            <div class="capsule-state">
                <div class="mini-popup">
                    <div class="mini-popup-body">Voici la réponse de Vicsia, qui s'affiche dans un popup.</div>
                    <div class="mini-popup-darkbar">
                        <span>↻</span><span>⚙</span><span>?</span><span>✕</span>
                    </div>
                </div>
                <div class="capsule-state-label">Résultat<small>popup avec la réponse</small></div>
            </div>
        </div>

        <div class="acad-tip">
            La capsule peut être <strong>déplacée où vous voulez</strong> en cliquant et faisant glisser dessus —
            placez-la dans un coin tranquille pour qu'elle ne gêne pas.
        </div>

        <div class="block-action">
            <p style="margin: 0 0 0.75rem; color: var(--text); line-height: 1.55;">
                Cliquez dans le champ, puis suivez les étapes de la frise ci-dessus.
            </p>

            <textarea
                class="acad-textarea"
                id="acad-test-textarea"
                placeholder="Le texte dicté apparaîtra ici (ou tapez directement pour passer à la suite)…"
                autocomplete="off"
                spellcheck="false"></textarea>

            <span class="acad-success-msg" id="acad-success">✓ Bravo, votre première dictée !</span>
        </div>

        <div class="acad-actions">
            <button class="btn-acad btn-acad-secondary" id="step2-back">← Retour</button>
            <button class="btn-acad btn-acad-primary" id="step2-next">Suivant →</button>
        </div>
    </section>

    <!-- ═══════════════════════════════════════════════════════════════ -->
    <!-- SLIDE 3 — Ctrl+G (raccourci universel + démo brouillon mail)     -->
    <!-- ═══════════════════════════════════════════════════════════════ -->
    <section class="acad-step" data-step="3">
        <span class="acad-badge-big acad-badge-explication">Explication</span>
        <div class="acad-eyebrow">3 sur 5 · Le raccourci universel</div>
        <h1 class="acad-title">Pour tout le reste : <span class="kbd-inline" data-hotkey="global-router">Ctrl + G</span></h1>
        <p class="acad-lead">
            Pour aller plus loin que la simple dictée — rédiger un mail, poser une question, chercher
            une information — appuyez sur <strong>Ctrl + G</strong>, parlez, et Vicsia s'occupe du reste.
        </p>

        <div class="acad-stage" id="acad-stage3">
            <!-- Scène 1 — Touches pressées -->
            <div class="scene" data-scene="1">
                <div class="kbd-group" id="kbd-group3">
                    <span class="kbd-key" id="kbd3-ctrl">Ctrl</span>
                    <span class="kbd-plus">+</span>
                    <span class="kbd-key" id="kbd3-g">G</span>
                </div>
                <p class="scene-caption">Vous appuyez sur le raccourci universel.</p>
            </div>

            <!-- Scène 2 — Capsule écoute + speech bubble -->
            <div class="scene" data-scene="2">
                <div class="scene-speech">
                    <span id="speech3-text"></span><span class="typing-caret"></span>
                </div>
                <div class="cap-pill" data-state="recording" id="cap-recording3">
                    <div class="cap-bars">
                        <span></span><span></span><span></span><span></span><span></span><span></span>
                        <span></span><span></span><span></span><span></span><span></span>
                    </div>
                    <div class="cap-controls">
                        <span class="cap-ctrl">↻</span>
                        <span class="cap-ctrl">⚙</span>
                        <span class="cap-ctrl">?</span>
                        <span class="cap-ctrl">✕</span>
                    </div>
                    <span class="cap-ctrl stop">■</span>
                </div>
            </div>

            <!-- Scène 2bis — Raccourci de fin (ré-appui pour arrêter) -->
            <div class="scene" data-scene="5">
                <div class="kbd-group" id="kbd-group3-stop">
                    <span class="kbd-key" id="kbd3-ctrl-stop">Ctrl</span>
                    <span class="kbd-plus">+</span>
                    <span class="kbd-key" id="kbd3-g-stop">G</span>
                </div>
                <p class="scene-caption">Vous ré-appuyez sur <strong>Ctrl + G</strong> pour valider et lancer Vicsia.</p>
            </div>

            <!-- Scène 3 — Réflexion -->
            <div class="scene" data-scene="3">
                <div class="cap-pill" data-state="processing">
                    <div class="cap-dots">
                        <span></span><span></span><span></span>
                    </div>
                    <div class="cap-label">Réflexion…</div>
                </div>
                <p class="scene-caption">Vicsia comprend votre demande et rédige.</p>
            </div>

            <!-- Scène 4 — Popup résultat (panneau clair + bande noire 4 boutons) -->
            <div class="scene" data-scene="4">
                <div class="assistant-popup">
                    <div class="assistant-popup-body" id="assistant-popup-body"></div>
                    <div class="assistant-popup-actions">
                        <span class="assistant-popup-btn">Copier</span>
                        <span class="assistant-popup-btn">Refaire</span>
                        <span class="assistant-popup-btn">Fermer</span>
                    </div>
                    <div class="assistant-popup-darkbar">
                        <span class="cap-ctrl">↻</span>
                        <span class="cap-ctrl">⚙</span>
                        <span class="cap-ctrl">?</span>
                        <span class="cap-ctrl">✕</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="acad-icon-legend" style="margin-top: 1rem;">
            <p class="legend-intro" style="margin: 0;">
                <strong>Avec Ctrl + G, demandez ce que vous voulez :</strong>
                <em>« rédigez-moi un mail à Marc »</em>,
                <em>« cherchez le numéro de ce client »</em>,
                <em>« résumez-moi ce document »</em>… Vicsia route automatiquement vers le bon agent.
            </p>
        </div>

        <div class="acad-cta-hint">
            La mise en pratique est prévue à la prochaine diapo — <strong>cliquez sur Suivant</strong> pour essayer Ctrl + G vous-même.
        </div>

        <div class="acad-actions">
            <button class="btn-acad btn-acad-secondary" id="step3-back">← Retour</button>
            <button class="btn-acad btn-acad-primary" id="step3-next">Suivant →</button>
        </div>
    </section>

    <!-- ═══════════════════════════════════════════════════════════════ -->
    <!-- SLIDE 4 — Action Ctrl+G (schéma 3 états + zone de test)         -->
    <!-- ═══════════════════════════════════════════════════════════════ -->
    <section class="acad-step" data-step="4">
        <span class="acad-badge-big acad-badge-action">Action</span>
        <div class="acad-eyebrow">4 sur 5 · Essayez Ctrl + G</div>
        <h1 class="acad-title">À vous : demandez quelque chose à Vicsia</h1>
        <p class="acad-lead">
            Cette fois, vous n'avez pas besoin de cliquer dans un champ — la capsule affiche le résultat
            elle-même dans un popup. Voici comment l'apparence change selon ce qu'elle fait.
        </p>

        <!-- Frise visuelle : Ctrl+G → Demande → Ctrl+G → Popup -->
        <div class="acad-frise">
            <div class="acad-frise-step">
                <div class="acad-frise-kbd" data-hotkey-kbd="global-router">
                    <span class="kbd-mini">Ctrl</span>
                    <span class="kbd-plus">+</span>
                    <span class="kbd-mini">G</span>
                </div>
                <div class="acad-frise-num">Étape 1</div>
                <div class="acad-frise-label">Activer le raccourci universel</div>
            </div>
            <div class="acad-frise-arrow">→</div>
            <div class="acad-frise-step">
                <div class="acad-frise-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <rect x="9" y="3" width="6" height="12" rx="3"/>
                        <path d="M5 11v1a7 7 0 0 0 14 0v-1"/>
                        <line x1="12" y1="19" x2="12" y2="22"/>
                        <line x1="9" y1="22" x2="15" y2="22"/>
                    </svg>
                </div>
                <div class="acad-frise-num">Étape 2</div>
                <div class="acad-frise-label">Demandez à voix haute</div>
            </div>
            <div class="acad-frise-arrow">→</div>
            <div class="acad-frise-step">
                <div class="acad-frise-kbd" data-hotkey-kbd="global-router">
                    <span class="kbd-mini">Ctrl</span>
                    <span class="kbd-plus">+</span>
                    <span class="kbd-mini">G</span>
                </div>
                <div class="acad-frise-num">Étape 3</div>
                <div class="acad-frise-label">Stopper l'enregistrement</div>
            </div>
            <div class="acad-frise-arrow">→</div>
            <div class="acad-frise-step">
                <div class="acad-frise-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <rect x="3" y="5" width="18" height="13" rx="2"/>
                        <line x1="3" y1="9" x2="21" y2="9"/>
                        <circle cx="6" cy="7" r="0.5" fill="currentColor"/>
                        <circle cx="8" cy="7" r="0.5" fill="currentColor"/>
                        <line x1="6" y1="13" x2="16" y2="13"/>
                        <line x1="6" y1="16" x2="13" y2="16"/>
                    </svg>
                </div>
                <div class="acad-frise-num">Étape 4</div>
                <div class="acad-frise-label">La réponse s'affiche en popup</div>
            </div>
        </div>

        <h2 style="font-size: 1.05rem; font-weight: 700; margin: 1.5rem 0 0.5rem; color: var(--text);">
            Bonus : l'agent voit aussi ce que vous sélectionnez
        </h2>
        <p style="font-size: 0.95rem; color: var(--text); line-height: 1.6; margin: 0 0 0.75rem;">
            Sélectionnez du texte avant d'activer Vicsia — l'agent <strong>voit cette sélection en plus de votre voix</strong>.
            C'est ce qui rend les demandes courtes possibles : pas besoin de tout redicter.
        </p>

        <div class="select-anim" style="margin: 0.4rem 0 0;">
            <div class="select-doc">
                <div class="select-doc-bar">📧 Mail reçu — Marc Dupont</div>
                <div class="select-doc-body">
                    Bonjour, <span class="select-highlight">est-ce que tu serais disponible jeudi 14h pour faire le point sur le projet ? Je peux passer dans tes locaux ou on peut faire un visio, comme tu préfères.</span> Merci d'avance, Marc.
                </div>
            </div>
            <p class="select-hint">↑ Démo animée : la zone bleue représente ce que vous auriez sélectionné dans votre boîte mail (vous pouvez aussi sélectionner ce texte vous-même avec la souris pour tester).</p>
            <div class="select-kbd">
                <div class="kbd-group">
                    <span class="kbd-key pressed">Ctrl</span>
                    <span class="kbd-plus">+</span>
                    <span class="kbd-key pressed">G</span>
                </div>
                <p class="scene-caption" style="margin: 0; font-style: italic;">
                    « rédige une réponse, c'est ok pour jeudi 14h en visio »
                </p>
            </div>
            <div class="select-result visible">
                <span class="select-result-arrow">↓</span>
                <span class="select-result-text">Bonjour Marc, c'est parfait pour jeudi 14h. Faisons ça en visio, je t'envoie le lien dans la journée. À jeudi, bonne semaine.</span>
            </div>
        </div>
        <p style="font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; margin: 0.5rem 0 0;">
            Ça marche avec <strong>n'importe quel agent</strong> — ceux activés à la voix comme ceux sans voix.
            La sélection est toujours visible pour l'IA.
        </p>

        <div class="block-action" style="margin-top: 1.25rem;">
            <p style="margin: 0 0 0.6rem; color: var(--text); line-height: 1.55;">
                Maintenant essayez : appuyez sur <span class="kbd-inline" data-hotkey="global-router" id="lesson1-ctrlg">Ctrl + G</span>,
                dites quelque chose comme <em>« rédige un mail pour demander un devis »</em>, puis ré-appuyez sur le raccourci.
            </p>
            <p style="margin: 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.55;">
                Vous verrez un popup apparaître avec la réponse. Pas de pression — explorez, testez plusieurs demandes.
            </p>
            <p style="margin: 0.6rem 0 0; font-size: 0.85rem;">
                <a href="#" onclick="event.preventDefault(); editAcademyHotkey('global-router', document.getElementById('lesson1-ctrlg'));"
                   style="color: var(--accent); text-decoration: none;">✏️ Changer ce raccourci</a>
            </p>
        </div>

        <div class="acad-actions">
            <button class="btn-acad btn-acad-secondary" id="step4-back">← Retour</button>
            <button class="btn-acad btn-acad-primary" id="step4-next">Suivant →</button>
        </div>
    </section>

    <!-- ═══════════════════════════════════════════════════════════════ -->
    <!-- SLIDE 5 — Transition vers la leçon paramétrage                   -->
    <!-- ═══════════════════════════════════════════════════════════════ -->
    <section class="acad-step" data-step="5">
        <div class="acad-eyebrow">5 sur 5 · Bravo</div>
        <h1 class="acad-title">Vous connaissez l'essentiel 🎉</h1>
        <p class="acad-lead">
            Vous savez maintenant activer Vicsia, dicter du texte, et demander à l'IA de faire des choses
            plus complexes avec <span class="kbd-inline" data-hotkey="global-router">Ctrl + G</span>.
            C'est déjà 90&nbsp;% de l'usage quotidien.
        </p>

        <!-- Petit récap visuel des 2 raccourcis appris -->
        <div class="acad-frise" style="background: var(--accent-light); border-color: rgba(26, 143, 255, 0.25);">
            <div class="acad-frise-step">
                <div class="acad-frise-kbd" data-hotkey-kbd="transcription">
                    <span class="kbd-mini">Ctrl</span>
                    <span class="kbd-plus">+</span>
                    <span class="kbd-mini">Espace</span>
                </div>
                <div class="acad-frise-num">Raccourci 1</div>
                <div class="acad-frise-label">Dicter du texte</div>
            </div>
            <div class="acad-frise-arrow">+</div>
            <div class="acad-frise-step">
                <div class="acad-frise-kbd" data-hotkey-kbd="global-router">
                    <span class="kbd-mini">Ctrl</span>
                    <span class="kbd-plus">+</span>
                    <span class="kbd-mini">G</span>
                </div>
                <div class="acad-frise-num">Raccourci 2</div>
                <div class="acad-frise-label">Tout le reste avec l'IA</div>
            </div>
        </div>

        <h2 style="font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 0.6rem; color: var(--text);">
            La suite, quand vous voulez
        </h2>
        <p style="font-size: 0.98rem; color: var(--text); line-height: 1.6; margin-bottom: 1rem;">
            La <strong>leçon paramétrage</strong> vous montre comment connecter votre boîte mail
            (Gmail / Outlook), changer les raccourcis, et personnaliser les agents à votre usage.
        </p>
        <p style="font-size: 0.92rem; color: var(--text-muted); line-height: 1.6;">
            <strong style="color: var(--text);">Bonus :</strong> une leçon optionnelle présente
            les agents qui travaillent <em>sans commande vocale</em>, directement sur le texte que
            vous sélectionnez à la souris.
        </p>

        <div class="acad-actions">
            <button class="btn-acad btn-acad-secondary" id="step5-back">← Retour</button>
            <button class="btn-acad btn-acad-primary" id="step5-finish">Voir toutes les leçons →</button>
        </div>
    </section>

</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
    'use strict';

    const TOTAL_STEPS = 5;
    let currentStep = 1;

    function $(s, r) { return (r || document).querySelector(s); }
    function $$(s, r) { return Array.from((r || document).querySelectorAll(s)); }

    function updateProgress() {
        for (let i = 1; i <= TOTAL_STEPS; i++) {
            const dot = $(`.acad-dot[data-step-dot="${i}"]`);
            const bar = $(`.acad-bar[data-step-bar="${i}"]`);
            if (!dot) continue;
            dot.classList.remove('current', 'done');
            if (i < currentStep) dot.classList.add('done');
            else if (i === currentStep) dot.classList.add('current');
            if (bar) bar.classList.toggle('done', i < currentStep);
        }
    }

    function goToStep(n) {
        if (n < 1 || n > TOTAL_STEPS) return;
        const current = $(`.acad-step[data-step="${currentStep}"]`);
        const next = $(`.acad-step[data-step="${n}"]`);
        if (!next) return;
        current.classList.remove('active');
        setTimeout(() => {
            next.classList.add('active');
            currentStep = n;
            updateProgress();
            window.scrollTo({top: 0, behavior: 'smooth'});
            // Animations par slide
            if (n === 1) startCapsuleAnim(); else stopCapsuleAnim();
            if (n === 2) initStep2(); else stopStep2();
            if (n === 3) startAssistantAnim(); else stopAssistantAnim();
        }, 80);
    }

    // ═══════════════════════════════════════════════════════════════
    // ANIMATION CAPSULE — SLIDE 1 (transcription pure)
    // ═══════════════════════════════════════════════════════════════
    const SPEECH = "Bonjour Marc, je serai disponible mercredi à 14h pour notre réunion.";
    const TRANSCRIBED = "Bonjour Marc, je serai disponible mercredi à 14h pour notre réunion.";
    let animTimers = [];
    let animRunning = false;

    function setScene(n) {
        $('#acad-stage').querySelectorAll('.scene').forEach(s => {
            s.classList.toggle('active', parseInt(s.dataset.scene, 10) === n);
        });
    }

    function stream(targetEl, text, speed, done) {
        let i = 0;
        targetEl.textContent = '';
        function tick() {
            if (i >= text.length) { done && done(); return; }
            i += 2;
            targetEl.textContent = text.slice(0, Math.min(i, text.length));
            const t = setTimeout(tick, speed);
            animTimers.push(t);
        }
        tick();
    }

    function resetKeys() {
        ['kbd-ctrl', 'kbd-plus', 'kbd-space'].forEach(id => {
            const el = $('#' + id);
            if (el) { el.classList.remove('appear', 'pressed'); el.style.opacity = '0'; }
        });
        $$('#kbd-group .kbd-ripple').forEach(r => r.remove());
    }

    function showKey(id, delay) {
        const t = setTimeout(() => {
            const el = $('#' + id);
            if (!el) return;
            el.style.opacity = '1';
            el.classList.add('appear');
        }, delay);
        animTimers.push(t);
    }

    function pressKeys(delay) {
        const t = setTimeout(() => {
            ['kbd-ctrl', 'kbd-space'].forEach(id => $('#' + id) && $('#' + id).classList.add('pressed'));
            const g = $('#kbd-group');
            if (g) {
                const r = document.createElement('div');
                r.className = 'kbd-ripple';
                g.appendChild(r);
                const cleanup = setTimeout(() => r.remove(), 800);
                animTimers.push(cleanup);
            }
        }, delay);
        animTimers.push(t);
    }

    function startCapsuleAnim() {
        if (animRunning) return;
        animRunning = true;
        runOnce();
    }
    function stopCapsuleAnim() {
        animTimers.forEach(t => clearTimeout(t));
        animTimers = [];
        animRunning = false;
    }

    function runOnce() {
        animTimers.forEach(t => clearTimeout(t));
        animTimers = [];
        resetKeys();

        // Scène 1 — Clavier (0 → 2500ms) — apparition + pression
        setScene(1);
        showKey('kbd-ctrl', 200);
        const tPlus = setTimeout(() => $('#kbd-plus') && ($('#kbd-plus').style.opacity = '1'), 700);
        animTimers.push(tPlus);
        showKey('kbd-space', 1000);
        pressKeys(1800);

        // Scène 2 — Capsule en écoute + speech streaming (2500 → 7500ms)
        const tScene2 = setTimeout(() => {
            setScene(2);
            const target = $('#speech-text');
            if (target) stream(target, SPEECH, 22);
        }, 2500);
        animTimers.push(tScene2);

        // Scène 5 — Ré-appui Ctrl + Espace pour stopper (7500 → 9000ms)
        // Animation : touches apparaissent blanches, puis se "pressent" à 8200ms
        const tScene5 = setTimeout(() => {
            setScene(5);
            const stopCtrl = $('#kbd-ctrl-stop');
            const stopSpace = $('#kbd-space-stop');
            if (stopCtrl) { stopCtrl.classList.remove('pressed', 'appear'); void stopCtrl.offsetWidth; stopCtrl.classList.add('appear'); }
            if (stopSpace) { stopSpace.classList.remove('pressed', 'appear'); void stopSpace.offsetWidth; stopSpace.classList.add('appear'); }
        }, 7500);
        animTimers.push(tScene5);
        // Pression des touches au milieu de la scène
        const tScene5Press = setTimeout(() => {
            const stopCtrl = $('#kbd-ctrl-stop');
            const stopSpace = $('#kbd-space-stop');
            if (stopCtrl) stopCtrl.classList.add('pressed');
            if (stopSpace) stopSpace.classList.add('pressed');
        }, 8200);
        animTimers.push(tScene5Press);

        // Scène 3 — Réflexion (9000 → 10500ms)
        const tScene3 = setTimeout(() => setScene(3), 9000);
        animTimers.push(tScene3);

        // Scène 4 — Texte transcrit qui s'écrit (10500 → 15000ms)
        const tScene4 = setTimeout(() => {
            setScene(4);
            const ta = $('#receiver-textarea');
            if (ta) {
                ta.value = '';
                let i = 0;
                function paste() {
                    if (i >= TRANSCRIBED.length) return;
                    i += 2;
                    ta.value = TRANSCRIBED.slice(0, Math.min(i, TRANSCRIBED.length));
                    const t = setTimeout(paste, 28);
                    animTimers.push(t);
                }
                paste();
            }
        }, 10500);
        animTimers.push(tScene4);

        // Loop — pause 2s sur la scène 4 (paste) avant de relancer (15000 → 17000ms)
        const tLoop = setTimeout(() => { if (animRunning) runOnce(); }, 17000);
        animTimers.push(tLoop);
    }

    // ═══════════════════════════════════════════════════════════════
    // SLIDE 2 — Visuel touches live + textarea
    // ═══════════════════════════════════════════════════════════════
    let step2KeyHandlers = null;

    function initStep2() {
        const ta = $('#acad-test-textarea');
        const success = $('#acad-success');
        if (!ta) return;
        ta.value = '';
        ta.classList.remove('success');
        success.classList.remove('show');
        setTimeout(() => ta.focus(), 200);
        ta.oninput = function() {
            if (ta.value.trim().length >= 5) {
                ta.classList.add('success');
                success.classList.add('show');
            } else {
                ta.classList.remove('success');
                success.classList.remove('show');
            }
        };

        // Visuel touches live : Ctrl + Espace
        const ctrlEl = $('#kbd-ctrl-live');
        const spaceEl = $('#kbd-space-live');
        const onKeyDown = (e) => {
            if (e.ctrlKey || e.metaKey) ctrlEl && ctrlEl.classList.add('pressed');
            if (e.code === 'Space') spaceEl && spaceEl.classList.add('pressed');
        };
        const onKeyUp = (e) => {
            if (!e.ctrlKey && !e.metaKey) ctrlEl && ctrlEl.classList.remove('pressed');
            if (e.code === 'Space' || (!e.ctrlKey && !e.metaKey)) spaceEl && spaceEl.classList.remove('pressed');
        };
        window.addEventListener('keydown', onKeyDown);
        window.addEventListener('keyup', onKeyUp);
        step2KeyHandlers = { onKeyDown, onKeyUp };
    }
    function stopStep2() {
        if (step2KeyHandlers) {
            window.removeEventListener('keydown', step2KeyHandlers.onKeyDown);
            window.removeEventListener('keyup', step2KeyHandlers.onKeyUp);
            step2KeyHandlers = null;
        }
    }

    // ═══════════════════════════════════════════════════════════════
    // SLIDE 3 — Animation Ctrl+G (universel)
    // ═══════════════════════════════════════════════════════════════
    const ASSIST_SPEECH = "Rédigez-moi un mail à Marc pour lui demander un devis sur le projet de site web.";
    const ASSIST_DRAFT = "Bonjour Marc,\n\nPourrais-tu m'envoyer un devis pour le projet de site web dont nous avons parlé ?\nMerci d'avance,";
    let assistTimers = [];
    let assistRunning = false;

    function setSceneAssist(n) {
        const stage = $('#acad-stage3');
        if (!stage) return;
        stage.querySelectorAll('.scene').forEach(s => {
            s.classList.toggle('active', parseInt(s.dataset.scene, 10) === n);
        });
    }
    function startAssistantAnim() {
        if (assistRunning) return;
        assistRunning = true;
        runAssistOnce();
    }
    function stopAssistantAnim() {
        assistTimers.forEach(t => clearTimeout(t));
        assistTimers = [];
        assistRunning = false;
    }
    function runAssistOnce() {
        assistTimers.forEach(t => clearTimeout(t));
        assistTimers = [];
        // Reset touches (Ctrl + G : 2 touches seulement)
        ['kbd3-ctrl', 'kbd3-g'].forEach(id => {
            const el = $('#' + id);
            if (el) { el.classList.remove('appear', 'pressed'); el.style.opacity = '0'; }
        });

        // Scène 1 (0 → 2800ms) — apparition des touches Ctrl + G + appui
        setSceneAssist(1);
        ['kbd3-ctrl', 'kbd3-g'].forEach((id, i) => {
            const t = setTimeout(() => {
                const el = $('#' + id);
                if (el) { el.style.opacity = '1'; el.classList.add('appear'); }
            }, 300 + i * 600);
            assistTimers.push(t);
        });
        const tPress = setTimeout(() => {
            ['kbd3-ctrl', 'kbd3-g'].forEach(id => $('#' + id) && $('#' + id).classList.add('pressed'));
        }, 1900);
        assistTimers.push(tPress);

        // Scène 2 — écoute + speech streaming plus lent (2800 → 9000ms)
        const t2 = setTimeout(() => {
            setSceneAssist(2);
            const target = $('#speech3-text');
            if (target) {
                let i = 0;
                target.textContent = '';
                function tick() {
                    if (i >= ASSIST_SPEECH.length) return;
                    i += 2;
                    target.textContent = ASSIST_SPEECH.slice(0, Math.min(i, ASSIST_SPEECH.length));
                    const t = setTimeout(tick, 32);  // 22→32 ms : un peu plus lent
                    assistTimers.push(t);
                }
                tick();
            }
        }, 2800);
        assistTimers.push(t2);

        // Scène 2bis — Ré-appui Ctrl + G pour stopper (9000 → 10500ms)
        // Scène 5 — Ré-appui Ctrl + G : touches apparaissent blanches, puis se pressent
        const tStop = setTimeout(() => {
            setSceneAssist(5);
            const c = $('#kbd3-ctrl-stop'), g = $('#kbd3-g-stop');
            if (c) { c.classList.remove('pressed', 'appear'); void c.offsetWidth; c.classList.add('appear'); }
            if (g) { g.classList.remove('pressed', 'appear'); void g.offsetWidth; g.classList.add('appear'); }
        }, 9000);
        assistTimers.push(tStop);
        const tStopPress = setTimeout(() => {
            const c = $('#kbd3-ctrl-stop'), g = $('#kbd3-g-stop');
            if (c) c.classList.add('pressed');
            if (g) g.classList.add('pressed');
        }, 9700);
        assistTimers.push(tStopPress);

        // Scène 3 — Réflexion (10500 → 12500ms)
        const t3 = setTimeout(() => setSceneAssist(3), 10500);
        assistTimers.push(t3);

        // Scène 4 — Popup avec brouillon, streaming plus lent (12500 → 18000ms)
        const t4 = setTimeout(() => {
            setSceneAssist(4);
            const body = $('#assistant-popup-body');
            if (body) {
                body.textContent = '';
                let i = 0;
                function write() {
                    if (i >= ASSIST_DRAFT.length) return;
                    i += 2;
                    body.textContent = ASSIST_DRAFT.slice(0, Math.min(i, ASSIST_DRAFT.length));
                    const t = setTimeout(write, 38);  // 28→38 ms
                    assistTimers.push(t);
                }
                write();
            }
        }, 12500);
        assistTimers.push(t4);

        // Loop — pause allongée avant de rejouer (3s sur le popup, total 21000ms)
        const tLoop = setTimeout(() => { if (assistRunning) runAssistOnce(); }, 21000);
        assistTimers.push(tLoop);
    }

    // ═══════════════════════════════════════════════════════════════
    // Navigation
    // ═══════════════════════════════════════════════════════════════
    async function markCompleted() {
        try {
            await apiFetch('/api/academy/complete/1', { method: 'POST' });
        } catch (e) { /* offline ok */ }
    }

    $('#step1-next').onclick = () => goToStep(2);
    $('#step2-back').onclick = () => goToStep(1);
    $('#step2-next').onclick = () => goToStep(3);
    $('#step3-back').onclick = () => goToStep(2);
    $('#step3-next').onclick = () => goToStep(4);
    $('#step4-back').onclick = () => goToStep(3);
    $('#step4-next').onclick = () => goToStep(5);
    $('#step5-back').onclick = () => goToStep(4);
    $('#step5-finish').onclick = async () => {
        await markCompleted();
        window.location.href = '/v3/academy';
    };
    $('#acad-skip').onclick = async () => {
        await markCompleted();
        window.location.href = '/v3/academy';
    };

    const replay = $('#acad-replay');
    if (replay) replay.onclick = () => { animRunning = false; setTimeout(startCapsuleAnim, 50); };

    document.body.style.opacity = '1';
    if (typeof loadAcademyHotkeys === 'function') loadAcademyHotkeys();

    // Remplace les <div class="acad-frise-kbd" data-hotkey-kbd="..."> par les vraies touches
    (async function loadFriseKbd() {
        try {
            const res = await apiFetch('/api/academy/hotkeys');
            const data = await res.json();
            const map = data.hotkeys || {};
            const keyLabel = (p) => {
                p = p.toLowerCase().trim();
                if (p === 'ctrl' || p === 'control') return 'Ctrl';
                if (p === 'shift') return 'Shift';
                if (p === 'alt') return 'Alt';
                if (p === 'cmd' || p === 'meta' || p === 'super') return 'Cmd';
                if (p === 'space') return 'Espace';
                if (p === 'enter') return 'Entrée';
                if (p === 'tab') return 'Tab';
                if (p === 'escape' || p === 'esc') return 'Échap';
                if (p === '<') return '<';
                if (p.length === 1) return p.toUpperCase();
                return p.charAt(0).toUpperCase() + p.slice(1);
            };
            document.querySelectorAll('[data-hotkey-kbd]').forEach(el => {
                const entry = map[el.dataset.hotkeyKbd];
                if (!entry || !entry.hotkey) return;
                const parts = entry.hotkey.split('+').map(p => p.trim()).filter(Boolean);
                const html = parts
                    .map(p => `<span class="kbd-mini">${keyLabel(p)}</span>`)
                    .join('<span class="kbd-plus">+</span>');
                el.innerHTML = html;
            });
        } catch (e) { /* offline ok — garde le défaut Ctrl+Espace */ }
    })();

    // Démarre l'animation au chargement (slide 1 active par défaut)
    startCapsuleAnim();
})();
</script>
{% endblock %}