/* ==========================================================================
   trailpacer — pas d'etape de compilation, systeme de polices natif (pas
   d'appel externe : coherent avec "aucune dependance reseau" du coeur).

   Palette "pierre et topographie" : fond mineral frais (pas de creme), vert
   foret conserve comme couleur de marque, bleu glacier pour l'interactif,
   ocre reserve aux alertes ravitaillement (l'erreur rouge reste pour les
   erreurs de formulaire uniquement — deux signaux, deux couleurs).
   ========================================================================== */

:root {
  --foret: #1f3d2b;
  --foret-clair: #2f5a3f;
  --roche: #5b6259;
  --roche-claire: #8b9186;
  --pierre: #eef0e8;
  --pierre-foncee: #e1e5d8;
  --texte: #17201b;
  --texte-doux: #46504a;
  --bordure: #c9cfbf;
  --erreur: #a4342a;
  --glacier: #2f6f77;
  --glacier-teinte: #e3eeed;
  --ocre: #a9762c;
  --ocre-teinte: #f3e9d8;
  /* Ocre de marque (aplats, aires, grands chiffres) et ocre texte (5,6:1 sur
     pierre) : l'ocre de marque fait 3,4:1, trop peu pour du texte courant
     (audit accessibilite du 27.09.2026). */
  --ocre-texte: #7d5720;

  --erreur-teinte: #f5e0dc;
  --surface: #ffffff;
  --sur-foret: #ffffff;
  --entete-fond: #1f3d2b;
  --rayon: 10px;
  --ombre: 0 1px 3px rgba(31, 61, 43, 0.12);

  --largeur-lecture: 720px;
  --largeur-app: 1180px;
  --largeur-large: 1520px;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--pierre);
  color: var(--texte);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { color: var(--foret); line-height: 1.2; }
h1 {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
}
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; margin-top: 0; }

a { color: var(--foret-clair); }

.conteneur { max-width: var(--largeur-lecture); margin: 0 auto; padding: 28px 16px 60px; }
.conteneur-etroite { max-width: 440px; }
.conteneur-app { max-width: var(--largeur-app); margin: 0 auto; padding: 28px 16px 60px; }
.conteneur-large { max-width: var(--largeur-large); margin: 0 auto; padding: 28px 16px 60px; }

.disposition-deux-colonnes {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 28px;
  align-items: start;
}
.disposition-deux-colonnes-egale { grid-template-columns: 1fr 1fr; }
/* Un enfant de grille ne peut pas retrecir sous sa largeur "naturelle" sans
   ceci : un tableau large debordait de la carte sur mobile. */
.disposition-deux-colonnes > * { min-width: 0; }
.table-scroll { max-width: 100%; }
.bloc-interne { padding: 0; }
.bloc-interne + .bloc-interne { margin-top: 8px; }
@media (max-width: 900px) {
  .disposition-deux-colonnes,
  .disposition-deux-colonnes-egale { grid-template-columns: 1fr; }
}

.zone-formulaire { max-width: 760px; margin-bottom: 24px; }

/* En-tete / pied ------------------------------------------------------- */

.entete {
  background: var(--entete-fond);
  color: var(--sur-foret);
}
.bouton-theme {
  background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); color: var(--sur-foret);
  padding: 4px 10px; font-size: 1rem; line-height: 1.3; border-radius: 6px; cursor: pointer;
}
.bouton-theme:hover { background: rgba(255, 255, 255, 0.12); }

/* Theme sombre (sur demande, bouton dans l'en-tete) : nuit en montagne,
   ardoise et vert de lichen ; les courbes s'eclairent, le reste s'assombrit. */
:root[data-theme="dark"] {
  --foret: #a8d8b8;
  --foret-clair: #7fbf95;
  --roche: #9aa49b;
  --roche-claire: #6f7a71;
  --pierre: #131a16;
  --pierre-foncee: #1f2924;
  --texte: #e8ede7;
  --texte-doux: #b1bbb2;
  --bordure: #34423a;
  --erreur: #f0928a;
  --erreur-teinte: #3a2320;
  --glacier: #86cdd6;
  --glacier-teinte: #16323a;
  --ocre: #e2b566;
  --ocre-teinte: #3a2e16;
  --ocre-texte: #e2b566;
  --surface: #1b2420;
  --sur-foret: #0f1613;
  --entete-fond: #0c120f;
  --ombre: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* Echelle de z-index : nombres ronds avec marge, pour ne plus improviser une
   valeur a 4 chiffres a chaque nouvel element superpose. */
:root {
  --z-fond: 0;           /* couches de fond (carte Leaflet) */
  --z-entete: 20;        /* en-tete, menus deroulants */
  --z-superposition: 30; /* info-bulles, popovers */
  --z-visionneuse: 1000; /* visionneuse plein ecran, au-dessus de tout */
}
:root[data-theme="dark"] .entete, :root[data-theme="dark"] .entete-droite a, :root[data-theme="dark"] .logo-texte,
:root[data-theme="dark"] .entete-droite .bouton-secondaire, :root[data-theme="dark"] .bouton-menu-mobile, :root[data-theme="dark"] .bouton-theme { color: #e8ede7; }
/* Tuiles de carte assorties a la palette "pierre/foret/ocre" (filtre sur le
   panneau des tuiles seul, pas .leaflet-container, pour ne pas desaturer nos
   propres marqueurs de points colores). */
.leaflet-tile-pane { filter: grayscale(0.6) sepia(0.25) saturate(0.85) contrast(0.95); }
:root[data-theme="dark"] .leaflet-tile-pane { filter: grayscale(0.7) sepia(0.2) saturate(0.8) contrast(0.9) brightness(0.75); }
:root[data-theme="dark"] .indicateur { background: var(--pierre-foncee); }
.entete-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  gap: 16px;
  flex-wrap: wrap;
}
.logo-texte { display: inline-flex; align-items: center; gap: 8px; color: var(--sur-foret); text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.logo-icone { height: 28px; width: auto; display: block; }
.entete-droite { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.entete-droite a { color: var(--sur-foret); text-decoration: none; }
.entete-droite a:hover { text-decoration: underline; }
/* .bouton-secondaire suppose un fond clair (texte + bordure vert fonce) :
   invisible tel quel sur le fond vert fonce de l'en-tete. */
.entete-droite .bouton-secondaire { color: var(--sur-foret); border-color: rgba(255, 255, 255, 0.6); }
.entete-droite .bouton-secondaire:hover { background: rgba(255, 255, 255, 0.12); }

.bouton-menu-mobile {
  display: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  padding: 6px 12px;
  font-size: 1.1rem;
  line-height: 1;
}
.bouton-menu-mobile:hover { background: rgba(255, 255, 255, 0.12); }

/* Separateur entre navigation principale (quotidien) et secondaire (compte,
   reglages, aide) : trait vertical discret cote large ecran, ou le menu
   reste sur une ligne ; pleine largeur horizontale une fois empile en
   colonne sur mobile (retour utilisateur : le menu s'est allonge). */
.separateur-nav { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.25); margin: 2px 2px; }

@media (max-width: 680px) {
  .bouton-menu-mobile { display: block; order: 1; }
  .entete-droite {
    order: 2;
    flex-basis: 100%;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 12px;
  }
  .entete-droite.ouvert { display: flex; }
  .separateur-nav { width: 100%; height: 1px; align-self: auto; margin: 4px 0; }
}

.pied {
  margin-top: auto;
  padding: 18px 16px;
  color: var(--texte-doux);
  font-size: 0.85rem;
  border-top: 1px solid var(--bordure);
}

/* Accroche accueil ------------------------------------------------------ */

.accroche {
  display: grid;
  grid-template-columns: minmax(0, 480px) 1fr;
  align-items: center;
  gap: 40px;
  padding: 56px 0;
  min-height: 60vh;
}
.accroche-texte p { font-size: 1.08rem; color: var(--texte-doux); max-width: 46ch; }
.accroche-relief { width: 100%; height: auto; max-height: 420px; }
.actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .accroche { grid-template-columns: 1fr; padding: 32px 0; min-height: 0; }
  .accroche-relief { max-height: 220px; order: -1; }
}

/* Cartes / formulaires --------------------------------------------------- */

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 22px;
  margin-bottom: 18px;
}
.carte-table { padding: 0; overflow-x: auto; }

