/* =========================================================================
   ROADBOOK — le parcours d'une sortie, réservé aux membres

   Deux états dans un seul cadre : la carte-aperçu, qui donne envie
   d'ouvrir, et la vraie carte, qui prend sa place au clic. Le cadre ne
   bouge pas entre les deux, seul son contenu change.
   ====================================================================== */

.rtf-rb{
  --rtf-rb-entete:63px;
  /* La hauteur du plan collé. Une seule variable, lue par le plan ET par
     le point d'accroche du bloc GPS : les deux ne peuvent pas diverger. */
  --rtf-rb-plan:clamp(240px, 46vh, 440px);
  /* Le saut sur #roadbook doit degager l'en-tete fixe du site. Vaut aussi
     pour le saut natif du navigateur, quand le script n'est pas charge. */
  scroll-margin-top:calc(var(--rtf-rb-entete) + 16px);
  margin:clamp(34px,5vw,56px) 0 0;
  padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--rtf-line);
}

/* -------------------------------------------------------------------------
   Le cadre
   ---------------------------------------------------------------------- */

.rtf-rb .rtf-rb-carte{
  position:relative;
  border:1px solid var(--rtf-line);
  border-radius:var(--rtf-r-md);
  background:var(--rtf-canvas-2);
  overflow:hidden;
}

/* La lueur rouge du club, posée en haut du cadre. Discrète : elle sert à
   faire monter le regard vers le titre, pas à se faire remarquer. */
.rtf-rb .rtf-rb-carte:not(.est-carte){
  background:
    radial-gradient(130% 88% at 50% -10%, rgba(255,26,26,.13), transparent 62%),
    linear-gradient(178deg, var(--rtf-panel) 0%, var(--rtf-canvas-2) 68%);
}

/* -------------------------------------------------------------------------
   L'aperçu
   ---------------------------------------------------------------------- */

.rtf-rb .rtf-rb-tease{
  position:relative;
  display:grid;
  place-items:center;
  padding:clamp(34px,7vw,56px) clamp(20px,5vw,44px);
  min-height:clamp(320px,62vw,400px);
  text-align:center;
}

/* Le réseau de routes : dessiné, jamais le vrai tracé. Flouté et fondu sur
   les bords, il se lit comme une carte sans en être une. */
.rtf-rb .rtf-rb-decor{
  position:absolute;
  inset:-6%;
  width:112%;
  height:112%;
  opacity:.9;
  filter:blur(.6px);
  -webkit-mask-image:radial-gradient(122% 86% at 50% 44%,#000 22%,rgba(0,0,0,.35) 58%,transparent 84%);
          mask-image:radial-gradient(122% 86% at 50% 44%,#000 22%,rgba(0,0,0,.35) 58%,transparent 84%);
  pointer-events:none;
}

/* Un voile sous le texte, pour qu'il tienne quel que soit ce qui passe
   derrière. */
.rtf-rb .rtf-rb-voile{
  position:absolute;
  inset:0;
  background:
    radial-gradient(66% 54% at 50% 50%, rgba(10,11,14,.9) 0%, rgba(10,11,14,.66) 58%, rgba(10,11,14,.12) 100%),
    linear-gradient(180deg, rgba(10,11,14,.5) 0%, transparent 26%, transparent 72%, rgba(10,11,14,.62) 100%);
  pointer-events:none;
}

.rtf-rb .rtf-rb-tease-corps{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  max-width:36ch;
}

.rtf-rb .rtf-rb-kicker{
  margin:0;
  font-family:var(--rtf-display);
  font-size:clamp(1.95rem, 1.4rem + 2.2vw, 2.9rem);
  line-height:.98;
  text-transform:uppercase;
  letter-spacing:.012em;
  color:var(--rtf-ink);
}

.rtf-rb .rtf-rb-sous{
  margin:0;
  color:var(--rtf-ink-muted);
  font-size:1.02rem;
}

/* Ce qu'un roadbook contient — les mêmes jalons sur toutes les sorties,
   donc rien qui décrive celui-ci. */
.rtf-rb .rtf-rb-jalons{
  list-style:none;
  margin:6px 0 4px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 13px;
  font-family:var(--rtf-label);
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--rtf-ink-muted);
}
.rtf-rb .rtf-rb-jalons li{display:flex;align-items:center;gap:6px}
.rtf-rb .rtf-rb-jalons i{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--pastille,var(--rtf-neutre));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--pastille,var(--rtf-neutre)) 18%, transparent);
}

