/* Le crédit prépayé (12/11/2026, dossier/41 ; refait le 13/11 : « une interface agréable et facile à comprendre ») :
   l'écran Crédit (le solde, la scène « à quoi sert le crédit », les recharges, les prix, les mouvements) et la carte
   enregistrée. La fenêtre de recharge, la fenêtre du relevé à la demande, le réglage de Claude et les bandeaux :
   credit-gestes.css. Thème « Noir », jetons de tokens.css ; aucun débordement à 320 px. Le mouvement n'emploie que
   `transform` et `opacity` ; la scène de tête boucle lentement (13/11 : « plus motions graphics […] sans être trop
   lourd »). Il est coupé sous prefers-reduced-motion (app.css), et l'état de repos de chaque règle est l'état final : rien ne dépend d'une animation pour être lu. */

/* --- Le solde, sa réserve, et la scène : le crédit part, un relevé glisse vers les IA, chacune répond (13/11/2026) --- */
.carte.credit-heros { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 0; overflow: hidden; isolation: isolate; }
/* Une lueur bleue derrière le solde : l'atmosphère de l'écran, posée une fois. */
.carte.credit-heros::before {
  content: ""; position: absolute; z-index: -1; left: -120px; top: -160px; width: 520px; height: 420px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--bleu-voile), transparent); opacity: 0.9; pointer-events: none; animation: credit-fondu 900ms var(--courbe) both;
}
.credit-solde-bloc { display: grid; align-content: center; justify-items: start; gap: 12px; min-width: 0; padding: 34px 28px 34px 32px; }
.credit-solde-bloc .etiquette { margin: 0; }
.credit-solde-nom { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.credit-solde {
  display: flex; align-items: center; margin: 0;
  font-size: clamp(3.25rem, 2.3rem + 3.2vw, 5.25rem); line-height: var(--interligne-chiffre); font-weight: var(--graisse-moyenne);
  letter-spacing: var(--approche-heros); font-variant-numeric: tabular-nums; font-feature-settings: "tnum", "cv11"; color: var(--encre);
}
.credit-solde-montant { position: relative; display: inline-flex; align-items: baseline; white-space: pre; }
.credit-solde-nombre { display: inline-block; transform-origin: 0 60%; }
.credit-solde-devise { font-size: 0.48em; letter-spacing: 0; color: var(--encre-2); }
/* « + 26,00 € » : le crédit qui vient d'arriver, posé un instant à côté du nom du solde. */
.credit-gain {
  padding: 3px 10px; border-radius: var(--rayon-pilule); background: var(--mieux-fond); color: var(--mieux);
  font-size: 14px; font-weight: var(--graisse-moyenne); line-height: 1.3; letter-spacing: 0; white-space: nowrap; transform-origin: 0 50%; animation: credit-gain 5200ms var(--courbe) both;
}
.credit-gain[hidden] { display: none; }
/* La réserve : dix cases, une par usage ; elles se remplissent l'une après l'autre à l'arrivée et après une recharge. */
.credit-couvre { display: grid; gap: 8px; width: 100%; max-width: 340px; }
.credit-couvre:empty { display: none; }
.credit-reserve { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.credit-reserve-case { position: relative; display: block; height: 8px; border-radius: 3px; background: var(--voile-3); overflow: hidden; }
.credit-reserve-case::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, var(--bleu), var(--bleu-clair));
  transform: scaleX(var(--part)); transform-origin: 0 50%; animation: credit-case 520ms var(--expo) calc(260ms + var(--i) * 55ms) backwards;
}
.credit-reserve-case[data-plein="true"]::before { box-shadow: var(--lueur-point); }
.credit-reserve[data-vide="true"] .credit-reserve-case::before { background: var(--attention); }
.credit-couvre-texte { margin: 0; font-size: 14px; line-height: 1.45; color: var(--encre-2); text-wrap: pretty; }
.credit-couvre-texte.manque { color: var(--attention); font-weight: var(--graisse-moyenne); }
.credit-solde-bas { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 10px; border-radius: var(--rayon-pilule); background: var(--attention-fond); font-size: var(--taille-petit); line-height: 1.4; color: var(--attention); }
.credit-solde-bas[hidden] { display: none; }
.credit-solde-bas .ic { width: 14px; height: 14px; }
.credit-solde-action { display: none; margin-top: 4px; gap: 8px; }
.credit-solde-action .ic { width: 16px; height: 16px; }

