/* LE BRIEFING DU PARKING, ET LES CARTES DE PARCOURS.

   Dixieme feuille, chargee apres finale.css. Tout y est porte par
   `#screen-brief` ou par `.rcard`, donc sa place dans la cascade ne peut rien
   deranger ailleurs — meme regle que gain.css et finale.css. Comme les autres,
   elle doit rester alignee entre frontend/index.html et SHELL_FILES dans
   frontend/sw.js.

   `.rcard` sort du bloc `#screen-brief` a dessein : la MEME carte sert au
   briefing du joueur et a la feuille d'affectation de l'organisateur. Deux
   dessins auraient fini par annoncer deux mises en page pour le meme sentier.

   Trois partis pris :

   - **Une diapo par ecran, et l'on glisse.** `scroll-snap` plutot qu'un rail
     pilote a la main : c'est le geste natif, il ne s'apprend pas, et il ne
     coute ni pointeur capture ni couche de compositeur.
   - **La colonne est un flex.** Le pied — les points et le bouton — ne defile
     jamais : c'est sur lui qu'on appuie, il ne doit pas passer sous le bord de
     la dalle.
   - **Le trace est un SVG, pas une carte.** Ni tuiles, ni zoom, ni doigt : on
     repond a « ou ca passe ? », pas a « ou suis-je ? ». */

#screen-brief {
  padding: 0;
  overflow: hidden;
}

#screen-brief.active {
  display: flex;
  flex-direction: column;
}

.bf-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 8%, rgba(127, 208, 127, 0.14), transparent 62%),
    radial-gradient(90% 60% at 50% 100%, rgba(226, 201, 141, 0.09), transparent 70%),
    linear-gradient(180deg, #0a1a12 0%, #071510 100%);
}

.bf-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: calc(var(--safe-top) + 10px) 14px 6px;
}

.bf-head .brand-slot { display: contents; }
.bf-logo { height: 26px; width: auto; opacity: 0.9; }
.bf-head .round-btn { margin-left: auto; }

/* Le pont : une diapo par ecran, cadrees par le glissement lui-meme. */
.bf-deck {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.bf-deck::-webkit-scrollbar { display: none; }

.bf-slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: flex-start;
  padding: 6px 14px 10px;
  overflow-y: auto;
}

.bf-card {
  width: 100%;
  text-align: center;
  padding: 18px 16px 20px;
}

.bf-crest { margin: 2px auto 10px; width: 76px; }

