/* ==========================================================================
   PaperTrade — PAPERPOINTS (PP), composants de la monnaie
   --------------------------------------------------------------------------
   Feuille de styles AUTONOME et NOUVELLE : elle ne redéfinit rien de
   styles.css, refonte.css, theme.css ou composants.css, et toutes ses classes
   sont préfixées `pp-`. À charger APRÈS composants.css :

     <link rel="stylesheet" href="/css/theme.css">
     <link rel="stylesheet" href="/css/composants.css">
     <link rel="stylesheet" href="/css/paperpoints.css">

   Contenu : pastille de jeton (à poser à côté d'un montant), boutons pilule
   (principal en dégradé bleu -> violet avec flèche, secondaire au trait),
   carte de solde (gros montant tabulaire, mini-courbe, ligne de variation),
   liste d'historique (date, montant signé, origine, partie/compétition),
   bandeau de récompenses d'une compétition, badge « COMPÉTITION RÉCOMPENSÉE ».

   Tous les jetons viennent de theme.css (--bleu, --violet, --vert, --e1..--e7,
   --r-*, --ombre-*, --trans, --t-*) : aucune couleur ni aucune mesure n'est
   inventée ici.

   ATTENTION — préfixe déjà pris : l'existant utilise `pp-` pour « parties du
   profil » (`.pp-liste`, `.pp-carte`, `.pp-carte-tete`, `.pp-carte-meta`,
   `.pp-perf` dans styles.css, et `.pp-card` dans composants.css/refonte.css).
   Ces six noms ne sont donc PAS réutilisés ici : la monnaie emploie
   `.pp-hist-*`, `.pp-recompense*`, `.pp-solde*`, `.pp-btn*`, `.pp-jeton`.
   ========================================================================== */

/* --- 1. Jetons propres aux PaperPoints ---------------------------------- */
:root {
  /* L'or n'existe pas dans la palette du projet : il n'est utilisé que par
     l'écusson de récompense (pp-badge.svg) et par la mention de compétition
     récompensée. C'est le même or que le trophée des cartes de compétition
     (#fbbf24), décliné en clair et en sombre pour les dégradés de la feuille. */
  --pp-or: #fbbf24;
  --pp-or-clair: #fde68a;
  --pp-or-sombre: #b45309;

  /* Couleurs internes des deux SVG (documentées ici pour rester cohérent si
     un composant HTML doit les rappeler : liseré, cœur, relief des lettres) */
  --pp-coeur: #0b1226;
  --pp-relief: #1e3a8a;
  --pp-indigo: #6366f1;

  --pp-degrade: var(--degrade-bleu-violet);          /* bleu -> violet */
  --pp-degrade-vif: linear-gradient(120deg, var(--bleu-clair) 0%, var(--violet-clair) 100%);
  --pp-halo-or: 0 0 0 1px rgba(251, 191, 36, .35), 0 12px 30px -16px rgba(251, 191, 36, .55);

  --pp-jeton-t: 20px;                                 /* taille de pastille */
}

/* --- 2. Pastille de jeton ------------------------------------------------
   Deux usages, un seul nom :
     <img class="pp-jeton" src="/assets/pp-jeton.svg" alt="" width="20" height="20">
     <span class="pp-jeton" aria-hidden="true"></span>
   Le fichier SVG n'a pas de width/height : c'est le CSS qui donne la taille,
   donc la pastille reste nette à toutes les densités d'écran.
   ------------------------------------------------------------------------- */
.pp-jeton {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--pp-jeton-t);
  height: var(--pp-jeton-t);
  vertical-align: -0.2em;                             /* aligné sur le texte */
  background: url("/assets/pp-jeton.svg") center / contain no-repeat;
  user-select: none;
  -webkit-user-drag: none;
}
.pp-jeton--xs { --pp-jeton-t: 16px; }                 /* dans un libellé fin */
.pp-jeton--sm { --pp-jeton-t: 20px; }                 /* inline courant */
.pp-jeton--md { --pp-jeton-t: 28px; }                 /* en-tête de carte */
.pp-jeton--lg { --pp-jeton-t: 44px; }                 /* tuile de solde */
.pp-jeton--xl { --pp-jeton-t: 64px; }                 /* état vide, héros */

/* Montant + jeton : le jeton ne doit jamais se comprimer ni passer à la ligne
   tout seul, et le montant garde des chiffres de largeur fixe. */
.pp-montant {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.pp-montant-valeur { font-weight: 650; letter-spacing: -.01em; white-space: nowrap; }
.pp-montant-unite {
  font-size: .78em;
  font-weight: 600;
  color: var(--texte-dim);
  letter-spacing: .06em;
}

/* --- 3. Boutons pilule ---------------------------------------------------
   `pp-btn` = pilule neutre ; `pp-btn--principal` = dégradé bleu -> violet avec
   flèche qui avance au survol ; `pp-btn--trait` = contour seul, fond
   transparent. Hauteur minimale 44 px partout (cible tactile), 48 px en
   version large.
   ------------------------------------------------------------------------- */
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 44px;
  padding: 0 var(--e5);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .04);
  color: var(--texte);
  font-family: var(--police);
  font-size: var(--t-md);
  font-weight: 550;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans),
              box-shadow var(--trans), transform var(--trans), color var(--trans);
}
.pp-btn:hover { background: rgba(255, 255, 255, .08); transform: translateY(-1px); }
.pp-btn:active { transform: translateY(0); }
.pp-btn:disabled, .pp-btn[disabled], .pp-btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; transform: none;
}

/* Principal : c'est LE bouton des PaperPoints (« Voir mes PaperPoints »,
   « + Gagner des PP »). Le dégradé vient de theme.css. */
.pp-btn--principal {
  border-color: transparent;
  color: #fff;
  background: var(--pp-degrade);
  box-shadow: 0 10px 26px -12px rgba(59, 130, 246, .78);
}
.pp-btn--principal:hover {
  background: var(--pp-degrade-vif);
  box-shadow: 0 14px 30px -12px rgba(139, 92, 246, .8);
}

