/* Compléments et correctifs d'intégration du CSS de Balise (balise.css, balise-composants.css),
   sans changer de valeur de design. */
.maplibregl-map { font: 14px/1.4 var(--b-font); }

/* .b-only-mobile { display: revert !important } écrase le display: flex de la poignée : son trait
   (::before, 40 × 5 px) devenait un élément en ligne, sans taille. */
@media (max-width: 899px) { .b-sheet__handle.b-only-mobile { display: flex !important; } }
/* Liens : règle globale du prototype, absente de balise-composants.css (sans elle, bleu du
   navigateur, illisible en thème sombre). */
a { color: inherit; text-underline-offset: 3px; }
a:hover { opacity: .8; }
/* Liens en forme de bouton (Y aller, GPX, 112, 114…) : survol des boutons, sans transparence. */
a.b-btn:hover { opacity: 1; }
/* Champ Lieu : texte indicatif ou saisie trop longs (téléphone) terminés par « … » au lieu d'être coupés. */
.b-field input, .b-field input::placeholder { text-overflow: ellipsis; }
/* Menu de tri (prototype) : la ligne survolée ou active au clavier est seule à prendre le fond,
   le critère choisi le perd pendant ce temps. */
.b-menu .b-menu__item--row.is-hover { background: var(--b-surface-2); }
.b-menu.has-hover .b-menu__item--row:not(.is-hover) { background: transparent; }
/* Fiche : .b-stats { margin: 0 } (utilitaires) annule la marge de 20 px de .b-fiche > * ; le
   prototype la garde sous les chiffres. */
.b-fiche > .b-stats { margin-bottom: 20px; }
/* Titre de la fiche : il reçoit le focus à l'ouverture (lecteurs d'écran) mais ne s'actionne pas ;
   pas de contour, que les écrans tactiles affichaient après un toucher. */
.b-fiche h2[tabindex="-1"]:focus { outline: none; }
/* Étapes pas à pas (fiche) : liste numérotée repliée à 4 lignes, comme la description. */
.b-etapes { padding-left: 20px; }
.b-etapes.is-clamped { display: block; -webkit-line-clamp: unset; max-height: 96px; overflow: hidden; }

/* Animations coupées quand le système le demande (décision de l'utilisateur). Le vol vers un
   circuit, en JavaScript, n'est pas concerné. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* Compteur, tri et filtres fixes au-dessus de la liste : seule la liste défile (demande de
   l'utilisateur, 27/10/2026). Mêmes marges que .b-scroll, plus la gouttière de sa barre de
   défilement (10 px) à droite pour rester aligné sur les cartes de la liste. */
.b-entete { flex: none; display: flex; flex-direction: column; gap: 14px; padding: 16px 30px 12px 20px; border-bottom: 1px solid var(--b-line); }
.b-entete[hidden] { display: none; }
.b-entete .b-filters { max-height: 45vh; overflow-y: auto; }
@media (max-width: 899px) { .b-entete { padding: 4px 26px 10px 16px; } }
@media (min-width: 600px) and (max-width: 899px) { .b-entete { padding-inline: 24px 34px; } }

/* Suggestions de lieux et de circuits : jamais plus hautes que l'écran (clavier ouvert sur téléphone). */
.b-suggest { max-height: min(480px, calc(100dvh - 80px)); overflow-y: auto; }

/* Photo d'une fiche en grand (demande de l'utilisateur, 27/10/2026 ; hors maquette) : la vignette
   s'ouvre au clic, sur le voile des fenêtres, plus sombre pour la photo. */
.b-photo__open { display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; border-radius: var(--b-r-3); }
.b-photo__open:focus-visible { outline: 3px solid var(--b-focus, currentColor); outline-offset: 3px; }
.b-lightbox { background: rgba(0, 0, 0, .86); cursor: zoom-out; }
.b-lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; max-height: 100%; }
.b-lightbox img { display: block; max-width: min(1400px, 100%); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); object-fit: contain;
  border-radius: var(--b-r-3); cursor: default; }
