/*
** Charte Courses44 : bleu marine #0d2366, cyan #02bcff, vert #99e868, rouge #ff4d52, texte #505050
*/

:root {
  --c44-marine: #0d2366;
  --c44-cyan: #02bcff;
  --c44-vert: #99e868;
  --c44-rouge: #ff4d52;
  --c44-texte: #505050;
  --c44-fond-clair: #f8f9fc;
}

/*
** Corps de page
*/

body {
  color: var(--c44-texte);
  background-color: #ffffff;
  font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.contenu-site {
  flex-grow: 1;
}

/* Contenu à plat sous le titre : les vues du framework, qui l'enveloppent dans une carte, rendent comme celles du projet */
.contenu-site > div > .card.shadow {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none !important;
}

.contenu-site > div > .card.shadow > .card-body {
  padding: 0;
}

/* Barre de filtres des listes publiques (ControllerApp::filtresPublics()) : boutons d'action et groupe des filtres passent
   sur deux lignes quand ils ne tiennent pas sur une, au lieu de sortir de l'écran. Le groupe, lui, ne se coupe pas : trop
   large pour sa ligne, il déborde, et initFiltresAuto() du framework le replie en menu « Filtres » */
/* Boutons serrés à gauche, le groupe des filtres poussé à droite (ms-auto) : justify-content-between les écarterait */
.filtres-publics #filtres {
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  min-width: 0;
}

/* Flèche de la liste du nombre par page (tablePagination() du framework, reprise par ControllerApp::paginationPublique()) :
   ses styles en ligne la posent 4 px trop bas avec l'interligne du site ; elle est centrée sur la liste */
:has(> .filtre-select + .fa-chevron-down) {
  position: relative;
}

.filtre-select + .fa-chevron-down {
  position: absolute !important;
  top: 50% !important;
  right: .5rem;
  left: auto !important;
  height: auto !important;
  transform: translateY(-50%);
}

/* Les images des pages de contenu sont des documents en A4 à 300 dpi : elles se réduisent à la largeur de l'écran */
.contenu-page img {
  max-width: 100%;
  height: auto;
}

/* Titres du contenu des pages : tous de la même taille, sous celle du titre de la page */
.contenu-page h2,
.contenu-page h3,
.contenu-page h4 {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--c44-marine);
  margin-bottom: 0.5rem;
}

/* Les sections des mentions légales et de la politique de confidentialité n'ont pas de ligne vide entre elles, comme la FAQ */
.contenu-page h2 {
  margin-top: 1.5rem;
}

.contenu-page > h2:first-child {
  margin-top: 0;
}

/* Tableaux collés depuis Word (jusqu'à 1 146 px de large dans les actualités) : ils défilent au lieu d'élargir la page */
.contenu-page table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Aperçu d'une actualité, dans la liste et sur l'accueil : le début du contenu, en fondu jusqu'au lien, comme la v1.1 */
.article-apercu {
  max-height: 300px;
  overflow: hidden;
  margin-top: .5rem;
}

.article-suite {
  position: relative;
  margin-top: -50px;
  padding-top: 50px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 50%);
  text-align: right;
}

.accueil-actualite {
  background: url(/public/images/accueil_actualite.jpg) center / cover;
}

/* Bandeau vert du classement de l'accueil, comme la v1.1 */
.accueil-classement-titre {
  background-color: var(--c44-vert);
  color: var(--c44-marine);
}

/* Podiums des femmes et des hommes : deux classements, séparés d'un trait */
.accueil-podiums > :not(caption) > * > * + * {
  border-left: 1px solid #ced4da;
}

/* Survol d'une seule case, celle d'un coureur, et non de la ligne qui porte une femme et un homme (table-hover retiré ;
   décision de Luc du 29/10/2026) : variables de Bootstrap 5.3 et de sb-admin-pro */
.accueil-podiums > tbody > tr > td.link:hover {
  --bs-table-bg-state: var(--bs-table-hover-bg);
  --bs-table-accent-bg: var(--bs-table-hover-bg);
  color: var(--bs-table-hover-color);
}

