/* GiroQuest — la collection, la chasse, les trophées */
:root { --accent: var(--color-accent-2); --accent-fonce: var(--color-accent-2-700); }

/* Une ligne, et non plus deux : le compte à gauche, le bouton de carte à
   droite. Le nom du conquérant est monté dans la barre. */
.go-stats {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--asphalte-2); border: 1px solid var(--ligne);
  border-radius: 14px; padding: 13px 16px; font-size: 15.5px; color: var(--craie-douce);
}
.go-stats > span:first-child { flex: 1 1 auto; min-width: 0; }
.go-stats #carte-bascule.en-ligne { flex: none; margin-left: auto; }
.go-stats strong { color: var(--accent); font-family: var(--font-body); font-size: 18px; }

.go-caught {
  background: var(--color-accent-2-200); border: 1px solid var(--accent); border-radius: 14px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
  animation: pop .45s ease;
}
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .go-caught { animation: none; } }
.go-caught .titre {
  font-family: var(--font-heading); font-weight: 800; font-size: 26px;
  letter-spacing: 1px; color: var(--accent); text-transform: uppercase;
}

.captures { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 15px; }
.captures li {
  background: var(--asphalte-2); border: 1px solid var(--ligne);
  border-radius: 9px; padding: 7px 12px; color: var(--craie-douce);
}
.captures li.muted { background: none; border: none; padding: 0; }

/* Le nom du conquérant et sa validation, côte à côte. Le même geste que le
   renommage dans « Mes ronds-points », et le même dessin : le champ s'étire,
   le bouton garde sa taille. */
.go-nom { display: flex; align-items: center; gap: 8px; }
.go-nom input { flex: 1 1 auto; min-width: 0; }
.go-nom .btn { flex: 0 0 auto; }

/* ---------- Mes conquêtes ----------
   Un échelon par ligne, du plus grand au plus petit. Chaque ligne se plie ;
   celles qui n'ont rien à dire ne sont pas construites du tout. */
.conq { border-top: 1px dashed var(--ligne); padding-top: 10px; }
.conq:first-child { border-top: none; padding-top: 0; }
.conq > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 2px 0;
}
.conq > summary::-webkit-details-marker { display: none; }
.conq > summary h4 {
  margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: 14px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--craie-douce);
}
.conq-compte {
  font-size: 12.5px; color: var(--craie-douce); opacity: .75;
  font-variant-numeric: tabular-nums;
}
/* Le chevron de fin de ligne, dessiné comme celui des sections. */
.conq > summary::after {
  content: ""; margin-left: auto; width: 7px; height: 7px;
  border-right: 2px solid var(--ligne); border-bottom: 2px solid var(--ligne);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
.conq[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
@media (hover: hover) and (pointer: fine) {
  .conq > summary:hover h4, .conq > summary:hover .conq-compte { color: var(--craie); }
}


.insignes { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 0 2px; }

/* L'insigne : une marque, un nom, une fraction. Achevé, il est plein et mène
   au territoire. Entamé, il est gris et s'ouvre sur ce qu'il reste à y
   prendre — c'est un bouton, pas un lien, parce qu'il n'emmène nulle part. */
.insigne {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 8px; border-radius: 999px; font-size: 13.5px;
  border: 1.5px solid var(--ligne); background: var(--asphalte-2);
  color: var(--craie-douce); text-decoration: none; font-family: var(--font-body);
  cursor: default;
}
.insigne svg { width: 17px; height: 17px; display: block; fill: currentColor; flex: none; }
.insigne .nom { font-weight: 600; }
.insigne .part { font-variant-numeric: tabular-nums; opacity: .7; font-size: 12.5px; }

/* Achevé : la couleur du jeu, pleine. C'est le seul endroit du carnet où
   quelque chose est terminé — autant que ça se voie de loin. */
.insigne.fait {
  background: var(--accent); border-color: var(--accent); color: var(--sur-couleur);
}
.insigne.fait .part { opacity: .85; }
a.insigne.fait { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  a.insigne.fait:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); }
}


/* Entamé : gris, et cliquable. */
.insigne.entame { cursor: pointer; opacity: .72; }
@media (hover: hover) and (pointer: fine) {
  .insigne.entame:hover { opacity: 1; border-color: var(--craie-douce); }
}

.insigne.entame[aria-expanded="true"] {
  opacity: 1; border-color: var(--accent); color: var(--craie);
}
.insigne:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Ce qu'il reste à prendre, sous la ligne de l'insigne ouvert. */
/* Dans la rangée d'insignes, la liste prend une rangée entière à elle, juste
   sous l'insigne qu'on a cliqué (voir giroquest.js). */
