/* Categorie « Usage » des Parametres : consommation en tokens.
   Mise en page d'un tableau de bord d'usage (facon Cursor) : barre de
   periode, carte des tokens inclus, indicateurs, graphique, tableau pagine
   des evenements. Cartes sombres a filet fin, petite typographie nette,
   accents violets de Brixall, finitions Apple (retour a l'appui, focus,
   mouvements reduits). Identique sur le logiciel (app.html) et le site
   (index.html) : seuls les jetons de couleur viennent de l'hote, avec des
   valeurs de repli (site.css rebranche plus bas).
   Prefixe .cr- partout ; aucun style de l'hote n'est redefini. */

/* Inter : police web proche de SF (Apple), chiffres a chasse fixe. Chargee
   pour ce composant seul ; la CSP autorise deja Google Fonts. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

.cr {
  --cr-surface: rgba(255, 255, 255, 0.025);
  --cr-surface-haut: rgba(255, 255, 255, 0.045);
  --cr-filet: rgba(255, 255, 255, 0.08);
  --cr-filet-fort: rgba(255, 255, 255, 0.14);
  --cr-texte: var(--txt, #f2f0fb);
  --cr-second: var(--muted, #bdb4da);
  --cr-tertiaire: var(--muted2, #9289b3);
  --cr-violet: var(--v, #8b5cff);
  --cr-violet-clair: var(--v2, #b388ff);
  --cr-vert: var(--ok, #37e0a6);
  --cr-orange: var(--warn, #ffcf5a);
  --cr-rouge: var(--err, #ff6b8b);
  --cr-rayon: 12px;
  --cr-marge: 20px;
  --cr-sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --cr-police: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  display: grid;
  gap: 16px;
  padding-top: 6px;
  color: var(--cr-texte);
  font-family: var(--cr-police);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* .badge et .side-pill imposent un display : l'attribut hidden doit gagner. */
.cr-carte .badge[hidden],
.cr-pastille[hidden],
.cr [hidden] { display: none !important; }

.cr-empile { display: grid; gap: 2px; min-width: 0; }
.cr-droite { flex: none; justify-items: end; text-align: right; }

/* ------------------------------------------------------ barre d'outils */

.cr-outils {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cr-plage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--cr-filet);
  font-size: 13px;
  font-weight: 500;
  color: var(--cr-texte);
}
.cr-plage svg { width: 15px; height: 15px; color: var(--cr-second); }

/* ------------------------------------------------------------- cartes */

.cr-carte-bloc {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: var(--cr-marge);
  border-radius: var(--cr-rayon);
  background: var(--cr-surface);
  box-shadow: inset 0 0 0 1px var(--cr-filet);
}
.cr-carte-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cr-carte-titre {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--cr-texte);
}
.cr-carte-sous {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cr-second);
}

/* ------------------------------------------------------ tokens inclus */

.cr-inclus {
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(255, 255, 255, 0.042), transparent 60%),
    var(--cr-surface);
}
.cr-indice {
  flex: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.056);
  color: var(--cr-violet-clair);
  font-size: 12px;
  font-weight: 600;
}
.cr-inclus-chiffres {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cr-grand {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}
.cr-grand-unite {
  font-size: 0.45em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--cr-second);
}
.cr-reste {
  font-size: 13px;
  font-weight: 500;
  color: var(--cr-second);
}
.cr-inclus-pied {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: -6px;
  font-size: 12.5px;
  color: var(--cr-second);
}

/* La jauge reste violette dans tous les etats : l'etat se lit dans le
   texte et la ligne d'alerte. */
