/* Collection : « Mes objectifs » (UC-COL-05), dont « Cette saison » est la vue de « Ma saison » (UC-COL-08), fiche
   de sommet enrichie (UC-DEC-02). Direction « Affiche d'alpage » (ADR 0007) : l'objectif est pêche et brique,
   jamais jaune (couleur de T1) ; une nouveauté n'est jamais rouge ni signalée comme une alerte (RG-COL-18). */
:root {
  --objectif: #ec8f62; /* étoile des objectifs, comme sur la carte */
  --objectif-encre: #7a3018;
  --objectif-doux: #fbe3d6;
  --aujourdhui: var(--encre);
  --hors: var(--peche-encre);
  --barre-douce-pied: #a9c9b5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --objectif-encre: #f2b9a0;
    --objectif-doux: #3b2a22;
    --barre-douce-pied: #3f6553;
  }
}
:root[data-theme="dark"] {
  --objectif-encre: #f2b9a0;
  --objectif-doux: #3b2a22;
  --barre-douce-pied: #3f6553;
}

.ic-etoile {
  width: 16px;
  height: 16px;
  fill: var(--objectif);
  stroke: var(--objectif-encre);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.ic-trait {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Section « Sommets » : « Seulement mes objectifs » ---------- */
.barre-collection {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 18px 10px;
}
/* Section repliée : la barre se replie avec la liste. */
.volet:has(> .volet-corps[hidden]) > .barre-collection {
  display: none;
}
.puce-collection {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 12px 5px 10px;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-s);
  background: var(--papier);
  color: var(--encre-2);
  font-size: 13px;
  font-weight: 600;
  touch-action: manipulation;
}
.puce-collection:hover {
  background: var(--survol);
  color: var(--encre);
}
.puce-filtre .ic-etoile {
  fill: none;
  stroke: var(--encre-3);
  stroke-width: 1.8;
}
.puce-filtre[aria-pressed="true"] {
  border-color: var(--objectif);
  background: var(--objectif-doux);
  color: var(--objectif-encre);
}
.puce-filtre[aria-pressed="true"] .ic-etoile {
  fill: var(--objectif);
  stroke: var(--objectif-encre);
  stroke-width: 1.2;
}
.puce-collection .compte {
  color: var(--encre-3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.puce-collection .compte:empty {
  display: none;
}
.ligne-objectif .ic-horizon {
  grid-row: span 2;
  width: 17px;
  height: 17px;
}
.objectifs-suite {
  padding-top: 0;
}
.lien-objectifs {
  padding: 0;
  border: 0;
  background: none;
  color: var(--action);
  font-size: inherit;
  font-weight: 600;
}
.lien-objectifs:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Badge « De saison » (RG-COL-13), dans la liste, la fiche et la frise */
.badge-saison {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--action-doux);
  color: var(--action-fonce);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  vertical-align: 1px;
}

/* ---------- Fiche d'un sommet ---------- */
.fiche-entete {
  position: relative;
}
.bouton-objectif {
  position: absolute;
  top: 10px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 4px 12px 4px 10px;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-s);
  background: var(--papier);
  color: var(--encre-2);
  font-size: 13px;
  font-weight: 600;
  touch-action: manipulation;
}
.bouton-objectif span {
  font-size: 15px;
  line-height: 1;
}
/* Dans la ligne des bascules de la fiche (« Viser », « Gravi »), le bouton reprend sa place dans le flux. */
.fiche-bascules .bouton-objectif {
  position: static;
}
.bouton-objectif:hover {
  background: var(--survol);
  color: var(--encre);
}
.bouton-objectif.est-objectif {
  border-color: var(--objectif);
  background: var(--objectif-doux);
  color: var(--objectif-encre);
}
.bouton-objectif.est-objectif span {
  color: var(--objectif);
  text-shadow: 0 0 1px var(--objectif-encre);
}
.fiche-saison {
  padding: 12px 18px 14px;
  border-bottom: 1px solid var(--trait);
}
.fiche-saison-titre {
  margin: 0 0 6px;
  color: var(--encre-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.saison-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0 0 4px;
  color: var(--encre-2);
}
.saison-ligne.courante {
  color: var(--encre);
}
.saison-act {
  min-width: 52px;
  color: var(--encre-3);
  font-size: 12.5px;
  font-weight: 600;
}
.saison-ligne.courante .saison-texte {
  font-weight: 600;
}
.saison-note {
  margin: 6px 0 0;
  color: var(--encre-3);
  font-size: 12px;
}
/* Texte éditorial « saison » du sommet, sous l'estimation */
.saison-editorial {
  margin-top: 10px;
  color: var(--encre-2);
  line-height: 1.55;
}
.saison-editorial p,
.saison-editorial ul {
  margin: 0 0 8px;
}
.saison-editorial ul {
  padding-left: 18px;
}

.fiche-contenu {
  border-bottom: 1px solid var(--trait);
}
.contenu-presentation {
  padding: 14px 18px 4px;
  border-top: 1px solid var(--trait);
  font-size: 14px;
  line-height: 1.55;
}
/* Présentation repliée à trois lignes ; « Lire la suite » la déplie. */
.contenu-presentation.repliee .presentation-texte {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.contenu-presentation.repliee .presentation-texte p {
  display: inline;
}
.contenu-presentation.repliee .presentation-texte p + p::before {
  content: " ";
}
.lire-suite {
  margin: 2px 0 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--action);
  font-size: 13.5px;
  font-weight: 600;
  touch-action: manipulation;
}
.lire-suite:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contenu-presentation p,
.contenu-texte p {
  margin: 0 0 10px;
}
.contenu-texte ul {
  margin: 0 0 10px;
  padding-left: 18px;
}
.contenu-section {
  border-top: 1px solid var(--trait);
}
.fiche-contenu > .contenu-section:first-child {
  border-top: 0;
}
.contenu-section summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 18px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.contenu-section summary::-webkit-details-marker {
  display: none;
}
.contenu-section summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid var(--encre-3);
  border-bottom: 2px solid var(--encre-3);
  transform: rotate(-45deg);
  transition: transform 0.2s;
}
.contenu-section[open] summary::after {
  transform: rotate(45deg);
}
.contenu-section summary:hover {
  background: var(--survol);
}
.contenu-section summary:focus-visible {
  outline-offset: -2px;
}
.contenu-texte {
  padding: 2px 18px 6px;
  color: var(--encre-2);
  line-height: 1.55;
}
.contenu-pied {
  padding: 0 18px 14px;
  border-top: 1px solid var(--trait);
  background: var(--fond-ui);
  color: var(--encre-3);
  font-size: 12px;
}
/* « Sources » : section repliable du pied, alignée sur le texte du pied. */
.contenu-sources-volet {
  margin: 0 -18px 8px;
  border-top: 0;
}
.contenu-sources-volet summary {
  min-height: 38px;
  color: var(--encre-2);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.contenu-sources-volet summary .compte {
  color: var(--encre-3);
  font-weight: 500;
  letter-spacing: 0;
}
.contenu-sources-volet .contenu-sources {
  margin: 0 18px 4px;
}
.contenu-pied > :first-child:not(details) {
  margin-top: 10px;
}
.contenu-pied:empty {
  display: none;
}
.contenu-sources {
  margin: 0 0 8px;
  padding-left: 16px;
}
.contenu-sources li {
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}
.contenu-source-details {
  display: block;
  color: var(--encre-3);
  font-size: 12px;
}
.contenu-wikipedia {
  margin: 0 0 8px;
}
.contenu-attribution {
  margin: 0;
}

/* ---------- « Mes objectifs » : fenêtre, onglets d'horizon, frise de « Cette saison » ---------- */
.saison {
  width: min(820px, calc(100vw - 48px));
  max-width: none;
  height: min(720px, calc(100dvh - 48px));
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--papier);
  color: var(--encre);
  box-shadow: 0 10px 40px rgba(30, 43, 38, 0.3);
}
.saison::backdrop {
  background: var(--voile);
}
.saison-cadre {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.saison-entete {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--trait);
}
.saison-titre-ligne {
  display: flex;
  align-items: center;
  gap: 12px;
}
.saison-titre-ligne h2 {
  margin: 0;
  font: 400 30px/1.05 var(--titre);
  letter-spacing: -0.015em;
}
.saison-fermer {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: -4px -8px 0 auto;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--encre-2);
}
.saison-fermer:hover {
  background: var(--fond-ui);
  color: var(--encre);
}
.saison-fermer .ic-trait {
  width: 20px;
  height: 20px;
}
.saison-mention {
  margin: 4px 0 12px;
  color: var(--encre-3);
  font-size: 12.5px;
}
.saison-reglages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.segments {
  display: inline-flex;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-s);
  overflow: hidden;
}
.segments button {
  padding: 6px 11px;
  border: 0;
  border-left: 1px solid var(--trait);
  background: transparent;
  color: var(--encre-2);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
.segments button + button {
  border-left: 1px solid var(--trait);
}
.segments button:first-child {
  border-left: 0;
}
.segments button:hover {
  color: var(--encre);
}
.segments button[aria-checked="true"] {
  background: var(--action);
  color: var(--sur-action);
}
.saison-corps {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 20px 20px;
}

/* Frise : une colonne de noms, une piste de 24 demi-mois, le bouton « retirer ». */
.frise {
  --col-nom: 190px;
  --col-retirer: 32px;
  --barre: var(--action);
  --barre-douce: var(--barre-douce-pied);
}
.frise.neige {
  --barre: var(--ski);
  --barre-douce: #9fd2e8;
}
/* Sur une page de l'application, la frise a de la largeur : le nom garde sa colonne et la piste prend le reste.
   En fenêtre posée sur la carte (le panneau), la colonne de noms reste étroite. */
.page .frise {
  --col-nom: minmax(240px, 320px);
}
.frise-tete,
.frise-ligne {
  display: grid;
  grid-template-columns: var(--col-nom) 1fr var(--col-retirer);
  gap: 4px 12px;
  align-items: center;
}
.frise-tete {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--e-m) 0 var(--e-xs);
  background: var(--papier);
}
.frise-tete-nom {
  color: var(--encre-3);
  font-size: 12px;
}
.frise-mois {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column: 2;
  color: var(--encre-3);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}
