/* « Ma collection » (ma-collection.js) : une page de données dense (sections.css) dont la liste est un tableau — un
   sommet par ligne, son altitude à droite. Les couleurs viennent des mêmes variables que le reste de la page, thème
   sombre compris : l'orange « à vous » (--accent, ADR 0029) marque ce qui est fait, la pêche (--objectif) reste
   aux objectifs. */

.mc-corps {
  display: flex;
  flex-direction: column;
  gap: var(--e-s);
  box-sizing: border-box;
  height: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--e-m) var(--e-xl) var(--e-l);
  overflow-y: auto;
}
/* Le titre, et à droite l'import (sections.css : .actions-page, .bouton-page) ; à l'étroit, l'import passe dessous. */
.mc-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-s) var(--e-xl);
  padding: 14px 0 18px;
}
.mc-titre {
  margin: 8px 0 0;
  font: var(--texte-titre-ecran-poids) 46px/1 var(--titre);
  letter-spacing: -0.02em;
}
.saison.collection .saison-fermer {
  position: absolute;
  top: 12px;
  right: 12px;
}
.mc-horizon {
  margin: 0;
}
.mc-erreur {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--peche-encre);
  border-radius: 8px;
  color: var(--peche-encre);
  background: var(--peche-doux);
  font-size: 13px;
}

/* Progression par palier (UC-COL-01, RG-COL-19) : seul ce qui est à vous se montre (D11, 19.10.2026), un triangle par
   sommet fait ou visé. Les nombres viennent de CarteStyle.resumeChapelet, la page ne calcule rien. */