.cr-jauge {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.cr-jauge-plein {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Essai demande le 16 oct. : bleu clair (ancien : violet --cr-violet ->
     --cr-violet-clair, lueur rgba(139, 92, 255, 0.7)). */
  background: linear-gradient(90deg, #38bdf8, #7dd3fc);
  box-shadow: 0 0 16px -4px rgba(56, 189, 248, 0.7);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.7s var(--cr-sortie);
}

/* ------------------------------------------- courbe des tokens restants
   Sous la jauge. Bleu #1e9be6, valide (dataviz) contre les fonds sombres
   du site et du logiciel : bande de luminosite et contraste >= 3:1. Ligne
   de 2 px, voile a ~20 % qui s'efface vers le bas, point de fin de 8 px
   avec anneau couleur du fond, repere vertical en filet. */

.cr-courbe {
  --cr-courbe: #1e9be6;
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--cr-filet);
}
.cr-courbe-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.cr-courbe-titre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.cr-courbe-exemple {
  padding: 1px 7px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 600;
  color: var(--cr-second);
}
.cr-courbe-sous { font-size: 12px; color: var(--cr-tertiaire); }

.cr-courbe-cadre {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 120px auto;
  column-gap: 10px;
  row-gap: 8px;
}
.cr-courbe-zone {
  position: relative;
  outline: none;
  border-top: 1px solid var(--cr-filet);
  border-bottom: 1px solid var(--cr-filet-fort);
  cursor: crosshair;
  touch-action: pan-y;
}
.cr-courbe-zone:focus-visible { box-shadow: 0 0 0 2px var(--cr-violet-clair); border-radius: 4px; }
.cr-courbe-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cr-courbe-arret { stop-color: var(--cr-courbe); }
.cr-courbe-ligne {
  fill: none;
  stroke: var(--cr-courbe);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.1s var(--cr-sortie);
}
.cr-courbe-voile { transition: opacity 0.9s ease 0.25s; }
/* Etat de depart du premier affichage : trace masque, voile transparent. */
.cr-courbe-entree .cr-courbe-ligne { stroke-dashoffset: 1; transition: none; }
.cr-courbe-entree .cr-courbe-voile { opacity: 0; transition: none; }

.cr-courbe-point {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cr-courbe);
  /* Anneau couleur du fond : le point reste net sur la ligne. */
  box-shadow: 0 0 0 2px #242424, 0 0 12px 1px rgba(30, 155, 230, 0.75);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.12s ease-out;
}
.cr-courbe-point.actif { transform: translate(-50%, -50%) scale(1.15); }
.cr-courbe .cr-bulle { top: 0; }

.cr-courbe-repere {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--cr-filet-fort);
  pointer-events: none;
}

.cr-statut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding-top: 14px;
  border-top: 1px solid var(--cr-filet);
}
.cr-statut-point {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cr-orange);
  box-shadow: 0 0 0 4px rgba(255, 207, 90, 0.14);
}
.cr-statut[data-niveau="vide"] .cr-statut-point {
  background: var(--cr-rouge);
  box-shadow: 0 0 0 4px rgba(255, 107, 139, 0.14);
}
.cr-statut-texte {
  flex: 1 1 220px;
  min-width: 0;
  display: grid;
  gap: 2px;
  font-size: 13px;
  line-height: 1.4;
}
.cr-statut-texte b { font-weight: 600; }
.cr-statut-texte span { color: var(--cr-second); }

/* ------------------------------------------ comment fonctionne l'usage */

.cr-aide {
  border-radius: var(--cr-rayon);
  background: var(--cr-surface);
  box-shadow: inset 0 0 0 1px var(--cr-filet);
}
.cr-aide-resume {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px var(--cr-marge);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: var(--cr-rayon);
  -webkit-tap-highlight-color: transparent;
}
.cr-aide-resume::-webkit-details-marker { display: none; }
.cr-aide-resume > span { flex: 1; }
.cr-aide-resume:focus-visible { outline: 2px solid var(--cr-violet-clair); outline-offset: -2px; }
@media (hover: hover) {
  .cr-aide-resume:hover { background: var(--cr-surface-haut); }
}
.cr-aide-icone { flex: none; width: 17px; height: 17px; color: var(--cr-violet-clair); }
.cr-aide-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--cr-tertiaire);
  transition: transform 0.2s var(--cr-sortie);
}
.cr-aide[open] .cr-aide-chevron { transform: rotate(90deg); }
.cr-aide-corps {
  display: grid;
  gap: 12px;
  padding: 0 var(--cr-marge) 16px calc(var(--cr-marge) + 27px);
}
.cr-aide-liste {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cr-aide-liste li {
  position: relative;
  font-size: 13px;
  line-height: 1.55;
  color: var(--cr-second);
}
.cr-aide-liste li::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cr-violet-clair);
}
.cr-aide-lien {
  justify-self: start;
  font-size: 13px;
  font-weight: 600;
  color: var(--cr-violet-clair);
  text-decoration: none;
}
@media (hover: hover) {
  .cr-aide-lien:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* -------------------------------------------------------- indicateurs */

.cr-indicateurs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.cr-indicateur {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  padding: 16px;
  border-radius: var(--cr-rayon);
  background: var(--cr-surface);
  box-shadow: inset 0 0 0 1px var(--cr-filet);
}
.cr-indicateur-libelle {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cr-second);
}
.cr-indicateur-valeur {
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cr-indicateur-unite {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--cr-second);
}
.cr-indicateur-note {
  font-size: 11.5px;
  color: var(--cr-tertiaire);
}

