/* Stratégies d'allure (strategies.js) : section de la page parcours.
   Couleurs par les variables de app.css (thème sombre compris), sauf la palette
   des stratégies ci-dessous : cinq teintes franches pour les distinguer sur un graphique. */

:root {
  --strat-constant: #6b736a;
  --strat-terrain: #1d5fc2;
  --strat-tiers: #e08a00;
  --strat-depart: #c62828;
  --strat-optimal: #1b8a3c;
  --strat-variante: #7b3fa0;
}
:root[data-theme="dark"] {
  --strat-constant: #a9b0a7;
  --strat-terrain: #6aa6ff;
  --strat-tiers: #ffb547;
  --strat-depart: #ff6e62;
  --strat-optimal: #5fd07c;
  --strat-variante: #cf95e6;
}

.strategies h3 { margin: 22px 0 8px; font-size: 1.02rem; }
.graphique-strategies { width: 100%; height: auto; display: block; color: var(--texte-doux); font-family: inherit; }
.graphique-strategies text { fill: var(--texte-doux); }

.bandeau-strategies {
  display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;
  padding: 10px 14px; margin: 12px 0; border-radius: var(--rayon);
  background: var(--glacier-teinte); color: var(--texte);
}
.carte-recalibrage { margin: 10px 0 4px; }
.carte-recalibrage ul { margin: 6px 0 10px; padding-left: 20px; }

.table-strategies td, .table-strategies th { white-space: nowrap; }
.table-strategies .nom-strategie { text-align: left; }
.table-strategies .nom-strategie i,
.legende-strategies i {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px;
}
.legende-strategies i.trait { height: 3px; border-radius: 0; background: var(--texte); vertical-align: 3px; }
.table-strategies .ligne-proposee td { background: var(--pierre); font-weight: 600; }
.pastille-retenue {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: var(--foret); color: var(--sur-foret); font-size: 0.75rem; font-weight: 600;
}
.legende-strategies { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.88rem; color: var(--texte-doux); margin: 4px 0 0; }

.grille-curseurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.grille-curseurs fieldset { border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 8px 14px 4px; min-width: 0; }
.grille-curseurs legend { padding: 0 6px; color: var(--foret); font-weight: 600; }
.curseur-effort label { display: flex; justify-content: space-between; gap: 10px; }
.curseur-effort label span { font-variant-numeric: tabular-nums; font-weight: 600; }
.curseur-effort input[type=range] { width: 100%; }

.ligne-variante { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; }
.ligne-variante input[type=text] { flex: 1 1 200px; min-width: 0; }
.liste-variantes { margin: 6px 0; padding-left: 20px; }
.liste-variantes .lien-plan { margin-left: 8px; }

.sensation { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.82rem; }
.sensation-facile { background: var(--glacier-teinte); color: var(--glacier); }
.sensation-moyen { background: var(--ocre-teinte); color: var(--ocre-texte); }
.sensation-dur { background: var(--erreur-teinte); color: var(--erreur); }
.table-reglages th { text-align: left; font-weight: 600; }
.table-reglages td:last-child { text-align: left; }

.phrases-gain-risque { margin: 6px 0 14px; padding-left: 18px; font-size: 0.92rem; }
.phrases-gain-risque li { margin: 3px 0; }
.bandeau-strategie-choisie { margin: 0 0 10px; padding: 10px 14px; border-radius: var(--rayon); background: var(--glacier-teinte); border-left: 4px solid var(--strat-optimal); }