:root {
  color-scheme: light;
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #1f2430;
  --muted: #6b7280;
  --border: #e3e5ea;
  --accent: #b23a48;

  /* aplats de couleur — un ton plein par type de séance */
  --endurance: #2f6fed;
  --fractionne: #e8622c;
  --cotes: #0f9b8e;
  --renfo: #2fa84f;
  --sortie-longue: #7c3aed;
  --sortie-longue-long: #54198a;
  --repos: #9aa0ac;
  --course: #b8860b;

  /* Hauteur reelle de la nav sticky, utilisee par scroll-margin-top pour que les ancres (#id)
     n'atterrissent jamais sous elle. Plus haute sur mobile car la nav passe sur 2 lignes. */
  --nav-height: 62px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Le wrap grandit pour occuper l'espace restant : le footer (en flux normal, plus en position
   fixed) reste toujours apres le contenu au lieu de risquer de le recouvrir sur mobile quand
   il passe sur plusieurs lignes (cf. footer-links). */
.wrap { max-width: 1080px; margin: 0 auto; padding: 24px 16px 32px; width: 100%; flex: 1 0 auto; min-width: 0; }
h1 {
  font-size: 1.5rem;
  margin: 0 0 4px;
}
.subtitle {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 20px;
}
.selector {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.selector button {
  flex: 1;
  min-width: 100px;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
}
.selector button:hover { border-color: var(--accent); }
.selector button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* --- Prochaine séance (hero) --- */
.hero-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 8px;
}
.hero {
  border-radius: 16px;
  padding: 20px 20px 18px;
  margin-bottom: 36px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.hero .card-label { color: rgba(255,255,255,0.85); }
.hero .card-text { font-size: 1.05rem; }

/* --- Grille hebdomadaire --- */
.week-row {
  margin-bottom: 26px;
}
.week-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 10px;
  padding-left: 2px;
}
.week-title span {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
}
.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}

.card {
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 10px;
  color: #fff;
  position: relative;
  min-width: 0;
}
.card.empty {
  background: var(--card);
  border: 1px dashed var(--border);
  color: var(--muted);
}
.card.empty .card-label { color: var(--muted); }
.card.empty .card-text { color: var(--muted); font-style: italic; }

@media (max-width: 720px) {
  .week-row { overflow-x: auto; }
  .week-grid { grid-template-columns: repeat(7, minmax(120px, 1fr)); width: max-content; }
}
.card-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.card-label {
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.9);
}
.card-text {
  white-space: pre-line;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-top: 12px;
}
.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.92);
  color: rgba(0,0,0,0.72);
  padding: 4px 12px;
  border-radius: 20px;
  margin: 10px 0 0;
}
.links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: rgba(0,0,0,0.22);
  padding: 5px 10px;
  border: none;
  border-radius: 20px;
  text-decoration: none;
  cursor: pointer;
}
.pill-link:hover { background: rgba(0,0,0,0.34); }

