* { box-sizing: border-box; margin: 0; padding: 0; }

  /* ─── Palette formalisée (demande de Frederic, 2026-09-05) ───────────────
     L'app a en réalité 2 langages visuels distincts : un thème clair de type
     Bootstrap (écrans de jeu en direct / historique, voir body plus bas) et
     un thème sombre marine (statistiques, admin, modals). Plutôt que de tout
     ramener à un seul style (risqué sur un fichier de cette taille), on
     formalise chacun séparément en variables CSS -- premier pas : les 5
     modals sombres partagés (edit-endedat/-note/-scoresheet/-lieu/-evenement),
     qui répétaient déjà le même bloc de styles en dur mot pour mot. */
  :root {
    --dm-bg: #1a1a2e;
    --dm-border: #2a3555;
    --dm-input-bg: #0d0d1a;
    --dm-input-border: #3a4575;
    --dm-text: #e0e0ff;
    --dm-muted: #adb5bd;
    --dm-accent: #5dd8e0;
  }
  .dm-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,15,.88); z-index:9999; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(2px); }
  .dm-box { background:var(--dm-bg); border:1px solid var(--dm-border); border-radius:14px; padding:28px 32px; max-width:380px; width:100%; box-shadow:0 16px 40px rgba(0,0,0,0.5); animation:dm-pop .16s ease-out; }
  @keyframes dm-pop { from { opacity:0; transform:translateY(6px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } }
  .dm-box-wide { max-width:480px; }
  .dm-title { margin:0 0 20px; color:var(--dm-text); font-size:1rem; }
  .dm-label { font-size:0.72rem; color:var(--dm-muted); text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:5px; }
  .dm-input { width:100%; padding:10px 12px; background:var(--dm-input-bg); border:1px solid var(--dm-input-border); border-radius:8px; color:var(--dm-text); font-size:1rem; box-sizing:border-box; cursor:pointer; transition:border-color .15s ease, box-shadow .15s ease; }
  .dm-input:focus { outline:none; border-color:var(--dm-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--dm-accent) 20%, transparent); }
  .dm-actions { display:flex; gap:10px; margin-top:22px; justify-content:flex-end; }
  .dm-btn-cancel { padding:8px 18px; border-radius:8px; border:1px solid var(--dm-input-border); background:transparent; color:var(--dm-muted); cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease; }
  .dm-btn-cancel:hover { background:rgba(255,255,255,0.06); border-color:var(--dm-muted); color:var(--dm-text); }
  .dm-btn-save { padding:8px 18px; border-radius:8px; border:none; background:var(--dm-accent); color:var(--dm-input-bg); font-weight:700; cursor:pointer; transition:filter .15s ease, transform .1s ease; }
  .dm-btn-save:hover { filter:brightness(1.1); }
  .dm-btn-save:active { transform:scale(0.97); }

  /* Minuterie en pause : désactiver les contrôles de manche pour éviter de
     recommencer/modifier une manche en oubliant de reprendre la minuterie.
     Le bloc chrono (#game-left-col, incl. bouton Reprendre) reste actif. */
  body.timer-is-paused #game-right-col,
  body.timer-is-paused button[onclick^="startEditRound"] {
    pointer-events: none !important;
    opacity: 0.45;
    filter: grayscale(0.4);
    cursor: not-allowed;
  }

  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f0f2f5;
    color: #212529;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }

  h1 {
    font-size: 1.8rem;
    margin-bottom: 6px;
    color: #6F42C1;
    letter-spacing: 1px;
  }

  .subtitle {
    font-size: 0.85rem;
    color: #6c757d;
    margin-bottom: 24px;
  }

  /* ─── SETUP ─── */
  #setup {
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 4px 20px rgba(111,66,193,0.10);
  }

  /* Demande #54 (suite, 2026-07-08) : sur grand écran, #setup restait limité à 460px comme sur
     mobile — tout l'espace latéral disponible était perdu et le sommaire admin (nouveau, plus
     riche) forçait beaucoup de défilement vertical inutile. #game va déjà jusqu'à 720-900px
     (voir plus haut) ; #setup suit le même principe au-delà de 700px, et les blocs du sommaire
     admin qui étaient empilés (Connectés récemment / Activité récente) passent sur une seule
     rangée pour profiter de la largeur plutôt que de rester en colonne étroite. */
  @media (min-width: 700px) {
    #setup { max-width: 760px; }
    #dash-rank-tiles { grid-template-columns: repeat(5, 1fr) !important; }
  }

  .setup-title { font-size: 1.2rem; margin-bottom: 20px; color: #6F42C1; }

  .player-count-row {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
  }

  .count-btn {
    flex: 1;
    padding: 10px;
    border: 2px solid #dee2e6;
    background: #f8f9fa;
    color: #495057;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    transition: all .2s;
  }

  .count-btn.active {
    background: #6F42C1;
    color: #ffffff;
    border-color: #6F42C1;
  }

  /* :hover séparé de .active et limité aux appareils à pointeur réel (souris) -- demande de
     Frederic, 2026-10-03 : sur iPad, un tap déclenche :hover et celui-ci reste "collé" tant qu'on
     ne touche pas ailleurs (bug classique Safari tactile). Comme ce sélecteur partageait le même
     style que .active (ex. bouton "changement de paquet" du Neuf à 3), un joueur qu'on
     désélectionnait (toggle JS correct, classe .active bien retirée) restait visuellement
     surligné à cause du :hover resté actif -- donnant l'impression qu'il était impossible de
     déselectionner, alors que l'état réel était correct. */
  @media (hover: hover) and (pointer: fine) {
    .count-btn:hover {
      background: #6F42C1;
      color: #ffffff;
      border-color: #6F42C1;
    }
  }

  .player-input-group { margin-bottom: 14px; }

  .player-input-group label {
    display: block;
    font-size: 0.82rem;
    color: #6c757d;
    margin-bottom: 5px;
  }

  .player-input-group input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #dee2e6;
    background: #f8f9fa;
    color: #212529;
    border-radius: 10px;
    font-size: 1rem;
    outline: none;
    transition: border-color .2s;
  }

  .player-input-group input:focus { border-color: #6F42C1; }

  .start-btn {
    width: 100%;
    padding: 14px;
    background: #6F42C1;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    transition: opacity .2s;
  }

  .start-btn:hover { opacity: 0.88; }

  .order-btn {
    width: 28px;
    height: 22px;
    background: #e9ecef;
    border: 1px solid #dee2e6;
    color: #6F42C1;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    padding: 0;
  }

  .order-btn:hover:not(:disabled) { background: #d8cef0; }
  .order-btn:disabled { opacity: 0.2; cursor: not-allowed; }

  /* ─── GAME ─── */
  #game { display: none; width: 100%; max-width: 720px; }

  .round-info {
    text-align: center;
    margin-bottom: 18px;
    color: #6c757d;
    font-size: 0.92rem;
  }

  .round-info span { color: #6F42C1; font-weight: 700; }

  /* Score cards */
  .scores-grid {
    display: grid;
    gap: 14px;
    margin-bottom: 22px;
  }

  .score-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: border-color .3s;
    position: relative;
  }

  .score-card.dealer { border-color: #6F42C1; }

  /* Mode compact (6+ joueurs) */
  .scores-grid.compact { gap: 7px; }
  .scores-grid.compact .score-card { padding: 10px 14px; border-radius: 10px; }
  .scores-grid.compact .player-avatar { width: 34px; height: 34px; font-size: 0.85rem; }
  .scores-grid.compact .player-name { font-size: 0.88rem; }
  .scores-grid.compact .player-badges { margin-top: 1px; gap: 4px; }
  .scores-grid.compact .badge { font-size: 0.62rem; padding: 1px 5px; }
  .scores-grid.compact .score-display { font-size: 1.5rem; }
  .scores-grid.compact .player-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .scores-grid.compact .player-left { gap: 9px; }

  .score-card.leading { border-color: #17A2B8; }

  .player-left { display: flex; align-items: center; gap: 12px; }

  .player-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
  }

  .player-name { font-size: 1rem; font-weight: 600; }
  .player-rank { display: inline-block; min-width: 22px; color: #adb5bd; font-size: 1.2rem; font-weight: 800; text-align: center; flex-shrink: 0; }
  .score-card.leading .player-rank { color: #17A2B8; }
  .score-card.dealer .player-rank { color: #9a6de0; }
  .player-badges { display: flex; gap: 6px; margin-top: 3px; }

  .badge {
    font-size: 0.68rem;
    padding: 2px 7px;
    border-radius: 20px;
    font-weight: 600;
  }

  .badge-dealer  { background: #6F42C1; color: #ffffff; }
  .badge-leading { background: #17A2B8; color: #ffffff; }
  .badge-winner  { background: #6F42C1; color: #ffffff; font-size: 0.72rem; padding: 3px 8px; border-radius: 8px; font-weight: 800; }

  .score-display {
    font-size: 2.4rem;
    font-weight: 800;
    min-width: 56px;
    text-align: right;
    line-height: 1;
    color: #212529;
  }

  .score-delta {
    position: absolute;
    right: 22px;
    top: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0;
    transition: opacity .4s, top .4s;
  }

  .score-delta.show { opacity: 1; top: 4px; }
  .delta-down { color: #17A2B8; }
  .delta-none { color: #adb5bd; }
  .delta-up { color: #dc3545; }

  /* Avatars colors */
  .av0 { background: #cfe2ff; color: #0056b3; }
  .av1 { background: #e2d9f3; color: #6F42C1; }
  .av2 { background: #d1ecf1; color: #0c6674; }
  .av3 { background: #fff3cd; color: #856404; }

  /* Round entry */
  .round-panel {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  .round-panel h3 {
    font-size: 1rem;
    color: #6F42C1;
    margin-bottom: 16px;
  }

  .tricks-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }

  .tricks-label {
    flex: 1;
    font-size: 0.9rem;
  }

  .tricks-label small { display: block; color: #adb5bd; font-size: 0.75rem; }

  .tricks-counter {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .counter-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #e9ecef;
    color: #6F42C1;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
  }

  .counter-btn:hover:not(:disabled) { background: #d8cef0; }
  .counter-btn:disabled { opacity: 0.25; cursor: not-allowed; }

  .trick-pick-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0 2px; }
  .trick-pick-btn { padding: 5px 0; border-radius: 7px; border: 1px solid #dee2e6; background: #f8f9fa; color: #495057; font-size: 0.82rem; font-weight: 700; cursor: pointer; min-width: 38px; text-align: center; transition: background .15s; }
  .trick-pick-btn:hover { background: #e9ecef; color: #212529; }
  .trick-pick-btn.selected { background: #007BFF; color: #ffffff; border-color: #007BFF; }
  .trick-pick-btn.couvert-btn { border-color: #17A2B8; color: #17A2B8; padding: 5px 10px; min-width: auto; }
  .trick-pick-btn.couvert-btn.selected { background: #17A2B8; color: #ffffff; border-color: #17A2B8; }
  .trick-pick-btn:disabled { opacity: 0.2; cursor: not-allowed; pointer-events: none; }

  .tricks-val {
    width: 36px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: #6F42C1;
  }

  .tricks-summary {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.82rem;
    color: #6c757d;
    background: #f8f9fa;
  }

  .tricks-total { display: flex; justify-content: space-between; margin-top: 6px; }
  .tricks-total span:last-child { font-weight: 700; }
  .ok { color: #17A2B8; }
  .warn { color: #e67e00; }
  .err { color: #dc3545; }

  .apply-btn {
    width: 100%;
    padding: 13px;
    background: #007BFF;
    color: #ffffff;
    border: 2px solid #007BFF;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    margin-top: 4px;
  }

  .apply-btn:hover:not(:disabled) {
    background: #0056b3;
    border-color: #0056b3;
  }

  .apply-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  /* History */
  .history-panel {
    background: #1a1f2e;
    border-radius: 16px;
    padding: 18px 22px;
    margin-bottom: 18px;
    overflow-x: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  .history-panel h3 {
    font-size: 0.95rem;
    color: #6c757d;
    margin-bottom: 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
  }

  .history-panel h3 span { color: #ced4da; font-size: 0.85rem; }

  #history-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    min-width: 420px;
  }

  .history-table th {
    color: #adb5bd;
    font-weight: 600;
    padding: 4px 5px;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
    white-space: nowrap;
  }

  .history-table th.th-player {
    color: #adb5bd;
    font-weight: 700;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 3px;
  }

  .history-table th.th-sub {
    color: #ced4da;
    font-size: 0.7rem;
    font-weight: 500;
    padding-top: 2px;
  }

  .history-table td {
    padding: 4px 5px;
    text-align: center;
    border-top: 1px solid #2d3348;
    white-space: nowrap;
  }

  .history-table tr:hover td { background: rgba(111,66,193,0.15); }

  .td-manche { color: #adb5bd; font-weight: 600; }
  .td-suit   { font-weight: 700; color: #dee2e6; }
  .td-tricks { color: #6c757d; }
  .td-neg    { color: #17A2B8; font-weight: 700; }
  .td-pos    { color: #dc3545; font-weight: 700; }
  .td-zero   { color: #ced4da; }
  .td-score  { font-weight: 700; color: #f8f9fa; }
  .td-score-low { font-weight: 700; color: #17A2B8; }
  .td-total  { color: #6F42C1; font-weight: 700; border-left: 1px solid #dee2e6; }
  .td-sep    { border-left: 1px solid #e9ecef; }

  /* Colonnes détail masquées par défaut */
  .history-table .col-detail { display: none; }
  .prog-hide { display: none; }
  .history-table.show-details .col-detail { display: table-cell; }

  .reset-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    color: #adb5bd;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all .2s;
  }

  .reset-btn:hover { color: #dc3545; border-color: #dc3545; }

  /* Stats overlay */
  #stats-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: #111318;
    z-index: 200;
    overflow-y: auto;
    padding: 20px;
  }

  .stats-container {
    max-width: 700px;
    margin: 0 auto;
    padding-bottom: 40px;
  }

  /* Élargir le panneau Statistiques sur grand écran (demande de Frederic, 2026-07-27) : le
     Classement général affiche une colonne de 100px par type de jeu (5 types = 500px), plus nom/
     PCT/V-PJ — ça dépasse 700px et forçait un défilement horizontal même sur ordinateur, où
     l'espace ne manque pourtant pas. Sur petit écran (tablette/téléphone), 700px reste la limite
     (de toute façon bornée par la largeur de l'appareil) — inchangé. */
  @media (min-width: 960px) {
    .stats-container { max-width: 1100px; }
  }

  .stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-top: 10px;
  }

  .stats-header h2 { color: #c4a8ff; font-size: 1.4rem; }

  .close-stats-btn {
    background: #2a2d36;
    border: 1px solid #3a3d48;
    color: #c4a8ff;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background .2s;
  }

  .close-stats-btn:hover { background: #353845; color: #ffffff; }

  .stats-section {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    /* Signalé par Frederic (2026-07-18) : le tableau "Victoires par joueur" du Beigne déborde du
       conteneur depuis l'ajout de la colonne Précision des mises (v4.53.0) — les en-têtes en
       white-space:nowrap forcent le tableau à s'élargir plus que la carte. Défilement horizontal
       local plutôt que de laisser le contenu déborder visuellement hors de la carte arrondie. */
    overflow-x: auto;
  }

  .stats-section h3 {
    font-size: 0.95rem;
    color: #6F42C1;
    margin-bottom: 14px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 8px;
  }

  .stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
  }

  .stats-table th {
    color: #adb5bd;
    font-weight: 600;
    padding: 5px 10px;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
    white-space: nowrap;
  }

  .stats-table th:first-child { text-align: left; }

  .stats-table td {
    padding: 7px 10px;
    text-align: center;
    border-top: 1px solid #f0f0f0;
  }

  .stats-table td:first-child { text-align: left; color: #495057; font-weight: 600; }
  .dash-rank-tile { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 10px; padding: 10px 6px; text-align: center; transition: background .15s; cursor: pointer; }
  .dash-rank-tile:hover { background: #ede9f7; }
  .stats-table tr:hover td { background: rgba(111,66,193,0.04); }

  .game-entry {
    border-radius: 10px;
    background: #f8f9fa;
    padding: 12px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    border: 1px solid #dee2e6;
    transition: border-color .2s;
  }

  .game-entry:hover { border-color: #6F42C1; }

  .game-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
  }

  .game-entry-date { color: #6F42C1; font-size: 0.85rem; font-weight: 700; }
  .game-entry-rounds { color: #adb5bd; font-size: 0.78rem; }

  .game-entry-players {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .game-player-chip {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 20px;
    background: #e9ecef;
    color: #495057;
  }

  .game-player-chip.winner-chip {
    background: #d1ecf1;
    color: #0c6674;
    font-weight: 700;
  }

  .delete-game-btn {
    background: transparent;
    border: 1px solid #f5c6cb;
    color: #dc3545;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all .15s;
  }

  .delete-game-btn:hover { background: #f8d7da; color: #dc3545; border-color: #dc3545; }

  .progression-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    overflow-x: auto;
    display: block;
  }

  .progression-table th {
    color: #adb5bd;
    padding: 4px 8px;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
    white-space: nowrap;
  }

  .progression-table td {
    padding: 5px 8px;
    text-align: center;
    border-top: 1px solid #2d3348;
    white-space: nowrap;
  }

  .prog-winner { color: #17A2B8; font-weight: 700; }

  .stats-btn {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #007BFF;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background .2s;
    white-space: nowrap;
  }

  .stats-btn:hover { background: #e9ecef; }

  .save-btn {
    padding: 11px 28px;
    background: #d1ecf1;
    color: #0c6674;
    border: 2px solid #17A2B8;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s;
    margin-top: 8px;
  }

  .save-btn:hover { opacity: 0.85; }
  .save-btn:disabled { opacity: 0.4; cursor: default; }

  /* Winner screen */
  #winner {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 100;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
  }

  .winner-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 48px 40px;
    max-width: 360px;
    box-shadow: 0 20px 60px rgba(111,66,193,0.20);
    border: 2px solid #6F42C1;
  }

  .winner-trophy { font-size: 4rem; margin-bottom: 12px; }
  .winner-name { font-size: 2rem; font-weight: 800; color: #6F42C1; margin-bottom: 8px; }
  .winner-subtitle { color: #6c757d; margin-bottom: 28px; }
  .winner-classement-title { font-size: 0.72rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; text-align: left; }
  .winner-classement-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; text-align: center; color: #333; margin-bottom: 18px; }
  .winner-classement-table th { color: #6c757d; font-size: 0.7rem; font-weight: 600; padding: 2px 4px; }
  .winner-classement-table td { padding: 3px 4px; }
  .winner-classement-table th:first-child, .winner-classement-table td:first-child { text-align: left; }

  .new-game-btn {
    padding: 14px 32px;
    background: #6F42C1;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s;
  }

  .new-game-btn:hover { opacity: 0.88; }

  @media (max-width: 480px) {
    body { padding: 10px 10px 30px; }

    /* Barre du haut */
    div[style*="max-width:600px"][style*="display:flex"] { flex-wrap: wrap; gap: 7px; }
    .param-btn { margin-left: 0; }

    /* Titre */
    h1 { font-size: 1.4rem; }
    .subtitle { margin-bottom: 16px; }

    /* Setup */
    #setup { padding: 18px 14px; }
    .player-select { font-size: 0.88rem; padding: 9px 10px; }
    .order-btn { width: 34px; height: 26px; }

    /* Barre sync */
    .sync-bar { padding: 8px 12px; gap: 7px; }
    .sync-label { font-size: 0.72rem; }
    .sync-btn { padding: 7px 11px; font-size: 0.75rem; }

    /* Info manche */
    .round-info { font-size: 0.8rem; line-height: 1.6; }

    /* Score cards */
    .score-card { padding: 13px 14px; }
    .player-avatar { width: 36px; height: 36px; font-size: 0.95rem; }
    .player-name { font-size: 0.9rem; }
    .badge { font-size: 0.62rem; padding: 2px 6px; }
    .score-display { font-size: 2rem; }

    /* Panneau levées */
    .round-panel { padding: 15px 12px; }
    .round-panel h3 { font-size: 0.88rem; }
    .tricks-row { gap: 8px; }
    .tricks-label { font-size: 0.85rem; }
    .counter-btn { width: 38px; height: 38px; font-size: 1.3rem; }
    .tricks-val { font-size: 1.1rem; width: 32px; }
    .apply-btn { padding: 14px; font-size: 0.95rem; }

    /* Historique */
    .history-panel { padding: 13px 10px; }
    .history-table { font-size: 0.7rem; }
    .history-table th, .history-table td { padding: 5px 4px; }

    /* Boutons bas */
    .reset-btn { font-size: 0.8rem; padding: 11px; }
    .stats-btn { font-size: 0.8rem; padding: 8px 11px; }

    /* Winner */
    .winner-card { padding: 32px 20px; }
    .winner-name { font-size: 1.6rem; }
    .new-game-btn { padding: 13px 24px; }

    /* Stats / Config overlays */
    .stats-container { padding: 0 4px 40px; }
    .stats-section, .config-section { padding: 14px 12px; }
    .config-sidebar { width: 56px; min-width: 56px; padding: 12px 4px; }
    .config-sidebar-header span, .config-nav-btn span:last-child { display: none; }
    .config-nav-btn { justify-content: center; padding: 10px 4px; }
    .config-content { padding: 16px 12px; }
    .stats-table { font-size: 0.75rem; }
    .stats-table th, .stats-table td { padding: 5px 6px; }
    .game-entry { padding: 10px 12px; }
  }

  /* Export/Import bar */
  .sync-bar {
    width: 100%;
    max-width: 720px;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  .sync-label { font-size: 0.78rem; color: #adb5bd; flex: 1; min-width: 120px; }

  .sync-btn {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity .2s;
    white-space: nowrap;
  }

  .sync-btn:hover { opacity: 0.82; }
  .sync-btn.export { background: #d1ecf1; color: #0c6674; }
  .sync-btn.import { background: #cfe2ff; color: #0056b3; }

  .sync-status {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
  }

  .sync-status.ok  { background: #d1ecf1; color: #0c6674; }
  .sync-status.warn { background: #fff3cd; color: #856404; }

  /* Config overlay — lateral nav layout */
  #config-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: #f0f2f5;
    z-index: 300;
  }

  .config-layout {
    display: flex;
    height: 100%;
    width: 100%;
  }

  /* Sidebar */
  .config-sidebar {
    width: 180px;
    min-width: 180px;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    padding: 20px 12px;
  }

  .config-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px 14px 4px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 10px;
  }

  .config-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .config-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #495057;
    text-align: left;
    font-weight: 500;
    transition: background 0.15s;
  }

  .config-nav-btn:hover { background: #e8f0fe; color: #1a73e8; }
  .config-nav-btn.active { background: #d2e3fc; color: #1a73e8; font-weight: 700; }

  .cnav-icon { font-size: 1rem; width: 20px; text-align: center; }

  /* Content area */
  .config-content {
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px;
  }

  .config-panel { padding-bottom: 40px; }

  .config-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }

  .config-panel-header h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #6F42C1;
    margin: 0;
  }

  .config-section {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }

  .config-section h3 {
    font-size: 0.95rem;
    color: #6F42C1;
    margin-bottom: 16px;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .player-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .joueur-thead { background: linear-gradient(135deg, #6F42C1 0%, #5a32a3 100%); }
  .joueur-badge { background: #e2d9f3; color: #6F42C1; font-size: 0.75rem; font-weight: 700; padding: 3px 9px; border-radius: 10px; }
  .joueur-page-btn { min-width: 30px; height: 30px; border-radius: 6px; border: 1px solid #dee2e6; background: #fff; color: #495057; font-weight: 700; font-size: 0.8rem; cursor: pointer; padding: 0 6px; }
  .joueur-page-btn.active { background: #6F42C1; color: #fff; border-color: #6F42C1; }
  .joueur-page-btn:disabled { color: #dee2e6; cursor: default; }

  .player-row:last-of-type { border-bottom: none; }

  .player-id-badge {
    background: #e2d9f3;
    color: #6F42C1;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    min-width: 52px;
    text-align: center;
    flex-shrink: 0;
  }

  .player-fullname {
    flex: 1;
    font-size: 0.9rem;
    color: #212529;
  }

  .player-fullname span { color: #adb5bd; font-size: 0.78rem; margin-left: 6px; }

  .config-edit-btn {
    background: #e2d9f3;
    border: 1px solid #d8cef0;
    color: #6F42C1;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background .15s;
    flex-shrink: 0;
  }

  .config-edit-btn:hover { background: #d8cef0; }

  .config-del-btn {
    background: transparent;
    border: 1px solid #f5c6cb;
    color: #dc3545;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
  }

  .config-del-btn:hover { background: #f8d7da; color: #dc3545; border-color: #dc3545; }

  .add-player-btn {
    background: #e2d9f3;
    border: 1px solid #d8cef0;
    color: #6F42C1;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background .2s;
  }

  /* Demande #51 (suite, 2026-07-07) : boutons d'action de la liste Joueurs — remplace les
     anciennes pastilles de couleur pleine par des icônes sobres (fond transparent, surbrillance
     discrète au survol), pour un rendu plus discret cohérent avec la nouvelle mise en page. */
  .action-icon-btn {
    width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid transparent;
    background: transparent; cursor: pointer; font-size: 0.95rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s;
  }
  .action-icon-btn:hover { background: rgba(127,127,127,0.16); border-color: rgba(127,127,127,0.3); }

  .add-player-btn:hover { background: #d8cef0; }

  /* Player form */
  .player-form {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 16px;
    margin-top: 14px;
    border: 1px solid #dee2e6;
  }

  .form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }

  .form-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 120px; }

  .form-field label { font-size: 0.78rem; color: #6c757d; }

  .form-field input {
    background: #ffffff;
    border: 2px solid #dee2e6;
    color: #212529;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color .2s;
  }

  .form-field input:focus { border-color: #6F42C1; }
  .form-field input[readonly] { opacity: 0.6; cursor: default; }

  .form-actions { display: flex; gap: 8px; }

  .form-save-btn {
    background: #6F42C1;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: opacity .2s;
  }

  .form-save-btn:hover { opacity: 0.85; }

  .form-cancel-btn {
    background: transparent;
    color: #6c757d;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all .15s;
  }

  .form-cancel-btn:hover { color: #212529; border-color: #adb5bd; }

  /* Saisie pointage direct */
  .direct-score-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }

  .direct-score-label { flex: 1; font-size: 0.9rem; }
  .direct-score-label small { display: block; color: #adb5bd; font-size: 0.75rem; }

  .direct-score-input {
    width: 80px;
    padding: 8px 10px;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    color: #6F42C1;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    outline: none;
    transition: border-color .2s;
    -moz-appearance: textfield;
  }

  .direct-score-input:focus { border-color: #6F42C1; }
  .direct-score-input::-webkit-inner-spin-button,
  .direct-score-input::-webkit-outer-spin-button { -webkit-appearance: none; }

  /* Select in setup */
  .player-select {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #dee2e6;
    background: #f8f9fa;
    color: #212529;
    border-radius: 10px;
    font-size: 0.95rem;
    outline: none;
    cursor: pointer;
    transition: border-color .2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236c757d' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
  }

  .player-select:focus { border-color: #6F42C1; }

  /* Param button */
  .param-btn {
    background: #ffffff;
    border: 1px solid #dee2e6;
    color: #6c757d;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    margin-left: auto;
  }

  .param-btn:hover { color: #212529; border-color: #adb5bd; }

  /* Section Apparence verrouillée par un thème */
  .appearance-locked {
    opacity: 0.38;
    pointer-events: none;
    user-select: none;
    position: relative;
  }
  .appearance-locked::after {
    content: '🔒 Désactivé par le thème actif';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(111,66,193,0.10);
    color: #6F42C1;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(111,66,193,0.25);
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
  }

  /* Résumé cumulatif des jokers, sous les scores sur iPad. */
  #live-jokers-500 { display:none; margin:0 0 12px; padding:12px; background:#fff; border:1px solid #dee2e6; border-radius:12px; }
  html.device-ipad #live-jokers-500:not([hidden]) { display:block; }
  #live-jokers-500 h3 { font-size:0.85rem; color:#6F42C1; margin-bottom:6px; }
  #live-jokers-500 p { font-size:0.7rem; color:#6c757d; margin:6px 0; }
  #live-jokers-500 table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:0.7rem; }
  #live-jokers-500 th, #live-jokers-500 td { border:1px solid #ced4da; padding:7px 3px; text-align:center; overflow-wrap:anywhere; }
  #live-jokers-500 thead th { background:#e9e7ef; color:#343a40; font-size:0.65rem; }
  #live-jokers-500 tbody th { text-align:left; font-weight:500; }
  #live-jokers-500 tbody tr:nth-child(even) { background:#f8f9fa; }
  html.device-ipad #game-left-col { min-width:0; }

  /* ─── LAYOUT TABLETTE (iPad) ─── */
  /* Layout deux colonnes — activé par JS via classe device-ipad sur <html> */
  html.device-ipad #game { max-width: 900px; }
  html.device-ipad #game-cols {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 16px;
    align-items: start;
  }
  html.device-ipad #game-left-col .scores-grid { margin-bottom: 14px; }
  html.device-ipad #game-right-col .round-panel {
    position: sticky;
    top: 16px;
    margin-bottom: 0;
  }
  html.device-ipad .trick-pick-btn {
    min-width: 52px;
    padding: 11px 4px;
    font-size: 0.95rem;
  }
  html.device-ipad .trick-pick-btn.couvert-btn {
    padding: 11px 18px;
  }

  /* Styles de base de #header-top-bar */
  #header-top-bar {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
  }

  /* Barres du haut compactes sur iPad */
  html.device-ipad #header-top-bar { margin-bottom: 6px; gap: 4px; }
  html.device-ipad .sync-bar { padding: 6px 12px; margin-bottom: 6px; }
  html.device-ipad .sync-btn { padding: 4px 10px; font-size: 0.75rem; }
  /* En partie sur iPad : barre simplifiée — date en texte + version + joueur seulement */
  html.device-ipad body.in-game #header-top-bar { display: none !important; }
  html.device-ipad body.in-game #ipad-date-text { display: inline !important; }
  html.device-ipad body.in-game #btn-config,
  html.device-ipad body.in-game #btn-securite,
  html.device-ipad body.in-game #btn-change-pw,
  html.device-ipad body.in-game #btn-logout,
  html.device-ipad body.in-game #btn-backup,
  html.device-ipad body.in-game #sync-status { display: none !important; }

  /* Compresser l'entête et les espacements sur iPad */
  html.device-ipad body { padding: 10px 10px 20px; }
  html.device-ipad h1 { font-size: 1.25rem; margin-bottom: 2px; }
  html.device-ipad .subtitle { margin-bottom: 8px; }
  html.device-ipad .round-info { margin-bottom: 10px; }
  html.device-ipad .round-panel { padding: 14px; }
  html.device-ipad .round-panel h3 { margin-bottom: 10px; }
  html.device-ipad .tricks-row { margin-bottom: 8px; }
  html.device-ipad .tricks-summary { margin-top: 6px; padding: 7px 12px; }
  html.device-ipad .apply-btn { padding: 11px; margin-top: 6px; }
  html.device-ipad #game-cols { gap: 10px; }
  html.device-ipad #game-left-col .scores-grid { margin-bottom: 10px; gap: 10px; }

/* Glisser-déposer des tuiles de "Statistiques avancées" (admin, demande de Frederic 2026-09-26) */
body.stats-drag-mode .stats-tile-drag-handle { display: flex !important; }
body.stats-drag-mode .stats-tiles-dnd-container > [data-tile-id] {
  outline: 2px dashed #d8cef0;
  outline-offset: 2px;
  transition: outline-color 0.15s;
}
.stats-tile-drag-handle:active { cursor: grabbing; }
.stats-tile-dragging {
  opacity: 0.55;
  outline-color: #6F42C1 !important;
  z-index: 10;
}
  html.device-ipad #timer-bar { padding: 7px 12px; margin-bottom: 8px; }