/* =========================================================================
   MEETennis — assets/v4.css
   Les écrans ajoutés avec les bibliothèques d'octobre 2026 :
   squelette et courbe du geste (analyse vidéo), allègement / coupe avant
   envoi, QR codes, graphiques, boîte d'envoi hors ligne, emojis.
   Les couleurs passent par les variables de app.css (--brand, --ink…).
   ========================================================================= */

/* ---- Analyse vidéo : le squelette ---------------------------------------- */
.an-sq{margin-top:10px;padding:12px;border-radius:14px;background:#f7f2ed;color:var(--ink)}
.an-sq-etat{margin:0 0 8px;font:600 12.5px/1.5 'Raleway',sans-serif;color:var(--ink-soft)}
.an-sq-vide{margin:0;font-size:12.5px;color:var(--ink-soft)}
.an-sq-dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:0}
.an-sq-dl div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:7px 10px;border-radius:10px;background:#fff}
.an-sq-dl dt{font:600 12px 'Raleway',sans-serif;color:var(--ink-soft)}
.an-sq-dl dd{margin:0;font:800 15px 'Montserrat',sans-serif;font-variant-numeric:tabular-nums;color:var(--ink)}
.an-sq-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.an-sq-graphe{position:relative;height:220px;margin-top:10px;padding:8px;border-radius:12px;background:#fff}
.an-sq-graphe canvas{cursor:pointer}
.an-sq-conseils{margin-top:10px;font:500 12.5px/1.5 'Raleway',sans-serif;color:var(--ink-soft)}
.an-sq-conseils summary{cursor:pointer;font-weight:700;color:var(--ink)}
.an-sq-conseils ul{margin:6px 0 0;padding-left:18px}
.an-sq-conseils li{margin:3px 0}
.an-sq-dl + .an-sq-vide,.an-sq-vide + .an-sq-dl{margin-top:6px}

/* ---- Envoi d'une vidéo : alléger, couper --------------------------------- */
.vj-optim{display:grid;gap:8px;margin:4px 0 10px;padding:12px;border-radius:14px;background:#f7f2ed}
.vj-optim .en-case{align-items:flex-start}
.vj-optim small{display:block;color:var(--ink-soft);font-weight:500}
.vj-coupe{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 13px 'Raleway',sans-serif}
.vj-coupe label{display:inline-flex;align-items:center;gap:6px}
.vj-coupe .pro-in{width:90px;padding:8px 10px}
.vj-coupe-lien{justify-self:start;background:none;border:0;padding:0;cursor:pointer;font:700 12.5px 'Montserrat',sans-serif;color:var(--brand)}
.vj-optim .pro-note{margin:0}

/* ---- QR codes ------------------------------------------------------------ */
.qr-fond{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,14,10,.62)}
.qr-boite{width:min(420px,100%);padding:20px;border-radius:24px;background:#fff;color:var(--ink);text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.qr-titre{margin:0 0 12px;font:800 16px/1.3 'Montserrat',sans-serif}
.qr-image{margin:0 auto;max-width:320px;background:#fff}
.qr-image svg{display:block;width:100%;height:auto}
.qr-lien{margin:10px 0 14px;font:500 11.5px/1.4 ui-monospace,Menlo,monospace;color:var(--ink-soft);word-break:break-all}
.qr-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ej-copie{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ej-copie .pro-in{flex:1 1 220px}

/* ---- Graphiques (Chart.js) ------------------------------------------------ */
.graph{margin:12px 0 0}
.graph-titre{margin:0 0 6px;font:800 13px 'Montserrat',sans-serif;color:var(--ink)}
.graph-cadre{position:relative;width:100%}
.graph-legende{margin:8px 0 0}
.graph.graph-pret .graph-repli{display:none}

/* ---- Boîte d'envoi hors ligne --------------------------------------------- */
.hl-pastille{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:8500;
  max-width:calc(100% - 32px);padding:10px 16px;border:0;border-radius:999px;background:var(--ink);color:#fff;
  font:700 12.5px/1.35 'Montserrat',sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer;text-align:center}
.hl-pastille.alerte{background:#d0312d}
.hl-note{margin-bottom:10px}

/* ---- Emojis ------------------------------------------------------------- */
.emoji-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin:6px 0 0;padding:0;
  border:1px solid rgba(0,0,0,.10);border-radius:50%;background:#fff;font-size:17px;line-height:1;cursor:pointer;flex:0 0 auto;vertical-align:top}
.emoji-btn:hover{border-color:var(--brand)}
.emoji-boite{position:fixed;z-index:9100;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.25);overflow:hidden}
.emoji-boite.emoji-feuille{left:0 !important;right:0;bottom:0;top:auto !important;border-radius:18px 18px 0 0}
.emoji-boite.emoji-feuille em-emoji-picker{width:100%;height:min(420px,60vh)}