.rtf-rb .rtf-rb-verrou{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:4px 0 0;
  padding:6px 14px;
  border:1px solid rgba(255,26,26,.32);
  border-radius:999px;
  background:rgba(255,26,26,.09);
  color:var(--rtf-ink);
  font-family:var(--rtf-label);
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.rtf-rb .rtf-rb-verrou svg{color:var(--rtf-accent);flex:0 0 auto}

.rtf-rb .rtf-rb-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:6px;
}

/* Les boutons du bloc sont posés dans la colonne de texte de la fiche, et
   « .rtf-prose a » (0,1,1) y bat « .rtf-btn-primary » (0,1,0) : le libellé
   d'un lien-bouton repartait en rouge sur fond rouge, donc illisible. On
   redit ici les couleurs que le site avait prévues, avec de quoi gagner.
   Le bouton du membre est un <button>, il n'était pas touché. */
.rtf-rb a.rtf-btn-primary,
.rtf-rb a.rtf-btn-primary:hover,
.rtf-rb a.rtf-btn-primary:focus-visible{color:#fff}

.rtf-rb a.rtf-btn-ghost{color:var(--rtf-ink);border-color:var(--rtf-line)}
.rtf-rb a.rtf-btn-ghost:hover,
.rtf-rb a.rtf-btn-ghost:focus-visible{color:var(--rtf-accent);border-color:var(--rtf-accent)}

/* Les flèches et cadenas suivent la couleur du texte qui les porte. */
.rtf-rb .rtf-btn svg{color:currentColor}

.rtf-rb .rtf-rb-note{
  margin:2px 0 0;
  color:var(--rtf-ink-muted);
  font-size:.8rem;
}

/* Telechargement GPX (membres Premium) : voir rtf_roadbook_gpx_boutons(). */
.rtf-rb .rtf-rb-gpx{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--rtf-line);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  max-width:36ch;
}
.rtf-rb .rtf-rb-gpx-titre{
  margin:0;
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--rtf-label);
  font-size:11px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--rtf-ink-muted);
}
.rtf-rb .rtf-rb-gpx-premium{
  display:inline-block;
  padding:1px 7px;
  border-radius:999px;
  background:rgba(201,162,39,.16);
  border:1px solid rgba(201,162,39,.4);
  color:#C9A227;
  font-size:10px;
  letter-spacing:.05em;
  text-transform:none;
}
.rtf-rb .rtf-rb-gpx-previsu{
  margin:0;
  font-size:.78rem;
  color:var(--rtf-accent);
}
.rtf-rb .rtf-rb-gpx-aide{
  margin:0;
  font-size:.76rem;
  line-height:1.4;
  color:var(--rtf-ink-muted);
}

/* Sur un téléphone, deux boutons côte à côte deviennent deux moitiés
   étroites : on les empile pleine largeur. */
@media (max-width:560px){
  .rtf-rb .rtf-rb-actions{flex-direction:column;align-self:stretch;width:100%}
  .rtf-rb .rtf-rb-actions .rtf-btn{width:100%;justify-content:center}
  .rtf-rb .rtf-rb-jalons{gap:6px 12px}
}

/* -------------------------------------------------------------------------
   La vraie carte, une fois ouverte
   ---------------------------------------------------------------------- */

/* Le voile du haut : les étapes qui remontent passaient dans la bande de
   14 px entre l'en-tête fixe du site et le plan collé, et dans les
   encoches des coins arrondis du plan. Ce pavé couleur de page se colle
   pile sous l'en-tête et descend derrière le haut du plan (le plan, en
   z-index 2, repasse devant) : rien ne se voit plus au-dessus du plan.
   La marge négative rend sa place au plan : le voile ne décale rien. */
.rtf-rb.rtf-rb-ouvert::before{
  content:"";
  display:block;
  position:sticky;
  top:var(--rtf-rb-entete);
  z-index:1;
  height:30px;
  margin-bottom:-30px;
  background:var(--rtf-canvas);
}

