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

{% block content %}
<style>
.lesson3-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}
.lesson3-back {
    display: inline-block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}
.lesson3-back:hover { color: var(--accent); }

.lesson3-badges { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.7rem; flex-wrap: wrap; }
.lesson3-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.lesson3-tag.parametrage {
    background: rgba(26, 143, 255, 0.10);
    color: var(--accent);
    border: 1px solid rgba(26, 143, 255, 0.30);
}
.lesson3-tag.beta {
    background: rgba(255, 171, 26, 0.12);
    color: #c97400;
    border: 1px solid rgba(255, 171, 26, 0.40);
}
[data-theme="dark"] .lesson3-tag.beta { color: #FFAB1A; }

.lesson3-title {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.6rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.lesson3-lead { color: var(--text-muted); font-size: 1.05rem; line-height: 1.65; margin-bottom: 1.5rem; }

.lesson3-section { margin: 2rem 0; }
.lesson3-section h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.lesson3-section h2::before {
    content: "";
    width: 4px;
    height: 18px;
    background: var(--accent);
    border-radius: 2px;
}
.lesson3-section p { color: var(--text); font-size: 0.98rem; line-height: 1.65; margin: 0 0 0.8rem; }
.lesson3-section p.muted { color: var(--text-muted); font-size: 0.92rem; }

.kbd-inline {
    display: inline-block;
    padding: 2px 7px;
    background: var(--card);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: 5px;
    font-family: Menlo, Consolas, monospace;
    font-weight: 600;
    font-size: 0.84rem;
}

/* === Mini-clone de la page Agents (récupéré de l'académie 8 slides) === */
.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;
    margin: 0.7rem 0;
}
.mini-agents-bar {
    background: var(--bg-hover);
    border-bottom: 1px solid var(--border);
    padding: 0.7rem 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.78rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
}
.mini-section-title {
    padding: 0.55rem 1rem;
    font-size: 0.74rem;
    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.65rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    position: relative;
}
.mini-row:last-child { border-bottom: 0; }
.mini-star { color: var(--text-muted); font-size: 1.05rem; width: 18px; text-align: center; }
.mini-name { font-weight: 600; color: var(--text); flex: 0 0 110px; font-size: 0.92rem; }
.mini-desc {
    color: var(--text-muted);
    font-size: 0.82rem;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mini-mic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-muted);
}
.mini-hotkey {
    font-family: Menlo, Consolas, monospace;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
    min-width: 110px;
    text-align: center;
}
/* Spotlight orange autour du premier raccourci pour montrer qu'il est modifiable */
.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: pulseSpot 2.4s ease-in-out infinite;
    cursor: pointer;
}
@keyframes pulseSpot {
    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-arrow {
    position: absolute;
    right: 140px;
    top: -8px;
    pointer-events: none;
}
.spotlight-hint {
    position: absolute;
    right: 230px;
    top: -22px;
    font-size: 0.8rem;
    color: #FFAB1A;
    font-weight: 700;
    font-style: italic;
    white-space: nowrap;
    pointer-events: none;
}
@media (max-width: 760px) { .spotlight-arrow, .spotlight-hint { display: none; } }

/* Légende sous la maquette */
.mini-legend {
    background: var(--bg-hover);
    border-radius: 10px;
    border: 1px solid var(--border);
    padding: 0.85rem 1rem;
    margin: 0.6rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.mini-legend-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.5;
}
.mini-legend-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.mini-legend-icon.empty { color: var(--border); font-weight: 700; }

/* Bouton placeholder pour une future vidéo */
.video-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.35rem 0.75rem;
    background: var(--bg-hover);
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-decoration: none;
    font-style: italic;
}
.video-link::before { content: "🎬"; font-style: normal; }

