/* VISION — Computer vision in the browser */
:root{
  --bg:#04070f;
  --panel:#0a121f;
  --panel-2:#0d1728;
  --border:rgba(120,180,255,.15);
  --border-strong:rgba(120,180,255,.32);
  --text:#e8edf5;
  --text-muted:#a3b0c5;
  --text-soft:#7d8aa1;
  --accent:#5dd4f7;
  --accent-hi:#8ee2fa;
  --accent-soft:rgba(93,212,247,.12);
  --accent-soft-2:rgba(93,212,247,.22);
  --warm:#ffb37c;
  --danger:#ff5e5e;
  --success:#39ff14;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:.95rem;line-height:1.55;min-height:100vh}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.back-to-menu{position:fixed;top:.7rem;left:.7rem;z-index:9999;background:rgba(4,7,15,.85);color:var(--accent);border:1px solid var(--border-strong);padding:.5rem .85rem;border-radius:8px;font-size:.78rem;font-family:inherit;text-decoration:none;letter-spacing:.02em;backdrop-filter:blur(6px);transition:background .15s,border-color .15s}
.back-to-menu:hover,.back-to-menu:focus-visible{background:rgba(93,212,247,.2);border-color:var(--accent);outline:none}

.topbar{display:flex;align-items:center;gap:1rem;padding:.85rem 1.25rem .85rem 4.5rem;border-bottom:1px solid var(--border);background:rgba(4,7,15,.85);position:sticky;top:0;z-index:5;backdrop-filter:blur(8px)}
.topbar .brand{font-weight:800;letter-spacing:.05em;color:var(--accent)}
.topbar .tag{font-size:.7rem;letter-spacing:.18em;color:var(--text-soft);text-transform:uppercase;margin-left:auto}

.layout{display:grid;grid-template-columns:320px 1fr 300px;gap:1rem;padding:1.25rem;max-width:1500px;margin:0 auto;align-items:start}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem}

/* Focus ring accessible partout dans le panel gauche */
.left-panel :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.left-panel button:focus-visible,
.left-panel input[type=range]:focus-visible,
.left-panel input[type=checkbox]:focus-visible,
.left-panel input[type=radio]:focus-visible{outline-offset:3px}

/* Sections numérotées : chaque étape est une carte interne */
.section{border:0;padding:0;margin:0 0 1.1rem;background:transparent;position:relative}
.section:last-child{margin-bottom:0}
.section + .section{padding-top:1.1rem;border-top:1px solid var(--border)}

/* Section titles avec badge numéroté */
.p-title{font-size:.82rem;font-weight:700;margin:0 0 .55rem;color:var(--text);display:flex;align-items:center;gap:.55rem;letter-spacing:.05em;text-transform:uppercase;padding:0}
.p-title::before{content:attr(data-step);display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-size:.7rem;font-weight:800;flex-shrink:0;letter-spacing:0}
.section:not([data-step]) .p-title::before,
.p-title:not([data-step]):not(:only-child)::before{display:none}
/* data-step est porté par .section : le titre lit l'attribut du parent */
.section[data-step="1"] .p-title::before{content:"1"}
.section[data-step="2"] .p-title::before{content:"2"}
.section[data-step="3"] .p-title::before{content:"3"}
.section[data-step="4"] .p-title::before{content:"4"}
.section[data-step="5"] .p-title::before{content:"5"}
.p-hint{font-size:.75rem;color:var(--text-muted);margin:0 0 .7rem;line-height:1.45}