.frise-mois > span.courant {
  color: var(--aujourdhui);
}
.frise-mois .court {
  display: none;
}
.frise-auj-etiquette {
  position: absolute;
  top: -15px;
  transform: translateX(-50%);
  color: var(--aujourdhui);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.frise-lignes {
  list-style: none;
  margin: 0;
  padding: 0;
}
.frise-ligne {
  padding: 8px 0;
  border-top: 1px solid var(--trait);
}
/* Ligne ou objectif depuis lequel « Mes objectifs » a été ouvert */
.frise-ligne.en-vue {
  margin: 0 -10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--objectif-doux);
}
.frise-nom {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.frise-sommet {
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frise-sommet:hover {
  color: var(--action-fonce);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.frise-meta {
  color: var(--encre-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.frise-meta .badge-saison {
  margin: 0;
}
.frise-prevu {
  color: var(--encre-2);
  font-weight: 600;
}
.frise-prevu.hors {
  color: var(--hors);
}
.frise-piste {
  position: relative;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  height: 34px;
  border-radius: 8px;
  background: var(--fond-ui);
}
.frise-barre {
  grid-row: 1;
  align-self: center;
  height: 12px;
  margin: 0 1px;
  border-radius: 6px;
  background: var(--barre-douce);
  pointer-events: none;
}
.frise-barre.de-saison {
  background: var(--barre);
}
.frise-case {
  position: relative;
  grid-row: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--encre) 8%, transparent);
  background: transparent;
  touch-action: manipulation;
}
.frise-case:first-of-type {
  border-left-color: transparent;
}
.frise-case:hover {
  background: color-mix(in srgb, var(--encre) 7%, transparent);
}
.frise-case:focus-visible {
  outline-offset: -2px;
}
/* Mois prévu : un repère rond sur la barre ; orange s'il tombe hors de la période estimée. */
.frise-case.prevu::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border: 2.5px solid var(--papier);
  border-radius: 50%;
  background: var(--encre);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--encre) 28%, transparent);
  transform: translate(-50%, -50%);
}
.frise-case.prevu.hors::after {
  background: var(--hors);
}
.frise-auj {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--aujourdhui);
  pointer-events: none;
  z-index: 1;
}
.frise-retirer {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
}
.frise-retirer:hover {
  background: var(--fond-ui);
}
.frise-retirer .ic-etoile {
  width: 18px;
  height: 18px;
}
.frise-aide {
  margin: 10px 0 0;
  color: var(--encre-3);
  font-size: 12px;
}