/* Secondaire au trait : fond de page, contour bleu discret */
.pp-btn--trait {
  background: transparent;
  border-color: var(--ligne-bleue);
  color: var(--bleu-clair);
}
.pp-btn--trait:hover {
  background: rgba(59, 130, 246, .12);
  border-color: var(--bleu);
  color: #fff;
}

/* Tailles */
.pp-btn--large { min-height: 48px; padding: 0 var(--e6); font-size: var(--t-lg); }
.pp-btn--petit { min-height: 38px; padding: 0 var(--e4); font-size: var(--t-sm); }

/* Flèche : avance de 3 px au survol (mouvement réduit respecté plus bas) */
.pp-btn-fleche {
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.05em;
  line-height: 1;
  transition: transform var(--trans);
}
.pp-btn:hover .pp-btn-fleche { transform: translateX(3px); }

/* Petit jeton à l'intérieur d'un bouton */
.pp-btn .pp-jeton { --pp-jeton-t: 20px; vertical-align: 0; }
.pp-btn--large .pp-jeton { --pp-jeton-t: 24px; }

/* Groupe de boutons : passe à la ligne proprement au lieu de déborder */
.pp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
  min-width: 0;
}

/* --- 4. Carte de solde ---------------------------------------------------
   Reprend le vocabulaire des cartes du projet (--r-lg, bordure --ligne,
   fond --degrade-surface + --surface, --ombre-carte).
   ------------------------------------------------------------------------- */
.pp-solde {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  min-width: 0;
  padding: var(--e5);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  background: var(--degrade-surface), var(--surface);
  box-shadow: var(--ombre-carte);
  overflow: hidden;                                   /* la lueur ne déborde pas */
}
/* Nappe bleue discrète en haut à droite : rappelle le jeton sans le copier */
.pp-solde::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 92, 246, .22), transparent 100%);
  pointer-events: none;
}
.pp-solde > * { position: relative; z-index: 1; }

.pp-solde-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-width: 0;
}
.pp-solde-titre {
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texte-faible);
  overflow-wrap: anywhere;                            /* « PAPERPOINTS » tient sur 390 px */
}
.pp-solde-lien {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  color: var(--texte-faible);
  font-size: var(--t-lg);
  text-decoration: none;
  border-radius: var(--r-xs);
  transition: color var(--trans), background var(--trans);
}
.pp-solde-lien:hover { color: #fff; background: rgba(255, 255, 255, .06); }

.pp-solde-corps { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.pp-solde-valeur {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  min-width: 0;
  /* 40 px au plus, 1,9 rem au plus petit : jamais de débordement à 390 px */
  font-size: clamp(1.85rem, 1.1rem + 3.2vw, var(--t-3xl));
  font-weight: 680;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pp-solde-valeur .pp-solde-unite {
  font-size: var(--t-md);
  font-weight: 650;
  color: var(--texte-dim);
  letter-spacing: .04em;
}
.pp-solde-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  min-width: 0;
  font-size: var(--t-sm);
  color: var(--texte-faible);
}

/* Ligne de variation : verte en hausse, corail en baisse */
.pp-solde-var {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--vert-clair);
}
.pp-solde-var--baisse { color: var(--corail-clair); }
.pp-solde-var .pp-fleche { font-size: .9em; line-height: 1; }

/* Mini-courbe : svg en ligne (aucune dépendance), hauteur fixe, jamais déformé */
.pp-courbe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 46px;
  margin: var(--e1) 0;
}
.pp-courbe-trait {
  fill: none;
  stroke: var(--bleu);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pp-courbe-trait--or { stroke: var(--pp-or); }
.pp-courbe-aire { fill: rgba(59, 130, 246, .16); stroke: none; }
.pp-courbe-aire--baisse { fill: rgba(255, 107, 107, .14); }
.pp-courbe--baisse .pp-courbe-trait { stroke: var(--corail); }

/* --- 5. Historique des PaperPoints --------------------------------------
   Grille : date · montant signé · origine · partie/compétition.
   Sous 620 px, chaque ligne devient un bloc empilé (l'origine et la partie
   passent sous le montant) : plus de colonne écrasée, rien hors de l'écran.
   ------------------------------------------------------------------------- */
.pp-hist { display: flex; flex-direction: column; gap: var(--e3); min-width: 0; }
.pp-hist-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
  min-width: 0;
}
.pp-hist-titre {
  margin: 0;
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: .01em;
}
.pp-hist-somme {
  font-size: var(--t-sm);
  color: var(--texte-dim);
  font-variant-numeric: tabular-nums;
}
.pp-hist-liste {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  background: var(--degrade-surface), var(--surface);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
}
.pp-hist-ligne {
  display: grid;
  grid-template-columns: minmax(0, 108px) minmax(0, 96px) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--e3);
  min-height: 52px;
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--ligne);
  font-size: var(--t-sm);
}
.pp-hist-ligne:last-child { border-bottom: 0; }
.pp-hist-ligne:hover { background: rgba(255, 255, 255, .03); }
.pp-hist-ligne > * { min-width: 0; }

/* Ligne cliquable : on enveloppe le contenu de la ligne dans un lien
   (`.pp-hist-lien`) plutôt que de poser le lien sur toute la ligne. Le lien
   prend `display: contents` : ses enfants deviennent directement des cases de
   la grille de la ligne (mêmes colonnes, y compris dans les règles
   responsive) tout en restant cliquables et lus comme un seul lien. */
.pp-hist-lien { display: contents; color: inherit; text-decoration: none; }
.pp-hist-lien:hover { color: var(--texte); }

