/* ===== Extrait d'index.html : bloc <style> d'origine (lignes 27-1264) ===== */
  @import url('https://fonts.googleapis.com/css2?family=Anton&family=Lalezar&family=Inter:wght@400;500;600;700&display=swap');

  :root{
    --bg:#10141d;
    --bg2:#161c28;
    --surface:#1b2331;
    --surface2:#212b3c;
    --line:#2b3649;
    --line2:#384660;
    --text:#e9edf5;
    --muted:#8893a8;
    --muted2:#8893a8;
    --amber:#66B8EA;
    --amber-dim:#66B8EA;
    --green:#3fd17a;
    --green-glow:rgba(63,209,122,.18);
    --blue:#56a8ff;
    --red:#ff5d6c;
    /* vraie teinte d'avertissement (ambre), distincte de --amber qui est en
       réalité l'azur d'accent de l'app : réservée aux badges/messages qui
       signalent un problème (cf. .hl-clip.is-raw). */
    --warn:#ffb020;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;max-width:100%}
  body{padding:18px;line-height:1.45}
  .wrap{max-width:960px;margin:0 auto;width:100%}

  /* ---------- brand header ---------- */
  .brand-header{padding:14px 0 20px;overflow:visible;display:flex;align-items:center;justify-content:space-between}
  .brand-header img{display:block;max-width:100%;min-width:0}

  /* ---------- titre du match (interface en direct) ---------- */
  .match-title-text{
    font-family:'Anton';font-size:13px;letter-spacing:.4px;color:var(--muted);
    flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  /* ---------- layout ---------- */
  .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
  @media(min-width:780px) and (orientation:landscape){.cols{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}

  /* portrait : une colonne, pas de débordement */
  @media(orientation:portrait){
    .cols{grid-template-columns:minmax(0,1fr)}
  }
  .card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
  .card h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-weight:600}


  /* ---------- feed ---------- */
  .feed{list-style:none;display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto}
  .feed li{display:flex;align-items:center;gap:11px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px;animation:slidein .25s ease}
  @keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .feed .num{font-family:'Anton';font-size:18px;width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:8px;background:var(--surface2);color:var(--amber);font-variant-numeric:tabular-nums}
  .feed .ev{flex:1;min-width:0}
  .feed .ev b{font-size:14px}
  .feed .ev em{font-style:normal;color:var(--muted);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .feed .meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
  .feed .t{font-family:'Anton';font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
  .engtag{font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:5px;font-weight:600}
  .engtag.ia{background:rgba(86,168,255,.14);color:var(--blue)}
  .engtag.rules{background:rgba(102,184,234,.14);color:var(--amber)}
  .clipchip{font-size:10px;color:var(--green);background:var(--green-glow);border-radius:5px;padding:2px 6px;display:inline-flex;gap:3px;align-items:center}
  .undo{background:none;border:1px solid var(--line2);color:var(--muted);border-radius:7px;width:28px;height:28px;cursor:pointer;flex:none}
  .undo:hover{color:var(--red);border-color:var(--red)}
  .empty{color:var(--muted2);font-size:13px;text-align:center;padding:24px 0}

  /* ---------- stat sheet ---------- */
  .sheetwrap{overflow-x:auto;margin-top:4px}
  table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
  th,td{text-align:center;padding:9px 6px;border-bottom:1px solid var(--line)}
  th{font-size:10px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;font-weight:600;position:sticky;top:0;background:var(--surface)}
  td.player{text-align:left;white-space:nowrap}
  td.player .n{font-family:'Anton';color:var(--amber);margin-right:7px;font-variant-numeric:tabular-nums}
  td.pts{font-family:'Anton';font-size:17px}
  td.val{font-size:15px;color:var(--text)}
  td.zero{color:var(--muted2)}
  tr.total td{border-top:2px solid var(--line2);border-bottom:none;font-weight:700;color:var(--muted);font-size:12px;padding-top:11px}
  tr.total td.pts{color:var(--amber)}
  .flash{animation:flash .9s ease}
  @keyframes flash{0%{background:var(--green-glow);color:var(--green)}100%{background:transparent}}

  /* ---------- vue détaillée de la feuille de stats (groupes PANIER / REBONDS) ----------
     La vue essentiel garde le tableau compact existant, inchangé. La vue
     détaillée (12 colonnes) est plus large : elle défile horizontalement DANS
     .sheetwrap si nécessaire, sans jamais faire déborder la page. */
  .sheetwrap.detail-mode{overflow-x:auto}
  .sheetwrap.detail-mode table{table-layout:auto;min-width:640px}
  .sheetwrap.detail-mode th:not(:first-child),
  .sheetwrap.detail-mode td:not(.player){white-space:nowrap}
  th.grp-panier,td.grp-panier{background:rgba(102,184,234,.07)}
  th.grp-rebond,td.grp-rebond{background:rgba(63,209,122,.07)}
  .grp-first{border-left:2px solid rgba(255,255,255,.15)}
  #archive-section-stats .sheetwrap.detail-mode table{table-layout:auto;width:max-content;min-width:100%}
  #archive-section-stats .sheetwrap.detail-mode td.player{white-space:nowrap}

  /* ---------- lignes de saisie effectif (réutilisées par l'écran de config du match) ---------- */
  .rrow{display:flex;gap:7px;align-items:center}
  .rrow .rn{width:54px}
  .rrow button{background:none;border:1px solid var(--line2);color:var(--muted2);width:32px;height:34px;border-radius:8px;cursor:pointer;flex:none}
  .rrow button:hover{color:var(--red);border-color:var(--red)}

  .toolbar{display:flex;gap:8px;margin-top:14px}
  .toolbar button{flex:1;background:var(--surface2);border:1px solid var(--line2);color:var(--muted);border-radius:9px;padding:9px;cursor:pointer;font-family:inherit;font-size:13px}
  .toolbar button:hover{color:var(--text)}
  .toolbar button:disabled{opacity:.4;cursor:default;pointer-events:none}

  .foot{margin-top:18px;font-size:12px;color:var(--muted2);text-align:center;line-height:1.7}
  .foot b{color:var(--muted)}
  .btn-info{color:var(--blue)!important;border-color:rgba(86,168,255,.4)!important}
  .btn-info:hover{background:rgba(86,168,255,.08)!important}

  /* ---------- saisie express ---------- */
  #express-panel{
    position:fixed;background:var(--bg2);border-top:2px solid var(--amber-dim);
    z-index:200;display:flex;flex-direction:column;gap:8px;
  }
  @media(orientation:portrait){
    #express-panel{bottom:0;left:0;right:0;height:50vh;border-radius:14px 14px 0 0;padding:10px 12px 16px;overflow-y:auto;}
    body{padding-bottom:calc(50vh + 4px)}
    #exp-toast{bottom:calc(50vh + 10px);top:auto;transform:translateX(-50%)}
  }
  @media(orientation:landscape){
    #express-panel{top:0;right:0;bottom:0;width:34vw;border-top:none;border-left:2px solid var(--amber-dim);padding:12px 10px;overflow-y:auto;}
    body{padding-right:calc(34vw + 8px)}
    #exp-toast{left:calc((100vw - 34vw)/2)}
  }

  .exp-header{display:flex;align-items:center;gap:8px;flex-shrink:0}
  .exp-title{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;flex:1}
  .exp-status{font-size:12px;padding:5px 11px;border-radius:8px;background:var(--bg);border:1px solid var(--line);color:var(--muted2);transition:.2s;flex-shrink:0}
  .exp-status.armed{color:var(--amber);border-color:var(--amber-dim);background:rgba(102,184,234,.1)}

  /* gros bouton "NOUVELLE ACTION" : dominant dans l'encadré de saisie,
     large cible tactile pensée pour être tapée au pouce sans viser — c'est
     LUI qui déclenche la capture vidéo (cf. startNewAction() plus bas dans
     le script), donc il doit être impossible à manquer. */
  .new-action-btn{
    flex-shrink:0;width:100%;display:block;font-family:'Anton';
    font-size:clamp(20px,5.5vw,28px);letter-spacing:.04em;text-transform:uppercase;
    color:#00225B;background:var(--amber);
    border:none;border-radius:16px;padding:22px 12px;cursor:pointer;
    box-shadow:0 4px 0 var(--amber-dim),0 8px 18px rgba(0,0,0,.35);
    transition:.1s;-webkit-tap-highlight-color:transparent;user-select:none;
  }
  .new-action-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--amber-dim),0 3px 8px rgba(0,0,0,.3)}

  /* bouton "NON" de la sous-question "Saisir aussi une passe décisive ?" :
     volontairement plus grand et plus voyant que les boutons joueur qui le
     suivent (cf. .exp-player-btn plus bas) — c'est le cas le plus fréquent. */
  .passedec-non-btn{
    width:100%;display:block;font-family:'Anton';font-size:20px;letter-spacing:.4px;
    text-transform:uppercase;color:#00225B;background:var(--amber);
    border:none;border-radius:12px;padding:16px 10px;cursor:pointer;margin-bottom:14px;
    box-shadow:0 3px 0 var(--amber-dim);transition:.1s;-webkit-tap-highlight-color:transparent;user-select:none;
  }
  .passedec-non-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--amber-dim)}

  .exp-players{display:flex;flex-wrap:wrap;gap:5px;flex-shrink:0}
  .exp-player-btn{
    background:var(--surface);border:2px solid var(--line);border-radius:9px;
    color:var(--text);cursor:pointer;padding:5px 7px;min-width:42px;text-align:center;
    transition:.12s;-webkit-tap-highlight-color:transparent;user-select:none;
  }
  .exp-player-btn .pnum{font-family:'Anton';font-size:16px;color:var(--amber);display:block}
  .exp-player-btn .pname{font-size:9px;color:var(--muted);display:block}
  .exp-player-btn:active{transform:scale(.92)}
  .exp-player-btn.armed{border-color:var(--amber);background:rgba(102,184,234,.15)}
  .exp-player-btn.ok{animation:epflash .5s ease forwards}
  @keyframes epflash{0%{background:var(--green-glow);border-color:var(--green)}100%{background:rgba(102,184,234,.15);border-color:var(--amber)}}

  /* 3 boutons d'action par ligne, agrandis pour une cible tactile confortable
     (≥48px de haut, texte plus lisible) — cf. bloc dédié plus bas qui
     redéfinit encore la taille pour la fenêtre "Quelle action ?" précisément. */
  .exp-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .exp-action-btn{
    background:var(--surface);border:1px solid var(--line2);border-radius:10px;color:var(--text);
    cursor:pointer;padding:9px 4px;font-family:inherit;font-size:12px;font-weight:600;text-align:center;
    transition:.12s;-webkit-tap-highlight-color:transparent;user-select:none;
  }
  .exp-action-btn.pts{font-family:'Anton';font-size:16px;color:var(--amber)}
  .exp-action-btn:active{transform:scale(.94)}
  .exp-action-btn.ok{animation:eaflash .35s ease forwards}
  @keyframes eaflash{0%{background:rgba(63,209,122,.22)}100%{background:var(--surface)}}

  /* boutons "dernière action" (annuler / corriger le joueur) : rangés dans la
     saisie express, sous la grille d'actions, mais volontairement plus
     discrets/petits que .exp-action-btn pour ne jamais être confondus avec
     un bouton de stat. N'apparaissent qu'une fois une action enregistrée. */
  .exp-lastaction-toolbar{display:flex;gap:6px;flex-shrink:0}
  .exp-lastaction-toolbar.hidden{display:none}

  #exp-toast{
    position:fixed;top:40%;left:50%;transform:translateX(-50%);z-index:300;
    background:rgba(255,93,108,.92);color:#fff;font-size:13px;font-weight:600;
    padding:9px 20px;border-radius:20px;pointer-events:none;opacity:0;
    transition:opacity .18s;white-space:nowrap;
  }
  #exp-toast.show{opacity:1}

  /* ---------- modal fin de match ---------- */
  .modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(10,14,22,.95);display:flex;align-items:center;justify-content:center;padding:20px;}
  .modal-overlay.hidden{display:none}
  .modal-card{background:var(--surface);border:2px solid var(--amber-dim);border-radius:18px;padding:28px;width:100%;max-width:420px;}
  .modal-card h3{font-family:'Anton';font-size:20px;font-weight:400;color:var(--text);margin-bottom:8px;letter-spacing:.5px}
  .modal-card p{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.6}
  .modal-btns{display:flex;flex-direction:column;gap:10px}
  .modal-btn{width:100%;border-radius:10px;padding:13px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;border:1px solid var(--line2);background:var(--surface2);color:var(--text);transition:.12s;text-align:left;}
  .modal-btn:hover{border-color:var(--amber-dim);background:rgba(102,184,234,.08)}
  .modal-btn .mbt{display:block;font-weight:700;margin-bottom:2px}
  .modal-btn .mbd{font-size:12px;color:var(--muted);font-weight:400}
  .modal-btn.primary{background:rgba(102,184,234,.12);border-color:var(--amber-dim)}
  .modal-btn.danger{border-color:rgba(255,93,108,.4)}
  .modal-btn.danger:hover{border-color:var(--red);background:rgba(255,93,108,.08)}
  .modal-btn.cancel-btn{border-color:var(--line);color:var(--muted)}

  /* ---------- fenêtres de saisie en panneau (.is-sheet) ----------
     Les fenêtres de qualification (NOUVELLE ACTION, Ajouter une action,
     Corriger le joueur) montent du bas de l'écran. Tout est limité à
     .is-sheet : les règles de base .modal-* ci-dessus servent aussi à
     #team-pick-modal et ne changent pas. Pas de « poignée » en haut : le
     panneau ne se fait pas glisser. */
  .modal-overlay.is-sheet{align-items:flex-end;padding:0;background:rgba(5,7,11,.74)}
  .is-sheet .modal-card{
    width:100%;max-width:560px;margin:0 auto;box-sizing:border-box;
    background:var(--bg2);border:none;border-top:1px solid var(--line);border-radius:22px 22px 0 0;
    padding:20px 20px calc(24px + env(safe-area-inset-bottom));
    max-height:92dvh;overflow-y:auto;display:flex;flex-direction:column;
  }
  .is-sheet h3{font-family:'Anton';font-size:26px;line-height:1.15;letter-spacing:.5px;margin:0}
  .is-sheet .modal-card > p{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
  .is-sheet .sheet-capturing{display:flex;align-items:center;gap:8px}
  .is-sheet .sheet-capturing svg{flex:none;color:var(--green)}
  .is-sheet .hl-safe-note{margin:10px 0 0}

  /* listes de joueurs : 2 colonnes, seule la liste défile */
  .is-sheet .exp-players{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
    margin:16px 0 14px;max-height:56dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .is-sheet .exp-player-btn{
    display:flex;align-items:center;gap:10px;min-height:60px;padding:0 10px;box-sizing:border-box;
    border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--text);
    text-align:left;min-width:0;
  }
  .is-sheet .exp-player-btn .pnum{
    flex:none;width:40px;height:40px;border-radius:10px;background:var(--surface2);border:1px solid var(--line2);
    display:flex;align-items:center;justify-content:center;font-family:'Anton';font-size:20px;color:var(--amber);
  }
  .is-sheet .exp-player-btn .pname{
    min-width:0;font-size:15px;font-weight:600;color:var(--text);line-height:1.2;overflow-wrap:anywhere;
  }
  .is-sheet .exp-player-btn.armed{border-color:var(--amber);background:rgba(102,184,234,.1)}
  .is-sheet .exp-player-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

  .is-sheet .modal-btn.cancel-btn{
    height:48px;min-height:0;padding:0 16px;border-radius:12px;background:transparent;border:1px solid var(--line);
    color:var(--text);text-align:center;font-size:15px;font-weight:600;
  }

  /* « Quelle action ? » : trois familles (cf. renderStatChoices) */
  .is-sheet .exp-actions{display:block}
  .is-sheet .modal-card .ui-section{margin:16px 0 8px}
  .is-sheet .ui-section + .exp-players{margin-top:0}
  .is-sheet .exp-family{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .is-sheet .exp-family.is-autres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .is-sheet .exp-action-btn{
    height:76px;padding:6px 4px;border-radius:14px;background:var(--surface);border:1px solid var(--line);
    color:var(--text);font-family:inherit;font-size:13px;font-weight:600;line-height:1.25;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;
  }
  .is-sheet .exp-action-btn svg{flex:none;color:var(--amber)}
  .is-sheet .exp-action-btn.pts{height:88px;border:none;border-radius:16px;background:var(--amber);color:#00225B;gap:0}
  .is-sheet .exp-action-btn .ea-num{font-family:'Lalezar';font-size:40px;line-height:1;padding-top:8px}
  .is-sheet .exp-action-btn .ea-unit{font-size:13px;font-weight:700}

  /* sous-questions (rebond, faute sur tir, panier rentré) */
  .is-sheet .modal-btns{margin-top:16px;gap:10px}
  .is-sheet .modal-btn{
    min-height:56px;border-radius:14px;padding:14px 16px;
    background:var(--surface);border:1px solid var(--line2);color:var(--text);
  }
  .is-sheet .modal-btn.primary{background:var(--amber);border:none;color:#00225B}
  .is-sheet .modal-btn .mbt{font-size:17px;font-weight:700}
  .is-sheet .modal-btn .mbd{font-size:13px;line-height:1.4;color:var(--muted)}
  .is-sheet .modal-btn.primary .mbd{color:#00225B}

  /* passe décisive : « NON, PAS DE PASSE » en tête, puis les passeurs */
  .is-sheet .passedec-non-btn{
    height:64px;padding:0 10px;border-radius:14px;font-family:'Anton';font-size:22px;
    box-shadow:none;margin:16px 0 0;
  }
  .is-sheet .passedec-non-btn:active{box-shadow:none}

  /* paysage : panneau collé à droite, sur toute la hauteur, assez compact
     pour que tout soit visible sans défiler (près du pouce droit). Le
     portrait ci-dessus ne change pas. */
  @media(orientation:landscape){
    .modal-overlay.is-sheet{align-items:stretch;justify-content:flex-end}
    .is-sheet .modal-card{
      position:relative;width:clamp(360px,56vw,480px);max-width:none;max-height:none;margin:0;
      border-top:none;border-left:1px solid var(--line);border-radius:22px 0 0 22px;
      padding:calc(12px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) 16px;
    }
    .is-sheet h3{font-size:20px}
    .is-sheet .modal-card > p{margin-top:2px;font-size:13px;line-height:1.35}

    /* fenêtres dont la seule action est « Annuler » : le bouton passe en
       haut à droite ; titre et texte lui laissent 112 px */
    .is-sheet .modal-card:has(> .modal-btns > .cancel-btn:only-child) > .modal-btns{
      position:absolute;margin:0;
      top:calc(12px + env(safe-area-inset-top,0px));right:calc(16px + env(safe-area-inset-right,0px));
    }
    .is-sheet .modal-card:has(> .modal-btns > .cancel-btn:only-child) > .modal-btns > .cancel-btn{
      width:auto;height:40px;padding:0 16px;
    }
    .is-sheet .modal-card:has(> .modal-btns > .cancel-btn:only-child) > h3,
    .is-sheet .modal-card:has(> .modal-btns > .cancel-btn:only-child) > p{padding-right:112px}
    .is-sheet .modal-card:has(> .modal-btns > .cancel-btn:only-child) > .hl-safe-note{margin-right:112px}

    /* « Quelle action ? » : intertitres masqués, 3 rangées qui se
       partagent la hauteur restante (grille de 6 colonnes) */
    .is-sheet .exp-actions .ui-section{display:none}
    .is-sheet .exp-actions{
      display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(48px,1fr);gap:8px;
      flex:1 1 auto;min-height:0;margin-top:12px;
    }
    .is-sheet .exp-family{display:contents}
    .is-sheet .exp-action-btn,
    .is-sheet .exp-action-btn.pts{grid-column:span 2;height:auto;min-height:48px}
    .is-sheet .exp-family.is-autres .exp-action-btn{grid-column:span 3}
    .is-sheet .exp-action-btn .ea-num{font-size:34px;padding-top:4px}

    /* listes de joueurs : 3 colonnes, toute la hauteur restante, ne
       défilent que si elles débordent */
    .is-sheet .exp-players{
      grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-content:start;
      flex:1 1 auto;min-height:0;max-height:none;margin:12px 0 0;
    }
    .is-sheet .exp-player-btn{min-height:48px;padding:4px 8px;gap:8px}
    .is-sheet .exp-player-btn .pnum{width:34px;height:34px;font-size:18px}
    .is-sheet .exp-player-btn .pname{font-size:14px}

    /* passe décisive : intertitre « Passeur » masqué */
    .is-sheet .modal-card > .ui-section{display:none}
    .is-sheet .passedec-non-btn{height:48px;font-size:20px;margin:8px 0 0}
    .is-sheet .passedec-non-btn ~ .exp-players{margin-top:10px}

    /* sous-questions (rebond, faute sur tir, panier rentré) */
    .is-sheet .modal-btns{margin-top:12px;gap:8px}
    .is-sheet .modal-btn{min-height:52px;padding:10px 14px}
  }

  /* ---------- fin de match (fenêtre centrée, pas un panneau) ---------- */
  #end-match-modal .modal-card{background:var(--bg2);border:1px solid var(--line2);border-radius:20px;padding:24px 20px 18px}
  #end-match-modal h3{font-family:'Anton';font-size:26px;margin:0 0 6px}
  #end-match-modal .modal-card p{font-size:14px;color:var(--muted)}
  #end-match-modal .modal-btn{display:flex;align-items:center;gap:12px;border-radius:16px;padding:16px}
  #end-match-modal .modal-btn svg{flex:none}
  #end-match-modal .modal-btn .mb-text{min-width:0}
  #end-match-modal .modal-btn.primary{background:var(--amber);border:none;color:#00225B}
  #end-match-modal .modal-btn.primary .mbd{color:#00225B}
  #end-match-modal .modal-btn.danger{background:transparent;border:1px solid var(--red);color:var(--red)}
  #end-match-modal .modal-btn.danger .mbt{color:var(--red)}
  #end-match-modal .modal-btn.cancel-btn{
    height:44px;padding:0;border:none;background:transparent;color:var(--muted);justify-content:center;text-align:center;
  }

  /* ---------- modale maison confirm / alert ----------
     Remplace window.confirm() et window.alert() : plus aucune fenêtre
     système du navigateur (celles qui affichent l'URL du site), style
     100 % cohérent avec l'app. Voir confirmerModale() / alerteModale(). */
  #app-dialog-overlay{position:fixed;inset:0;z-index:2000;background:rgba(10,14,22,.72);display:flex;align-items:center;justify-content:center;padding:20px;}
  #app-dialog-overlay.hidden{display:none}
  #app-dialog-overlay .app-dialog{background:var(--surface);border:1px solid var(--line2);border-radius:16px;padding:24px;width:100%;max-width:400px;box-shadow:0 18px 50px rgba(0,0,0,.5);}
  #app-dialog-overlay .app-dialog h3{font-family:'Anton';font-size:19px;font-weight:400;color:var(--text);margin-bottom:10px;letter-spacing:.5px}
  #app-dialog-overlay .app-dialog p{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.6;white-space:pre-line}
  #app-dialog-overlay .app-dialog-btns{display:flex;flex-direction:column;gap:10px}
  #app-dialog-overlay .app-dialog-btn{width:100%;border-radius:10px;padding:13px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;border:1px solid var(--line2);background:var(--surface2);color:var(--text);transition:.12s;text-align:center;}
  #app-dialog-overlay .app-dialog-btn:hover{border-color:var(--amber-dim);background:rgba(102,184,234,.08)}
  #app-dialog-overlay .app-dialog-btn.primary{background:var(--amber);border-color:var(--amber);color:#00225B;font-weight:700}
  #app-dialog-overlay .app-dialog-btn.primary:hover{background:var(--amber);border-color:var(--amber)}
  #app-dialog-overlay .app-dialog-btn.secondary{border-color:var(--line);color:var(--muted)}
  #app-dialog-overlay .app-dialog-btn.secondary:hover{color:var(--text);border-color:var(--line2)}

  /* ---------- écran archives ---------- */
  #archives-screen{position:fixed;inset:0;z-index:450;background:var(--bg);overflow-y:auto;padding:20px 20px 32px;}
  #archives-screen.hidden{display:none}
  .arch-empty{color:var(--muted2);font-size:14px;text-align:center;padding:48px 0}
  .arch-list{display:flex;flex-direction:column;gap:12px;max-width:700px;margin:0 auto}
  .arch-item-us{color:var(--green)}
  .arch-item-opp{color:var(--red)}

  /* ---------- viewer archive ---------- */
  #archive-viewer{position:fixed;inset:0;z-index:460;background:var(--bg);overflow-y:auto;padding:20px 20px 32px;}
  /* Écran "Toutes les saisies" : au-dessus du viewer d'archive (460) — il
     peut s'ouvrir PAR-DESSUS lui — mais SOUS .modal-overlay (500), pour que
     la modale "Corriger le joueur" (fix-player-modal) reste au-dessus quand
     on la déclenche depuis cet écran, sans toucher au z-index de la modale. */
  #all-entries-screen{position:fixed;inset:0;z-index:480;background:var(--bg);overflow-y:auto;padding:20px 20px 32px;}
  #all-entries-screen.hidden{display:none}
  .all-entries-hint{margin-top:16px}
  .all-entries-add{margin-top:12px}
  #all-entries-list{margin-top:14px}
  /* une carte par saisie (le journal #feed de l'écran de match garde ses propres styles .feed) */
  .entry-list{display:flex;flex-direction:column;gap:8px}
  .entry{
    display:flex;align-items:center;gap:12px;padding:8px 8px 8px 10px;
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
  }
  .entry-num{
    flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:44px;
    border-radius:10px;background:var(--surface2);border:1px solid var(--line2);
    font-family:'Anton';font-size:18px;color:var(--amber);
  }
  .entry-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .entry-title{font-size:15px;font-weight:600;line-height:1.3;overflow-wrap:anywhere} /* jamais coupé par « … » : l'action reste visible */
  .entry-meta{font-size:12px;color:var(--muted)}
  .entry .ui-icon-btn{flex:none}
  /* pastille discrète sur une saisie ajoutée manuellement (cf. "Ajouter une
     action") : aucune vidéo n'existe pour elle, contrairement aux actions
     capturées pendant le match — jamais confondue avec une vraie absence de
     clip (stockage plein, capture ratée...). */
  .all-entries-novideo{
    display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;
    font-size:10px;font-weight:700;color:var(--muted);background:var(--surface2);
    border:1px solid var(--line2);vertical-align:middle;
  }
  #archive-viewer.hidden{display:none}
  .viewer-score{font-family:'Anton';font-size:26px;letter-spacing:.5px;text-align:center;margin-bottom:4px;}
  .viewer-us{color:var(--green)}
  .viewer-opp{color:var(--red)}

  /* ---------- viewer archive : page d'accueil (hub) + sections séparées ---------- */
  .arch-hub.hidden,.arch-section.hidden{display:none}
  .arch-hub-title{overflow-wrap:anywhere}
  #archive-viewer .deco-dots{margin:20px 0 22px}
  /* section Highlights sans clip (chargement, aucun clip, stockage indisponible, erreur) */
  #archive-section-highlights .deco-dots{margin:18px 0}
  .hl-arch-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;margin-top:72px}
  .hl-arch-empty svg{color:var(--amber);opacity:.5}
  .hl-arch-empty-title{margin:4px 0 0;font-family:'Anton';font-size:20px;letter-spacing:.3px;color:var(--text)}
  .hl-arch-empty-text{margin:0;max-width:290px;font-size:14px;line-height:1.5;color:var(--muted)}
  .arch-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .arch-tile{
    display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:136px;padding:14px;
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
    color:var(--text);text-align:left;font-family:inherit;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:.12s;
  }
  .arch-tile:active{background:var(--surface2)}
  .arch-tile:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .arch-tile-ico{
    display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    border-radius:12px;background:var(--surface2);border:1px solid var(--line2);color:var(--amber);
  }
  .arch-tile-text{display:flex;flex-direction:column;gap:3px}
  .arch-tile-name{font-family:'Anton';font-size:18px;line-height:1.15;letter-spacing:.3px}
  .arch-tile-sub{font-size:12px;line-height:1.35;color:var(--muted)}
  @media(hover:hover){
    .arch-tile:hover{border-color:var(--amber-dim)}
  }

  /* ---------- feuille de stats d'un match archivé ----------
     Le HTML (buildStatsSheetBlockHTML / buildSheetTableHTML) est partagé avec
     l'aperçu des stats du match en cours : tout l'habillage reste limité à
     #archive-section-stats. */
  #archive-stats-sheet-block{margin-top:18px}
  /* bascule Vue essentiel / Vue détaillée */
  #archive-stats-sheet-block .story-fmt-switch{
    display:grid;grid-template-columns:1fr 1fr;gap:0;padding:4px;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
  }
  #archive-stats-sheet-block .story-fmt-btn{
    height:38px;padding:0;border:0;border-radius:9px;background:transparent;
    color:var(--text);font-size:14px;font-weight:600;
  }
  #archive-stats-sheet-block .story-fmt-btn.active{background:var(--amber);color:#00225B;font-weight:700}
  /* tableau en carte : le défilement horizontal (vue détaillée) reste dans la carte */
  #archive-section-stats .sheetwrap{
    margin-top:4px;overflow-x:auto;
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
  }
  #archive-section-stats th,#archive-section-stats td{padding:0 2px}
  #archive-section-stats th:first-child,#archive-section-stats td:first-child{padding-left:12px;text-align:left}
  #archive-section-stats th:last-child,#archive-section-stats td:last-child{padding-right:12px}
  #archive-section-stats th{
    height:36px;background-color:var(--surface2);border:0;
    font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);
  }
  #archive-section-stats tbody td{height:44px;border-top:1px solid var(--line);border-bottom:0;font-size:14px}
  #archive-section-stats td.player .n{
    display:inline-block;min-width:24px;margin-right:8px;
    font-family:'Anton';font-size:15px;color:var(--amber);
  }
  #archive-section-stats td.pts{font-family:inherit;font-size:14px;font-weight:700}
  #archive-section-stats td.val{font-size:14px}
  #archive-section-stats td.zero{color:var(--muted)}
  #archive-section-stats tr.total td{
    height:46px;padding-top:0;background-color:var(--surface2);border-top:1px solid var(--line2);
    font-size:14px;font-weight:700;color:var(--text);
  }
  #archive-section-stats tr.total td.player{font-size:12px;letter-spacing:.08em;color:var(--muted)}
  #archive-section-stats tr.total td.pts{font-family:'Lalezar';font-size:20px;font-weight:400;color:var(--amber)}
  /* vue Essentiel : colonnes fixes, le prénom passe à la ligne (jamais coupé par « … ») */
  #archive-section-stats .sheetwrap:not(.detail-mode) table{table-layout:fixed;width:100%}
  #archive-section-stats .sheetwrap:not(.detail-mode) td.player{white-space:normal;overflow-wrap:anywhere;line-height:1.2}
  #archive-section-stats .sheetwrap:not(.detail-mode) th:nth-child(2),
  #archive-section-stats .sheetwrap:not(.detail-mode) th:nth-child(3){width:40px}
  #archive-section-stats .sheetwrap:not(.detail-mode) th:nth-child(4),
  #archive-section-stats .sheetwrap:not(.detail-mode) th:nth-child(5){width:34px}
  #archive-section-stats .sheetwrap:not(.detail-mode) th:nth-child(6){width:46px} /* 34px + 12px de marge à droite */
  /* vue Détaillée : les groupes PANIER / REBONDS gardent leurs fonds et filets */
  #archive-section-stats .sheetwrap.detail-mode th,
  #archive-section-stats .sheetwrap.detail-mode td{padding-left:6px;padding-right:6px}
  #archive-section-stats .sheetwrap.detail-mode th:first-child,
  #archive-section-stats .sheetwrap.detail-mode td:first-child{padding-left:12px}
  #archive-section-stats .sheetwrap.detail-mode th:last-child,
  #archive-section-stats .sheetwrap.detail-mode td:last-child{padding-right:12px}
  #archive-section-stats .sheetwrap.detail-mode thead tr + tr th{height:30px}
  /* en-tête et TOTAL ont un fond --surface2 : la teinte de groupe y est reposée par-dessus */
  #archive-section-stats th.grp-panier,#archive-section-stats tr.total td.grp-panier{background-image:linear-gradient(rgba(102,184,234,.07),rgba(102,184,234,.07))}
  #archive-section-stats th.grp-rebond,#archive-section-stats tr.total td.grp-rebond{background-image:linear-gradient(rgba(63,209,122,.07),rgba(63,209,122,.07))}
  #archive-section-stats .grp-first{border-left:2px solid rgba(255,255,255,.15)}
  /* export */
  .sheet-export{display:flex;gap:10px}
  #sheet-fmt-switch{
    flex:none;width:132px;display:grid;grid-template-columns:1fr 1fr;gap:0;padding:4px;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
  }
  #sheet-fmt-switch .story-fmt-btn{
    height:40px;padding:0;border:0;border-radius:9px;background:transparent;
    color:var(--text);font-size:14px;font-weight:600;
  }
  #sheet-fmt-switch .story-fmt-btn.active{background:var(--surface2);color:var(--amber);font-weight:700}
  .sheet-save{
    flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:50px;
    border:0;border-radius:12px;background:var(--amber);color:#00225B;
    font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
  }
  .sheet-save svg{flex:none}
  .sheet-save:focus-visible{outline:2px solid var(--text);outline-offset:2px}
  .sheet-export-hint{margin:10px 0 0;font-size:12px;line-height:1.5;text-align:center;color:var(--muted)}

  /* ---------- panneau highlights ---------- */
  #highlights-panel{position:fixed;inset:0;z-index:725;background:var(--bg);overflow-y:auto;padding:18px;}
  #highlights-panel.hidden{display:none}
  /* ---------- arborescence Highlights (écran 1/2A/3A/4A/2B), mutualisée
     match en cours + archive ---------- */
  /* ---------- liste des joueurs (maquette « Highlights — B ») : composants
     ui-* partagés + carte d'équipe et ligne « aucun clip » ---------- */
  #highlights-panel .deco-dots{margin:18px 0}
  .hl-team-card{
    display:flex;align-items:center;gap:14px;width:100%;padding:12px;margin-bottom:4px;
    background:transparent;border:1.5px dashed var(--line2);border-radius:16px;
    color:var(--text);text-align:left;font-family:inherit;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .hl-team-card:active{background:var(--surface2)}
  .hl-team-card:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .hl-team-ico{
    flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    border-radius:12px;background:var(--amber);color:#00225B;
  }
  .hl-team-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .hl-team-title{font-size:16px;font-weight:600;line-height:1.3}
  .hl-team-sub{font-size:13px;color:var(--muted)}
  .hl-nobody{
    display:flex;align-items:flex-start;gap:12px;margin-top:10px;padding:14px;
    border:1.5px dashed var(--line2);border-radius:16px;
    font-size:14px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere;
  }
  .hl-nobody svg{flex:none;color:var(--muted)}
  /* ---------- page d'un joueur (maquette « Clips d'un joueur ») ---------- */
  .hl-chips{
    display:flex;gap:8px;margin:20px 0 14px;overflow-x:auto;flex-wrap:nowrap;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .hl-chips::-webkit-scrollbar{display:none}
  .hl-chip{
    flex:none;height:40px;padding:0 16px;border-radius:20px;border:1px solid var(--line2);
    background:transparent;color:var(--text);font-family:inherit;font-size:14px;font-weight:600;
    white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .hl-chip.is-active{background:var(--amber);border-color:var(--amber);color:#00225B}
  .hl-chip:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .hl-note{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;font-size:13px;line-height:1.45;color:var(--muted)}
  .hl-note svg{flex:none;margin-top:1px;color:var(--amber)}
  .hl-clip-list{display:flex;flex-direction:column;gap:12px}
  .hl-clip{padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
  .hl-clip.is-raw{border-color:var(--warn)}
  .hl-clip-top{display:flex;align-items:flex-start;gap:12px}
  .hl-thumb{
    position:relative;flex:none;display:flex;align-items:center;justify-content:center;
    width:88px;height:88px;padding:0;overflow:hidden;border:0;border-radius:10px;
    background:#0d121b;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .hl-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hl-thumb-ph{display:flex}
  .hl-thumb-play{
    position:relative;display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:50%;background:rgba(6,9,15,.72);color:#fff;
  }
  .hl-thumb:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .hl-clip-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding-top:2px}
  .hl-clip-title{font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
  .hl-clip-meta{font-size:13px;color:var(--muted)}
  .hl-clip-note{font-size:12px;line-height:1.4;color:var(--muted)}
  .hl-clip-warn{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--warn)}
  .hl-clip-warn svg{flex:none}
  .hl-clip-err{font-size:12px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
  .hl-clip-actions{display:flex;gap:8px;margin-top:10px}
  .hl-clip-btn{flex:1 1 0;min-width:0;width:auto;height:44px;padding:0 6px;font-size:14px}
  .hl-clip-actions .ui-icon-btn{flex:none}
  .hl-clip-line{
    display:flex;align-items:center;gap:10px;min-height:52px;padding:4px 4px 4px 14px;
    border:1.5px dashed var(--line2);border-radius:14px;font-size:14px;color:var(--muted);
  }
  .hl-clip-line svg{flex:none}
  .hl-clip-line-text{flex:1;min-width:0;padding:8px 0;overflow-wrap:anywhere}
  .hl-spin{color:var(--amber);animation:hl-spin .9s linear infinite}
  @keyframes hl-spin{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){ .hl-spin{animation-duration:2.4s} }
  .hl-actions{margin-top:18px}
  .hl-actions .ui-btn-primary span{min-width:0;line-height:1.1;overflow-wrap:anywhere;text-align:center}
  .hl-actions .ui-btn-primary:disabled{opacity:.35;cursor:default}
  .hl-actions-note{margin:0;font-size:13px;line-height:1.4;color:var(--muted);text-align:center}
  /* écrans courts (compilation, montage, vidéo prête) : toute la hauteur, la
     barre d'actions posée en bas (le conteneur qui défile a 18px de marge
     tout autour dans le panneau, 20px en haut et 32px en bas en archive) */
  .hl-page{display:flex;flex-direction:column;min-height:calc(100dvh - 36px)}
  #archive-section-highlights .hl-page{min-height:calc(100dvh - 52px)}
  .hl-page > .ui-actions,#highlights-panel .hl-page > .ui-actions{margin-top:auto}
  .hl-page > :nth-last-child(2){margin-bottom:18px}
  /* ---------- page de compilation (maquette « Compilation — B ») ---------- */
  .hl-picks{display:flex;flex-wrap:wrap;gap:8px}
  .hl-pick{
    display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:20px;
    border:1px solid var(--line2);background:transparent;color:var(--text);
    font-family:inherit;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .hl-pick svg{flex:none}
  .hl-pick.is-on{border-color:var(--amber);background:rgba(102,184,234,.1);color:var(--amber)}
  .hl-pick:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .hl-sum{flex-direction:column;gap:12px;margin-top:22px;padding:14px}
  .hl-sum-text{margin:0;font-size:15px;line-height:1.4;color:var(--muted)}
  .hl-sum-text b{color:var(--text);font-weight:700}
  .hl-minis{display:flex;flex-wrap:wrap;gap:8px}
  .hl-mini{
    position:relative;flex:none;display:flex;align-items:center;justify-content:center;
    width:64px;height:64px;overflow:hidden;border-radius:10px;background:#0d121b;color:var(--muted);
  }
  .hl-mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hl-mini-plus{background:var(--surface2);border:1px solid var(--line2);color:var(--text);font-size:15px;font-weight:700}
  /* ---------- « Montage en cours », échec, « Ta vidéo est prête » ---------- */
  .hl-gen{margin-top:48px;text-align:center}
  .hl-gen-count{font-family:'Anton';font-size:64px;line-height:1.1;letter-spacing:.5px}
  .hl-gen-k{color:var(--amber)}
  .hl-gen-n{color:var(--muted)}
  .hl-gen-bar{height:8px;margin-top:18px;border-radius:4px;background:var(--line2);overflow:hidden}
  .hl-gen-fill{width:0;height:100%;border-radius:4px;background:var(--amber);transition:width .25s ease}
  .hl-gen-prep{margin:12px 0 0;font-size:13px;color:var(--muted)}
  .hl-gen-prep[hidden]{display:none}
  .hl-gen-text{max-width:300px;margin:28px auto 0;font-size:14px;line-height:1.5;color:var(--muted)}
  .hl-gen-erreur{margin:20px 0 0;font-size:14px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
  .hl-pv-video{display:block;width:100%;max-height:55vh;margin-top:20px;border-radius:16px;background:#000;object-fit:contain}
  /* ui-actions suppose un écran à 20px de marge latérale et sans marge basse :
     le panneau Highlights a 18px tout autour, le viewer d'archive 32px en bas.
     Le bottom/margin-bottom négatifs collent la barre au vrai bord de l'écran. */
  #highlights-panel .ui-actions{margin:18px -18px -18px;padding-left:18px;padding-right:18px;bottom:-18px}
  #archive-section-highlights .ui-actions{margin-bottom:-32px;bottom:-32px}
  @media(hover:hover){
    .hl-team-card:hover{border-color:var(--amber-dim)}
    .hl-chip:not(.is-active):hover{border-color:var(--amber-dim)}
    .hl-pick:not(.is-on):hover{border-color:var(--amber-dim)}
    .hl-thumb:hover .hl-thumb-play{background:rgba(6,9,15,.88)}
  }

  /* rappel discret, affiché UNE SEULE FOIS en haut de l'écran "clips d'un
     joueur" : lève l'ambiguïté vidéo/stat avant même que l'utilisatrice
     n'ouvre le menu "Supprimer la vidéo" d'un clip. */
  .hl-safe-note{
    display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.4;
    color:var(--muted);background:var(--surface2);border:1px solid var(--line2);
    border-radius:10px;padding:10px 12px;margin-bottom:14px;
  }
  .hl-safe-note .ic{flex:none}

  /* ---------- lecteur "Voir" (lecture seule d'un clip, en superposition) ---------- */
  /* Panneau en grille : en-tête (« Clip N sur M »), vidéo (prend la hauteur
     restante, image entière), barre de commandes. En paysage bas, les
     commandes passent à droite de la vidéo pour que tout reste visible sans
     défilement. Boutons : composants partagés ui-btn-outline. */
  #hl-viewer-overlay{
    position:fixed;inset:0;z-index:920;background:#06090f; /* opaque : la page derrière ne doit pas transparaître sous les commandes */
    display:flex;align-items:center;justify-content:center;
    padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(12px + env(safe-area-inset-bottom,0px));
  }
  #hl-viewer-overlay:focus{outline:none}
  #hl-viewer-overlay.hidden{display:none}
  #hl-viewer-overlay .hl-viewer-panel{
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
    gap:12px;width:100%;max-width:520px;height:100%;
  }
  #hl-viewer-overlay .hl-viewer-head{text-align:center}
  #hl-viewer-overlay .hl-viewer-count{margin:0;font-family:'Anton';font-size:22px;font-weight:400;letter-spacing:.4px;line-height:1.2}
  #hl-viewer-overlay .hl-viewer-meta{margin:2px 0 0;font-size:13px;line-height:1.35;color:var(--muted)}
  #hl-viewer-overlay video{width:100%;height:100%;min-height:0;border-radius:12px;background:#000;object-fit:contain}
  #hl-viewer-overlay .hl-viewer-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #hl-viewer-overlay .hl-viewer-bar .hl-viewer-close{grid-column:1 / -1}
  #hl-viewer-overlay .ui-btn-outline{min-width:0;height:48px;min-height:48px;padding:0 6px;gap:6px;font-size:14px;background:var(--surface2)}
  #hl-viewer-overlay .ui-btn-outline span{min-width:0}
  #hl-viewer-overlay .ui-btn-outline:disabled{opacity:.4;cursor:default}
  #hl-viewer-overlay .ui-btn-outline:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  #hl-viewer-overlay .ui-btn-outline.is-danger svg{color:var(--red)}
  @media (orientation:landscape) and (max-height:600px){
    #hl-viewer-overlay{padding:calc(8px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px))}
    #hl-viewer-overlay .hl-viewer-panel{
      max-width:none;grid-template-columns:minmax(0,1fr) 268px;grid-template-rows:auto minmax(0,1fr);
      grid-template-areas:"video head" "video bar";gap:8px 14px;
    }
    #hl-viewer-overlay video{grid-area:video}
    #hl-viewer-overlay .hl-viewer-head{grid-area:head}
    #hl-viewer-overlay .hl-viewer-bar{grid-area:bar;align-self:start}
    #hl-viewer-overlay .hl-viewer-count{font-size:19px}
  }
  @media(hover:hover){
    #hl-viewer-overlay .ui-btn-outline:not(:disabled):hover{border-color:var(--amber-dim)}
  }

  /* ---------- setup overlay ---------- */
  #setup-overlay{
    position:fixed;inset:0;z-index:400;
    background:var(--bg);overflow-y:auto;
    padding:20px 20px 0;
  }
  #setup-overlay.hidden{display:none}
  .setup-roster-wrap{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
  .setup-roster-wrap input{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;color:var(--text);font-family:inherit;font-size:14px}
  .setup-roster-wrap input.rn{width:64px;text-align:center;font-family:'Anton';color:var(--amber)}
  .setup-roster-wrap input.rname{flex:1;min-width:0}
  .setup-roster-wrap input:focus{outline:none;border-color:var(--amber-dim)}
  .setup-roster-wrap .rrow button{background:none;border:1px solid var(--line2);color:var(--muted2);width:32px;height:34px;border-radius:8px;cursor:pointer;flex:none}
  .setup-roster-wrap .rrow button:hover{color:var(--red);border-color:var(--red)}
  .setup-warning{font-size:12px;color:var(--red);margin-top:8px;min-height:18px}
  /* page « Configuration du match » (composants ui-*). Les règles ci-dessus
     (.setup-roster-wrap, .setup-warning) restent partagées avec le formulaire
     d'équipe : ne pas les modifier pour cet écran. */
  .setup-page{min-height:100%;display:flex;flex-direction:column} /* .ui-actions collée en bas même avec une liste courte */
  #setup-overlay:not(.is-edit) .setup-topbar{display:none}       /* création : pas de bouton retour */
  .setup-pick{
    display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;
    background:var(--surface);border:1px solid var(--line2);border-radius:14px;
    color:var(--text);text-align:left;font-family:inherit;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:.12s;
  }
  .setup-pick:active{background:var(--surface2)}
  .setup-pick:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .setup-pick-ico{
    flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    border-radius:12px;background:var(--surface2);color:var(--amber);
  }
  .setup-pick-title{font-size:15px;font-weight:600}
  #setup-pick-info:empty{display:none}
  #setup-pick-info{display:flex;gap:8px;margin:10px 2px 0;font-size:13px;line-height:1.45;color:var(--muted)}
  #setup-pick-info::before{
    content:"";flex:none;width:16px;height:16px;margin-top:1px;background:var(--green);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5l10 -10'/></svg>") center/16px 16px no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5l10 -10'/></svg>") center/16px 16px no-repeat;
  }
  .setup-page .ui-label{margin-top:18px}
  .setup-page .ui-section{margin:22px 0 10px}
  /* lignes de joueurs : uniquement dans #setup-roster (le formulaire d'équipe garde les siennes) */
  #setup-roster{gap:8px;margin-bottom:0}
  #setup-roster .rrow{gap:8px}
  #setup-roster input{
    height:48px;padding:0 14px;border-radius:12px;
    background:var(--surface);border:1px solid var(--line2);font-size:15px;
  }
  #setup-roster input:focus{border-color:var(--amber)}
  #setup-roster input.rn{width:56px;padding:0;text-align:center;font-family:'Anton';font-size:19px;color:var(--amber)}
  #setup-roster .rrow button{
    display:flex;align-items:center;justify-content:center;width:44px;height:48px;padding:0;
    background:none;border:1px solid var(--line);border-radius:12px;color:var(--muted);
  }
  #setup-roster .rrow button:focus-visible{color:var(--red)}
  /* « + » sous la croix de la dernière ligne (hors .rrow : n'hérite pas du style de la croix) */
  #setup-roster .setup-add-row{display:flex;justify-content:flex-end}
  #setup-roster .setup-add{
    display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
    background:none;border:1px solid var(--line);border-radius:12px;color:var(--amber);cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  #setup-roster .setup-add:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  #setup-roster .setup-add:active{background:var(--surface2)}
  .setup-hint{margin:10px 2px 0;font-size:12px;color:var(--muted)}
  .ui-actions #setup-warning{margin:0;min-height:0}
  .ui-actions #setup-warning:empty{display:none}
  #setup-start.no-icon .setup-start-ico{display:none}
  .setup-start-ico{display:flex}
  @media(hover:hover){
    .setup-pick:hover{border-color:var(--amber-dim)}
    #setup-roster .rrow button:hover{color:var(--red)}
  }

  /* ---------- écran « Quel sport ? » (plein écran, aiguillage sans donnée stockée) ---------- */
  #sport-overlay{
    position:fixed;inset:0;z-index:400;
    background:var(--bg);overflow-y:auto;
    padding:20px 20px 0;
  }
  #sport-overlay.hidden{display:none}
  #sport-overlay:focus{outline:none}
  .sport-page{min-height:100%;display:flex;flex-direction:column;padding-bottom:24px}
  .sport-page .ui-topbar{position:sticky;top:0;z-index:2;background:var(--bg)} /* la croix reste accessible quand l'écran défile */
  .sport-close{margin-left:auto}
  .sport-logo{display:block;height:48px;width:auto;max-width:100%;margin:18px auto 0}
  .sport-title{
    margin:clamp(24px,calc(20vh - 73px),110px) 0 44px;text-align:center; /* descend avec la hauteur : ~1/3 de l'espace logo → premier mot */
    font-family:'Anton';font-size:20px;font-weight:400;line-height:1.2;
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  }
  /* le bloc des deux mots est centré dans l'espace libre */
  .sport-choices{flex:1;display:flex;flex-direction:column;justify-content:center;gap:44px}
  .sport-choice{
    display:flex;flex-direction:column;align-items:center;width:100%;min-height:44px;padding:8px 0;
    background:none;border:0;border-radius:12px;color:var(--text);font-family:inherit;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .sport-choice:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .sport-choice[aria-disabled="true"]{cursor:default}
  .sport-choice:not([aria-disabled="true"]):active{opacity:.7}
  .sport-inner{display:inline-flex;flex-direction:column}
  .sport-word{font-family:'Anton';font-size:56px;font-weight:400;line-height:1.1;text-align:center}
  /* trait plus court que le mot (16 % de marge de chaque côté) ; clip-path : coupe l'étoile à gauche et à droite,
     pas en hauteur (le halo de la tête déborde du trait de 4 px) */
  .sport-line{
    position:relative;height:4px;margin:6px 16% 0;border-radius:2px;
    background:color-mix(in srgb,var(--amber) 30%,transparent);
    clip-path:inset(-12px 0);
  }
  /* étoile filante : conteneur de la largeur du trait, tête au bord droit, traînée à gauche.
     Traversée de 3 s dans un cycle de 4 s ; seuls transform et opacity sont animés. */
  .sport-star{
    position:absolute;left:0;top:0;width:100%;height:4px;opacity:0;
    animation:sport-star 4s linear infinite;
  }
  .sport-star::before{ /* traînée : 70 × 4 px */
    content:"";position:absolute;right:0;top:0;width:70px;height:4px;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--amber));
  }
  .sport-star::after{ /* tête : 8 px avec halo azur */
    content:"";position:absolute;right:-4px;top:-2px;width:8px;height:8px;border-radius:50%;
    background:var(--amber);box-shadow:0 0 8px 2px color-mix(in srgb,var(--amber) 55%,transparent);
  }
  .sport-choice.is-soon .sport-star{animation-delay:1.5s}
  @keyframes sport-star{
    0%{opacity:0;transform:translateX(-100%)}
    8%{opacity:1}
    67%{opacity:1}
    75%,100%{opacity:0;transform:translateX(74px)}
  }
  .sport-soon{margin-top:10px;text-align:center;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--muted)}
  @media (prefers-reduced-motion:reduce){
    .sport-star{display:none}
    .sport-line{background:var(--amber)}
  }
  @media(hover:hover){
    .sport-choice:not([aria-disabled="true"]):hover .sport-word{color:var(--amber)}
  }
  /* paysage bas : mots plus petits, le reste défile */
  @media(max-height:480px){
    .sport-logo{height:36px;margin-top:6px}
    .sport-title{margin:12px 0 20px}
    .sport-choices{gap:20px}
    .sport-word{font-size:44px}
  }

  /* ---------- décor partagé : points reliés (.deco-dots) ---------- */
  /* motif de points reliés repris du logo : purement décoratif (aucun survol, curseur ni transition).
     Le SVG est répété dans le HTML ; la boîte fait 14px de haut (hauteur de l'ancien décor). */
  .deco-dots{
    display:block;flex:none;width:76px;height:14px;overflow:visible;
    pointer-events:none;user-select:none;
  }
  .deco-dots polyline{stroke:var(--line2)}
  .deco-dots circle{stroke:var(--line2);fill:var(--bg)}
  .deco-dots .dd-halo{stroke:var(--amber);fill:none;opacity:.45}
  .deco-dots .dd-end{stroke:none;fill:var(--amber)}

  /* ---------- composants d'écran partagés (ui-*) ---------- */
  /* écrans plein page au style de l'accueil et des archives (les .arch-* sont
     d'anciennes classes partagées par d'autres écrans). Les :hover sont dans
     @media(hover:hover) : sur écran tactile, le survol resterait collé après un appui. */
  .ui-content{position:relative;z-index:1;max-width:700px;margin:0 auto}
  .ui-topbar{display:flex;align-items:center;height:44px}
  .ui-back{
    display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
    background:var(--surface2);border:1px solid var(--line2);border-radius:12px;
    color:var(--text);cursor:pointer;transition:.12s;
  }
  .ui-head{margin-top:40px}
  .ui-head.is-compact{margin-top:24px}
  .ui-title{font-family:'Anton';font-size:32px;font-weight:400;line-height:1.15;letter-spacing:.5px}
  .ui-head.is-compact .ui-title{font-size:30px}
  .ui-kicker{margin:0 0 6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
  .ui-subtitle{margin-top:4px;font-size:13px;color:var(--muted)}
  .ui-content > .deco-dots{margin:20px 0 22px}
  /* intertitre de section : texte puis filet sur le reste de la ligne */
  .ui-section{
    display:flex;align-items:center;gap:12px;margin:20px 0 12px;
    font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  }
  .ui-section:first-child{margin-top:0}
  .ui-section::after{content:"";flex:1;height:1px;background:var(--line)}
  /* carte : zone d'ouverture (pavé + nom + chevron), filet, corbeille */
  .ui-card + .ui-card{margin-top:10px}
  .ui-card{
    display:flex;align-items:stretch;overflow:hidden;
    background:var(--surface);border:1px solid var(--line);border-radius:16px;
  }
  .ui-card-open{
    flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:12px 6px 12px 12px;
    background:transparent;border:0;color:var(--text);text-align:left;cursor:pointer;
    font-family:inherit;-webkit-tap-highlight-color:transparent;
  }
  .ui-card-open:active{background:var(--surface2)}
  .ui-card-open:focus-visible,.ui-card-del:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
  .ui-pad{
    flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:58px;height:64px;border-radius:12px;background:var(--surface2);border:1px solid var(--line2);
  }
  /* Lalezar a une ligne de base haute (vide sous les chiffres) : la marge basse
     négative et le padding-top recentrent chiffres + mois à l'œil dans le pavé */
  .ui-pad-big{font-family:'Lalezar';font-size:30px;line-height:1;padding-top:2px;margin-bottom:-4px;color:var(--amber)}
  .ui-pad-code{font-family:'Lalezar';font-size:22px;line-height:1;padding-top:4px;color:var(--amber)} /* variante pour un code (« U15 ») */
  .ui-pad-small{font-size:11px;font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
  .ui-card-name{flex:1;min-width:0;font-family:'Anton';font-size:19px;font-weight:400;line-height:1.2;letter-spacing:.5px;overflow-wrap:anywhere}
  .ui-card-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px} /* nom + méta */
  .ui-card-meta{font-size:13px;color:var(--muted)}
  .ui-chev{flex:none;color:var(--amber)}
  .ui-card-sep{flex:none;width:1px;margin:16px 0;background:var(--line)}
  .ui-card-del{
    flex:none;display:flex;align-items:center;justify-content:center;width:52px;padding:0;
    background:transparent;border:0;color:var(--muted);cursor:pointer;transition:.12s;
    -webkit-tap-highlight-color:transparent;
  }
  .ui-card-del:focus-visible{color:var(--red)}
  /* formulaires */
  .ui-label{display:block;margin:0 0 6px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
  .ui-input,.ui-select,.ui-num{
    width:100%;height:48px;box-sizing:border-box;padding:0 14px;
    background:var(--surface);border:1px solid var(--line2);border-radius:12px;
    color:var(--text);font-size:15px;font-family:inherit;
  }
  .ui-input:focus,.ui-select:focus,.ui-num:focus{outline:none;border-color:var(--amber)}
  .ui-select{
    -webkit-appearance:none;appearance:none;padding-right:36px;
    background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366B8EA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6l6 -6'/></svg>") no-repeat right 12px center/16px 16px;
  }
  .ui-num{width:56px;padding:0;text-align:center;font-family:'Anton';font-size:19px;color:var(--amber)}
  /* boutons */
  .ui-btn-primary{
    display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:62px;
    background:var(--amber);border:none;border-radius:14px;color:#00225B;
    font-family:'Anton';font-size:22px;letter-spacing:.5px;cursor:pointer;
  }
  .ui-btn-primary svg{flex:none}
  .ui-btn-dashed,.ui-btn-outline{
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;
    background:transparent;border:1.5px dashed var(--line2);border-radius:12px;color:var(--text);
    font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  }
  .ui-btn-outline{border:1px solid var(--line2)}
  .ui-btn-dashed svg,.ui-btn-outline svg{flex:none;color:var(--amber)}
  .ui-icon-btn{
    display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
    background:transparent;border:1px solid var(--line2);border-radius:10px;
    color:var(--muted);cursor:pointer;transition:.12s;
  }
  .ui-icon-btn.is-accent{color:var(--amber)}
  .ui-icon-btn.is-danger:focus-visible{color:var(--red)}
  /* barre d'actions collée en bas pendant le défilement (écran à padding latéral 20px) */
  .ui-actions{
    position:sticky;bottom:0;z-index:2;margin:auto -20px 0;
    padding:14px 20px max(24px, env(safe-area-inset-bottom));
    background:var(--bg);border-top:1px solid var(--line);
    display:flex;flex-direction:column;gap:10px;
  }
  .ui-note{
    display:flex;gap:10px;padding:12px;
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    font-size:13px;line-height:1.45;color:var(--muted);
  }
  .ui-note svg{flex:none;color:var(--amber)}
  @media(hover:hover){
    .ui-back:hover{border-color:var(--amber-dim);color:var(--amber)}
    .ui-card-del:hover{color:var(--red)}
    .ui-icon-btn:hover{border-color:var(--amber-dim)}
    .ui-icon-btn.is-danger:hover{color:var(--red)}
  }

  /* ---------- écran d'accueil ---------- */
  #home-screen{
    position:fixed;inset:0;z-index:600;background:var(--bg);
    display:flex;flex-direction:column;align-items:center;padding:64px 24px 32px;overflow-y:auto;
  }
  #home-screen.hidden{display:none}
  .home-login-area{position:absolute;top:calc(20px + env(safe-area-inset-top,0px));right:calc(20px + env(safe-area-inset-right,0px))}
  #home-screen .hamburger-btn{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center}
  .home-content{
    position:relative;z-index:1;
    display:flex;flex-direction:column;flex:1 0 auto;width:100%;max-width:480px;
    padding-bottom:calc(60px + env(safe-area-inset-bottom,0px));  /* la barre (92 px) recouvre déjà les 32 px de marge basse de #home-screen */
  }
  .home-hero{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:22px;padding-bottom:0;
  }
  /* le logo seul, centré dans l'espace au-dessus des points reliés */
  .home-logo-frame{
    flex:none;width:auto;height:auto;max-width:100%;
    display:flex;align-items:center;justify-content:center;
  }
  .home-logo{width:auto;height:clamp(150px,34vh,270px);max-width:100%;object-fit:contain}
  /* étoiles filantes décoratives (CSS pur) : une toutes les 2 s, cycle de 8 s, 2 s visibles chacune.
     Départ en % du conteneur ; trajet en cqmin (l'angle reste exact à tout format d'écran).
     Seuls transform et opacity sont animés ; display:none sur l'accueil suspend tout. */
  .home-stars{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;container-type:size}
  .home-star{position:absolute;width:0;height:0;opacity:0}
  .home-star::before{ /* traînée : 44 × 4 px, qui s'efface vers l'arrière */
    content:"";position:absolute;left:0;top:-2px;width:44px;height:4px;border-radius:2px;
    background:linear-gradient(90deg,transparent,var(--amber));
    transform-origin:0 50%;transform:rotate(var(--a));
  }
  .home-star::after{ /* tête : point de 6 px avec halo, en bout de traînée */
    content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;
    background:var(--amber);box-shadow:0 0 8px 2px color-mix(in srgb,var(--amber) 55%,transparent);
    transform:rotate(var(--a)) translateX(41px);
  }
  .home-star-a{left:8%; top:22%;--a:31deg;  animation:star-a 8s linear 0s infinite}
  .home-star-b{left:92%;top:30%;--a:147deg; animation:star-b 8s linear 2s infinite}
  .home-star-c{left:6%; top:62%;--a:-29deg; animation:star-c 8s linear 4s infinite}
  .home-star-d{left:94%;top:66%;--a:213deg; animation:star-d 8s linear 6s infinite}
  @keyframes star-a{0%{opacity:0;transform:translate(0,0)}4%{opacity:1}20%{opacity:1}25%,100%{opacity:0;transform:translate(60cqmin,36cqmin)}}
  @keyframes star-b{0%{opacity:0;transform:translate(0,0)}4%{opacity:1}20%{opacity:1}25%,100%{opacity:0;transform:translate(-59cqmin,38cqmin)}}
  @keyframes star-c{0%{opacity:0;transform:translate(0,0)}4%{opacity:1}20%{opacity:1}25%,100%{opacity:0;transform:translate(61cqmin,-34cqmin)}}
  @keyframes star-d{0%{opacity:0;transform:translate(0,0)}4%{opacity:1}20%{opacity:1}25%,100%{opacity:0;transform:translate(-59cqmin,-38cqmin)}}
  @media (prefers-reduced-motion:reduce){ .home-stars{display:none} }
  /* barre du bas : 5 colonnes égales (2 raccourcis · bouton rond · 2 raccourcis).
     position:fixed (et non absolute) : #home-screen défile (overflow-y:auto), la barre doit rester en bas.
     z-index 2 : au-dessus des étoiles filantes (0) et du contenu (1). Masquée avec l'accueil (display:none). */
  .home-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:2;
    height:calc(92px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);
    display:grid;grid-template-columns:repeat(5,1fr);
    background:var(--bg2);border-top:1px solid var(--line);
  }
  .home-slot{position:relative;min-width:0;display:flex;align-items:center;justify-content:center}
  .home-shortcut{
    width:100%;height:100%;min-height:56px;padding:0 2px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    background:transparent;border:0;border-radius:12px;color:var(--muted);cursor:pointer;
    font-family:inherit;-webkit-tap-highlight-color:transparent;
  }
  .home-shortcut svg{flex:none;color:var(--amber)}
  .home-shortcut-label{
    max-width:100%;font-size:11px;font-weight:600;line-height:1.2;text-align:center;
    overflow-wrap:normal;word-break:normal;hyphens:none;
  }
  .home-shortcut:active{background:var(--surface2)}
  .home-shortcut:focus-visible,.home-go:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  /* bouton rond : remonté de 38 px au-dessus de la barre ; le libellé est posé sous le disque */
  .home-go{
    position:absolute;top:-38px;left:calc(50% - 38px);width:76px;height:76px;
    display:flex;align-items:center;justify-content:center;
    background:var(--amber);border:5px solid var(--bg);border-radius:50%;
    color:#00225B;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;
    animation:home-go-breathe 2.6s ease-in-out infinite,home-go-halo 2.6s ease-out infinite;
  }
  .home-go-txt{font-size:24px;font-weight:800;line-height:1}
  .home-go > svg{display:none}
  .home-go-label{
    position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);
    font-size:10px;font-weight:800;letter-spacing:.1em;line-height:1;white-space:nowrap;color:var(--amber);
  }
  /* reprise d'un match : disque sombre, contour azur, icône play (le « GO » disparaît) */
  .home-go[data-mode="resume"]{
    background:var(--surface2);border:2px solid var(--amber);color:var(--amber);
    animation:home-go-breathe 2.6s ease-in-out infinite;
  }
  .home-go[data-mode="resume"] .home-go-txt{display:none}
  .home-go[data-mode="resume"] > svg{display:block}
  @keyframes home-go-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
  @keyframes home-go-halo{
    0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--amber) 55%,transparent)}
    70%,100%{box-shadow:0 0 0 18px transparent}
  }
  @media (prefers-reduced-motion:reduce){ .home-go,.home-go[data-mode="resume"]{animation:none} }
  @media(hover:hover){ .home-shortcut:hover{color:var(--text)} }
  /* verrou anti double-appui (cf. lockHome) : coupe tous les appuis 400 ms */
  html.home-lock body{pointer-events:none}
  /* petits écrans : tout tient sans défilement à 360×640 */
  @media(max-height:720px){
    .home-logo-frame{width:auto;height:auto}
    .home-hero{padding-bottom:0;gap:14px}
  }
  .brand-header img{cursor:pointer}

  /* ---------- hamburger button ---------- */
  .hamburger-btn{
    background:var(--surface2);border:1px solid var(--line2);color:var(--text);
    border-radius:10px;padding:9px 14px;cursor:pointer;font-size:22px;line-height:1;
    flex:none;transition:.12s;
  }
  .hamburger-btn:hover{border-color:var(--amber-dim);color:var(--amber)}

  /* ---------- menu overlay + panneau latéral ---------- */
  .menu-overlay{position:fixed;inset:0;z-index:700;background:rgba(10,14,22,.6)}
  .menu-overlay.hidden{display:none}
  .hamburger-panel{
    position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);
    z-index:710;background:var(--bg2);border-left:1px solid var(--line);
    padding:20px 16px 24px;overflow-y:auto;overflow-x:hidden;
    display:flex;flex-direction:column;gap:2px;
    transform:translateX(100%);transition:transform .25s ease;
  }
  .hamburger-panel.open{transform:translateX(0)}
  .hmenu-head{display:flex;align-items:center;justify-content:space-between;flex:none;height:52px}
  .hmenu-logo{height:52px;width:auto;min-width:0;max-width:100%;object-fit:contain}
  .hamburger-close{
    flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
    background:var(--surface2);border:1px solid var(--line2);border-radius:12px;
    color:var(--text);cursor:pointer;transition:.12s;
  }
  .hmenu-section-label{
    display:flex;align-items:center;gap:10px;margin:22px 4px 6px;
    font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  }
  .hmenu-section-label::after{content:"";flex:1;height:1px;background:var(--line)}
  .hmenu-item{
    display:flex;align-items:center;gap:14px;flex:none;width:100%;height:48px;padding:0 8px;
    background:transparent;border:none;border-radius:12px;
    color:var(--text);font-family:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:.12s;
  }
  .hmenu-item:active{background:var(--surface)}
  .hmenu-item:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
  .hmenu-ico{
    flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;
    border-radius:10px;background:var(--surface2);color:var(--amber);
  }
  .hmenu-item.hmenu-danger,.hmenu-danger .hmenu-ico{color:var(--red)}
  @media(hover:hover){
    .hamburger-close:hover{border-color:var(--amber-dim)}
    .hmenu-item:hover{background:var(--surface)}
  }

  /* ---------- pages internes ---------- */
  .internal-page{position:fixed;inset:0;z-index:720;background:var(--bg);overflow-y:auto;padding:20px 20px 32px}
  .internal-page.hidden{display:none}
  #internal-page .deco-dots{margin:18px 0 20px}
  /* écran Paramètres : raccourcis de l'accueil (cartes .ui-card, boutons .ui-icon-btn) */
  .settings-count{order:1}   /* le compteur passe après le filet de .ui-section */
  .internal-body .settings-help{margin:0 0 16px;font-size:14px;line-height:1.5}
  .internal-body .settings-empty,.internal-body .settings-full{margin:0 0 12px;font-size:14px;line-height:1.5}
  .settings-main{flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:12px 6px 12px 12px}
  .settings-card .ui-card-name{display:flex;align-items:center;gap:10px;color:var(--text)}
  .settings-card .ui-card-name svg{flex:none;color:var(--amber)}
  .settings-card .ui-icon-btn{flex:none;align-self:center;margin:0 12px 0 6px}
  .settings-card .ui-icon-btn[aria-pressed="true"]{background:color-mix(in srgb,var(--amber) 15%,transparent);border-color:var(--amber)}
  .settings-card .ui-icon-btn:disabled{opacity:.4;cursor:not-allowed}
  .settings-card .ui-icon-btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  @media(hover:hover){ .settings-card .ui-icon-btn:disabled:hover{border-color:var(--line2)} }
  /* écran « Stockage vidéo » (même classe .internal-page) */
  .vs-summary{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
  .vs-summary[hidden]{display:none}
  .vs-summary-head{display:flex;align-items:baseline;justify-content:space-between}
  .vs-summary-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
  .vs-summary-count{font-size:13px;color:var(--muted)}
  .vs-summary-total{margin:6px 0 12px;padding-top:6px;font-family:'Lalezar';font-size:34px;line-height:1;color:var(--amber)}
  .vs-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
  .vs-bar-fill{height:100%;background:var(--amber)}
  .vs-summary-line{margin:8px 0 0;font-size:13px;color:var(--muted)}
  .vs-persist{display:flex;gap:8px;margin:12px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
  .vs-persist svg{flex:none;margin-top:1px}
  .vs-persist.is-ok svg{color:var(--green)}
  .vs-persist.is-warn svg{color:var(--warn)}
  #video-storage-panel .ui-section{margin:22px 0 12px}
  .vs-card-main{flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding:12px 6px 12px 12px}
  .vs-pad-ico{display:flex;color:var(--amber)}
  /* page Jetons (préfixe .internal-body : plus fort que .internal-body p) */
  .token-card{padding:20px;background:rgba(102,184,234,.1);border:1px solid var(--amber);border-radius:16px}
  .internal-body .token-kicker{margin:0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--amber)}
  .internal-body .token-big{margin:8px 0 0;font-family:'Anton';font-size:34px;line-height:1.1;color:var(--text)}
  .internal-body .token-text{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--text)}
  .internal-body .token-note{margin:20px 2px 0;font-size:15px;line-height:1.6;color:var(--muted)}
  .internal-body{font-size:15px;color:var(--muted);line-height:1.7;max-width:640px}
  .internal-body p{margin-bottom:12px}
  .help-schema{width:100%;height:auto;max-width:700px;display:block;margin:16px auto 0}
  .help-video-wrap{width:85%;max-width:320px;margin:0 auto 20px;}
  .help-video-ratio{position:relative;width:100%;padding-bottom:177.78%;overflow:hidden;border-radius:14px;background:#000}
  .help-video-ratio iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
  @media (min-width:640px){ .help-video-wrap{width:320px;} }

  /* ---------- formulaire de contact ---------- */
  .contact-form{display:flex;flex-direction:column}
  .contact-form .ui-label{margin-top:16px}
  .contact-form .ui-label:first-child{margin-top:0}
  .contact-message{height:auto;min-height:140px;padding:12px 14px;line-height:1.5;resize:vertical}
  .contact-hint{margin-top:14px}
  .contact-error{margin-top:14px}
  .contact-submit{margin-top:20px}
  .contact-submit:disabled{opacity:.55}
  .contact-error{
    color:var(--red);font-size:13.5px;line-height:1.6;
    background:rgba(255,93,108,.08);border:1px solid rgba(255,93,108,.35);
    border-radius:9px;padding:10px 12px;
  }

  /* ---------- modales (story individuelle) ---------- */
  .card-modal-overlay{
    position:fixed;inset:0;z-index:800;
    background:rgba(10,14,22,.96);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:16px;overflow-y:auto;
  }
  .card-modal-overlay.hidden{display:none}
  .card-modal-inner{
    display:flex;flex-direction:column;align-items:center;gap:14px;
    width:100%;max-width:360px;
  }
  .card-modal-title{
    font-family:'Anton';font-size:20px;font-weight:400;
    color:var(--text);text-align:center;letter-spacing:.5px;
  }
  .card-modal-preview{
    width:100%;border-radius:12px;overflow:hidden;
    box-shadow:0 8px 32px rgba(0,0,0,.7);
  }
  .card-modal-preview img{display:block;width:100%;height:auto}
  .card-modal-btns{display:flex;gap:10px;width:100%}
  .card-modal-btn{
    flex:1;border-radius:10px;padding:13px;cursor:pointer;
    font-family:inherit;font-size:14px;font-weight:600;
    border:1px solid var(--line2);background:var(--surface2);color:var(--text);transition:.12s;
  }
  .card-modal-btn:hover{border-color:var(--amber-dim)}
  .card-modal-btn.primary{background:rgba(102,184,234,.15);border-color:var(--amber-dim);color:var(--amber)}
  .card-modal-close{
    background:none;border:1px solid var(--line2);color:var(--muted);
    border-radius:8px;padding:8px 24px;cursor:pointer;font-family:inherit;font-size:13px;transition:.12s;
  }
  .card-modal-close:hover{color:var(--text);border-color:var(--amber-dim)}

  /* ---------- story habillée (match archivé) ---------- */
  /* liste « Stories à partager » d'un match archivé : une ligne cliquable par joueur */
  #archive-section-stories .deco-dots{margin:18px 0}
  .story-list{display:flex;flex-direction:column;gap:8px}
  .story-item{
    display:flex;align-items:center;gap:12px;width:100%;height:60px;padding:0 12px 0 8px;
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    color:var(--text);text-align:left;font-family:inherit;cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:.12s;
  }
  .story-item:active{background:var(--surface2)}
  .story-item:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  .story-item:disabled{opacity:.6;cursor:wait}
  .story-item-num{
    flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    border-radius:10px;background:var(--surface2);border:1px solid var(--line2);
    font-family:'Anton';font-size:18px;color:var(--amber);
  }
  .story-item-name{flex:1;min-width:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .story-item-go{flex:none;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--amber)}
  @media(hover:hover){
    .story-item:hover{border-color:var(--amber-dim)}
  }
  .story-fmt-switch{display:flex;gap:8px;width:100%}
  .story-fmt-btn{
    flex:1;border-radius:9px;padding:9px;cursor:pointer;
    font-family:inherit;font-size:13px;font-weight:600;
    border:1px solid var(--line2);background:var(--surface2);color:var(--muted);transition:.12s;
  }
  .story-fmt-btn.active{background:rgba(102,184,234,.15);border-color:var(--amber-dim);color:var(--amber)}

  /* ---------- fenêtre STORY : tout doit tenir dans l'écran, sans défilement ----------
     Entièrement limitée à #story-modal. Grille : titre, format, aperçu (prend la
     hauteur restante, image entière), Enregistrer, aide, Fermer. En paysage bas,
     l'aperçu passe à gauche et les commandes en colonne à droite (comme le lecteur
     de clips). Boutons : composants partagés ui-btn-primary / ui-btn-outline. */
  #story-modal{
    position:fixed;inset:0;z-index:800;background:#06090f;
    display:flex;align-items:center;justify-content:center;
    padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(12px + env(safe-area-inset-bottom,0px));
  }
  #story-modal:focus{outline:none}
  #story-modal.hidden{display:none}
  #story-modal .story-panel{
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto;
    grid-template-areas:"head" "fmt" "img" "save" "hint" "close";
    gap:10px;width:100%;max-width:400px;height:100%;
  }
  #story-modal .story-title{
    grid-area:head;margin:0;text-align:center;
    font-family:'Anton';font-size:22px;font-weight:400;letter-spacing:.4px;line-height:1.4;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  #story-modal .story-fmt-switch{grid-area:fmt}
  #story-modal .story-fmt-btn{height:44px;padding:0 6px;font-size:14px}
  #story-modal .story-fmt-btn:focus-visible,
  #story-modal .ui-btn-primary:focus-visible,
  #story-modal .ui-btn-outline:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
  #story-modal .story-preview{
    grid-area:img;min-height:0;min-width:0;
    display:flex;align-items:center;justify-content:center;
  }
  #story-modal .story-preview img{
    display:block;width:auto;height:auto;max-width:100%;max-height:100%;
    object-fit:contain;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.7);
  }
  #story-modal .ui-btn-primary{grid-area:save;height:48px;font-size:18px}
  #story-modal .ui-btn-primary span{min-width:0}
  #story-modal .story-hint{grid-area:hint;margin:0}
  #story-modal .ui-btn-outline{grid-area:close;height:48px;background:var(--surface2)}
  #story-modal .ui-btn-outline span{min-width:0}
  @media (orientation:landscape) and (max-height:600px){
    #story-modal{padding:calc(8px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px))}
    #story-modal .story-panel{
      max-width:none;grid-template-columns:minmax(0,1fr) 268px;grid-template-rows:auto auto auto auto minmax(0,1fr);
      grid-template-areas:"img head" "img fmt" "img save" "img hint" "img close";gap:8px 14px;
    }
    #story-modal .story-title{font-size:19px}
    #story-modal .ui-btn-outline{align-self:start}
    #story-modal .story-hint{font-size:11.5px;line-height:1.4}
  }
  @media(hover:hover){
    #story-modal .story-fmt-btn:not(.active):hover{border-color:var(--amber-dim);color:var(--text)}
    #story-modal .ui-btn-outline:hover{border-color:var(--amber-dim)}
  }

  /* ---------- zone haute figée : titre + caméra ---------- */
  #match-top-fixed{
    position:sticky;top:0;z-index:190;
    background:var(--bg);padding-top:2px;padding-bottom:8px;
  }

  .cam-zone{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:40vh}
  @media(orientation:landscape){.cam-zone{height:22vh;min-height:170px}}
  .cam-zone-video{
    position:relative;border-radius:12px;overflow:hidden;
    border:1px solid var(--line2);background:#000;min-height:0;
  }
  #cam-preview{width:100%;height:100%;object-fit:cover;display:block}
  #cam-preview.hidden{display:none}
  .cam-placeholder{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:6px;background:var(--surface);color:var(--muted);
    font-size:12px;text-align:center;cursor:pointer;line-height:1.5;transition:.12s;
  }
  .cam-placeholder:hover{color:var(--amber)}
  .cam-placeholder.hidden{display:none}
  .cam-zone-controls{display:flex;flex-direction:column;gap:8px;justify-content:center;min-height:0}
  .cam-status-text{font-size:10px;color:var(--muted);line-height:1.4}

  /* ============================================================================
     MODE PLEIN ÉCRAN CAMÉRA (#cam-fullscreen)
     ----------------------------------------------------------------------------
     Volontairement un enfant DIRECT de <body> (pas de #match-top-fixed / .wrap) :
     ces ancêtres posent position:sticky+z-index (cf. #match-top-fixed, z190),
     ce qui crée un contexte d'empilement propre — un descendant position:fixed
     y resterait plafonné à ce z190 et se ferait recouvrir par #express-panel
     (z200, un FRÈRE de .wrap dans le document). En restant au niveau racine du
     <body>, #cam-fullscreen peut se poser franchement au-dessus de toute
     l'interface de match (z260 : > #match-top-fixed 190 et #express-panel 200)
     tout en restant SOUS les fenêtres de qualification/#exp-toast/menus
     (.modal-overlay 500, #exp-toast 300, #setup-overlay 400, etc.), qui doivent
     pouvoir s'ouvrir PAR-DESSUS lui sans rien changer à leur propre z-index.
     Le <video> ici présent est un SECOND élément vidéo qui reçoit le MÊME
     objet MediaStream que #cam-preview (cf. syncCamfsUI plus bas dans le
     script) — aucun nouvel appel à getUserMedia, aucun MediaRecorder recréé :
     un MediaStream peut alimenter plusieurs <video> à la fois, et
     l'enregistrement (MediaRecorder + tampon glissant) ne dépend d'aucun
     élément <video>, seulement du flux caméra lui-même. */
  #cam-fullscreen{position:fixed;inset:0;z-index:260;background:#000;overflow:hidden}
  #cam-fullscreen.hidden{display:none}
  #cam-fullscreen-preview{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:contain; /* image COMPLÈTE, sans recadrage ni déformation */
    background:#000;display:block;
  }
  .camfs-placeholder{
    position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:8px;color:var(--muted);font-size:13px;text-align:center;
    padding:0 30px;
  }
  .camfs-placeholder.hidden{display:none}

  /* ---------- plein écran caméra : image dégagée + bande de commandes (maquettes validées) ----------
     L'image n'est jamais recouverte par la bande : seuls les trois boutons
     du haut et, en portrait, le zoom sont posés dessus.
     Disposition : #cam-fullscreen est une boîte flex, en colonne en
     portrait (image en haut, bande en bas) et en ligne en paysage (image à
     gauche, rail de 168 px à droite). Dans la bande : une grille en
     portrait, une colonne flex en paysage. Aucun JS : la bascule
     d'orientation suit les media queries. */
  #cam-fullscreen{display:flex;flex-direction:column}
  .camfs-stage{position:relative;flex:1 1 auto;min-width:0;min-height:0;overflow:hidden;background:#000}
  #cam-fullscreen-preview{object-position:50% 0}
  .camfs-placeholder{gap:8px;font-size:13px;color:var(--muted)}
  .camfs-placeholder svg{flex:none;color:var(--amber)}

  /* boutons du haut, posés sur l'image : Retour, REC, Arrêter / Démarrer */
  .camfs-overlay-top{
    position:absolute;z-index:2;
    top:calc(12px + env(safe-area-inset-top,0px));
    left:calc(12px + env(safe-area-inset-left,0px));
    right:calc(12px + env(safe-area-inset-right,0px));
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  }
  .camfs-pill{
    display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:22px;
    background:rgba(10,14,22,.78);border:none;color:var(--text);
    font-family:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .camfs-pill svg{flex:none}
  .camfs-pill:disabled{opacity:.5;cursor:default}
  .camfs-pill-back{grid-column:1;justify-self:start}
  .camfs-rec{
    grid-column:2;justify-self:center;display:none;align-items:center;gap:6px;height:28px;padding:0 10px;
    border-radius:14px;background:rgba(5,7,11,.6);color:var(--text);
    font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1;
  }
  .camfs-rec::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--red)}
  #cam-fullscreen:has(#camfsToggleBtn.running) .camfs-rec{display:inline-flex}
  .camfs-pill-toggle{grid-column:3;justify-self:end}
  .camfs-pill-toggle .camfs-ico-start{color:var(--amber)}
  .camfs-pill-toggle .camfs-ico-stop{display:none;color:var(--red)}
  .camfs-pill-toggle.running .camfs-ico-start{display:none}
  .camfs-pill-toggle.running .camfs-ico-stop{display:block}

  /* bande de commandes — portrait : NOUVELLE ACTION sur toute la largeur,
     puis Annuler · Corriger · Saisies à parts égales (Saisies seul, pleine
     largeur, avant la première action) */
  .camfs-bar{
    position:relative;flex:none;background:var(--bg2);border-top:1px solid var(--line);
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
    padding:10px calc(16px + env(safe-area-inset-right,0px)) max(10px, env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left,0px));
  }
  .camfs-action{
    grid-column:1 / -1;grid-row:1;display:flex;align-items:center;justify-content:center;gap:12px;
    height:80px;padding:0 12px;border:none;border-radius:18px;background:var(--amber);color:#00225B;
    font-family:'Anton';font-size:26px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
    cursor:pointer;transition:transform .1s,filter .1s;-webkit-tap-highlight-color:transparent;user-select:none;
  }
  .camfs-action svg{flex:none}
  .camfs-action:active{transform:scale(.98);filter:brightness(.92)}
  .camfs-last{display:contents}
  .camfs-last.hidden{display:none}
  .camfs-ctrl{
    display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;height:44px;padding:0 8px;
    background:transparent;border:1px solid var(--line2);border-radius:12px;color:var(--text);
    font-family:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;
  }
  .camfs-ctrl svg{flex:none;color:var(--amber)}
  .camfs-ctrl.camfs-ctrl-undo svg{color:var(--muted)}
  .camfs-ctrl:disabled{opacity:.4;cursor:default;pointer-events:none}
  #camfsUndoLastBtn{grid-row:2;grid-column:1}
  #camfsFixLastPlayerBtn{grid-row:2;grid-column:2}
  #camfsAllEntriesBtn{grid-row:2;grid-column:3}
  .camfs-bar:has(#camfs-lastaction-toolbar.hidden) #camfsAllEntriesBtn{grid-column:1 / -1}

  /* zoom − valeur + : en portrait, posé sur l'image en bas à droite
     (12 px au-dessus du haut de la bande) */
  .camfs-zoom-group{
    position:absolute;right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(100% + 12px);
    display:flex;align-items:center;height:44px;border-radius:22px;background:rgba(10,14,22,.78);
  }
  .camfs-zoom-group.hidden{display:none}
  .camfs-zoom-step{
    flex:none;width:44px;height:100%;padding:0;display:flex;align-items:center;justify-content:center;
    background:transparent;border:none;border-radius:22px;color:var(--amber);cursor:pointer;
  }
  .camfs-zoom-step:disabled{opacity:.4;cursor:default}
  .camfs-zoom-val{flex:none;min-width:48px;text-align:center;font-size:13px;font-weight:700;color:var(--text)}

  /* paysage : image à gauche (calée en haut à gauche), rail à droite ;
     de haut en bas : Saisies, NOUVELLE ACTION (prend le reste), Annuler,
     Corriger, zoom. Le rail ne défile jamais. */
  @media(orientation:landscape){
    #cam-fullscreen{flex-direction:row}
    #cam-fullscreen-preview{object-position:0 0}
    .camfs-overlay-top{display:flex;justify-content:flex-start;right:auto}
    .camfs-bar{
      width:calc(168px + env(safe-area-inset-right,0px));border-top:none;border-left:1px solid var(--line);
      display:flex;flex-direction:column;gap:8px;overflow:hidden;
      padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) 10px;
    }
    .camfs-action{
      flex:1 1 auto;min-height:64px;height:auto;flex-direction:column;gap:4px;padding:8px;
      font-size:22px;line-height:1.1;white-space:normal;text-align:center;
    }
    .camfs-ctrl{flex:none;width:100%}
    /* Annuler et Corriger côte à côte (icône au-dessus du libellé) : le
       rail tient même à 746×273 (S25 dans Chrome, barres visibles) */
    .camfs-last{display:flex;flex-direction:row;gap:8px;flex:none}
    .camfs-last .camfs-ctrl{
      flex:1 1 0;width:auto;height:52px;flex-direction:column;gap:2px;padding:0 4px;font-size:12px;
    }
    .camfs-zoom-group{
      position:static;flex:none;width:100%;justify-content:space-between;
      background:transparent;border:1px solid var(--line2);border-radius:12px;
    }
  }
  /* paysage très bas (ex. 746×273 : S25 dans Chrome, barres visibles,
     Annuler + Corriger + zoom affichés) : NOUVELLE ACTION descend à ~89 px,
     trop peu pour l'icône + deux lignes (~96 px) ; l'icône s'efface,
     « NOUVELLE » / « ACTION » restent entiers. Dès 780×304, l'icône tient. */
  @media(orientation:landscape) and (max-height:290px){
    .camfs-action svg{display:none}
    .camfs-action{line-height:1}
  }

  /* ============================================================================
     INTERFACE DE MATCH EN DIRECT — DEUX ZONES FIGÉES, AUCUN DÉFILEMENT DE PAGE
     ----------------------------------------------------------------------------
     La feuille de stats + le journal sont sortis du flux (#match-offscreen).
     Il ne reste que DEUX zones qui se partagent la hauteur visible :
        • .wrap          = zone HAUTE  (barre de titre + caméra)
        • #express-panel = zone BASSE  (saisie express + NOUVELLE ACTION)
     Les deux sont en position:fixed => le <body> ne défile jamais. Si une zone
     manque de place sur un petit écran, elle défile DANS son propre cadre
     (overflow interne), la page globale reste figée.
     ============================================================================ */
  #match-offscreen{display:none !important}

  @media(orientation:portrait){
    html,body{height:100%;overflow:hidden}
    body{padding:0}

    /* --- ZONE HAUTE : barre de titre + caméra, figée sur le haut de l'écran --- */
    .wrap{
      position:fixed; top:0; left:0; right:0;
      height:52vh; height:52dvh;
      max-width:none; margin:0;
      padding:8px 12px 6px;
      display:flex; flex-direction:column;
      overflow-y:auto; overflow-x:hidden;
      background:var(--bg); z-index:190;
    }
    .brand-header{flex:none; padding:0 0 6px; margin:0}
    #match-top-fixed{
      position:static; z-index:auto;
      flex:1 1 auto; min-height:0;
      display:flex; flex-direction:column;
      padding:0;
    }
    .cam-zone{flex:1 1 auto; min-height:190px; height:auto}

    /* --- ZONE BASSE : saisie express, figée sur le bas de l'écran --- */
    #express-panel{height:48vh; height:48dvh}
    body{padding-bottom:0}
    #exp-toast{bottom:calc(48dvh + 10px); top:auto}
  }

  @media(orientation:landscape){
    /* La feuille de stats étant retirée, la colonne gauche (titre + caméra)
       tient sans défilement. On verrouille le <body> et, au cas où l'écran
       serait très bas, c'est .wrap qui défile dans son cadre — pas la page.
       #express-panel reste le rail vertical de droite déjà défini plus haut. */
    html,body{overflow:hidden}
    .wrap{max-height:100vh; max-height:100dvh; overflow-y:auto; overflow-x:hidden}
    .brand-header{padding:8px 0 10px}
  }

  /* ---------- écran de match : saisie express (maquette validée) ----------
     Les hauteurs 52 / 48 dvh et le rail paysage à 34vw (plus haut) ne
     changent pas : seul l'habillage du panneau et de ses boutons est ici. */
  #express-panel{background:var(--bg2);border-top:1px solid var(--line);gap:10px;padding:14px 16px max(18px, env(safe-area-inset-bottom))}
  @media(orientation:portrait){
    #express-panel{border-radius:22px 22px 0 0}
  }
  @media(orientation:landscape){
    #express-panel{border-top:none;border-left:1px solid var(--line)}
  }
  #express-panel .exp-header{gap:12px}
  #express-panel .exp-title{flex:1;min-width:0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
  /* pastille d'état : en ::before, car setExpStatus() réécrit le textContent */
  #express-panel .exp-status{
    display:inline-flex;align-items:center;gap:6px;padding:0;border:none;border-radius:0;background:none;
    font-size:12px;font-weight:700;color:var(--green);
  }
  #express-panel .exp-status::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
  #express-panel .exp-status.armed{color:var(--amber);border:none;background:none}
  #express-panel .ui-btn-outline{flex-shrink:0;height:44px;padding:0 12px;font-size:14px;white-space:nowrap}
  #express-panel .ui-btn-outline:disabled{opacity:.4;cursor:default;pointer-events:none}
  #express-panel .new-action-btn{
    display:flex;align-items:center;justify-content:center;gap:12px;
    height:96px;padding:0 16px;border-radius:18px;font-size:28px;
    box-shadow:none;transition:transform .1s,filter .1s;
  }
  #express-panel .new-action-btn svg{flex:none}
  #express-panel .new-action-btn:active{transform:scale(.98);filter:brightness(.92);box-shadow:none}
  #express-panel .exp-lastaction-toolbar{gap:10px}
  #express-panel #undoLastBtn{flex:none;width:auto;padding:0 14px}
  #express-panel #undoLastBtn svg{color:var(--muted)}
  #express-panel #fixLastPlayerBtn{flex:1 1 0;min-width:0}
  @media(orientation:portrait) and (max-height:700px){
    #express-panel{gap:8px}
    #express-panel .new-action-btn{height:80px}
    #express-panel .ui-btn-outline{height:40px}
  }
  /* paysage (rail étroit) : NOUVELLE ACTION et « Corriger le joueur » peuvent
     passer sur deux lignes, centrés, sans jamais déborder */
  @media(orientation:landscape){
    #express-panel .new-action-btn{flex-direction:column;gap:4px;height:auto;min-height:96px;padding:10px 12px;text-align:center;line-height:1.1}
    #express-panel .new-action-btn span{min-width:0}
    #express-panel #fixLastPlayerBtn{height:auto;min-height:44px;padding:4px 10px;white-space:normal;line-height:1.2;text-align:center}
  }

  /* ---------- écran de match : en-tête, titre et caméra (maquette validée) ----------
     Pas de ligne « Match en cours · N actions » (le nombre est sur « Toutes
     les saisies »), pas de cadre autour de la zone caméra, logo à 40 px :
     autant de hauteur gardée pour l'aperçu caméra. */
  @media(orientation:portrait){
    .wrap{padding:8px 16px;--wrap-px:16px}
  }
  /* paysage : .wrap défile dans son cadre, qui doit tenir dans l'écran
     marges du body (18 px en haut et en bas) comprises, sinon son bas
     passe sous le bord sans pouvoir être atteint */
  @media(orientation:landscape){
    .wrap{max-height:calc(100vh - 36px); max-height:calc(100dvh - 36px)}
  }
  /* séparateur sous l'en-tête : le trait va d'un bord à l'autre de la colonne
     (marge négative = retrait latéral de .wrap, 0 en paysage) */
  .brand-header{
    margin:0 calc(-1 * var(--wrap-px,0px)) 8px;
    padding-left:var(--wrap-px,0px);padding-right:var(--wrap-px,0px);padding-bottom:6px;
    border-bottom:1px solid var(--line);
  }
  .brand-header img{width:auto;height:40px;max-width:100%;margin:0}
  .brand-header .hamburger-btn{width:44px;height:44px;padding:0;display:flex;align-items:center;justify-content:center}

  .match-head{flex:none}
  .match-head .match-title-text{
    font-family:'Anton';font-weight:400;font-size:24px;line-height:1.15;color:var(--text);
    flex:none;white-space:normal;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  }
  .match-head-actions{display:flex;gap:10px;margin:10px 0 12px}
  .match-head-actions .ui-btn-outline{flex:1 1 0;min-width:0;height:44px;padding:0 8px;font-size:14px;white-space:nowrap}

  .cam-zone{gap:12px;grid-template-rows:minmax(0,1fr)}
  @media(orientation:portrait){
    .cam-zone{min-height:140px}
  }
  .cam-placeholder{gap:8px;font-size:13px;color:var(--text)}
  .cam-placeholder svg{flex:none;color:var(--amber)}
  .cam-rec{
    position:absolute;top:8px;left:8px;z-index:1;display:none;align-items:center;gap:6px;
    padding:4px 8px;border-radius:999px;background:rgba(5,7,11,.6);
    color:var(--text);font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1;
  }
  .cam-rec::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--red)}
  .cam-zone:has(#camStopBtn:not(:disabled)) .cam-rec{display:inline-flex}
  .cam-zone-controls{justify-content:flex-start;gap:10px;min-height:0;overflow-y:auto}
  .cam-zone-controls .ui-btn-outline{flex:none;height:44px;padding:0 10px;font-size:14px;white-space:nowrap}
  .cam-zone-controls .ui-btn-outline:disabled{opacity:.4;cursor:default}
  #camStartBtn{border-color:var(--amber)}
  #camStopBtn svg{color:var(--red)}
  /* un seul bouton Démarrer / Arrêter visible, sans JS : pendant la demande
     d'accès (les deux désactivés), Démarrer reste visible, grisé */
  #camStopBtn:disabled{display:none}
  .cam-zone-controls:has(#camStopBtn:not(:disabled)) #camStartBtn{display:none}
  .cam-zone-controls .cam-status-text{margin-top:auto;font-size:12px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}

  /* mention discrète sous « Enregistrer » (fenêtre de story) : l'action passe par
     la feuille de partage native, ce petit rappel indique quoi y choisir. */
  .cam-dl-hint{flex-basis:100%;width:100%;font-size:9.5px;line-height:1.4;color:var(--muted);opacity:.8;margin-top:-2px}

  /* ---------- gestion des équipes enregistrées (IndexedDB) ---------- */
  #teams-screen{position:fixed;inset:0;z-index:620;background:var(--bg);overflow-y:auto;padding:20px 20px 32px}
  #teams-screen.hidden{display:none}
  .teams-create{margin-top:16px;height:56px;border-radius:14px}
  .teams-note{margin:10px 2px 0;font-size:13px;color:var(--muted)}
  #team-form-overlay{position:fixed;inset:0;z-index:640;background:var(--bg);overflow-y:auto;padding:20px 20px 0}
  #team-form-overlay.hidden{display:none}
  /* page « Formulaire d'équipe » (composants ui-*) */
  .team-form-page{min-height:100%;display:flex;flex-direction:column} /* .ui-actions collée en bas même avec une liste courte */
  .team-form-page .ui-label{margin-top:16px}
  .team-form-page .ui-section{margin:22px 0 10px}
  .team-form-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,1fr);gap:10px}
  .team-form-grid .ui-select{padding:0 30px 0 12px;background-position:right 8px center}
  .ui-actions #team-form-warning{margin:0;min-height:0}
  .ui-actions #team-form-warning:empty{display:none}
  /* un joueur = une carte : vignette à gauche sur 2 lignes, numéro / prénom / croix
     en haut à droite, actions photo en bas à droite (uniquement sous #team-roster) */
  #team-roster{gap:8px;margin-bottom:0}
  #team-roster .team-player{
    display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px 10px;padding:8px;
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
  }
  #team-roster .player-photo-line{display:contents}
  #team-roster .rrow{grid-column:2;grid-row:1;gap:8px}
  #team-roster .pp-thumb{grid-column:1;grid-row:1 / span 2;width:42px;height:75px;border-radius:8px}
  #team-roster .pp-actions{grid-column:2;grid-row:2}
  #team-roster input{
    height:40px;padding:0 12px;border-radius:10px;
    background:var(--bg);border:1px solid var(--line2);font-size:15px;
  }
  #team-roster input:focus{border-color:var(--amber)}
  #team-roster input.rn{width:52px;padding:0;text-align:center;font-family:'Anton';font-size:18px;color:var(--amber)}
  #team-roster .rrow button{
    display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;
    background:none;border:1px solid var(--line);border-radius:10px;color:var(--muted);
  }
  #team-roster .rrow button:focus-visible{color:var(--red)}
  @media(hover:hover){
    #team-roster .rrow button:hover{color:var(--red)}
  }
  /* fenêtre « Choisir une équipe » : uniquement sous #team-pick-modal
     (.modal-card / .modal-btn sont partagés par les fenêtres de saisie du match) */
  #team-pick-modal .modal-card{border:1px solid var(--line2);border-radius:20px;padding:24px 20px 20px}
  #team-pick-modal .modal-card h3{font-size:24px}
  #team-pick-modal .modal-card p{font-size:14px;line-height:1.5;margin-bottom:18px}
  #team-pick-modal .team-pick-item{
    display:flex;align-items:center;gap:14px;width:100%;padding:10px;
    background:var(--surface2);border:1px solid var(--line2);border-radius:14px;
    color:var(--text);text-align:left;font-family:inherit;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  #team-pick-modal .team-pick-item:active{background:var(--line)}
  #team-pick-modal .team-pick-item:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
  #team-pick-modal .team-pick-item .ui-pad{background:var(--surface)}

  /* ---------- PHOTO INDIVIDUELLE DU JOUEUR (vivier — format story 9:16) ----------
     Purement additif. Rien ici n'est lu par la logique de match / capture /
     highlights : la photo vit uniquement dans le vivier de l'équipe (IndexedDB)
     et dans la copie de travail du formulaire d'équipe. */
  .team-player{display:flex;flex-direction:column;gap:6px}
  .player-photo-line{display:flex;align-items:center;gap:10px;padding:2px 0 6px 0}
  .pp-thumb{
    width:45px;height:80px;flex:none;border-radius:7px;overflow:hidden;
    background:var(--bg);border:1px solid var(--line2);
    display:block;object-fit:cover;
  }
  /* Placeholder neutre quand le joueur n'a pas (encore) de photo. Un fond par
     défaut sera fourni plus tard : cf. PlayerPhoto.DEFAULT_BG_PLACEHOLDER dans
     le script — c'est là qu'on le branchera (image de fond 9:16). */
  .pp-thumb.empty{
    display:grid;place-items:center;color:var(--muted2);font-size:18px;
    background:repeating-linear-gradient(135deg,var(--bg),var(--bg) 6px,var(--surface2) 6px,var(--surface2) 12px);
  }
  .pp-actions{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
  .pp-btn{
    background:var(--bg);border:1px solid var(--line2);color:var(--muted);
    border-radius:8px;padding:7px 10px;cursor:pointer;font-family:inherit;
    font-size:12px;white-space:nowrap;
  }
  .pp-btn:hover{color:var(--text);border-color:var(--amber)}
  .pp-btn.danger:hover{color:var(--red);border-color:var(--red)}
  /* formulaire d'équipe refondu : vignette vide et boutons photo (sous #team-roster) */
  #team-roster .pp-thumb.empty{
    background:transparent;border:1px dashed var(--line2);
    font-size:10px;font-weight:700;color:var(--muted);
  }
  #team-roster .pp-btn{
    display:flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 10px;
    background:transparent;border:1px solid var(--line2);border-radius:8px;
    color:var(--text);font-size:12px;font-weight:600;
  }
  #team-roster .pp-btn:not(.danger)::before{
    content:"";flex:none;width:14px;height:14px;background:var(--amber);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>") center/14px 14px no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 7h1a2 2 0 0 0 2 -2a1 1 0 0 1 1 -1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2'/><path d='M9 13a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/></svg>") center/14px 14px no-repeat;
  }
  @media(hover:hover){
    #team-roster .pp-btn:hover{border-color:var(--amber-dim)}
    #team-roster .pp-btn.danger:hover{color:var(--red);border-color:var(--red)}
  }

  /* Plein écran de prise de vue / import (au-dessus du formulaire d'équipe
     z-index 640, mais SOUS la modale confirm/alert maison z-index 2000). */
  #pp-overlay{position:fixed;inset:0;z-index:1000;background:#05070c;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;gap:14px;overflow:auto}
  #pp-overlay.hidden{display:none}
  #pp-overlay .pp-title{font-family:'Anton';font-size:18px;letter-spacing:.5px;color:var(--text);text-align:center}
  #pp-overlay .pp-sub{font-size:12px;color:var(--muted);text-align:center;max-width:340px;line-height:1.5}
  /* Cadre 9:16 : le média remplit ce cadre, un repère visuel matérialise le
     cadrage story. La caméra "voit" plus large, mais SEUL ce cadre est gardé.
     IMPORTANT : il faut une dimension DÉFINIE (height) pour que aspect-ratio
     calcule la largeur — sinon, tout le contenu étant en position:absolute,
     la boîte s'effondrait à 0 de large et l'aperçu paraissait "noir". */
  .pp-stage{
    position:relative;flex:none;
    /* Dimensions DÉFINIES en dur (9:16 exact : 36/64 = 0,5625) : ne dépend
       plus d'aspect-ratio pour éviter tout effondrement à 0 de large. */
    height:64vh;width:36vh;
    height:min(64vh, 78vw * 16 / 9);width:min(36vh, 78vw);
    max-width:92vw;aspect-ratio:9 / 16;
    background:#000;border-radius:12px;overflow:hidden;
  }
  .pp-stage video,.pp-stage canvas,.pp-stage img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
    background:#000;
  }
  /* Repère visuel du cadrage story : le stage EST déjà la zone 9:16 gardée
     (le média la remplit en object-fit:cover). Cadre + lignes des tiers pour
     aider au cadrage vertical. */
  .pp-frame-guide{
    position:absolute;inset:0;pointer-events:none;border-radius:12px;
    border:2px solid rgba(255,255,255,.85);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
  }
  .pp-frame-guide::before,.pp-frame-guide::after{
    content:'';position:absolute;left:8%;right:8%;height:1px;background:rgba(255,255,255,.35);
  }
  .pp-frame-guide::before{top:33.33%}
  .pp-frame-guide::after{top:66.66%}
  #pp-overlay .pp-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
  #pp-overlay .pp-cta{
    border-radius:10px;padding:12px 18px;cursor:pointer;font-family:inherit;
    font-size:14px;font-weight:600;border:1px solid var(--line2);
    background:var(--surface2);color:var(--text);
  }
  #pp-overlay .pp-cta.primary{background:var(--amber);border-color:var(--amber);color:#00225B;font-weight:700}
  #pp-overlay .pp-cta.ghost{background:transparent;color:var(--muted)}
  #pp-overlay .pp-cta:disabled{opacity:.5;cursor:default}