/* ---------------------------------------------------------- graphique
   Histogramme d'une serie (dataviz) : barres de 24 px au plus, bout
   arrondi a 4 px et pied carre sur la ligne de base, 2 px d'ecart, grille
   et axes en filets fins. Couleur validee contre les fonds sombres du site
   et du logiciel (contraste >= 3:1). */

.cr-graphe-total { flex: none; font-size: 12.5px; color: var(--cr-second); }
.cr-graphe-total b {
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--cr-texte);
}

.cr-graphe {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 170px auto;
  column-gap: 10px;
  row-gap: 8px;
}
.cr-graphe-echelle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  margin: -6px 0;
  font-size: 11px;
  color: var(--cr-tertiaire);
}
.cr-graphe-zone {
  position: relative;
  outline: none;
  border-radius: 6px;
}
.cr-graphe-zone:focus-visible { box-shadow: 0 0 0 2px var(--cr-violet-clair); }
.cr-graphe-barres {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  border-top: 1px solid var(--cr-filet);
  border-bottom: 1px solid var(--cr-filet-fort);
}
.cr-colonne {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cr-barre {
  width: 100%;
  max-width: 24px;
  border-radius: 4px 4px 0 0;
  background: #9b72ff;
  transition: background-color 0.12s ease;
}
.cr-barre-nulle { height: 0; }
.cr-colonne.actif .cr-barre { background: #c1a8ff; }
.cr-graphe-axe {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--cr-tertiaire);
}

/* Infobulle : posee en haut du graphique, la valeur d'abord. */
.cr-bulle {
  position: absolute;
  left: 0;
  top: 4px;
  display: grid;
  gap: 1px;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(38, 38, 38, 0.97);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.8), inset 0 0 0 1px var(--cr-filet-fort);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.cr-bulle b { font-size: 13px; font-weight: 650; }
.cr-bulle span { font-size: 11.5px; color: var(--cr-second); }

/* Tableau pour lecteurs d'ecran : present, jamais affiche. */
.cr-invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------- formules superieures */

.cr-liste {
  margin: 0 calc(var(--cr-marge) * -1) calc(var(--cr-marge) * -1);
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--cr-filet);
}
.cr-liste li + li { border-top: 1px solid var(--cr-filet); }
.cr-lien-formule {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--cr-marge);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.cr-lien-formule > .cr-empile:first-child { flex: 1; }
.cr-liste li:last-child .cr-lien-formule { border-radius: 0 0 var(--cr-rayon) var(--cr-rayon); }
@media (hover: hover) {
  .cr-lien-formule:hover { background: var(--cr-surface-haut); }
}
.cr-lien-formule:active { background: rgba(255, 255, 255, 0.07); }
.cr-lien-formule:focus-visible { outline: 2px solid var(--cr-violet-clair); outline-offset: -2px; }
.cr-lien-titre { font-size: 14px; font-weight: 600; white-space: nowrap; }
.cr-lien-sous { font-size: 12.5px; color: var(--cr-second); }
.cr-gain { font-size: 12px; font-weight: 600; color: var(--cr-vert); white-space: nowrap; }
.cr-chevron { flex: none; width: 16px; height: 16px; color: var(--cr-tertiaire); }

/* ----------------------------------------------------------- recharge */

.cr-recharge-corps { display: grid; gap: 18px; }