/* sb-admin-pro élargit les conteneurs jusqu'à 1440 px ; l'ancien site s'arrêtait à 1140 px */
@media (min-width: 1200px) {
  .container-lg {
    max-width: 1140px;
  }
}

/*
** Textes et liens
*/

h1, h4 {
  color: var(--c44-marine);
}

.title {
  color: var(--c44-marine);
  font-style: italic;
  font-weight: bold;
}

.text-primary {
  color: var(--c44-marine) !important;
}

a {
  color: var(--c44-marine);
  text-decoration: none;
}

a:hover {
  color: var(--c44-marine);
  text-decoration: underline;
}

time {
  font-size: 0.8rem;
  color: var(--c44-cyan) !important;
  font-style: italic;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 2px solid var(--c44-vert);
  opacity: 1;
}

hr.secondary {
  border-top-color: var(--c44-marine);
}

.link {
  cursor: pointer;
}

/*
** Bandeau de navigation
*/

.navbar-site {
  background-color: #ffffff;
}

.navbar-site .navbar-brand img {
  max-height: 50px;
}

.navbar-site .nav-link {
  white-space: nowrap;
  color: var(--c44-texte);
}

/* Entre l'apparition du menu complet (992 px) et 1200 px, le bandeau tient sur une ligne en se resserrant */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-site .navbar-nav {
    margin-left: .75rem !important;
  }

  .navbar-site .navbar-expand-lg .navbar-nav .nav-link,
  .navbar-expand-lg.navbar-site .navbar-nav .nav-link {
    padding-left: .35rem;
    padding-right: .35rem;
  }
}

.navbar-site .nav-link:focus,
.navbar-site .nav-link:hover {
  color: var(--c44-marine);
}

/* Fil d'Ariane du titre (titre.phtml) : entrées du menu cliquables, avec leur picto, dans la couleur du titre */
.titre-ariane {
  color: inherit;
}

.titre-separateur {
  font-size: .7em;
  color: #ced4da;
}

/* Page courante dans le cyan des pictos du menu, comme le module courant du menu du back-office (.dropdown-item.courant) ;
   le gras double la couleur, trop claire sur le blanc pour suffire seule */
.navbar-site .nav-link.active,
.navbar-site .nav-link.show {
  color: var(--c44-cyan);
  font-weight: 700;
}

/* Bouton Menu du téléphone aux dimensions d'un bouton (.btn), comme Menu et Se connecter sur ordinateur : navbar-toggler,
   déclaré après .btn par Bootstrap, imposerait sa marge, sa police et son interligne */
.navbar-site .navbar-toggler {
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-size: var(--bs-btn-font-size);
  line-height: var(--bs-btn-line-height);
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
}

.navbar-site .navbar-toggler:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.navbar-site .navbar-toggler:focus {
  box-shadow: none;
}

.dropdown-menu {
  background-color: var(--c44-fond-clair) !important;
}

.dropdown-item {
  font-size: 1rem;
  color: var(--c44-texte) !important;
  background-color: transparent;
}

.dropdown-item:hover {
  color: var(--c44-cyan) !important;
  background-color: transparent;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #ffffff !important;
  background-color: var(--c44-cyan);
}

.dropdown-item.courant {
  color: var(--c44-cyan) !important;
  font-weight: 700;
}

.dropdown-item .picto-menu {
  width: 30px;
}

/* Menu du back-office : un bloc par groupe, en colonnes sur ordinateur (--colonnes posé par navigation.phtml), pour qu'il tienne dans l'écran */
.menu-administration {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  border: 1px solid rgba(13, 35, 102, .2) !important;
}

/* Titres de groupe en marine, comme les titres de page ; le gris clair du thème les effaçait */
.menu-administration .dropdown-header {
  color: var(--c44-marine) !important;
}