/* Mois par mois */
.par-mois {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--trait);
}
.par-mois h3 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
}
.par-mois ol {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}
.mois-groupe {
  padding: 10px 12px;
  border-radius: var(--rayon);
  background: var(--fond-ui);
}
.mois-groupe h4 {
  display: flex;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 13.5px;
  font-weight: 600;
}
.mois-groupe .compte {
  color: var(--encre-3);
  font-weight: 500;
}
.mois-groupe ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mois-groupe li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  padding: 2px 0;
}
.mois-groupe .frise-sommet {
  font-size: 13.5px;
}
.sans-mois {
  margin: 12px 0 0;
  color: var(--encre-2);
  font-size: 12.5px;
}
.sans-mois span {
  color: var(--encre-3);
}

/* ---------- Mes objectifs : étoiles par horizon ---------- */
.ic-horizon {
  display: grid;
  place-items: center;
}
.ic-horizon svg {
  width: 17px;
  height: 17px;
}
/* « Cette saison » : étoile pleine ; « Bientôt » et « Un jour » : étoile vide (comme sur la carte). */
.ic-horizon:not([data-horizon="CetteSaison"]) .ic-etoile,
.marche-deja .ic-etoile {
  fill: none;
  stroke: var(--objectif-encre);
  stroke-width: 1.8;
}
.ligne-objectif .ic-horizon {
  grid-row: span 2;
}