.credit-scene { --retrait: 32px; position: relative; display: grid; align-content: center; gap: 18px; min-width: 0; padding: 30px 28px 30px var(--retrait); }
/* La barre : la frontière entre le solde et ce qu'il achète. */
.credit-scene::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--bleu) 22%, var(--bleu-clair) 55%, transparent);
  box-shadow: var(--lueur); transform-origin: 50% 0; animation: credit-barre 600ms var(--expo) 200ms backwards;
}
.credit-scene-titre { font-size: var(--taille-h3); line-height: 1.3; letter-spacing: var(--approche-h3); color: var(--encre); }
.credit-scene-pied { margin: 0; max-width: 58ch; font-size: var(--taille-petit); line-height: 1.5; color: var(--encre-2); text-wrap: pretty; }

/* --- La scène de tête (13/11/2026, relecture : « une vraie petite histoire en boucle ») ---
   Neuf secondes, sans texte à lire : le crédit bat (1), une fiche « Relevé » file vers les IA (2), les IA s'allument
   l'une après l'autre, Claude en dernier avec son halo corail (3), des réponses apparaissent où un nom de marque est
   surligné (4), un résultat se pose : des barres montent, la pastille « Résultats prêts » (5). `transform` et `opacity`
   seulement. L'état de repos de chaque règle est la composition finale : sans mouvement, tout est posé. */
.cs-scene {
  --boucle: 9s;
  display: grid; grid-template-columns: auto minmax(48px, 1fr) auto; grid-template-areas: "piece piste ia" "reponses reponses resultat";
  align-items: center; gap: 22px 14px; min-height: 204px; padding: 30px 0 6px;
}
.cs-piece {
  grid-area: piece; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--bleu-voile); border: 1px solid var(--bleu-trait); color: var(--bleu-clair); box-shadow: var(--lueur);
  animation: cs-battre var(--boucle) var(--courbe) infinite;
}
.cs-piece .ic { width: 22px; height: 22px; }
.cs-piste { grid-area: piste; position: relative; height: 2px; border-radius: var(--rayon-pilule); background: var(--faisceau); }
/* Un grain : son cadre couvre la piste, le point est à son bout ; glisser le cadre de -100 % à 0 mène le point d'un bout à l'autre. */
.cs-grain { position: absolute; inset: 0; transform: translateX(calc(-85% + var(--g) * 30%)); animation: cs-grain 2250ms linear calc(var(--g) * -750ms) infinite; }
.cs-grain i { position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--bleu-clair); box-shadow: var(--lueur-point); }
.cs-depart { position: absolute; inset: 0; transform: translateX(-40%); animation: cs-part var(--boucle) var(--expo) infinite; }
.cs-fiche {
  position: absolute; right: 0; bottom: 12px; display: grid; gap: 4px; width: 80px; padding: 7px 9px 8px; border-radius: var(--rayon-2);
  background: var(--panneau-3); border: 1px solid var(--trait-fort); box-shadow: var(--ombre-flottante);
}
.cs-fiche-tete { display: flex; align-items: center; gap: 5px; font-size: 11px; line-height: 1.2; color: var(--encre); }
.cs-fiche-tete .ic { width: 12px; height: 12px; color: var(--bleu-clair); }
.cs-fiche-tete b { font-weight: var(--graisse-moyenne); }
.cs-fiche-ligne { display: block; height: 3px; width: calc(100% - var(--l) * 18%); border-radius: var(--rayon-pilule); background: var(--voile-4); }

