/* ==========================================================================
   360RTF - La progression du membre, sous sa carte.

   Le bloc est FRERE de .rtf-carte, jamais dedans : le plateau de la carte est
   en container queries et toutes ses tailles sont en cqw, si bien qu'un
   element glisse a l'interieur les remet a zero sur iOS (carte noire, erreur
   deja commise deux fois).

   Cette feuille vit a part plutot qu'en fin de rtf.css : celle-ci pese deja
   215 Ko, et deux regles de meme specificite s'y ecrasent en silence. Elle
   est chargee apres rtf-core, dont elle reprend les variables.
   ========================================================================== */

.rtf-prog{
  --p-couleur:var(--rtf-accent);
  --p-solide:var(--rtf-accent-solid);
  width:100%;max-width:560px;
  margin-top:16px;
  font-family:var(--rtf-body);
}
.rtf-prog.est-or{
  --p-couleur:var(--rtf-or);
  --p-solide:var(--rtf-or-solid);
}

/* Le grade a gauche, le compteur a droite : la meme lecture que le pied de
   la carte juste au-dessus. */
.rtf-prog-tete{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:9px;
}
.rtf-prog-grade{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--rtf-display);font-weight:900;
  font-size:1.32rem;line-height:1;
  text-transform:uppercase;letter-spacing:.02em;
  color:var(--p-couleur);
}
.rtf-prog-compte{
  font-family:var(--rtf-label);font-weight:600;
  font-size:.8rem;letter-spacing:.1em;
  color:var(--rtf-ink-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* La devise du grade : une ligne sous le nom, qui dit ce que ce grade vaut.
   La phrase sous la barre, elle, dit ce qui reste à parcourir. */
.rtf-prog-devise{
  margin:0 0 11px;
  font-size:.85rem;line-height:1.35;
  color:#8A929E;
}

.rtf-prog-rail{
  height:6px;border-radius:3px;
  background:#22262F;overflow:hidden;
}
.rtf-prog-rail i{
  display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--p-solide),var(--p-couleur));
  transition:width .5s var(--rtf-ease);
}

/* La piste : le ruban dessine par le club, decoupe en cinq tranches pour
   devenir dynamique. Les deux extremites arrondies et le bloc moto gardent
   leur taille ; la portion faite et celle qui reste s'etirent selon le
   pourcentage. Les raccords sont pris dans des zones uniformes du visuel,
   donc invisibles. Les images vivent dans assets/, a cote de cette feuille. */
.rtf-prog-piste{
  display:flex;align-items:stretch;
  height:34px;margin-top:14px;
}
.rtf-prog-piste>span{
  display:block;background-repeat:no-repeat;background-size:100% 100%;
}
.rtf-piste-cap-g{flex:none;width:11px}
.rtf-piste-moto{flex:none;width:91px}
.rtf-piste-cap-d{flex:none;width:15px}
.rtf-piste-faite{flex:var(--p) 1 0%;min-width:0;animation:rtf-piste-avance 1.5s var(--rtf-ease) both}
.rtf-piste-vide{flex:calc(100 - var(--p)) 1 0%;min-width:0;animation:rtf-piste-recule 1.5s var(--rtf-ease) both}
@keyframes rtf-piste-avance{from{flex-grow:0}}
@keyframes rtf-piste-recule{from{flex-grow:100}}

.rtf-prog .rtf-piste-cap-g{background-image:url(rtf-barre-rouge-cap-g.png?v=2)}
.rtf-prog .rtf-piste-faite{background-image:url(rtf-barre-rouge-faite.png)}
.rtf-prog .rtf-piste-moto {background-image:url(rtf-barre-rouge-moto.png)}
.rtf-prog .rtf-piste-vide {background-image:url(rtf-barre-rouge-reste.png)}
.rtf-prog .rtf-piste-cap-d{background-image:url(rtf-barre-rouge-cap-d.png)}
.rtf-prog.est-or .rtf-piste-cap-g{background-image:url(rtf-barre-or-cap-g.png?v=2)}
.rtf-prog.est-or .rtf-piste-faite{background-image:url(rtf-barre-or-faite.png)}
.rtf-prog.est-or .rtf-piste-moto {background-image:url(rtf-barre-or-moto.png)}
.rtf-prog.est-or .rtf-piste-vide {background-image:url(rtf-barre-or-reste.png)}
.rtf-prog.est-or .rtf-piste-cap-d{background-image:url(rtf-barre-or-cap-d.png)}