.cr-apercu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cr-filet);
}
.cr-apercu-tokens {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.cr-payer { min-height: 42px; padding: 0 22px; font-size: 14px; }

.cr-securite {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 0;
  font-size: 12px;
  color: var(--cr-tertiaire);
}
.cr-securite svg { flex: none; width: 13px; height: 13px; }

.cr-message { margin: 0; font-size: 13px; color: var(--cr-second); }
.cr-message[data-ton="err"] { color: var(--cr-rouge); }

/* Curseur : rail violet rempli jusqu'au pouce (--cr-rempli, pose en JS).
   Prefixe .cr input : le site pose une regle globale input[type="range"]
   (fond en degrade, ombre) qui l'emporterait sur une simple classe. */
.cr input.cr-curseur {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
  cursor: pointer;
  --cr-rempli: 0%;
}
.cr input.cr-curseur:focus,
.cr input.cr-curseur:hover { background: transparent; box-shadow: none; }
.cr input.cr-curseur::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cr-violet) var(--cr-rempli), rgba(255, 255, 255, 0.1) var(--cr-rempli));
}
.cr input.cr-curseur::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cr-violet) var(--cr-rempli), rgba(255, 255, 255, 0.1) var(--cr-rempli));
}
.cr input.cr-curseur::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease-out;
}
.cr input.cr-curseur::-webkit-slider-thumb:hover { transform: none; }
.cr input.cr-curseur:active::-webkit-slider-thumb { transform: scale(1.1); }
.cr input.cr-curseur::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}
.cr input.cr-curseur:focus-visible { outline: none; }
.cr input.cr-curseur:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(179, 136, 255, 0.6); }
.cr input.cr-curseur:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(179, 136, 255, 0.6); }

/* ------------------------------------------------------ packs de tokens
   Tuiles a choix unique (un quart, la moitie, le maximum, tout le reste),
   apercu et paiement comme l'ancienne recharge. */

.cr-packs-plafond { display: grid; gap: 8px; }
.cr-packs-ligne {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--cr-second);
}
.cr-packs-ligne b { font-weight: 600; color: var(--cr-texte); }
.cr-packs-barre {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.cr-packs-barre-plein {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--cr-violet-clair);
  transform-origin: left center;
}

.cr-packs-liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
}
.cr-pack {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px 15px;
  border: 0;
  border-radius: 10px;
  background: var(--cr-surface);
  box-shadow: inset 0 0 0 1px var(--cr-filet-fort);
  color: var(--cr-texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.cr-pack-tete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.cr-pack-part {
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: var(--cr-second);
}
/* Pastille radio : anneau, puis point violet au choix. */
.cr-pack-coche {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--cr-filet-fort);
  transition: box-shadow 0.15s ease;
}
.cr-pack-tokens {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}
/* Le nombre ne se coupe pas (espace insecable d'Intl) ; « tokens » passe a
   la ligne dans une tuile etroite. */
.cr-pack-tokens small {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--cr-second);
}
.cr-pack-prix { font-size: 13.5px; font-weight: 600; color: var(--cr-texte); }

.cr-pack[aria-checked="true"] {
  background: rgba(139, 92, 255, 0.1);
  box-shadow: inset 0 0 0 1.5px var(--cr-violet-clair);
}
.cr-pack[aria-checked="true"] .cr-pack-coche { box-shadow: inset 0 0 0 5px var(--cr-violet-clair); }
.cr-pack[aria-checked="true"] .cr-pack-prix { color: var(--cr-violet-clair); }
@media (hover: hover) {
  .cr-pack:not([aria-disabled="true"]):not([aria-checked="true"]):hover { background: var(--cr-surface-haut); }
}
.cr-pack:not([aria-disabled="true"]):active { transform: scale(0.98); }
.cr-pack:focus-visible { outline: 2px solid var(--cr-violet-clair); outline-offset: 2px; }
.cr-pack[aria-disabled="true"] { cursor: default; opacity: 0.45; }
.cr-pack[aria-disabled="true"] .cr-pack-coche { visibility: hidden; }

.cr-packs-limite {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--cr-surface-haut);
  font-size: 13px;
  color: var(--cr-second);
}
.cr-packs-limite b { font-weight: 600; color: var(--cr-texte); }

/* ------------------------------------------------- tableau d'evenements */