/* Le plan reste collé en haut pendant que les étapes défilent dessous. Le
   décalage tient compte de l'en-tête du site, qui est en position fixed sur
   63 px : une seule variable à corriger s'il change un jour. La hauteur est
   bornée, sinon un plan de 520 px sur un écran bas ne laisserait plus rien
   voir de la liste. */
.rtf-rb .rtf-rb-carte.est-carte{
  position:sticky;
  top:calc(var(--rtf-rb-entete) + 14px);
  z-index:2;
  height:var(--rtf-rb-plan);
  min-height:0;
  background:var(--rtf-panel);
}

/* Sur un téléphone, 46vh d'un écran haut mange la moitié de la page :
   le plan passe au format 16/9 de sa largeur réelle (100vw moins les
   deux marges de 20 px), toujours borné par 46vh en garde-fou. */
@media (max-width:600px){
  .rtf-rb{--rtf-rb-plan:min(calc(56.25vw - 22.5px), 46vh)}
}

.rtf-rb-carte .leaflet-container{
  background:var(--rtf-canvas-2);
  font-family:var(--rtf-body);
}

/* Les tuiles OpenStreetMap sont claires. On les retourne pour qu'elles
   tiennent dans le noir du site : l'inversion seule rendrait le ciel
   orange, la rotation de teinte le remet dans son bleu. Le filtre ne porte
   que sur le fond ; le tracé et les pastilles vivent dans d'autres couches
   et gardent leurs couleurs. */
.rtf-rb .rtf-rb-fond{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.8)}

.rtf-rb-carte .leaflet-control-attribution{
  background:rgba(10,11,14,.78);
  color:var(--rtf-ink-muted);
  font-size:10.5px;
}
.rtf-rb-carte .leaflet-control-attribution a{color:var(--rtf-ink-muted)}
.rtf-rb-carte .leaflet-control-zoom a{
  background:var(--rtf-panel);
  color:var(--rtf-ink);
  border-color:var(--rtf-line);
}
.rtf-rb-carte .leaflet-control-zoom a:hover{background:var(--rtf-panel-2)}

/* Le bouton de recentrage, empile sous les boutons de zoom une fois la
   position connue (voir montrerMoi() dans rtf-roadbook.js). */
.rtf-rb-carte .rtf-rb-recentrer{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--rtf-panel);
  color:var(--rtf-ink);
}
.rtf-rb-carte .rtf-rb-recentrer:hover,
.rtf-rb-carte .rtf-rb-recentrer:focus-visible{background:var(--rtf-panel-2)}

/* L'état d'erreur reprend le cadre de l'aperçu. */
.rtf-rb .rtf-rb-attente{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:28px;text-align:center;
}
.rtf-rb .rtf-rb-attente-titre{
  margin:0;
  font-family:var(--rtf-display);
  font-size:1.3rem;
  text-transform:uppercase;
  color:var(--rtf-ink);
}
.rtf-rb .rtf-rb-attente p{margin:0;color:var(--rtf-ink-muted);max-width:44ch;font-size:.94rem}

/* -------------------------------------------------------------------------
   Les pastilles d'arrêt
   ---------------------------------------------------------------------- */

.rtf-rb .rtf-rb-pin span{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;
  border-radius:50%;
  border:2px solid var(--rtf-canvas);
  box-shadow:0 2px 6px rgba(0,0,0,.55);
  font-family:var(--rtf-label);
  font-size:12px;font-weight:700;
  color:#0A0B0E;
  transition:transform .22s var(--rtf-ease),box-shadow .22s var(--rtf-ease);
}

/* L'arrêt que la liste désigne : plus gros, cercle de lumière autour. */
.rtf-rb .rtf-rb-pin.est-actif{z-index:1000 !important}
.rtf-rb .rtf-rb-pin.est-actif span{
  transform:scale(1.45);
  border-color:#fff;
  box-shadow:0 0 0 5px rgba(255,26,26,.28),0 4px 12px rgba(0,0,0,.6);
}

