/* ---------------------------------------------------------------------------
   Carte de candidat : la transposition HTML des visuels d'annonce.

   Les cartes étaient jusqu'ici des PNG fabriqués à la main, un par catégorie et
   par édition. Ici c'est du HTML : le texte est sélectionnable, indexable,
   traduisible, et la carte se régénère toute seule quand la donnée change.
   --------------------------------------------------------------------------- */

.lauriers-fiche {
  background-color: var(--ldt-bg);
  color: var(--ldt-text);
}

/* L'en-tête prend les surfaces de la fiche, en clair comme en sombre. */
.lauriers-fiche .site-header {
  background-color: var(--ldt-surface);
  border-bottom: 1px solid var(--ldt-border);
}

.lauriers-fiche .site-title {
  color: var(--ldt-heading);
}

/* Le menu, aux couleurs de la fiche. */
.lauriers-fiche .site-nav a {
  color: var(--ldt-text-muted);
}

.lauriers-fiche .site-nav a:hover {
  background-color: rgba(var(--ldt-primary-rgb), 0.15);
  color: var(--ldt-heading);
}

.lauriers-fiche .site-nav a[aria-current="page"] {
  background-color: var(--ldt-accent, var(--ldt-primary));
  color: var(--ldt-on-accent, var(--ldt-on-primary));
}

.lauriers-fiche .site-burger {
  background-color: transparent;
  border-color: var(--ldt-border-strong);
}

.lauriers-fiche .site-burger-bar {
  background-color: var(--ldt-text);
}

@media (max-width: 699px) {
  .lauriers-fiche .site-nav {
    background-color: var(--ldt-surface);
    border-bottom-color: var(--ldt-border);
  }
}

.lauriers-fiche .site-footer {
  background-color: var(--ldt-surface);
  border-top: 1px solid var(--ldt-border);
  color: var(--ldt-text-muted);
}

.lauriers-fiche .site-footer b {
  color: var(--ldt-text);
}

.athlete-main {
  max-width: 680px;
  margin: 0 auto;
  padding: 88px 16px 60px;
}

/* --- En-tête d'édition --------------------------------------------------- */

.athlete-edition + .athlete-edition {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--ldt-border);
}

.athlete-edition-head {
  text-align: center;
  margin-bottom: 1.25rem;
}

/* Le logo au-dessus de la carte (.brand-card) : dimensionné par le style
   actif, dans la variante du thème en cours. */

.athlete-edition-title {
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ldt-heading);
  margin: 0;
  line-height: 1.15;
}

.athlete-edition-sub {
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ldt-primary);
  margin: 0.15rem 0 0;
}

/* --- La carte ------------------------------------------------------------ */

/* Bandeau : une vraie photo d'action, quand Trail DataManager en a une en
   paysage (8 des 32 candidats 2025). Sinon le dégradé du bloc fait le fond :
   une vignette de 300 px étirée sur 680 px serait illisible. */
.athlete-visual.has-banner {
  min-height: 330px;
}

.athlete-banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* Voile qui assoit le nom et le médaillon sur n'importe quelle photo. */
.athlete-visual.has-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
              rgba(var(--ldt-veil-rgb), 0.5) 0%,
              rgba(var(--ldt-veil-rgb), 0.2) 38%,
              rgba(var(--ldt-veil-rgb), 0.94) 100%);
}

.athlete-siblings {
  margin-top: 1.5rem;
  font-size: 0.9rem;
}

.athlete-siblings-title {
  color: var(--ldt-text-faint);
  margin-bottom: 0.4rem;
}

.athlete-siblings ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.1rem;
}

.athlete-siblings a {
  color: var(--ldt-text-muted);
}

.athlete-siblings a:hover {
  color: var(--ldt-primary);
}

.athlete-card {
  background-color: var(--ldt-surface);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(var(--ldt-shadow-rgb), 0.45);
}

/* En clair, la même ombre ferait une tache : la carte se pose, sans plus. */
[data-theme="light"] .athlete-card {
  box-shadow: 0 14px 40px rgba(var(--ldt-shadow-rgb), 0.14);
  border: 1px solid var(--ldt-border);
}

.athlete-visual {
  position: relative;
  min-height: 250px;
  background: linear-gradient(150deg, var(--ldt-surface-3) 0%, var(--ldt-surface-2) 55%, var(--ldt-bg) 100%);
  display: flex;
  align-items: flex-end;
}

/* Portrait rond, comme sur les visuels d'annonce. Les photos font 300 px de
   côté : à 132 px elles restent nettes, ce qu'un bandeau pleine largeur ne
   permettrait pas. */
.athlete-portrait {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--ldt-chip);
  box-shadow: 0 8px 22px rgba(var(--ldt-shadow-rgb), 0.45);
  z-index: 2;
}

.athlete-pill,
.athlete-cote,
.athlete-identity,
.athlete-name {
  position: relative;
  z-index: 2;
}

/* Le bloc nom + nationalite occupe toute la largeur du bandeau, comme le
   nom seul le faisait avant. */
.athlete-identity {
  width: 100%;
}

.athlete-pill {
  position: absolute;
  top: 1.35rem;
  right: 1.1rem;
  background-color: var(--ldt-primary);
  color: var(--ldt-on-primary);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  white-space: nowrap;
}

.athlete-cote {
  position: absolute;
  right: 1.4rem;
  bottom: 4.6rem;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: var(--ldt-chip);
  border: 4px solid var(--ldt-gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(var(--ldt-shadow-rgb), 0.4);
}

.athlete-cote b {
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--ldt-on-chip);
}