.cr-tableau-outils {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Le tableau occupe toute la largeur de sa carte, filets compris. */
.cr-tableau-conteneur {
  margin: 0 calc(var(--cr-marge) * -1);
  overflow-x: auto;
  border-top: 1px solid var(--cr-filet);
}
.cr-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.cr-tableau th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--cr-filet);
  font-size: 12px;
  font-weight: 500;
  color: var(--cr-second);
  text-align: left;
  white-space: nowrap;
}
.cr-tableau td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--cr-filet);
  vertical-align: middle;
}
.cr-tableau tbody tr:last-child td { border-bottom: 0; }
.cr-tableau th:first-child,
.cr-tableau td:first-child { padding-left: var(--cr-marge); }
.cr-tableau th:last-child,
.cr-tableau td:last-child { padding-right: var(--cr-marge); }
@media (hover: hover) {
  .cr-tableau tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
}
.cr-col-date { color: var(--cr-second); white-space: nowrap; }
.cr-col-detail { width: 100%; min-width: 160px; }
.cr-tableau th.cr-col-nombre,
.cr-col-nombre { text-align: right; white-space: nowrap; }
.cr-col-tokens { font-weight: 600; }
tr[data-sens="plus"] .cr-col-tokens { color: var(--cr-vert); }
.cr-col-reste { color: var(--cr-second); }

/* Etiquette de type, sobre. */
.cr-pilule {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--cr-second);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.cr-pilule[data-type="achat"],
.cr-pilule[data-type="formule"] { background: rgba(139, 92, 255, 0.16); color: var(--cr-violet-clair); }
.cr-pilule[data-type="remboursement"] { background: rgba(55, 224, 166, 0.12); color: var(--cr-vert); }
.cr-pilule[data-type="ajustement"] { background: rgba(255, 207, 90, 0.12); color: var(--cr-orange); }

.cr-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -4px calc(var(--cr-marge) * -1) calc(var(--cr-marge) * -1);
  padding: 12px var(--cr-marge);
  border-top: 1px solid var(--cr-filet);
  font-size: 12.5px;
  color: var(--cr-second);
}
.cr-pagination-boutons { display: flex; gap: 6px; }

/* ------------------------------------------------------------ boutons */