.pp-hist-date { color: var(--texte-faible); font-variant-numeric: tabular-nums; }
.pp-hist-montant {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--vert-clair);                           /* gain par défaut */
}
.pp-hist-montant--moins { color: var(--corail-clair); }   /* dépense */
.pp-hist-origine {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  padding: 3px 10px;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .05);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texte-dim);
  overflow-wrap: anywhere;
}
.pp-hist-origine--trophee {
  color: var(--pp-or-clair);
  border-color: rgba(251, 191, 36, .38);
  background: rgba(251, 191, 36, .12);
}
.pp-hist-origine--bonus {
  color: var(--violet-clair);
  border-color: rgba(139, 92, 246, .4);
  background: rgba(139, 92, 246, .14);
}
.pp-hist-origine--depense {
  color: var(--corail-clair);
  border-color: rgba(255, 107, 107, .4);
  background: rgba(255, 107, 107, .12);
}
.pp-hist-partie {
  color: var(--texte-dim);
  overflow-wrap: anywhere;
}
.pp-hist-partie .pp-jeton { --pp-jeton-t: 16px; }

/* État vide : même vocabulaire que `.empty` de composants.css, en local */
.pp-vide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e2);
  padding: var(--e5);
  border: 1px dashed var(--ligne-forte);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .02);
  color: var(--texte-dim);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.pp-vide .pp-jeton { --pp-jeton-t: 40px; margin-bottom: var(--e1); }
.pp-vide .pp-vide-titre { color: var(--texte); font-weight: 600; font-size: var(--t-md); }

/* --- 6. Bandeau de récompenses d'une compétition ------------------------- */
.pp-recompenses {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  min-width: 0;
  padding: var(--e5);
  border: 1px solid var(--ligne);
  border-left: 3px solid var(--pp-or);                /* repère « lot à gagner » */
  border-radius: var(--r-lg);
  background: var(--degrade-surface), var(--surface);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
}
.pp-recompenses-tete {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  min-width: 0;
}
.pp-recompenses-tete h3 {
  margin: 0;
  font-size: var(--t-md);
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}
.pp-recompenses-sous { font-size: var(--t-xs); color: var(--texte-faible); }
.pp-recompenses-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e3);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
.pp-recompense {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-width: 0;
  padding: var(--e3) var(--e4);
  border: 1px solid var(--ligne);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .03);
}
.pp-recompense-ecusson {
  flex: 0 0 auto;
  width: 48px;
  height: 60px;
  background: url("/assets/pp-badge.svg") center / contain no-repeat;
}
.pp-recompense-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pp-recompense-rang {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texte);
  overflow-wrap: anywhere;
}
.pp-recompense-gain {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-md);
  font-weight: 650;
  color: var(--pp-or-clair);
  font-variant-numeric: tabular-nums;
}
.pp-recompense-gain .pp-jeton { --pp-jeton-t: 18px; }
.pp-recompense-etat {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ligne-forte);
  background: rgba(255, 255, 255, .05);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--texte-faible);
}
.pp-recompense--obtenue { border-color: rgba(251, 191, 36, .42); background: rgba(251, 191, 36, .07); }
.pp-recompense--obtenue .pp-recompense-etat {
  color: var(--vert-clair);
  border-color: rgba(16, 185, 129, .45);
  background: rgba(16, 185, 129, .16);
}
.pp-recompense--encours { border-color: var(--ligne-bleue); }
.pp-recompense--encours .pp-recompense-etat {
  color: var(--bleu-clair);
  border-color: rgba(59, 130, 246, .45);
  background: rgba(59, 130, 246, .15);
}

/* --- 7. Badge « COMPÉTITION RÉCOMPENSÉE » -------------------------------- */
.pp-badge-recompense {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  max-width: 100%;
  padding: 6px var(--e4) 6px 10px;
  border: 1px solid rgba(251, 191, 36, .45);
  border-radius: var(--r-pill);
  background: linear-gradient(120deg, rgba(251, 191, 36, .16), rgba(139, 92, 246, .16));
  box-shadow: var(--pp-halo-or);
  color: var(--pp-or-clair);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.pp-badge-recompense-ecusson {
  flex: 0 0 auto;
  width: 22px;
  height: 28px;
  background: url("/assets/pp-badge.svg") center / contain no-repeat;
}
.pp-badge-recompense-texte { min-width: 0; overflow-wrap: anywhere; }
.pp-badge-recompense--violet {
  border-color: rgba(139, 92, 246, .45);
  background: linear-gradient(120deg, rgba(139, 92, 246, .18), rgba(59, 130, 246, .16));
  box-shadow: var(--halo-violet);
  color: var(--violet-clair);
}

/* --- 8. Responsive ------------------------------------------------------
   Objectif : rien ne déborde sous 390 px et toutes les cibles tactiles font
   au moins 44 px de haut au doigt.
   ------------------------------------------------------------------------- */

/* Tablette : la ligne d'historique perd sa colonne « origine » trop à l'étroit
   (elle repasse sous le montant) */
@media (max-width: 760px) {
  .pp-hist-ligne {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 6px;
  }
  .pp-hist-date { grid-column: 1; }
  .pp-hist-montant { grid-column: 2; text-align: right; }
  .pp-hist-origine { grid-column: 1 / -1; }
  .pp-hist-partie { grid-column: 1 / -1; }
}

/* Téléphone : cartes empilées, hauteur tactile garantie */
@media (max-width: 620px) {
  .pp-btn { min-height: 46px; width: 100%; }
  /* `width: 100%` seul ne suffit pas : dans un conteneur flex, le groupe de
     boutons se dimensionne d'abord sur son contenu. On lui donne la largeur
     de la colonne pour obtenir de vraies pilules pleine largeur au doigt. */
  .pp-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .pp-solde, .pp-recompenses { padding: var(--e4); }
  .pp-recompenses-liste { grid-template-columns: minmax(0, 1fr); }
  .pp-hist-ligne { min-height: 44px; padding: var(--e3); }
  .pp-recompense { min-height: 56px; }
  .pp-hist-origine { justify-self: start; max-width: 100%; }
}

/* Très petits écrans (iPhone SE, 375 px) : on serre les marges plutôt que de
   laisser un montant ou un libellé pousser la page */
@media (max-width: 390px) {
  .pp-solde, .pp-recompenses { padding: var(--e3); }
  .pp-solde-valeur { font-size: 1.72rem; gap: 6px; }
  .pp-solde-valeur .pp-solde-unite { font-size: var(--t-sm); }
  .pp-btn { padding: 0 var(--e4); font-size: var(--t-sm); }
  .pp-btn--large { padding: 0 var(--e4); font-size: var(--t-md); }
  .pp-badge-recompense { letter-spacing: .06em; padding: 6px 10px; }
  .pp-recompense { flex-wrap: wrap; }
  .pp-recompense-etat { margin-left: 0; }
  .pp-jeton--xl { --pp-jeton-t: 48px; }
  .pp-recompense-ecusson { width: 40px; height: 50px; }
}

/* Très grande largeur : la carte de solde ne s'étire pas indéfiniment */
@media (min-width: 1200px) {
  .pp-solde { max-width: 460px; }
}

/* --- 9. Accessibilité et mouvement -------------------------------------- */
.pp-btn:focus-visible,
.pp-solde-lien:focus-visible,
.pp-badge-recompense:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pp-btn, .pp-btn-fleche, .pp-solde-lien { transition-duration: .001ms !important; }
  .pp-btn:hover, .pp-btn:active { transform: none; }
  .pp-btn:hover .pp-btn-fleche { transform: none; }
}