.b-lightbox figcaption { font: 400 13px/1.4 var(--b-font); color: #fff; text-align: center; }
.b-lightbox__close { position: absolute; top: 12px; right: 12px; background: var(--b-surface); color: var(--b-ink); box-shadow: var(--b-shadow-2); }
/* Boutons immobiles au clic (demande de l'utilisateur, 28/10/2026) : la maquette les enfonçait
   d'un pixel (balise-composants.css), perçu comme un décalage. */
.b-btn:active { transform: none; }
/* Galerie (demande de l'utilisateur, 27/10/2026) : les autres photos de la fiche en vignettes sous
   la photo principale, sur deux rangées au plus (pas de barre de défilement en plus) ; précédente
   et suivante dans l'agrandissement. */
.b-photo__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--b-space-2); margin-top: var(--b-space-2); }
.b-photo__thumb { position: relative; display: block; padding: 0; border: none; background: none; cursor: zoom-in; border-radius: var(--b-r-2); }
.b-photo .b-photo__thumb img { aspect-ratio: 4 / 3; border-radius: var(--b-r-2); }
.b-photo__thumb:focus-visible { outline: 3px solid var(--b-focus, currentColor); outline-offset: 2px; }
.b-photo__more { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--b-r-2);
  background: rgba(0, 0, 0, .55); color: #fff; font: 800 15px/1 var(--b-font); }
.b-lightbox__nav { position: absolute; top: calc(50% - var(--b-hit) / 2); background: var(--b-surface); color: var(--b-ink); box-shadow: var(--b-shadow-2); }
.b-lightbox__nav--prev { left: 12px; }
.b-lightbox__nav--next { right: 12px; }
/* Infos pratiques du gestionnaire (28/10/2026, hors maquette) : mêmes textes que la description
   et les sources ; repère « P » du parking conseillé, au bleu des encadrés d'information. */
.b-practical { font: 400 14px/1.45 var(--b-font); }
.b-practical a { color: var(--b-ink); }
.b-practical__title { font: 700 14px/1.3 var(--b-font); }
.b-parking { display: grid; place-items: center; width: 26px; height: 26px; box-sizing: border-box; border-radius: var(--b-r-2);
  padding-top: calc(var(--b-caps-nudge) * 1.5); /* repli sans text-box : capitale d'Overpass centrée à la main */
  background: var(--b-info-ink); color: var(--b-surface); border: 2px solid var(--b-surface);
  font: 800 13px/1 var(--b-font); box-shadow: var(--b-shadow-1); }
/* Heure limite de départ (28/10/2026, hors maquette) : deux chiffres de plus dans la grille de la
   fiche ; « Trop tard » à la couleur des alertes. */
.b-stat.is-late dd { color: var(--b-warn-ink); }
/* Points d'intérêt le long du tracé (28/10/2026, hors maquette) : pastilles lettrées aux couleurs
   des jetons de balise.css, sur la carte et dans la liste de la fiche. */
.b-poi { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: calc(var(--b-caps-nudge) * 1.5) 3px 0; box-sizing: border-box;
  border-radius: 9px; background: var(--poi, var(--b-ink-2)); color: var(--b-surface); border: 1.5px solid var(--b-surface);
  font: 800 10px/1 var(--b-font); box-shadow: var(--b-shadow-1); }
/* Lettre des pastilles centrée sur la hauteur de ses capitales, quelles que soient les métriques de
   la police selon le système (signalement de l'utilisateur, 28/10/2026 : lettres décalées sur la
   carte) ; --b-caps-nudge reste le réglage des navigateurs sans text-box. */
/* La lettre est un bloc (text-box ne s'applique pas à un texte posé directement dans une grille) :
   rognée à la hauteur des capitales, elle est centrée exactement, quelles que soient les métriques
   de la police selon le système. Sans text-box, le décalage --b-caps-nudge ci-dessus (mesuré : la
   lettre seule est 1,5 px trop haute). */
.b-poi > span, .b-parking > span { display: block; }
@supports (text-box: trim-both cap alphabetic) {
  .b-poi, .b-parking { padding-top: 0; }
  .b-poi > span, .b-parking > span { text-box: trim-both cap alphabetic; }
}
.b-pois { list-style: none; padding-left: 0; }
.b-poi-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 0; border: none; background: none;
  color: var(--b-ink); font: 400 14px/1.4 var(--b-font); text-align: left; cursor: pointer; }