/* Les IA : chacune s'allume à son tour (`--k`), puis Claude, plus grand, cerclé de corail. */
.cs-ia { grid-area: ia; display: inline-flex; align-items: center; gap: 8px; }
.cs-ia-offre { display: inline-flex; align-items: center; }
.cs-ia .ia-jeton { position: relative; width: 36px; height: 36px; box-shadow: 0 0 0 2px var(--panneau-2); animation: cs-allume var(--boucle) var(--expo) calc(var(--k) * 260ms) infinite backwards; }
.cs-ia-offre .ia-jeton + .ia-jeton { margin-left: -8px; }
.cs-ia .ia-jeton img { width: 20px; height: 20px; }
.cs-ia-plus { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--voile-3); color: var(--encre-2); }
.cs-ia-plus .ic { width: 11px; height: 11px; stroke-width: 2; }
.cs-ia .ia-jeton.cs-claude { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--panneau-2), 0 0 0 4px color-mix(in srgb, var(--teinte-claude) 55%, transparent); }
.cs-ia .ia-jeton.cs-claude img { width: 27px; height: 27px; }
.cs-claude::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--teinte-claude); opacity: 0.5;
  animation: cs-halo var(--boucle) var(--courbe) calc(var(--k) * 260ms) infinite backwards;
}
.cs-ia[data-claude="false"] .cs-claude, .cs-ia[data-claude="false"] .cs-ia-plus { opacity: 0.38; filter: grayscale(1); }

/* Les réponses : trois bulles, chacune au logo de l'IA qui répond, une marque surlignée en bleu dans le texte. */
.cs-reponses { grid-area: reponses; display: flex; align-items: flex-end; gap: 10px; min-width: 0; }
.cs-bulle {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 7px; flex: 1 1 0; min-width: 0; max-width: 150px;
  padding: 9px 10px; border-radius: 12px 12px 12px 4px; background: var(--voile-2); border: 1px solid var(--trait);
  transform-origin: 0 100%; animation: cs-bulle var(--boucle) var(--expo) calc(var(--b) * 300ms) infinite backwards;
}
.cs-bulle .ia-jeton { width: 20px; height: 20px; box-shadow: none; }
.cs-bulle .ia-jeton img { width: 12px; height: 12px; }
.cs-bulle-texte { display: grid; gap: 5px; padding-top: 3px; }
.cs-bulle-texte i { display: block; height: 4px; border-radius: var(--rayon-pilule); background: var(--voile-4); }
.cs-bulle-texte i:nth-child(2) { width: 82%; }
.cs-bulle-texte i:nth-child(3) { width: 58%; }
.cs-bulle-texte .cs-marque { position: relative; width: 70%; height: 8px; margin: -1px 0; background: var(--voile-4); }
.cs-marque::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bleu); box-shadow: var(--lueur-point);
  transform-origin: 0 50%; animation: cs-surligne var(--boucle) var(--expo) calc(var(--b) * 300ms) infinite backwards;
}

/* Le résultat : des barres qui montent, puis la pastille « Résultats prêts ». */
.cs-resultat {
  grid-area: resultat; display: grid; gap: 8px; justify-items: start; padding: 10px 12px; border-radius: var(--rayon-3);
  background: var(--panneau-3); border: 1px solid var(--trait-fort); box-shadow: var(--ombre-flottante);
  animation: cs-resultat var(--boucle) var(--expo) infinite backwards;
}
.cs-barres { display: flex; align-items: flex-end; gap: 5px; height: 44px; }
.cs-barres i {
  display: block; width: 12px; height: calc(var(--h) * 1%); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--bleu-clair), var(--bleu));
  transform-origin: 50% 100%; animation: cs-barre var(--boucle) var(--expo) calc(var(--i) * 120ms) infinite backwards;
}
.cs-barres i:last-child { background: linear-gradient(180deg, var(--mieux), var(--bleu)); }
.cs-pret {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 4px; border-radius: var(--rayon-pilule); background: var(--mieux-fond);
  color: var(--mieux); font-size: 11px; font-weight: var(--graisse-moyenne); line-height: 1.5; white-space: nowrap;
  transform-origin: 0 50%; animation: cs-pret var(--boucle) var(--expo) infinite backwards;
}
.cs-pret .ic { width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: var(--mieux); color: var(--encre-inverse); stroke-width: 3; }