.liste-sorties { display: flex; flex-direction: column; gap: 10px; }
.carte-sortie {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 14px 18px; text-decoration: none; color: var(--texte); transition: border-color 0.15s;
}
.carte-sortie:hover { border-color: var(--foret-clair); }

.champ { margin-bottom: 16px; }
.champ label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; }
.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .grille-champs { grid-template-columns: 1fr; } }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="time"], input[type="file"], textarea, select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--surface);
  color: var(--texte);
}
textarea { resize: vertical; font-family: ui-monospace, monospace; font-size: 0.9rem; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--foret-clair); outline-offset: 1px; }

/* Validation au depart du champ ("blur"), pas seulement a la soumission
   (retour utilisateur, 28.09.2026) : voir brancherValidationChamps() dans
   app.js, deleguee sur tout le document. */
.champ-invalide { border-color: var(--erreur) !important; }
.erreur-champ { color: var(--erreur); font-size: 0.85rem; margin: 6px 0 0; }

.champ-mdp { display: flex; gap: 8px; align-items: center; }
.champ-mdp input { flex: 1 1 auto; }
.champ-mdp .bouton-afficher-mdp {
  flex: 0 0 auto;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  background: transparent;
  color: var(--foret);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.champ-mdp .bouton-afficher-mdp:hover { background: var(--pierre-foncee); }

/* Editeur de points nommes : nom / km / type / supprimer -------------------- */

.editeur-points-entete, .ligne-point {
  display: grid;
  grid-template-columns: 1fr 90px 170px 44px;
  gap: 8px;
  align-items: center;
}
.editeur-points-entete {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--foret);
  padding: 0 2px 6px;
}
.ligne-point { margin-bottom: 8px; }
.ligne-point input, .ligne-point select { margin: 0; }
.bouton-supprimer-point {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  background: var(--surface);
  color: var(--texte-doux);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.bouton-supprimer-point:hover { background: var(--pierre-foncee); color: var(--erreur); border-color: var(--erreur); }
#ajouter-point { margin-top: 4px; }

.ligne-point-ravito {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 6px 2px 2px;
  font-size: 0.85rem;
}
.ligne-point-ravito[hidden] { display: none; }
.champ-ravito { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--texte-doux); }
.champ-ravito select { width: auto; padding: 5px 8px; font-size: 0.85rem; }
.champ-ravito-case { margin-bottom: 0; font-size: 0.85rem; }

@media (max-width: 560px) {
  .editeur-points-entete { display: none; }
  /* minmax(0, 1fr) : sans le 0, la piste s'elargit a la largeur du select
     « Offre » (libelle long) et tous les champs debordent de la carte
     (retour utilisateur, premier point de passage sur iPhone). */
  .ligne-point { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px; border: 1px solid var(--bordure); border-radius: 8px; margin-bottom: 10px; min-width: 0; }
  .ligne-point > * { min-width: 0; max-width: 100%; }
  .ligne-point-ravito { gap: 10px; }
  .champ-ravito { flex-wrap: wrap; max-width: 100%; }
  .champ-ravito select { max-width: 100%; width: 100%; }
  .bouton-supprimer-point { justify-self: end; width: auto; height: auto; padding: 8px 14px; }
  .bouton-supprimer-point::after { content: " Supprimer"; font-size: 0.85rem; }
}

.case-consentement {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--texte-doux);
  margin-bottom: 18px;
  cursor: pointer;
}
.case-consentement input { margin-top: 1px; }

.cases-conditions { display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 9px 0; }
.case-condition {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.88rem; color: var(--texte); cursor: pointer;
}
.case-condition input { margin: 0; }

/* Cases a cocher : agrandies et teintees a la couleur de marque (meme famille
   visuelle que les boutons segmentes), plus faciles a viser avec des gants. */
.case-consentement input[type="checkbox"],
.case-condition input[type="checkbox"] {
  width: 20px; height: 20px; flex-shrink: 0;
  accent-color: var(--foret-clair);
  cursor: pointer;
}

button, .bouton {
  display: inline-block;
  background: var(--foret);
  color: var(--sur-foret);
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .bouton:hover { background: var(--foret-clair); }
.bouton-secondaire {
  background: transparent;
  color: var(--foret);
  border: 1px solid var(--foret);
}
.bouton-secondaire:hover { background: var(--pierre-foncee); }
.bouton-petit { padding: 6px 12px; font-size: 0.85rem; }
.bouton-danger { color: var(--erreur); border-color: var(--erreur); margin-left: 8px; }
.bouton-danger:hover { background: var(--erreur-teinte); }

.erreur {
  margin-top: 12px;
  color: var(--erreur);
  font-size: 0.9rem;
}

.aide { color: var(--texte-doux); font-size: 0.92rem; }
.aide-curseur { font-size: 0.8rem; margin-top: 6px; margin-bottom: 0; line-height: 1.4; }

details { margin-top: 18px; border-top: 1px solid var(--bordure); padding-top: 14px; }
details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--foret);
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "▸ "; }
details[open] summary::before { content: "▾ "; }

/* Accordeons par sujet (page du plan) : replies par defaut sur mobile,
   ouverts sur ordinateur (voir accordeonOuvertParDefaut, vues.js). Le
   summary tient lieu de titre de section. */
