/* Les gestes du crédit (13/11/2026, dossier/41) : la fenêtre de recharge, la fenêtre du relevé à la demande, le bloc
   « Claude » des réglages d'une marque, les deux bandeaux de l'espace. Mêmes composants, mêmes règles que l'écran Crédit
   (credit.css) : jetons de tokens.css, `transform` et `opacity` seulement, rien ne dépend d'une animation pour être lu. */

/* --- Une fenêtre qui s'ouvre : elle monte de quelques pixels, son voile se pose --- */
dialog.dialogue-achat[open], dialog.dialogue-releve-credit[open] { animation: fenetre-entree 260ms var(--expo) both; }
dialog.dialogue-achat[open]::backdrop, dialog.dialogue-releve-credit[open]::backdrop { animation: fenetre-voile 200ms var(--courbe) both; }
@keyframes fenetre-entree { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
@keyframes fenetre-voile { from { opacity: 0; } }

/* --- La fenêtre de recharge : ce qu'on paie, ce qu'on reçoit, avec quoi, puis la phrase qui le dit --- */
dialog.dialogue-achat { width: min(460px, calc(100vw - 32px)); }
.achat-echange { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 16px; padding: 16px 18px; border-radius: var(--rayon-3); border: 1px solid var(--trait); background: var(--voile-1); box-shadow: var(--trait-lumiere); }
.dialogue-achat .achat-cote { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; }
.achat-cote-nom { flex: 1 0 100%; font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne); line-height: 1.4; color: var(--encre-2); }
.achat-cote b { font-size: 32px; line-height: 1; font-weight: var(--graisse-moyenne); letter-spacing: -0.03em; color: var(--encre); }
.achat-cote .credit-montant-plus { transform-origin: 0 50%; animation: achat-eclot 320ms var(--expo) 260ms both; }
.achat-fleche { display: grid; color: var(--encre-2); }
.achat-fleche .ic { width: 18px; height: 18px; }
.achat-moyen { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.achat-moyen .cb { width: 88px; height: 56px; padding: 9px 10px; }
.achat-moyen .cb-marque { font-size: 11px; }
.achat-moyen .cb-numero { font-size: 11px; }
.dialogue-achat .achat-moyen p { margin: 0; font-size: 14px; font-weight: var(--graisse-moyenne); font-variant-numeric: tabular-nums; color: var(--encre); }
/* La phrase qui dit exactement ce qui va se passer : en pleine encre, jamais en petit. */
.dialogue-achat .achat-phrase { margin-top: 14px; font-size: var(--taille-corps); line-height: 1.5; color: var(--encre); text-wrap: pretty; }
.dialogue-achat .achat-mention { margin-top: 6px; font-size: var(--taille-etiquette); line-height: 1.5; }
.dialogue-achat .note { margin-top: 12px; }
.dialogue-achat .achat-note[hidden] { display: none; }
.dialogue-achat .actions { align-items: center; }
.dialogue-achat .actions .btn { min-height: 44px; }
.achat-payer { min-width: 148px; }
.dialogue-achat[aria-busy="true"] .achat-payer { cursor: progress; }
/* Payé : le bouton le dit en vert, la carte porte sa coche (credit.css `.cb[data-etat="paye"]`). */
.dialogue-achat[data-etat="paye"] .achat-payer:disabled { opacity: 1; background: var(--mieux); color: var(--encre-inverse); }
.dialogue-achat[data-etat="paye"] .achat-phrase { color: var(--mieux); }
.achat-autre { display: block; margin: 10px 0 -6px auto; padding-block: 10px; }
.achat-autre[hidden] { display: none; }
@keyframes achat-eclot { from { opacity: 0; transform: scale(0.6); } }
@media (max-width: 420px) {
  .achat-cote b { font-size: 26px; }
  .achat-echange { gap: 8px; padding: 14px; }
  .dialogue-achat .actions .btn { flex: 1 1 auto; }
}

/* --- La fenêtre du relevé à la demande : ce qui part, l'addition, puis le crédit avant et après sur une jauge --- */
dialog.dialogue-releve-credit { width: min(480px, calc(100vw - 32px)); }
.releve-credit-cohorte { display: grid; gap: 10px; margin-top: 12px; }
.dialogue-releve-credit .releve-credit-cohorte p { margin: 0; }
.releve-credit-ia { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; }
.releve-credit-ia .ia-jeton { width: 30px; height: 30px; }
.releve-credit-ia .ia-jeton img { width: 17px; height: 17px; }
.releve-credit-plus { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 8px; border-radius: var(--rayon-pilule); border: 1px solid var(--trait-fort); background: var(--voile-2); font-size: var(--taille-petit); animation: achat-eclot 300ms var(--expo) both; transform-origin: 0 50%; }
.releve-credit-plus .ic { width: 12px; height: 12px; stroke-width: 2; color: var(--encre-2); }
.releve-credit-lignes { margin: 16px 0 0; padding: 4px 16px; border-radius: var(--rayon-3); border: 1px solid var(--trait); background: var(--voile-1); box-shadow: var(--trait-lumiere); }
.releve-credit-ligne { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--trait); font-size: 14px; }
.releve-credit-ligne:last-child { border-bottom: 0; }
.releve-credit-ligne dt { color: var(--encre-2); }
.releve-credit-ligne dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; color: var(--encre); }
.releve-credit-ligne.claude { animation: releve-ligne 300ms var(--expo) both; }
/* Ce qui sera débité : le nombre qui compte, en grand. */
.releve-credit-ligne.total dt { color: var(--encre); font-weight: var(--graisse-moyenne); }
.releve-credit-ligne.total dd { font-size: 26px; line-height: 1; font-weight: var(--graisse-moyenne); letter-spacing: -0.03em; }
.releve-credit-claude { margin-top: 12px; align-items: flex-start; padding-block: 10px; }
.releve-credit-claude > span { display: flex; flex-direction: column; gap: 2px; }
.releve-credit-claude .aide { font-size: var(--taille-petit); color: var(--encre-2); }
/* Le crédit avant et après, et la jauge : la piste est le crédit d'aujourd'hui, la part bleue ce que le relevé prend. */
.releve-credit-credit { display: grid; gap: 8px; margin-top: 16px; }
.releve-credit-bornes { display: flex; justify-content: space-between; gap: 16px; margin: 0; }
.releve-credit-bornes div { display: grid; gap: 2px; min-width: 0; }
.releve-credit-bornes div + div { justify-items: end; text-align: right; }
.releve-credit-bornes dt { font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne); color: var(--encre-2); }
.releve-credit-bornes dd { margin: 0; font-size: var(--taille-corps); font-weight: var(--graisse-moyenne); color: var(--encre); }
.releve-jauge { --part: 0; position: relative; display: block; height: 6px; border-radius: var(--rayon-pilule); background: var(--voile-4); overflow: hidden; }
.releve-jauge i { position: absolute; inset: 0; border-radius: inherit; background: var(--bleu); transform: scaleX(var(--part)); transform-origin: 100% 50%; transition: transform var(--duree-normale) var(--expo); }
.releve-jauge[data-etat="insuffisant"] i { background: var(--attention); }
dialog.dialogue p.releve-credit-delai { margin-top: 14px; font-size: var(--taille-petit); }
dialog.dialogue-releve-credit .actions { flex-wrap: wrap; align-items: center; }
dialog.dialogue-releve-credit .actions .btn { min-height: 44px; }
@keyframes releve-ligne { from { opacity: 0; transform: translateY(-6px); } }