.gloss {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  font-weight: 700;
}
.gloss:hover { opacity: 0.85; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--card);
  color: var(--text);
  border-radius: 14px;
  padding: 22px 24px 26px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow: auto;
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.modal-box h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  padding-right: 30px;
}
.modal-box p {
  margin: 0;
  line-height: 1.55;
  font-size: 0.95rem;
  color: var(--text);
}
.modal-box img {
  max-width: 100%;
  display: block;
  border-radius: 10px;
  margin-top: 4px;
}
.direction-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 14px;
}
.direction-arrow {
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
}
.direction-label {
  font-weight: 700;
  font-size: 0.95rem;
}
.direction-hint {
  font-size: 0.82rem;
  color: var(--muted);
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { background: var(--border); }

.card.type-endurance { background: var(--endurance); }
.card.type-fractionne { background: var(--fractionne); }
.card.type-cotes { background: var(--cotes); }
.card.type-renfo { background: var(--renfo); }
.card.type-sortie-longue { background: var(--sortie-longue); }
.card.type-sortie-longue.long { background: var(--sortie-longue-long); }
.card.type-repos { background: var(--repos); }
.card.type-course, .card.race { background: var(--course); color: #2a1e00; }
.card.type-course .card-label, .card.race .card-label { color: rgba(0,0,0,0.65); }

.card.past {
  filter: grayscale(0.9) brightness(0.92);
  opacity: 0.5;
}
.card.past .card-text { text-decoration: line-through; }

.next-ring {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

a { color: inherit; }
#empty-state {
  text-align: center;
  color: var(--muted);
  padding: 40px 0;
  font-size: 0.9rem;
}

/* --- Portail / accueil / gate d'accès --- */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
}
.event-list { display: grid; gap: 14px; margin-top: 16px; }
.event-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s ease;
}
.event-card:hover { border-color: var(--accent); }
.event-card .event-name { font-weight: 700; font-size: 1.05rem; }
.event-card .event-meta { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 240px));
  gap: 14px;
  margin-top: 16px;
}
.tool-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92px;
}
.tool-card.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.tool-card .tool-name { font-weight: 700; }
.tool-card .tool-desc { color: var(--muted); font-size: 0.85rem; margin-top: 4px; }
.form-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.form-grid input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
}
.form-grid button {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.form-grid select {
  padding: 10px 34px 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font: inherit;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 14px;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
.form-grid select:focus {
  outline: none;
  border-color: var(--accent);
}
.flash {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.flash.error { background: rgba(178,58,72,0.12); color: var(--accent); }

.tips-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tips-list li {
  background: rgba(178,58,72,0.12);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.callout {
  background: var(--accent);
  color: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  margin: 14px 0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.callout h4 {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.callout p { margin: 0; }

/* --- Blocs pliables (details/summary) --- */
.collapsible { margin-bottom: 14px; }
.collapsible.sub { margin: 18px 0; }
.collapsible > summary {
  cursor: pointer;
  list-style: none;
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary h3,
.collapsible > summary h4 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.collapsible .chevron {
  display: inline-block;
  font-size: 0.75em;
  color: var(--muted);
  transition: transform 0.15s ease;
}
.collapsible:not([open]) .chevron { transform: rotate(-90deg); }

/* --- Editeur de plan (tableau jour x groupe) --- */
.plan-editor {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
}
.plan-editor th, .plan-editor td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
}
.plan-editor th {
  background: var(--bg);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  white-space: nowrap;
}
.plan-editor-day { min-width: 150px; font-weight: 600; }
.plan-editor-textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.hidden { display: none !important; }

/* --- Formulaire ravito (parcours admin) --- */
.waypoint-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: var(--nav-height);
}
/* Utilitaire pour toute cible d'ancre (#id) hors .waypoint-row : meme principe, nav sticky. */
.scroll-anchor { scroll-margin-top: var(--nav-height); }
.waypoint-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}
.waypoint-form .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.waypoint-form .field label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.waypoint-form .field input[type="text"],
.waypoint-form .field input[type="number"] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  width: 100%;
}
.waypoint-form .field-wide { grid-column: span 2; }
.waypoint-form .field-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.waypoint-form .field-checkbox label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text);
}
.waypoint-form .field-submit button {
  width: 100%;
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 720px) {
  .waypoint-form { grid-template-columns: repeat(2, 1fr); }
  .waypoint-form .field-wide { grid-column: span 2; }
}

/* --- Groupes/distances (creation d'event) --- */
.group-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
@media (max-width: 720px) {
  .group-row { grid-template-columns: repeat(2, 1fr); }
  .group-row input:first-child { grid-column: span 2; }
}

/* --- Checklist materiel --- */
.checklist {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.checklist li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.checklist li:last-child { border-bottom: none; }
.checklist label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  line-height: 1.4;
}
.checklist input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Confine les panes/controles Leaflet (z-index internes 200 a 1000) dans leur propre contexte
   d'empilement : sans ca, ils passaient au-dessus de la nav sticky et du footer (tous deux a
   z-index:20) des qu'ils se chevauchaient a l'ecran, sur toutes les tailles d'ecran. */