.athlete-cote small {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ldt-on-chip-muted);
  margin-top: 1px;
}

.athlete-name {
  margin: 0;
  padding: 1.25rem 1.25rem 1.1rem;
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--ldt-heading);
  width: 100%;
}

.athlete-firstname {
  font-weight: 300;
  color: var(--ldt-text);
}

.athlete-name strong {
  font-weight: 700;
}

/* La nationalite sous le nom, dans le meme bandeau : elle fait partie de
   l identite du coureur. Le nom porte deja le padding du bandeau, on ne lui
   rend ici que la gouttiere du bas. */
.athlete-nationality {
  margin: -0.55rem 0 0;
  padding: 0 1.25rem 1.1rem;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--ldt-text);
}

.athlete-flag {
  margin-right: 0.35rem;
}

/* --- Palmarès et résumé --------------------------------------------------- */

.athlete-palmares {
  list-style: none;
  margin: 1rem 1.25rem 0;
  padding: 1rem 1.1rem;
  background-color: rgba(var(--ldt-contrast-rgb), 0.055);
  border-radius: 1rem;
}

.athlete-palmares li {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ldt-heading);
  padding: 0.18rem 0;
}

.athlete-summary {
  margin: 1.1rem 1.25rem 1.5rem;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ldt-text-muted);
}

.athlete-result {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 1.25rem 1.4rem;
  padding: 0.7rem 1rem;
  border-radius: 0.9rem;
  background-color: rgba(var(--ldt-contrast-rgb), 0.05);
  font-size: 0.95rem;
  color: var(--ldt-text);
}

.athlete-result.is-laureate {
  background-color: rgba(245, 197, 24, 0.12);
  border: 1px solid rgba(245, 197, 24, 0.4);
}

.athlete-result.is-voting {
  background-color: rgba(var(--ldt-primary-rgb), 0.12);
  border: 1px solid rgba(var(--ldt-primary-rgb), 0.4);
}

.athlete-result-medal {
  font-size: 1.4rem;
  line-height: 1;
}

.athlete-result b {
  color: var(--ldt-heading);
}

.athlete-result a,
.athlete-links a,
.athlete-back a {
  color: var(--ldt-primary);
}

/* --- Pied de page -------------------------------------------------------- */

.athlete-foot {
  margin-top: 2rem;
  text-align: center;
  color: var(--ldt-text-muted);
  font-size: 0.9rem;
}

.athlete-note {
  max-width: 34rem;
  margin: 0 auto 0.9rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ldt-text-faint);
}

.athlete-links a {
  margin: 0 0.6rem;
}

.athlete-back {
  margin-top: 1.5rem;
}

/* --- Petits écrans -------------------------------------------------------- */

@media (max-width: 480px) {
  .athlete-edition-title {
    font-size: 1.5rem;
  }

  .athlete-edition-sub {
    font-size: 0.9rem;
  }

  .athlete-name {
    font-size: 1.5rem;
  }

  .athlete-cote {
    width: 66px;
    height: 66px;
    border-width: 3px;
    bottom: 3.8rem;
  }

  .athlete-portrait {
    width: 96px;
    height: 96px;
    border-width: 3px;
  }

  .athlete-pill {
    font-size: 0.68rem;
    padding: 0.35rem 0.8rem;
  }

  .athlete-cote b {
    font-size: 1.25rem;
  }

  .athlete-visual {
    min-height: 240px;
  }

  .athlete-palmares,
  .athlete-summary,
  .athlete-result {
    margin-left: 0.9rem;
    margin-right: 0.9rem;
  }
}

/* Le sous-menu de l'édition, sur le fond des fiches. */
.lauriers-fiche .site-nav .site-subnav {
  background-color: var(--ldt-surface);
  border-color: var(--ldt-border);
}

.lauriers-fiche .site-subnav-toggle {
  color: var(--ldt-text-muted);
}

.lauriers-fiche .site-subnav-toggle:hover,
.lauriers-fiche .site-subnav-toggle:focus-visible {
  background-color: rgba(var(--ldt-primary-rgb), 0.15);
  color: var(--ldt-heading);
}

/* En desktop, l'en-tête est transparent et aligné sur la fiche (680 px,
   16 px de gouttière) : le fond de la page passe dessous. En mobile il garde
   son fond, puisqu'il reste fixe au-dessus du contenu. */
@media (min-width: 700px) {
  .lauriers-fiche .site-header {
    max-width: 680px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: transparent;
    border-bottom: 0;
  }

  .athlete-main {
    padding-top: 12px;
  }
}

/* La fiche a 16 px de gouttière : l'en-tête mobile suit. */
@media (max-width: 699px) {
  .lauriers-fiche .site-header {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* La fiche ne fait que 680 px : le grand logo, le grand titre et le menu n'y
   tiennent pas côte à côte, le titre passait sous « Accueil ». Un cran de
   moins sur ce thème. */
@media (min-width: 992px) {
  .lauriers-fiche .site-header .site-header-logo {
    width: 68px;
    height: 68px;
  }

  .lauriers-fiche .site-header .site-title {
    font-size: 1.4rem;
  }
}

/* Sur la fiche candidat, le contenu fait 680 px avec 16 px de gouttière : la
   bande du pied de page suit. */
@media (min-width: 700px) {
  .lauriers-fiche .site-footer {
    width: calc(100% - 32px);
    max-width: 648px;
  }
}