/* Pictos en cyan ; au clic, l'entrée passe sur fond cyan et le picto reprend la couleur du texte, sinon il disparaîtrait */
.menu-administration .picto-menu {
  color: var(--c44-cyan);
}

.menu-administration .dropdown-item:active .picto-menu {
  color: inherit;
}

/* Titre du groupe de l'utilisateur connecté : plus gras que les autres titres de groupe (700), et un peu plus grand,
   car en 12 px le gras maximal (900) se distingue à peine du 700 */
.menu-administration .groupe-utilisateur {
  font-size: .875rem;
  font-weight: 900;
}

/* Entrée Administration en gras, en tête du menu sur ordinateur comme sur téléphone */
.menu-administration .entree-administration {
  font-weight: 700;
}

/* Bandeau replié (classe posée par ajusterBandeau() de courses44.js : sur téléphone, et au-delà dès que les liens ne
   tiennent plus sur une ligne), le bouton Menu ouvre un seul panneau, par-dessus la page et dans le style du menu de
   l'ordinateur : les liens du site avec leurs pictos, puis, sous un trait, les entrées du back-office, affichées d'office,
   sans second bouton Menu */

/* Bord à bord, sans coins arrondis, du bas du bandeau (--haut-menu, relevé à l'ouverture par courses44.js) au bas
   de l'écran ; un menu plus long que l'écran défile dans le panneau, jamais la page derrière */
.navbar-site.navbar-replie .navbar-collapse {
  position: fixed;
  top: var(--haut-menu, 0);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .5rem;
  background-color: var(--c44-fond-clair);
  border-top: 1px solid rgba(13, 35, 102, .2);
  border-bottom: 1px solid rgba(13, 35, 102, .2);
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

/* Ouverture sans animation : Bootstrap anime la hauteur jusqu'à celle du contenu, puis le panneau sauterait à la pleine hauteur */
.navbar-site.navbar-replie .navbar-collapse.collapsing {
  transition: none;
}

/* Menu ouvert : la page derrière ne défile plus, seul le panneau défile */
html.menu-ouvert,
html.menu-ouvert body {
  overflow: hidden;
}

/* Replié au-delà de 992 px, le bandeau garde ses utilitaires -lg (marge des liens, pictos masqués, bouton Se connecter
   sans marge) : le panneau les neutralise */
.navbar-site.navbar-replie .navbar-nav {
  margin-left: 0 !important;
}

.navbar-site.navbar-replie .navbar-nav .picto-menu {
  display: inline-block !important;
}

.navbar-site.navbar-replie .p-lg-0 {
  padding: .25rem !important;
}

.navbar-site.navbar-replie .navbar-nav .nav-link {
  margin: .25rem;
  padding: .25rem 1rem;
}

.navbar-site.navbar-replie .navbar-nav .nav-link:hover {
  color: var(--c44-cyan);
}

/* Au clic, fond cyan comme les entrées du back-office (.dropdown-item:active) */
.navbar-site.navbar-replie .navbar-nav .nav-link:active {
  color: #ffffff !important;
  background-color: var(--c44-cyan);
}

.navbar-site.navbar-replie .navbar-nav .nav-link:active .picto-menu {
  color: inherit;
}

.navbar-site.navbar-replie .navbar-nav .picto-menu {
  width: 30px;
  color: var(--c44-cyan);
}

.navbar-site.navbar-replie #menu_administration {
  display: none;
}