/* Hors de l'écran, la boucle s'arrête (credit-scene.js) : rien ne tourne pour personne. */
.cs-scene.en-pause, .cs-scene.en-pause *, .cs-scene.en-pause *::after { animation-play-state: paused; }
@keyframes cs-battre { 0%, 100% { transform: none; } 3% { transform: scale(1.12); } 8% { transform: none; } }
@keyframes cs-grain { 0% { transform: translateX(-100%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes cs-part { 0% { transform: translateX(-100%); opacity: 0; } 5% { opacity: 1; } 28% { transform: translateX(0); opacity: 1; } 34% { transform: translateX(0) scale(0.9); opacity: 0; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes cs-allume { 0%, 28% { opacity: 0.32; transform: scale(0.88); } 33% { opacity: 1; transform: scale(1.14); } 38% { transform: none; } 93% { opacity: 1; transform: none; } 100% { opacity: 0.32; transform: scale(0.88); } }
@keyframes cs-halo { 0%, 31% { opacity: 0; transform: scale(0.8); } 36% { opacity: 1; transform: scale(1); } 55% { opacity: 0.5; transform: scale(1.06); } 93% { opacity: 0.5; transform: none; } 100% { opacity: 0; transform: scale(0.8); } }
@keyframes cs-bulle { 0%, 44% { opacity: 0; transform: translateY(10px) scale(0.86); } 50% { opacity: 1; transform: none; } 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(4px); } }
@keyframes cs-surligne { 0%, 52% { opacity: 0; transform: scaleX(0.15); } 58% { opacity: 1; transform: none; } 93% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes cs-resultat { 0%, 62% { opacity: 0; transform: translateY(10px); } 68% { opacity: 1; transform: none; } 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(4px); } }
@keyframes cs-barre { 0%, 66% { transform: scaleY(0.08); } 76% { transform: none; } 93% { transform: none; } 100% { transform: scaleY(0.08); } }
@keyframes cs-pret { 0%, 78% { opacity: 0; transform: scale(0.6); } 83% { opacity: 1; transform: scale(1.08); } 86% { transform: none; } 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(0.9); } }

@media (max-width: 420px) {
  /* Un téléphone : la même histoire, plus petite ; deux réponses au lieu de trois. */
  .cs-scene { gap: 16px 8px; min-height: 0; padding-top: 26px; }
  .cs-piece { width: 40px; height: 40px; }
  .cs-piece .ic { width: 18px; height: 18px; }
  .cs-fiche { width: 62px; padding: 6px 7px; bottom: 10px; }
  .cs-fiche-tete { font-size: 10px; }
  .cs-ia { gap: 5px; }
  .cs-ia .ia-jeton { width: 28px; height: 28px; }
  .cs-ia .ia-jeton img { width: 16px; height: 16px; }
  .cs-ia .ia-jeton.cs-claude { width: 36px; height: 36px; }
  .cs-ia .ia-jeton.cs-claude img { width: 22px; height: 22px; }
  .cs-ia-plus { width: 14px; height: 14px; }
  .cs-ia-plus .ic { width: 9px; height: 9px; }
  .cs-bulle:nth-child(3) { display: none; }
  .cs-resultat { padding: 8px 10px; }
  .cs-barres { height: 34px; gap: 4px; }
  .cs-barres i { width: 9px; }
}

/* Les deux usages, écrits : côte à côte sous le décor. */
.credit-usages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.credit-usage { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 12px 14px; border-radius: var(--rayon-3); border: 1px solid var(--trait); background: var(--voile-1); }
.credit-usage-dessin { display: inline-flex; align-items: center; flex: none; padding-top: 1px; }
.credit-usage-dessin .ia-jeton { width: 26px; height: 26px; box-shadow: 0 0 0 2px var(--panneau-2); }
.credit-usage-dessin .ia-jeton + .ia-jeton { margin-left: -7px; }
.credit-usage-dessin .ia-jeton img { width: 15px; height: 15px; }
.credit-usage-texte { display: grid; gap: 1px; min-width: 0; }
.credit-usage-texte b { font-size: 15px; line-height: 1.35; font-weight: var(--graisse-moyenne); color: var(--encre); text-wrap: balance; }
.credit-usage-texte span { font-size: var(--taille-petit); line-height: 1.4; color: var(--encre-2); }
/* Un usage que la formule n'ouvre pas : il reste dit, son dessin s'estompe. */
.credit-usage[data-ouvert="false"] .credit-usage-dessin { opacity: 0.34; filter: grayscale(1); }
/* Réutilisés par le réglage de Claude (credit-gestes.css). */
.credit-usage-plus { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--voile-3); color: var(--encre-2); }
.credit-usage-plus .ic { width: 12px; height: 12px; stroke-width: 2; }
@keyframes credit-barre { from { transform: scaleY(0); opacity: 0; } }
@keyframes credit-case { from { transform: scaleX(0); } }
@keyframes credit-fondu { from { opacity: 0; } }
@keyframes credit-gain { 0% { opacity: 0; transform: translateY(8px) scale(0.9); } 6% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }

/* --- Le retour de la page de paiement --- */
.credit-statut:empty { display: none; }
.credit-statut { margin-bottom: 14px; }
.note.credit-retour { display: flex; align-items: center; gap: 12px; }

/* --- Les recharges : cinq montants, puis le moyen de paiement qui sera débité --- */
.credit-montants { list-style: none; margin: 0; padding: 10px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 10px; }
.credit-montants > li { display: flex; min-width: 0; }
.credit-montant {
  position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; min-height: 108px; padding: 16px 16px 14px;
  border-radius: var(--rayon-4); border: 1px solid var(--trait); background: var(--voile-1); box-shadow: var(--trait-lumiere);
  color: var(--encre); font: inherit; text-align: left;
}
button.credit-montant { cursor: pointer; transition: transform var(--duree-normale) var(--expo); }
/* Survol et focus : la lumière bleue monte sous le contenu (opacité seule), le montant se soulève. */
button.credit-montant::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--bleu-voile); border: 1px solid var(--bleu-trait); opacity: 0; transition: opacity var(--duree-rapide) var(--courbe); }
button.credit-montant:hover::before, button.credit-montant:focus-visible::before, button.credit-montant[aria-busy="true"]::before { opacity: 1; }
@media (hover: hover) { button.credit-montant:hover { transform: translateY(-2px); } }
button.credit-montant:active { transform: translateY(1px); }
button.credit-montant:focus-visible { outline: none; box-shadow: var(--anneau-focus); }
button.credit-montant[aria-busy="true"] { cursor: progress; }
.credit-montant.inerte { opacity: 0.86; }
.credit-montant-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.credit-montant-paye { font-size: 30px; line-height: 1; font-weight: var(--graisse-moyenne); letter-spacing: -0.03em; }
.credit-montant-credite { font-size: var(--taille-petit); line-height: 1.35; color: var(--encre-2); }
.credit-montant-plus { padding: 2px 8px; border-radius: var(--rayon-pilule); background: var(--mieux-fond); color: var(--mieux); font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne); line-height: 1.5; letter-spacing: 0; white-space: nowrap; }
/* « Choisir → » : l'affordance d'achat, toujours visible ; au survol et au focus elle se remplit, la flèche avance. */
.credit-montant-aller {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; margin-top: auto; padding: 6px 12px; border-radius: var(--rayon-pilule);
  border: 1px solid var(--bleu-trait); background: var(--bleu-voile); color: var(--bleu-texte); font-size: 13px; font-weight: var(--graisse-moyenne); line-height: 1.2;
}
.credit-montant-aller .ic { width: 14px; height: 14px; transition: transform var(--duree-normale) var(--expo); }
button.credit-montant:hover .credit-montant-aller, button.credit-montant:focus-visible .credit-montant-aller, button.credit-montant.suggere .credit-montant-aller { background: var(--bouton-accent-fond); border-color: transparent; color: var(--bouton-accent-encre); }
button.credit-montant:hover .credit-montant-aller .ic, button.credit-montant:focus-visible .credit-montant-aller .ic { transform: translateX(3px); }
/* La part en plus : ce qu'on paie en bleu, ce qu'on reçoit en plus en vert ; elle pousse une fois à l'arrivée. */
.credit-montant-barre { display: flex; height: 4px; border-radius: var(--rayon-pilule); background: var(--voile-3); overflow: hidden; }
.credit-montant-barre .paye { flex: 0 0 calc(var(--paye) * 100%); background: var(--bleu); }
.credit-montant-barre .bonus { flex: 1 1 0; background: var(--mieux); transform-origin: 0 50%; animation: credit-case 700ms var(--expo) 500ms backwards; }
.credit-montant-usage { display: grid; gap: 1px; font-size: 13px; line-height: 1.35; color: var(--encre-2); }
.credit-montant-usage b { font-weight: var(--graisse-moyenne); color: var(--encre); }
/* La recharge utile (arrivée d'une option que le crédit ne couvrait pas) : cerclée de bleu, nommée au-dessus. */
button.credit-montant.suggere { border-color: var(--bleu); box-shadow: var(--trait-lumiere), var(--lueur); }
button.credit-montant.suggere::before { opacity: 1; }
.credit-montant-suggere {
  position: absolute; left: 12px; top: -10px; padding: 2px 9px; border-radius: var(--rayon-pilule); background: var(--bleu); color: var(--encre-inverse);
  font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne); line-height: 1.5; white-space: nowrap; animation: credit-eclot 360ms var(--expo) both;
}
.credit-recharges-repere { margin: 14px 0 0; font-size: var(--taille-petit); line-height: 1.45; color: var(--encre-2); }
/* La mention exigée : on paie au moment d'acheter, une seule fois. */
.credit-paiement-mention { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: var(--rayon-3); border: 1px solid var(--trait); background: var(--voile-2); font-size: 14px; line-height: 1.45; color: var(--encre); }
.credit-paiement-mention .ic { flex: none; width: 16px; height: 16px; color: var(--bleu-clair); }
/* Ce qui manquait pour une action, au-dessus des montants. */
.credit-demande { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 14px; padding: 12px 16px; border-radius: var(--rayon-3); border: 1px solid var(--attention); background: var(--attention-fond); animation: credit-entre 360ms var(--expo) both; }
.credit-demande p { flex: 1 1 260px; margin: 0; font-size: 14px; line-height: 1.45; color: var(--encre-2); }
.credit-demande b { color: var(--encre); font-weight: var(--graisse-moyenne); }
.credit-demande-icone { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--rayon-2); background: var(--voile-3); color: var(--attention); }
.credit-demande-icone .ic { width: 17px; height: 17px; }
.note.credit-retour-action { flex-wrap: wrap; justify-content: space-between; }
@keyframes credit-eclot { from { opacity: 0; transform: scale(0.82); } }
@keyframes credit-entre { from { opacity: 0; transform: translateY(-6px); } }
.credit-moyen { display: flex; align-items: center; gap: 14px; min-height: 49px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--trait); }
.credit-moyen p { display: grid; gap: 2px; min-width: 0; margin: 0; font-size: var(--taille-petit); line-height: 1.45; color: var(--encre-2); }
.credit-moyen b { font-size: 14px; font-weight: var(--graisse-moyenne); font-variant-numeric: tabular-nums; color: var(--encre); }
.credit-fermees { margin-top: 16px; }
.credit-contact { margin-top: 8px; font-size: 15px; }
.credit-recharges-note, .credit-recharges > .aide { margin-top: 14px; }