.bf-lead {
  color: var(--muted, #b9c9b6);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 8px 0 14px;
}

.bf-lead.sm { font-size: 0.85rem; }

.bf-team { margin: 12px 0 0; font-size: 0.95rem; }

/* Les trois briques du haut : ce que l'aventure joue, en trois mots. */
.bf-chips,
.bf-count,
.bf-figs {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.bf-chips { grid-template-columns: repeat(3, 1fr); }
.bf-count,
.bf-figs { grid-template-columns: repeat(2, 1fr); }

.bf-chips li,
.bf-count li,
.bf-figs li {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(226, 201, 141, 0.18);
  border-radius: 12px;
  padding: 10px 8px;
  min-width: 0;
}

.bf-chips b,
.bf-count b,
.bf-figs b {
  display: block;
  color: var(--gold, #e2c98d);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.15;
  /* Un chiffre qui deborde pousserait la brique voisine hors de l'ecran :
     un enfant de grille vaut `min-width: auto`, il faut le dire. */
  overflow-wrap: anywhere;
}

.bf-chips span,
.bf-count span,
.bf-figs span {
  display: block;
  margin-top: 3px;
  font-size: 0.74rem;
  color: var(--muted, #b9c9b6);
}

.bf-chips b { font-size: 0.95rem; }

.bf-total {
  margin: 14px 0 0;
  font-size: 1rem;
}

.bf-total b { color: var(--gold, #e2c98d); font-size: 1.2rem; }

/* Les secrets : des phrases, pas des briques. On raconte ce qui attend, on ne
   le compte pas dans un tableau. */
.bf-secrets {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 9px;
}

.bf-secrets li {
  position: relative;
  padding: 9px 12px 9px 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(226, 201, 141, 0.14);
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--muted, #b9c9b6);
}

.bf-secrets li::before {
  content: "\2022";
  position: absolute;
  left: 11px;
  top: 8px;
  color: var(--gold, #e2c98d);
  font-weight: 900;
}

.bf-secrets b { color: var(--gold, #e2c98d); }

.bf-foot {
  position: relative;
  z-index: 1;
  flex: none;
  padding: 8px 14px calc(var(--safe-bot) + 16px);
}

.bf-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.bf-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(238, 241, 230, 0.22);
  transition: background 0.2s, transform 0.2s;
}

.bf-dot.on {
  background: var(--gold, #e2c98d);
  transform: scale(1.35);
}

/* ------------------------------------------------ LA CARTE D'UN PARCOURS

   Le trace a gauche, les chiffres a droite : on regarde ou ca passe, puis on
   lit combien de temps ca prend. En bouton, elle se coche — c'est le meme
   dessin, avec un anneau et une pastille de plus. */
.rcard-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
}

.rcard {
  display: flex;
  gap: 10px;
  width: 100%;
  text-align: left;
  align-items: stretch;
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(226, 201, 141, 0.16);
  border-radius: 14px;
  color: inherit;
  font: inherit;
}

button.rcard { cursor: pointer; }

.rcard.sel {
  border-color: var(--rc, #7fb069);
  box-shadow: 0 0 0 1px var(--rc, #7fb069) inset, 0 6px 18px rgba(0, 0, 0, 0.35);
  background: rgba(255, 255, 255, 0.07);
}

.rc-plan {
  position: relative;
  flex: 0 0 108px;
  width: 108px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.28);
}

.rc-map { display: block; width: 100%; height: 100%; }

.rc-map.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  font-size: 0.7rem;
  color: var(--muted, #b9c9b6);
}

.rc-letter {
  position: absolute;
  left: 5px;
  top: 5px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 7px;
  background: var(--rc, #7fb069);
  color: #071510;
  font-weight: 900;
  font-size: 0.78rem;
  line-height: 20px;
  text-align: center;
}

.rc-tick {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--rc, #7fb069);
  color: #071510;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rc-tick svg { width: 14px; height: 14px; }

.rc-body {
  flex: 1 1 auto;
  /* Un enfant de flex refuse de retrecir sous son contenu : un nom de parcours
     en une ligne pousserait les chiffres hors de la carte. */
  min-width: 0;
}

.rc-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.rc-head b {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}

.rc-diff {
  flex: none;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: 0.9;
}

.rc-diff.lvl1 { color: #7fb069; }
.rc-diff.lvl2 { color: #a9c46c; }
.rc-diff.lvl3 { color: #e2c98d; }
.rc-diff.lvl4 { color: #d08a63; }
.rc-diff.lvl5 { color: #d9695c; }

/* Le meme rouge que la poignee d'un sentier a risque (cartographe) : c'est le
   meme signe, il doit se reconnaitre du meme coup d'oeil. */
.rc-facts i.rc-risk { color: #d9695c; }

.rc-facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 8px;
  margin: 6px 0 0;
  padding: 0;
}

.rc-facts i {
  font-style: normal;
  font-weight: 800;
  color: var(--gold, #e2c98d);
  font-size: 0.85rem;
}

/* La valeur et son mot tiennent sur UNE ligne : « 13.3 km » puis « marche »
   qui passe a la ligne fait lire deux fois la meme case. Ce qui deborde se
   coupe — le chiffre, lui, est toujours entier. */
.rc-facts li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-facts span {
  color: var(--muted, #b9c9b6);
  font-size: 0.7rem;
  margin-left: 4px;
}

.rc-note { margin: 6px 0 0; }

/* Le profil d'altitude : seulement sur la carte DETAILLEE (`opts.flat`), donc
   jamais dans une liste de plusieurs sentiers a comparer. */
.rc-profile-wrap {
  margin: 8px 0 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.rc-profile { display: block; width: 100%; height: 62px; }

/* Sur une dalle etroite, le trace passe au-dessus : 108 px de plan plus quatre
   chiffres ne tiennent pas cote a cote. */
@media (max-width: 380px) {
  .rcard { flex-direction: column; }
  .rc-plan { flex: none; width: 100%; height: 92px; }
}

/* L'ILLUSTRATION EN TETE DE PAGE (2.112.4) : elle mange le haut de la carte,
   bord a bord, et reste basse — les chiffres doivent tenir sous elle sans
   faire defiler sur un petit telephone. */
.bf-illu {
  display: block;
  width: calc(100% + 32px);
  max-width: none;
  margin: -18px -16px 12px;
  aspect-ratio: 3 / 2;
  max-height: 30vh;
  object-fit: cover;
  object-position: center 45%;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: 1px solid rgba(226, 201, 141, 0.28);
  -webkit-user-drag: none;
}