.navbar-site.navbar-replie .menu-administration {
  display: block;
  position: static;
  max-height: none;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Colonnes du menu du back-office : bandeau déplié seulement, le panneau du bandeau replié les empile */
@media (min-width: 992px) {
  .navbar-expand-lg .menu-administration {
    width: calc(var(--colonnes) * 230px + 1rem);
    max-width: calc(100vw - 2rem);
  }

  .navbar-expand-lg .menu-groupes {
    column-count: var(--colonnes);
    column-gap: 0;
  }

  .navbar-expand-lg .menu-groupe {
    break-inside: avoid;
    padding-bottom: .5rem;
  }
}

/*
** Boutons
*/

/* Bouton primary du framework (SB Admin Pro) dans le cyan de la charte, aux mêmes états : survol 15 % plus foncé, bordure
   20 %, clic 20 % et bordure 25 %. Secondary garde le violet du framework (décision de Luc du 28/10/2026) */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--c44-cyan);
  --bs-btn-border-color: var(--c44-cyan);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--c44-cyan) 85%, #000000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--c44-cyan) 80%, #000000);
  --bs-btn-focus-shadow-rgb: 2, 188, 255;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: color-mix(in srgb, var(--c44-cyan) 80%, #000000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--c44-cyan) 75%, #000000);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--c44-cyan);
  --bs-btn-disabled-border-color: var(--c44-cyan);
}

/* Couleur « gris » de button() (BUTTON_PARAM_COULEUR), que SB Admin Pro n'a pas : son gris, aux mêmes états que primary */
.btn-gris {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--bs-gray);
  --bs-btn-border-color: var(--bs-gray);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-gray) 85%, #000000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-gray) 80%, #000000);
  --bs-btn-focus-shadow-rgb: 105, 112, 122;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-gray) 80%, #000000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-gray) 75%, #000000);
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: var(--bs-gray);
  --bs-btn-disabled-border-color: var(--bs-gray);
}

