/* 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; }
/* 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:hover { filter: brightness(1.12); }
.b-btn--danger-outline { background: var(--b-danger-bg); border-color: var(--b-danger-ink); color: var(--b-danger-ink); }
.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; }
/* 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). */
.b-area { position: absolute; z-index: 600; top: 16px; left: 50%; transform: translateX(-50%); background: var(--b-surface);
  box-shadow: var(--b-shadow-2); white-space: nowrap; }
@media (max-width: 899px) { .b-area { top: 88px; } }
/* 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-btn { align-self: flex-start; }
.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; }
.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; } }