/* Distances dans une colonne fixe, alignées à droite (« 12,5 km » : 7 caractères à chasse fixe),
   libellés alignés les uns sous les autres ; nom, puis type en petit. */
.b-poi-row { display: grid; grid-template-columns: 24px auto minmax(0, 1fr); column-gap: 10px; }
.b-poi-row .b-poi { justify-self: center; } /* « WC » compris : même colonne pour toutes les pastilles */
.b-poi-row .b-num-s { width: 7ch; text-align: right; }
.b-poi-row__label { min-width: 0; }
.b-poi-row__label small { margin-left: 6px; font: 400 13px/1.3 var(--b-font); color: var(--b-ink-2); }
/* Libellé et distance rognés à la hauteur des capitales, comme la lettre de la pastille : alignés
   sur son centre (mesuré : 1 et 2 px trop haut sans cela, police Overpass). */
@supports (text-box: trim-both cap alphabetic) {
  .b-poi-row .b-num-s, .b-poi-row__label { text-box: trim-both cap alphabetic; }
}
/* Filtres ouverts (28/10/2026) : avec les filtres pratiques, le panneau dépasse sa hauteur ; au
   lieu d'une seconde barre de défilement dans l'en-tête, il remplace la liste et défile seul. */
.b-sheet.is-filtering .b-entete { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.b-sheet.is-filtering .b-entete .b-filters { max-height: none; overflow: visible; }
.b-sheet.is-filtering .b-scroll { display: none; }
/* Guidage sur le tracé (28/10/2026, hors maquette) : état sous le bouton, trait de position sur
   le profil à la couleur d'accent. */
.b-follow__status { margin: 0; font: 600 14px/1.4 var(--b-font-mono); }
.b-profile__me { stroke: var(--b-ink); stroke-width: 3; }
/* Temps de trajet en voiture (28/10/2026, hors maquette) : puces sous le curseur du rayon, qui
   pâlit tant qu'une durée est choisie. */
.b-travel { margin-top: 10px; }
.b-rayon.is-travel input[type="range"], .b-rayon.is-travel .b-rayon__ticks { opacity: .45; }
/* Hors ligne (28/10/2026, hors maquette) : menu ouvert par le bouton des commandes de la carte, à
   sa gauche, sans dépasser la partie visible de la carte ; zones gardées en lignes. */
.b-offline { box-sizing: border-box; right: 68px; top: 16px; width: min(340px, calc(100% - 100px)); max-height: calc(100% - 32px); overflow-y: auto; gap: 8px; padding: 12px; }
@media (max-width: 899px) { .b-offline { right: 64px; top: 88px; max-height: calc(100% - var(--b-sheet-h, 48%) - 100px); } }
.b-offline > .b-small { margin: 0; }
.b-zones { display: flex; flex-direction: column; }
.b-zone { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--b-line); }
.b-zone__go { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 0;
  border: none; background: none; color: var(--b-ink); font: 600 15px/1.3 var(--b-font); text-align: left; cursor: pointer; }
.b-zone__go > span { max-width: 100%; }
.b-zone__go small { font: 400 13px/1.3 var(--b-font); color: var(--b-ink-2); }
/* Filtres (28/10/2026, demande de l'utilisateur : « les fermer simplement », « mieux présentés ») :
   en-tête collé en haut (titre, « Tout effacer », croix), sections séparées par un filet, « Pour
   qui » d'abord, bouton « Voir les N circuits » collé en bas. Hors maquette, jetons --b-*. */
.b-filters { gap: 0; padding-top: 0; padding-bottom: 0; }
.b-filters__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
  margin: 0 -16px; padding: 8px 8px 8px 16px; background: var(--b-surface); border-bottom: 1px solid var(--b-line);
  border-radius: var(--b-r-3) var(--b-r-3) 0 0; }