/* Les volets. Une case a cocher masquee mais focalisable plutot qu'un
   <details> : l'animation d'ouverture d'un <details> ne joue pas sur Safari
   iOS, alors que la grille 0fr -> 1fr s'anime partout. C'est le label qui
   habille la case. Toujours zero JavaScript. */
.rtf-prog-volet{margin-top:10px}
.rtf-prog-bascule{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
.rtf-prog-bouton{
  display:flex;align-items:center;gap:11px;padding:13px 14px;cursor:pointer;
  background:var(--rtf-panel);border:1px solid var(--rtf-line);border-radius:var(--rtf-r-md);
  font-family:var(--rtf-label);font-weight:600;font-size:.74rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--rtf-ink);
  -webkit-tap-highlight-color:transparent;user-select:none;
  transition:border-color .3s var(--rtf-ease),background .3s var(--rtf-ease),color .3s var(--rtf-ease);
}
.rtf-prog-bouton:hover{background:var(--rtf-panel-2);border-color:#39404E}
.rtf-prog-bascule:focus-visible+.rtf-prog-bouton{outline:2px solid var(--p-couleur);outline-offset:2px}
.rtf-prog-bascule:checked+.rtf-prog-bouton{
  color:var(--p-couleur);background:var(--rtf-panel-2);
  border-color:color-mix(in srgb,var(--p-couleur) 42%,var(--rtf-line));
}
.rtf-prog-bouton .rtf-prog-embleme{flex:none;color:var(--p-couleur);opacity:.9}
.rtf-prog-bouton>span{flex:1 1 auto}
.rtf-prog-chevron{flex:none;color:#6E7683;transition:transform .42s var(--rtf-ease),color .3s var(--rtf-ease)}
.rtf-prog-bascule:checked+.rtf-prog-bouton .rtf-prog-chevron{transform:rotate(180deg);color:var(--p-couleur)}

.rtf-prog-tiroir{display:grid;grid-template-rows:0fr;transition:grid-template-rows .44s var(--rtf-ease)}
.rtf-prog-bascule:checked~.rtf-prog-tiroir{grid-template-rows:1fr}
.rtf-prog-tiroir>div{
  overflow:hidden;min-height:0;opacity:0;transform:translateY(-6px);
  transition:opacity .32s var(--rtf-ease),transform .44s var(--rtf-ease);
}
.rtf-prog-bascule:checked~.rtf-prog-tiroir>div{opacity:1;transform:none;transition-delay:.06s}


/* Les deux bornes du palier en cours, en tout petit : elles disent d'ou l'on
   vient et ou l'on va sans que la barre ait besoin d'une legende. */
.rtf-prog-bornes{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:7px;
  font-family:var(--rtf-label);font-size:.72rem;letter-spacing:.06em;
  color:#6E7683;
}

.rtf-prog-reste{
  margin:8px 0 0;
  font-size:.86rem;line-height:1.4;
  color:var(--rtf-ink-muted);
}

/* Le chemin complet : les sept grades, ce qui est derriere et ce qui reste.
   Un point par etape, relies par un filet vertical ; le membre voit d'un
   coup d'oeil ou il en est et ce qu'il vise. */
.rtf-prog-etapes{
  list-style:none;margin:13px 0 2px;padding:0;position:relative;
}
.rtf-prog-etapes::before{
  content:"";position:absolute;left:13px;top:16px;bottom:16px;
  width:2px;background:var(--rtf-line);
}
.rtf-prog-etapes li{
  position:relative;
  display:flex;align-items:center;gap:11px;
  padding:5px 0;
}
/* La pastille porte l'embleme du grade. Son fond dit l'etat : plein pour ce
   qui est franchi, cercle epais pour l'etape en cours, creux pour la suite. */
.rtf-prog-pastille{
  flex:none;
  width:28px;height:28px;border-radius:50%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  background:var(--rtf-panel);
  border:1.5px solid var(--rtf-line);
  color:#6E7683;
}
.est-franchi .rtf-prog-pastille{
  border-color:var(--p-couleur);color:var(--p-couleur);
}
.est-actuel .rtf-prog-pastille{
  border-color:var(--p-couleur);border-width:2px;
  background:var(--p-couleur);color:var(--rtf-canvas);
}
.rtf-prog-nom{
  flex:1 1 auto;
  font-family:var(--rtf-label);font-weight:600;
  font-size:.86rem;letter-spacing:.03em;
  color:var(--rtf-ink);
}
.est-actuel .rtf-prog-nom{color:var(--p-couleur);font-weight:700}
.est-avenir .rtf-prog-nom{color:#6E7683}
.rtf-prog-etat{
  flex:none;
  font-family:var(--rtf-label);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:#6E7683;
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.est-actuel .rtf-prog-etat{color:var(--p-couleur)}

/* Trois compteurs colles par un filet unique : un seul objet, pas trois
   cartes. Le troisieme change de nature selon le membre (saisons, ou pays
   des qu'il en a plus d'un) : c'est PHP qui tranche, pas le CSS. */
.rtf-prog-tuiles{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;margin:13px 0 2px;
  background:var(--rtf-line);
  border:1px solid var(--rtf-line);border-radius:10px;
  overflow:hidden;
}
.rtf-prog-tuiles>div{
  background:var(--rtf-panel);
  padding:12px 13px;
  display:flex;flex-direction:column;gap:2px;
  min-width:0;
}
.rtf-prog-tuiles dt{
  font-family:var(--rtf-label);font-weight:600;
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:#6E7683;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rtf-prog-tuiles dd{
  margin:0;
  font-family:var(--rtf-display);font-weight:900;
  font-size:1.44rem;line-height:1;
  color:var(--rtf-ink);
  font-variant-numeric:tabular-nums;
}

@media (max-width:560px){
  .rtf-prog-grade{font-size:1.18rem}
  .rtf-prog-tuiles>div{padding:10px 10px}
  .rtf-prog-tuiles dt{font-size:.58rem;letter-spacing:.1em}
  .rtf-prog-tuiles dd{font-size:1.24rem}
  .rtf-prog-piste{height:28px;margin-top:12px}
  .rtf-piste-cap-g{width:9px}
  .rtf-piste-moto{width:75px}
  .rtf-piste-cap-d{width:12px}
  .rtf-prog-volet{margin-top:8px}
  .rtf-prog-bouton{padding:11px 12px;font-size:.68rem;letter-spacing:.08em;gap:9px}
  .rtf-prog-etapes{margin:11px 0 2px}
  .rtf-prog-tuiles{margin:11px 0 2px}
}

@media (prefers-reduced-motion:reduce){
  .rtf-prog-rail i{transition:none}
  .rtf-piste-faite,.rtf-piste-vide{animation:none}
  .rtf-prog-tiroir,.rtf-prog-tiroir>div,.rtf-prog-chevron{transition:none}
}

/* Les emblemes ne se deforment jamais, quelle que soit la largeur. */
.rtf-prog-icone{flex:none;display:block}

/* ==========================================================================
   Les XP (12 septembre 2026). Le grade suit desormais le total d'XP : la tete
   dit « 420 / 500 XP », la ligne du dessous le niveau, et quatre pastilles
   disent d'ou viennent les points. Tout ce qui suit s'ajoute aux regles
   existantes sans en remplacer aucune.
   ========================================================================== */

/* Le surtitre separe la progression du role : « President » s'affiche plus
   haut, et ne depend jamais des XP. */
.rtf-prog-surtitre{
  margin:0 0 6px;
  font-family:var(--rtf-label);font-weight:600;
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:#6E7683;
}
.rtf-prog-compte strong{
  font-family:var(--rtf-display);font-weight:900;
  font-size:1.05rem;letter-spacing:.02em;
  color:var(--rtf-ink);
}
.rtf-prog-niveau{
  margin:-4px 0 0;
  font-family:var(--rtf-label);font-weight:600;
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--p-couleur);
}
.rtf-prog-niveau span{color:#6E7683}
.rtf-prog-reste strong{color:var(--rtf-ink);font-weight:700}
.rtf-prog-reste .rtf-prog-cible{color:var(--p-couleur);text-transform:uppercase;letter-spacing:.03em}

/* Les quatre sources : une grille de pastilles sobres, jamais quatre cartes. */
.rtf-prog-sources{
  list-style:none;margin:12px 0 4px;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
}
.rtf-prog-sources li{
  display:flex;flex-direction:column;gap:1px;min-width:0;
  padding:8px 9px;border-radius:var(--rtf-r-md);
  background:var(--rtf-panel);border:1px solid var(--rtf-line);
}
.rtf-prog-sources li.est-vide{opacity:.62}
/* Les symboles du club, au trait : ils prennent la couleur de ce qui les porte. */
.rtf-prog-source-symbole{display:inline-flex;flex:none;color:#6E7683;line-height:0}
.rtf-prog-source-symbole .rtf-xp-symbole{display:block}
.rtf-prog-sources li.est-plein .rtf-prog-source-symbole,
.rtf-prog-gagner .rtf-prog-source-symbole,
.rtf-prog-histo li.est-gain .rtf-prog-source-symbole{color:var(--p-couleur)}
.rtf-prog-source-nom{
  font-family:var(--rtf-label);font-weight:600;
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#6E7683;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rtf-prog-source-xp{
  font-family:var(--rtf-display);font-weight:900;font-size:.98rem;line-height:1.15;
  color:var(--rtf-ink);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.rtf-prog-sources li.est-plein .rtf-prog-source-xp{color:var(--p-couleur)}

/* Le resume en tete du chemin : ou l'on est, ce qu'on vise. */
.rtf-prog-resume{
  margin:12px 0 0;font-size:.84rem;line-height:1.4;color:var(--rtf-ink-muted);
}
.rtf-prog-resume strong{color:var(--rtf-ink)}

/* Chaque etape porte ses XP requis, puis son statut. */
.rtf-prog-xp{
  flex:none;
  font-family:var(--rtf-label);font-size:.72rem;letter-spacing:.04em;
  color:var(--rtf-ink-muted);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.est-avenir .rtf-prog-xp{color:#6E7683}
.rtf-prog-etapes .rtf-prog-etat{
  display:inline-flex;align-items:center;gap:4px;
  min-width:84px;justify-content:flex-end;
}
.est-franchi .rtf-prog-etat{color:var(--rtf-ok)}
.rtf-prog-cadenas{flex:none;display:block}

/* Comment gagner, et l'historique : deux listes a la meme grammaire —
   le symbole, le texte, les XP a droite. */
.rtf-prog-gagner,.rtf-prog-histo{list-style:none;margin:12px 0 2px;padding:0}
.rtf-prog-gagner li,.rtf-prog-histo li{
  display:flex;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--rtf-line);
}
.rtf-prog-gagner li:last-child,.rtf-prog-histo li:last-child{border-bottom:0}
.rtf-prog-gagner-texte,.rtf-prog-histo-motif{
  flex:1 1 auto;min-width:0;font-size:.86rem;line-height:1.35;color:var(--rtf-ink);
}
.rtf-prog-histo-motif small{display:block;font-size:.72rem;color:#6E7683}
.rtf-prog-gagner-xp,.rtf-prog-histo-xp{
  flex:none;font-family:var(--rtf-label);font-weight:700;font-size:.8rem;
  letter-spacing:.03em;white-space:nowrap;color:var(--p-couleur);
}
.rtf-prog-histo li.est-retrait .rtf-prog-histo-xp{color:#6E7683}
.rtf-prog-vide{margin:12px 0 4px;font-size:.84rem;color:#6E7683}

@media (max-width:560px){
  .rtf-prog-sources{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rtf-prog-etapes .rtf-prog-etat{min-width:0}
  .rtf-prog-xp{font-size:.66rem}
}

/* ==========================================================================
   13 septembre 2026 : le compteur d'XP en grand, les quatre sources en
   compact (deux lignes : symbole et XP, puis libelle et quantite). Memes
   retouches que dans l'application. Ces regles viennent apres les
   precedentes et les remplacent a specificite egale.
   ========================================================================== */
.rtf-prog .rtf-prog-tete{align-items:flex-end}
.rtf-prog .rtf-prog-compte{font-size:.95rem;letter-spacing:.06em}
.rtf-prog .rtf-prog-compte strong{font-size:1.9rem;line-height:1}
.rtf-prog .rtf-prog-niveau{margin-top:0}
.rtf-prog .rtf-prog-sources{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:10px 0 4px;
  border:1px solid var(--rtf-line);border-radius:var(--rtf-r-md);overflow:hidden;background:var(--rtf-line)}
.rtf-prog .rtf-prog-sources li{gap:1px;padding:6px 7px;border:0;border-radius:0;margin-left:1px}
.rtf-prog .rtf-prog-sources li:first-child{margin-left:0}
.rtf-prog .rtf-prog-sources li.est-vide{opacity:1}
.rtf-prog-source-tete{display:flex;align-items:center;gap:4px;min-width:0}
.rtf-prog .rtf-prog-source-xp{font-size:.9rem;line-height:1.15}
.rtf-prog .rtf-prog-source-xp small{font-family:var(--rtf-label);font-weight:600;font-size:.55rem;letter-spacing:.04em;color:#6E7683}
.rtf-prog .rtf-prog-source-nom{font-family:var(--rtf-body);font-weight:400;font-size:.66rem;letter-spacing:0;text-transform:none}
.rtf-prog .rtf-prog-source-nom b{font-family:var(--rtf-label);font-weight:600;color:var(--rtf-ink)}
.rtf-prog-sources li.est-vide .rtf-prog-source-xp{color:#6E7683}
@media (max-width:560px){
  .rtf-prog .rtf-prog-sources{grid-template-columns:repeat(4,minmax(0,1fr))}
  .rtf-prog .rtf-prog-compte strong{font-size:1.7rem}
  .rtf-prog .rtf-prog-source-nom{font-size:.6rem}
}

/* ==========================================================================
   13 septembre 2026, soir : le releve detaille (includes/xp-releve.php).
   Cinq sources au lieu de quatre (les paiements ont leur case), la condition
   de chaque regle, le detail par sortie, le statut de chaque ligne de
   l'historique et le calcul de chaque compteur. Memes mots, memes statuts
   que dans l'application.
   ========================================================================== */

/* Cinq cases sur une seule surface : trois en haut, deux en bas, le filet de
   separation fait par le fond. Six colonnes pour que les deux du bas se
   partagent la largeur sans laisser de trou. */
.rtf-prog .rtf-prog-sources{grid-template-columns:repeat(6,minmax(0,1fr));gap:1px}
.rtf-prog .rtf-prog-sources li{grid-column:span 2;margin-left:0}
.rtf-prog .rtf-prog-sources li:nth-child(4):nth-last-child(2),
.rtf-prog .rtf-prog-sources li:nth-child(5):last-child{grid-column:span 3}
.rtf-prog .rtf-prog-sources li:last-child:nth-child(3n+1){grid-column:span 6}
@media (max-width:560px){
  .rtf-prog .rtf-prog-sources{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* La pastille de statut : validé, en attente, annulé, remboursé. */
.rtf-prog-statut{
  display:inline-flex;align-items:center;flex:none;
  padding:2px 7px;border-radius:999px;
  font-family:var(--rtf-label);font-weight:600;font-size:.58rem;line-height:1.5;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}
.rtf-prog-statut.est-valide{color:var(--rtf-ok);background:var(--rtf-ok-sourd)}
.rtf-prog-statut.est-en_attente{color:var(--rtf-attente);background:var(--rtf-attente-sourd)}
.rtf-prog-statut.est-annule{color:var(--rtf-neutre);background:var(--rtf-neutre-sourd)}
.rtf-prog-statut.est-rembourse{color:var(--rtf-ko);background:var(--rtf-ko-sourd)}

/* Comment gagner : la valeur a droite, la condition sous la regle. */
.rtf-prog .rtf-prog-gagner li{align-items:flex-start}
.rtf-prog .rtf-prog-gagner .rtf-prog-source-symbole{margin-top:1px}
.rtf-prog-gagner-texte small{display:block;margin-top:2px;font-size:.74rem;line-height:1.4;color:#8A919C}
.rtf-prog .rtf-prog-gagner li.est-nul .rtf-prog-source-symbole,
.rtf-prog .rtf-prog-gagner li.est-nul .rtf-prog-gagner-xp{color:#6E7683}

/* L'historique : le motif, ce qu'il concerne, la date et le numero ; a
   droite les XP et le statut. Un gain repris se lit barre. */
.rtf-prog .rtf-prog-histo li{align-items:flex-start}
.rtf-prog .rtf-prog-histo .rtf-prog-source-symbole{margin-top:1px}
.rtf-prog-histo-motif small + small{margin-top:1px}
.rtf-prog-histo-droite{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.rtf-prog .rtf-prog-histo li.est-en_attente .rtf-prog-source-symbole,
.rtf-prog .rtf-prog-histo li.est-en_attente .rtf-prog-histo-xp{color:var(--rtf-attente)}
.rtf-prog .rtf-prog-histo li.est-gain.est-annule .rtf-prog-histo-xp,
.rtf-prog .rtf-prog-histo li.est-gain.est-rembourse .rtf-prog-histo-xp{color:#6E7683;text-decoration:line-through}
.rtf-prog .rtf-prog-histo li.est-annule .rtf-prog-source-symbole,
.rtf-prog .rtf-prog-histo li.est-rembourse .rtf-prog-source-symbole{color:#6E7683}
.rtf-prog-note{margin:8px 0 2px;font-size:.74rem;line-height:1.4;color:#6E7683}
.rtf-prog-note:empty{display:none}

/* Le detail par sortie : une fiche par sortie, la meme grammaire que les
   listes — le texte, le statut, les XP a droite, le total en pied. */
.rtf-prog-sorties{list-style:none;margin:12px 0 2px;padding:0;display:grid;gap:10px}
.rtf-prog-sortie{
  padding:10px 12px;border-radius:var(--rtf-r-md);
  background:var(--rtf-panel);border:1px solid var(--rtf-line);
}
.rtf-prog-sortie-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.rtf-prog-sortie-titre{min-width:0;font-weight:600;font-size:.9rem;line-height:1.3;color:var(--rtf-ink)}
.rtf-prog-sortie-titre small{display:block;font-weight:400;font-size:.72rem;color:#6E7683}
.rtf-prog-sortie-total{
  flex:none;font-family:var(--rtf-display);font-weight:900;font-size:1.05rem;line-height:1.2;
  color:var(--p-couleur);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.rtf-prog-sortie-faits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0 4px}
.rtf-prog-sortie-faits div{min-width:0}
.rtf-prog-sortie-faits dt{
  font-family:var(--rtf-label);font-weight:600;font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;color:#6E7683;
}
.rtf-prog-sortie-faits dd{margin:1px 0 0;font-size:.8rem;line-height:1.35;color:var(--rtf-ink)}
.rtf-prog-sortie-faits dd small{color:#8A919C}
.rtf-prog-sortie-lignes{list-style:none;margin:6px 0 0;padding:0}
.rtf-prog-sortie-lignes li{
  display:flex;align-items:center;gap:8px;
  padding:7px 0;border-top:1px solid var(--rtf-line);
}
.rtf-prog-sortie-ligne-texte{flex:1 1 auto;min-width:0;font-size:.82rem;line-height:1.35;color:var(--rtf-ink)}
.rtf-prog-sortie-ligne-texte small{display:block;font-size:.7rem;color:#8A919C}
.rtf-prog-sortie-ligne-xp{
  flex:none;min-width:58px;text-align:right;
  font-family:var(--rtf-label);font-weight:700;font-size:.78rem;
  white-space:nowrap;color:var(--p-couleur);font-variant-numeric:tabular-nums;
}
.rtf-prog-sortie-lignes li.est-en_attente .rtf-prog-sortie-ligne-xp{color:var(--rtf-attente)}
.rtf-prog-sortie-lignes li.est-annule .rtf-prog-sortie-ligne-xp,
.rtf-prog-sortie-lignes li.est-rembourse .rtf-prog-sortie-ligne-xp{color:#6E7683}
.rtf-prog-sortie-lignes li.rtf-prog-sortie-somme .rtf-prog-sortie-ligne-texte{
  font-family:var(--rtf-label);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
}
.rtf-prog-sortie-lignes li.rtf-prog-sortie-attente .rtf-prog-sortie-ligne-texte{font-size:.74rem;color:#8A919C}
.rtf-prog-sortie-lignes li.rtf-prog-sortie-attente .rtf-prog-sortie-ligne-xp{color:var(--rtf-attente)}

/* ==========================================================================
   16 septembre 2026 : « XP gagnes en detail », sous Mes compteurs, devient la
   carte-liste de l'application a la place du tableau. Memes donnees, memes
   cotes que lib/progression.tsx (styles detailTitre, detail, detailLigne,
   detailNom, detailCompte, detailXp, detailTotalTexte) : le symbole dans une
   colonne de 24 px, le nom en gras, la quantite, le calcul, les XP a droite ;
   une source a 0 XP se lit en gris ; le total en majuscules, sans filet.

   Les tailles de l'app sont en points ; ici en rem (16 px de base), et les
   hauteurs de ligne en rapport, pour tomber sur les memes pixels tout en
   suivant la taille de texte choisie par le lecteur.

   Le reset d'Hello Elementor pose des marges sur p, ul et li, le navigateur
   des puces et un retrait a gauche : tout est remis a zero ici, en toutes
   lettres, pour que seule la carte decide de ses espacements. Noms en
   « gains » : .rtf-prog-sources, -histo et -gagner sont deja pris.
   ========================================================================== */

/* Le titre. 16 px au-dessus : dans l'app, les 2 px sous les compteurs
   s'ajoutent aux 14 px du titre ; ici les deux marges fusionnent, on pose
   donc la somme. */
.rtf-prog .rtf-prog-gains-titre{
  margin:16px 0 4px;padding:0;
  font-family:var(--rtf-label);font-weight:600;
  font-size:.6125rem;line-height:1.33;letter-spacing:.12em;text-transform:uppercase;
  color:#6E7683;
}

/* La carte : 12 px de marge laterale interne, les lignes collees dedans. */
.rtf-prog .rtf-prog-gains{
  list-style:none;margin:0 0 2px;padding:0 12px;
  background:var(--rtf-panel);
  border:1px solid var(--rtf-line);border-radius:var(--rtf-r-md);
}
.rtf-prog .rtf-prog-gains li{
  display:flex;align-items:flex-start;gap:10px;
  margin:0;padding:9px 0;
  list-style:none;background:none;
  border:0;border-bottom:1px solid var(--rtf-line);
}
.rtf-prog .rtf-prog-gains li::before{content:none}

/* Le symbole, 17 px, centre dans sa colonne de 24 px et pose en haut de la
   ligne : le nom, la quantite et le calcul s'empilent a cote. */
.rtf-prog-gains-symbole{
  flex:none;width:24px;
  display:flex;justify-content:center;
  line-height:0;color:var(--p-couleur);
}
.rtf-prog-gains-symbole .rtf-xp-symbole{display:block;width:17px;height:17px}

.rtf-prog-gains-corps{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
/* L'app coupe le nom a une ligne ; ici il passe a la ligne plutot que de
   perdre ses derniers mots sur un petit ecran. */
.rtf-prog .rtf-prog-gains-nom{
  display:block;margin:0;
  font-family:var(--rtf-body);font-weight:700;
  font-size:.8625rem;line-height:1.38;
  color:var(--rtf-ink);overflow-wrap:anywhere;
}
.rtf-prog-gains-compte{
  font-family:var(--rtf-body);font-weight:400;
  font-size:.75rem;line-height:1.333;
  color:var(--rtf-ink-muted);
}
.rtf-prog-gains-calcul{
  margin-top:2px;
  font-family:var(--rtf-body);font-weight:400;
  font-size:.75rem;line-height:1.375;
  color:#8A919C;
}

.rtf-prog-gains-xp{
  flex:none;white-space:nowrap;
  font-family:var(--rtf-label);font-weight:600;
  font-size:.8125rem;line-height:1.385;letter-spacing:.03em;
  color:var(--p-couleur);font-variant-numeric:tabular-nums;
}

/* Une source a 0 XP : le symbole et les XP en gris, le texte inchange. */
.rtf-prog .rtf-prog-gains li.est-vide .rtf-prog-gains-symbole,
.rtf-prog .rtf-prog-gains li.est-vide .rtf-prog-gains-xp{color:#6E7683}

/* Le total : centre sur sa ligne, en Saira noire et en majuscules, sans
   filet dessous. */
.rtf-prog .rtf-prog-gains li.rtf-prog-gains-total{align-items:center;border-bottom:0}
.rtf-prog .rtf-prog-gains-total .rtf-prog-gains-corps,
.rtf-prog .rtf-prog-gains-total .rtf-prog-gains-xp{
  font-family:var(--rtf-display);font-weight:900;
  font-size:1rem;line-height:1.3125;letter-spacing:.03em;text-transform:uppercase;
  color:var(--rtf-ink);
}