{
    % load static %
  }

  a {
    color: #21211f;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    text-decoration: none;
  }

  a:hover,
  a:focus {
    color: #20aec8;
  }

  .tooltip {
    z-index: 2 !important;
  }

  .navbar-nav .nav-link {
    padding-top: 0;
    padding-bottom: 0;
    height: 42px;
    line-height: 42px;
  }

  body {
    font-family: 'Oxygen', sans-serif;
    font-size: 16px;
    font-weight: 400;
    overflow-x: hidden;
  }

  .site-logo {
    margin-bottom: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 80px;
    width: auto;
  }

  .site-title {
    text-align: center;
    letter-spacing: 3px;
    margin: 0;
    text-transform: uppercase;
    font-family: 'Khand', sans-serif;
    letter-spacing: calc(rfs-value(1px) + 1vw);
    line-height: calc(rfs-value(1px) + 1vw);
    font-size: calc(rfs-value(1px) + 1vw);
    font-weight: bold;
  }

  .site-title a {
    color: #21211f;
  }

  .site-description {
    text-align: center;
    margin: 0;
    font-size: calc(2vw);
    text-transform: uppercase;
    color: #21211f;
    letter-spacing: calc(1vw);
  }

  @media (min-width: 500px) {
    .site-title {
      font-size: 36px;
      letter-spacing: 10px;
      line-height: 38px;
    }

    .site-description {
      font-size: 15px;
      letter-spacing: 7px;
    }
  }

  .site-branding {
    margin: 0 auto;
    background-image: url("../header_background-800x400.5aa6064fcdd4.jpg");
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    width: auto;
  }

  .navbar-hr {
    margin: 0;
  }

  .navbar ul li a {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .text-site-uppercase {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .nav ul li a {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .back-btn {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .back-btn:focus,
  .back-btn:active {
    outline: none !important;
    box-shadow: none;
    color: #21211f;
  }

  .navbar-notif {
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 8px;
  }

  h1 {
    font-size: 20px;
    color: #21211f;
    margin: 20px 20px 20px 20px;
  }

  .runner-list {
    margin: 0;
  }

  .material-icons.md-12 {
    font-size: 12px;
    vertical-align: middle
  }

  .material-symbols-outlined.md-12 {
    font-size: 12px;
    vertical-align: middle
  }

  .material-icons.md-18 {
    font-size: 18px;
    vertical-align: middle
  }

  .material-symbols-outlined.md-18 {
    font-size: 18px;
    vertical-align: middle
  }

  .material-icons.md-30 {
    font-size: 30px;
    vertical-align: middle
  }

  .material-icons.md-60 {
    font-size: 30px;
    vertical-align: middle
  }

  .material-icons.md-120 {
    font-size: 120px;
    vertical-align: middle
  }

  .material-icons.md-300 {
    font-size: 300px;
    vertical-align: middle
  }

  .material-icons-outlined.md-18 {
    font-size: 18px;
    vertical-align: middle
  }

  /* Icon-only dropdown toggles (registration "+", status arrow) are plain
     spans, so Bootstrap never gives them the pointer cursor. */
  span.material-icons[data-bs-toggle="dropdown"] {
    cursor: pointer;
  }

  /* Dropdown entries built as anchors without href (htmx actions) otherwise
     show a text-selection cursor. */
  .dropdown-item:not(.disabled) {
    cursor: pointer;
  }

  .filter_form {
    display: flex;
    align-items: center;
    /* Vertical alignment */
  }

  .card-challenge {
    display: flex;
    flex: 1 1 auto;
  }

  .img-runner {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
  }

  .carousel-control-prev {
    margin: auto auto;
    height: 50px;
    width: 50px;
  }

  .carousel-control-next {
    margin: auto auto;
    height: 50px;
    width: 50px;
  }

  .tabs-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: white;
    color: #21211f;
    text-align: center;
  }


  .nav-pills .nav-link.active,
  .nav-pills .show>.nav-link {
    color: #21211f;
    background-color: var(--app-color);
  }

  .tabs-footer ul li button {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .tabs-trainings ul li button {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .tabs-activities ul li button {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .tabs-races ul li button {
    text-transform: uppercase;
    color: #21211f;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
  }

  .pills-heading {
    display: none;
  }

  .my-footer {
    display: none;
  }

  #tab-pane-activities {
    margin-top: -25px
  }

  #tab-pane-races {
    margin-top: -35px
  }

  #tab-pane-weeks {
    margin-top: -10px
  }

  @media only screen and (min-width: 768px) {

    .index-col {
      max-width: 25% !important;
    }

    .next-past-header {
      margin-top: 0px !important;
    }

    .tn-cols-to-tabs>.tab-pane {
      display: block;
    }

    .pills-heading {
      display: block;
    }

    .my-footer {
      display: block;
    }

    .footer-margin {
      margin-bottom: 0px !important;
    }

    .main-cols {
      width: 0;
    }

    #tab-pane-activities {
      margin-top: 0px
    }

    #tab-pane-races {
      margin-top: 0px
    }

    #tab-pane-weeks {
      margin-top: 0px
    }
  }

  .dropdown-menu-center {
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 0) !important;
  }

  @media only screen and (min-width: 768px) {
    .dropdown-menu-center {
      left: auto !important;
      right: auto !important;
    }
  }

  .myspinner {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* ============ desktop view ============ */
  @media all and (min-width: 992px) {
    .dropdown-menu li {
      position: relative;
    }

    .nav-item .submenu {
      display: none;
      position: absolute;
      left: 100%;
      top: -7px;
    }

    .nav-item .submenu-left {
      right: 100%;
      left: auto;
    }

    .dropdown-menu>li:hover {
      background-color: #f1f1f1
    }

    .dropdown-menu>li:hover>.submenu {
      display: block;
    }
  }

  /* ============ desktop view .end// ============ */

  /* ============ small devices ============ */
  @media (max-width: 991px) {
    .dropdown-menu .dropdown-menu {
      margin-left: 0.7rem;
      margin-right: 0.7rem;
      margin-bottom: .5rem;
    }
  }

  /* ============ small devices .end// ============ */


  .select2-selection {
    height: 58px !important;
    padding: 26px 36px 6px 12px !important;
  }

  .select2-selection__arrow {
    visibility: hidden;
  }

  .select2-container {
    width: 100% !important;
  }


  @media (max-width: 500px) {
    .strava-segment-chart {
      height: 200px !important;
    }
  }

  @media (min-width: 501px) and (max-width: 768px) {
    .strava-segment-chart {
      height: 240px !important;
    }
  }

  @media (min-width: 769px) and (max-width: 991px) {
    .strava-segment-chart {
      height: 330px !important;
    }
  }

  @media (min-width: 992px) {
    .strava-segment-chart {
      height: 380px !important;
    }
  }

  .gsi-material-button {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: WHITE;
    background-image: none;
    border: 1px solid #747775;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #1f1f1f;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 14px;
    height: 40px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 12px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 400px;
    min-width: min-content;
  }

  .gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
  }

  .gsi-material-button .gsi-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
  }

  .gsi-material-button .gsi-material-button-contents {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
  }

  .gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  .gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
    border-color: #1f1f1f1f;
  }

  .gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
  }

  .gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
  }

  .gsi-material-button:not(:disabled):active .gsi-material-button-state,
  .gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #303030;
    opacity: 12%;
  }

  .gsi-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  }

  .gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: #303030;
    opacity: 8%;
  }


  .separator {
    display: flex;
    align-items: center;
    text-align: center;
  }

  .separator::before,
  .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
  }

  .separator:not(:empty)::before {
    margin-right: .25em;
  }

  .separator:not(:empty)::after {
    margin-left: .25em;
  }


  /* Résultats de recherche : les onglets reprennent la typo de la navbar
     (gris, capitales) au lieu du bleu des liens Bootstrap, et alignent icône,
     libellé et compteur. On force la couleur sur tous les états pour que les
     onglets inactifs restent gris, comme les entrées de la navbar. */
  .search-tabs .nav-link,
  .search-tabs .nav-link:link,
  .search-tabs .nav-link:visited,
  .search-tabs .nav-link:hover,
  .search-tabs .nav-link:focus {
    color: #21211f;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .search-tabs .nav-link .material-icons {
    color: #6c757d;
  }

  /* Onglets de recherche sur une seule ligne : le bandeau défile
     horizontalement quand il déborde, au lieu de passer à la ligne. Les
     onglets ne se compriment pas (``flex-shrink: 0``) pour rester lisibles.
     La largeur suit celle du conteneur (``.search-container``), pour que la
     barre d'onglets et les blocs de résultats restent alignés sur les bords. */
  .search-tabs-scroll {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .search-tabs-scroll .nav-tabs {
    flex-wrap: nowrap;
  }

  .search-tabs-scroll .nav-item {
    flex-shrink: 0;
  }

  /* Conteneur des résultats de recherche (formulaire, onglets et cartes) : une
     largeur unique et centrée, plus large que les 800px d'origine pour que
     tous les onglets tiennent sans défilement sur un grand écran. La barre
     d'onglets et les cartes partagent ce conteneur, donc leurs bords gauche et
     droit sont alignés (avant, ``.search-tabs-scroll`` était centré à 800px
     tandis que ``.tab-content`` restait en ``container-fluid``). */
  .search-container {
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* ``min-width: 0`` sur un enfant flex : sans lui, un enfant ``flex-grow-1``
     garde une largeur minimale (``min-width: auto``) et son contenu long
     déborde du parent au lieu d'être tronqué ou renvoyé à la ligne. La classe
     est utilisée par les cartes de résultats de recherche et l'en-tête des
     fils de conversation. */
  .min-width-0 {
    min-width: 0;
  }

  /* Message complet d'un résultat de conversation : on conserve les retours à
     la ligne et on casse les mots trop longs (l'extrait d'un message peut
     dépasser du cadre blanc sur petit écran sans cela). */
  .search-result-message {
    white-space: pre-line;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Extrait d'un résultat « actus » : il remplit la largeur de la carte au lieu
     de tenir sur une seule ligne (``text-truncate`` laissait, sur grand écran,
     un texte bien plus court que le cadre blanc). On garde les retours à la
     ligne de l'auteur et on plafonne à deux lignes pour des cartes régulières. */
  .search-result-excerpt {
    white-space: pre-line;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Liste des conversations : l'extrait vient de ``slice_text``, qui peut
     laisser un <p> autour du texte. La marge par defaut de <p> ajoutait une
     ligne vide dans la ligne tronquee (la conv' prenait 3 lignes au lieu de 2).
     On l'affiche en ligne, sans marge, donc sur une seule ligne. */
  .conversation-snippet p {
    display: inline;
    margin: 0;
  }

  /* Bulle d'un message de conversation (generale ou privee) : elle s'adapte au
     contenu (``fit-content``) pour minimiser l'espace vide des messages courts,
     tout en restant plafonnee par la place restante (``max-width: 100%``) pour
     ne jamais deborder. */
  .conversation-bubble {
    width: fit-content;
    max-width: 100%;
    min-width: 0;
  }

  /* Hauteur du fil : dans le popup desktop on garde la hauteur historique
     (``70vh``). Dans l'onglet Conv' mobile (l'index n'est pas la page dediee),
     le fil doit remplir l'espace entre la barre de navigation (sticky, ~60px,
     en haut) et la barre d'onglets fixe (~57px, en bas) : sinon le formulaire
     flotte au milieu de l'ecran au lieu d'etre colle en bas. On reprend la
     meme approche en unites viewport que le reste du site. */
  #conv-panel-thread {
    height: calc(70vh - 90px);
  }

  .app-fullscreen #conv-in-tab #conv-panel-thread {
    height: calc(100vh - 117px);
    height: calc(100dvh - 117px);
  }

  /* Onglet Conv' mobile : le pied du fil porte le champ message. On ajoute sous
     lui la même marge qu'au-dessus (le ``pb32`` de la boîte des messages, soit
     32 px), pour qu'il ne soit pas collé à la barre d'onglets. La règle vise
     l'onglet (``#conv-in-tab``) et non ``.app-fullscreen`` : sur un petit écran
     non « fullscreen » (fenêtre étroite, mode non détecté comme mobile) la
     marge manquait. Le popup desktop (``#conv-float-list``) n'est pas concerné. */
  #conv-in-tab #commentbox-container .card-footer {
    padding-bottom: 32px;
  }