/* Mes sorties et la fiche d'une sortie (app Mantine). Les variables viennent de `rp.css` et des
   jetons. Dash charge les feuilles par ordre alphabétique : celle-ci passe AVANT `rp.css`
   (« - » avant « . ») ; elle emploie donc ses propres classes `rp-sorties-*`, et ses règles sur
   des classes partagées passent par l'id de la fiche (`#rp-sortie…`), qui l'emporte. */

/* Un lien dans un bloc de la carte sombre : le nom de la sortie. */
.rp-sorties-lien-sombre { color: var(--rp-sombre-texte); text-decoration: underline; text-underline-offset: 3px; }

/* Les filtres de nature : des liens en pastille, l'actif en accent. */
.rp-sorties-filtres { display: flex; flex-wrap: wrap; gap: var(--rp-espace-2); }
.rp-sorties-filtre {
  display: inline-flex;
  align-items: center;
  gap: var(--rp-espace-2);
  min-height: 40px;
  padding: 0 var(--rp-espace-4);
  border-radius: var(--rp-rayon-pastille);
  border: 1px solid var(--rp-ligne-forte);
  color: var(--rp-texte);
  text-decoration: none;
  font-size: var(--rp-taille-secondaire);
}
.rp-sorties-filtre:hover { border-color: var(--rp-accent); color: var(--rp-accent); }
.rp-sorties-filtre-actif { border: 2px solid var(--rp-accent); color: var(--rp-accent); font-weight: 600; }
.rp-sorties-filtre-n { font-family: var(--rp-police-chiffres); font-size: var(--rp-taille-mention); color: var(--rp-texte-secondaire); }

/* Un mois : son titre et son résumé, puis une ligne par sortie. */
.rp-sorties-groupe { display: flex; flex-direction: column; }
.rp-sorties-mois-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--rp-espace-3);
  flex-wrap: wrap;
  padding: var(--rp-espace-4) 0 var(--rp-espace-2);
  font-size: var(--rp-taille-secondaire);
  color: var(--rp-texte-secondaire);
}
.rp-sorties-mois {
  margin: 0;
  font-family: var(--rp-police-titres);
  font-weight: 650;
  font-size: var(--rp-taille-titre-bloc);
  line-height: 1.15;
  color: var(--rp-texte);
}
.rp-sorties-mois::first-letter { text-transform: uppercase; }

.rp-sorties-ligne {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto 7.5em;
  gap: var(--rp-espace-4);
  align-items: baseline;
  min-height: 44px;
  padding: var(--rp-espace-2) var(--rp-espace-2);
  border-top: 1px solid var(--rp-ligne-douce);
  color: var(--rp-texte);
  text-decoration: none;
}
a.rp-sorties-ouvrable:hover { background: var(--rp-ligne-douce); color: var(--rp-texte); }
a.rp-sorties-ouvrable:hover .rp-sorties-nom { color: var(--rp-accent); }
.rp-sorties-date { font-family: var(--rp-police-chiffres); font-weight: 500; font-size: var(--rp-taille-secondaire); color: var(--rp-texte-secondaire); white-space: nowrap; }
.rp-sorties-nom-ligne { display: flex; align-items: center; gap: var(--rp-espace-2); flex-wrap: wrap; }
.rp-sorties-nom { font-weight: 600; }
.rp-sorties-sous { font-size: var(--rp-taille-secondaire); color: var(--rp-texte-secondaire); }
.rp-sorties-faits { font-family: var(--rp-police-chiffres); font-weight: 500; font-size: var(--rp-taille-secondaire); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-sorties-reserve { font-family: var(--rp-police-chiffres); font-weight: 500; font-size: var(--rp-taille-secondaire); color: var(--rp-texte-secondaire); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-sorties-autre .rp-sorties-nom { font-weight: 400; color: var(--rp-texte-secondaire); }
.rp-sorties-autre .rp-sorties-faits { color: var(--rp-texte-secondaire); }

.rp-sorties-types td:not(:first-child), .rp-sorties-types th:not(:first-child) { text-align: right; }

@media (max-width: 767px) {
  /* Téléphone : la date et le nom sur une ligne, les chiffres dessous. */
  .rp-sorties-ligne { grid-template-columns: 52px minmax(0, 1fr); gap: var(--rp-espace-1) var(--rp-espace-3); }
  .rp-sorties-faits { grid-column: 2; text-align: left; white-space: normal; }
  .rp-sorties-reserve { grid-column: 2; text-align: left; }
  .rp-sorties-reserve:empty { display: none; }
}

@media (max-width: 767px) {
  /* Au téléphone, l'ordre de l'ordinateur (comme #rp-relire dans rp.css) : le graphique avant
     les blocs, sa légende juste dessous. Par l'id de ces deux écrans, sans toucher rp.css. */
  #rp-sortie > *, #rp-sorties > * { order: 0; }
}

/* U56 (fiche d'une sortie) : chaque bloc de la carte sombre prend la hauteur de son contenu (pas
   de bloc étiré à côté d'un plus long) ; sous le parcours, la courbe de FC (étroite, à gauche :
   on la lit avant de la juger) et tes choix, leurs champs côte à côte pour tenir à sa hauteur. */
#rp-sortie .rp-blocs { align-items: start; }
#rp-sortie-choix .rp-reglages-champs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--rp-espace-3);
}
#rp-sortie-choix .rp-reglages-champ { max-width: none; }
#rp-sortie-bas.rp-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 767px) {
  #rp-sortie-bas.rp-grille { grid-template-columns: minmax(0, 1fr); }
}