/* ═══════════════════════════ L'affiche VTT, la fiche topo ═══════════════════════════
 *
 * Servie **seulement** sur sa fiche (`views/product-affiche.liquid`), comme les feuilles des
 * autres affiches. Une fiche de sortie : le nom en tête, la carte d'un bord à l'autre, puis le
 * profil d'altitude, sa légende et la bande de chiffres.
 *
 * **La couleur dit la pente** : quatre classes, vert, bleu, rouge, noir — le balisage des sentiers —,
 * posées par `affiche-trajet.js` sous `--k0` à `--k3` depuis le style choisi (sur fond sombre, le
 * « noir » est le papier : un noir sur un fond noir ne se verrait pas). Le tracé de la carte, l'aire
 * du profil et les pastilles de la légende lisent les mêmes variables. Ce sont des couleurs de
 * **produit**, pas de charte (point 6 quater) ; les valeurs écrites ici ne servent qu'à une page
 * sans script, qui montre le style Kraft.
 */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.affiche__affiche--topo { --trace: #b4521e; --k0: #2f7d3e; --k1: #245ea6; --k2: #c0392b; --k3: #1c1410; }

/* ── La sortie ── */
.tp__tete { padding: 5.2% 7% 2.6%; text-align: left; }
.tp__kicker {
  margin: 0 0 1.2cqw;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 1.8cqw;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .72;
}
/* L'interlettrage est fixé : l'ajustement commun du titre resserre des capitales espacées, et
   l'Anton n'en a pas — il élargirait au lieu de resserrer. */
.affiche__affiche--topo .tp__sortie {
  font-family: "Anton", "Roboto Condensed", sans-serif;
  /* La taille suit la longueur (`--ma-n`, posée par le serveur et l'éditeur). */
  font-size: calc(min(9.2cqw, 270cqw / var(--ma-n, 20)) * var(--titre-echelle, 1));
  line-height: 1.02;
  letter-spacing: .01em;
  padding-left: 0;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}
.tp__qui {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .6cqw 3cqw;
  margin: 1.8cqw 0 0;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: 2.4cqw;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.tp__qui > * { margin: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; }
/* La règle de base du sous-titre plafonne à 13 px : à 1 000 px de large, la date sortait deux fois
   plus petite que le nom du vététiste. En `cqw`, elle suit la largeur de l'affiche. */
.affiche__affiche--topo .tp__qui .affiche__sous { font-size: calc(2.4cqw * var(--sous-echelle, 1)); letter-spacing: .16em; opacity: 1; }
.tp__qui .tp__coureur { font-size: min(2.4cqw, 90cqw / var(--ma-nc, 20)); }

/* ── La carte, d'un bord à l'autre, cernée de deux filets ── */
.affiche__affiche--topo .affiche__carte { border-top: .3cqw solid var(--texte); border-bottom: .3cqw solid var(--texte); }

/* Les bornes kilométriques : des pastilles posées par l'éditeur (`maplibregl.Marker`), en `cqw`
   pour garder la même taille relative à l'aperçu et à 300 dpi. */
.ma__borne {
  display: grid;
  place-items: center;
  min-width: 3.4cqw;
  height: 3.4cqw;
  padding: 0 .5cqw;
  box-sizing: border-box;
  border-radius: 1.7cqw;
  border: .3cqw solid var(--texte);
  background: var(--fond);
  color: var(--texte);
  font: 700 1.7cqw/1 "Roboto Condensed", sans-serif;
  pointer-events: none;
}
/* Le point haut de la sortie : un triangle plein cerné de la couleur du fond. */
.tp__pic {
  display: block;
  width: 3.6cqw;
  height: 3.2cqw;
  background: var(--texte);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  pointer-events: none;
  filter: drop-shadow(0 0 .35cqw var(--fond)) drop-shadow(0 0 .35cqw var(--fond));
}

/* ── Le profil, ses couleurs de pente et sa légende ── */
.tp__pied { padding: 2.8% 7% 4.4%; text-align: left; }
.tp__profil {
  position: relative;
  height: 12.5cqw;
  margin: 0 0 4.6cqw;
  border-bottom: .3cqw solid var(--texte);
}
.tp__profil[hidden], .tp__legende[hidden] { display: none; }
.tp__courbe { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tp__k0 { --k: var(--k0); }
.tp__k1 { --k: var(--k1); }
.tp__k2 { --k: var(--k2); }
.tp__k3 { --k: var(--k3); }
/* L'aire est teintée, la crête en pleine couleur : la pente se lit d'un coup d'œil, et le trait
   garde la lecture quand deux tronçons voisins n'ont pas la même classe. */
.tp__aire { fill: var(--k); fill-opacity: .3; }
.tp__ligne { fill: none; stroke: var(--k); stroke-width: .8cqw; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.tp__sommet {
  position: absolute;
  transform: translate(-50%, calc(-100% - 1.2cqw));
  font: 700 2cqw/1 "Roboto Condensed", sans-serif;
  letter-spacing: .08em;
  white-space: nowrap;
}
.tp__sommet::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + .3cqw);
  width: 1.6cqw;
  height: 1.3cqw;
  margin-left: -.8cqw;
  background: var(--texte);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.tp__sommet--g { transform: translate(-100%, calc(-100% - 1.2cqw)); }
.tp__sommet--g::after { left: auto; right: 0; margin: 0; }
.tp__sommet--d { transform: translate(0, calc(-100% - 1.2cqw)); }
.tp__sommet--d::after { left: 0; margin: 0; }
.tp__echelle { position: absolute; left: 0; right: 0; top: 100%; height: 3.6cqw; font: 700 1.6cqw/1 "Roboto Condensed", sans-serif; }
.tp__km { position: absolute; top: 1.2cqw; transform: translateX(-50%); opacity: .75; }
.tp__km::before { content: ""; position: absolute; left: 50%; top: -1.2cqw; height: .8cqw; border-left: .2cqw solid currentColor; }
.tp__unite { position: absolute; right: 0; top: 1.2cqw; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }

.tp__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2cqw 3.2cqw;
  margin: 0 0 2.4cqw;
  padding: 0;
  list-style: none;
  font: 700 1.7cqw/1.2 "Roboto Condensed", sans-serif;
  letter-spacing: .06em;
}
/* Le titre de la légende (« Pente ») est un pseudo-élément : le script réécrit la liste sans le toucher. */
.tp__legende::before { content: attr(data-titre); flex-basis: 100%; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
.tp__legende li { display: flex; align-items: center; gap: .9cqw; }
.tp__legende i { width: 2.6cqw; height: 1.1cqw; border-radius: .55cqw; background: var(--k); flex: none; }
.tp__legende span { opacity: .8; }

/* ── La bande de chiffres : six mesures, deux rangées de trois ── */
.tp__bande {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8cqw 3%;
  margin: 0;
  padding: 2cqw 0 0;
  border-top: .25cqw solid currentColor;
}
.ma__case[hidden] { display: none; }
.tp__bande .ma__case dt {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 1.7cqw;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
}
.tp__bande .ma__case dd {
  margin: .4cqw 0 0;
  font-family: "Anton", "Roboto Condensed", sans-serif;
  font-size: calc(4.2cqw * var(--ma-chiffres, 1));
  line-height: 1.1;
  white-space: nowrap;
}

.affiche__affiche--topo .affiche__dedicace { margin-top: 2.2cqw; text-align: left; font-size: calc(2.3cqw * var(--dedicace-echelle, 1)); }
.affiche__affiche--topo .affiche__trait { display: none; }

/* L'exemple se lit en pleine couleur, comme sur les autres affiches de parcours ; la classe reste :
   c'est elle que la fabrication masque. */
.affiche__affiche--topo .ma__case.affiche-exemple { opacity: 1; }
.affiche__affiche--topo .affiche__dedicace.affiche-exemple { opacity: .6; }

/* Les boutons de la carte sur la carte, pas sur le nom de la sortie. */
.affiche__affiche--topo .affiche__outils-carte { top: 30%; right: 10px; }