/* --- Le bloc « Claude » des réglages : le geste et son état, les IA que Claude rejoint, le prix --- */
.claude-reglage { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px 28px; padding: 16px 18px; border-radius: var(--rayon-3); border: 1px solid var(--trait); background: var(--voile-1); box-shadow: var(--trait-lumiere); }
.claude-reglage-geste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.claude-interrupteur { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: var(--graisse-moyenne); }
.claude-interrupteur input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* L'interrupteur : la piste garde sa teinte, une couche bleue monte par-dessus (opacité), le bouton glisse (transform). */
.claude-bascule { position: relative; flex: none; width: 44px; height: 26px; border-radius: var(--rayon-pilule); background: var(--voile-3); border: 1px solid var(--trait-fort); overflow: hidden; }
.claude-bascule::before { content: ""; position: absolute; inset: 0; background: var(--bleu); opacity: 0; transition: opacity var(--duree-rapide) var(--courbe); }
.claude-bascule::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--encre); transition: transform var(--duree-normale) var(--expo); }
.claude-interrupteur input:checked + .claude-bascule::before { opacity: 1; }
.claude-interrupteur input:checked + .claude-bascule::after { transform: translateX(18px); }
.claude-interrupteur input:focus-visible + .claude-bascule { box-shadow: var(--anneau-focus); }
.claude-interrupteur input:disabled + .claude-bascule { opacity: 0.5; }
.claude-ia { display: inline-flex; align-items: center; gap: 8px; }
.claude-ia .ia-jeton { width: 30px; height: 30px; }
.claude-ia .ia-jeton img { width: 17px; height: 17px; }
.claude-ia .credit-usage-claude { height: 30px; }
/* Non activé : Claude attend à côté, estompé ; activé, sa pastille s'allume. */
.claude-ia[data-actif="false"] .credit-usage-plus, .claude-ia[data-actif="false"] .credit-usage-claude { opacity: 0.42; }
.claude-ia[data-actif="true"] .credit-usage-claude { border-color: var(--bleu-trait); background: var(--bleu-voile); animation: achat-eclot 320ms var(--expo) both; }
.claude-prix { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; text-align: right; }
.claude-prix-lundi { font-size: var(--taille-petit); color: var(--encre-2); }
.claude-prix-lundi b { margin-right: 2px; font-size: 22px; line-height: 1.1; font-weight: var(--graisse-moyenne); letter-spacing: -0.02em; color: var(--encre); }
.claude-prix .num { font-variant-numeric: tabular-nums; }
.claude-prix .secondaire { font-size: var(--taille-petit); }
/* Les quatre phrases, le long d'un fil : ce qui se passe chaque lundi, dans l'ordre. */
.claude-phrases { position: relative; display: grid; gap: 8px; margin: 16px 0 0; padding: 0 0 0 22px; list-style: none; font-size: 14px; line-height: 1.5; color: var(--encre-2); }
.claude-phrases::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: var(--trait-fort); }
.claude-phrases li { position: relative; }
.claude-phrases li::before { content: ""; position: absolute; left: -21px; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--panneau-2); box-shadow: inset 0 0 0 1.5px var(--encre-2); }
.claude-solde { margin-top: 14px; }
.claude-attente { margin-bottom: 14px; padding: 16px 18px; border-radius: var(--rayon-3); border: 1px solid var(--attention); background: var(--attention-fond); }
.claude-attente h3 { margin: 0 0 4px; font-size: var(--taille-corps); font-weight: var(--graisse-moyenne); }
.claude-attente p { margin: 0 0 6px; font-size: 14px; color: var(--encre-2); }
.claude-attente .actions, .carte-claude .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.claude-attente .actions .btn { min-height: 44px; }
.carte-claude .note { margin-top: 12px; }
@media (max-width: 900px) {
  .claude-reglage { grid-template-columns: minmax(0, 1fr) auto; }
  .claude-ia { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 520px) {
  .claude-reglage { grid-template-columns: minmax(0, 1fr); }
  .claude-ia { grid-row: auto; }
  .claude-prix { align-items: flex-start; text-align: left; }
}

/* --- Les bandeaux (posés sur ceux de l'accès offert, bienvenue.css) : une icône dit le genre, le nombre est en gras --- */
.bandeau-credit-contenu { gap: 12px 14px; padding: 10px 12px 10px 14px; }
.bandeau-credit-contenu.entre { animation: bandeau-entre 300ms var(--expo) both; }
.bandeau-credit-icone { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--rayon-2); background: var(--bleu-voile); color: var(--bleu-clair); }
.bandeau-credit-icone .ic { width: 17px; height: 17px; }
.bandeau-credit-contenu b { font-weight: var(--graisse-moyenne); color: var(--encre); }
.bandeau-credit-contenu.attente { border-color: var(--attention); }
.bandeau-credit-contenu.attente .bandeau-credit-icone { background: var(--attention-fond); color: var(--attention); }
.bandeau-credit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
@keyframes bandeau-entre { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 640px), (pointer: coarse) {
  .bandeau-credit-contenu .btn { min-height: 44px; }
}