.accordeon { margin-top: 20px; border-top: 1px solid var(--bordure); padding-top: 0; }
.accordeon > summary {
  font-size: 1.05rem;
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.accordeon > summary::before { font-size: 0.85em; color: var(--texte-doux); }
.accordeon-corps { padding-bottom: 6px; }
.accordeon-corps > .champ:first-child,
.accordeon-corps > .grille-champs:first-child,
.accordeon-corps > .disposition-carte-profil:first-child { margin-top: 4px; }
.accordeon-corps > .aide:first-child { margin-top: 0; }
form .accordeon + .accordeon { margin-top: 8px; }
@media (max-width: 640px) {
  .accordeon > summary { padding: 14px 0; }
}

.chargement { padding: 40px 0; text-align: center; color: var(--texte-doux); }

/* Tableaux ---------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--bordure); font-size: 0.92rem; }
th { color: var(--foret); font-weight: 700; font-size: 0.86rem; border-bottom: 2px solid var(--foret); }
tr:last-child td { border-bottom: none; }

.table-plan { margin: 14px 0; }
.table-plan th, .table-plan td { text-align: center; }
.table-plan th:first-child, .table-plan td:first-child,
.table-plan th:nth-child(2), .table-plan td:nth-child(2) { text-align: left; }

.table-scroll { overflow-x: auto; }

/* Tableau responsive generique : sous 640px, une ligne devient une carte de
   paires label/valeur plutot que de forcer un defilement horizontal sur du
   contenu qui melange chiffres courts et texte libre (ravito, actions). */
@media (max-width: 640px) {
  table.table-responsive thead { display: none; }
  table.table-responsive, table.table-responsive tbody,
  table.table-responsive tr, table.table-responsive td { display: block; width: 100%; }
  table.table-responsive tr {
    margin-bottom: 12px; padding: 10px 12px 6px;
    border: 1px solid var(--bordure); border-radius: var(--rayon);
  }
  table.table-responsive tr:last-child { margin-bottom: 0; }
  table.table-responsive td {
    border: none; padding: 0 0 8px; text-align: left !important; white-space: normal;
  }
  table.table-responsive td:empty { display: none; }
  table.table-responsive td[data-label]::before {
    content: attr(data-label);
    display: block; font-size: 0.72rem; font-weight: 700;
    color: var(--roche); margin-bottom: 2px;
  }
  table.table-responsive td[data-label=""]::before { content: none; }
}

/* Contenu redondant avec un equivalent interactif deja present, ou secondaire
   (historique) : pas la peine de le faire tenir sur mobile, autant renvoyer
   a la version ordinateur (voir markdownLite/TITRES_MASQUES_MOBILE, vues.js,
   et "Plans precedents", vues.coursePlan). */
.mobile-seulement { display: none; }
@media (max-width: 640px) {
  .desktop-seulement { display: none; }
  .mobile-seulement { display: block; }
}

/* Cellule d'actions (boutons) d'un tableau : compacte a droite sur desktop,
   pleine largeur et non tronquee une fois la ligne empilee en carte. */
.cellule-actions { text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
  .cellule-actions { text-align: left; white-space: normal; display: flex; flex-wrap: wrap; gap: 8px; }
}

/* Sur mobile, le tableau de passage (8 colonnes) garde km + point visibles
   pendant le defilement horizontal : sans ca on perd tout repere. */
@media (max-width: 640px) {
  #tableau-passage table th:nth-child(1), #tableau-passage table td:nth-child(1),
  #tableau-passage table th:nth-child(2), #tableau-passage table td:nth-child(2) {
    position: sticky;
    background: var(--surface);
  }
  #tableau-passage table th:nth-child(1), #tableau-passage table td:nth-child(1) { left: 0; }
  #tableau-passage table th:nth-child(2), #tableau-passage table td:nth-child(2) { left: 56px; box-shadow: 2px 0 4px rgba(0,0,0,0.06); }
  #tableau-passage table tr.ligne-point-repere td:nth-child(1),
  #tableau-passage table tr.ligne-point-repere td:nth-child(2) { background: var(--pierre-foncee); }
}

.grille-cartes-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* Le chiffre que le coureur cherche en premier (arrivee prevue / ecart final),
   en Georgia comme les titres : une seule fois par carte, rien d'autre en gros. */
.resultat-hero, .comparaison-bilan {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 2px 0 20px;
}
.resultat-hero-chiffre, .comparaison-bilan-chiffre {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--foret);
  letter-spacing: -0.01em;
}
.resultat-hero-libelle, .comparaison-bilan-libelle {
  color: var(--texte-doux);
  font-size: 0.92rem;
  line-height: 1.45;
}
.comparaison-bilan-chiffre.ecart-retard { color: var(--ocre); }
.comparaison-bilan-chiffre.ecart-avance { color: var(--glacier); }
.comparaison-constats { margin: 0 0 16px; padding-left: 18px; font-size: 0.92rem; }
.comparaison-constats li { margin-bottom: 4px; }
.ecart-retard { color: var(--ocre-texte); font-weight: 600; }
.ecart-avance { color: var(--glacier); font-weight: 600; }
.comparaison-resultat { margin-top: 18px; }
.comparaison-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.comparaison-entete h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.selecteur-distance { margin-top: 12px; }
.selecteur-distance .aide { margin: 8px 0 0; font-size: 0.85rem; }

/* Filet de securite mobile : Safari iOS ne retrecit pas toujours un select
   ou un champ fichier sous sa largeur intrinseque ; un seul element qui
   deborde elargit toute la page et decale les marges. On borne les champs
   et on coupe tout debordement horizontal residuel (clip : pas de zone de
   defilement, contrairement a hidden). */
@media (max-width: 640px) {
  html, body { overflow-x: clip; }
  select, input, canvas, svg, img { max-width: 100%; }
  .partage-controles > * { max-width: 100%; }
}

/* Partage en image : apercu canvas rendu a la taille du format, affiche
   reduit ; la story reste etroite pour ne pas remplir l'ecran en hauteur. */
.partage-panneau { margin-top: 16px; border-top: 1px solid var(--bordure); padding-top: 14px; }
.partage-controles { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 14px; }
.partage-photo, .partage-cadrage { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; max-width: 100%; }
.partage-photo[hidden], .partage-cadrage[hidden] { display: none; }
.partage-photo input[type="file"] { width: auto; min-width: 0; }
.partage-titre { display: flex; align-items: center; gap: 10px; flex-basis: 100%; font-size: 0.9rem; font-weight: 600; }
.partage-titre input { flex: 1; min-width: 0; font-weight: 400; }
.partage-photo input[type="file"] { font-size: 0.85rem; max-width: 220px; }
.partage-cadrage input[type="range"] { width: 140px; }
.partage-apercu { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; border-radius: 8px; box-shadow: var(--ombre); background: var(--pierre-foncee); }
.partage-apercu[data-format="story"] { max-width: 320px; }
.partage-apercu[data-format="paysage"] { max-width: 760px; }
.partage-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

.course-entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.course-entete h1 { margin-bottom: 8px; }
.course-date { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--texte-doux); }
.course-date input { width: auto; padding: 6px 8px; font-size: 0.9rem; }

