/* ==================================================================
   OPTIMISTES — identité « carte de score »
   Papier crème, encre chaude, un seul vert. Serif pour la voix du
   club (titres, chiffres), sans-serif pour l'action. Aucune icône.
   ================================================================== */
:root {
  --encre: #23271F;
  --encre-2: #5C5F53;
  --encre-3: #8F9184;
  --papier: #F6F4EC;
  --carte: #FFFFFF;
  --surface: #EFEDE2;
  --filet: #E2DFD0;
  --filet-fort: #C6C2AE;
  --vert: #17603A;
  --vert-sombre: #114A2C;
  --vert-doux: #E7EFE3;
  --ambre-bg: #F6EDD8;
  --ambre-tx: #7C5310;
  --rouge: #9E2F2F;
  --rouge-bg: #F8ECEC;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
/* Sans ce garde-fou, un « display » posé sur une classe l'emporte sur l'attribut
   hidden (règle du navigateur, moins spécifique) et l'élément reste visible. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 clamp(16.5px, 1.2vw + 12px, 18px)/1.6 var(--sans);
}
.app { max-width: 720px; margin: 0 auto; padding: 0 20px 72px; }
:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--vert-doux); }

/* ==================== EN-TÊTE — wordmark + double filet ==================== */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 34px 0 20px;
  border-bottom: 4px double var(--encre);
}
.sous-titre {
  display: block;
  font: 600 12.5px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin-bottom: 10px;
}
h1 {
  margin: 0;
  font: 600 clamp(32px, 7vw, 42px)/1 var(--serif);
  letter-spacing: .045em;
  color: var(--encre);
}
.date-pill {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  padding: 6px 2px;
  font: italic 600 19px/1.3 var(--serif);
  color: var(--vert);
  border-bottom: 1px dashed var(--filet-fort);
  cursor: pointer;
  transition: border-color .15s;
}
.date-pill:hover { border-bottom-color: var(--vert); }
.date-pill input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
}

/* ==================== SECTIONS — blocs rythmés par des filets ==================== */
section.carte, details.carte {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--filet);
  padding: 30px 0 8px;
  margin-top: 30px;
}
#section-inscrits { border-top: 0; margin-top: 14px; }
h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 18px;
  font: 600 24px/1.2 var(--serif);
  letter-spacing: .01em;
}
.num { font: italic 600 24px/1 var(--serif); color: var(--vert); }
.num::after { content: "."; }