/* ==========================================================================
   10. Intégration dans les écrans existants (V3.3)
   --------------------------------------------------------------------------
   Ajouts strictement nécessaires pour que le langage PP s'insère dans les
   composants déjà en place (carte de compétition, classement, administration).
   Aucune règle ci-dessous ne modifie un élément existant.
   ========================================================================== */

/* --- Résumé des récompenses sur une carte de compétition ---------------- */
.cp-carte-recompenses {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--e2);
  min-width: 0;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--pp-or-clair);
  overflow-wrap: anywhere;
}
.cp-carte-recompenses .pp-jeton { --pp-jeton-t: 16px; }

/* --- Colonne PaperPoints du classement final ----------------------------- */
.pp-classement-pp {
  color: var(--pp-or-clair);
  font-weight: 650;
  white-space: nowrap;
}

/* --- Panneau des récompenses sur la fiche d'une compétition -------------- */
.pp-recompenses { border-color: rgba(251, 191, 36, .28); }
.pp-recompenses-tete {
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-bottom: var(--e2);
}
.pp-recompenses-tete h3 { flex: 1 1 auto; }
.pp-recompenses-sous {
  margin-bottom: var(--e3);
  font-size: var(--t-sm);
  color: var(--texte-faible);
}

/* --- Administration : formulaire et suivi des compétitions récompensées -- */
.adm-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  margin-bottom: var(--e4);
  font-size: var(--t-sm);
  color: var(--texte-faible);
}
.adm-kpis b { color: var(--texte); font-variant-numeric: tabular-nums; }

.adm-sous-titre {
  margin: var(--e5) 0 var(--e2);
  font-size: var(--t-md);
  font-weight: 600;
}

.adm-form {
  display: grid;
  gap: var(--e4);
  margin: var(--e3) 0 var(--e4);
  padding: var(--e4);
  border: 1px solid var(--ligne-bleue);
  border-radius: var(--r);
  background: rgba(59, 130, 246, .05);
}
.adm-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--e3);
}
.adm-champ { display: grid; gap: 4px; min-width: 0; }
.adm-champ > span { font-size: var(--t-xs); color: var(--texte-faible); }
.adm-input {
  width: 100%;
  min-width: 0;
  padding: 9px var(--e3);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-sm);
  background: rgba(7, 12, 24, .55);
  color: var(--texte);
  font: inherit;
  font-size: var(--t-sm);
}
.adm-input:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }

.adm-marches, .adm-places {
  margin: 0;
  padding: var(--e3);
  border: 1px solid var(--ligne);
  border-radius: var(--r-sm);
}
.adm-marches legend, .adm-places legend {
  padding: 0 6px;
  font-size: var(--t-xs);
  color: var(--texte-faible);
}
.adm-marches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e2);
}
.adm-marche {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: var(--t-sm);
}
.adm-places { display: grid; gap: var(--e3); }
.adm-place {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
  min-width: 0;
}
.adm-place-rang { flex: 0 0 auto; min-width: 34px; font-weight: 650; color: var(--pp-or-clair); }
.adm-place .adm-input { width: 110px; flex: 0 0 auto; }
.adm-place-unite { font-size: var(--t-xs); color: var(--texte-faible); }