/* === Arbre de routage === */
.routing-tree {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem 1.1rem;
    margin: 0.6rem 0 1rem;
}
.routing-root {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}
.routing-root-box {
    background: var(--card);
    border: 2px solid var(--accent);
    border-radius: 10px;
    padding: 0.7rem 1.2rem;
    text-align: center;
    box-shadow: 0 4px 14px rgba(26, 143, 255, 0.15);
}
.routing-root-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 700;
}
.routing-root-key {
    font-family: Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--accent);
    margin: 0.2rem 0 0.1rem;
}
.routing-root-sub { font-size: 0.78rem; color: var(--text-muted); }
.routing-arrows {
    height: 36px;
    display: flex;
    justify-content: center;
}
.routing-arrows svg { width: 100%; max-width: 380px; height: 100%; }
.routing-children {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
}
@media (max-width: 640px) { .routing-children { grid-template-columns: 1fr; } .routing-arrows { display: none; } }
.routing-child {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.6rem 0.65rem;
    text-align: center;
}
.routing-child-icon { font-size: 1.3rem; line-height: 1; margin-bottom: 0.2rem; }
.routing-child-name { font-weight: 700; color: var(--text); font-size: 0.88rem; }
.routing-child-ex { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; margin-top: 0.2rem; font-style: italic; }

/* === Phrases → agent (exemples routing) === */
.flow-examples { margin: 0.6rem 0 0; }
.flow-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--border);
    flex-wrap: wrap;
}
.flow-row:last-child { border-bottom: 0; }
.flow-quote {
    flex: 1;
    min-width: 200px;
    color: var(--text);
    font-style: italic;
    font-size: 0.9rem;
}
.flow-arrow { color: var(--accent); font-weight: 700; }
.flow-target {
    background: var(--accent-light);
    color: var(--accent);
    border-radius: 5px;
    padding: 3px 9px;
    font-weight: 700;
    font-size: 0.8rem;
}

.lesson3-tip {
    margin: 1.5rem 0;
    padding: 0.85rem 1rem;
    background: rgba(255, 171, 26, 0.08);
    border-left: 3px solid #FFAB1A;
    border-radius: 0 8px 8px 0;
    font-size: 0.94rem;
    color: var(--text);
    line-height: 1.55;
}
.lesson3-tip::before { content: "💡 "; }

.lesson3-info {
    margin: 1.25rem 0;
    padding: 0.95rem 1.1rem;
    background: rgba(26, 143, 255, 0.08);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    font-size: 0.94rem;
    color: var(--text);
    line-height: 1.6;
}
.lesson3-info::before { content: "ℹ "; color: var(--accent); font-weight: 700; }
.lesson3-info strong { color: var(--text); }

/* Tableau cas mixte (paste + individuel + global) */
.routing-cases {
    margin: 0.5rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}