.rtf-rb-carte .rtf-rb-bulle .leaflet-popup-content-wrapper{
  background:var(--rtf-panel);
  color:var(--rtf-ink);
  border:1px solid var(--rtf-line);
  border-radius:var(--rtf-r-sm);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.rtf-rb-carte .rtf-rb-bulle .leaflet-popup-tip{background:var(--rtf-panel);border:1px solid var(--rtf-line)}
.rtf-rb-carte .rtf-rb-bulle .leaflet-popup-content{margin:11px 14px;line-height:1.5}
.rtf-rb .rtf-rb-bulle-nom{display:block;font-weight:600;font-size:1rem}
.rtf-rb .rtf-rb-bulle-type{
  display:block;margin-top:2px;
  font-family:var(--rtf-label);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
}
.rtf-rb .rtf-rb-bulle-note{display:block;margin-top:6px;color:var(--rtf-ink-muted);font-size:.9rem}

/* -------------------------------------------------------------------------
   La liste des étapes
   ---------------------------------------------------------------------- */

.rtf-rb .rtf-rb-liste{
  list-style:none;
  margin:14px 0 0;padding:0;
  display:grid;gap:8px;
}
.rtf-rb .rtf-rb-etape{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 15px;
  background:var(--rtf-panel);
  border:1px solid var(--rtf-line);
  border-radius:var(--rtf-r-sm);
  cursor:pointer;
  scroll-margin-top:calc(var(--rtf-rb-entete) + 46vh + 40px);
  transition:border-color .18s var(--rtf-ease),background .18s var(--rtf-ease);
}
.rtf-rb .rtf-rb-etape:hover,.rtf-rb .rtf-rb-etape:focus-visible{
  border-color:var(--rtf-accent);
  background:var(--rtf-panel-2);
}

/* L'étape que le plan est en train de montrer. */
.rtf-rb .rtf-rb-etape.est-actif{
  border-color:var(--rtf-accent);
  background:var(--rtf-panel-2);
  box-shadow:inset 3px 0 0 var(--rtf-accent);
}
.rtf-rb .rtf-rb-etape.est-actif .rtf-rb-etape-nom{color:#fff}

.rtf-rb .rtf-rb-puce{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;
  border-radius:50%;
  font-family:var(--rtf-label);
  font-size:11.5px;font-weight:700;
  color:#0A0B0E;
}
.rtf-rb .rtf-rb-etape-corps{display:block;min-width:0}
.rtf-rb .rtf-rb-etape-nom{display:block;font-weight:600;color:var(--rtf-ink)}
.rtf-rb .rtf-rb-etape-type{
  display:block;margin-top:1px;
  font-family:var(--rtf-label);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--rtf-ink-muted);
}
.rtf-rb .rtf-rb-etape-note{display:block;margin-top:5px;color:var(--rtf-ink-muted);font-size:.92rem}

.rtf-rb .rtf-rb-pied,.rtf-rb .rtf-rb-sansfond{
  margin:12px 0 0;
  color:var(--rtf-ink-muted);
  font-size:.82rem;
}

/* -------------------------------------------------------------------------
   Réglages d'écran et de confort
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){
  .rtf-rb .rtf-rb-etape,.rtf-rb .rtf-rb-pin span{transition:none}
}

/* Sur un écran vraiment bas, un plan collé mangerait tout : on le laisse
   défiler avec la page plutôt que d'enfermer la lecture. */
@media (max-height:520px){
  .rtf-rb .rtf-rb-carte.est-carte{position:relative;top:auto;height:clamp(220px,60vh,320px)}
  .rtf-rb .rtf-rb-etape{scroll-margin-top:calc(var(--rtf-rb-entete) + 16px)}
  /* Le plan ne colle plus : le bloc GPS non plus, sinon il boucherait a
     lui seul un ecran deja bas. Le voile du haut n'a plus rien a voiler. */
  .rtf-rb .rtf-rb-gps{position:relative;top:auto}
  .rtf-rb.rtf-rb-ouvert::before{position:static}
}

/* -------------------------------------------------------------------------
   Y aller : ouvrir l'arret dans une application de navigation

   Des pastilles discretes, pas des boutons pleins : la liste compte parfois
   dix arrets, et dix boutons rouges empilés feraient un sapin de Noel. Le
   rouge du club reste sur la survolee et sur l'etape active.
   ---------------------------------------------------------------------- */

.rtf-rb .rtf-rb-nav{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px;
}

.rtf-rb .rtf-rb-nav-lien{
  display:inline-flex;
  align-items:center;
  padding:5px 11px;
  border:1px solid var(--rtf-line);
  border-radius:999px;
  background:var(--rtf-canvas-2);
  color:var(--rtf-ink-muted);
  font-family:var(--rtf-label);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  line-height:1;
  /* Une cible tactile qui se rate n'est pas une option a moto, gants aux
     mains, sur le bord d'une departementale. */
  min-height:32px;
  transition:border-color .18s var(--rtf-ease),color .18s var(--rtf-ease),background .18s var(--rtf-ease);
}

.rtf-rb .rtf-rb-nav-lien:hover,
.rtf-rb .rtf-rb-nav-lien:focus-visible{
  border-color:var(--rtf-accent);
  background:var(--rtf-panel-2);
  color:#fff;
}

/* Dans la bulle du plan, la place est comptee. */
.rtf-rb .rtf-rb-bulle .rtf-rb-nav{margin-top:10px}
.rtf-rb .rtf-rb-bulle .rtf-rb-nav-lien{padding:4px 9px;min-height:28px;font-size:10px}

@media (max-width:520px){
  .rtf-rb .rtf-rb-nav-lien{flex:1 1 auto;justify-content:center}
}

/* -------------------------------------------------------------------------
   Rejoindre le groupe : ma position, le prochain arret

   Le bloc vit entre le plan et la liste des etapes. Le calcul se fait
   entierement dans le navigateur : la position ne part jamais au serveur.
   ---------------------------------------------------------------------- */

.rtf-rb .rtf-rb-gps{
  /* Colle sous le plan, comme le plan colle sous l'en-tete : sur la
     route, ce bouton est ce qu'on cherche en premier, il n'a pas a
     remonter avec la liste. Le decalage est celui du plan plus sa
     hauteur : les deux collages s'empilent bord a bord. Le fond est
     opaque et le z-index sous celui du plan (2) : les etapes passent
     derriere sans jamais recouvrir ni l'un ni l'autre. */
  position:sticky;
  /* Décalage du plan (14px) + hauteur du plan + marge haute du bloc
     (14px) : le point d'accroche est exactement sa position naturelle
     sous le plan colle. Sans la marge dans le compte, le bloc glissait
     de 14px avant de se figer. */
  top:calc(var(--rtf-rb-entete) + 28px + var(--rtf-rb-plan));
  z-index:1;
  margin:14px 0 18px;
  padding:14px 16px;
  background:var(--rtf-panel);
  border:1px solid var(--rtf-line);
  border-left:3px solid var(--rtf-accent);
  border-radius:var(--rtf-r-md);
}

/* Le rideau : les etapes passent derriere le bloc, mais l'interstice de
   14px entre le plan et lui laissait voir leur defilement, tout comme
   les encoches des coins arrondis. Ce voile couleur de page, accroche
   au bloc et peint sous son fond (z-index:-1 dans son contexte), bouche
   la bande au-dessus et les coins — au pixel pres, il est invisible.
   Les bords negatifs rejoignent le bord externe des bordures (3px a
   gauche, 1px a droite), sans quoi une colonne de 3px resterait nue. */
.rtf-rb .rtf-rb-gps::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-3px;
  right:-1px;
  /* Monte jusque sous le plan (l'encoche de son coin arrondi comprise,
     d'où les 30 px) et couvre tout l'arrière du bloc jusqu'à son bord
     bas : les coins arrondis du bloc ne laissent plus rien paraître. */
  top:-30px;
  bottom:-2px;
  background:var(--rtf-canvas);
}