.mc-region + .mc-region {
  margin-top: 10px;
}
.mc-region-nom {
  margin: 0 0 6px;
  color: var(--encre-3);
  font: 600 11px/1.25 var(--etroite);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.mc-paliers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mc-palier {
  border-top: 1px solid var(--trait);
}
/* Toucher le palier ouvre la section Sommets filtrée sur lui (D13) : toute la ligne est un bouton, le chapelet et le
   chevron compris. Ni survol ni état pressé au toucher : le survol n'existe que sous @media (hover: hover). */
.mc-palier-bouton {
  display: flex;
  align-items: center;
  gap: var(--e-s);
  width: 100%;
  min-height: 44px;
  padding: var(--e-m) 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.mc-palier-corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.mc-palier-fleche {
  flex: none;
  width: 20px;
  height: 20px;
  stroke: var(--encre-3);
}
@media (hover: hover) {
  .mc-palier-bouton:hover .mc-palier-nom {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
  }
  .mc-palier-bouton:hover .mc-palier-fleche {
    stroke: var(--encre);
  }
}
/* « Conquête · 23 sommets », puis « 4 vérifiés · 19 déclarés » à droite : le nom du palier en serif, son compte en
   orange de texte, le détail en encre 3 (direction Topo). */
.mc-palier-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
}
.mc-palier-nom {
  color: var(--encre);
  font: 400 26px/1.1 var(--police-titre);
  letter-spacing: -0.01em;
}
.mc-palier-sep {
  color: var(--encre-3);
  font-size: 17px;
}
.mc-palier-nombres {
  color: var(--accent-texte);
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mc-palier-detail {
  margin-left: auto;
  color: var(--encre-3);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
/* Un triangle par sommet à vous : gravi, déclaré, objectif (CarteStyle.TRIANGLES). */
.triangle {
  flex: none;
  width: 12px;
  height: 11.25px;
  overflow: visible;
}
.mc-chapelet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin: 2px 0 4px;
}
.mc-cle,
.mc-bilan {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 10px 0 0;
  color: var(--encre-2);
  font-size: 12px;
}
.mc-cle {
  margin-bottom: var(--e-m);
}
.mc-cle span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* La ligne de chiffres de l'en-tête commun : la valeur à l'encre, son libellé en encre 2. */
.mc-bilan {
  margin-top: 6px;
  font-size: 14px;
}
.mc-bilan b {
  color: var(--encre);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Le sélecteur à deux segments (D13) : « Sorties (33) », « Sommets (23) ». Le même dessin que les segments de l'activité
   (l'encre pleine pour le choix), 44 px de haut, en onglets. Sur un grand écran il ne s'étire pas sur toute la page. */
.mc-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 440px);
  margin: var(--e-m) 0 var(--e-s);
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-s);
  overflow: hidden;
}
.mc-segment {
  min-height: 44px;
  padding: 0 var(--e-m);
  border: 0;
  border-left: 1px solid var(--filet-fort);
  background: transparent;
  color: var(--encre-2);
  font: 600 14px/1.2 var(--texte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.mc-segment:first-child {
  border-left: 0;
}
.mc-segment[aria-selected="true"] {
  background: var(--action);
  color: var(--sur-action);
}
@media (hover: hover) {
  .mc-segment[aria-selected="false"]:hover {
    color: var(--encre);
  }
}
.mc-panneau {
  min-width: 0;
}

/* Le filtre de la section Sommets : « Tous · Découverte · Conquête », une puce choisie à la fois. */
.mc-filtre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-s);
  margin: var(--e-xs) 0 var(--e-s);
}
.mc-puce {
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-s);
  background: var(--papier);
  color: var(--encre-2);
  font: 600 13px/1.2 var(--texte);
  cursor: pointer;
  touch-action: manipulation;
}
.mc-puce[aria-checked="true"] {
  border-color: var(--encre);
  background: var(--creux);
  color: var(--encre);
}
@media (hover: hover) {
  .mc-puce[aria-checked="false"]:hover {
    background: var(--survol);
    color: var(--encre);
  }
}
@media (pointer: coarse) {
  .mc-puce {
    min-height: 44px;
  }
}
/* Les sommets faits, groupés par palier : le titre d'un groupe est une ligne du tableau, sans l'en-tête collant. */
.tableau-dense .mc-groupe-titre th {
  position: static;
  padding: var(--e-l) var(--e-s) var(--e-xs);
  border-bottom: 1px solid var(--filet);
  background: transparent;
  color: var(--encre-3);
  font: 600 11px/1.25 var(--etroite);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Les sommets faits : un tableau dense, une ligne par sommet (sections.css). */
.mc-nom {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  overflow-wrap: anywhere;
  touch-action: manipulation;
}
@media (hover: hover) {
  .mc-nom:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}
/* L'état d'un sommet : son triangle et son nom (« vérifié par trace », « déclaré »). */
.mc-statut {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: var(--e-s);
  color: var(--accent-texte);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.mc-statut[data-statut="Declare"] {
  color: var(--encre-2);
}
.mc-date {
  color: var(--encre-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Deux liens dans la même cellule d'actions : assez d'air pour le pouce. */
.mc-ligne .lien-collection + .lien-collection {
  margin-left: var(--e-s);
}
.mc-retirer {
  color: var(--peche-encre);
}
.mc-mention {
  margin: 6px 0 0;
  color: var(--encre-3);
  font-size: 12.5px;
}
.lien-collection {
  padding: 0;
  border: 0;
  background: none;
  color: var(--action);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  touch-action: manipulation;
}
@media (hover: hover) {
  .lien-collection:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

/* Fiche d'un sommet : la coche de l'appareil, à côté de celle de l'objectif. */
.collection-fiche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.bouton-collection {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 12px;
  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;
}
@media (hover: hover) {
  .bouton-collection:hover {
    background: var(--survol);
    color: var(--encre);
  }
}
.bouton-collection .ic-trait {
  width: 15px;
  height: 15px;
}
.bouton-collection.est-fait {
  border-color: var(--accent);
  background: var(--accent-doux);
  color: var(--accent-texte);
}

/* Feuille de déclaration et de correction (UC-COL-02, UC-COL-04). */
.feuille-collection {
  width: min(420px, calc(100vw - 40px));
  height: auto;
}
.mcf-corps {
  display: grid;
  gap: 10px;
  padding: 18px 20px 20px;
}
.mcf-nom {
  margin: 0;
}
.mcf-champs {
  display: grid;
  gap: 10px;
}
.mcf-champ {
  display: grid;
  gap: 4px;
  color: var(--encre-3);
  font-size: 12px;
  font-weight: 600;
}
.mcf-champ input,
.mcf-champ select {
  padding: 8px;
  border: 1px solid var(--trait-2);
  border-radius: 8px;
  background: var(--papier);
  color: var(--encre);
  font: inherit;
}
.mcf-champ select:disabled,
.mcf-champ input:disabled {
  color: var(--encre-3);
  background: var(--fond-ui);
}

/* Les sorties gardées, en cartes hautes (retour de Tibo du 19.10.2026) : la vignette de la trace en haut, pleine
   largeur, au format 3:2 de `CarteStyle.FORMAT_VIGNETTE` (vignettes.js) ; puis le titre en serif, la date et la ligne
   de chiffres, avec un triangle par sommet gravi. Une colonne, deux à partir de 900 px. Chaque carte ouvre sa page
   (sortie.js, UC-SOR-01). */
.mc-sorties {
  margin: 0 0 var(--e-l);
}
.mc-liste-sorties {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-l);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .mc-liste-sorties {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.mc-sortie {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--filet);
  border-radius: var(--r-l);
  color: var(--encre);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) {
  .mc-sortie:hover {
    border-color: var(--filet-fort);
  }
  .mc-sortie:hover .mc-sortie-titre {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
}
/* La place de la vignette : l'aplat et la silhouette d'attente, puis l'image, toujours au même cadre. */
.mc-vignette {
  display: block;
  aspect-ratio: 3 / 2;
  border-bottom: 1px solid var(--filet);
  background: var(--aplat);
}
.mc-vignette > svg,
.mc-vignette > img {
  display: block;
  width: 100%;
  height: 100%;
}
.vignette-silhouette path {
  fill: none;
  stroke: var(--encre-3);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vignette-silhouette circle {
  stroke-width: 3;
}
.vignette-silhouette .vignette-depart {
  fill: var(--surface);
  stroke: var(--encre-3);
}
.vignette-silhouette .vignette-arrivee {
  fill: var(--encre-3);
  stroke: var(--surface);
}
.mc-vignette > img {
  object-fit: cover;
}
.mc-sortie-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-m) var(--e-l) var(--e-l);
}
.mc-sortie-titre {
  color: var(--encre);
  font: 400 24px/1.15 var(--titre);
  letter-spacing: -0.01em;
}
.mc-sortie-date {
  color: var(--encre-2);
  font-size: 13px;
}
.mc-sortie-marqueur {
  padding: 0 6px;
  border-radius: var(--r-plein);
  color: var(--sur-conteneur-erreur);
  background: var(--conteneur-erreur);
  font-size: 12px;
}
.mc-sortie-chiffres {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin-top: 6px;
  color: var(--encre);
  font: 600 15px/1.3 var(--texte);
  font-variant-numeric: tabular-nums;
}
.mc-sep {
  color: var(--encre-3);
  font-weight: 400;
}
.mc-sortie-sommets {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
}
.mc-sortie-sommets .triangle {
  width: 14px;
  height: 13.125px;
}
/* L'atelier des vignettes (vignettes.js) : une carte de la taille de l'image, hors de l'écran, jamais touchée. */
.vignette-atelier {
  position: fixed;
  top: 0;
  left: -100000px;
  pointer-events: none;
  contain: strict;
}

@media (max-width: 760px) {
  /* La page est née pour l'écran large ; à téléphone, seule la marge latérale se resserre. */
  .mc-corps {
    padding-inline: var(--e-l);
  }
}