/* Onglets d'horizon : nom et intention (« je le prévois »), sans aucun nombre (RG-COL-18). */
.onglets-horizons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 18px 0 0;
  border-bottom: 1px solid var(--trait);
}
.onglet-horizon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  min-height: 44px;
  margin-bottom: -1px;
  padding: 8px 2px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--encre-3);
  text-align: left;
  touch-action: manipulation;
}
.onglet-horizon:hover {
  color: var(--encre);
}
.onglet-horizon[aria-selected="true"] {
  border-bottom-color: var(--encre);
  color: var(--encre);
}
.onglet-nom {
  font-size: 14px;
  font-weight: 600;
}
.onglet-sens {
  color: var(--encre-3);
  font-size: 12px;
}
.saison-entete .saison-mention {
  margin-top: 10px;
}

/* Boutons et liens des objectifs */
.bouton-discret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-s);
  background: var(--papier);
  color: var(--encre);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  touch-action: manipulation;
}
.bouton-discret:hover {
  background: var(--survol);
}
.bouton-plein {
  min-height: 40px;
  padding: 6px 18px;
  border: 0;
  border-radius: var(--r-s);
  background: var(--action);
  color: var(--sur-action);
  font-size: 14px;
  font-weight: 600;
  touch-action: manipulation;
}
.bouton-plein:hover:not(:disabled) {
  background: var(--encre-2);
}
.bouton-plein:disabled {
  background: var(--fond-ui);
  color: var(--encre-3);
  cursor: not-allowed;
}
.horizon-choix,
.acquis-champ select,
.acquis-champ input {
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--trait-2);
  border-radius: 8px;
  background: var(--papier);
  color: var(--encre);
  font: inherit;
  font-size: 13px;
}