.b-filters__head h2 { flex: 1; margin: 0; }
.b-filters__head .b-link { padding: 10px 6px; font-size: 14px; }
.b-filters__groups { display: flex; flex-direction: column; }
.b-filters__group { padding: 16px 0; }
.b-filters__group + .b-filters__group, .b-filters__groups + .b-filters__group { border-top: 1px solid var(--b-line); }
.b-filters__group .b-switch-row { margin-top: 10px; }
.b-filters__note { margin: 2px 0 0; padding-left: 18px; }
.b-filters__note li + li { margin-top: 2px; }
.b-filters__foot { position: sticky; bottom: 0; z-index: 2; margin: 0 -16px; padding: 12px 16px;
  background: var(--b-surface); border-top: 1px solid var(--b-line); border-radius: 0 0 var(--b-r-3) var(--b-r-3); }
/* Filtres ouverts : sans marge haute ni basse dans la zone qui défile, l'en-tête et le bouton du
   bas collent aux bords (sinon la liste des filtres passe au-dessus et au-dessous d'eux). */
.b-sheet.is-filtering .b-entete { padding-top: 0; padding-bottom: 0; }
.b-sheet.is-filtering .b-toolbar { padding-top: 16px; }
@media (max-width: 899px) { .b-sheet.is-filtering .b-toolbar { padding-top: 4px; } }
/* Fiche ouverte sur ordinateur (28/10/2026, demande de l'utilisateur) : le rayon et le temps de
   trajet, qui règlent la liste, se replient dans le bouton « 20 km » du téléphone ; la fiche gagne
   la hauteur du curseur, de ses graduations et des durées. */
@media (min-width: 900px) {
  .b-search.is-compact .b-rayon:not(.is-open) { display: none; }
  .b-search.is-compact #rayon-toggle.b-only-mobile { display: inline-flex !important; }
}
/* Urgence dans la fiche (28/10/2026, hors maquette) : deux boutons, la position en chiffres. */
.b-emergency > .b-small { margin: 0; }
/* Boutons d'appel en rouge (demande de l'utilisateur, 28/10/2026) : couleurs « danger » de
   balise.css ; 112 plein, 114 en contour. */
.b-btn--danger { background: var(--b-danger-ink); border-color: var(--b-danger-ink); color: var(--b-surface); }
.b-btn--danger-outline { background: var(--b-danger-bg); border-color: var(--b-danger-ink); color: var(--b-danger-ink); }
/* Survol : la teinte rouge se renforce. Sans ces règles, le survol commun des boutons
   (.b-btn:hover, fond --b-surface-2) mettait le texte blanc du 112 sur un fond gris clair. */
.b-btn--danger:hover { background: color-mix(in srgb, var(--b-danger-ink) 85%, var(--b-ink)); border-color: color-mix(in srgb, var(--b-danger-ink) 85%, var(--b-ink)); }
.b-btn--danger-outline:hover { background: color-mix(in srgb, var(--b-danger-bg) 65%, var(--b-danger-line)); }
.b-emergency .b-link { align-self: flex-start; }
.b-emergency__position { margin: 0; font: 600 15px/1.4 var(--b-font-mono); }
/* Carnet (28/10/2026, hors maquette) : boutons sous le titre de la fiche, repère après le nom dans
   la liste. */
.b-notebook { margin-top: 4px; }
.b-item__note { color: var(--b-ink-2); font-weight: 700; white-space: nowrap; }
/* Barres du système (29/10/2026) : l'application se tient entre la barre d'état et la barre de
   navigation. env() donne l'encoche (iPhone, Android) ; l'application Android donne en plus la
   hauteur réelle des barres (MainActivity, valeurs posées sur <html>, qui priment). La bande de
   la barre d'état prend la couleur de la page. */
:root { --b-safe-top: env(safe-area-inset-top, 0px); --b-safe-bottom: env(safe-area-inset-bottom, 0px);
  --b-safe-left: env(safe-area-inset-left, 0px); --b-safe-right: env(safe-area-inset-right, 0px); }
html { background: var(--b-bg); }
.b-app { top: var(--b-safe-top); bottom: var(--b-safe-bottom); left: var(--b-safe-left); right: var(--b-safe-right); }
/* Carte libre (28/10/2026, hors maquette) : « Chercher dans cette zone », en haut de la carte (sous
   la carte de recherche sur téléphone) ; jaune Balise comme « Chercher ici » (29/10/2026, demande de
   l'utilisateur : en blanc, il ressemblait au champ de recherche). */