/* Boutons */
.btn{background:rgba(93,212,247,.08);border:1px solid var(--border-strong);color:var(--text);font-family:inherit;font-size:.82rem;padding:.6rem .9rem;border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s,transform .05s;width:100%;line-height:1.15;display:inline-flex;align-items:center;justify-content:center;gap:.4rem}
.btn:hover:not(:disabled){background:rgba(93,212,247,.2);border-color:var(--accent)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.pri{background:linear-gradient(180deg,rgba(93,212,247,.28),rgba(93,212,247,.15));border-color:var(--accent);color:#fff;font-weight:600}
.btn.pri:hover:not(:disabled){background:linear-gradient(180deg,rgba(93,212,247,.4),rgba(93,212,247,.22))}
.btn.danger{background:rgba(255,94,94,.08);border-color:rgba(255,94,94,.35);color:#ffb0b0}
.btn.danger:hover:not(:disabled){background:rgba(255,94,94,.2);border-color:var(--danger)}
.ctrl-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.ctrl-grid .btn.wide{grid-column:span 2}

/* Mode selector — cartes compactes 1 ligne */
.mode-list{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.mode-row{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.55rem;padding:.6rem .65rem;border:1px solid var(--border);border-radius:9px;cursor:pointer;background:rgba(0,0,0,.18);transition:background .15s,border-color .15s,box-shadow .2s;position:relative;align-items:center}
.mode-row:hover{background:rgba(93,212,247,.06);border-color:var(--border-strong)}
.mode-row.is-active{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-soft-2),var(--accent-soft));box-shadow:inset 0 0 0 1px rgba(93,212,247,.25),0 0 22px -10px rgba(93,212,247,.5)}
.mode-row.is-active .mode-name{color:var(--accent-hi)}
.mode-row.is-flash{animation:mode-flash .5s ease-out}
@keyframes mode-flash{0%{box-shadow:0 0 0 0 rgba(93,212,247,.7)}100%{box-shadow:0 0 0 8px rgba(93,212,247,0)}}
/* Radio caché mais accessible */
.mode-row input[type=radio]{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.mode-row input[type=radio]:focus-visible ~ *,
.mode-row:focus-within{box-shadow:0 0 0 2px var(--accent)}
.mode-icon{grid-column:1;grid-row:1/3;font-size:1.5rem;line-height:1;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:rgba(0,0,0,.25);flex-shrink:0}
.mode-row.is-active .mode-icon{background:rgba(93,212,247,.15)}
.mode-name{grid-column:2;grid-row:1;font-weight:700;color:var(--text);font-size:.82rem;line-height:1.2}
.mode-sub{grid-column:2;grid-row:2;font-size:.68rem;color:var(--text-muted);line-height:1.2;margin-top:.15rem}
.mode-row.is-active .mode-sub{color:var(--text)}

/* Status pill */
.status{font-size:.74rem;color:var(--text-muted);padding:.5rem .7rem;border-radius:6px;background:rgba(0,0,0,.25);border:1px solid var(--border);font-family:ui-monospace,"SF Mono",monospace;margin-top:.5rem;display:flex;align-items:center;gap:.5rem;line-height:1.35}
.status::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--text-soft);flex-shrink:0;box-shadow:0 0 0 3px rgba(125,138,161,.15)}
.status.is-loading{color:var(--warm);border-color:rgba(255,179,124,.3)}
.status.is-loading::before{background:var(--warm);box-shadow:0 0 0 3px rgba(255,179,124,.2);animation:pulse-warm 1.2s ease-in-out infinite}
.status.is-ok{color:var(--success);border-color:rgba(57,255,20,.25)}
.status.is-ok::before{background:var(--success);box-shadow:0 0 0 3px rgba(57,255,20,.2)}
.status.is-error{color:var(--danger);border-color:rgba(255,94,94,.4)}
.status.is-error::before{background:var(--danger);box-shadow:0 0 0 3px rgba(255,94,94,.2)}
@keyframes pulse-warm{
  0%,100%{opacity:1}
  50%{opacity:.4}
}

/* Source tabs (role=tablist) */
.source-tabs{display:grid;grid-template-columns:1fr 1fr;gap:.25rem;background:rgba(0,0,0,.3);padding:.25rem;border-radius:9px;border:1px solid var(--border);margin-bottom:.65rem}
.tab-btn{background:transparent;border:0;color:var(--text-muted);padding:.5rem;border-radius:6px;font-family:inherit;font-size:.78rem;cursor:pointer;transition:background .15s,color .15s;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.35rem}
.tab-btn:hover{color:var(--text);background:rgba(93,212,247,.06)}
.tab-btn.active,.tab-btn[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}

/* Drop zone */
.drop-zone{border:2px dashed var(--border-strong);border-radius:10px;padding:.9rem .8rem;text-align:center;transition:border-color .15s,background .15s}
.drop-zone.is-drag{border-color:var(--accent);background:var(--accent-soft)}
.drop-zone .btn{margin-bottom:.5rem}
.drop-hint{font-size:.7rem;color:var(--text-muted);margin:.2rem 0;line-height:1.5}
.file-info{margin-top:.6rem;padding:.5rem .6rem;background:rgba(0,0,0,.25);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:6px;font-size:.72rem;color:var(--text-muted);font-family:ui-monospace,monospace;word-break:break-all;white-space:pre-line;line-height:1.45}

/* Sliders — grid propre : label / value en haut, range en dessous */
.opt-group{display:flex;flex-direction:column;gap:.55rem;margin-bottom:.85rem}
.opt-row{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:.7rem;row-gap:.25rem;font-size:.76rem;align-items:center}
.opt-row label{color:var(--text-muted);grid-column:1;grid-row:1;font-weight:500}
.opt-row output{grid-column:2;grid-row:1;font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700;background:var(--accent-soft);padding:.05rem .5rem;border-radius:6px;font-size:.72rem;min-width:3em;text-align:center}
.opt-row input[type=range]{grid-column:1/-1;grid-row:2;width:100%;accent-color:var(--accent);height:22px}

/* Feature group (checkboxes) — carte séparée pour distinguer des sliders */
.feat-group{border:1px solid var(--border);border-radius:9px;padding:.55rem .3rem;margin:0;background:rgba(0,0,0,.15)}
.feat-legend{font-size:.65rem;color:var(--text-soft);text-transform:uppercase;letter-spacing:.08em;padding:0 .5rem;font-weight:600}
.check-row{display:grid;grid-template-columns:auto auto 1fr;gap:.55rem;align-items:center;font-size:.78rem;color:var(--text-muted);padding:.35rem .55rem;cursor:pointer;user-select:none;border-radius:6px;transition:background .15s,color .15s}
.check-row:hover{color:var(--text);background:rgba(93,212,247,.05)}
.check-row input[type=checkbox]{accent-color:var(--accent);cursor:pointer;width:16px;height:16px;margin:0}
.check-ico{font-size:.95rem;line-height:1;grid-column:2}
.check-text{grid-column:3;line-height:1.2;font-weight:500}
.check-row:has(input:checked){color:var(--accent)}
.check-row:has(input:checked) .check-text{color:var(--accent);font-weight:600}

/* Fieldset unstyled */
.section fieldset{margin:0;padding:0;border:0}
.section legend.p-title{padding:0;margin-bottom:.55rem}

/* Video panel */
.video-panel{display:flex;flex-direction:column;gap:.7rem}
.video-wrap{position:relative;background:#000;border:1px solid var(--border);border-radius:10px;overflow:hidden;aspect-ratio:16/9}
/* Video ET image sont explicitement absolute-positionnés SUR le wrap.
   Sans ça, l'image (display:block flow normal) n'occupe pas la même case
   que l'overlay. Résultat : quand le split clippe l'overlay à droite,
   on ne voit PAS l'image dessous (juste le fond noir du wrap). */
#video,
#image-el{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent}
#overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.mode-row.is-disabled{opacity:.45;cursor:not-allowed}
.mode-row.is-disabled input{cursor:not-allowed}

/* Mode Split : une seule vidéo, l'overlay est clippé à la position du
   divider. Résultat : moitié gauche = vidéo brute, moitié droite =
   vidéo + annotations IA. Divider draggable au milieu. */
.video-wrap.is-split #overlay{clip-path:inset(0 0 0 var(--split-x, 50%));transition:none}
.video-wrap.is-split .split-divider{position:absolute;top:0;bottom:0;left:var(--split-x, 50%);width:3px;background:linear-gradient(180deg,var(--accent) 0%,var(--warm) 100%);transform:translateX(-1.5px);z-index:15;box-shadow:0 0 24px rgba(93,212,247,.6),0 0 8px rgba(255,179,124,.4);pointer-events:none}
.video-wrap.is-split .split-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(4,7,15,.95);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1.1rem;font-weight:700;cursor:ew-resize;pointer-events:auto;box-shadow:0 4px 16px rgba(0,0,0,.5);user-select:none;touch-action:none}
.video-wrap.is-split .split-handle:hover{background:var(--accent-soft);color:#fff}
.video-wrap.is-split .split-handle:active{cursor:grabbing;transform:translate(-50%,-50%) scale(.95)}
/* Badges "Sans IA" (gauche) et "Avec IA" (droite) */
.video-wrap.is-split::before{content:"Sans IA";position:absolute;top:.6rem;left:.6rem;z-index:12;background:rgba(4,7,15,.85);color:var(--text-muted);padding:.25rem .55rem;border-radius:6px;font-size:.75rem;font-weight:700;border:1px solid var(--border-strong);letter-spacing:.02em}
.video-wrap.is-split::after{content:"Avec IA";position:absolute;top:.6rem;right:.6rem;z-index:12;background:rgba(4,7,15,.85);color:var(--accent);padding:.25rem .55rem;border-radius:6px;font-size:.75rem;font-weight:700;border:1px solid var(--accent);letter-spacing:.02em}

/* Mode A/B : deux vidéos côte à côte. aspect-ratio 32/9 = deux 16:9
   accolés, chaque moitié = 16:9 pile → vidéos affichées à leur taille
   naturelle sans letterbox parasite. */
.video-wrap.is-ab{aspect-ratio:32/9}
.video-wrap.is-ab #video{width:50%;left:0;position:absolute;height:100%;object-fit:contain;border-right:2px solid var(--accent)}
.video-wrap.is-ab #overlay{width:50%;left:0}
.video-wrap.is-ab #video-b{display:block;width:50%;height:100%;position:absolute;right:0;top:0;object-fit:contain}
/* Petits badges A / B pour identifier les vidéos */
.video-wrap.is-ab::before{content:"A · analysée";position:absolute;top:.5rem;left:.5rem;z-index:10;background:rgba(4,7,15,.85);color:var(--accent);padding:.2rem .5rem;border-radius:6px;font-size:.72rem;font-weight:700;border:1px solid var(--accent)}
.video-wrap.is-ab::after{content:"B · référence";position:absolute;top:.5rem;right:.5rem;z-index:10;background:rgba(4,7,15,.85);color:var(--warm);padding:.2rem .5rem;border-radius:6px;font-size:.72rem;font-weight:700;border:1px solid var(--warm)}
/* Sur écran étroit : passer en stacked vertical (vidéo B sous A) */
@media (max-width:900px){
  .video-wrap.is-ab{aspect-ratio:16/9}
  .video-wrap.is-ab #video{width:100%;height:50%;top:0;border-right:0;border-bottom:2px solid var(--accent)}
  .video-wrap.is-ab #overlay{width:100%;height:50%;top:0}
  .video-wrap.is-ab #video-b{width:100%;height:50%;top:50%;right:0}
}
#heatmap-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;opacity:.85}
.video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-soft);text-align:center;padding:1.5rem;gap:.6rem;background:radial-gradient(ellipse at center,rgba(93,212,247,.04) 0%,transparent 70%)}
.placeholder-icon{font-size:3rem;opacity:.5}