.reste { flex: 1 0 100%; padding: 6px 0 2px; display: flex; flex-direction: column; gap: 6px; }
.reste-titre { font-size: 14px; color: var(--craie-douce); }
.reste-titre b { color: var(--craie); font-variant-numeric: tabular-nums; }
/* Les sections se séparaient d'un filet, faute d'air entre elles : deux titres
   repliés l'un sous l'autre ne se distinguaient plus d'une liste. L'air est
   venu depuis — vingt-quatre pixels dans tous les jeux — et deux traits qui
   encadraient « Mes conquêtes » n'avaient plus rien à séparer. */
/* L'écran de jeu se tient comme le panneau qui le porte — mêmes seize pixels
   entre ses lignes —, pour que la règle des sections y ajoute la même
   respiration qu'ailleurs. Il portait sa propre marge de bloc ; theme.css la
   pose maintenant pour toute la colonne. */
#go-play { display: flex; flex-direction: column; gap: var(--space-4); }
/* Et les boutons ne collent pas davantage au relevé qui les surmonte. */
/* La chasse et la carte côte à côte : le premier prend la place qui reste, le
   second garde son rond. */
.go-actions { display: flex; align-items: center; gap: var(--space-3); }
/* Le bouton est seul sur sa ligne depuis que la carte a rejoint le bandeau :
   il la prend toute. */
.go-actions #go-hunt { flex: 1 1 auto; margin-top: 0; }

/* croix de fermeture de l'encart — l'encart s'efface aussi tout seul en 30 s */
.go-caught { position: relative; padding-right: 34px; }
.encart-x {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  background: none; border: 1px solid var(--ligne); border-radius: 8px;
  color: var(--craie-douce); cursor: pointer; font-size: 13px; line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .encart-x:hover { border-color: var(--sodium); color: var(--craie); }
}


/* Ce qui attend le réseau. Discret mais présent : on doit pouvoir vérifier que
   rien n'est perdu avant de fermer la page. */
.go-file {
  color: var(--accent); font-size: 14px;
  border-left: 3px solid var(--accent); padding-left: 10px;
}
.go-file[hidden] { display: none; }

/* La ligne d'un carrefour qui reste à prendre : un bouton qui a l'air du texte
   qu'il remplace, souligné de pointillés pour dire qu'il mène quelque part —
   sur la carte, où il pointe le carrefour. */
.captures .prise-cible {
  font: inherit; color: inherit; background: none; border: none; padding: 0;
  cursor: pointer; text-align: left;
  text-decoration: underline dotted; text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .captures .prise-cible:hover { color: var(--color-accent); }
}
.captures .prise-cible:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

/* — LE FILTRE DE LA CARTE : l'entonnoir, en haut à gauche à l'opposé des
     commandes, taillé comme elles (la règle commune vit dans vues.css). Il
     ouvre une petite boîte posée sous lui, deux cases : ce que la carte
     montre. Sous la barre du haut (900), comme tout ce qui est posé sur une
     carte qui défile. — */
#map .carte-filtre { position: absolute; top: 12px; left: 14px; z-index: 800; }
#map .carte-filtre[aria-expanded="true"] { background: color-mix(in srgb, var(--color-text) 12%, var(--color-surface)); }
.carte-filtre-boite {
  position: absolute; top: 54px; left: 14px; z-index: 800;
  display: grid; gap: 8px; padding: 10px 12px;
  border: var(--rule-light); border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--shadow-sm);
  font-family: var(--font-body); font-weight: 700; font-size: 10.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-text);
}
/* En ligne : la feuille du jeu met tout « label » en colonne (une étiquette
   au-dessus de son champ), et la case se retrouvait sous son mot. */
.carte-filtre-boite label { display: flex; flex-direction: row; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; line-height: 1.2; }
.carte-filtre-boite input { width: 15px; height: 15px; margin: 0; accent-color: var(--color-accent); }

/* — LA BULLE « ROND-POINT CONQUIS ! » : posée sur le point qui vient de
     passer au vert, quelques secondes, avec le lien de sortie vers sa fiche.
     La police du site plutôt que celle de Leaflet, et un arrondi du système. — */
.leaflet-tooltip.bulle-conquis {
  font-family: var(--font-body); font-weight: 700; font-size: 12px; line-height: 1.3;
  color: var(--color-text); background: var(--color-surface);
  border: var(--rule-light); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  padding: 7px 11px; white-space: nowrap;
}
.leaflet-tooltip.bulle-conquis .lien-sortie { margin-left: 8px; font-size: 11px; }
.leaflet-tooltip-top.bulle-conquis::before { border-top-color: var(--color-text); }