/* Thème du site : typographie et formes du style « fiche technique » de la page détail, étendues à toutes
   les pages. IBM Plex Sans pour le texte, IBM Plex Mono pour les étiquettes, boutons et chiffres, angles droits.
   Les couleurs restent celles de Bootstrap et de main.css. Chargé après Bootstrap et main.css. */

:root {
  --police: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

body { font-family: var(--police); }

/* titres (le logo « Spots.bike » de la barre garde sa police, cf. #titre dans main.css) */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--police);
  font-weight: 700;
  letter-spacing: -0.3px;
}
h1, .h1 { letter-spacing: -1px; }
.display-1, .display-2, .display-3, .display-4 { font-weight: 700; letter-spacing: -1.5px; }
.lead { font-weight: 400; }
.intro-text { font-weight: 700; letter-spacing: -1px; }
.card-title { font-family: var(--police-mono); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0; }
h5.card-title, h4.card-title, h3.card-title { font-size: 13px; }

/* liens du contenu : noirs et soulignés, comme sur la page détail
   (barre de menu, pied de page, boutons et onglets gardent leur style) */
a { color: #111111; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #c2410c; }
.btn, .nav-link, .dropdown-item, .page-link, .navbar a, .fixed-bottom a, .list-group-item-action,
.maplibregl-ctrl a, .mapboxgl-ctrl a { text-decoration: none; }

/* chiffres et étiquettes */
code, kbd, pre, samp, .text-monospace { font-family: var(--police-mono); }

/* barre de navigation : noire */
.navbar.bg-dark { background-color: #111111 !important; }
.navbar .nav-link { font-size: 15px; font-weight: 500; white-space: nowrap; }
.navbar-expand-md .navbar-nav .nav-link { padding-left: .5rem; padding-right: .5rem; }
.navbar .nav-link svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
/* menu principal (Home, Liste, Parcours, Feed, Ajouter une trace) plus grand, à partir de 1280 px de large ;
   les deux groupes de la barre prennent alors la place de leur contenu au lieu de colonnes Bootstrap fixes
   (en dessous, il n'y a pas la place : la partie droite passerait sur 3 lignes) */
@media (min-width: 1280px) {
  .navbar .navbar-nav.mr-auto .nav-link { font-size: 18px; }
  .navbar .navbar-nav.mr-auto .nav-link svg { width: 20px; height: 20px; }
  #navbarsExampleDefault > [class*="col-"] { flex: 0 0 auto; max-width: none; width: auto; }
  #navbarsExampleDefault > [class*="col-"]:last-child { flex: 1 1 auto; }
}
/* le contenu commence sous la barre fixe, quelle que soit sa hauteur (--nav-h mis à jour par base.html) */
.row_content { margin-top: var(--nav-h, 61px); }
.fixed-bottom { font-family: var(--police-mono); font-size: 12px; }
.fixed-bottom p { margin: 6px 0; }

/* boutons : angles droits, police mono en capitales */
.btn {
  border-radius: 0;
  font-family: var(--police-mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2px;
}
.btn-sm { font-size: 12px; }
.btn-lg { font-size: 15px; }
.btn-link { text-transform: none; font-family: var(--police); font-weight: 500; }

/* cartes : en-tête en mono */
.card { border-radius: 0; }
.card-header {
  border-radius: 0 !important;
  font-family: var(--police-mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}
.card-footer { border-radius: 0 !important; }
.card-img, .card-img-top, .card-img-bottom { border-radius: 0; }

/* formulaires */
.form-control, .custom-select, .input-group-text { border-radius: 0 !important; }
.input-group-text { font-family: var(--police-mono); font-size: 13px; }
label, .col-form-label { font-family: var(--police-mono); font-size: 13px; font-weight: 500; }

/* tableaux */
.table th, .table thead th {
  font-family: var(--police-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
.table td { vertical-align: middle; }

/* badges, alertes, onglets, pagination, fenêtres */
.badge, .badge-pill { border-radius: 0; font-family: var(--police-mono); font-weight: 600; }
.alert { border-radius: 0; }
.nav-tabs .nav-link { font-family: var(--police-mono); font-size: 13px; text-transform: uppercase; }
.page-link { border-radius: 0 !important; font-family: var(--police-mono); }
.modal-content, .dropdown-menu { border-radius: 0; }
.list-group-item { border-radius: 0 !important; }
.tooltip-inner { border-radius: 0; font-family: var(--police-mono); font-size: 12px; }
.blockquote-footer { font-family: var(--police-mono); font-size: 12px; }

/* cartes MapLibre / Mapbox */
.maplibregl-popup-content, .mapboxgl-popup-content { border-radius: 0; font-family: var(--police); }