/* Caption box */
.caption-box{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);background:rgba(4,7,15,.88);color:var(--text);padding:.55rem 1.1rem;border-radius:6px;font-size:.9rem;font-weight:500;border:1px solid var(--accent);box-shadow:0 4px 20px rgba(0,0,0,.4);backdrop-filter:blur(6px);max-width:80%;text-align:center;line-height:1.4}

/* Meta bar */
.vid-meta{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;font-size:.74rem;color:var(--text-muted);font-family:ui-monospace,monospace;align-items:center;padding:.5rem .7rem;background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:8px}
.meta-time{color:var(--accent);font-weight:600}
.meta-stat{color:var(--text-muted)}
.meta-stat::before{content:'·';margin-right:.7rem;color:var(--text-soft)}
.vid-meta > :first-child::before{content:none}
.vid-meta > :first-child{margin-right:auto}

/* Bouton mute dans la meta bar */
.meta-audio{margin-left:auto;background:transparent;border:1px solid var(--border-strong);color:var(--accent);font-size:1rem;cursor:pointer;padding:.15rem .5rem;border-radius:6px;line-height:1;transition:background .15s,border-color .15s}
.meta-audio:hover{background:var(--accent-soft);border-color:var(--accent)}
.meta-audio.is-muted{color:var(--text-soft);border-color:var(--border)}
.meta-audio::before{content:none}