.adm-suivi-liste { display: grid; gap: var(--e2); margin: 0; padding: 0; list-style: none; }
.adm-suivi {
  padding: var(--e3);
  border: 1px solid var(--ligne);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .02);
}
.adm-suivi-tete { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.adm-suivi-meta { font-size: var(--t-xs); overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .adm-grille { grid-template-columns: minmax(0, 1fr); }
  .adm-marches { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .pp-recompenses-tete { gap: var(--e2); }
  .pp-recompenses-tete h3 { flex: 1 1 100%; }
}

/* ==========================================================================
   10. LE SOLDE DANS LA BARRE DU HAUT ET SUR LE PROFIL (audit du 16/09)
   --------------------------------------------------------------------------
   Le cahier des charges demande que le solde soit « immédiatement
   compréhensible » et « pas caché profondément dans le menu » : il est donc
   posé à côté du pseudo, cliquable, et rappelé sur le profil public.
   ========================================================================== */

/* --- 10.1 Puce de solde de la barre du haut ----------------------------- */
.pp-compte {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 34px;
  padding: 0 var(--e3) 0 var(--e2);
  border: 1px solid var(--ligne);
  border-radius: var(--r-pill);
  background: rgba(59, 130, 246, .10);
  color: var(--texte);
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--trans), border-color var(--trans);
}
.pp-compte:hover { background: rgba(59, 130, 246, .20); border-color: rgba(96, 165, 250, .45); }
.pp-compte-valeur { font-variant-numeric: tabular-nums; }
.pp-compte-unite { color: var(--texte-dim); font-weight: 500; font-size: var(--t-xs); }

/* --- 10.2 Carte PaperPoints du profil public ---------------------------- */
.pp-profil-corps { display: flex; align-items: flex-start; gap: var(--e4); }
.pp-profil-texte { min-width: 0; }
.pp-profil-titre {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.pp-profil-valeur {
  margin-top: 2px;
  font-size: var(--t-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texte);
}
.pp-profil-unite { font-size: var(--t-md); font-weight: 600; color: var(--texte-dim); }
.pp-profil-note { margin: var(--e2) 0 0; font-size: var(--t-xs); color: var(--texte-faible); }

/* --- 10.3 Écrans étroits : la barre du haut reste utilisable -------------
   Sous 760 px la barre contient déjà la marque, la recherche, la partie
   active et le compte : la puce PP se réduit au jeton + au montant, sans
   jamais passer à la ligne ni pousser la recherche hors de l'écran. */
@media (max-width: 760px) {
  .pp-compte { min-height: 32px; padding: 0 var(--e2); gap: 6px; }
  /* L'unité « PP » reste affichée : sans elle, « 12,84 » pourrait se lire comme
     des euros. La rangée de droite se replie si nécessaire, sans débordement. */
  .pp-compte-unite { font-size: 10.5px; }
  .pp-profil-corps { gap: var(--e3); }
  .pp-profil-valeur { font-size: var(--t-xl); }
}

/* ==========================================================================
   11. EN-TÊTE : PAPERPOINTS ET PROFIL SUR UNE SEULE LIGNE (16/09/2026)
   --------------------------------------------------------------------------
   CAUSE EXACTE DU CHEVAUCHEMENT
   `.account-host` est un simple conteneur bloc (styles.css : `position:
   relative`). La puce PaperPoints est un élément EN LIGNE, `.account` un BLOC :
   les deux s'empilaient donc verticalement — 34 px + 42 px = 76 px de haut pour
   un en-tête de 64 px. La puce sortait du cadre par le haut (mesuré : haut
   -6 px) et donnait l'impression de recouvrir le bloc utilisateur et le badge
   ADMIN, alors qu'ils étaient simplement empilés et débordants.

   CORRECTION : la cellule devient une ligne flex (un seul rang, aligné sur le
   centre), et les largeurs du reste de l'en-tête sont rééquilibrées. Aucun
   élément n'est supprimé, aucune position absolue n'est ajoutée.
   ========================================================================== */
.account-host {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
  position: relative;
}
.account-host > * { flex: 0 0 auto; }

@media (min-width: 1081px) {
  /* Un peu moins d'air entre les blocs, et une recherche qui accepte de céder
     de la largeur sans devenir minuscule ni perdre son placeholder. */
  .appbar { gap: var(--e2); }
  .appbar .search { flex: 1 1 380px; min-width: 260px; max-width: 520px; }
  .appbar .party-host { min-width: 0; }
  .appbar .party-btn { max-width: 320px; }
  /* Le nom se tronque proprement (ellipsis), la valeur ne se coupe JAMAIS en
     deux lignes : c'est ce qui faisait « 10 000,00 / € » sur deux rangs. */
  .appbar .party-btn .pb-name {
    max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .appbar .party-btn .pb-value,
  .appbar .party-btn .pb-label,
  .appbar .party-btn .pb-chevron { white-space: nowrap; flex: 0 0 auto; }
  .appbar .sources { padding: 4px 10px; }
  .appbar .icon-btn { width: 36px; height: 36px; }
  /* Un pseudo très long se tronque proprement au lieu de pousser la rangée :
     le nom complet reste accessible sur la page de profil. */
  .appbar .account-btn .acc-nom { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Entre 1081 et 1500 px, le libellé « PARTIE ACTIVE » et la pastille Ctrl+K
   cèdent la place : le nom de la partie, sa valeur, l'indicateur vert et le
   chevron restent, le raccourci clavier continue de fonctionner, et le champ de
   recherche retrouve de quoi afficher son placeholder en entier. */
@media (min-width: 1081px) and (max-width: 1500px) {
  .appbar .party-btn .pb-label { display: none; }
}
@media (min-width: 761px) and (max-width: 1500px) {
  .appbar .raccourci { display: none; }
  /* La recherche garde sa largeur ; c'est la taille du texte qui s'ajuste d'un
     cran, pour que le placeholder reste lisible EN ENTIER (mesuré : il manquait
     une trentaine de pixels à 1440 px). */
  .appbar .search input[type="search"] {
    padding-left: 36px; padding-right: 16px; font-size: var(--t-sm);
  }
}
/* Sur les largeurs intermédiaires, la recherche se resserre une dernière fois
   plutôt que de tronquer son texte : taille de police un cran en dessous et nom
   de partie plus court. */
@media (min-width: 1081px) and (max-width: 1280px) {
  .appbar .party-btn .pb-name { max-width: 110px; }
  .appbar .search input[type="search"] { font-size: var(--t-sm); }
}

/* En dessous de 1081 px, l'en-tête garde le comportement responsive existant
   (recherche sur sa propre ligne, puis les blocs de droite) ; la puce PP reste
   sur la même ligne que le profil, jamais empilée. */
@media (max-width: 1080px) {
  .account-host { flex-wrap: nowrap; }
}

/* Entre 761 et 1080 px, la rangée de droite peut manquer de place (mesuré :
   17 px de débordement à 768 px, donc une barre de défilement horizontale).
   Elle se replie proprement sur une ligne suivante alignée à droite, comme le
   fait déjà l'en-tête à ces largeurs : rien n'est masqué ni supprimé. */
/* styles.css pose `flex: none` sur cette rangée : elle ne pouvait ni rétrécir
   ni se replier, d'où des débordements (17 px mesurés à 768 px, et jusqu'à une
   barre horizontale à 1280 px avec un pseudo et un nom de partie très longs).
   Elle peut désormais céder de la largeur et se replier sur une ligne suivante,
   alignée à droite : rien n'est masqué, rien n'est supprimé. Le repli ne se
   produit que si le contenu ne tient vraiment plus. */
@media (max-width: 1440px) {
  .appbar-right { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
}

/* ==========================================================================
   12. OUTILS DE TRADING (V3.4)
   --------------------------------------------------------------------------
   Catalogue des outils débloquables avec des PaperPoints, et bloc d'ordres
   automatiques du panneau d'ordre. Deux idées directrices : le prix et l'état
   se lisent d'un coup d'œil, et rien ne bouge quand on ne demande rien.
   ========================================================================== */

.outil-intro { margin: 0 0 14px; max-width: 78ch; color: var(--texte-doux); }

.outil-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.outil-carte {
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--surface);
}
.outil-carte--debloque { border-color: color-mix(in srgb, var(--accent) 45%, var(--bordure)); }

.outil-tete { display: flex; align-items: flex-start; gap: 12px; }
.outil-icone { font-size: 20px; line-height: 1.2; color: var(--accent); }
.outil-titre { flex: 1 1 auto; min-width: 0; }
.outil-titre h3 { margin: 0 0 2px; font-size: 1rem; }
.outil-resume { margin: 0; color: var(--texte-doux); font-size: 0.92rem; }

.outil-etat {
  flex: none; font-size: 0.78rem; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--bordure); color: var(--texte-doux);
}
.outil-etat--ok { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--bordure)); }

.outil-exemple { margin: 10px 0 12px; color: var(--texte-doux); font-size: 0.9rem; }
.outil-pied { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.outil-prix { font-variant-numeric: tabular-nums; font-weight: 600; }
.outil-badge {
  font-size: 0.76rem; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--bordure); color: var(--texte-doux);
}
.outil-badge--ok { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--bordure)); }
.outil-badge--off { opacity: 0.75; }
.outil-pied .pp-btn { margin-left: auto; }
.outil-pied .pp-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* --- bloc « Ordres automatiques » du panneau d'ordre ---------------------- */
.ordres-auto-host { margin-top: 14px; }
.ordres-auto {
  border: 1px solid var(--bordure); border-radius: 14px; padding: 14px 16px;
  background: var(--surface);
}
.ordres-auto--vide p { margin: 8px 0 12px; color: var(--texte-doux); font-size: 0.92rem; }
.ordres-auto-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ordres-auto-tete h3 { margin: 0; font-size: 0.98rem; }
.ordres-auto .chips { margin: 10px 0 6px; flex-wrap: wrap; }
.ordres-auto .field { margin-bottom: 10px; }
.ordres-auto-resume {
  border-top: 1px dashed var(--bordure); margin-top: 10px; padding-top: 10px;
}
.ordres-auto-resume .line { display: flex; gap: 10px; justify-content: space-between; }
.ordres-auto-resume .line b { text-align: right; max-width: 62%; }
.ordres-auto-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }

/* --- liste des ordres en attente ----------------------------------------- */
.ordres-liste { margin-top: 12px; }
.ordres-liste-tete h4 { margin: 0 0 6px; font-size: 0.9rem; color: var(--texte-doux); }
.ordres-liste-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ordre-ligne {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px;
  border: 1px solid var(--bordure); border-radius: 10px; padding: 8px 10px;
  font-size: 0.9rem;
}
.ordre-ligne-nom { font-weight: 600; }
.ordre-ligne-instr { color: var(--texte-doux); font-size: 0.84rem; }
.ordre-ligne-detail { color: var(--texte-doux); overflow-wrap: anywhere; }
.ordre-ligne-etat { color: var(--texte-doux); font-size: 0.82rem; }

@media (max-width: 620px) {
  .ordre-ligne { grid-template-columns: 1fr auto; }
  .ordre-ligne-detail { grid-column: 1 / -1; }
}

/* ==========================================================================
   13. PAGE « MES OUTILS » ET DON ADMINISTRATIF (V3.5)
   --------------------------------------------------------------------------
   Deux écrans qui n'existaient pas : la page qui montre où servent les outils
   débloqués, et le bloc de don côté administration. Règle de lisibilité : sur
   mobile, tout se transforme en cartes empilées — jamais de tableau qui déborde.
   ========================================================================== */

/* --- usages d'un outil (page Mes outils) ---------------------------------- */
.outil-usage-tete {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
.outil-usage-compte { color: var(--texte-doux); font-size: 0.9rem; }
.outil-usage-compte b { color: var(--texte); }

.usage-liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.usage-ligne {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(90px, auto) minmax(0, 1fr) auto auto auto;
  align-items: center; gap: 10px;
  border: 1px solid var(--bordure); border-radius: 10px; padding: 8px 10px; font-size: 0.88rem;
}
.usage-ligne--passee { opacity: 0.72; }
.usage-partie { font-weight: 600; overflow-wrap: anywhere; }
.usage-instrument { color: var(--texte-doux); }
.usage-detail { color: var(--texte-doux); overflow-wrap: anywhere; }
.usage-statut { font-size: 0.8rem; color: var(--texte-doux); }
.usage-statut--actif { color: var(--accent); font-weight: 600; }
.usage-date { font-size: 0.8rem; color: var(--texte-doux); white-space: nowrap; }
.usage-motif { grid-column: 1 / -1; font-size: 0.82rem; color: var(--texte-doux); }
.usage-lien { font-size: 0.82rem; white-space: nowrap; }
.usage-vide { margin: 10px 0 0; color: var(--texte-doux); font-size: 0.9rem; }

/* --- outils verrouillés, visibles dans Marchés --------------------------- */
.outils-verrouilles { margin-top: 12px; border-top: 1px dashed var(--bordure); padding-top: 10px; }
.outils-verrouilles-titre {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texte-doux);
  margin-bottom: 8px;
}
.outils-verrouilles-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.outil-verrou {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  align-items: center; gap: 8px; font-size: 0.86rem;
  border: 1px dashed var(--bordure); border-radius: 10px; padding: 7px 10px;
}
.outil-verrou-icone { opacity: 0.7; }
.outil-verrou-nom { font-weight: 600; }
.outil-verrou-resume { color: var(--texte-doux); overflow-wrap: anywhere; }
.outil-verrou-prix { font-variant-numeric: tabular-nums; color: var(--texte-doux); }
.outil-verrou-lien { white-space: nowrap; }