.b-area { position: absolute; z-index: 600; top: 16px; left: 50%; transform: translateX(-50%);
  box-shadow: var(--b-shadow-2); white-space: nowrap; }
@media (max-width: 899px) { .b-area { top: 88px; left: calc(50% - 26px); } } /* à l'écart des boutons de la carte, à droite */
/* Météo de la fiche (28/10/2026, hors maquette) : grille libellé + créneaux, chiffres à chasse fixe. */
.b-weather > .b-small { margin: 0; }
.b-weather__grid { display: grid; grid-template-columns: auto repeat(var(--slots, 4), minmax(0, 1fr)); gap: 4px 10px; align-items: baseline; }
.b-weather__label { font: 400 13px/1.3 var(--b-font); color: var(--b-ink-2); }
.b-weather__cell { font: 600 14px/1.3 var(--b-font-mono); text-align: right; white-space: nowrap; }
.b-weather__cell.is-head { font: 700 12px/1.3 var(--b-font); color: var(--b-ink-2); text-transform: uppercase; letter-spacing: .04em; }
.b-weather__cell.is-warn { color: var(--b-warn-ink); }
.b-weather__cell.is-cold { color: var(--b-info-ink); }
.b-weather__cell.is-sky { display: flex; justify-content: flex-end; }
.b-weather__label.is-sky, .b-weather__cell.is-sky { align-self: center; }
.b-sky { width: 28px; height: 28px; color: var(--b-ink); }
/* Ma sortie (28/10/2026, hors maquette) : menu des commandes de la carte (comme Hors ligne),
   pastille d'état sur la carte, carte du proche qui suit un partage. Jetons --b-*. */
.b-outing > * { flex-shrink: 0; } /* le menu défile au lieu d'écraser ses boutons */
.b-outing > .b-small, .b-outing form .b-small { margin: 0; }
.b-outing .b-field { flex: none; height: 44px; }
.b-share-link { overflow-wrap: anywhere; font-family: var(--b-font-mono); color: var(--b-ink-2); }
.b-outing-pill { position: absolute; z-index: 600; left: 16px; bottom: 32px; gap: 8px; background: var(--b-surface); box-shadow: var(--b-shadow-2); white-space: nowrap; }
.b-outing-pill__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--b-danger-ink); flex: none; }
.b-outing-pill.is-sharing .b-outing-pill__dot { background: var(--b-info-ink); }
@media (prefers-reduced-motion: no-preference) { .b-outing-pill.is-recording .b-outing-pill__dot { animation: b-blink 1.6s ease-in-out infinite; } }
@keyframes b-blink { 50% { opacity: .25; } }
@media (max-width: 899px) { .b-outing-pill { left: 12px; bottom: calc(var(--b-sheet-h, 48%) + 12px); } }
.b-zone__acts { display: flex; gap: 2px; }
.b-watch { position: absolute; z-index: 650; top: 16px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 100px)); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; background: var(--b-surface); border: 1px solid var(--b-line); border-radius: var(--b-r-3); box-shadow: var(--b-shadow-2); }
@media (max-width: 899px) { .b-watch { top: 88px; left: 12px; right: 64px; width: auto; transform: none; } }
.b-watch__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.b-watch__head .b-btn--icon { margin: -8px -8px 0 0; flex: none; }
.b-watch strong { font: 800 16px/1.3 var(--b-font); }
.b-watch .b-small { margin: 0; color: var(--b-ink-2); }
/* Signaler un problème (28/10/2026, hors maquette) : liens empilés sous le bloc Urgence. */
.b-report { align-items: flex-start; }
.b-report > .b-small { margin: 0; }
/* Tracer un parcours (28/10/2026, hors maquette) : même carte que le suivi d'un partage. */
.b-plan.is-following .b-plan__edit { display: none; }
/* Boutons du panneau (29/10/2026) : colonnes égales sur une rangée, « Enregistrer » sur toute la
   largeur ; un libellé long passe à la ligne et la rangée garde une hauteur commune. */