@media (max-width: 640px) { .routing-cases { grid-template-columns: 1fr; } }
.routing-case {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.65rem 0.8rem;
}
.routing-case-head {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0.3rem;
}
.routing-case-body { font-size: 0.88rem; color: var(--text); line-height: 1.5; }
.routing-case-body strong { color: var(--accent); }
.routing-case-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-right: 0.3rem;
}
.routing-case-tag.paste { background: rgba(61, 219, 114, 0.15); color: #166534; }
[data-theme="dark"] .routing-case-tag.paste { color: #6ee7b7; }
.routing-case-tag.popup { background: rgba(26, 143, 255, 0.15); color: var(--accent); }

.lesson3-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.btn-l {
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.94rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.btn-l-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-l-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
.btn-l-secondary { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-l-secondary:hover { background: var(--bg-hover); color: var(--text); }
</style>

<div class="lesson3-wrap">
    <a class="lesson3-back" href="/v3/academy">← Retour au menu Académie</a>

    <div class="lesson3-badges">
        <span class="lesson3-tag parametrage">Paramétrage</span>
        <span class="lesson3-tag beta">Beta</span>
    </div>

    <h1 class="lesson3-title">Raccourcis Vicsia et routage</h1>
    <p class="lesson3-lead">
        Chaque agent peut avoir son propre raccourci dédié. Mais il existe aussi un raccourci universel,
        <span class="kbd-inline">Ctrl + G</span>, qui choisit l'agent pour vous. Comprendre la différence
        et comment les modifier — c'est l'essentiel ici.
    </p>

    <!-- ─── 1. Deux logiques de raccourci ─────────────────────────── -->
    <section class="lesson3-section">
        <h2>1. Deux logiques côte à côte</h2>
        <p>
            <strong>Raccourci dédié</strong> = un raccourci, un agent. Vous tapez, ça fait toujours
            la même chose. Idéal pour la transcription, la correction, la traduction.
        </p>
        <p>
            <strong>Raccourci universel</strong> (<span class="kbd-inline">Ctrl + G</span>) = un raccourci,
            <em>plusieurs agents possibles</em>. C'est ce que vous dites qui décide. Idéal quand vous
            ne voulez pas mémoriser 10 raccourcis.
        </p>
        <p class="muted">
            Les deux cohabitent : vos agents fréquents ont un raccourci dédié, les autres passent par Ctrl + G.
        </p>
    </section>

    <!-- ─── 2. La page Agents — modifier un raccourci ──────────────── -->
    <section class="lesson3-section">
        <h2>2. La page Agents — modifier un raccourci</h2>
        <p>
            Voici à quoi ressemble la page Agents. <strong>Tous les raccourcis sont modifiables :</strong>
            cliquez sur la pastille raccourci (encadrée orange ci-dessous), tapez la nouvelle combinaison.
            <strong>Échap</strong> annule. Si la combinaison est déjà prise ailleurs, Vicsia vous prévient.
        </p>

        <div class="mini-agents">
            <div class="mini-agents-bar">
                <span>Agents</span>
                <span class="mini-new">+ Nouvel agent</span>
            </div>

            <div class="mini-section-title">Agents individuels</div>

            <div class="mini-row mini-row-spotlight">
                <svg class="spotlight-arrow" width="120" height="56" viewBox="0 0 120 56" aria-hidden="true">
                    <path d="M 110 50 Q 70 50 60 30 Q 55 12 38 10" stroke="#FFAB1A" stroke-width="2.5" fill="none" stroke-linecap="round"/>
                    <path d="M 38 10 L 46 4 M 38 10 L 46 16" stroke="#FFAB1A" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span class="spotlight-hint">cliquez pour modifier</span>
                <span class="mini-star">★</span>
                <span class="mini-name">Transcription</span>
                <span class="mini-desc">Dictée vocale brute</span>
                <span class="mini-mic" title="Commande vocale">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <rect x="9" y="3" width="6" height="11" rx="3"/>
                        <path d="M5 11a7 7 0 0 0 14 0"/>
                        <line x1="12" y1="18" x2="12" y2="22"/>
                    </svg>
                </span>
                <span class="mini-hotkey" style="cursor:pointer;" title="Cliquer pour modifier ce raccourci" onclick="editAcademyHotkey(this.dataset.hotkey, this)" data-hotkey="transcription">Ctrl + Espace</span>
            </div>

            <div class="mini-row">
                <span class="mini-star">☆</span>
                <span class="mini-name">Correction</span>
                <span class="mini-desc">Corrige l'orthographe de la sélection</span>
                <span class="mini-mic"></span>
                <span class="mini-hotkey" style="cursor:pointer;" title="Cliquer pour modifier ce raccourci" onclick="editAcademyHotkey(this.dataset.hotkey, this)" data-hotkey="correction-quick">Ctrl + &lt;</span>
            </div>

            <div class="mini-row">
                <span class="mini-star">☆</span>
                <span class="mini-name">Traduction</span>
                <span class="mini-desc">Traduit la sélection vers le français</span>
                <span class="mini-mic"></span>
                <span class="mini-hotkey" style="cursor:pointer;" title="Cliquer pour modifier ce raccourci" onclick="editAcademyHotkey(this.dataset.hotkey, this)" data-hotkey="traduction-selection">Ctrl + Shift + T</span>
            </div>

            <div class="mini-section-title">Agents par groupe</div>

            <div class="mini-row">
                <span class="mini-star">☆</span>
                <span class="mini-name">Assistant</span>
                <span class="mini-desc">Route vers Rédacteur ou Recherche web selon ce que vous dites</span>
                <span class="mini-mic" title="Commande vocale">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <rect x="9" y="3" width="6" height="11" rx="3"/>
                        <path d="M5 11a7 7 0 0 0 14 0"/>
                        <line x1="12" y1="18" x2="12" y2="22"/>
                    </svg>
                </span>
                <span class="mini-hotkey" style="cursor:pointer;" title="Cliquer pour modifier ce raccourci" onclick="editAcademyHotkey(this.dataset.hotkey, this)" data-hotkey="assistant">Ctrl + Shift + Espace</span>
            </div>
        </div>

        <p class="mini-edit-hint" style="font-size: 0.85rem; color: var(--text-muted); margin: 0.75rem 0 0;">
            ✏️ Astuce : cliquez sur un raccourci ci-dessus pour le modifier directement, sans quitter la formation.
        </p>

        <!-- Légende icônes -->
        <div class="mini-legend">
            <div class="mini-legend-row">
                <span class="mini-legend-icon">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <rect x="9" y="3" width="6" height="11" rx="3"/>
                        <path d="M5 11a7 7 0 0 0 14 0"/>
                        <line x1="12" y1="18" x2="12" y2="22"/>
                    </svg>
                </span>
                <span><strong>L'icône micro</strong> indique que l'agent écoute votre voix en plus de la sélection.</span>
            </div>
            <div class="mini-legend-row">
                <span class="mini-legend-icon empty">—</span>
                <span><strong>Pas d'icône</strong> : l'agent travaille uniquement sur le texte sélectionné, pas besoin de parler.</span>
            </div>
        </div>
    </section>

    <!-- ─── 3. Le routage — Ctrl + G en action ───────────────────── -->
    <section class="lesson3-section">
        <h2>3. Le routage avec <span class="kbd-inline">Ctrl + G</span></h2>
        <p>
            Quand vous appuyez sur <span class="kbd-inline">Ctrl + G</span> et que vous parlez, Vicsia
            écoute votre phrase, identifie l'intention, et délègue au bon agent. Pas de menu, pas de choix.
        </p>

        <!-- Arbre de routage simple -->
        <div class="routing-tree">
            <div class="routing-root">
                <div class="routing-root-box">
                    <div class="routing-root-label">Raccourci universel</div>
                    <div class="routing-root-key">Ctrl + G</div>
                    <div class="routing-root-sub">Vicsia écoute, route automatiquement</div>
                </div>
            </div>
            <div class="routing-arrows" aria-hidden="true">
                <svg viewBox="0 0 380 36" preserveAspectRatio="none">
                    <path d="M 190 0 Q 190 18 60 36"  stroke="var(--accent)" stroke-width="1.5" fill="none" stroke-dasharray="3 3" opacity="0.55"/>
                    <path d="M 190 0 L 190 36"         stroke="var(--accent)" stroke-width="1.5" fill="none" stroke-dasharray="3 3" opacity="0.55"/>
                    <path d="M 190 0 Q 190 18 320 36" stroke="var(--accent)" stroke-width="1.5" fill="none" stroke-dasharray="3 3" opacity="0.55"/>
                </svg>
            </div>
            <div class="routing-children">
                <div class="routing-child">
                    <div class="routing-child-icon">🤖</div>
                    <div class="routing-child-name">Assistant</div>
                    <div class="routing-child-ex">Rédaction, recherche, résumé</div>
                </div>
                <div class="routing-child">
                    <div class="routing-child-icon">📬</div>
                    <div class="routing-child-name">Mail</div>
                    <div class="routing-child-ex">Lire, répondre, agenda</div>
                </div>
                <div class="routing-child">
                    <div class="routing-child-icon">📇</div>
                    <div class="routing-child-name">CRM</div>
                    <div class="routing-child-ex">Contacts, notes</div>
                </div>
            </div>
        </div>

        <p>Voici ce que dit Vicsia selon ce que vous lui demandez :</p>
        <div class="flow-examples">
            <div class="flow-row">
                <span class="flow-quote">« rédige un mail à Jean pour confirmer le rendez-vous »</span>
                <span class="flow-arrow">→</span>
                <span class="flow-target">Assistant · Rédacteur</span>
            </div>
            <div class="flow-row">
                <span class="flow-quote">« lis-moi mes mails non lus »</span>
                <span class="flow-arrow">→</span>
                <span class="flow-target">Mail · Lecteur</span>
            </div>
            <div class="flow-row">
                <span class="flow-quote">« cherche le numéro du dernier client »</span>
                <span class="flow-arrow">→</span>
                <span class="flow-target">CRM · Contacts</span>
            </div>
        </div>

        <p class="muted">
            Si Vicsia hésite, il vous demande de préciser. Vous ne risquez jamais de déclencher la
            mauvaise action sans le voir.
        </p>

        <h3 style="font-size:1rem; font-weight:700; margin:1.5rem 0 0.5rem; color:var(--text);">
            Raccourci de groupe — alternative à Ctrl + G
        </h3>
        <p>
            Chaque <strong>groupe</strong> peut aussi avoir son propre raccourci. Pratique si vous
            voulez sortir un groupe du routage global — par exemple, un raccourci dédié pour le
            groupe Mail (<span class="kbd-inline">Ctrl + Shift + M</span>) qui ne passe pas par Ctrl + G.
            Vous appuyez, vous parlez, et l'orchestrateur du groupe choisit l'agent enfant lui-même.
        </p>
        <p class="muted">
            C'est utile quand un groupe est tellement utilisé que vous voulez aller plus vite,
            ou quand vous voulez l'isoler du routage universel.
        </p>

        <div class="lesson3-info">
            <strong>Règle de sortie :</strong> les agents activés via <span class="kbd-inline">Ctrl + G</span>
            ou via un raccourci de groupe affichent <strong>toujours leur réponse dans la capsule (popup)</strong>.
            Pas de collage direct, même si l'agent est configuré en mode « Coller ». C'est par design : un
            routage automatique mérite une confirmation visuelle avant que ça atterrisse dans votre document.
        </div>

        <h3 style="font-size:1rem; font-weight:700; margin:1.5rem 0 0.5rem; color:var(--text);">
            Cas mixte : un agent en mode « Coller » qui a aussi un raccourci individuel
        </h3>
        <p>
            Si vous avez un agent en sortie <strong>Coller</strong> (ex: Rédacteur) avec un raccourci
            individuel <em>et</em> qu'il fait partie du routage Ctrl + G, le même agent va se comporter
            différemment selon comment vous l'appelez :
        </p>

        <div class="routing-cases">
            <div class="routing-case">
                <div class="routing-case-head">Via son raccourci dédié</div>
                <div class="routing-case-body">
                    <span class="routing-case-tag paste">Coller</span>
                    Le résultat est <strong>collé directement</strong> là où votre curseur est —
                    comme configuré dans l'agent.
                </div>
            </div>
            <div class="routing-case">
                <div class="routing-case-head">Via Ctrl + G ou raccourci de groupe</div>
                <div class="routing-case-body">
                    <span class="routing-case-tag popup">Popup</span>
                    Le résultat s'affiche dans la <strong>capsule</strong>, jamais collé d'office.
                    Vous copiez à la main si vous voulez le placer ailleurs.
                </div>
            </div>
        </div>

        <a class="video-link" href="#" data-video="routing-demo" onclick="event.preventDefault(); alert('Vidéo bientôt disponible.');">
            Voir en vidéo : Ctrl + G en action (bientôt)
        </a>

        <div class="lesson3-tip">
            <strong>Bonus natif</strong> — deux capacités sont activées par défaut sur tous les plans :
            <strong>piloter votre système</strong> (volume, fenêtres, applications…) et
            <strong>créer de nouveaux agents par la voix</strong>. Dites simplement
            « crée un agent qui résume mes mails » via <span class="kbd-inline">Ctrl + G</span>.
            Visibles dans la page <a href="/v3/connections">Connexions</a>.
        </div>
    </section>

    <!-- ─── 4. Activer / désactiver ──────────────────────────────── -->
    <section class="lesson3-section">
        <h2>4. Activer ou désactiver un raccourci</h2>
        <p>
            Vous pouvez désactiver complètement un agent ou un groupe — dans la page Agents,
            chaque ligne a un interrupteur. Désactivé, son raccourci ne fait plus rien (et il
            n'apparaît plus dans le routage Ctrl + G).
        </p>
        <p class="muted">
            Utile si un raccourci entre en conflit avec une autre app, ou si vous voulez « mettre
            de côté » un agent sans le supprimer.
        </p>

        <a class="video-link" href="#" data-video="toggle-agent" onclick="event.preventDefault(); alert('Vidéo bientôt disponible.');">
            Voir en vidéo : activer / désactiver un agent (bientôt)
        </a>
    </section>

    <div class="lesson3-actions">
        <a class="btn-l btn-l-secondary" href="/v3/academy">← Menu Académie</a>
        <a class="btn-l btn-l-primary" href="/v3/agents" id="lesson3-finish">Aller régler mes raccourcis →</a>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function() {
    'use strict';
    // Affiche les vrais raccourcis de l'utilisateur (et permet leur édition au clic).
    if (typeof loadAcademyHotkeys === 'function') loadAcademyHotkeys();
    const btn = document.getElementById('lesson3-finish');
    if (btn) btn.addEventListener('click', async () => {
        try { await apiFetch('/api/academy/complete/3', { method: 'POST' }); } catch (e) {}
    });
})();
</script>
{% endblock %}