/* --- La carte enregistrée, dessinée : la marque, quatre points, les quatre derniers chiffres --- */
.cb {
  position: relative; display: grid; align-content: space-between; flex: none; width: 76px; height: 48px; padding: 8px 9px; border-radius: var(--rayon-2); overflow: hidden;
  background: linear-gradient(135deg, var(--panneau-3), var(--panneau)); border: 1px solid var(--trait-fort); box-shadow: var(--trait-lumiere); color: var(--encre);
}
.cb.squelette { border-color: var(--trait); }
.cb-marque { overflow: hidden; font-size: 10px; font-weight: var(--graisse-forte); line-height: 1; letter-spacing: 0.01em; white-space: nowrap; text-overflow: ellipsis; }
.cb-numero { display: flex; align-items: center; gap: 5px; font-size: 10px; line-height: 1; color: var(--encre-2); }
.cb-points { display: inline-flex; gap: 2px; }
.cb-points i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.cb-page { place-items: center; align-content: center; color: var(--encre-2); }
.cb-page .ic { width: 18px; height: 18px; }
/* Pendant le paiement, le faisceau traverse la carte ; confirmé, une coche s'y pose. */
.cb-faisceau { position: absolute; top: 0; bottom: 0; left: 0; width: 55%; background: linear-gradient(90deg, transparent, var(--bleu-trait), transparent); opacity: 0; transform: translateX(-110%); }
.cb[data-etat="paiement"] .cb-faisceau { opacity: 1; animation: cb-passe 1100ms linear infinite; }
.cb-coche { position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--mieux); color: var(--encre-inverse); opacity: 0; transform: scale(0.4); transition: opacity var(--duree-rapide) var(--courbe), transform var(--duree-normale) var(--expo); }
.cb-coche .ic { width: 11px; height: 11px; stroke-width: 2.5; }
.cb[data-etat="paye"] { border-color: var(--mieux); }
.cb[data-etat="paye"] .cb-coche { opacity: 1; transform: none; }
.cb[data-etat="refusee"] { opacity: 0.5; }
@keyframes cb-passe { to { transform: translateX(210%); } }

