/* Fléchettes — présentation. Sobre : fond sombre, une seule couleur d'accent (le rouge de la cible). */
:root {
  --fond: #121416;
  --surface: #1b1e21;
  --surface-2: #24282c;
  --ligne: #30353a;
  --texte: #eceeef;
  --doux: #8a9299;
  --accent: #e5484d;
  --accent-fond: rgba(229, 72, 77, .14);
  --bon: #3fb37a;
  --c-noir: #1a1a1a;
  --c-creme: #e8dcc0;
  --c-rouge: #d63c36;
  --c-vert: #1f8f50;
  --rayon: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--fond); color: var(--texte); }
body {
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none; -webkit-user-select: none; user-select: none;
  font-variant-numeric: tabular-nums;
}
input { -webkit-user-select: text; user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; background: none; border: 0; padding: 0; }
button:disabled { opacity: .35; cursor: default; }
svg { display: block; }
[hidden] { display: none !important; }

.ecran {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.defile { flex: 1; overflow-y: auto; padding: 4px 16px 32px; -webkit-overflow-scrolling: touch; }
.defile > :first-child { margin-top: 12px; }

/* ---------- Barre du haut ---------- */
.barre { display: flex; align-items: center; gap: 2px; padding: 4px 6px; min-height: 52px; border-bottom: 1px solid var(--ligne); }
.barre h1 { flex: 1; margin: 0 8px; font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marque { display: flex; align-items: center; gap: 10px; font-size: 19px !important; }
.marque img { width: 28px; height: 28px; }
.b-icone { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; flex: none; color: var(--texte); }
.b-icone svg, [data-icone] svg { width: 22px; height: 22px; }
.b-icone:active { background: var(--surface-2); }

/* ---------- Boutons ---------- */
.b-principal, .b-second { display: block; width: 100%; padding: 14px 16px; border-radius: var(--rayon); font-weight: 600; font-size: 16px; text-align: center; }
.b-principal { background: var(--accent); color: #fff; }
.b-principal:active { filter: brightness(.9); }
.b-second { background: var(--surface-2); border: 1px solid var(--ligne); }
.b-second:active { background: var(--ligne); }
.lien-discret { color: var(--doux); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 10px 0; }
.pied { padding: 10px 16px 12px; border-top: 1px solid var(--ligne); }
.pied-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.titre-section, .etiquette-bloc {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); margin: 26px 0 10px;
}

/* ---------- Accueil ---------- */
.bloc-reprendre { display: flex; align-items: center; gap: 12px; }
.reprendre, .recent {
  flex: 1; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border-radius: var(--rayon); background: var(--surface); border: 1px solid var(--ligne); min-height: 60px;
}
.reprendre { border-color: var(--accent); background: var(--accent-fond); }
.reprendre:active, .recent:active { background: var(--surface-2); }
.r-titre { font-weight: 600; }
.r-detail { color: var(--doux); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recents { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }

.liste-jeux { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); border-top: 1px solid var(--ligne); }
.carte-jeu {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--ligne); cursor: pointer; align-items: center;
}
.carte-jeu:active { background: var(--surface); }
.cj-texte { grid-row: 1 / span 2; min-width: 0; }
.cj-nom { font-weight: 600; }
.cj-court { color: var(--doux); font-size: 14px; margin-top: 1px; }
.cj-joueurs { font-size: 12px; color: var(--doux); white-space: nowrap; text-align: right; }
.cj-regles { width: 36px; height: 32px; display: grid; place-items: center; color: var(--doux); justify-self: end; }
.cj-regles svg { width: 20px; height: 20px; }
@media (min-width: 700px) { .liste-jeux { column-gap: 24px; } }

/* ---------- Réglage d'une partie ---------- */
.c-court { color: var(--doux); margin-bottom: 0; }
.groupe { margin: 18px 0; }
.etiquette { font-weight: 600; margin-bottom: 8px; }
.discret { font-weight: 400; color: var(--doux); font-size: 14px; margin-left: 6px; }
.sous-titre { font-size: 13px; color: var(--doux); margin: 14px 0 8px; }
.choix { display: flex; flex-wrap: wrap; gap: 6px; }
.choix button { padding: 9px 14px; border-radius: 8px; border: 1px solid var(--ligne); min-height: 42px; }
.choix button.actif { background: var(--texte); color: var(--fond); border-color: var(--texte); font-weight: 600; }
.liste-joueurs { list-style: none; margin: 0 0 8px; padding: 0; }
.liste-joueurs li { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 0; border-bottom: 1px solid var(--ligne); min-height: 48px; }
.lj-num { width: 24px; text-align: center; color: var(--doux); font-size: 14px; }
.lj-nom { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-mini { width: 40px; height: 40px; border-radius: 8px; color: var(--doux); }
.b-mini:active { background: var(--surface-2); }
.ajout { display: flex; gap: 8px; margin-top: 10px; }
.ajout input { flex: 1; min-width: 0; padding: 12px; border-radius: 8px; border: 1px solid var(--ligne); background: var(--surface); color: var(--texte); font: inherit; }
.ajout .b-second { width: auto; padding: 0 18px; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; }
.puce { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ligne); min-height: 40px; }
.puce.choisie { background: var(--texte); color: var(--fond); border-color: var(--texte); font-weight: 600; }

/* ---------- Partie ---------- */
.p-grille {
  flex: 1; min-height: 0; display: grid;
  grid-template-areas: "scores" "histo" "cible" "saisie" "actions";
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
}
.p-scores { grid-area: scores; padding: 8px 8px 0; overflow-y: auto; max-height: 38vh; }
.p-cible { grid-area: cible; position: relative; min-height: 0; padding: 4px; }
.p-saisie { grid-area: saisie; padding: 0 8px; }
.p-actions { grid-area: actions; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 8px 8px; }

.cartes { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; }
.joueur {
  flex: 1 0 100px; max-width: 220px; padding: 6px 10px 8px; text-align: center; border-radius: var(--rayon);
  background: var(--surface); border-top: 3px solid transparent; scroll-snap-align: center;
}
.joueur.actif { background: var(--surface-2); border-top-color: var(--accent); }
.joueur.elimine { opacity: .35; }
.j-nom { font-size: 14px; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; justify-content: center; align-items: center; gap: 6px; }
.actif .j-nom, th.actif .j-nom { color: var(--texte); font-weight: 600; }
.j-manches { border: 1px solid var(--ligne); border-radius: 999px; font-size: 12px; padding: 0 6px; color: var(--texte); }
.j-grand { font-size: 32px; font-weight: 700; line-height: 1.15; }
.j-petit { font-size: 12px; color: var(--doux); min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vies { color: var(--accent); font-size: 18px; letter-spacing: 2px; }
.vies.vide { color: var(--doux); font-size: 15px; letter-spacing: 0; }
.badge { color: var(--accent); font-weight: 700; }

table.cricket { width: 100%; border-collapse: separate; border-spacing: 2px; table-layout: fixed; }
table.cricket th, table.cricket td { text-align: center; border-radius: 6px; }
table.cricket thead th { background: var(--surface); padding: 3px 2px; border-top: 3px solid transparent; font-weight: 400; }
table.cricket thead th:first-child { background: none; width: 44px; }
table.cricket thead th.actif { border-top-color: var(--accent); background: var(--surface-2); }
.j-pts { font-size: 22px; font-weight: 700; }
table.cricket td.num { font-weight: 700; background: var(--surface); }
table.cricket td.mq { background: var(--surface); font-size: 17px; line-height: 22px; height: 22px; font-weight: 700; }
table.cricket td.mq.actif { background: var(--surface-2); }
table.cricket td.m3 { color: var(--bon); }
table.cricket tr.mort td { opacity: .3; }

.sequence { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.sequence span { min-width: 30px; padding: 2px 6px; text-align: center; border-radius: 6px; background: var(--surface); font-weight: 600; font-size: 13px; }
.sequence span.actuel { background: var(--texte); color: var(--fond); }
.sequence span.passe { opacity: .35; }
.sequence.petits span { min-width: 26px; font-size: 12px; }
.sequence span.ferme { background: none; color: var(--doux); text-decoration: line-through; opacity: .5; }
.morpion { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; max-width: 240px; margin: 6px auto 0; }
.m-case { background: var(--surface); border-radius: 6px; height: 42px; display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; }
.m-case b { font-size: 17px; }
.m-case span { font-size: 22px; font-weight: 700; }
.m-case small { position: absolute; bottom: 1px; font-size: 11px; letter-spacing: 1px; }
.m-case.p0 span, i.p0, .pion.p0 { color: var(--accent); }
.m-case.p1 span, i.p1, .pion.p1 { color: #5fb3f0; }
.m-case.p0, .m-case.p1 { background: var(--surface-2); }
.m-case.p0 b, .m-case.p1 b { opacity: .45; font-size: 13px; }
i.p0, i.p1 { font-style: normal; margin: 0 2px; }

#p-info { margin-top: 6px; text-align: center; }
.message { color: var(--accent); font-weight: 700; }
.info { color: var(--doux); font-size: 14px; }
#p-visite { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 4px; border-top: 1px solid var(--ligne); }
.v-qui { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-fleches { display: flex; gap: 4px; }
.v-fleches .f { min-width: 48px; height: 32px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2); font-weight: 600; }
.v-fleches .f.vide { background: none; border: 1px dashed var(--ligne); }
.v-fleches .f.rate { color: var(--doux); }
.v-total { min-width: 44px; text-align: right; font-size: 22px; font-weight: 700; }

#cible { width: 100%; height: 100%; touch-action: manipulation; }
.fond-cible { fill: #0b0b0b; }
.case { stroke: #7b8187; stroke-width: .7; transition: opacity .15s; }
.case.noir { fill: var(--c-noir); }
.case.creme { fill: var(--c-creme); }
.case.rouge { fill: var(--c-rouge); }
.case.vert { fill: var(--c-vert); }
.case.attenue { opacity: .4; }
.case.touche { fill: #fff !important; opacity: 1; transition: none; }
.numero { fill: #fff; font-size: 21px; font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.numero.attenue { fill: #5c646b; }
#p-flash {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; padding: 6px 16px;
  border-radius: 8px; background: rgba(18, 20, 22, .9); font-size: 26px; font-weight: 700; opacity: 0; transition: opacity .25s;
}
#p-flash.visible { opacity: 1; transition: none; }
#p-flash.rate { color: var(--doux); }

/* Récapitulatif de la volée (2,5 s) */
#p-recap { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 13, 15, .82); z-index: 2; }
.rc-boite { width: min(320px, 90%); background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; padding: 16px; text-align: center; overflow: hidden; position: relative; }
.rc-nom { color: var(--doux); font-size: 14px; }
.rc-fleches { display: flex; justify-content: center; gap: 6px; margin: 10px 0 4px; }
.rc-fleches span { min-width: 64px; padding: 8px 4px; border-radius: 8px; background: var(--surface-2); font-size: 20px; font-weight: 700; }
.rc-fleches .rate, .rc-fleches .vide { color: var(--doux); }
.rc-total { font-size: 44px; font-weight: 800; line-height: 1.1; }
.rc-message { color: var(--accent); font-weight: 700; margin-top: 2px; }
.rc-apres { color: var(--doux); }
.rc-corriger { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 11px; }
.rc-corriger svg { width: 18px; height: 18px; }
.rc-barre { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ligne); }
.rc-barre i { display: block; height: 100%; background: var(--accent); animation: decompte 2.6s linear forwards; }
@keyframes decompte { from { width: 100%; } to { width: 0; } }

/* Clavier */
.k-mods { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 4px; margin-bottom: 4px; }
.k-nums { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
#clavier button { height: 46px; border-radius: 6px; background: var(--surface); font-weight: 600; font-size: 18px; }
#clavier button:active { background: var(--ligne); }
#clavier .k-mods button { background: var(--surface-2); font-size: 14px; }
#clavier [data-m].actif { background: var(--texte); color: var(--fond); }
#clavier .k-bull { color: #6cc895; }
#clavier button.vise { box-shadow: inset 0 0 0 1.5px var(--texte); }

.p-actions button { min-height: 50px; border-radius: var(--rayon); background: var(--surface); font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.p-actions button:active { background: var(--surface-2); }
.p-actions [data-icone] svg { width: 18px; height: 18px; }
#p-rate { color: var(--accent); }
#p-micro.ecoute { background: var(--accent); color: #fff; }

/* Tablette (ou téléphone) en largeur : scores et clavier à gauche, cible à droite */
@media (orientation: landscape) and (min-width: 640px) {
  .p-grille {
    grid-template-areas: "scores cible" "histo cible" "saisie cible" "actions cible";
    grid-template-columns: minmax(320px, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  .p-scores { max-height: 50vh; padding: 10px 12px 0; }
  .p-cible { width: min(calc(100vh - 64px), 56vw); }
  .p-saisie { padding: 0 12px; }
  .p-actions { padding: 8px 12px 12px; }
  #clavier button { height: 58px; font-size: 22px; }
  #clavier .k-mods button { height: 52px; font-size: 17px; }
  .p-actions button { min-height: 58px; font-size: 16px; }
  /* Historique en liste verticale qui défile */
  .p-histo { padding: 6px 12px; overflow-y: auto; min-height: 0; }
  .hi-liste { flex-direction: column; overflow: visible; }
  .hi-liste li { width: 100%; }
  .hi-titre { display: block; }
  .cartes { flex-wrap: wrap; }
  .joueur { flex: 1 0 120px; max-width: none; }
  .j-grand { font-size: 40px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .k-nums { grid-template-columns: repeat(10, 1fr); }
  #clavier button { height: 34px; }
  .p-actions button { min-height: 40px; }
}

/* ---------- Bilan ---------- */
.f-tete { margin-top: 16px; }
.f-jeu { color: var(--doux); font-size: 14px; }
.f-tete h2 { margin: 2px 0 12px; font-size: 26px; }
.classement { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ligne); }
.classement li { display: flex; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--ligne); }
.rang { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; font-size: 14px; flex: none; }
.classement li:first-child .rang { background: var(--accent); color: #fff; }
.r-nom { flex: 1; font-weight: 600; display: flex; flex-direction: column; min-width: 0; }
.r-nom small { font-weight: 400; color: var(--doux); font-size: 13px; }
.r-val { font-size: 22px; font-weight: 700; white-space: nowrap; }
.f-detail { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 12px; }
@media (min-width: 700px) { .f-detail { grid-template-columns: minmax(260px, 380px) 1fr; align-items: start; } }
.f-cible { margin: 0; }
.f-cible svg { width: 100%; max-width: 380px; margin: 0 auto; }
.mini .numero { font-size: 22px; }
.mini .case { opacity: .55; }
.impact { fill: #fff; stroke: var(--fond); stroke-width: 2.5; opacity: .9; }
.f-cible figcaption { text-align: center; color: var(--doux); font-size: 13px; margin-top: 6px; }
.f-stats { margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ligne); border: 1px solid var(--ligne); border-radius: var(--rayon); overflow: hidden; }
.f-stats div { background: var(--surface); padding: 10px 12px; }
.f-stats dt { color: var(--doux); font-size: 12px; }
.f-stats dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; }

/* ---------- Fenêtres ---------- */
#modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: flex; align-items: flex-end; justify-content: center; padding: 12px; z-index: 10; }
@media (min-width: 600px) { #modal { align-items: center; } }
.modal-boite {
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; padding: 18px; width: 100%; max-width: 500px;
  max-height: calc(100% - 12px); overflow-y: auto; -webkit-user-select: text; user-select: text;
}
.modal-boite h2 { margin: 0 0 12px; font-size: 20px; }
.modal-boite h3 { margin: 20px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--doux); }
.regles p { margin: 0 0 10px; }
.note { color: var(--doux); font-size: 14px; }
.boutons { margin-top: 16px; display: grid; gap: 8px; }
.numeros, .score-manches { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ligne); }
.numeros li, .score-manches li { display: flex; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid var(--ligne); }
.numeros b, .score-manches b { font-size: 20px; }
.menu-liste { display: flex; flex-direction: column; border-top: 1px solid var(--ligne); }
.menu-liste > * { text-align: left; padding: 14px 2px; border-bottom: 1px solid var(--ligne); }
.menu-liste .danger { color: var(--accent); }
.case { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.case input { width: 22px; height: 22px; accent-color: var(--accent); flex: none; }
.menu-liste .case { padding: 14px 2px; }

#toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 20;
  max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 10px; background: var(--texte); color: var(--fond);
  font-size: 14px; font-weight: 600; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

/* ---------- Historique ---------- */
.vide-msg { color: var(--doux); text-align: center; margin-top: 40px; }
.bilan { width: 100%; border-collapse: collapse; }
.bilan td { padding: 8px 2px; border-bottom: 1px solid var(--ligne); }
.bilan td:last-child { text-align: right; color: var(--doux); }
.bilan b { color: var(--texte); }
.h-partie { padding: 10px 0; border-bottom: 1px solid var(--ligne); }
.h-tete { display: flex; justify-content: space-between; gap: 8px; }
.h-tete span { color: var(--doux); font-size: 13px; }
.h-partie ol { margin: 6px 0 0; padding-left: 20px; color: var(--doux); }
.h-partie li span:last-child { float: right; }
.h-partie li.gagnant { color: var(--texte); font-weight: 600; }

/* ======================= Version 6 ======================= */
:root { --vert-go: #2fa56a; --orange: #e08a2c; }

/* Bouton pour lancer la partie : vert, grand */
.b-go {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 60px; padding: 14px 18px;
  border-radius: 14px; background: var(--vert-go); color: #fff; font-size: 18px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(47, 165, 106, .28);
}
.b-go svg { width: 22px; height: 22px; }
.b-go:active { filter: brightness(.92); transform: translateY(1px); }
.b-go:disabled { background: var(--surface-2); color: var(--doux); box-shadow: none; }

/* Petites cibles des démonstrations et des icônes */
.demo .case { opacity: .2; transition: opacity .3s; }
.demo .case.allume { opacity: 1; stroke: #fff; stroke-width: 3; }
.demo .fond-cible { fill: #15181b; }
.demo .numero { fill: #6d757c; }
.demo.icone .numero { display: none; }
.impact-demo { fill: #fff; stroke: #121416; stroke-width: 5; transform-box: fill-box; transform-origin: center; animation: plante .45s ease-out both; }
@keyframes plante { 0% { transform: scale(2.4); opacity: 0; } 60% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1); } }

/* Accueil : jeu à découvrir */
.vedette {
  display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; padding: 14px; margin-bottom: 4px;
  border-radius: 16px; background: linear-gradient(160deg, #1f2327, #171a1d); border: 1px solid var(--ligne); cursor: pointer;
}
.vedette:active { border-color: var(--doux); }
.v-cible svg { width: 132px; height: 132px; }
.v-sur { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); font-weight: 700; }
.v-nom { font-size: 22px; font-weight: 700; margin-top: 2px; }
.v-legende { color: var(--doux); font-size: 14px; margin: 4px 0 10px; min-height: 40px; }
.v-boutons { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.b-jouer { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--vert-go); color: #fff; font-weight: 700; font-size: 15px; }
.b-jouer svg { width: 18px; height: 18px; }
@media (min-width: 700px) { .vedette { grid-template-columns: 190px 1fr; } .v-cible svg { width: 190px; height: 190px; } .v-nom { font-size: 26px; } }

.titre-section span { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; margin-top: 2px; }

/* Accueil : tuiles de jeux avec icône */
.liste-jeux { border-top: 0; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.carte-jeu {
  grid-template-columns: 64px 1fr auto; grid-template-rows: auto; padding: 10px 6px 10px 10px; border: 1px solid var(--ligne);
  border-radius: 14px; background: var(--surface); column-gap: 12px; transition: border-color .2s, background .2s;
}
.carte-jeu:hover, .carte-jeu:focus-visible { border-color: #4a5158; background: var(--surface-2); outline: none; }
.cj-icone svg { width: 64px; height: 64px; }
.cj-texte { grid-row: auto; }
.cj-joueurs { text-align: left; margin-top: 4px; color: #6f777e; }
.cj-regles { align-self: start; }

/* Réglage : comment jouer */
.comment { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--ligne); }
.cm-cible svg { width: 120px; height: 120px; }
.comment .etiquette { margin-bottom: 4px; }
.comment p { margin: 0; color: var(--texte); min-height: 44px; font-size: 15px; }
.cm-points { display: flex; gap: 5px; margin: 8px 0 0; }
.cm-points i { width: 18px; height: 4px; border-radius: 2px; background: var(--ligne); transition: background .3s; }
.cm-points i.actif { background: var(--accent); }
.comment .lien-discret { padding: 6px 0 0; }
@media (min-width: 700px) { .comment { grid-template-columns: 170px 1fr; } .cm-cible svg { width: 170px; height: 170px; } }

/* Interrupteur « ordre au hasard » : vert = oui, orange = non */
.bascule {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 12px 14px; text-align: left;
  border-radius: 12px; border: 1.5px solid; transition: background .2s, border-color .2s;
}
.bascule.oui { border-color: var(--vert-go); background: rgba(47, 165, 106, .12); }
.bascule.non { border-color: var(--orange); background: rgba(224, 138, 44, .10); }
.bs-icone svg { width: 24px; height: 24px; }
.bascule.oui .bs-icone { color: var(--vert-go); }
.bascule.non .bs-icone { color: var(--orange); }
.bs-texte { flex: 1; display: flex; flex-direction: column; }
.bs-texte small { color: var(--doux); font-size: 13px; }
.bs-interrupteur { width: 50px; height: 30px; border-radius: 999px; position: relative; flex: none; transition: background .2s; }
.bascule.oui .bs-interrupteur { background: var(--vert-go); }
.bascule.non .bs-interrupteur { background: var(--orange); }
.bs-interrupteur i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.bascule.oui .bs-interrupteur i { transform: translateX(20px); }

/* Compteur de manches */
.compteur { display: flex; align-items: center; gap: 10px; }
.compteur button { width: 52px; height: 52px; border-radius: 12px; border: 1px solid var(--ligne); background: var(--surface); font-size: 26px; font-weight: 600; }
.compteur span { flex: 1; text-align: center; font-size: 16px; }
.compteur b { font-size: 20px; }

/* Finitions conseillées */
.finitions { margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--ligne); }
.fi-titre { font-size: 13px; color: var(--doux); margin-bottom: 6px; }
.fi-titre b { color: var(--texte); font-size: 15px; }
.fi-routes { display: flex; gap: 6px; flex-wrap: wrap; }
.fi-route { flex: 1 1 150px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--ligne); background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.fi-route.choisie { border-color: var(--vert-go); box-shadow: inset 0 0 0 1px var(--vert-go); }
.fi-route small { color: var(--doux); font-size: 12px; }
.fi-route.choisie small { color: #8fd8b2; }
.fi-fleches { display: flex; gap: 4px; align-items: center; }
.fi-f { padding: 3px 8px; border-radius: 6px; font-weight: 700; font-size: 16px; background: #2e3338; }
.fi-f.t { background: rgba(214, 60, 54, .25); color: #ff8a84; }
.fi-f.d, .fi-f.b { background: rgba(31, 143, 80, .28); color: #7fe0a8; }

/* Historique des volées pendant la partie */
.p-histo { grid-area: histo; padding: 4px 8px 0; min-width: 0; }
.hi-titre { display: none; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--doux); font-weight: 600; margin: 4px 0 6px; }
.hi-vide { color: #5f676e; font-size: 13px; padding: 4px; }
.hi-liste { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; }
.hi-liste li {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--surface);
  border-left: 3px solid var(--ligne); font-size: 14px; white-space: nowrap; margin-bottom: 4px;
}
.hi-tour { color: #6f777e; font-size: 12px; min-width: 16px; }
.hi-nom { color: var(--doux); }
.hi-fl { flex: 1; font-weight: 600; }
.hi-tot { font-weight: 800; font-size: 16px; min-width: 32px; text-align: right; }
.hi-apres { color: var(--doux); font-size: 13px; min-width: 44px; text-align: right; }
.hi-bon { border-left-color: var(--vert-go); background: rgba(47, 165, 106, .10); }
.hi-bon .hi-tot { color: #7fe0a8; }
.hi-top { border-left-color: #f0c040; background: rgba(240, 192, 64, .12); }
.hi-top .hi-tot { color: #f0c040; }
.hi-mauvais { border-left-color: var(--orange); background: rgba(224, 138, 44, .08); }
.hi-mauvais .hi-tot { color: #f0a860; }

.ordre { counter-reset: o; margin-bottom: 16px; }
.ordre li { counter-increment: o; justify-content: flex-start; gap: 12px; }
.ordre li::before { content: counter(o); color: var(--accent); font-weight: 700; width: 18px; }

/* Tablette en largeur : historique en liste verticale qui défile (placé après les règles de base) */
@media (orientation: landscape) and (min-width: 640px) {
  .p-histo { padding: 6px 12px; overflow-y: auto; min-height: 0; }
  .hi-liste { flex-direction: column; overflow: visible; }
  .hi-titre { display: block; }
}

/* Téléphone : rien ne doit déborder en largeur ; finitions compactes */
.p-scores, .p-histo, .p-saisie, .p-actions { min-width: 0; }
@media (orientation: portrait), (max-width: 639px) {
  .p-grille { grid-template-columns: minmax(0, 1fr); }
  .fi-routes { flex-wrap: nowrap; }
  .fi-route { flex: 1 1 0; min-width: 0; padding: 6px; }
  .fi-route small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fi-f { font-size: 14px; padding: 2px 5px; }
}

/* ======================= Version 7 : grands écrans ======================= */

/* Réglage d'une partie : blocs (cartes) ; deux colonnes dès que l'écran est assez large */
.c-colonnes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 28px; }
.c-col { min-width: 0; }
.bloc-reglage { margin: 14px 0; }
.bloc-reglage > .etiquette-bloc:first-child { margin-top: 0; }
.bloc-reglage .groupe:first-of-type { margin-top: 8px; }
.compteur { max-width: 380px; }
.compteur span { flex: 1; }

@media (min-width: 820px) {
  #config .defile { padding: 8px 28px 32px; }
  .c-colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1280px; margin: 0 auto; }
  .bloc-reglage { background: var(--surface); border: 1px solid var(--ligne); border-radius: 16px; padding: 16px 18px; }
  .comment { margin: 14px 0; }
  .bloc-reglage .etiquette-bloc { margin: 0 0 4px; }
  .liste-joueurs li:last-child { border-bottom: 0; }
  .bascule { max-width: none; }
  .pied { display: flex; justify-content: center; }
  .pied .b-go { max-width: 560px; }
  .pied-2 { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 280px); justify-content: center; }
}

/* Tablettes : tout un peu plus grand pour le doigt */
@media (min-width: 820px) and (min-height: 600px) {
  .choix button { min-height: 48px; padding: 10px 18px; font-size: 16px; }
  .puce { min-height: 46px; padding: 10px 18px; font-size: 16px; }
  .liste-joueurs li { min-height: 54px; font-size: 17px; }
  .b-mini { width: 46px; height: 46px; }
  .ajout input { padding: 14px; font-size: 17px; }
  .compteur button { width: 58px; height: 58px; }
  .b-go { min-height: 66px; font-size: 19px; }
}

/* Contenu centré et pas trop étiré sur les très grands écrans */
@media (min-width: 1100px) {
  #accueil .defile > *, #historique .defile > *, #fin .defile > * { max-width: 1320px; margin-left: auto; margin-right: auto; }
  .liste-jeux { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .modal-boite { max-width: 620px; }
}

/* Partie sur tablette en largeur : cible un peu moins large pour laisser des touches bien plus grandes */
@media (orientation: landscape) and (min-width: 640px) {
  .p-grille { grid-template-columns: minmax(340px, 1fr) auto; }
  .p-cible { width: min(calc(100vh - 64px), 50vw); }
  .k-mods { gap: 6px; margin-bottom: 6px; }
  .k-nums { gap: 6px; }
  #clavier button { height: clamp(58px, 9vh, 96px); font-size: clamp(20px, 3vh, 30px); border-radius: 10px; }
  #clavier .k-mods button { height: clamp(50px, 7vh, 76px); font-size: clamp(16px, 2.3vh, 22px); }
  .p-actions { gap: 8px; }
  .p-actions button { min-height: clamp(56px, 8vh, 84px); font-size: clamp(15px, 2.1vh, 20px); }
  .j-grand { font-size: clamp(36px, 6vh, 60px); }
  .j-nom { font-size: clamp(14px, 1.9vh, 18px); }
  .v-fleches .f { min-width: clamp(48px, 6vw, 72px); height: clamp(32px, 4.5vh, 44px); font-size: clamp(15px, 2.1vh, 20px); }
  .v-total, .v-qui { font-size: clamp(16px, 2.6vh, 26px); }
  .hi-liste li { font-size: clamp(14px, 1.9vh, 18px); padding: 8px 12px; }
  .hi-tot { font-size: clamp(16px, 2.2vh, 22px); }
  .fi-f { font-size: clamp(15px, 2.1vh, 20px); }
}
/* Tablette en largeur : clavier en 3 lignes de 7, touches presque carrées et bien plus grandes */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 560px) {
  .k-nums { grid-template-columns: repeat(7, 1fr); }
  #clavier .k-nums button { height: clamp(60px, 9.5vh, 104px); font-size: clamp(22px, 3.4vh, 34px); }
}

/* Tablette tenue debout : touches plus grandes, la cible prend le reste de la place */
@media (orientation: portrait) and (min-width: 700px) {
  .p-saisie { padding: 0 12px; }
  .k-mods, .k-nums { gap: 6px; }
  #clavier button { height: clamp(60px, 6.5vh, 92px); font-size: clamp(20px, 2.6vh, 30px); border-radius: 10px; }
  #clavier .k-mods button { height: clamp(52px, 5vh, 72px); font-size: 18px; }
  .p-actions { gap: 8px; padding: 8px 12px 12px; }
  .p-actions button { min-height: clamp(56px, 5.5vh, 80px); font-size: 17px; }
  .j-grand { font-size: clamp(36px, 4vh, 56px); }
  .hi-liste li { font-size: 16px; }
}

/* ======================= Version 7 : règles intégrées, finitions visuelles ======================= */
:root { --cat-0: #e5484d; --cat-1: #4f8ef7; --cat-2: #2fa56a; }
body { background: radial-gradient(1400px 700px at 15% -10%, #1c2127 0%, var(--fond) 55%) fixed, var(--fond); }
.barre { background: rgba(18, 20, 22, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Bouton « Règles » bien visible */
.b-regles {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid #4a5158; background: rgba(255, 255, 255, .04); font-size: 14px; font-weight: 600; color: var(--texte);
}
.b-regles svg { width: 17px; height: 17px; }
.b-regles:active { background: var(--surface-2); }
.cj-regles {
  width: auto; height: auto; padding: 7px 12px; border-radius: 999px; border: 1px solid #424950; color: var(--texte);
  font-size: 13px; font-weight: 600; background: rgba(255, 255, 255, .03);
}

/* Titres de catégorie et tuiles colorées par catégorie */
.titre-cat { display: flex; flex-direction: column; padding-left: 12px; border-left: 3px solid; color: var(--texte); font-size: 14px; }
.titre-cat.cat-0 { border-color: var(--cat-0); } .titre-cat.cat-1 { border-color: var(--cat-1); } .titre-cat.cat-2 { border-color: var(--cat-2); }
.titre-cat span { color: var(--doux); }
.carte-jeu { position: relative; overflow: hidden; box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 6px 18px rgba(0, 0, 0, .18); }
.carte-jeu::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.carte-jeu.cat-0::before { background: var(--cat-0); } .carte-jeu.cat-1::before { background: var(--cat-1); } .carte-jeu.cat-2::before { background: var(--cat-2); }
.cj-icone { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%); }
.carte-jeu:hover .cj-icone svg, .carte-jeu:focus-visible .cj-icone svg { transform: scale(1.06); }
.cj-icone svg { transition: transform .25s; }
@media (min-width: 820px) {
  .carte-jeu { grid-template-columns: 84px 1fr auto; padding: 14px 10px 14px 16px; }
  .cj-icone, .cj-icone svg { width: 84px; height: 84px; }
  .cj-nom { font-size: 18px; }
  .cj-court { font-size: 15px; }
}
.vedette { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.v-boutons .b-regles { padding: 8px 14px; }

/* Réglage : « Comment jouer » plus grand, toutes les étapes écrites */
.comment { grid-template-columns: 150px 1fr; align-items: start; }
.cm-cible svg { width: 150px; height: 150px; }
.cm-etapes { margin: 4px 0 10px; padding-left: 20px; color: var(--doux); font-size: 14px; }
.cm-etapes li { padding: 3px 0; transition: color .3s; }
.cm-etapes li.actif { color: var(--texte); font-weight: 600; }
.cm-etapes li::marker { color: var(--doux); }
.cm-etapes li.actif::marker { color: var(--accent); }
@media (min-width: 820px) {
  .comment { grid-template-columns: 220px 1fr; padding: 16px 18px; }
  .cm-cible svg { width: 220px; height: 220px; }
  .cm-etapes { font-size: 16px; }
}

/* Fiche des règles (grande fenêtre) */
#modal.large .modal-boite { max-width: 860px; padding: 20px 22px; }
.fr-tete { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; }
.fr-cible svg { width: 140px; height: 140px; }
.fr-cat { color: var(--doux); font-size: 13px; }
.fr-titre h2 { margin: 2px 0 4px !important; font-size: 24px !important; }
.fr-court { margin: 0 0 6px; color: var(--doux); }
.fr-legende { margin: 0; font-weight: 600; min-height: 42px; }
.fr-etapes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.fr-etapes li { background: var(--surface-2); border: 1px solid var(--ligne); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; font-size: 14px; transition: border-color .3s; }
.fr-etapes li.actif { border-color: var(--accent); }
.fr-etapes svg { width: 100px; height: 100px; }
.fr-options { margin: 0; display: grid; gap: 8px; }
.fr-options div { display: grid; grid-template-columns: 170px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.fr-options dt { color: var(--doux); }
.fr-options dd { margin: 0; }
.boutons-2 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .fr-tete { grid-template-columns: 200px 1fr; }
  .fr-cible svg { width: 200px; height: 200px; }
  .boutons-2 { grid-template-columns: 2fr 1fr; }
  .boutons-2 .b-second:only-child { grid-column: 1 / -1; }
}
@media (max-width: 599px) { .fr-options div { grid-template-columns: 1fr; gap: 2px; } }

/* Jeu à découvrir : sur grand écran, ses étapes en images remplissent la largeur */
.v-etapes { display: none; }
@media (min-width: 980px) {
  .vedette { grid-template-columns: 190px minmax(260px, 1fr) minmax(0, 1.4fr); }
  .v-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
  .v-etapes li { background: rgba(255, 255, 255, .03); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 13px; color: var(--doux); transition: border-color .3s, color .3s; }
  .v-etapes li.actif { border-color: var(--accent); color: var(--texte); }
  .v-etapes svg { width: 84px; height: 84px; }
}

.fr-conseils { margin: 0; padding-left: 20px; }
.fr-conseils li { padding: 4px 0; }
.fr-conseils li::marker { color: var(--cat-2); }
.fr-etapes svg { width: 120px; height: 120px; }

@media (min-width: 820px) {
  #c-corps > .comment { max-width: 1280px; margin: 14px auto; }
  .c-colonnes .bloc-reglage:first-child { margin-top: 0; }
  .c-col { display: flex; flex-direction: column; gap: 14px; }
  .c-col > .bloc-reglage { margin: 0; }
  .c-col > .bloc-reglage:last-child { flex: 1; }
}

.cm-etapes .fr-mini { display: none; }
@media (min-width: 980px) {
  .cm-etapes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .cm-etapes li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 10px; border-radius: 12px; border: 1px solid var(--ligne); background: rgba(255, 255, 255, .02); }
  .cm-etapes li.actif { border-color: var(--accent); }
  .cm-etapes .fr-mini { display: block; }
  .cm-etapes svg { width: 96px; height: 96px; }
}