#map { position: relative; z-index: 0; }

#layer-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
#layer-toggles input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* --- Infobulle sur le profil de denivele (carte), au clic sur un point de passage ou un
   coureur. Taille fixe (identique quel que soit le contenu) et centree verticalement dans le
   profil : seule la position horizontale suit le point clique, bornee entre 0 et la largeur
   du profil (cf. showElevationTooltip) pour ne jamais deborder. --- */
.elevation-tooltip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  max-height: 150px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 26px 8px 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  white-space: normal;
  z-index: 5;
}
.elevation-tooltip-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  font-size: 0.82rem;
  line-height: 1.4;
}
.elevation-tooltip-close {
  position: absolute;
  top: 2px;
  right: 4px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--muted);
  padding: 4px;
}

/* --- Tableau des ravitos (carte) : colonnes de largeur fixe et identique (une par point de
   passage), noms de coureur fusionnes (rowspan) dans la 1ere colonne. --- */
#pacing-table { table-layout: fixed; width: auto; }
#pacing-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-editor td.pacing-runner-name {
  font-weight: 700;
  white-space: normal;
  vertical-align: middle;
}
.ecart-ahead { color: #2fa84f; font-weight: 700; }
.ecart-late { color: var(--accent); font-weight: 700; }
.ecart-mid { color: #b8860b; font-weight: 700; }

/* --- Formulaire feedback (modale, page Plan) --- */
.feedback-form { margin-top: 8px; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.feedback-form-wide { grid-column: span 3; }
@media (max-width: 480px) {
  .feedback-form { grid-template-columns: 1fr 1fr; }
  .feedback-form-wide,
  .feedback-form button { grid-column: span 2; }
}

/* --- Navigation --- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.site-nav-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nav-logo {
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  font-size: 1rem;
}
.nav-sep { color: var(--muted); }
.nav-crumb {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.nav-crumb:hover { text-decoration: underline; }
.nav-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: rgba(178,58,72,0.12);
  color: var(--accent);
  padding: 3px 10px;
  border-radius: 20px;
}
.site-nav-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.nav-tool {
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
  padding: 5px 10px;
  border-radius: 20px;
}
a.nav-tool:hover { background: var(--bg); color: var(--text); }
.nav-tool.active { background: var(--accent); color: #fff; }
.nav-tool.disabled { opacity: 0.4; cursor: not-allowed; }
.nav-logout {
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
  margin-left: 4px;
}
.nav-logout:hover { color: var(--accent); text-decoration: underline; }
.nav-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 0 4px;
}

@media (max-width: 720px) {
  .site-nav { flex-direction: column; align-items: stretch; }
  .site-nav-tools { margin-left: 0; }
  /* La nav passe sur 2 lignes (site-nav-main puis site-nav-tools) : les ancres doivent
     tenir compte de cette hauteur plus grande pour ne pas atterrir dessous. */
  :root { --nav-height: 118px; }
}

/* --- Footer --- */
/* En flux normal (flex-shrink:0 dans le body flex-column) : toujours apres le contenu, jamais
   par-dessus, quelle que soit sa hauteur reelle (elle varie : footer-links passe sur 2 lignes
   sur les petits ecrans). Voir le commentaire sur .wrap plus haut. */
.site-footer {
  flex-shrink: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}
.footer-copy a { color: inherit; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); text-decoration: underline; }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #15171c;
    --card: #1e2128;
    --text: #e7e9ee;
    --muted: #9aa0ac;
    --border: #2c303a;
    --accent: #e0798a;
  }
  .selector button.active { color: #1a1a1a; }
}

/* --- Impression (roadbook) --- */
@media print {
  .site-nav, .site-footer, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .panel { box-shadow: none !important; border: 1px solid #ccc !important; }
}