/* Mes données (E9) et les passages à revoir (E11). Dash charge `assets/` par ordre alphabétique :
   cette feuille passe AVANT `rp.css` (« - » < « . »). Elle ne redéfinit donc aucune classe de
   `rp.css` : seulement des classes nouvelles `rp-donnees-…`, avec les variables de `rp.css`. */

/* « Ce qui est prêt » : le titre, puis la grille des tuiles. */
.rp-donnees-pret { display: flex; flex-direction: column; gap: var(--rp-espace-2); }

/* Une sortie de la liste : toute la ligne mène à sa fiche. */
.rp-donnees-ligne { color: inherit; text-decoration: none; display: block; border-radius: var(--rp-rayon-moyen); }
.rp-donnees-ligne:hover { background: var(--rp-ligne-douce); }
.rp-donnees-ligne:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 2px; }

.rp-donnees-absentes { font-size: var(--rp-taille-secondaire); }

/* Les passages à revoir : une seule colonne, pas trop large pour lire. */
.rp-donnees-revoir-pile { max-width: 820px; }
.rp-donnees-revoir-deux {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--rp-espace-4);
}
.rp-donnees-revoir-passage { display: flex; flex-direction: column; gap: 2px; }
.rp-donnees-revoir-nom { font-weight: 600; }
.rp-donnees-revoir-faits { font-family: var(--rp-police-chiffres); font-size: var(--rp-taille-secondaire); }
.rp-donnees-trace { max-width: 360px; }

@media (max-width: 767px) {
  /* Comme Préparer, Relire et Ma forme : au téléphone, l'ordre de l'ordinateur (le graphique et
     sa légende restent ensemble, sous le chiffre). Nos identifiants seulement. */
  #rp-donnees > *, #rp-a-revoir > * { order: 0; }
  .rp-donnees-revoir-deux { grid-template-columns: minmax(0, 1fr); }
}

/* « Ton export » : la phrase et le lien du détail restent proches (le repli garde ses 44 px à
   toucher, avec le texte en haut). */
.rp-carte.rp-donnees-export { gap: var(--rp-espace-1); }
.rp-donnees-export .rp-repli { align-items: flex-start; padding-top: var(--rp-espace-1); }

/* « Kilomètre par kilomètre » : les titres des colonnes, sur la même grille que les lignes. */
.rp-km-tete {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 110px;
  gap: var(--rp-espace-4);
  padding: 0 0 var(--rp-espace-2) var(--rp-espace-3);
  font-size: var(--rp-taille-mention);
  color: var(--rp-texte-secondaire);
}
.rp-km-tete > div:last-child { text-align: right; }
@media (max-width: 767px) {
  .rp-km-tete { grid-template-columns: minmax(0, 1fr) 104px; gap: var(--rp-espace-2) var(--rp-espace-3); }
  .rp-km-tete > div:first-child { display: none; }
}