/* --- Les prix par marque : un tableau sur grand écran, une fiche par marque sur un téléphone --- */
.credit-prix-liste { list-style: none; margin: 0; padding: 0; }
.credit-prix-tete, .credit-prix-ligne { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.5fr); gap: 16px; align-items: start; }
.credit-prix-tete { padding: 0 0 8px; border-bottom: 1px solid var(--trait); font-size: var(--taille-etiquette); color: var(--encre-2); }
.credit-prix-ligne { padding: 14px 0; border-bottom: 1px solid var(--trait); }
.credit-prix-ligne:last-child { border-bottom: 0; padding-bottom: 2px; }
.credit-prix-marque { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.credit-prix-marque .secondaire { font-size: var(--taille-petit); }
.credit-prix-nom { display: none; }
.credit-prix-valeur { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.credit-prix-valeur .num { font-variant-numeric: tabular-nums; }
.credit-prix-mois { color: var(--encre); }
.credit-prix-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.puce-etat { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: var(--rayon-pilule); background: var(--stable-fond); color: var(--encre-2); font-size: var(--taille-etiquette); }
.puce-etat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.puce-etat.actif { background: var(--mieux-fond); color: var(--mieux); }
.puce-etat.attente { background: var(--attention-fond); color: var(--attention); }

/* --- Une marque : son logo, son nom, et son pays (drapeau dessiné) dans un groupe suivi dans plusieurs pays --- */
.credit-marque { display: inline-flex; align-items: flex-start; gap: 10px; min-width: 0; }
.credit-marque .logo { flex: none; margin-top: 1px; }
.credit-marque-texte { display: grid; gap: 2px; min-width: 0; }
.credit-marque-nom { font-weight: var(--graisse-moyenne); color: var(--encre); overflow-wrap: anywhere; }
.credit-marque-pays { display: inline-flex; align-items: center; gap: 6px; font-size: var(--taille-petit); line-height: 1.35; color: var(--encre-2); }
.credit-marque-pays .drapeau { --drapeau-hauteur: 11px; border-radius: 2px; }
.credit-marque-sous { font-size: var(--taille-petit); }
.credit-marque.ligne { align-items: center; gap: 7px; }
.credit-marque.ligne .logo { width: 18px; height: 18px; margin-top: 0; }
.credit-marque.ligne .logo b { font-size: 7px; }
.credit-marque.ligne .credit-marque-texte { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.credit-marque.ligne .credit-marque-nom { font-size: var(--taille-petit); font-weight: var(--graisse-corps); color: var(--encre-2); }

/* --- Mouvements et dépense du mois --- */
.credit-mvt-liste, .credit-depense-liste { list-style: none; margin: 0; padding: 0; }
.credit-mvt[hidden] { display: none; }
.credit-mvt-plus { margin-top: 10px; padding-block: 8px; }
.credit-mvt-tete, .credit-mvt { display: grid; grid-template-columns: 22px minmax(0, 1.15fr) minmax(0, 1.8fr) minmax(0, 0.9fr) minmax(0, 0.9fr); gap: 12px; align-items: baseline; }
.credit-mvt-tete { padding-bottom: 8px; border-bottom: 1px solid var(--trait); font-size: var(--taille-etiquette); color: var(--encre-2); }
.credit-mvt-tete span:nth-child(n+4), .credit-mvt-montant, .credit-mvt-solde { text-align: right; }
.credit-mvt { position: relative; padding: 11px 0; border-bottom: 1px solid var(--trait); font-size: 14px; }
.credit-mvt:last-child { border-bottom: 0; padding-bottom: 2px; }
.credit-mvt-sens { display: grid; place-items: center; align-self: center; width: 22px; height: 22px; border-radius: 50%; background: var(--voile-2); color: var(--encre-2); }
.credit-mvt-sens.credite { background: var(--mieux-fond); color: var(--mieux); }
.credit-mvt-sens .ic { width: 12px; height: 12px; stroke-width: 2; }
.credit-mvt-date { color: var(--encre-2); font-size: var(--taille-petit); }
.credit-mvt-action { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.credit-mvt-action b { font-weight: var(--graisse-moyenne); }
.credit-mvt-action .secondaire { font-size: var(--taille-petit); }
.credit-mvt-facture { padding: 2px 0; font-size: var(--taille-etiquette); }
.credit-mvt-facture[aria-busy="true"] { cursor: progress; opacity: 0.6; }
.credit-mvt-montant { font-variant-numeric: tabular-nums; white-space: nowrap; }
.credit-mvt-montant.credite { color: var(--mieux); }
.credit-mvt-solde { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: var(--taille-petit); }
/* Un mouvement qui vient d'arriver : il entre, et une lumière verte s'éteint derrière lui. */
.credit-mvt.nouveau { animation: credit-mvt-entre 420ms var(--expo) calc(var(--rang, 0) * 90ms) both; }
.credit-mvt.nouveau::before { content: ""; position: absolute; inset: 0 -10px; border-radius: var(--rayon-2); background: var(--mieux-fond); opacity: 0; pointer-events: none; animation: credit-mvt-lueur 2600ms var(--courbe) calc(var(--rang, 0) * 90ms) both; }
@keyframes credit-mvt-entre { from { opacity: 0; transform: translateY(-8px); } }
@keyframes credit-mvt-lueur { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
.credit-depense { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 11px 0; border-bottom: 1px solid var(--trait); font-size: 14px; }
.credit-depense:last-child { border-bottom: 0; padding-bottom: 2px; }
.credit-depense-nom { min-width: 0; overflow-wrap: anywhere; }
.credit-depense b { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: var(--graisse-moyenne); }
.credit-depense .piste { grid-column: 1 / -1; }
.credit-mentions { margin-top: 24px; }
.credit-mentions a { color: var(--bleu-texte); }

@media (max-width: 1180px) {
  .credit-montants { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .credit-usages { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .credit-usage { padding: 10px 12px; }
}
@media (max-width: 900px) {
  /* Le solde au-dessus, la scène dessous : la barre descend du solde. */
  .carte.credit-heros { grid-template-columns: minmax(0, 1fr); }
  .credit-solde-bloc { padding: 26px 20px 18px; }
  .credit-solde-action { display: inline-flex; height: 44px; }
  .credit-scene { --retrait: 20px; padding: 18px 20px 24px; border-top: 1px solid var(--trait); }
  .credit-scene::before { display: none; }
}
@media (max-width: 760px) {
  .credit-montants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credit-usages { grid-template-columns: minmax(0, 1fr); }
  .credit-montant { min-height: 96px; padding: 14px; }
  .credit-montant-paye { font-size: 26px; }
  .credit-moyen { align-items: flex-start; }
  .credit-prix-tete { display: none; }
  .credit-prix-ligne { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .credit-prix-cellule { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .credit-prix-nom { display: block; flex: none; max-width: 48%; font-size: var(--taille-petit); color: var(--encre-2); }
  .credit-prix-valeur { align-items: flex-end; text-align: right; }
  .credit-prix-etat { justify-content: flex-end; }
  .credit-mvt-tete { display: none; }
  .credit-mvt { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "sens action montant" "sens date solde"; row-gap: 4px; align-items: start; }
  .credit-mvt-sens { grid-area: sens; align-self: start; margin-top: 1px; }
  .credit-mvt-action { grid-area: action; }
  .credit-mvt-montant { grid-area: montant; }
  .credit-mvt-date { grid-area: date; }
  .credit-mvt-solde { grid-area: solde; }
}
@media (max-width: 420px) {
  /* Un téléphone : un montant par ligne. */
  .credit-montants { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* Une recharge en une ligne : le montant et « Choisir » en haut, la barre et ce qu'elle permet dessous. */
  .credit-montant { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "haut aller" "credite aller" "barre barre" "usage usage"; gap: 6px 12px; min-height: 0; }
  .credit-montant-suggere { grid-area: auto; }
  .credit-montant-haut { grid-area: haut; }
  .credit-montant-credite { grid-area: credite; }
  .credit-montant-barre { grid-area: barre; }
  .credit-montant-usage { grid-area: usage; display: flex; flex-wrap: wrap; gap: 0 6px; }
  .credit-montant-aller { grid-area: aller; align-self: center; margin-top: 0; }
}