/* Page "Ma forme" (releves intervals.icu) ------------------------------- */
.grille-indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.indicateur { padding: 12px 14px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); }
.indicateur-libelle { font-size: 0.85rem; color: var(--texte-doux); }
.indicateur-valeur { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; font-size: 1.9rem; line-height: 1.1; margin: 4px 0 2px; color: var(--foret); }
.indicateur-valeur small { font-family: inherit; font-size: 0.55em; color: var(--texte-doux); }
.indicateur-detail { font-size: 0.8rem; color: var(--texte-doux); }
.indicateur.alerte { border-color: var(--ocre); background: var(--ocre-teinte); }
.indicateur.alerte .indicateur-valeur { color: var(--ocre); }
.indicateur.bon { border-color: var(--glacier); }
.indicateur.bon .indicateur-valeur { color: var(--glacier); }
.forme-conseil { margin-top: 14px; padding: 12px 14px; border-left: 4px solid var(--glacier); background: var(--glacier-teinte); border-radius: 0 8px 8px 0; }
.forme-conseil.prudent, .forme-conseil.feu-orange { border-color: var(--ocre); background: var(--ocre-teinte); }
.forme-conseil.feu-rouge { border-color: var(--erreur); background: var(--erreur-teinte); }
.entete-jour { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 20px; margin-bottom: 8px; }
.entete-jour h1 { margin-bottom: 4px; }
.phase-badge { display: inline-block; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; background: var(--pierre-foncee); color: var(--foret); align-self: center; }
.phase-badge.phase-course { background: var(--foret); color: var(--sur-foret); }
.phase-badge.phase-semaine_course { background: var(--glacier-teinte); color: var(--glacier); }
.phase-badge.phase-recuperation { background: var(--ocre-teinte); color: var(--ocre); }
.liste-seances { padding-left: 20px; margin: 6px 0 0; }
.liste-seances li { margin-bottom: 8px; font-size: 0.92rem; }
.liste-seances details { margin-top: 4px; border: none; padding: 0; }
.liste-seances summary { font-weight: 500; font-size: 0.85rem; }
.seance-description { white-space: pre-wrap; margin: 6px 0 0; }
.semaine-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 10px 0 8px; }
.jour-tuile { text-align: center; font-size: 0.78rem; color: var(--texte-doux); }
.jour-tuile.aujourdhui .jour-lib { color: var(--foret); font-weight: 700; }
.jour-tuile.futur { opacity: 0.45; }
.jour-barre { height: 70px; display: flex; align-items: flex-end; background: var(--pierre); border-radius: 4px; overflow: hidden; margin: 4px 0; }
.jour-barre-remplie { width: 100%; background: var(--foret-clair); border-radius: 4px 4px 0 0; min-height: 0; }
.jour-tuile.aujourdhui .jour-barre-remplie { background: var(--glacier); }
.jour-charge { font-variant-numeric: tabular-nums; }
.sparkline-bloc { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.sparkline { width: 240px; max-width: 100%; height: 48px; }
#carte-physiologie h4 { margin: 0 0 8px; }

/* Accordeons de page (Mon profil) : une carte par sujet, le summary tient
   lieu de titre ; replies sur mobile, ouverts sur ordinateur. */
details.accordeon-page { margin-top: 0; padding: 16px 22px; border-top: none; }
details.accordeon-page[open] { padding-bottom: 22px; }
@media (max-width: 640px) { details.accordeon-page { padding: 14px 16px; } details.accordeon-page[open] { padding-bottom: 18px; } }
details.accordeon-page > summary {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foret);
  padding: 2px 0;
  display: flex; align-items: center; gap: 10px;
}
details.accordeon-page > summary::before { font-size: 0.8em; color: var(--roche-claire); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
details.accordeon-page[open] > summary { margin-bottom: 14px; }
details.accordeon-page > .accordeon-corps { padding-bottom: 0; }

/* Contraste et hierarchie : les chiffres cles portent la couleur, le reste
   reste sobre. */
.carte h3 { font-size: 1.15rem; margin-bottom: 10px; }
.indicateur { border-color: #c2c8b8; }
.indicateur-valeur { font-size: 2.15rem; color: var(--foret); }
.indicateur-libelle { color: var(--texte); font-weight: 600; font-size: 0.86rem; }
.indicateur-detail { color: var(--texte-doux); }
.indicateur.alerte { border-color: var(--ocre); border-left-width: 5px; background: var(--ocre-teinte); }
.indicateur.alerte .indicateur-valeur { color: var(--ocre-texte); }
.indicateur.bon { border-color: var(--glacier); border-left-width: 5px; background: var(--glacier-teinte); }
.forme-conseil { margin: 12px 0 16px; padding: 14px 16px; font-size: 1.02rem; border-left-width: 6px; }
.forme-conseil > p:first-of-type { font-weight: 600; color: var(--texte); }
.forme-conseil.feu-orange { background: var(--ocre-teinte); }
.forme-conseil.feu-rouge { background: var(--erreur-teinte); }
.feu-pastille {
  display: inline-block; padding: 3px 10px; border-radius: 999px; margin-bottom: 8px;
  font-size: 0.82rem; font-weight: 700; color: var(--sur-foret); background: var(--glacier);
}
.feu-orange .feu-pastille { background: var(--ocre-texte); }
.feu-rouge .feu-pastille { background: var(--erreur); }
.phase-badge { background: var(--foret-clair); color: var(--sur-foret); font-size: 0.95rem; padding: 9px 16px; }
.phase-badge.phase-semaine_course { background: var(--glacier); color: var(--sur-foret); }
.phase-badge.phase-recuperation { background: var(--ocre); color: var(--sur-foret); }

/* Pastille de phase dans l'en-tete ------------------------------------- */
.entete-phase { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; }
.pastille-phase {
  display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
  text-decoration: none; color: var(--sur-foret); background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.pastille-phase.phase-course { background: var(--ocre-texte); border-color: var(--ocre-texte); }
.pastille-phase.phase-semaine_course { background: var(--glacier); border-color: var(--glacier); }
.pastille-phase.phase-recuperation { background: rgba(226, 181, 102, 0.25); border-color: var(--ocre); }
:root[data-theme="dark"] .pastille-phase { color: #e8ede7; }
:root[data-theme="dark"] .pastille-phase.phase-course, :root[data-theme="dark"] .pastille-phase.phase-semaine_course { color: #0f1613; }
@media (max-width: 680px) { .entete-phase { order: 3; flex-basis: 100%; justify-content: flex-start; margin-top: 8px; } .entete-phase:empty { display: none; } }

/* Heros du parcours : le relief du vrai parcours en fond, le nom en grand,
   les chiffres, et le recit de la preparation en triptyque. ------------- */
.course-hero {
  position: relative; overflow: hidden; border-radius: var(--rayon); margin-bottom: 22px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--pierre-foncee) 100%);
  border: 1px solid var(--bordure); box-shadow: var(--ombre);
}
.course-hero-relief { position: absolute; inset: auto 0 0 0; height: 45%; opacity: 0.55; pointer-events: none; }
.course-hero-relief svg { width: 100%; height: 100%; display: block; }
.course-hero-contenu { position: relative; padding: 26px 26px 22px; }
.course-hero-haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px 20px; }
.course-hero-titre { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 4px; letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; }
.course-hero-date { margin: 0; color: var(--texte-doux); font-size: 1rem; }
.course-hero-chiffres { display: inline-flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 18px; padding: 8px 14px; border-radius: 8px; background: color-mix(in srgb, var(--surface) 72%, transparent); }
.course-hero-chiffres div { display: flex; flex-direction: column; }
.course-hero-chiffres span { font-size: 0.82rem; color: var(--texte-doux); }
.course-hero-chiffres strong { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; font-size: 1.7rem; color: var(--foret); line-height: 1.1; }
.course-hero-chiffres small { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 0.85rem; color: var(--texte-doux); font-weight: 400; }
.course-hero-vide { margin: 18px 0 0; }
.course-triptyque { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 22px; }
.course-triptyque .etape {
  flex: 1 1 130px; min-width: 0; padding: 12px 14px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--bordure); display: flex; flex-direction: column;
}
.course-triptyque .etape span { font-size: 0.8rem; color: var(--texte-doux); }
.course-triptyque .etape strong { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; font-size: 1.9rem; line-height: 1.1; color: var(--foret); }
.course-triptyque .etape small { font-size: 0.78rem; color: var(--texte-doux); }
.course-triptyque .etape.actuel { border-color: var(--foret-clair); border-width: 2px; }
.course-triptyque .etape.cible strong { color: var(--glacier); }
.course-triptyque .etape.reel { border-color: var(--ocre); background: var(--ocre-teinte); }
.course-triptyque .etape.reel strong { color: var(--ocre); }
.course-triptyque .etape-lien { flex: 0 0 18px; align-self: center; height: 0; border-top: 2px dashed var(--bordure); }
@media (max-width: 640px) { .course-hero-contenu { padding: 18px 16px 16px; } .course-triptyque .etape-lien { display: none; } }

/* Semaine : totaux avec delta contre la semaine passee ------------------ */
.semaine-totaux { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 6px 0 4px; }
.semaine-totaux div { display: flex; flex-direction: column; }
.semaine-totaux span { font-size: 0.8rem; color: var(--texte-doux); }
.semaine-totaux strong { font-size: 1.2rem; color: var(--texte); font-variant-numeric: tabular-nums; }
.delta { display: inline-block; margin-top: 3px; font-style: normal; font-size: 0.78rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--pierre-foncee); color: var(--texte-doux); width: fit-content; }
.delta.hausse { background: var(--glacier-teinte); color: var(--glacier); }
.delta.baisse { background: var(--ocre-teinte); color: var(--ocre); }

