/* css/modes.css — LA MARQUE DU MODE D'AVENTURE.

   Le choix illustre (une grande carte par mode, la pancarte de bois) a
   disparu en 2.65.8 avec l'etape ou on le demandait : un parcours n'a qu'un
   mode, il le dit deja partout ou il se montre, et il n'y avait donc plus
   de choix a habiller ici. Ce fichier ne porte plus que la MARQUE d'un mode
   sur un item deja existant. */

/* ------------------------------------------------- l'ecran du hub */

/* LE FOND DU BOUTON « Jouer » : le sous-bois flou de la maquette, a la place
   du decor d'accueil. Le hub pose la classe sur l'ecran (js/hub.js) et c'est
   tout ce qu'il en sait — l'adresse, comme partout, passe par le theme. Le
   nom du fichier date de l'ancien onglet « Modes » (2.65.13) : le decor n'a
   pas change, seule la porte qui y mene a change de bouton. */
#screen-hub.onglet-jouer .home-bg {
  background-image: url("../assets/bg/modes-fond.webp");
}

/* ================================================================ LA MARQUE

   Ce qui dit le mode d'un parcours PARTOUT AILLEURS : la rangee du hub, la
   carte a la une, la fiche d'un lieu, la liste du cartographe. Deux signes,
   et ils ne font pas le meme travail.

   LA BANDE LATERALE se lit sans etre lue. On balaye une liste de dix
   parcours, et l'oeil trie des couleurs bien avant des mots — c'est le seul
   moyen de distinguer plusieurs facons de jouer sur une vignette de 120 px.

   LA PASTILLE nomme. Un picto inconnu ne s'apprend pas tout seul : « Course »
   se comprend du premier coup, et l'icone qui le precede finit par suffire au
   bout de trois ecrans. C'est ce qui a permis de passer de trois modes a six
   sans que rien ne devienne illisible — six couleurs de filet ne se
   distinguent plus a coup sur, six pastilles nommees si. */

.a-mode {
  --md-teinte: var(--gold);
  position: relative;
  /* La bande vit dans le padding gauche de l'item : sans elle, elle
     mordrait sur la vignette ou sur le texte selon l'item. */
  overflow: hidden;
}
.a-mode.m-piste  { --md-teinte: var(--moss); }
.a-mode.m-tresor { --md-teinte: var(--gold); }
.a-mode.m-course { --md-teinte: var(--sky); }
/* LES TROIS MODES NEUFS. Leurs teintes sont prises LOIN des trois premieres :
   a quatre pixels de large, un filet se lit a la couleur et rien d'autre, et
   deux verts voisins ne se distinguent pas. La promenade prend le vert pale
   du parchemin — rien en jeu, rien qui crie ; le contagieux le rouge ; la
   collecte l'orange des sous-bois d'automne. */
.a-mode.m-promenade  { --md-teinte: var(--parch-dim); }
.a-mode.m-contagieux { --md-teinte: var(--rot); }
.a-mode.m-collecte   { --md-teinte: var(--ember); }

/* LE FILET. Pose en `::before` et non en `border-left` : une bordure
   deplacerait tout le contenu de l'item de trois pixels, et les listes ou
   deux modes se suivent se mettraient a onduler.

   `::before` ET NON `::after` : la carte a la une y pose deja son voile —
   le second arrive gagne, et l'un des deux disparaissait sans bruit. */
.a-mode::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--md-teinte) 92%, transparent),
    color-mix(in srgb, var(--md-teinte) 45%, transparent));
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  pointer-events: none;
  /* AU-DESSUS DE LA PHOTO. La carte a la une pose son decor en `position:
     absolute` : sans rang, le filet passait dessous et n'existait plus. */
  z-index: 3;
}

.mode-pastille {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--md-teinte, var(--gold));
  background: color-mix(in srgb, var(--md-teinte, var(--gold)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-teinte, var(--gold)) 42%, transparent);
  white-space: nowrap; line-height: 1.5;
}
/* Hors d'un `.a-mode` (un filtre, un recapitulatif), la pastille porte sa
   teinte elle-meme : elle doit tenir seule. */
.mode-pastille.m-piste  { --md-teinte: var(--moss); }
.mode-pastille.m-tresor { --md-teinte: var(--gold); }
.mode-pastille.m-course { --md-teinte: var(--sky); }
.mode-pastille.m-promenade  { --md-teinte: var(--parch-dim); }
.mode-pastille.m-contagieux { --md-teinte: var(--rot); }
.mode-pastille.m-collecte   { --md-teinte: var(--ember); }
.mode-pastille svg { width: 12px; height: 12px; flex: none; }
.mode-pastille.gros { font-size: 0.78rem; padding: 4px 11px 4px 9px; }
.mode-pastille.gros svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------- le filtre

   UN INTERRUPTEUR PAR MODE, et « Tous » qui les eteint. Un appui allume un
   mode et lui seul : c'est un tri, pas une composition — chercher « une
   course OU une chasse » n'est pas une chose que l'on veut faire en levant
   les yeux d'un sentier. Re-appuyer sur celui qui est allume rend la liste
   entiere, ce qui evite d'avoir a viser « Tous » a chaque fois.

   La rangee PASSE A LA LIGNE (`flex-wrap`) : a six modes plus « Tous », elle
   ne tient plus sur 360 px de large, et une rangee qui deborde en cachant ses
   derniers boutons est pire qu'une rangee sur deux lignes. */
.mode-filtre {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin: 0 0 10px;
}
.mode-filtre button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.72rem; font-weight: 700;
  color: var(--parch-dim);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(201, 164, 104, 0.28);
  transition: color .15s, background .15s, border-color .15s;
}
.mode-filtre button svg { width: 13px; height: 13px; flex: none; }
.mode-filtre button.m-piste  { --md-teinte: var(--moss); }
.mode-filtre button.m-tresor { --md-teinte: var(--gold); }
.mode-filtre button.m-course { --md-teinte: var(--sky); }
.mode-filtre button.m-promenade  { --md-teinte: var(--parch-dim); }
.mode-filtre button.m-contagieux { --md-teinte: var(--rot); }
.mode-filtre button.m-collecte   { --md-teinte: var(--ember); }
.mode-filtre button.on {
  color: var(--md-teinte, var(--gold));
  background: color-mix(in srgb, var(--md-teinte, var(--gold)) 18%, transparent);
  border-color: color-mix(in srgb, var(--md-teinte, var(--gold)) 55%, transparent);
}
/* Un mode qu'aucun parcours de la liste ne joue : visible, mais eteint. Le
   retirer ferait bouger la rangee d'un ecran a l'autre, et l'on ne saurait
   plus ou viser. */
.mode-filtre button[disabled] { opacity: 0.38; cursor: default; }