/* F4IOZ — Découverte's « Sur le terrain » episodes (tuto-pota.js, tuto-sota.js, tuto-phares.js, terrain-jeux.js): the
   maps, the log, the spots, the bag, the light's trace. Only .tf-… classes; the site's colours, light and dark. The
   maps are illustrations with their own colours (a park, a relief, a cape), readable in both themes. */

.tu-page { --tf-parc: #4FBF6A; --tf-parc-fond: #CFEAC0; --tf-dehors: #EDE6D6; --tf-route: #8A8F98; --tf-eau: #5FB0E0; --tf-prive: #E9B9A0; --tf-ferme: #E05A5A; --tf-parc2: #6A8CFF; --tf-zone: #FFC93C; }

/* A smaller stage over a game's controls. */
.sc-riche.tf-petite { max-width: calc(min(38vh, 360px) * 2); }

/* ------------------------------------------------------------ a map with a token */
.tf-manche { margin: 0; font-size: 13.5px; color: var(--text-dim); }
.tf-manche b { color: var(--text); }
.tf-carte { display: flex; flex-direction: column; gap: 6px; }
.tf-carte-svg { display: block; width: 100%; height: auto; max-height: min(58vh, 520px); border-radius: 14px; border: 1px solid var(--border-strong); background: var(--tf-dehors); touch-action: none; cursor: crosshair; }
.tf-carte-svg:focus-visible { outline: 3px solid var(--tu-or); outline-offset: 2px; }
.tf-carte-svg.tf-bloque { cursor: default; }
.tf-dehors { fill: var(--tf-dehors); }
.tf-parc { fill: var(--tf-parc-fond); }
.tf-parc2 { fill: color-mix(in srgb, var(--tf-parc2) 22%, transparent); }
.tf-limite { fill: none; stroke: var(--tf-parc); stroke-width: 3; stroke-dasharray: 9 6; }
.tf-limite2 { fill: none; stroke: var(--tf-parc2); stroke-width: 3; stroke-dasharray: 4 5; }
.tf-eau { fill: none; stroke: var(--tf-eau); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.tf-ferme { fill: color-mix(in srgb, var(--tf-ferme) 18%, transparent); stroke: var(--tf-ferme); stroke-width: 1.6; stroke-dasharray: 3 3; }
.tf-prive { fill: var(--tf-prive); stroke: #A0644A; stroke-width: 1.6; }
.tf-maison { fill: #FFF6EC; stroke: #A0644A; stroke-width: 1.2; } .tf-porte { fill: #A0644A; }
.tf-route { fill: none; stroke: var(--tf-route); stroke-linecap: round; stroke-linejoin: round; }
.tf-route-axe { fill: none; stroke: #F4F4F4; stroke-width: 1; stroke-dasharray: 6 6; }
.tf-parking { fill: #C9CED6; stroke: #7A808A; stroke-width: 1.2; } .tf-parking.dehors { fill: #D9D2C2; }
.tf-p { font: 800 16px system-ui, sans-serif; fill: #1F5FD6; }
.tf-arbre { fill: #2F7D3E; } .tf-arbre-clair { fill: #5CAF5A; }
.tf-echelle { stroke: #333A44; stroke-width: 1.6; fill: none; } .tf-echelle-t { font: 700 9px system-ui, sans-serif; fill: #333A44; }
.tf-jeton .tf-emprise { fill: color-mix(in srgb, var(--tu-or) 35%, transparent); stroke: var(--tu-or); stroke-width: 2; }
.tf-jeton .tf-coeur, .tf-jeton-mat { fill: none; stroke: #1B2433; stroke-width: 2; stroke-linecap: round; }
.tf-jeton.ok .tf-emprise { fill: color-mix(in srgb, #2EC46A 40%, transparent); stroke: #1E9A50; }
.tf-jeton.ko .tf-emprise { fill: color-mix(in srgb, #E04848 35%, transparent); stroke: #C02A2A; }
.tf-legende { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-dim); }
.tf-k { display: inline-flex; align-items: center; gap: 5px; }
.tf-k i { width: 16px; height: 10px; border-radius: 3px; display: inline-block; }
.tf-k-parc i { background: var(--tf-parc-fond); border: 2px dashed var(--tf-parc); } .tf-k-parc2 i { background: color-mix(in srgb, var(--tf-parc2) 22%, transparent); border: 2px dashed var(--tf-parc2); }
.tf-k-prive i { background: var(--tf-prive); } .tf-k-route i { background: var(--tf-route); } .tf-k-parking i { background: #C9CED6; }
.tf-k-ferme i { background: color-mix(in srgb, var(--tf-ferme) 25%, transparent); border: 1px dashed var(--tf-ferme); }

/* Choices in a row (one pressed), a bar against the weather. */
.tf-choix { margin: 0; padding: 0; border: none; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tf-choix legend { width: 100%; padding: 0; margin-bottom: 2px; font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.tf-c { min-height: 40px; }
.tf-c[aria-pressed="true"] { border-color: var(--tu-or); background: color-mix(in srgb, var(--tu-or) 22%, var(--panel-2)); }
.tf-jauge { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }
.tf-jauge span { height: 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; }
.tf-jauge i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #6A8CFF, var(--tu-ciel)); transition: width .25s linear; }
.tf-jauge.pluie i { background: linear-gradient(90deg, #5F7FA8, #9CC8F0); }
.tf-jauge.orage i { background: linear-gradient(90deg, #6A5ACD, #A98BFF); }
.tf-jauge.presse i { background: linear-gradient(90deg, var(--tu-rouge), var(--tu-orange)); }

/* ------------------------------------------------------------ the log (POTA): under the stage, the radio on the left, the fields on the right */
.tf-carnet-jeu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; align-items: start; }
.tf-carnet-g, .tf-carnet-d { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tf-carnet { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--border-strong); }
.tf-poste { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; } .tf-poste small, .tf-horloges small { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }
.tf-poste b { font-size: 20px; color: var(--tu-vert); } .tf-poste span { font-size: 12px; color: var(--text-dim); }
.tf-horloges { display: flex; gap: 8px; } .tf-horloges span { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 3px 9px; border-radius: 10px; border: 1px solid var(--border); }
.tf-horloges b { font-size: 16px; } .tf-horloges .utc b { color: var(--tu-ciel); }
.tf-compte { margin: 0; font-size: 15px; font-weight: 800; color: var(--tu-or); }
.tf-entendu { margin: 0; font-size: 14.5px; padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--tu-ciel) 10%, var(--panel)); }
.tf-entendu small { color: var(--text-dim); font-weight: 700; }
.tf-champs { display: flex; flex-direction: column; gap: 6px; }
.tf-champs .tf-c { min-height: 38px; padding: 0 12px; }

/* ------------------------------------------------------------ the spots (POTA) */
.tf-chasse { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.tf-chasse-corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 10px; min-height: 0; }
.tf-france { width: 100%; height: auto; max-height: min(56vh, 480px); border-radius: 14px; border: 1px solid var(--border-strong); }
.tf-mer { fill: #12345A; } .tf-terre { fill: #3E7A4A; stroke: #A8D8A0; stroke-width: 1.2; stroke-linejoin: round; }
:root[data-theme="light"] .tf-mer { fill: #BFE0F5; } :root[data-theme="light"] .tf-terre { fill: #CDE8B8; stroke: #5A9A5A; }
.tf-spot circle { fill: #FFC93C; stroke: #6A4A00; stroke-width: 1.4; } .tf-spot path { fill: #2E5A1A; }
.tf-spot .tf-pouls { fill: none; stroke: #FFC93C; stroke-width: 2; animation: tf-pouls 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.tf-spot.fait circle { fill: #4FE08A; } .tf-spot.fait .tf-pouls { display: none; }
@keyframes tf-pouls { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.tf-spots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: min(56vh, 480px); scrollbar-width: thin; }
.tf-spot-l { position: relative; padding: 7px 90px 7px 10px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--panel-2); font-size: 13px; line-height: 1.35; }
.tf-spot-l.fait { border-color: var(--tu-vert); background: color-mix(in srgb, var(--tu-vert) 12%, var(--panel-2)); }
.tf-spot-l small { color: var(--text-dim); } .tf-ref { color: var(--tu-vert); font-weight: 800; }
.tf-via { font-size: 11px; padding: 1px 7px; }
.tf-appel { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-height: 38px; padding: 0 12px; }
.tf-appel:hover:not(:disabled) { transform: translateY(-50%); }

/* ------------------------------------------------------------ the true and the false */
.tf-vf { padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--tu-vert) 14%, var(--panel-2)), var(--panel-2)); border: 1px solid var(--border-strong); }
.tf-vf-compte { margin: 0 0 6px; color: var(--tu-or); font-size: 14px; }
.tf-vf-texte { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; }
.tf-vf + .sc { margin-top: 4px; }

/* ------------------------------------------------------------ the bag (SOTA) */
.tf-sac { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 5px; }
.tf-objet { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 4px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text);
  cursor: pointer; font: 600 12.5px var(--font-sans); text-align: center; touch-action: manipulation; transition: transform var(--anim), border-color var(--anim); }
.tf-objet:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); }
.tf-objet .tf-ico { font-size: 21px; line-height: 1.1; }
.tf-objet { font-size: 11.5px; line-height: 1.2; }
.tf-objet small { color: var(--text-dim); font-weight: 600; }
.tf-objet[aria-pressed="true"] { border-color: var(--tu-vert); background: color-mix(in srgb, var(--tu-vert) 16%, var(--panel-2)); }
.tf-objet[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 4px; right: 7px; color: var(--tu-vert); font-weight: 900; }
.tf-objet.ko { border-color: var(--red); background: color-mix(in srgb, var(--red) 14%, var(--panel-2)); }
.tf-poids { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; }
.tf-poids span { height: 12px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; }
.tf-poids i { display: block; height: 100%; background: linear-gradient(90deg, var(--tu-vert), var(--tu-or)); transition: width .25s; }
.tf-poids.trop i { background: linear-gradient(90deg, var(--tu-orange), var(--tu-rouge)); } .tf-poids b { font-variant-numeric: tabular-nums; }

/* The altitudes of « How many points? »: a summit's silhouette over the scale's bands. */
.tf-alti { width: 100%; height: auto; max-height: 300px; border-radius: 14px; border: 1px solid var(--border-strong); background: linear-gradient(#20305A, #6A6FA0 70%, #C9A6B8); }
.tf-alti .bande { stroke: #FFFFFF; stroke-opacity: .35; stroke-width: 1; stroke-dasharray: 4 4; }
.tf-alti .bande-t { font: 700 11px system-ui, sans-serif; fill: #FFFFFF; opacity: .85; }
.tf-alti .pts { font: 800 13px system-ui, sans-serif; fill: #FFD25A; }
.tf-alti .massif { fill: #4E5B4A; } .tf-alti .neige { fill: #F4F0F6; } .tf-alti .repere { fill: #FFD25A; stroke: #2A2440; stroke-width: 1.5; }
.tf-alti .nom { font: 800 13px system-ui, sans-serif; fill: #FFFFFF; paint-order: stroke; stroke: #1A1A2E; stroke-width: 3px; }

/* ------------------------------------------------------------ the relief (SOTA) */
.tf-relief { fill: #E8E2CC; }
.tf-courbe { fill: none; stroke: #8A6A3A; stroke-width: .8; opacity: .55; }
.tf-courbe.maitresse { stroke-width: 1.4; opacity: .8; }
.tf-courbe.zone { stroke: #E0A400; stroke-width: 2.6; opacity: 1; stroke-dasharray: 6 4; }
.tf-sommet { fill: #7A3A1A; } .tf-cote { font: 700 9px system-ui, sans-serif; fill: #5A3A1A; }
.tf-vent { stroke: #3A6AC0; stroke-width: 2; fill: none; marker-end: none; opacity: .75; }
.tf-vent-t { font: 700 9px system-ui, sans-serif; fill: #3A6AC0; }
.tf-voiture { fill: #C0392B; stroke: #6A1A10; stroke-width: 1; }
.tf-pres-voiture { fill: color-mix(in srgb, #C0392B 14%, transparent); stroke: #C0392B; stroke-width: 1; stroke-dasharray: 3 3; }
.tf-route-m { fill: none; stroke: #9A9AA0; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.tf-altimetre { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border-strong); }
.tf-altimetre b { font-size: 22px; font-variant-numeric: tabular-nums; } .tf-altimetre.dedans b { color: var(--tu-vert); } .tf-altimetre.dehors b { color: var(--tu-rouge); }
.tf-altimetre small { color: var(--text-dim); }
.tf-bareme { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; font-size: 12px; text-align: center; }
.tf-bareme div { padding: 6px 2px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); }
.tf-bareme b { display: block; font-size: 17px; color: var(--tu-or); }
.tf-fiche { padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--tu-ciel) 14%, var(--panel-2)), var(--panel-2)); border: 1px solid var(--border-strong); }
.tf-fiche h3 { margin: 0; font-size: 18px; } .tf-fiche p { margin: 4px 0 0; font-size: 14px; }

/* ------------------------------------------------------------ the lights (lighthouses) */
.tf-trace { display: flex; flex-direction: column; gap: 3px; }
.tf-trace svg { width: 100%; height: 34px; border-radius: 8px; background: #0A1022; border: 1px solid var(--border); }
.tf-trace small { color: var(--text-dim); font-size: 11.5px; }
.tf-trace-on { fill: #FFE9A0; }
.tf-relier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; }
.tf-relier ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tf-relier button { width: 100%; text-align: left; justify-content: flex-start; min-height: 44px; }
.tf-relier button[aria-pressed="true"] { border-color: var(--tu-or); background: color-mix(in srgb, var(--tu-or) 20%, var(--panel-2)); }
.tf-relier button.paire { border-color: var(--tu-vert); background: color-mix(in srgb, var(--tu-vert) 16%, var(--panel-2)); }
.tf-relier .tf-num { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; border-radius: 50%; font-size: 12px; font-weight: 800; color: #0B1220; background: var(--tu-vert); }
.tf-cap .tf-mer-c { fill: #2E5E8E; } .tf-cap .tf-terre-c { fill: #CFE3B8; stroke: #6A8A5A; stroke-width: 1.2; } .tf-cap .tf-ile { fill: #D8E8C0; stroke: #6A8A5A; stroke-width: 1.2; }
.tf-cap .tf-enceinte { fill: #F2EEE6; stroke: #6A5A4A; stroke-width: 1.4; }
.tf-cap .tf-phare-p { fill: #FFFFFF; stroke: #1A2030; stroke-width: 1.4; } .tf-cap .tf-phare-l { fill: #FFC93C; }
.tf-cap .tf-chemin { fill: none; stroke: #B8A47A; stroke-width: 3; stroke-dasharray: 5 4; }
.tf-cercle { fill: color-mix(in srgb, var(--tu-or) 12%, transparent); stroke: var(--tu-or); stroke-width: 2; stroke-dasharray: 6 5; }
.tf-cap .tf-nom { font: 700 9px system-ui, sans-serif; fill: #1A2A3A; }
.tf-cap .tf-nom.mer { fill: #CFE6FF; }

@media (max-width: 859px) {
  .tf-chasse-corps { grid-template-columns: minmax(0, 1fr); }
  .tf-spots { max-height: none; }
  .tf-carnet-jeu { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tf-spot .tf-pouls { animation: none; display: none; }
  .tf-objet, .tf-jauge i, .tf-poids i { transition: none; }
}