/* Cycle vers la course (arc) et regularite (grille 12 semaines) --------- */
.cycle-disposition { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: start; }
.arc-cycle { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; }
.arc-seg { stroke: var(--pierre-foncee); }
.arc-seg.passe { stroke: var(--roche-claire); opacity: 0.55; }
.arc-seg.actif.dev { stroke: var(--foret-clair); }
.arc-seg.actif.affutage { stroke: var(--glacier); }
.arc-seg.actif.course { stroke: var(--ocre); }
.arc-seg.actif.recup { stroke: var(--ocre); opacity: 0.8; }
.arc-aujourdhui { fill: var(--surface); stroke: var(--foret); stroke-width: 4; }
.arc-libelle { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; font-size: 30px; font-weight: 700; fill: var(--foret); }
.arc-sous-libelle { font-size: 16px; fill: var(--texte-doux); }
.cycle-titre { margin: 0 0 8px; font-weight: 600; }
.cycle-legende { list-style: none; padding: 0; margin: 0 0 10px; font-size: 0.88rem; color: var(--texte-doux); }
.cycle-legende li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.cycle-legende li.actif { color: var(--texte); font-weight: 700; }
.cycle-legende i { width: 14px; height: 6px; border-radius: 3px; background: var(--pierre-foncee); display: inline-block; }
.cycle-legende li.dev i { background: var(--foret-clair); }
.cycle-legende li.affutage i { background: var(--glacier); }
.cycle-legende li.course i, .cycle-legende li.recup i { background: var(--ocre); }
.regularite-chiffres { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 10px 0 14px; }
.regularite-chiffres div { display: flex; flex-direction: column; }
.regularite-chiffres strong { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; font-size: 2rem; line-height: 1.05; color: var(--foret); }
.regularite-chiffres span { font-size: 0.8rem; color: var(--texte-doux); max-width: 16ch; }
.regularite-grille { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; }
.regularite-semaine { display: grid; grid-template-rows: repeat(7, 1fr); gap: 5px; }
.regularite-semaine i { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--pierre-foncee); }
.regularite-semaine i.niveau-1 { background: color-mix(in srgb, var(--foret-clair) 35%, var(--pierre-foncee)); }
.regularite-semaine i.niveau-2 { background: color-mix(in srgb, var(--foret-clair) 60%, var(--pierre-foncee)); }
.regularite-semaine i.niveau-3 { background: color-mix(in srgb, var(--foret-clair) 85%, var(--pierre-foncee)); }
.regularite-semaine i.niveau-4 { background: var(--foret); }
.regularite-semaine i.futur { background: transparent; border: 1px dashed var(--bordure); }
.regularite-semaine i.aujourdhui { outline: 2px solid var(--glacier); outline-offset: 1px; }
.regularite-axe { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; margin-top: 6px; font-size: 0.72rem; color: var(--texte-doux); }

/* Comparaison a la population (Mon profil) : jauge de percentile ---------- */
.comparaisons-population { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.jauge-population { padding: 12px 14px; border: 1px solid var(--bordure); border-radius: 8px; background: var(--surface); }
.jauge-population .jauge-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.jauge-population .jauge-titre span { font-size: 0.85rem; font-weight: 600; color: var(--texte); }
.jauge-population .jauge-titre strong { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; font-size: 1.5rem; color: var(--foret); }
.jauge-barre { position: relative; height: 10px; border-radius: 5px; margin: 10px 0 6px; background: linear-gradient(90deg, var(--ocre-teinte) 0%, var(--pierre-foncee) 50%, var(--glacier-teinte) 100%); }
.jauge-barre .jauge-mediane { position: absolute; left: 50%; top: -3px; width: 2px; height: 16px; background: var(--roche-claire); }
.jauge-barre .jauge-marqueur { position: absolute; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--foret); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--bordure); transform: translateX(-50%); }
.jauge-population.bon .jauge-marqueur { background: var(--glacier); }
.jauge-population.alerte .jauge-marqueur { background: var(--ocre); }
.jauge-lecture { font-size: 0.85rem; color: var(--texte); margin: 0; }
.jauge-lecture strong { color: var(--foret); }
.jauge-source { font-size: 0.74rem; color: var(--texte-doux); margin: 4px 0 0; }
.invite-population { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: var(--pierre); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.invite-population .champ { margin: 0; flex: 1 1 140px; }
.invite-population select, .invite-population input { width: 100%; }

/* Reglages du profil : un seul volet, ferme par defaut ------------------ */
details.reglages > summary { color: var(--texte-doux); }
details.reglages .accordeon.reglage { margin-top: 12px; }
details.reglages .accordeon.reglage > summary { font-size: 1rem; }

/* Mes parcours : sections et recommandations ---------------------------- */
.titre-section { font-size: 1.05rem; color: var(--texte-doux); margin: 18px 0 8px; font-weight: 600; }
.recommandations { border-left: 5px solid var(--ocre); margin: 20px 0; }
.recommandations h3 { margin-bottom: 4px; }
.liste-recos { padding-left: 18px; margin: 10px 0 14px; }
.liste-recos li { margin-bottom: 8px; line-height: 1.45; }
.liste-recos strong { color: var(--foret); }

/* Mes parcours : etat de la course ------------------------------------- */
.badge-course { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; margin-left: 8px; vertical-align: middle; }
.badge-course.terminee { background: var(--ocre-teinte); color: var(--ocre-texte); font-size: 0.875rem; }
.badge-course.a-venir { background: var(--glacier-teinte); color: var(--glacier); }
.badge-course.a-comparer { background: var(--pierre-foncee); color: var(--texte-doux); }
.parcours-resultat { font-size: 0.88rem; color: var(--texte-doux); margin-top: 2px; }
.parcours-resultat strong { color: var(--texte); }

/* Tableau des scenarios : une bande par point de passage, les trois
   scenarios cote a cote, le conseille en gras. */
.table-scenarios { margin: 10px 0 14px; }
.ligne-scenarios { display: grid; grid-template-columns: minmax(90px, 1.2fr) 3fr; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--bordure); }
.ligne-scenarios.titre-scenarios { border-bottom: 2px solid var(--foret); padding-bottom: 6px; font-size: 0.8rem; color: var(--texte-doux); }
.ligne-scenarios-point { display: flex; flex-direction: column; min-width: 0; }
.ligne-scenarios-point strong { color: var(--texte); overflow-wrap: anywhere; }
.scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.scenario { text-align: center; padding: 4px 2px; border-radius: 6px; }
.scenario span { display: block; font-size: 0.72rem; color: var(--texte-doux); }
.scenario strong { font-size: 1.05rem; font-weight: 500; color: var(--texte); font-variant-numeric: tabular-nums; }
.scenario.actif { background: var(--pierre); }
.scenario.actif strong { font-weight: 800; color: var(--foret); font-size: 1.15rem; }
.scenario.actif span { color: var(--foret); font-weight: 700; }
.ligne-scenarios.titre-scenarios .scenario span { font-size: 0.78rem; }
@media (max-width: 480px) { .ligne-scenarios { grid-template-columns: 1fr; gap: 4px; } .scenario strong { font-size: 1rem; } }