/* Playback panel (sous la vidéo) : contrôles + options horizontaux */
.playback-panel{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:12px;padding:.85rem}
.pb-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-bottom:.85rem}
.pb-grid{display:grid;grid-template-columns:1fr 260px;gap:.85rem;align-items:start}
.pb-grid .opt-group{margin-bottom:0}
.pb-grid .feat-group{margin:0}
/* Focus rings sur les contrôles du playback aussi */
.playback-panel :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (max-width:700px){
  .pb-controls{grid-template-columns:1fr 1fr}
  .pb-grid{grid-template-columns:1fr}
}

/* Timeline */
.timeline-wrap{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:10px;padding:.8rem}
.timeline-title{font-size:.8rem;font-weight:700;color:var(--accent);margin-bottom:.4rem;display:flex;align-items:center;gap:.4rem}
.timeline-legend{display:flex;flex-wrap:wrap;gap:.6rem;font-size:.7rem;color:var(--text-muted);margin-bottom:.4rem}
.legend-item{display:inline-flex;align-items:center;gap:.3rem}
.legend-item i{display:inline-block;width:10px;height:10px;border-radius:2px}
#timeline{display:block;width:100%;height:auto;background:transparent;border-radius:4px}

/* Stats panel */
.class-list,.current-list{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;max-height:350px;overflow-y:auto}
.class-row{display:flex;align-items:center;gap:.5rem;padding:.45rem .55rem;background:rgba(0,0,0,.22);border:1px solid var(--border);border-left:4px solid var(--c,var(--accent));border-radius:6px;flex-wrap:wrap;transition:background .15s}
.class-row:hover{background:rgba(93,212,247,.06)}
.class-name{flex:1;font-weight:600;color:var(--text);text-transform:capitalize}
.class-count{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700;background:var(--accent-soft);padding:.05rem .5rem;border-radius:10px;font-size:.72rem}
.class-bar{height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;flex-basis:100%;margin-top:.3rem}
.class-bar-fill{height:100%;background:var(--c,var(--accent));border-radius:2px;transition:width .25s}
.empty-msg{font-size:.74rem;color:var(--text-soft);text-align:center;padding:1rem;font-style:italic;margin:0}