/* ==================== BOUTONS ==================== */
.btn {
  font: 600 16.5px/1.2 var(--sans);
  border-radius: 12px;
  padding: 13px 22px;
  min-height: 50px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.btn:active { transform: translateY(1px); }
.btn-principal { background: var(--vert); color: #fff; border-color: var(--vert); }
.btn-principal:hover { background: var(--vert-sombre); }
.btn-secondaire { background: transparent; color: var(--encre); border-color: var(--filet-fort); }
.btn-secondaire:hover { background: var(--carte); border-color: var(--encre-3); }
.btn-danger { background: transparent; color: var(--rouge); border-color: var(--filet-fort); }
.btn-danger:hover { background: var(--rouge-bg); border-color: var(--rouge); }
.lien {
  background: none; border: none; padding: 0;
  color: var(--vert);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  font: inherit; font-size: 15.5px;
}
.lien:hover { color: var(--vert-sombre); }
.lien-suppr { color: var(--rouge); }

/* ==================== SÉLECTEUR DE MODE — segmenté ==================== */
.segment {
  display: inline-flex;
  border: 1px solid var(--filet-fort);
  border-radius: 12px;
  background: var(--carte);
  padding: 3px;
  gap: 3px;
}
.seg {
  font: 600 15.5px/1.2 var(--sans);
  color: var(--encre-2);
  background: transparent;
  border: none;
  border-radius: 9px;
  padding: 10px 20px;
  min-height: 44px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.seg:hover { color: var(--encre); }
.seg[aria-pressed="true"] { background: var(--vert); color: #fff; }

/* ==================== ZONE DE DÉPÔT ==================== */
.depot {
  background: var(--carte);
  border: 1px dashed var(--filet-fort);
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  transition: background .15s, border-color .15s;
}
.depot.survol { background: var(--vert-doux); border-color: var(--vert); }
.depot-titre { font: 600 22px/1.35 var(--serif); margin: 0 0 4px; }
.depot-aide { color: var(--encre-3); font-size: 15px; margin: 8px 0 18px; }

/* ==================== PASTILLES JOUEURS ==================== */
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: 999px;
  padding: 0 0 0 6px;
  overflow: hidden;
  max-width: 100%;
  transition: border-color .12s, background .12s;
}
.pastille:hover { border-color: var(--filet-fort); }
.p-nom {
  font: 500 16px/1.2 var(--sans);
  color: var(--encre);
  background: none;
  border: none;
  border-radius: 999px;
  padding: 11px 8px 11px 10px;
  min-height: 44px;
  cursor: pointer;
  transition: color .12s;
}
.p-tag {
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}
.p-tag-9 { background: var(--vert-doux); color: var(--vert-sombre); }
.p-tag-absent { background: var(--surface); color: var(--encre-2); }
/* Action destructive, et le pouce vise mal en plein soleil : cible pleine hauteur,
   séparée du nom par un filet pour qu'on ne la touche pas par accident. */
.p-x {
  font: 400 19px/1 var(--sans);
  color: var(--encre-3);
  background: none;
  border: none;
  border-left: 1px solid var(--filet);
  border-radius: 0 999px 999px 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  flex: none;
  transition: background .12s, color .12s;
}
.p-x:hover { background: var(--rouge-bg); color: var(--rouge); }
/* Absent : nom barré, pastille creusée — l'état doit se voir de loin, en plein soleil */
.pastille.inactif { background: transparent; border-style: dashed; }
.pastille.inactif .p-nom {
  color: var(--encre-3);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.pastille.manuel { border-color: var(--vert); }
.ajout-ligne { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
#input-ajout { flex: 1; min-width: 180px; }

/* ==================== MESSAGES ==================== */
.avert {
  background: var(--ambre-bg);
  color: var(--ambre-tx);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 15.5px;
}
.erreur {
  background: var(--rouge-bg);
  color: var(--rouge);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 16px 0 0;
  font-size: 15.5px;
  text-align: left;
}
.ok {
  background: var(--vert-doux);
  color: var(--vert-sombre);
  font-weight: 600;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15.5px;
}
.aide { color: var(--encre-3); font-size: 15px; }
/* Ces deux règles remplacent des attributs style= en ligne : la CSP les interdit. */
.aide-espacee { margin-top: 14px; }
.ok-inline { display: inline-block; }

/* ==================== FORMULAIRES ==================== */
input[type="time"], input[type="text"], input[type="number"], input[type="password"], select {
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--filet-fort);
  border-radius: 10px;
  background: var(--carte);
  color: var(--encre);
}
.ligne-reglages {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-bottom: 16px;
}
.ligne-reglages label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--encre-2);
  font-size: 15.5px;
}

/* ==================== CARTES DE DÉPART ==================== */
.groupes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.groupe {
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: 14px;
  padding: 14px 16px 12px;
}
.groupe-titre {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--encre);
  font: 600 19px/1.2 var(--serif);
  color: var(--encre);
}
.groupe-repere {
  font: 600 14px/1 var(--sans);
  color: var(--encre-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mode-shotgun .groupe-repere { color: var(--vert); }
.joueur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  font: 400 17px/1.4 var(--sans);
  color: var(--encre);
  background: none;
  border: none;
  border-radius: 8px;
  padding: 10px;
  min-height: 44px;
  cursor: pointer;
  transition: background .12s;
}
.joueur + .joueur { border-top: 1px solid var(--filet); border-radius: 0 0 8px 8px; }
.joueur:hover { background: var(--vert-doux); }
.joueur.selectionne { background: var(--vert); color: #fff; }
.tag-9 {
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--vert-doux);
  color: var(--vert-sombre);
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
  flex: none;
}
.joueur.selectionne .tag-9 { background: rgba(255,255,255,.22); color: #fff; }
.badge-conflit {
  display: block;
  background: var(--ambre-bg);
  color: var(--ambre-tx);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13.5px;
  line-height: 1.45;
  margin-top: 8px;
}
.badge-conflit.ancien {
  background: transparent;
  color: var(--encre-3);
  padding: 4px 2px;
  border: 0;
}
.barre-tirage { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; }
.ligne-validation { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }

/* ==================== SCORES ==================== */
.scores { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.score-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: 12px;
  padding: 12px 14px;
}
.score-depart { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.score-titre { font: 600 16px/1.3 var(--serif); }
.score-noms { color: var(--encre-3); font-size: 14.5px; }
.score-input {
  width: 92px;
  flex: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ==================== HISTORIQUE ==================== */
summary {
  font: 600 17px/1.3 var(--sans);
  cursor: pointer;
  padding: 4px 0;
  color: var(--encre-2);
  list-style: none;
  display: inline-block;
  text-decoration: underline dashed var(--filet-fort);
  text-underline-offset: 5px;
}
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--encre); text-decoration-color: var(--vert); }
.histo-corps { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.histo-reglage { color: var(--encre-2); font-size: 15.5px; }
.histo-retention { margin: -6px 0 0; color: var(--encre-3); font-size: 14px; }
.histo-meilleur {
  display: grid;
  grid-template-columns: minmax(150px, 190px) 1fr;
  gap: 12px 22px;
  padding: 18px;
  border: 1px solid var(--vert);
  border-radius: 12px;
  background: var(--vert-doux);
}
.meilleur-entete { display: flex; flex-direction: column; align-items: flex-start; }
.meilleur-titre {
  color: var(--vert-sombre);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.meilleur-valeur {
  color: var(--vert-sombre);
  font: 600 42px/1.05 var(--serif);
  font-variant-numeric: tabular-nums;
  margin-top: 5px;
}
.meilleur-egalites { color: var(--encre-2); font-size: 13px; }
.meilleur-personnes { margin: 0; padding: 0; list-style: none; align-self: center; }
.meilleur-personnes li { display: flex; flex-direction: column; padding: 5px 0; }
.meilleur-personnes li + li { border-top: 1px solid rgba(23, 96, 58, .18); }
.meilleur-personnes span { font-weight: 600; line-height: 1.4; }
.meilleur-personnes time { color: var(--encre-2); font-size: 13.5px; }
.histo-session {
  display: flex;
  gap: 4px 16px;
  align-items: baseline;
  flex-wrap: wrap;
  border-top: 1px solid var(--filet);
  padding: 12px 2px 2px;
}
.histo-date { font: 600 17px/1.4 var(--serif); min-width: 190px; }
.histo-groupes { color: var(--encre-2); font-size: 15px; flex: 1; min-width: 200px; }
.histo-score { color: var(--vert); font-weight: 600; font-variant-numeric: tabular-nums; }
.histo-archive {
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--vert-doux);
  color: var(--vert-sombre);
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}
.histo-actions { display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--filet); padding-top: 16px; }
.histo-actions .btn { min-height: 44px; padding: 10px 16px; font-size: 15px; }

footer {
  text-align: center;
  color: var(--encre-3);
  font-size: 13.5px;
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--filet);
}

/* ==================== MOBILE ==================== */
@media (max-width: 600px) {
  .app { padding: 0 16px 56px; }
  header { padding: 26px 0 16px; }
  .date-pill { font-size: 18px; }
  section.carte, details.carte { padding: 24px 0 6px; margin-top: 24px; }
  h2 { font-size: 22px; }
  .depot { padding: 36px 18px; }
  .segment { width: 100%; }
  .seg { flex: 1; }
  .btn-principal { width: 100%; }
  .ligne-validation { flex-direction: column; }
  .ligne-validation .btn { width: 100%; }
  .barre-tirage .btn { width: 100%; }
  .groupes { grid-template-columns: 1fr; }
  .histo-meilleur { grid-template-columns: 1fr; }
  .histo-date { min-width: 0; }
}

/* ==================== IMPRESSION ==================== */
#feuille { display: none; }
@media print {
  body { background: #fff; }
  .app { display: none !important; }
  #feuille { display: block !important; color: #000; font: 15px/1.5 var(--sans); }
  #feuille h1 { font: 600 26px/1.2 var(--serif); letter-spacing: .05em; margin: 0; }
  #feuille .f-date { font: italic 17px/1.4 var(--serif); margin: 4px 0 20px; }
  #feuille .f-groupes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  #feuille .f-groupe { border: 1px solid #000; border-radius: 6px; padding: 10px 16px 12px; break-inside: avoid; }
  #feuille .f-titre { font: 600 16px/1.3 var(--serif); border-bottom: 1px solid #000; padding-bottom: 6px; margin-bottom: 8px; }
  #feuille .f-joueur { font-size: 15.5px; padding: 3px 0; }
  #feuille .f-9 { font-size: 12.5px; color: #555; }
  #feuille .f-score { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #999; font-size: 13.5px; color: #333; }
  #feuille .f-pied { margin-top: 22px; font-size: 11.5px; color: #555; }
}

/* ==================== EN-TÊTE : DÉCONNEXION ==================== */
.entete-droite {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.form-deconnexion { margin: 0; }

/* ==================== ÉCRAN DE CONNEXION ==================== */
.app-connexion { max-width: 460px; }
.carte-connexion { border-top: 0; margin-top: 24px; }
.champ {
  display: block;
  font: 600 12.5px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-2);
  margin: 20px 0 8px;
}
#form-connexion input[type="text"],
#form-connexion input[type="password"] { width: 100%; }
.btn-connexion { width: 100%; margin-top: 26px; }
.btn-connexion[disabled] { opacity: .6; cursor: default; }