.comparaison-terrain { margin-top: 18px; }
/* Par type de pente : meme grille que les scenarios du plan. */
.table-terrain { margin: 10px 0 14px; }
.ligne-terrain { display: grid; grid-template-columns: minmax(110px, 1.2fr) 3fr; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bordure); }
.ligne-terrain.titre-terrain { border-bottom: 2px solid var(--foret); padding-bottom: 6px; font-size: 0.8rem; color: var(--texte-doux); }
.ligne-terrain.titre-terrain .terrain-valeur span { font-size: 0.78rem; }
.ligne-terrain-nom { display: flex; flex-direction: column; min-width: 0; }
.ligne-terrain-nom strong { color: var(--texte); }
.terrain-valeurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.terrain-valeur { text-align: center; padding: 4px 2px; border-radius: 6px; }
.terrain-valeur span { display: block; font-size: 0.72rem; color: var(--texte-doux); }
.terrain-valeur strong { font-size: 1.05rem; font-weight: 500; color: var(--texte); font-variant-numeric: tabular-nums; }
.terrain-valeur.ecart { background: var(--pierre); }
.terrain-valeur.ecart strong { font-weight: 800; font-size: 1.15rem; }
.terrain-valeur.ecart-retard strong { color: var(--ocre-texte); }
.terrain-valeur.ecart-avance strong { color: var(--glacier); }
@media (max-width: 480px) { .ligne-terrain { grid-template-columns: 1fr; gap: 4px; } .ligne-terrain.titre-terrain .ligne-terrain-nom { display: none; } }

/* Photo de course en fond du hero (partage sur photo) : voile pour garder le
   titre lisible, relief par-dessus en filigrane. */