/* --- bloc « Faire un don de PaperPoints » (administration) ---------------- */
.don-form { display: grid; gap: 12px; margin-bottom: 18px; }
.don-form .field { margin: 0; }
.don-resultats-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.don-resultats-liste .btn { width: 100%; text-align: left; justify-content: flex-start; }
.don-choix {
  border: 1px solid var(--bordure); border-radius: 10px; padding: 9px 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.don-choix--vide { border-style: dashed; }
.don-erreur:not(:empty) {
  border: 1px solid color-mix(in srgb, var(--danger, #c0392b) 45%, var(--bordure));
  border-radius: 10px; padding: 8px 12px; font-size: 0.88rem;
}
.don-confirmation:not(:empty) {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--bordure));
  border-radius: 10px; padding: 10px 12px;
}
.don-actions { display: flex; gap: 10px; justify-content: flex-end; }
.don-succes:not(:empty) {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--bordure));
  border-radius: 10px; padding: 10px 12px; font-size: 0.9rem;
}
.don-audit { border-top: 1px dashed var(--bordure); padding-top: 12px; }
.don-audit-titre {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--texte-doux); margin-bottom: 8px;
}
.don-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.don-ligne {
  display: grid; grid-template-columns: minmax(90px, auto) auto auto minmax(0, 1fr);
  align-items: center; gap: 10px; font-size: 0.86rem;
  border: 1px solid var(--bordure); border-radius: 10px; padding: 7px 10px;
}
.don-ligne-pseudo { font-weight: 600; overflow-wrap: anywhere; }
.don-ligne-montant { color: var(--accent); font-variant-numeric: tabular-nums; }
.don-ligne-date, .don-ligne-libelle { color: var(--texte-doux); }
.don-ligne-libelle { overflow-wrap: anywhere; }

@media (max-width: 620px) {
  .usage-ligne { grid-template-columns: 1fr auto; }
  .usage-detail { grid-column: 1 / -1; }
  .usage-lien { grid-column: 1 / -1; }
  .outil-verrou { grid-template-columns: auto 1fr auto; }
  .outil-verrou-resume { grid-column: 1 / -1; }
  .don-ligne { grid-template-columns: 1fr auto; }
  .don-ligne-libelle { grid-column: 1 / -1; }
}

/* ==========================================================================
   REFONTE UX DES OUTILS DE TRADING (25/09)
   --------------------------------------------------------------------------
   Sélecteur d'outil, configuration par outil (« ce que j'engage » / « la
   condition qui déclenche »), récapitulatif avant validation, fiche
   pédagogique « Comprendre cet outil » et suivi des utilisations.
   Tous les jetons viennent de theme.css : aucune mesure n'est inventée.
   ========================================================================== */

/* --- 1. Sélecteur d'outil ------------------------------------------------ */
.outils-choix {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--e2); margin: var(--e3) 0;
}
.outil-choix {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "ico nom" "ico etat";
  gap: 2px var(--e2); align-items: center; text-align: left;
  min-height: 44px; padding: 9px var(--e3);
  border: 1px solid var(--ligne); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--texte);
  font: inherit; cursor: pointer; transition: var(--trans);
}
.outil-choix:hover { border-color: var(--ligne-forte); background: var(--surface-hover); }
.outil-choix .oc-icone { grid-area: ico; font-size: 18px; line-height: 1; }
.outil-choix .oc-nom { grid-area: nom; font-weight: 600; font-size: var(--t-sm); overflow-wrap: anywhere; }
.outil-choix .oc-etat { grid-area: etat; font-size: var(--t-xs); color: var(--texte-faible); }
.outil-choix .oc-etat--ok { color: var(--vert); }
.outil-choix--actif { border-color: var(--bleu); background: var(--surface-3); box-shadow: var(--halo-bleu); }
.outil-choix--verrou { opacity: .55; cursor: not-allowed; }
.outil-choix--verrou:hover { border-color: var(--ligne); background: var(--surface-2); }

/* --- 2. Fiche de configuration ------------------------------------------- */
.outil-fiche {
  display: flex; flex-direction: column; gap: var(--e3);
  margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--ligne);
}
.outil-fiche-tete { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e2); }
.outil-fiche-tete .outil-titre { flex: 1 1 190px; min-width: 0; }
.outil-fiche-tete h4 { margin: 0 0 2px; font-size: var(--t-md); }
.outil-bloc { display: flex; flex-direction: column; gap: var(--e2); }
.outil-bloc-titre {
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texte-dim);
}
.outil-fiche .field input[type="number"] { min-height: 44px; }

/* --- 3. Récapitulatif avant validation ----------------------------------- */
/* Nom préfixé `outil-recap` (et non `outil-resume`) : `.outil-resume` désigne
   déjà la description courte d'un outil dans une carte, trois cents lignes plus
   haut. Les deux se marchaient dessus et la description héritait du cadre. */