/* Un objectif : carte en silhouette, titre, horizon ; puis pourquoi, nouveautés, marches. */
.objectifs-liste {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.objectif {
  padding: 12px 14px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--papier);
}
.objectif.en-vue {
  border-color: var(--objectif);
  box-shadow: 0 0 0 2px var(--objectif-doux);
}
.objectif.dans-vue {
  padding: 0;
  border: 0;
  background: none;
}
.objectif-tete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
}
.objectif-titre {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.objectif-nom {
  padding: 0;
  border: 0;
  background: none;
  font: 400 18px/1.2 var(--titre);
  text-align: left;
}
button.objectif-nom:hover {
  color: var(--action-fonce);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.objectif-meta {
  color: var(--encre-3);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.objectif-pourquoi {
  margin: 10px 0 0;
  color: var(--encre-2);
  font-family: var(--titre);
  font-style: italic;
}
.objectif-atteint,
.objectif-note,
.chemin-note {
  margin: 10px 0 0;
  color: var(--encre-2);
  font-size: 13px;
}
.objectif-atteint {
  color: var(--encre);
  font-weight: 600;
}
.objectif-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.objectifs-sous-titre {
  margin: 20px 0 0;
  font-size: 15px;
  font-weight: 600;
}
.objectifs-carte {
  margin: 14px 0 0;
}
/* Dans la vue d'un objectif, étroite, l'état passe sous le nom de la dimension. */
.vue-objectif .ecart-ligne {
  grid-template-columns: 18px minmax(0, 1fr);
}
.vue-objectif .ecart-etat {
  grid-column: 2;
}
.vue-objectif .feuille-corps {
  padding-bottom: 16px;
}

/* RG-COL-17 : carte du sommet, en silhouette « à révéler » tant qu'elle n'est pas obtenue. */
.carte-sommet {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  width: 48px;
  height: 64px;
  padding: 6px 4px 4px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
}
.carte-sommet svg {
  width: 32px;
  height: 27px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.carte-sommet.silhouette {
  border: 1.5px dashed var(--trait-2);
  background: var(--fond-ui);
  color: var(--encre-3);
}
.carte-sommet.silhouette svg {
  fill: none;
  stroke: var(--trait-2);
  stroke-width: 2;
}
.carte-sommet.revelee {
  border: 2px solid var(--peche);
  background: linear-gradient(170deg, var(--peche-doux) 0 38%, var(--accent) 38%);
  color: var(--sur-accent);
}
.carte-sommet.revelee svg {
  fill: var(--sur-accent);
  stroke: var(--accent);
  stroke-width: 1.6;
}
.carte-sommet.revelee svg path + path {
  fill: none;
}

/* RG-COL-15 : nouveautés, dimension par dimension, sans score. */
.ecart-rang {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 12px 0 6px;
  font-size: 13px;
}
.rang {
  padding: 1px 8px;
  border-radius: var(--r-s);
  background: var(--fond-ui);
  color: var(--encre);
  font-weight: 600;
}
.ecart-voie {
  color: var(--encre-3);
  font-size: 12.5px;
}
.ecart {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ecart-ligne {
  display: grid;
  grid-template-columns: 18px minmax(0, 9.5em) minmax(0, 1fr);
  gap: 0 8px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 13px;
}
.ecart-ic {
  color: var(--encre-3);
  font-weight: 700;
  text-align: center;
}
.ecart-ligne[data-etat="Acquise"] .ecart-ic {
  color: var(--accent-texte);
}
.ecart-ligne[data-etat="Nouvelle"] .ecart-ic {
  color: var(--objectif);
}
.ecart-nom {
  color: var(--encre-2);
  font-weight: 600;
}
.ecart-val {
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.ecart-etat {
  color: var(--encre-2);
}
.ecart-ligne[data-etat="Nouvelle"] .ecart-etat {
  color: var(--objectif-encre);
  font-weight: 600;
}
.ecart-detail {
  color: var(--encre-3);
  font-weight: 400;
}
/* « À faire encadré » : une mention, pas une alerte. */
.encadre {
  display: inline-block;
  margin: 2px 0 0;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--peche-doux);
  color: var(--peche-encre);
  font-size: 12px;
  font-weight: 600;
}
.ecart-etat .encadre {
  display: table;
}

/* RG-COL-16 : marches vers un objectif. */
.chemin {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--trait);
}
.chemin-titre {
  margin: 0 0 6px;
  color: var(--encre-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.marches {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: marche;
}
.marche {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 2px 10px;
  align-items: center;
  counter-increment: marche;
}
.marche::before {
  content: counter(marche);
  display: grid;
  grid-row: span 3;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--objectif);
  border-radius: 50%;
  color: var(--objectif-encre);
  font-size: 12px;
  font-weight: 700;
}
.marche-apporte {
  grid-column: 2;
  color: var(--encre-3);
  font-size: 12px;
  font-weight: 600;
}
.marche-sommet {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  grid-column: 2;
}
.marche-meta {
  color: var(--encre-3);
  font-size: 12.5px;
}
.marche .encadre {
  grid-column: 2;
  justify-self: start;
}
.marche > .bouton-discret,
.marche > .marche-deja {
  grid-column: 3;
  grid-row: 1 / span 3;
}
.marche-deja {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--objectif-encre);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.chemin-manques {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--encre-2);
  font-size: 12.5px;
}
.chemin-avert {
  margin: 8px 0 0;
  color: var(--encre-3);
  font-size: 12px;
}

/* Votre expérience : acquis déclarés */
.experience {
  margin-top: 14px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--fond-ui);
}
.experience summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}
.experience summary::-webkit-details-marker {
  display: none;
}
.experience summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid var(--encre-3);
  border-bottom: 2px solid var(--encre-3);
  transform: rotate(-45deg);
  transition: transform 0.2s;
}
.experience[open] summary::after {
  transform: rotate(45deg);
}
.experience-textes {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}
.experience-titre {
  font-weight: 600;
}
.experience-resume {
  color: var(--encre-2);
  font-size: 12.5px;
}
.experience-corps {
  padding: 0 14px 12px;
}
.experience-corps .saison-note:first-child {
  margin-top: 0;
}
.acquis-champs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px 16px;
  margin-top: 10px;
}
.acquis-champ {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.acquis-champ label {
  color: var(--encre-2);
  font-size: 12.5px;
  font-weight: 600;
}
.champ-unite {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--encre-3);
  font-size: 12.5px;
}
.champ-unite input {
  width: 8em;
}