.course-hero.avec-photo { color: #fff; }
.course-hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.course-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,22,16,0.35) 0%, rgba(12,22,16,0.55) 55%, rgba(12,22,16,0.85) 100%); }
.course-hero.avec-photo .course-hero-titre, .course-hero.avec-photo .course-hero-chiffres strong { color: #fff; }
.course-hero.avec-photo .course-hero-date, .course-hero.avec-photo .course-hero-chiffres span,
.course-hero.avec-photo .course-hero-chiffres small, .course-hero.avec-photo .course-date { color: #fff; }
.course-hero.avec-photo .course-hero-contenu { text-shadow: 0 1px 3px rgba(0,0,0,0.45); }
.course-hero.avec-photo .course-hero-relief { opacity: 0.2; }
.course-hero.avec-photo .course-hero-chiffres { background: rgba(12,22,16,0.45); }
.course-hero.avec-photo .etape { background: rgba(255,255,255,0.92); border-color: transparent; }
.course-hero.avec-photo .etape strong { color: #1f3d2b; }
.course-hero.avec-photo .etape span, .course-hero.avec-photo .etape small { color: #565f56; }
.course-hero.avec-photo .etape.cible strong { color: #2f6f77; }
.course-hero.avec-photo .etape.reel { background: #f3ead8; }
.course-hero.avec-photo .etape.reel strong { color: #a9762c; }
.bilan-actions { margin-top: 16px; }
.bilan-actions .bouton-partage { font-size: 1rem; padding: 12px 22px; }
/* Le partage porte la couleur du resultat reel (ocre), pas celle des actions
   de planification : c'est le geste de fin de course. */
.bouton-partage { background: var(--ocre-texte); color: #fff; }
.bouton-partage:hover { background: #8a5f1f; }
:root[data-theme="dark"] .bouton-partage { color: #0f1613; }
.comparaison-entete .bouton-partage { white-space: nowrap; }
.bilan-debrief { margin: 10px 0 0; font-size: 0.98rem; max-width: 62ch; padding: 10px 12px; background: var(--surface); border-radius: 8px; border: 1px solid var(--bordure); }
.matrice-terrain-temps { margin-top: 18px; }
.matrice-terrain-temps h4, .debrief h4 { margin: 0 0 6px; }
.matrice-terrain-temps .ligne-total td { font-weight: 700; border-top: 2px solid var(--foret); }
.debrief { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--bordure); }
.debrief-hypothese { border: 1px solid var(--bordure); border-radius: 8px; padding: 10px 14px 6px; margin: 12px 0; }
.debrief-hypothese legend { font-weight: 600; padding: 0 6px; color: var(--foret); }
.debrief-hypothese .case-condition { display: block; margin: 9px 0; }
.debrief-lecture { font-size: 1.02rem; padding: 12px 14px; border-left: 4px solid var(--foret-clair); background: var(--pierre); border-radius: 0 8px 8px 0; margin: 8px 0 12px; }
.comparaison-terrain h4 { margin: 0 0 6px; }
.bandeau-terminee { margin: 0 0 12px; }
details.planification > summary { color: var(--texte-doux); }
details.planification[open] > summary { color: var(--foret); }

/* Bilan post-course : LE moment de l'application. Verdict en Georgia, le
   chiffre porte la couleur de l'ecart, les faits en dessous. */
.bilan-hero {
  margin: 16px 0 18px; padding: 20px 22px; border-radius: var(--rayon);
  background: var(--pierre); border-left: 6px solid var(--glacier);
}
.bilan-hero.ecart-retard { border-left-color: var(--ocre); }
.bilan-hero.bilan-tenu { border-left-color: var(--foret-clair); }
.bilan-titre { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; font-size: 1.7rem; font-weight: 700; color: var(--foret); line-height: 1.15; }
.bilan-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-top: 6px; }
.bilan-chiffre { font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif; font-size: 3.2rem; font-weight: 700; line-height: 1; color: var(--foret); }
.bilan-chiffre.ecart-retard { color: var(--ocre); }
.bilan-chiffre.ecart-avance { color: var(--glacier); }
.bilan-message { margin: 12px 0 0; font-size: 1.05rem; max-width: 62ch; }
.bilan-faits { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 14px; }
.bilan-faits div { display: flex; flex-direction: column; }
.bilan-faits span { font-size: 0.8rem; color: var(--texte-doux); }
.bilan-faits strong { font-size: 1.15rem; color: var(--texte); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .bilan-titre { font-size: 1.4rem; } .bilan-chiffre { font-size: 2.6rem; } }

/* Graphiques : une seule revelation au chargement (la courbe se trace, les
   aires apparaissent), puis tout reste calme. Respecte prefers-reduced-motion. */
@keyframes tracer-courbe { to { stroke-dashoffset: 0; } }
@keyframes apparaitre { to { opacity: var(--opacite-cible, 1); } }
.trace-revele { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: tracer-courbe 1.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.aire-revele { opacity: 0; animation: apparaitre 0.9s ease-out 0.9s forwards; }
@media (prefers-reduced-motion: reduce) {
  .trace-revele { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .aire-revele { opacity: var(--opacite-cible, 1); animation: none; }
}
th { font-size: 0.9rem; }
.table-plan thead th { background: var(--pierre); }
.aide strong, .indicateur-detail strong { color: var(--texte); }
.forme-conseil p { margin: 0 0 6px; }
.forme-conseil ul { margin: 0; padding-left: 20px; font-size: 0.9rem; }
.forme-projection { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin-top: 12px; }
.forme-projection select { width: auto; flex: 1 1 220px; min-width: 0; }
.forme-projection-resultat { font-size: 0.92rem; }
.legende-forme { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 0.82rem; color: var(--texte-doux); }
.legende-forme span { display: inline-flex; align-items: center; gap: 6px; }
.legende-trait { display: inline-block; width: 18px; height: 0; border-top: 3px solid currentColor; }
.legende-trait.pointille { border-top-style: dashed; }

/* Visionneuse plein ecran (iPhone sans feuille de partage) : l'image seule
   sur fond sombre, une barre avec la consigne et un bouton Fermer. */
.partage-visionneuse {
  position: fixed; inset: 0; z-index: var(--z-visionneuse);
  background: rgba(20, 26, 22, 0.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; gap: 14px;
}
.partage-visionneuse img {
  max-width: 100%; max-height: calc(100% - 70px); border-radius: 6px;
  /* Appui long iOS : menu « Enregistrer dans Photos » explicitement autorise. */
  -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; pointer-events: auto;
}
.partage-visionneuse-barre {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 640px;
  color: rgba(255, 255, 255, 0.85); font-size: 0.9rem;
}
.partage-visionneuse-barre .bouton-secondaire { color: #fff; border-color: rgba(255, 255, 255, 0.6); flex-shrink: 0; }
body.sans-defilement { overflow: hidden; }
.selecteur-comparaison { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.selecteur-comparaison label { font-weight: 600; font-size: 0.92rem; }
.selecteur-comparaison select { width: auto; flex: 1 1 220px; min-width: 0; max-width: 100%; }
.notice-resultat { margin-top: 18px; border-left: 4px solid var(--foret-clair); }
.notice-resultat p { margin: 0 0 6px; }
.notice-resultat p:last-child { margin-bottom: 0; }

.plan-resultat ul { padding-left: 20px; }
.plan-resultat li { margin-bottom: 6px; font-size: 0.92rem; }
.plan-resultat li.alerte-ravito {
  list-style: none;
  margin-left: -20px;
  padding: 8px 12px;
  background: var(--ocre-teinte);
  border-left: 3px solid var(--ocre);
  border-radius: 4px;
  color: #5c4419;
}

.liste-plans { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lien-plan {
  background: transparent;
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  color: var(--foret);
  cursor: pointer;
}
.lien-plan:hover { background: var(--pierre-foncee); }

/* Carte du parcours + profil altimetrique ---------------------------------- */

.disposition-carte-profil {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 860px) {
  .disposition-carte-profil { grid-template-columns: 1fr; }
}

.carte-parcours { height: 320px; border-radius: 8px; overflow: hidden; z-index: var(--z-fond); }
.legende-carte {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 0.82rem; color: var(--texte-doux);
}
.legende-carte span { display: inline-flex; align-items: center; gap: 5px; }
.legende-puce { width: 10px; height: 10px; border-radius: 50%; display: inline-block; border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--bordure); }

/* Marqueur mixte (ravitaillement + barriere horaire) sur la carte Leaflet :
   L.circleMarker ne fait qu'une couleur, d'ou un divIcon degrade en deux
   (retour utilisateur, 28.09.2026). */
.marqueur-mixte-carte span {
  display: block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--bordure);
}

.profil-altitude-cadre {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--pierre);
  border-radius: 8px;
  padding: 8px;
}
.profil-altitude { width: 100%; height: auto; display: block; }
.profil-altitude text { font-family: inherit; fill: var(--texte-doux); }
.profil-altitude .libelle-point { font-weight: 600; }
/* Le numero d'un badge de point de passage reste blanc sur son disque
   colore : sans cette regle plus specifique, celle du dessus (grise tous
   les textes des graphiques) l'emportait et le rendait illisible (retour
   utilisateur du 28.09.2026). */
.profil-altitude text.badge-numero-texte { fill: #fff; }

/* Tableau de passage interactif (Heure/Temps, niveau de detail) ------------ */

.controles-tableau { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; }
.selecteur-segmente { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--bordure); border-radius: 6px; overflow: hidden; }
.selecteur-segmente button {
  background: var(--surface);
  color: var(--texte);
  border: none;
  border-radius: 0;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  flex: 1 1 auto;
}
.selecteur-segmente button + button { border-left: 1px solid var(--bordure); }
.selecteur-segmente button.actif { background: var(--foret); color: var(--sur-foret); }
.selecteur-segmente button:hover:not(.actif) { background: var(--pierre-foncee); }
@media (max-width: 480px) {
  /* Le libelle "Points de passage uniquement" (28 caracteres) ne tient pas
     sur une pilule a cote des deux autres options en dessous de 480px : ce
     groupe-la (3 choix) passe en pleine largeur, un choix par ligne. Le
     selecteur Heure/Temps (2 choix courts) tient deja et n'est pas touche. */
  #selecteur-detail-tableau { display: flex; width: 100%; }
  #selecteur-detail-tableau button { flex-basis: 100%; text-align: center; }
  #selecteur-detail-tableau button + button { border-left: none; border-top: 1px solid var(--bordure); }
}
.ligne-point-repere td { font-weight: 600; background: var(--pierre-foncee); }

/* Barrières horaires : marge ou hors délai par scénario, en toutes lettres
   (étude personas 27.09.2026). ------------------------------------------ */
.barrieres { border-left: 5px solid var(--foret); background: var(--pierre); border-radius: 8px; padding: 12px 16px; margin: 14px 0 18px; }
.barrieres.barrieres-juste { border-left-color: var(--ocre); }
.barrieres.barrieres-alerte { border-left-color: var(--erreur); background: var(--erreur-teinte); }
.barrieres h4 { margin: 0 0 4px; }
.barrieres-resume { margin: 0 0 10px; font-weight: 600; }
.barriere { display: grid; grid-template-columns: minmax(120px, 1.2fr) 3fr; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--bordure); }
.barriere-nom { display: flex; flex-direction: column; }
.barriere-marges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.barriere-marge { text-align: center; padding: 4px; border-radius: 6px; background: var(--surface); }
.barriere-marge span { display: block; font-size: 0.72rem; color: var(--texte-doux); }
.barriere-marge strong { font-size: 0.95rem; }
.barriere-marge.ok strong { color: var(--foret); }
.barriere-marge.juste strong { color: var(--ocre-texte); }
.barriere-marge.hors-delai { background: var(--erreur-teinte); }
.barriere-marge.hors-delai strong { color: var(--erreur); }
.scenario small { display: block; font-size: 0.7rem; color: var(--texte-doux); }
.scenario.juste small { color: var(--ocre-texte); font-weight: 600; }
.scenario.hors-delai { background: var(--erreur-teinte); }
.scenario.hors-delai small, .scenario.hors-delai strong { color: var(--erreur); }
@media (max-width: 480px) { .barriere { grid-template-columns: 1fr; } }

/* Phrase de résumé au-dessus de la mécanique repliée, consigne du plan. */
.resume-hypotheses { margin: 14px 0 4px; font-weight: 600; }
.consigne-plan { margin: 0 0 8px; padding: 10px 14px; border-left: 4px solid var(--ocre); background: var(--ocre-teinte); border-radius: 6px; font-weight: 600; }

/* Feuille de passage imprimable (A5, gros caractères) : seule visible à
   l'impression quand elle est demandée. ------------------------------- */
.feuille-impression { display: none; }
@media print {
  body.impression-feuille > *:not(.feuille-impression) { display: none !important; }
  body.impression-feuille .feuille-impression { display: block; color: #000; background: #fff; font-size: 14pt; padding: 0; }
  .feuille-impression h1 { font-size: 22pt; margin: 0 0 4pt; color: #000; }
  .feuille-impression p { margin: 0 0 8pt; font-size: 12pt; }
  .feuille-impression table { width: 100%; border-collapse: collapse; }
  .feuille-impression th, .feuille-impression td { border: 1px solid #000; padding: 5pt 6pt; text-align: left; vertical-align: top; font-size: 13pt; }
  .feuille-impression th { background: #eee; }
  .feuille-impression tr.hors-delai td { background: #f3d6d2; }
  .feuille-impression small { font-size: 10pt; }
  .feuille-impression .a-faire { font-size: 10pt; }
  .feuille-impression .feuille-pied { margin-top: 10pt; font-size: 10pt; }
  @page { size: A5; margin: 10mm; }
}


/* Corrections du panel utilisabilite et esthetique (27.09.2026) ------------ */
/* Le bilan se lit en encre : seul le grand chiffre garde l'ocre de marque. */
.bilan-hero { color: var(--texte); font-weight: 400; }
.bilan-hero .bilan-message, .bilan-hero .bilan-debrief { color: var(--texte); font-weight: 400; }
.bilan-decomposition { margin: -4px 0 10px; font-size: 0.95rem; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
/* Deux couleurs codees en dur, oubliees en sombre (1,45:1 et 2,4:1). */
:root[data-theme="dark"] .plan-resultat li.alerte-ravito { color: #f3d39c; }
/* Focus visible sur tout ce qui se clique, pas seulement les champs. */
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--glacier); outline-offset: 2px; }
/* Chiffres tabulaires dans les tableaux. */
.table-plan td, .scenario strong, .barriere-marge strong, .bilan-faits strong { font-variant-numeric: tabular-nums; }
/* Etat vide de Mes parcours. */
.etat-vide h2 { margin: 0 0 8px; }
.etat-vide .actions { margin-top: 14px; }
/* Tableau de passage et detail km : colonnes prioritaires sous 640 px. */
.table-scroll { overflow-x: auto; }
@media (max-width: 640px) {
  #tableau-passage:not(.avec-details) .table-passage .secondaire { display: none; }
  .table-km .secondaire { display: none; }
  .table-passage th, .table-passage td, .table-km th, .table-km td { font-size: 1rem; padding: 8px 6px; }
  .table-passage .colonne-heure { font-weight: 700; }
  /* Matrice terrain x tiers : cinq colonnes tiennent si les sous-libelles km disparaissent. */
  .matrice-terrain-temps td .aide { display: none; }
  .matrice-terrain-temps th, .matrice-terrain-temps td { padding: 6px 4px; font-size: 0.95rem; }
  /* Cibles de 44 px, champs a 16 px (pas de zoom Safari), micro-textes releves. */
  .bouton-petit, .selecteur-segmente button, .bouton-theme, .bouton-menu-mobile { min-height: 44px; font-size: 1rem; }
  .case-consentement input[type="checkbox"], .case-condition input[type="checkbox"] { width: 24px; height: 24px; }
  input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="time"], input[type="date"], input[type="file"], textarea, select { font-size: 16px; }
  .scenario span, .scenario small, .barriere-marge span, .ligne-scenarios.titre-scenarios .scenario span, table.table-responsive td[data-label]::before, .course-hero-chiffres span { font-size: 0.875rem; }
  .aide { font-size: 0.9rem; }
  /* Textes des graphiques SVG (viewBox 700 rendu vers 312 px) : mesure d'attente
     avant le viewBox mobile, pour passer de 4 a 9 px rendus. */
  .graphe-pente svg text { font-size: 20px; }
}
.remplacer-gpx { margin-top: 14px; }
.notice-gpx { margin: 0 0 12px; padding: 10px 14px; border-left: 4px solid var(--ocre-texte); background: var(--ocre-teinte); border-radius: 6px; font-weight: 600; }

/* Legende des points de passage numerotes sous les graphiques. */
.legende-points { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.9rem; }
.legende-points li { display: inline-flex; align-items: center; gap: 6px; }
.legende-numero { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-family: Georgia, "Iowan Old Style", serif; font-weight: 700; font-size: 0.8rem; }

/* Pastille « bêta » : fonctionnalité en test avec de vrais utilisateurs. */
.pastille-beta {
  display: inline-block; vertical-align: middle; margin-left: 4px; padding: 1px 7px; border-radius: 999px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.5;
  background: var(--ocre); color: #fff;
}
:root[data-theme="dark"] .pastille-beta { color: #0f1613; }

/* Lien de la page courante dans l'en-tête. */
.entete-droite a.actif { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 680px) { .entete-droite a.actif { text-underline-offset: 4px; } }

/* Accès contextuels à la page Douleurs. */
.entete-phase { gap: 6px; }
.pastille-douleurs { background: transparent; border-style: dashed; }
.lien-douleurs { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--foret-clair); }
.carte-douleurs h2 { margin-top: 0; font-size: 1.1rem; }

/* Lien « Mot de passe oublié ? » de la page de connexion : visible sans
   dominer le bouton principal, cible tactile de 44 px. */
.lien-mdp-oublie { margin: -8px 0 14px; text-align: right; }
.lien-mdp-oublie a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; font-size: 0.95rem; color: var(--foret-clair);
  text-decoration: underline; text-underline-offset: 3px;
}
.lien-mdp-oublie a:hover { color: var(--foret); }
.erreur a { color: inherit; font-weight: 600; }

/* Guide de connexion intervals.icu (Mon profil). */
.guide-intervals { margin: 0 0 14px; border-top: none; padding-top: 0; }
.guide-intervals .etapes-guide { margin: 10px 0; padding-left: 22px; }
.guide-intervals .etapes-guide li + li { margin-top: 6px; }

/* Fichiers reçus par « Partager » (page /app/partage). */
.carte-partage .partage-nom { margin-top: 0; word-break: break-word; }
.carte-partage .actions { margin-top: 12px; }
.carte-partage .bouton-danger { margin-left: 0; }