.cr-bouton {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: rgba(139, 92, 255, 0.16);
  color: var(--cr-violet-clair);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.cr-bouton svg { width: 14px; height: 14px; }
.cr-bouton-plein {
  border-radius: 10px;
  background: linear-gradient(180deg, #9b6bff, #7c3aed);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(124, 58, 237, 0.9);
}
.cr-bouton-discret {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--cr-filet-fort);
  color: var(--cr-texte);
}
@media (hover: hover) {
  .cr-bouton:hover { background: rgba(139, 92, 255, 0.24); }
  .cr-bouton-plein:hover { background: linear-gradient(180deg, #a77bff, #8447f0); }
  .cr-bouton-discret:hover { background: var(--cr-surface-haut); }
}
/* Retour immediat a l'appui, pas au relachement. */
.cr-bouton:active { transform: scale(0.97); }
.cr-bouton:disabled { opacity: 0.5; cursor: default; }

.cr-bouton-icone {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--cr-filet-fort);
  color: var(--cr-texte);
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.1s ease-out;
}
.cr-bouton-icone svg { width: 15px; height: 15px; }
@media (hover: hover) {
  .cr-bouton-icone:not(:disabled):hover { background: var(--cr-surface-haut); }
}
.cr-bouton-icone:active { transform: scale(0.94); }
.cr-bouton-icone:disabled { opacity: 0.35; cursor: default; }

.cr-bouton:focus-visible,
.cr-bouton-icone:focus-visible,
.cr-segment:focus-visible {
  outline: 2px solid var(--cr-violet-clair);
  outline-offset: 2px;
}

/* Commande segmentee (periode, filtre, montants). */
.cr-segments {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
}
.cr-recharge .cr-segments { display: flex; }
.cr-segment {
  flex: 1;
  min-height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--cr-second);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.cr-segment.actif {
  background: rgba(255, 255, 255, 0.12);
  color: var(--cr-texte);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
@media (hover: hover) {
  .cr-segment:not(.actif):hover { color: var(--cr-texte); }
}
.cr-segment:active { transform: scale(0.97); }
.cr-recharge .cr-segment { min-height: 32px; font-size: 13px; }

/* ----------------------------------------------- bandeau et etats vides */

.cr-bandeau {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  border-radius: var(--cr-rayon);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 13px;
  line-height: 1.45;
}
.cr-bandeau[data-ton="ok"] {
  background: rgba(55, 224, 166, 0.08);
  box-shadow: inset 0 0 0 1px rgba(55, 224, 166, 0.3);
}
.cr-bandeau b { font-size: 13.5px; font-weight: 600; }
.cr-bandeau span { color: var(--cr-second); }
.cr-bandeau > .cr-empile { flex: 1; }
.cr-bandeau-icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(139, 92, 255, 0.2);
  color: var(--cr-violet-clair);
}
.cr-bandeau[data-ton="ok"] .cr-bandeau-icone { background: rgba(55, 224, 166, 0.18); color: var(--cr-vert); }
.cr-bandeau-icone svg { width: 15px; height: 15px; }
.cr-fermer {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cr-second);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
@media (hover: hover) {
  .cr-fermer:hover { background: rgba(255, 255, 255, 0.08); }
}

.cr-vide {
  margin: 0;
  padding: 26px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 13.5px;
  color: var(--cr-second);
  text-align: center;
}

/* ------------------------------------------------------- petits ecrans */

@media (max-width: 900px) {
  .cr-indicateurs { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .cr { --cr-marge: 16px; gap: 12px; }
  .cr-packs-liste { grid-template-columns: 1fr 1fr; }
  .cr-pack-tokens small { display: block; margin-top: 2px; line-height: 1.2; }
  .cr-outils .cr-segments { margin-left: auto; }
  .cr-graphe { grid-template-rows: 140px auto; }
  .cr-courbe-cadre { grid-template-rows: 100px auto; }
  .cr-graphe-barres { gap: 1px; }
  .cr-apercu { flex-wrap: wrap; }
  .cr-payer { flex: 1 1 100%; }
  .cr-tableau-outils { width: 100%; justify-content: space-between; }

  /* Le tableau devient une liste : une rangee par evenement. */
  .cr-tableau thead { display: none; }
  .cr-tableau,
  .cr-tableau tbody { display: block; }
  .cr-tableau tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "detail tokens" "meta reste";
    gap: 4px 12px;
    padding: 12px var(--cr-marge);
    border-bottom: 1px solid var(--cr-filet);
  }
  .cr-tableau tbody tr:last-child { border-bottom: 0; }
  .cr-tableau td { padding: 0 !important; border: 0; }
  .cr-tableau .cr-col-detail { grid-area: detail; min-width: 0; }
  .cr-tableau .cr-col-tokens { grid-area: tokens; }
  .cr-tableau .cr-col-reste { grid-area: reste; font-size: 12px; }
  .cr-tableau .cr-col-date { grid-area: meta; font-size: 12px; }
  .cr-tableau .cr-col-type { display: none; }
}

@media (pointer: coarse) {
  .cr-bouton, .cr-segment { min-height: 40px; }
  .cr-bouton-icone { width: 40px; height: 40px; }
}

/* ---------------------------------------------------- accessibilite */

@media (prefers-reduced-motion: reduce) {
  .cr-jauge-plein, .cr-bouton, .cr-bouton-icone, .cr-segment, .cr-barre, .cr-lien-formule, .cr-aide-chevron,
  .cr-courbe-ligne, .cr-courbe-voile, .cr-courbe-point, .cr-pack, .cr-pack-coche { transition: none; }
  .cr-bouton:active, .cr-bouton-icone:active, .cr-segment:active, .cr-pack:active { transform: none; }
  .cr input.cr-curseur:active::-webkit-slider-thumb { transform: none; }
}

@media (prefers-contrast: more) {
  .cr {
    --cr-filet: rgba(255, 255, 255, 0.3);
    --cr-second: var(--cr-texte);
  }
}

/* ------------------------------------------------------- hote : site
   Sur le site (index.html, onglet Usage des Parametres), les jetons portent
   d'autres noms (site.css) : on les rebranche ici. */

.cr-site {
  --txt: var(--text);
  --muted2: var(--muted-2);
  --v: var(--v-400);
  --v2: var(--v-300);
}

/* Le site n'a pas de badge « erreur » : celui de la limite atteinte. */
.cr-carte .badge.soft.err {
  color: var(--err);
  border-color: rgba(251, 113, 133, 0.4);
  background: rgba(251, 113, 133, 0.1);
}

/* Pastille « ! » de l'onglet Usage quand l'usage est eleve. */
.set-tab .cr-pastille {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--warn);
  color: #1a1033;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  vertical-align: 1px;
}