/* RG-COL-14 : « À reprendre », sans couleur d'alerte. */
.a-reprendre {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--trait);
}
.a-reprendre h3,
.lointains h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}
.a-reprendre ul {
  display: grid;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.a-reprendre li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
}
.reprendre-nom {
  display: flex;
  flex-direction: column;
}
.reprendre-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.frise-gravi {
  color: var(--accent-texte);
  font-weight: 600;
}

/* Sommets lointains (Wikidata) */
.lointains {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--trait);
}
.lointains-champ {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}
.lointains-libelle {
  color: var(--encre-2);
  font-size: 12.5px;
  font-weight: 600;
}
.lointains-champ input {
  max-width: 360px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-s);
  background: var(--papier);
}
.lointains-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px 18px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.lointain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--trait);
}
.lointain-texte {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lointain-nom {
  font-weight: 600;
}
.lointain-meta,
.lointains-aucun {
  color: var(--encre-3);
  font-size: 12.5px;
}

/* ---------- Feuille « Objectif » : ajouter ou modifier ---------- */
.feuille-objectif {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--trait);
  border-radius: 14px;
  background: var(--papier);
  color: var(--encre);
  box-shadow: var(--ombre-flottant);
}
.feuille-objectif::backdrop {
  background: var(--voile);
}
.feuille-cadre {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 48px);
}
.feuille-entete {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px 4px;
}
.feuille-entete h2 {
  margin: 0;
  font: 400 22px/1.15 var(--titre);
  letter-spacing: -0.01em;
}
.feuille-corps {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px 8px;
}
.feuille-nouveautes {
  margin: 0 0 12px;
  color: var(--encre-2);
  font-size: 13px;
}
.horizons {
  display: grid;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}