.b-plan__row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.b-plan__row .b-btn, #plan-save, #loop-actions .b-btn { justify-content: center; text-align: center; height: auto; min-height: var(--b-hit); padding-block: 11px 9px; padding-inline: 8px; white-space: normal; line-height: 1.2; }
#plan-edit .b-link { align-self: flex-start; }
#plan-hint { margin: 0; }
.b-plan .b-field { flex: none; height: 44px; }
@media (max-width: 899px) { .b-plan { gap: 8px; padding: 10px 12px; } .b-plan .b-field { height: 40px; } }
/* Retouche d'un parcours (29/10/2026) : points en repères à faire glisser, cible tactile de 44 px ;
   point touché en jaune Balise. */
.b-plan-pt { width: 30px; height: 30px; box-sizing: border-box; padding: 2px 0 0; border: 2px solid #FFFFFF; border-radius: 50%;
  background: var(--b-trace-difficile); color: #FFFFFF; font: 800 13px/1 var(--b-font); box-shadow: var(--b-shadow-1); cursor: grab; touch-action: none; }
/* Pas de position: relative sur le repère : elle remplaçait le position: absolute de MapLibre et
   rangeait les repères côte à côte, décalés chacun de 30 px (29/10/2026). La zone de toucher agrandie
   se place sur le repère, déjà positionné par MapLibre. */
.b-plan-pt::before { content: ""; position: absolute; inset: -9px; }
.b-plan-pt.is-picked { background: var(--b-accent); color: #15171A; border-color: var(--b-trace-difficile); }
.b-plan-pt:focus-visible { outline: 3px solid var(--b-focus); outline-offset: 2px; }
/* Créer une boucle (29/10/2026, hors maquette) : distance au curseur, montée visée en ligne ;
   préférence en puces empilées à gauche, à la hauteur de la rose des directions à droite (le
   repère du milieu : toutes directions). */
.b-loop { display: flex; flex-direction: column; gap: 8px; }
.b-loop__head { display: flex; align-items: baseline; justify-content: space-between; }
.b-loop__head .b-num { font-size: 18px; }
.b-loop input[type="range"] { width: 100%; height: 28px; margin: 0; accent-color: var(--b-ink); cursor: pointer; }
.b-loop__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Champ de la montée : même largeur que la rose des directions, juste en dessous (bords alignés) ;
   unité à la taille et sur la ligne de base du texte saisi. */
.b-loop__row .b-field { flex: none; width: 128px; padding-right: 10px; }
.b-loop__unit { padding-top: 2px; font: 400 16px/1 var(--b-font); color: var(--b-ink-2); }
.b-loop__any { padding-top: 0 !important; } /* repère sans texte : pas de décalage des capitales */
.b-loop input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.b-loop input[type="number"]::-webkit-inner-spin-button, .b-loop input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.b-loop__grid { display: flex; gap: 16px; align-items: flex-start; }
.b-loop__col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.b-loop__col:first-child { flex: 1; }
.b-loop .b-field { height: 40px; }
.b-loop .b-field input { font-size: 16px; }
.b-loop__prefs { display: flex; flex-direction: column; gap: 4px; }
.b-loop__prefs .b-chip { justify-content: center; }
.b-loop__dirs { display: grid; grid-template-columns: repeat(3, 40px); gap: 4px; }
.b-loop__dirs .b-chip { width: 40px; padding: 2px 0 0; justify-content: center; font-size: 13px; }
.b-loop > .b-btn { align-self: stretch; justify-content: center; }
/* Boucles proposées (29/10/2026, demande de l'utilisateur : panneau trop haut) : trois cartes
   côte à côte, numérotées comme sur la carte ; la choisie cernée d'encre, son numéro en jaune. */
.b-loop-cards { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.b-loop-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 8px 10px 10px;
  border: 1px solid var(--b-line); border-radius: var(--b-r-2); background: var(--b-surface); color: var(--b-ink); font: 400 13px/1.3 var(--b-font); text-align: left; cursor: pointer; }
.b-loop-card strong { font: 700 15px/1.3 var(--b-font); }
.b-loop-card[aria-pressed="true"] { border: 2px solid var(--b-ink); padding: 7px 9px 9px; }
.b-loop-card__n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding-top: 2px; box-sizing: border-box; margin-bottom: 2px;
  border-radius: 50%; background: var(--b-trace-difficile); color: #FFFFFF; font: 800 12px/1 var(--b-font); }
.b-loop-card[aria-pressed="true"] .b-loop-card__n { background: var(--b-accent); color: #15171A; }
.b-loop-card:focus-visible { outline: 3px solid var(--b-focus); outline-offset: 2px; }
.b-loop-bar { display: flex; gap: 2px; width: 100%; height: 6px; margin-top: 4px; }
.b-loop-bar > span { border-radius: 2px; }
.b-loop-links { display: flex; justify-content: space-between; }
/* Numéro de chaque boucle sur la carte, au point le plus éloigné du départ. */
.b-loop-pin { width: 26px; height: 26px; box-sizing: border-box; padding: 2px 0 0; border: 2px solid #FFFFFF; border-radius: 50%;
  background: var(--b-trace-difficile); color: #FFFFFF; font: 800 12px/1 var(--b-font); box-shadow: var(--b-shadow-1); cursor: pointer; }
.b-loop-pin.is-on { background: var(--b-accent); color: #15171A; border-color: var(--b-trace-difficile); }
@media (max-width: 899px) { .b-loop__row .b-field { width: 116px; } .b-loop__grid { gap: 10px; } .b-loop__dirs { grid-template-columns: repeat(3, 36px); } .b-loop__dirs .b-chip, .b-loop__prefs .b-chip { height: 36px; } .b-loop__dirs .b-chip { width: 36px; } }
/* Mes statistiques (29/10/2026, hors maquette) : fenêtre large ; trois couleurs de séries
   (palette de référence validée pour le daltonisme, en clair et en sombre). */
.b-stats { width: min(760px, 100%); gap: 18px; --b-viz-1: #2a78d6; --b-viz-2: #eb6834; --b-viz-3: #1baf7a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .b-stats { --b-viz-1: #3987e5; --b-viz-2: #d95926; --b-viz-3: #199e70; } }
:root[data-theme="sombre"] .b-stats { --b-viz-1: #3987e5; --b-viz-2: #d95926; --b-viz-3: #199e70; }
.b-stats section { display: flex; flex-direction: column; gap: 8px; }
.b-stats h3 { margin: 0; }
.b-stats__filters { display: flex; flex-direction: column; gap: 8px; }
.b-stats__filters .b-chip { height: 36px; padding-inline: 10px; }
.b-stats__compare td { vertical-align: top; }
.b-stats__compare td > * { display: block; }
.b-stats__compare td strong { font: 700 15px/1.35 var(--b-font); }
.b-stats__compare small { font: 400 12px/1.3 var(--b-font); color: var(--b-ink-2); }
.b-stats__compare th, .b-stats__compare td { white-space: normal; }
.b-stats__compare tbody th { width: 28%; }
.b-stats__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 13px/1.3 var(--b-font); color: var(--b-ink-2); }
.b-stats__key { display: inline-flex; align-items: center; gap: 6px; }
.b-stats__swatch { flex: none; }
.b-stats__swatch--rect { width: 10px; height: 10px; border-radius: 2px; }
.b-stats__swatch--line { width: 16px; height: 2px; border-radius: 1px; }
.b-stats__chart { position: relative; }
.b-viz { display: block; overflow: visible; }
.b-viz-grid { stroke: var(--b-line); stroke-width: 1; }
.b-viz-base { stroke: var(--b-ink-3); stroke-width: 1; }
.b-viz-tick { fill: var(--b-ink-2); font: 400 11px var(--b-font); font-variant-numeric: tabular-nums; }
.b-viz-1 { fill: var(--b-viz-1); }
.b-viz-2 { fill: var(--b-viz-2); }
.b-viz-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.b-viz-dot { stroke: var(--b-surface); stroke-width: 2; }
.b-viz-cross { stroke: var(--b-ink-2); stroke-width: 1; }
.b-viz-hit { fill: transparent; outline: none; cursor: crosshair; }
.b-viz-hit:focus-visible { stroke: var(--b-focus); stroke-width: 2; }
.b-viz-tip { position: absolute; top: -4px; z-index: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 6px; pointer-events: none;
  background: var(--b-surface); border: 1px solid var(--b-line); border-radius: var(--b-r-2); box-shadow: var(--b-shadow-2); white-space: nowrap; }
.b-viz-tip__row { display: flex; align-items: center; gap: 6px; }
.b-viz-tip__row strong { font: 700 14px/1.3 var(--b-font); color: var(--b-ink); }
.b-viz-tip__key { width: 12px; height: 2px; border-radius: 1px; flex: none; }
.b-stats__records { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.b-stats__record { display: flex; flex-direction: column; gap: 2px; }
.b-stats__record strong { font: 700 17px/1.3 var(--b-font); }
.b-stats__table { overflow-x: auto; }
.b-stats table { border-collapse: collapse; width: 100%; font: 400 14px/1.35 var(--b-font); }
.b-stats th, .b-stats td { padding: 6px 8px; border-bottom: 1px solid var(--b-line); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.b-stats thead th { font: 700 12px/1.3 var(--b-font); color: var(--b-ink-2); text-transform: uppercase; letter-spacing: var(--b-tracking-caps); }
.b-stats tbody th, .b-stats thead th:first-child { text-align: left; font-weight: 600; }
@media (max-width: 899px) { .b-stats { padding: 18px 16px; } .b-stats th, .b-stats td { padding: 6px 4px; } .b-stats__compare td strong { font-size: 14px; } }
/* Ma sortie (29/10/2026, demande de l'utilisateur : « les boutons ont une taille inégale ») :
   actions sur toute la largeur du menu ; puces et paires de boutons en colonnes égales. Un texte
   trop long passe à la ligne au lieu de déborder. */
.b-outing > .b-btn, .b-outing form > .b-btn, #share-live .b-btn { align-self: stretch; justify-content: center; max-width: 100%; height: auto;
  min-height: var(--b-hit); padding-block: 11px 9px; white-space: normal; line-height: 1.2; text-align: center; }
#record-types, #share-hours, #share-live > .b-row-wrap { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
#record-types .b-chip, #share-hours .b-chip { justify-content: center; padding-inline: 4px; }
.b-outing .b-zone__acts .b-btn--small { padding-inline: 8px; } /* plus de place pour le nom des parcours et des sorties */
/* Parcours de l'utilisateur dans la liste et sur la fiche (29/10/2026). */
.b-item__own { align-self: flex-start; }
.b-own-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 8px; }
.b-own-actions .b-btn { justify-content: center; }
/* Donner mon avis (29/10/2026) : types en deux colonnes égales, zone de texte, champ piège caché. */
.b-feedback__form, .b-feedback__done { display: flex; flex-direction: column; gap: 10px; }
.b-feedback__done p { margin: 0; }
.b-feedback__kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.b-feedback__kinds .b-chip { justify-content: center; height: auto; min-height: 40px; padding: 8px 8px 6px; line-height: 1.2; text-align: center; }
.b-feedback .b-field { flex: none; }
.b-field--area { height: auto; align-items: stretch; padding: 10px 12px; }
.b-field--area textarea { flex: 1; min-width: 0; min-height: 120px; resize: vertical; border: none; outline: none; background: transparent; color: var(--b-ink); font: 400 16px/1.45 var(--b-font); }
.b-feedback .b-btn { align-self: stretch; justify-content: center; }
.b-feedback .b-callout { padding: 10px 12px 8px; }
.b-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Performances (29/10/2026) : fiches de la liste hors de l'écran ni mises en page ni dessinées
   (374 fiches dans les Écrins) ; taille retenue une fois affichées. */
#list .b-item { content-visibility: auto; contain-intrinsic-size: auto 80px; }
/* Panneau sur téléphone (29/10/2026, signalement de l'utilisateur) : poignée saisie sur 43 px (16 px
   au-dessus du panneau compris) au lieu de 21 ; barres du haut glissables (app.js, dragSheet). Les
   boutons de la carte restent à moitié visibles sous le panneau (demande de l'utilisateur : on voit
   qu'il y en a d'autres). */
@media (max-width: 899px) {
  .b-sheet__handle { position: relative; }
  .b-sheet__handle::after { content: ""; position: absolute; left: 0; right: 0; top: -16px; bottom: -6px; }
  .b-fichebar, .b-toolbar { touch-action: none; }
}