/* --- « Il vous manque 0,45 € » (13/11/2026, credit-manque.js) : ce qui manque en grand, la jauge, la recharge utile --- */
.credit-manque {
  display: grid; gap: 10px; margin-top: 16px; padding: 16px 18px; border-radius: var(--rayon-3); border: 1px solid var(--attention);
  background: var(--attention-fond); animation: releve-ligne 320ms var(--expo) both;
}
.credit-manque.compact { margin-top: 14px; }
.credit-manque p { margin: 0; }
.credit-manque-titre { display: flex; align-items: center; gap: 10px; }
.credit-manque-titre b { font-size: 22px; line-height: 1.15; font-weight: var(--graisse-moyenne); letter-spacing: -0.02em; color: var(--encre); }
.credit-manque-icone { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--rayon-2); background: var(--voile-3); color: var(--attention); }
.credit-manque-icone .ic { width: 18px; height: 18px; }
.credit-manque-phrase { font-size: 14px; line-height: 1.5; color: var(--encre-2); }
.credit-manque-mesure { display: grid; gap: 6px; }
/* La jauge : la part couverte en bleu, la part qui manque hachurée et qui bat doucement (une attente). */
.credit-manque-jauge { --part: 0; display: flex; height: 10px; border-radius: var(--rayon-pilule); background: var(--voile-3); overflow: hidden; }
.credit-manque-plein { flex: 0 0 calc(var(--part) * 100%); background: var(--bleu); transform-origin: 0 50%; animation: manque-plein 600ms var(--expo) 120ms backwards; }
.credit-manque-trou { flex: 1 1 0; background: repeating-linear-gradient(135deg, var(--attention) 0 5px, transparent 5px 10px); opacity: 0.7; animation: manque-battre 1600ms var(--courbe) infinite alternate; }
.credit-manque-bornes { display: flex; justify-content: space-between; gap: 12px; font-size: var(--taille-etiquette); color: var(--encre-2); }
.credit-manque-bornes b { font-weight: var(--graisse-moyenne); color: var(--encre); font-variant-numeric: tabular-nums; }
.credit-manque-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.credit-manque-actions .btn { min-height: 44px; gap: 8px; }
.credit-manque-actions .btn .ic { width: 16px; height: 16px; }
.credit-manque-actions .aide { font-size: var(--taille-petit); color: var(--encre-2); }
@keyframes manque-plein { from { transform: scaleX(0); } }
@keyframes manque-battre { from { opacity: 0.45; } to { opacity: 0.85; } }

/* Le logo de Claude, à côté de sa case (fenêtre du relevé) et dans le réglage, cerclé de son corail. */
.releve-credit-claude-logo { display: inline-flex; flex: none; }
.releve-credit-claude-logo .ia-jeton, .claude-ia-claude .ia-jeton { width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--panneau-2), 0 0 0 4px color-mix(in srgb, var(--teinte-claude, var(--attention)) 50%, transparent); }
.releve-credit-claude-logo .ia-jeton img, .claude-ia-claude .ia-jeton img { width: 19px; height: 19px; }
.releve-credit-plus .ia-jeton { width: 22px; height: 22px; }
.releve-credit-plus .ia-jeton img { width: 14px; height: 14px; }
.claude-ia-claude { display: inline-flex; }
.claude-ia[data-actif="false"] .claude-ia-claude { opacity: 0.42; }
.claude-ia[data-actif="true"] .claude-ia-claude { animation: achat-eclot 320ms var(--expo) both; }
.releve-credit-claude > .releve-credit-claude-logo { flex: none; flex-direction: row; }
.releve-credit-claude > span:last-child { flex: 1 1 auto; min-width: 0; }