.horizons legend {
  margin-bottom: 6px;
  padding: 0;
  color: var(--encre-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.horizon-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--trait);
  border-radius: 10px;
  cursor: pointer;
}
.horizon-option:has(input:checked) {
  border-color: var(--action);
  background: var(--action-doux);
}
.horizon-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--action);
}
.horizon-texte {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
}
.horizon-nom {
  font-weight: 600;
}
.horizon-sens {
  color: var(--encre-2);
  font-size: 13px;
}
.horizon-propose {
  margin-left: auto;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--fond-ui);
  color: var(--encre-2);
  font-size: 12px;
  font-weight: 600;
}
.pourquoi {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}
.pourquoi span {
  color: var(--encre-3);
  font-size: 12.5px;
  font-weight: 400;
}
.feuille-corps textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--trait-2);
  border-radius: 8px;
  background: var(--papier);
  color: var(--encre);
  font: inherit;
  resize: vertical;
}
.feuille-pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--trait);
}
.feuille-pied .retirer-objectif {
  margin-right: auto;
}

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
  .bouton-objectif {
    top: 6px;
  }
  /* Cibles tactiles ≥ 44 px */
  .puce-collection,
  .bouton-objectif,
  .contenu-section summary,
  .contenu-sources-volet summary,
  .lire-suite,
  .segments button {
    min-height: 44px;
  }
  .lien-objectifs {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .bouton-discret,
  .bouton-plein,
  .horizon-choix,
  .acquis-champ select,
  .acquis-champ input,
  .lointains-champ input,
  button.objectif-nom {
    min-height: 44px;
  }
  /* Nom de l'objectif : 44 px de haut, sans écarter la ligne qui le suit */
  button.objectif-nom {
    margin: -8px 0 -6px;
  }
  .onglet-sens {
    font-size: 11.5px;
  }
  .objectif {
    padding: 10px 12px;
  }
  /* Le choix de l'horizon passe sous le titre. */
  .objectif-tete {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .horizon-choix {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .ecart-ligne {
    grid-template-columns: 18px minmax(0, 1fr);
  }
  .ecart-etat {
    grid-column: 2;
  }
  .marche {
    grid-template-columns: 26px minmax(0, 1fr);
  }
  .marche > .bouton-discret,
  .marche > .marche-deja {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
  }
  .marche::before {
    grid-row: span 4;
    align-self: start;
  }
  .feuille-objectif {
    width: 100vw;
    max-width: none;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 14px 14px 0 0;
  }
  .feuille-cadre {
    max-height: 92dvh;
  }
  .feuille-pied {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .saison-fermer,
  .frise-retirer {
    width: 44px;
    height: 44px;
  }
  /* Nom du sommet : 44 px de haut, sans écarter la ligne d'altitude qui le suit */
  .frise-sommet {
    min-height: 44px;
  }
  .frise-nom .frise-sommet {
    margin: -12px 0 -10px;
  }
  .frise {
    --col-retirer: 44px;
  }
  .saison {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .saison-entete {
    padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
  }
  .saison-corps {
    padding: 0 16px calc(20px + env(safe-area-inset-bottom));
  }
  .segments button {
    padding: 7px 10px;
  }
  /* Le nom au-dessus de sa piste, qui prend toute la largeur. */
  .frise-tete,
  .frise-ligne {
    grid-template-columns: 1fr var(--col-retirer);
    gap: 6px 8px;
  }
  .frise-tete-nom {
    display: none;
  }
  .frise-mois,
  .frise-piste {
    grid-column: 1 / -1;
  }
  .frise-mois .long {
    display: none;
  }
  .frise-mois .court {
    display: inline;
  }
  .frise-nom {
    grid-row: 1;
  }
  .frise-retirer {
    grid-row: 1;
    grid-column: 2;
  }
  .frise-piste {
    grid-row: 2;
    height: 44px;
  }
}