/* Renamable person */
.renamable{cursor:pointer;transition:color .15s;position:relative}
.renamable:hover{color:var(--accent) !important}

/* Backend badge */
.backend-badge{font-size:.62rem;font-family:ui-monospace,monospace;letter-spacing:.05em;border:1px solid var(--text-soft);color:var(--text-soft);padding:.2rem .5rem;border-radius:4px;text-transform:uppercase;font-weight:600}

/* Scenes */
.scenes-block{border-top:1px dashed var(--border);padding-top:.7rem;margin-top:.7rem}
.scenes-list{display:flex;flex-direction:column;gap:.3rem;max-height:250px;overflow-y:auto}
.scene-row{display:grid;grid-template-columns:auto auto auto 1fr;gap:.5rem;align-items:center;padding:.4rem .55rem;background:rgba(0,0,0,.22);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:6px;font-size:.72rem}
.scene-num{font-weight:700;color:var(--accent);font-family:ui-monospace,monospace}
.scene-time{color:var(--text-muted);font-family:ui-monospace,monospace}
.scene-dom{color:var(--text);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scene-palette{display:inline-flex;gap:2px;border-radius:4px;overflow:hidden;border:1px solid var(--border-strong)}
.scene-palette i{display:inline-block;width:14px;height:14px}

/* Mode-list : 4 rangées × 2 colonnes (7 modes) — le 7e prend toute la ligne */
.mode-list{grid-template-columns:1fr 1fr}
.mode-row:nth-child(5){grid-column:auto}
.mode-row:nth-child(7){grid-column:span 2}

/* Rapport final (modal) */
.final-report{position:fixed;inset:0;background:rgba(4,7,15,.85);backdrop-filter:blur(6px);z-index:9998;display:grid;place-items:center;padding:1rem;animation:fr-in .25s ease-out}
@keyframes fr-in{from{opacity:0}to{opacity:1}}
.fr-panel{background:var(--panel);border:1px solid var(--border-strong);border-radius:14px;padding:1.5rem;max-width:520px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.fr-panel h2{margin:0 0 1rem;color:var(--accent);font-size:1.15rem}
.fr-panel h3{margin:1.2rem 0 .5rem;color:var(--text);font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}
.fr-close{position:absolute;top:.7rem;right:.7rem;background:transparent;border:0;color:var(--text-muted);font-size:1.2rem;cursor:pointer;padding:.3rem .5rem;border-radius:6px}
.fr-close:hover{background:rgba(255,255,255,.08);color:var(--text)}
.fr-summary{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem;background:rgba(0,0,0,.25);border:1px solid var(--border);border-radius:10px;padding:.7rem}
.fr-summary > div{text-align:center}
.fr-summary b{display:block;color:var(--accent);font-size:1.3rem;font-weight:800}
.fr-summary span{display:block;font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem}
.fr-list{list-style:none;padding:0;margin:0}
.fr-list li{display:flex;justify-content:space-between;align-items:center;padding:.5rem .7rem;background:rgba(0,0,0,.2);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:6px;margin-bottom:.35rem;font-size:.85rem}
.fr-list li span{color:var(--text)}
.fr-list li i{font-style:normal;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.fr-actions{margin-top:1.2rem;display:flex;justify-content:flex-end}

/* Emotion distribution chart dans le rapport final */
.fr-emotions{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.4rem}
.fr-emo-row{display:grid;grid-template-columns:130px 1fr 45px;align-items:center;gap:.5rem;font-size:.78rem}
.fr-emo-name{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-emo-bar{background:rgba(0,0,0,.3);height:14px;border-radius:7px;overflow:hidden;border:1px solid var(--border)}
.fr-emo-fill{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-hi,#8ee2fa));border-radius:6px;transition:width .3s ease}
.fr-emo-pct{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;text-align:right;font-size:.72rem}

/* OCR result text panel */
.ocr-text{background:rgba(0,0,0,.35);border:1px solid var(--border);border-radius:8px;padding:.75rem;font-family:ui-monospace,"SF Mono",monospace;font-size:.82rem;line-height:1.5;color:var(--text);white-space:pre-wrap;max-height:280px;overflow-y:auto;margin:.4rem 0 0}

/* Future/roadmap cards */
.ex-future{opacity:.75;border-style:dashed}
.ex-future h3{color:var(--text-muted)}

/* Explain */
.explain{max-width:1500px;margin:0 auto;padding:1rem 1.25rem 3rem}
.ex-title{font-size:1.05rem;color:var(--accent);margin:0 0 1rem}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem}
.ex-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;position:relative}
.ex-step{position:absolute;right:.85rem;top:.85rem;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:.85rem}
.ex-card h3{font-size:.9rem;margin:0 0 .4rem;color:var(--text)}
.ex-card p{font-size:.78rem;color:var(--text-muted);margin:0;line-height:1.55}
.ex-card code{background:rgba(93,212,247,.08);color:var(--accent);padding:.05rem .35rem;border-radius:4px;font-size:.85em}

/* A11y — respect prefers-reduced-motion (EAA/WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .status.is-loading::before{animation:none}
  .mode-row.is-flash{animation:none}
}

/* Touch targets ≥ 44 px sur mobile (EAA/WCAG 2.5.5) */
@media (pointer:coarse){
  .btn,.tab-btn,.mode-row,.check-row{min-height:44px}
  .back-to-menu{padding:.65rem 1rem}
}

/* Responsive */
@media (max-width:1100px){
  .layout{grid-template-columns:1fr;max-width:780px}
  .stats-panel{order:3}
  .left-panel{order:1}
  .video-panel{order:2}
}
@media (max-width:600px){
  .layout{padding:.6rem;gap:.6rem}
  .panel{padding:.85rem}
  .topbar{padding:.7rem 1rem .7rem 4rem}
  .topbar .tag{display:none}
  .p-title{font-size:.85rem}
  .mode-desc{font-size:.7rem}
  .opt-row{grid-template-columns:1fr auto;gap:.3rem .5rem}
  .opt-row input[type=range]{grid-column:1/-1;margin-top:.3rem}
  .opt-row label{grid-column:1;min-width:0}
  .opt-row span{grid-column:2}
}