.rtf-rb .rtf-rb-gps-tete{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.rtf-rb .rtf-rb-gps-accroche{
  flex:1 1 260px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.rtf-rb .rtf-rb-gps-accroche strong{
  color:var(--rtf-ink);
  font-family:var(--rtf-label);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.rtf-rb .rtf-rb-gps-accroche span{
  color:var(--rtf-ink-muted);
  font-size:.86rem;
  line-height:1.5;
}

/* Un bouton, pas un lien : dans .rtf-prose, un lien-bouton sortirait
   rouge sur rouge (piege de specificite deja paye sur ce bloc). */
.rtf-rb .rtf-rb-gps-btn{
  flex:0 0 auto;
  padding:11px 18px;
  border:0;
  border-radius:6px;
  background:var(--rtf-accent);
  color:#fff;
  font-family:var(--rtf-label);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  /* Cible tactile large : gants, soleil, bord de departementale. */
  min-height:44px;
  transition:filter .18s var(--rtf-ease);
}
.rtf-rb .rtf-rb-gps-btn:hover,
.rtf-rb .rtf-rb-gps-btn:focus-visible{filter:brightness(1.12)}
.rtf-rb .rtf-rb-gps-btn:disabled{opacity:.6;cursor:wait}

/* Sur un téléphone, le bouton prenait toute une ligne en gros pavé :
   demande de dr.bends, il redescend d'un cran. La cible reste à 38 px,
   assez pour un pouce ganté. */
@media (max-width:600px){
  .rtf-rb .rtf-rb-gps-btn{
    padding:8px 14px;
    min-height:38px;
    font-size:10.5px;
  }
}

.rtf-rb .rtf-rb-gps-resultat{
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--rtf-line);
}
.rtf-rb .rtf-rb-gps-legende{
  margin:0 0 8px;
  color:var(--rtf-ink-muted);
  font-family:var(--rtf-label);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.rtf-rb .rtf-rb-gps-nom{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  flex-wrap:wrap;
}
.rtf-rb .rtf-rb-gps-nom strong{color:var(--rtf-ink);font-size:1.05rem}
.rtf-rb .rtf-rb-gps-type{
  font-family:var(--rtf-label);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.rtf-rb .rtf-rb-gps-dist{margin:6px 0 0;color:var(--rtf-ink-muted);font-size:.9rem}
.rtf-rb .rtf-rb-gps-erreur{margin:0;color:var(--rtf-ink-muted);font-size:.9rem;line-height:1.55}

.rtf-rb .rtf-rb-gps-suivant{
  display:inline-block;
  margin-top:11px;
  padding:0;
  border:0;
  background:none;
  color:var(--rtf-ink-muted);
  font-size:.86rem;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.rtf-rb .rtf-rb-gps-suivant:hover,
.rtf-rb .rtf-rb-gps-suivant:focus-visible{color:var(--rtf-accent)}

/* La bascule plan / vue réelle, posée sur la carte. */
.rtf-rb-carte .rtf-rb-bascule{
  padding:7px 13px;
  border:1px solid var(--rtf-line);
  border-radius:999px;
  background:var(--rtf-panel);
  color:var(--rtf-ink);
  font-family:var(--rtf-label);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
  min-height:34px;
  box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.rtf-rb-carte .rtf-rb-bascule:hover,
.rtf-rb-carte .rtf-rb-bascule:focus-visible{border-color:var(--rtf-accent);color:#fff}

/* -------------------------------------------------------------------------
   Entre deux arrêts : la distance par la route, le temps de selle

   Un trait pointillé relie les étapes sur l'axe des pastilles, comme la
   route continue entre deux arrêts. L'étiquette porte les kilomètres
   mesurés le long du tracé GPX et un temps estimé à 60 km/h de moyenne.
   Chaque étape affiche aussi son compteur depuis le départ, à la manière
   d'un roadbook de rallye.
   ---------------------------------------------------------------------- */

.rtf-rb .rtf-rb-inter{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:24px;
  /* Tout vit à droite : la colonne de gauche porte déjà la puce, le nom
     et la nature de l'arrêt. La pastille et le trait s'alignent sur les
     compteurs km des cartes, qui vivent au même bord. */
  padding:0 66px 0 15px;
}

/* Le trait pointillé passe dans l'axe des compteurs « km » des cartes,
   qu'il relie visuellement. Il déborde sur les interstices de la grille
   (gap 8px) pour toucher les cartes au-dessus et en dessous : la route
   ne s'interrompt pas entre deux arrêts. */
.rtf-rb .rtf-rb-inter::before{
  content:"";
  position:absolute;
  right:36px;
  top:-9px;
  bottom:-9px;
  border-left:2px dashed color-mix(in srgb, var(--rtf-ink-muted) 42%, transparent);
}

.rtf-rb .rtf-rb-inter-km{
  display:inline-flex;
  align-items:center;
  padding:3px 10px;
  border:1px solid var(--rtf-line);
  border-radius:999px;
  background:var(--rtf-panel);
  color:var(--rtf-ink-muted);
  font-family:var(--rtf-label);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}
.rtf-rb .rtf-rb-inter-km em{font-style:normal;color:var(--rtf-line)}

/* Le compteur kilométrique de l'étape, depuis le départ. */
.rtf-rb .rtf-rb-etape-km{
  flex:0 0 auto;
  margin-left:auto;
  padding-top:3px;
  font-family:var(--rtf-label);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--rtf-ink-muted);
  white-space:nowrap;
}
.rtf-rb .rtf-rb-etape.est-actif .rtf-rb-etape-km{color:var(--rtf-ink)}

/* ---- Les deux traces GPX, un par application ----
   Deux tuiles cote a cote sous le bouton du roadbook : une icone encadree,
   le nom de l'application, l'action en dessous. Chacune n'apparait que si SON
   fichier a ete depose.

   MESURE, faite dans le navigateur plutot que devinee : le corps de la carte
   (.rtf-rb-tease-corps) etait plafonne a 36ch, soit 325 px. Les cinq jalons
   — Depart, Essence, Repas, Pauses, Arrivee — en demandent 335 : il en
   manquait dix, et « Arrivee » tombait seule a la ligne. Deux tuiles n'y
   tenaient pas davantage. Le corps passe a 24rem : les jalons rentrent sur
   une ligne, les deux tuiles aussi, et le titre cesse de se couper en deux.

   Les tuiles se partagent la largeur en deux moitieds exactes plutot que de
   viser une largeur fixe : quelle que soit la place, elles restent cote a
   cote. box-sizing:border-box, sans quoi la marge interieure s'ajoute a la
   moitie et la seconde tuile passe a la ligne.
   ---------------------------------------------------------------------- */
.rtf-rb .rtf-rb-tease-corps{max-width:24rem}
.rtf-rb .rtf-rb-gpx{max-width:none;width:100%}
.rtf-rb .rtf-rb-actions-gpx{
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
  width:100%;align-self:stretch;
}
.rtf-rb .rtf-gpx-tuile{
  box-sizing:border-box;
  display:flex;align-items:center;gap:10px;
  flex:1 1 calc(50% - 5px);min-width:0;
  padding:10px 12px;text-decoration:none;
  background:rgba(22,24,31,.85);
  border:1px solid var(--rtf-line);
  border-radius:var(--rtf-r-md);
  transition:border-color .18s var(--rtf-ease),background .18s var(--rtf-ease);
}
/* Seule, une tuile garde sa moitie : etiree sur toute la largeur, elle
   sonne creux. */
.rtf-rb .rtf-gpx-tuile:only-child{flex:0 1 calc(50% - 5px)}
.rtf-rb .rtf-gpx-tuile:hover,
.rtf-rb .rtf-gpx-tuile:focus-visible{
  border-color:var(--rtf-or);background:rgba(227,197,103,.10);
}
.rtf-rb .rtf-gpx-rond{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:32px;height:32px;border-radius:8px;
  background:var(--rtf-or-sourd);
  border:1px solid rgba(227,197,103,.32);
  color:var(--rtf-or);
}
.rtf-rb .rtf-gpx-rond svg{width:16px;height:16px;display:block}
.rtf-rb .rtf-gpx-txt{min-width:0}
.rtf-rb .rtf-gpx-txt b{
  display:block;font-family:var(--rtf-label);font-weight:600;
  font-size:12px;letter-spacing:.03em;line-height:1.2;
  color:var(--rtf-ink);white-space:nowrap;
}
.rtf-rb .rtf-gpx-txt i{
  display:block;font-style:normal;font-family:var(--rtf-label);
  font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--rtf-ink-muted);margin-top:2px;
}
.rtf-rb .rtf-rb-gpx-attente{
  margin:0;font-size:.78rem;line-height:1.4;color:var(--rtf-ink-muted);
}

/* Sur un telephone, la carte n'a plus la place de deux tuiles : elles
   prennent toute la largeur l'une sous l'autre plutot que de rester a moitie
   vides. Les jalons, eux, se remettent sur deux lignes — c'est la place qui
   manque, pas la regle. */
@media (max-width:560px){
  .rtf-rb .rtf-gpx-tuile{flex:1 1 100%}
}