.outil-recap {
  display: flex; flex-direction: column; gap: var(--e2);
  padding: var(--e3); border: 1px dashed var(--ligne-forte); border-radius: var(--r-sm);
  background: rgba(59, 130, 246, .05);
}
.outil-recap-titre {
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texte-dim);
}
.outil-scenario { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--texte); }
.outil-actions { display: flex; flex-wrap: wrap; gap: var(--e2); justify-content: flex-end; }
.outil-actions .btn { min-height: 44px; }
.outil-vide { margin: var(--e2) 0 0; font-size: var(--t-sm); color: var(--texte-dim); }

/* --- 4. Schéma des niveaux (fiche « Comprendre cet outil ») -------------- */
.outil-schema {
  display: flex; flex-direction: column; gap: 2px;
  margin: var(--e3) 0; padding: var(--e3);
  border: 1px solid var(--ligne); border-radius: var(--r-sm); background: var(--surface-2);
}
.os-niv {
  display: grid; grid-template-columns: 14px auto minmax(0, 1fr);
  align-items: center; gap: var(--e2); padding: 5px 0; font-size: var(--t-sm);
}
.os-trait { display: block; width: 14px; height: 2px; border-radius: 2px; background: var(--ligne-forte); }
.os-niv--haut .os-trait { background: var(--vert); }
.os-niv--bas .os-trait { background: var(--corail); }
.os-niv--ref .os-trait { background: var(--bleu); }
.os-niv--haut b { color: var(--vert); }
.os-niv--bas b { color: var(--corail); }
.os-niv--ref b { color: var(--bleu-clair); }
.os-texte { color: var(--texte-dim); }

/* --- 5. Fiche pédagogique ------------------------------------------------ */
.modal-aide { max-width: min(760px, calc(100vw - 24px)); }
.aide-accroche { margin: 2px 0 0; font-size: var(--t-sm); color: var(--texte-dim); }
.aide-outil { display: flex; flex-direction: column; gap: var(--e2); }
.aide-outil h3 { margin: var(--e3) 0 0; font-size: var(--t-md); }
.aide-outil p { margin: 0; line-height: 1.55; color: var(--texte-dim); }
.aide-intro { font-size: var(--t-md); color: var(--texte); }
.aide-deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e4); }
.aide-points { margin: 6px 0 0; padding-left: 18px; line-height: 1.5; color: var(--texte-dim); }
.aide-points--ok li::marker { color: var(--vert); }
.aide-points--limite li::marker { color: var(--corail); }
.aide-exemple {
  padding: var(--e3); border-left: 3px solid var(--bleu); border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--texte);
}
.aide-mention {
  margin-top: var(--e3); padding-top: var(--e3);
  border-top: 1px solid var(--ligne); font-size: var(--t-xs); color: var(--texte-faible);
}

/* --- 6. Mes outils : utilisations et annulation -------------------------- */
.outil-actions-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.outil-utilisations { margin-top: var(--e2); }
.usage-groupe-titre {
  margin: var(--e3) 0 var(--e2); font-size: var(--t-xs); font-weight: 650;
  letter-spacing: .05em; text-transform: uppercase; color: var(--texte-dim);
}
.usage-ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: var(--e2);
}
.usage-principal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--e3); min-width: 0; }
.usage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.usage-motif { grid-column: 1 / -1; }

@media (max-width: 620px) {
  .usage-ligne { grid-template-columns: 1fr; }
  .usage-detail, .usage-lien { grid-column: auto; }
  .outil-actions { justify-content: stretch; }
  .outil-actions .btn { flex: 1 1 auto; }
  .outils-choix { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}

/* ---------------------------------------------------------------------------
   7. Les outils en PLEINE LARGEUR (25/09)
   Sur la fiche d'un instrument, les outils quittaient la colonne de droite :
   ils s'entassaient sur 440 px et laissaient, sous la courbe, une grande zone
   vide que l'œil lisait comme une page cassée. Ils passent maintenant sous le
   graphique et l'achat/vente, sur toute la largeur, en trois colonnes qui
   suivent l'ordre du parcours : je choisis / je règle / je vérifie.
--------------------------------------------------------------------------- */
.instr-outils { margin-top: var(--sp-3); }

/* Pourquoi un stop-loss passe par un achat quand on ne détient rien : la règle
   est écrite noir sur blanc, au lieu d'un outil grisé sans explication. */
.outils-note {
  margin: var(--e3) 0 0; padding: var(--e3) var(--e4);
  border-left: 3px solid var(--bleu); border-radius: var(--r-xs);
  background: rgba(59, 130, 246, .06);
  font-size: var(--t-sm); line-height: 1.55; color: var(--texte-doux);
}
.outils-note b { color: var(--texte); }

.outils-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e4); margin-top: var(--e3); }
.outils-col { display: flex; flex-direction: column; gap: var(--e2); min-width: 0; }
.outils-col-titre {
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texte-dim);
}
/* Dans une colonne, la fiche n'a plus besoin de sa barre de séparation : le
   titre de colonne joue ce rôle. */
.outils-col .outil-fiche { margin-top: 0; padding-top: 0; border-top: 0; }
.outils-col .outils-choix { margin: 0; }

@media (min-width: 700px) and (max-width: 1339px) {
  /* Tablette et bureau étroit : deux colonnes, le récapitulatif passe dessous,
     sur toute la ligne. Trois colonnes exigeraient ~980 px de contenu : à
     1 081 px de fenêtre, la colonne de réglages tombait à 120 px. */
  .outils-corps { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .outils-col--recap { grid-column: 1 / -1; }
}

@media (min-width: 1340px) {
  /* Grand écran : 320 px pour le choix, une colonne souple pour les réglages,
     340 px pour le récapitulatif et le bouton. On remplit la largeur disponible
     sans étirer un champ de saisie sur 1 400 px. */
  .outils-corps { grid-template-columns: 320px minmax(0, 1fr) 340px; align-items: start; }
  /* Les cartes d'outils s'empilent dans cette colonne : sur 320 px, deux cartes
     côte à côte coupaient le statut en deux lignes (« Verrouillé · 75 / PP »). */
  .outils-col--choix .outils-choix { grid-template-columns: minmax(0, 1fr); }
}