/* Pagination du framework (SB Admin Pro) dans le cyan des boutons primary : page courante, numéros, et survol 20 % plus foncé */
.pagination {
  --bs-pagination-color: var(--c44-cyan);
  --bs-pagination-hover-color: color-mix(in srgb, var(--c44-cyan) 80%, #000000);
  --bs-pagination-focus-color: color-mix(in srgb, var(--c44-cyan) 80%, #000000);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(2, 188, 255, .25);
  --bs-pagination-active-bg: var(--c44-cyan);
  --bs-pagination-active-border-color: var(--c44-cyan);
}

/*
** Connexion, inscription, mot de passe oublié et réinitialisation : formulaire à gauche, sur toute la largeur du titre, illustration à droite
*/

/* Photo tirée au hasard dans la bibliothèque, sans logo ni voile ; fond marine si la bibliothèque est vide */
.visuel-connexion {
  background-color: var(--c44-marine);
  background-size: cover;
  background-position: center;
  min-height: 420px;
}

/* Contrôle Turnstile de l'inscription : coins arrondis comme les champs ; sans interligne, il garde sa hauteur réelle
   (65 px, fixée par Cloudflare) au lieu de 71 px */
.cf-turnstile {
  border-radius: .35rem;
  overflow: hidden;
  line-height: 0;
}

/*
** Pied de page
*/

.footer-site {
  color: #ffffff;
  background-color: var(--c44-marine);
  padding: 2rem 0 1rem;
  font-size: 0.875rem;
}

.footer-site a {
  color: #ffffff;
  text-decoration: underline;
}

.footer-site a:hover {
  color: #ffffff;
  text-decoration: none;
}

.footer-site .reseaux a {
  text-decoration: none;
}

.footer-site .copyright {
  font-size: 0.75rem;
}

/*
** Accueil
*/

.calendrier {
  width: 100% !important;
  height: auto;
}

/* Bibliothèque vide : le bandeau garde sa place, sur fond marine */
.calendrier-vide {
  min-height: 360px;
  background-color: var(--c44-marine);
}

@media (min-width: 1200px) {
  .calendrier {
    display: block !important;
    margin-right: auto !important;
    margin-left: auto !important;
    width: 1200px !important;
  }
}

.accroche-calendrier {
  position: absolute;
  top: 50px;
  left: -500px;
  width: 230px;
  opacity: 0;
  background-color: var(--c44-vert);
  color: var(--c44-marine);
  border-radius: 0.35rem;
  transition: left 1s ease-out, opacity 1s ease-out;
}

.accroche-decouvre {
  position: absolute;
  top: 120px;
  left: 50px;
  color: #ffffff;
  font-weight: bold;
  font-style: italic;
  text-shadow: 1px 1px 2px black;
  opacity: 0;
  transition: opacity 1s ease-out 1s;
}

.accroche-visible .accroche-calendrier {
  left: 50px;
  opacity: 1;
}

.accroche-visible .accroche-decouvre {
  opacity: 1;
}

/*
** Page Administration : un module par picto suivi de son titre, comme la v1.1, sans cadre
*/

.tuile-module {
  padding: .5rem 0;
  color: var(--c44-marine);
}

/* Séparateur des groupes en gris clair : le vert est celui du trait sous le titre de la page */
.separateur-groupe {
  border-top: 1px solid #ced4da;
  opacity: 1;
}

.tuile-module:hover {
  text-decoration: none;
  color: var(--c44-cyan);
}

.tuile-module .picto-tuile {
  font-size: 2rem;
  color: var(--c44-cyan);
}

/*
** Bibliothèque d'images
*/

/* Vignettes de hauteur égale dans la grille, quel que soit le format de la photo */
.vignette-image {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/*
** Partenaires
*/

/* Logos enregistrés à 160 px de haut au plus, affichés à 80 px comme dans la v1.1 ; width et height de la balise gardent la
   place du logo avant son chargement */
.logo-partenaire {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80px;
}

.logo-partenaire-liste img {
  width: auto;
  height: auto;
  max-height: 40px;
}

/*
** Calendrier public, sur le modèle de la v1.1 : une ligne de hauteur fixe par compétition, vignette de l'affiche coupée
** en biais, pastilles de date, une pastille par course
*/
.calendrier-course {
  position: relative;
  height: 204px;
  border: 1px solid #ced4da;
  border-radius: .35rem;
  margin-bottom: .5rem;
  overflow: hidden;
  background-color: #ffffff;
}

/* Survol d'une ligne : liseré cyan, fond d'un ton plus foncé comme une ligne de tableau du framework, affiche un peu
   assombrie comme un bouton (décision de Luc du 29/10/2026) */
.calendrier-course:hover {
  border-color: var(--c44-cyan);
  background-color: color-mix(in srgb, #e0e5ec 25%, #ffffff);
}

.calendrier-course:hover .calendrier-vignette {
  filter: brightness(.9);
}

.calendrier-vignette {
  display: block;
  object-fit: cover;
  height: 100%;
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0% 100%);
}

/* Pastilles de date sur le bord de la vignette : celle du début chevauche celle de la fin, et la flèche les deux.
   Le contexte d'empilement du bloc garde les pastilles sous le lien de la ligne */
.calendrier-dates {
  position: absolute;
  z-index: 0;
  right: 0;
  top: 70px;
  display: flex;
  align-items: center;
}

.calendrier-date {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--c44-cyan);
  color: #ffffff;
  text-align: center;
  width: 60px;
  height: 60px;
  font-size: .67em;
  font-weight: bold;
  line-height: 1.05;
  border-radius: 30px;
  border: 4px solid #ffffff;
}

.calendrier-debut {
  z-index: 1;
}

.calendrier-fin {
  background-color: #80ddff;
}

.calendrier-numero {
  font-size: 2em;
  line-height: 1;
}

/* 18 px de large et 14 px de retrait de chaque côté : les pastilles restent décalées de 50 px, comme dans la v1.1 */
.calendrier-fleche {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  height: 18px;
  margin: 0 -14px;
  border-radius: 50%;
  background-color: #ffffff;
  color: var(--c44-cyan);
  font-size: .7rem;
}

/* Nom et lieu, puis les courses ; côte à côte à partir de 992 px. Les courses qui ne tiennent pas dans la hauteur sont
   cachées par le script de la vue, qui les compte dans un badge « +N » */
.calendrier-texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
  padding: .5rem .75rem .5rem .75rem;
  min-width: 0;
}

.calendrier-titre {
  flex-shrink: 0;
}

.calendrier-nom {
  display: block;
  color: var(--c44-marine);
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.2em;
  text-decoration: none;
}

.calendrier-nom:hover {
  color: var(--c44-marine);
  text-decoration: none;
}

.calendrier-lieu {
  display: block;
}

.calendrier-badges {
  min-height: 0;
  overflow: hidden;
}

/* Liens d'une ligne au-dessus du lien de la compétition, qui couvre toute la ligne */
.calendrier-lien {
  position: relative;
  z-index: 2;
  text-decoration: none;
}

.calendrier-lien:hover {
  text-decoration: none;
}

.badge-epreuve,
.badge-epreuve:hover {
  background-color: #858796;
  color: #ffffff;
  font-weight: 500;
  white-space: normal;
  text-align: left;
}

/* Barré gardé au survol, que les liens du calendrier ne soulignent plus */
.annule,
.annule:hover {
  text-decoration: line-through;
}

.calendrier-nom.annule {
  color: #858796;
}

@media (min-width: 576px) {
  .calendrier-course {
    height: 154px;
  }
  .calendrier-dates {
    top: 45px;
  }
  .calendrier-nom {
    font-size: 1.5em;
  }
}

@media (min-width: 992px) {
  .calendrier-course {
    height: 104px;
  }
  .calendrier-dates {
    top: 20px;
  }
  .calendrier-texte {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  .calendrier-titre {
    flex: 0 0 40%;
  }
  .calendrier-badges {
    flex: 1 1 auto;
    max-height: 100%;
  }
}

/* Libellé d'une ligne de tableau cliquable (tr.link), dans la couleur des liens : la ligne entière mène à la fiche, comme au
   back-office, sans lien dans la cellule */
.libelle-lien {
  color: var(--c44-marine);
}

/* Ligne d'un licencié du 44 dans les résultats d'une course, seule à mener à une fiche : toute la ligne dans la couleur des
   liens, en gras comme la ligne retrouvée par le paramètre scroll du framework (décision de Luc du 29/10/2026) */
.table > tbody > tr.ligne-licencie > * {
  color: var(--c44-marine);
}

/* Bouton small du framework (btn-light, #f2f6fc) dans un tableau : il se confondait avec une ligne zébrée (#f2f2f2) ; même
   ton que « Voir plus de courses à venir » de l'accueil (décision de Luc du 29/10/2026) */
.table .btn-light {
  --bs-btn-bg: #e0e5ec;
  --bs-btn-border-color: #e0e5ec;
}

/* Classement, résultats d'une course et fiche d'un coureur au style des listes du framework ; sur un téléphone, les cellules
   gardent la marge de table-sm, pour que les colonnes visibles et leurs flèches de tri tiennent dans 360 px */
@media (max-width: 767.98px) {
  .table-publique > :not(caption) > * > * {
    padding: .25rem;
  }

  /* Seule la flèche de la colonne triée reste : les autres prendraient la largeur des noms */
  .table-publique .fa-sort.opacity-40 {
    display: none;
  }
}

/* Résultats d'une course : à 360 px, un nom ou un club d'un seul tenant passe à la ligne plutôt que d'élargir le tableau.
   Au-delà, la règle laisserait le tableau rétrécir la colonne au point de couper un nom qui tient sur une ligne */
@media (max-width: 767.98px) {
  .resultats-texte {
    overflow-wrap: anywhere;
  }
}

.resultats-legende {
  columns: 2 16rem;
}

/* Fiche publique d'une compétition : libellé au-dessus de sa valeur */
.fiche-libelle {
  font-weight: 700;
  color: var(--c44-marine);
}

.affiche-publique {
  width: auto;
  height: auto;
  max-width: 100%;
}

/* Blocs et images détachés du fond : bordure fine et coins arrondis des lignes du calendrier, petite ombre de Bootstrap.
   Affiche de la fiche d'une compétition ; à l'accueil, bandeau, classement, dernière actualité et vignettes des affiches */
.cadre-arrondi {
  border: 1px solid #ced4da;
  border-radius: .35rem;
  box-shadow: var(--bs-box-shadow-sm);
  overflow: hidden;
}

/* Affiche en grand, entière à l'écran sous l'en-tête de la modale */
.affiche-grande {
  max-height: calc(100vh - 10rem);
}

/* Courses de la fiche : bord gauche et fond doux de l'en-tête aux couleurs de la charte (Epreuve::COULEURS_ACCORDEON),
   sur le modèle des border-start-* et bg-*-soft de SB Admin Pro qu'emploie Openeo */
.border-start-c44-marine {
  border-left-color: var(--c44-marine) !important;
}

.border-start-c44-cyan {
  border-left-color: var(--c44-cyan) !important;
}

.border-start-c44-vert {
  border-left-color: var(--c44-vert) !important;
}

.border-start-c44-rouge {
  border-left-color: var(--c44-rouge) !important;
}

.bg-c44-marine-soft {
  background-color: color-mix(in srgb, var(--c44-marine) 15%, #ffffff) !important;
}

.bg-c44-cyan-soft {
  background-color: color-mix(in srgb, var(--c44-cyan) 15%, #ffffff) !important;
}

.bg-c44-vert-soft {
  background-color: color-mix(in srgb, var(--c44-vert) 15%, #ffffff) !important;
}

.bg-c44-rouge-soft {
  background-color: color-mix(in srgb, var(--c44-rouge) 15%, #ffffff) !important;
}

/* Heure de départ d'une course, à droite de l'en-tête, contre la flèche de l'accordéon */
.accordion-heure {
  margin-left: auto;
  margin-right: .75rem;
  background-color: var(--c44-marine);
}

.accordion-button:has(.accordion-heure)::after {
  margin-left: 0;
}

/* Prochaines compétitions de l'accueil : vignettes de 190 x 250 recadrées, comme dans la v1.1 */
.accueil-prochaines {
  background-color: var(--c44-fond-clair);
}

/* Bouton small du framework (btn-light, #f2f6fc) d'un ton plus foncé sur le fond clair de la section, où il se confondait ;
   le survol de btn-light reste plus foncé encore */
.accueil-prochaines .btn-light {
  --bs-btn-bg: #e0e5ec;
  --bs-btn-border-color: #e0e5ec;
}

.vignette-accueil {
  display: block;
  width: 190px;
  color: var(--c44-texte);
  text-align: center;
}

.vignette-accueil:hover {
  color: var(--c44-texte);
  text-decoration: none;
}

/* Survol d'une vignette : liseré cyan comme une ligne du calendrier, ombre moyenne au lieu de la petite, affiche un peu
   assombrie comme un bouton (décision de Luc du 29/10/2026) */
.vignette-accueil .vignette-affiche {
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, filter .15s ease-in-out;
}

.vignette-accueil:hover .vignette-affiche {
  border-color: var(--c44-cyan);
  box-shadow: var(--bs-box-shadow);
  filter: brightness(.9);
}

.vignette-affiche {
  display: block;
  width: 190px;
  height: 250px;
  object-fit: cover;
  margin-bottom: .5rem;
}

.accueil-recherche {
  max-width: 300px;
}

/*
** Carrousel des publicités de l'accueil
*/

/* Au-dessus du bandeau, à sa largeur, comme la v1.1 ; width et height des bannières (1 000 x 300) gardent leur place avant
   leur chargement */
.carrousel-publicites {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

.carrousel-publicites .banniere {
  display: block;
  width: 100%;
  height: auto;
}

/* Flèches étroites : à 15 % de large, celles de Bootstrap couvriraient le bord des bannières et leur lien */
.carrousel-publicites .carousel-control-prev,
.carrousel-publicites .carousel-control-next {
  width: 2.5rem;
}

.carrousel-pause {
  position: absolute;
  right: .5rem;
  bottom: .5rem;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #ffffff;
  background-color: rgba(0, 0, 0, .5);
}