/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   CRÉDITS D'IA — lot 6b des tarifs (2026-09-30). Préfixes cia- (crédits) et rdv- (mode rendez-vous).
    • Le solde PAR CATÉGORIE (Shared/SoldeDetail.razor) : total, attribués et leur échéance, compris, achetés ; les crédits de
      démonstration à part. La pastille (CreditPill) le déplie sous l'en-tête qui la porte.
    • La fiche « crédits de démonstration épuisés » (CreditShortfallSheet, variante démonstration).
    • Le MODE RENDEZ-VOUS (Services/ModeRendezVous.cs) : data-rdv="1" sur <html> masque ce qui aide le conseil en coulisse
      (copilote, entrées, boutons et badges d'IA, pastille et coûts) pendant un partage d'écran ; les analyses restent. Un
      interrupteur dans l'en-tête du hub (.rdv-btn), un repère discret en bas à gauche (.rdv-repere).
    • Le SIREN du cabinet (Shared/IdentiteCabinetForm.razor) et le barème IA par palier (vue des tarifs, console).
   Jetons de thème uniquement (clair et sombre).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── MODE RENDEZ-VOUS : ce qui disparaît ─────────────────────────────────────────────────────────────────────────────── */
/*  Classes posées exprès (iku-ia : une entrée ou un bouton d'IA ; iku-credit : un solde, un coût en crédits), puis les surfaces
    d'IA connues par leur propre classe : le copilote (FAB, panneau, bouton du pilotage), les deux entrées d'IA du hub, l'Analyste
    IA, son volet dans le pilotage, les pastilles « généré par l'IA » des hypothèses, les coûts des cartes, l'assistant et le mémo
    du parcours, la rédaction de la cessibilité. !important : ces règles doivent l'emporter sur l'affichage propre du composant. */
html[data-rdv="1"] .iku-ia,
html[data-rdv="1"] .iku-credit,
html[data-rdv="1"] .iku-credwrap,
html[data-rdv="1"] .iku-credpill,
html[data-rdv="1"] .cop-fab,
html[data-rdv="1"] .cop-panel,
html[data-rdv="1"] .fintree-cop-btn,
html[data-rdv="1"] .intent-lecture-row,
html[data-rdv="1"] .intent-analyste-row,
html[data-rdv="1"] .aim-backdrop,
html[data-rdv="1"] .aim-modal,
html[data-rdv="1"] .fintree-side-scroll.ai-scroll,
html[data-rdv="1"] .hyp-ai,
html[data-rdv="1"] .ai-card-cost,
html[data-rdv="1"] .aim-cost,
html[data-rdv="1"] .tvv-fab-ai,
html[data-rdv="1"] .tvv-fab-memo,
html[data-rdv="1"] .tvv-ai,
html[data-rdv="1"] .tvv-memo-gen,
html[data-rdv="1"] .tvv-dg-unlockbtn.ai,
html[data-rdv="1"] .csn-ia,
html[data-rdv="1"] .cch-back,
html[data-rdv="1"] .csf-back,
/*  Recette du 30/09 : les outils d'IA de l'édition d'un parcours (premier jet d'un bloc, equity story, frise, KPI suggérés) et
    leurs mentions de coût. */
html[data-rdv="1"] .tvv-flow-aibtn,
html[data-rdv="1"] .tvv-tl-genbtn.ai,
html[data-rdv="1"] .gnt-ai,
html[data-rdv="1"] .tkpi-sugg,
html[data-rdv="1"] .tvv-textedit-hint,
html[data-rdv="1"] .tvv-commentpop-hint { display: none !important; }

/* ── MODE RENDEZ-VOUS : ce qui reste prend la place ──────────────────────────────────────────────────────────────────── */
/*  2026-10-02, Arthur : « en mode rdv il faut augmenter la width de la carte car ça crée un vide (gère tous les cas) ». Une grille
    à colonnes FIXES garde la colonne d'une carte masquée ; ici, les cartes visibles se partagent toute la largeur, quel que soit
    le nombre de cartes masquées (une seule visible : pleine largeur). Le mode normal n'est pas touché (tout est sous
    html[data-rdv="1"]) ; aucun :has(), pour ne pas faire restyler la page à chaque insertion de nœud (cf. 2ba9653).
     • Hub, rangée « Diagnostic IA · Cash à relancer » (FecLoader, .intent-banners-row : 1fr 1fr, une colonne sous 768 px) : une
       colonne implicite par carte visible. */
html[data-rdv="1"] .intent-banners-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
@media (max-width: 768px) { html[data-rdv="1"] .intent-banners-row { grid-auto-flow: row; } }
/*   • Fenêtre « Mettre à jour l'exercice », « Et maintenant ? » : rien ici, ses rangées s'enroulent dans tous les modes
       (FecLoader, .upd-next-grid), la place de la carte « Diagnostic IA » masquée est donc reprise d'elle-même.
     • Pilotage (FinTreePopup) : un volet resté sur l'Analyste IA (préférence mémorisée, ftpopup.sideMode) n'avait plus que son
       titre, une colonne vide de 320 px (un tiroir vide sur téléphone). Il se retire avec sa poignée et le tableau prend toute la
       largeur (.side-ia posée sur .fintree-body) ; « Volet » rouvre les hypothèses. */
html[data-rdv="1"] .fintree-body.side-ia > .fintree-side,
html[data-rdv="1"] .fintree-body.side-ia > .fintree-splitter { display: none !important; }

/* ── MODE RENDEZ-VOUS : l'interrupteur (en-tête du hub) ─────────────────────────────────────────────────────────────── */
.rdv-btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 30px; padding: 0 11px; border-radius: 9px;
           font: inherit; font-size: 12.5px; font-weight: 620; cursor: pointer; white-space: nowrap;
           color: var(--tx2, #c2cdd6); background: transparent; border: 1px solid var(--o12, rgba(255,255,255,.12));
           transition: color .12s, background .12s, border-color .12s; }
.rdv-btn:hover { color: var(--tx1, #e8eef2); background: color-mix(in srgb, var(--brand, #00B1CF) 10%, transparent);
                 border-color: color-mix(in srgb, var(--brand, #00B1CF) 40%, transparent); }
.rdv-btn:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 2px; }
.rdv-btn.on { color: var(--brand-strong, #7fd8e8); background: color-mix(in srgb, var(--brand, #00B1CF) 14%, transparent);
              border-color: color-mix(in srgb, var(--brand, #00B1CF) 50%, transparent); }
.rdv-btn-ic { display: inline-flex; font-size: 15px; }
@media (max-width: 720px) { .rdv-btn-lbl { display: none; } .rdv-btn { padding: 0 8px; } }

/* ── MODE RENDEZ-VOUS : le repère discret (bas à gauche, la place du copilote masqué) ────────────────────────────────── */
/*  Un point sans texte pour le client ; pour le conseil, l'infobulle et un clic qui quitte le mode. Au-dessus du hub, sous les
    fenêtres (z-index du FAB du copilote). */
.rdv-repere { position: fixed; left: 14px; bottom: 14px; z-index: 900; width: 30px; height: 30px; border-radius: 999px; padding: 0;
              display: inline-flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; opacity: .55;
              color: var(--brand-strong, #7fd8e8); background: color-mix(in srgb, var(--surf-2, #13202a) 88%, transparent);
              border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 32%, transparent);
              box-shadow: 0 6px 18px rgba(var(--shadow-col, 0,0,0), calc(.35 * var(--shadow-mul, 1)));
              transition: opacity .15s, transform .15s; }
.rdv-repere:hover, .rdv-repere:focus-visible { opacity: 1; transform: translateY(-1px); }
.rdv-repere:focus-visible { outline: 2px solid var(--brand, #00B1CF); outline-offset: 2px; }
html[data-theme="light"] .rdv-repere { background: color-mix(in srgb, #ffffff 92%, transparent); }
@media print { .rdv-repere { display: none; } }

/* ── LA PASTILLE : le détail sous l'en-tête qui la porte ─────────────────────────────────────────────────────────────── */
/*  L'enveloppe ne compte pas dans la mise en page (display: contents) : la pastille reste dans sa ligne ; ouverte, le détail
    passe à la ligne, sur toute la largeur du menu. */
.iku-credwrap { display: contents; }
*:has(> .iku-credwrap .iku-cred-detail) { flex-wrap: wrap; }
.iku-cred-detail { flex: 1 0 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 6px; min-width: 0; }
.iku-credpill.on { background: color-mix(in srgb, var(--brand, #00B1CF) 20%, transparent); }
.iku-credpill-demo { margin-left: 2px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap;
                     color: var(--st-amber, #fbbf24); background: color-mix(in srgb, var(--st-amber, #fbbf24) 14%, transparent); }
html[data-theme="light"] .iku-credpill-demo { color: #7a3d06; background: color-mix(in srgb, #f59e0b 16%, #ffffff); }

/* ── LE SOLDE PAR CATÉGORIE (SoldeDetail) ────────────────────────────────────────────────────────────────────────────── */
.cia-solde { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 12.5px; line-height: 1.4;
             color: var(--tx2, #c2cdd6); text-align: left; }
.cia-solde-tot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cia-solde-tot span { font-weight: 620; }
.cia-solde-tot b { font-weight: 800; color: var(--tx1, #e8eef2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cia-solde-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cia-solde-l li, .cia-solde-demo { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline;
                                   padding: 5px 9px; border-radius: 8px; background: var(--o3, rgba(255,255,255,.03));
                                   border: 1px solid var(--o8, rgba(255,255,255,.08)); }
.cia-solde-k { min-width: 0; overflow-wrap: anywhere; }
.cia-solde-l b, .cia-solde-demo b { font-weight: 750; color: var(--tx1, #e8eef2); font-variant-numeric: tabular-nums; text-align: right; }
.cia-solde-l small, .cia-solde-demo small { grid-column: 1 / -1; font-size: 11px; color: var(--mut2, #8a97a2); }
.cia-solde-demo { border-style: dashed; border-color: color-mix(in srgb, var(--st-amber, #fbbf24) 40%, transparent);
                  background: color-mix(in srgb, var(--st-amber, #fbbf24) 6%, transparent); }
.cia-solde.is-compact { font-size: 12px; gap: 5px; }
.cia-solde.is-compact .cia-solde-l li, .cia-solde.is-compact .cia-solde-demo { padding: 4px 8px; }
.cia-solde-offres { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 650;
                    padding: 6px 10px; border-radius: 8px; cursor: pointer; color: var(--brand-strong, #7fd8e8);
                    background: color-mix(in srgb, var(--brand, #00B1CF) 10%, transparent);
                    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 32%, transparent); }
.cia-solde-offres:hover { background: color-mix(in srgb, var(--brand, #00B1CF) 18%, transparent); }
/*  Dans la fiche de manque : sous la ligne du solde, avant les options. */
.csf-card .cia-solde { margin: 8px 0 12px; }
/*  Dans l'espace pro : sous « Solde du cabinet ». */
.pro-acc .cia-solde { max-width: 520px; }
/*  En LIGNE (espace pro, 2026-10-02, « ux à cleaner ») : les catégories en pastilles, sur toute la largeur du bloc du solde, alignées sur
    lui (plus de cases à mi-largeur). Chaque pastille : libellé, nombre, précision ; elles passent à la ligne sur un écran étroit. */
.pro-acc .cia-solde.is-ligne { max-width: none; }
.cia-solde.is-ligne .cia-solde-l { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.cia-solde.is-ligne .cia-solde-l li { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; padding: 5px 11px; border-radius: 999px;
                                      background: color-mix(in srgb, var(--tx1, #e8eef2) 5%, transparent);
                                      border: 1px solid color-mix(in srgb, var(--tx1, #e8eef2) 12%, transparent); min-width: 0; max-width: 100%; }
.cia-solde.is-ligne .cia-solde-l li b { font-size: 13px; text-align: left; }
.cia-solde.is-ligne .cia-solde-l small { grid-column: auto; font-size: 11px; }
.cia-solde.is-ligne .cia-solde-l small::before { content: "·"; margin-right: 6px; }
/*  Téléphone : une pastille qui passe à la ligne se lit mal ; les catégories deviennent des lignes pleine largeur (libellé, nombre à
    droite, précision dessous), toujours dans le bloc du solde. */
@media (max-width: 560px) {
    .cia-solde.is-ligne .cia-solde-l { flex-direction: column; gap: 5px; }
    .cia-solde.is-ligne .cia-solde-l li { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-radius: 10px; padding: 6px 10px; }
    .cia-solde.is-ligne .cia-solde-l li b { text-align: right; }
    .cia-solde.is-ligne .cia-solde-l small { grid-column: 1 / -1; }
    .cia-solde.is-ligne .cia-solde-l small::before { content: none; }
}
/*  Prélèvement SEPA en cours (2026-10-02) : des crédits payés, pas encore livrés ; ambre, comme une attente. */
.cia-solde .cia-solde-l li.is-attente { border-style: dashed; border-color: color-mix(in srgb, var(--st-amber, #fbbf24) 45%, transparent);
                             background: color-mix(in srgb, var(--st-amber, #fbbf24) 8%, transparent); }
.cia-solde-l li.is-attente .cia-solde-k { display: inline-flex; align-items: center; gap: 5px; }
.cia-solde-l li.is-attente .cia-solde-k .iku-ico, .cia-solde-l li.is-attente b { color: var(--st-amber, #fbbf24); }
html[data-theme="light"] .cia-solde.is-ligne .cia-solde-l li { background: color-mix(in srgb, #0b1f2b 3%, #ffffff); border-color: color-mix(in srgb, #0b1f2b 12%, transparent); }
html[data-theme="light"] .cia-solde .cia-solde-l li.is-attente { background: color-mix(in srgb, #f59e0b 8%, #ffffff); border-color: color-mix(in srgb, #b45309 45%, transparent); }
html[data-theme="light"] .cia-solde-l li { background: color-mix(in srgb, #0b1f2b 3%, #ffffff); border-color: color-mix(in srgb, #0b1f2b 10%, transparent); }
html[data-theme="light"] .cia-solde-l small, html[data-theme="light"] .cia-solde-demo small { color: #4f5f69; }
html[data-theme="light"] .cia-solde-demo { background: color-mix(in srgb, #f59e0b 7%, #ffffff); border-color: color-mix(in srgb, #b45309 40%, transparent); }

/* ── BARÈME IA PAR PALIER (vue des tarifs, conseil : Shared/BaremeIaParPalier.razor) ─────────────────────────────────── */
/*  05/10/2026 (Arthur : « bad ux ») : quatre CARTES de même hauteur, 4 colonnes, puis 2, puis 1 (requêtes sur la section). Les
    rangées internes (palier et prix, phrase, exemples, bouton) sont une SOUS-GRILLE de la grille des cartes : elles s'alignent d'une
    carte à l'autre, d'où la même hauteur. La carte dépliée prend une rangée de plus (la liste) : seule elle grandit. L'air du bas
    est porté par la dernière rangée (bouton, liste), pas par la carte, pour que la carte ouverte ne creuse pas sa rangée du bouton. */
.cia-bareme { margin: 22px 0 8px; padding: 18px; border-radius: 16px; min-width: 0; container: ciab / inline-size;
              background: var(--o3, rgba(255,255,255,.03)); border: 1px solid var(--o10, rgba(255,255,255,.10)); }
.cia-bareme h2 { margin: 0 0 4px; font-size: 18px; font-weight: 750; color: var(--tx1, #e8eef2); text-wrap: balance; }
.cia-bareme-sub { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--tx2, #c2cdd6); max-width: 70ch; }
.cia-bareme-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; align-items: start; }
/* Chaque groupe de cartes côte à côte a CINQ rangées : les quatre des cartes, puis celle de la liste dépliée. Les débuts de rangée
   sont donc posés (1, 6, 11, 16 selon la colonne) : une carte du groupe suivant ne vient jamais partager la rangée d'une liste. */
.cia-palier { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 4; min-width: 0; padding: 14px 14px 0; border-radius: 12px;
              background: var(--surf-1, #0e1a1f); border: 1px solid var(--o10, rgba(255,255,255,.10)); }
.cia-palier.is-ouvert { grid-row-end: span 5; }
.cia-palier-h { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cia-palier-n { font-size: 14px; font-weight: 750; color: var(--tx1, #e8eef2); }
.cia-palier-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; }
.cia-palier-prix b { font-size: 26px; font-weight: 800; line-height: 1.15; color: var(--brand-strong, #7fd8e8); font-variant-numeric: tabular-nums; }
.cia-palier-prix span { font-size: 12.5px; font-weight: 600; color: var(--tx2, #c2cdd6); }
.cia-palier-d { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--tx2, #c2cdd6); }
.cia-palier-ex { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--tx2, #c2cdd6); overflow-wrap: anywhere; }
.cia-palier-plus { justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px; padding: 3px 0;
                   border: 0; background: none; cursor: pointer; font-family: var(--font-family); font-size: 12.5px; font-weight: 700;
                   color: var(--brand-strong, #7fd8e8); }
.cia-palier-plus:hover { text-decoration: underline; text-underline-offset: 3px; }
.cia-palier-plus:focus-visible { outline: 2px solid var(--brand-strong, #7fd8e8); outline-offset: 2px; border-radius: 4px; }
.cia-chevron { width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
               transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.cia-palier-plus[aria-expanded="true"] .cia-chevron { transform: translateY(1px) rotate(-135deg); }
/* La liste dépliée : texte simple à puces discrètes, sur deux colonnes quand la carte est assez large. */
.cia-palier-l { margin: 0 0 14px; padding: 0 0 0 1.1em; list-style: disc; columns: 2 13em; column-gap: 1.8em;
                font-size: 12px; line-height: 1.45; color: var(--tx2, #c2cdd6); }
.cia-palier-l[hidden] { display: none; }
.cia-palier-l li { margin: 0 0 4px; break-inside: avoid; overflow-wrap: anywhere; }
.cia-palier-l li::marker { color: var(--mut2, #8a97a2); }
@container ciab (max-width: 900px) {
    .cia-bareme-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cia-palier:nth-child(n+3) { grid-row-start: 6; }
}
@container ciab (max-width: 520px) {
    .cia-bareme-g { grid-template-columns: minmax(0, 1fr); }
    .cia-palier:nth-child(2) { grid-row-start: 6; }
    .cia-palier:nth-child(3) { grid-row-start: 11; }
    .cia-palier:nth-child(4) { grid-row-start: 16; }
}
@media (prefers-reduced-motion: reduce) { .cia-chevron { transition: none; } }
.cia-bareme-note { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--mut2, #8a97a2); }
html[data-theme="light"] .cia-palier { background: #ffffff; border-color: color-mix(in srgb, #0b1f2b 12%, transparent); }
html[data-theme="light"] .cia-palier-ex, html[data-theme="light"] .cia-palier-l { color: #3f4f59; }
html[data-theme="light"] .cia-palier-l li::marker { color: #6b7a84; }
html[data-theme="light"] .cia-bareme-note { color: #4f5f69; }
/*  Console des tarifs (/admin/pricing) : sous-titre de la section du barème IA. */
.adp-ia-h { margin: 14px 0 8px; font-size: 12.5px; font-weight: 700; color: var(--tx2, #c2cdd6); }
.adp-ia-tbl { margin-top: 14px; }

/* ── SIREN DU CABINET (IdentiteCabinetForm : fenêtre « Ajoutez un moyen de paiement », carte « Paiement du cabinet ») ──── */
.cia-siren { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 2px; min-width: 0; text-align: left; }
.cia-siren-l { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px 10px; }
.cia-siren-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--tx2, #c2cdd6); }
.cia-siren-f input { width: 100%; box-sizing: border-box; min-width: 0; font: inherit; font-size: 13.5px; font-weight: 500; padding: 8px 10px;
                     border-radius: 9px; color: var(--tx1, #e8eef2); background: var(--o5, rgba(255,255,255,.05));
                     border: 1px solid var(--o16, rgba(255,255,255,.16)); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.cia-siren-f input:focus { outline: none; border-color: var(--brand, #00B1CF); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #00B1CF) 22%, transparent); }
.cia-siren-f input[aria-invalid="true"] { border-color: var(--st-red, #f87171); }
.cia-siren-err { margin: 0; font-size: 12px; line-height: 1.45; color: var(--st-red, #f87171); }
.cia-siren-a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cia-siren-go { font: inherit; font-size: 12.5px; font-weight: 650; padding: 8px 13px; border-radius: 9px; cursor: pointer;
                color: var(--brand-strong, #7fd8e8); background: color-mix(in srgb, var(--brand, #00B1CF) 12%, transparent);
                border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 40%, transparent); }
.cia-siren-go:hover:not(:disabled) { background: color-mix(in srgb, var(--brand, #00B1CF) 20%, transparent); }
.cia-siren-go:disabled { opacity: .5; cursor: default; }
.cia-siren-msg { font-size: 12px; line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.cia-siren-msg.ok { color: var(--st-green, #34d399); }
.cia-siren-msg.ko { color: var(--st-amber, #fbbf24); }
.cia-siren-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--mut2, #8a97a2); }
.cia-siren.is-compact .cia-siren-note { font-size: 11px; }
html[data-theme="light"] .cia-siren-f input { background: #ffffff; border-color: color-mix(in srgb, #0b1f2b 18%, transparent); color: #0e2230; }
html[data-theme="light"] .cia-siren-err { color: #b01c1c; }
html[data-theme="light"] .cia-siren-msg.ok { color: #046048; }
html[data-theme="light"] .cia-siren-msg.ko { color: #96450a; }
html[data-theme="light"] .cia-siren-note { color: #4f5f69; }

/*  Carte « Paiement du cabinet » de l'espace pro (EspacePro, Manager ou Admin). */
.cia-paie { display: flex; flex-direction: column; gap: 10px; }
.cia-paie-h { display: flex; align-items: center; gap: 9px; }
.cia-paie-h svg { color: var(--sl1, #94a3b8); }
.cia-paie-t { font-size: 15px; font-weight: 650; color: var(--tx1, #e8f0f3); }
.cia-paie-moyen { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cia-paie-etat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tx2, #c2cdd6); min-width: 0; }
.cia-paie-etat.ok { color: var(--st-green, #34d399); }
.cia-paie-btn, .cia-paie-lien { font: inherit; font-size: 12.5px; font-weight: 650; padding: 8px 13px; border-radius: 9px; cursor: pointer;
                                color: var(--brand-contrast, #06141a); background: var(--brand, #00b1cf); border: 1px solid var(--brand, #00b1cf); }
.cia-paie-btn:disabled { opacity: .5; cursor: default; }
.cia-paie-lien { margin-left: 8px; padding: 4px 10px; font-size: 12px; color: var(--brand-strong, #7fd8e8);
                 background: transparent; border-color: color-mix(in srgb, var(--brand, #00B1CF) 40%, transparent); }
.cia-paie-msg { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--tx2, #c2cdd6); }
html[data-theme="light"] .cia-paie-etat.ok { color: #046048; }
/*  2026-10-02 : « Acheter des crédits d'IA » (recharge volontaire) : une ligne à part, sous le moyen de paiement, bouton secondaire
    (le geste principal de la carte reste le moyen de paiement). */
.cia-paie-ia { padding-top: 10px; border-top: 1px solid var(--o8, rgba(255,255,255,.08)); }
.cia-paie-ia .cia-paie-etat svg { flex: 0 0 auto; color: var(--brand-strong, #7fd8e8); }
.cia-paie-btn.is-sec { color: var(--brand-strong, #7fd8e8); background: transparent;
                       border-color: color-mix(in srgb, var(--brand, #00B1CF) 45%, transparent); }
.cia-paie-btn.is-sec:hover { background: color-mix(in srgb, var(--brand, #00B1CF) 12%, transparent); }

/* ── RECHARGE VOLONTAIRE (2026-10-02) : les packs dans la fiche des crédits, les deux gestes du détail de la pastille ─────── */
.csf-opts.is-packs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.csf-note { font-size: 11.5px; line-height: 1.45; color: var(--mut2, #8a97a2); }
/*  Achat payé par prélèvement SEPA, en attente de sa confirmation (2026-10-02) : la fiche le dit, ambre. */
.csf-chip.is-attente { color: var(--st-amber, #fbbf24); background: color-mix(in srgb, var(--st-amber, #fbbf24) 12%, transparent);
                       border-color: color-mix(in srgb, var(--st-amber, #fbbf24) 35%, transparent); }
.csf-foot.is-attente { justify-content: flex-end; }
.cia-solde-acts { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) { .csf-opts.is-packs { grid-template-columns: 1fr; } }

/* ── FICHE « CRÉDITS DE DÉMONSTRATION ÉPUISÉS » ──────────────────────────────────────────────────────────────────────── */
.cia-demo-note { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0 4px; padding: 10px 12px; border-radius: 10px;
                 font-size: 12.5px; line-height: 1.5; text-align: left; color: var(--tx2, #c2cdd6);
                 background: color-mix(in srgb, var(--brand, #00B1CF) 8%, transparent);
                 border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 24%, transparent); }
.cia-demo-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--brand-strong, #7fd8e8); }
html[data-theme="light"] .cia-demo-note { color: #24343d; }
.cia-demo-note b { color: var(--tx1, #e8eef2); }
html[data-theme="light"] .cia-demo-note b { color: #0f1d24; }
/* « Essayez sur vos comptes » (2026-10-01) : « Plus tard » à gauche, les deux gestes à droite ; sur un téléphone, les gestes passent
   à la ligne, à droite, sans déborder. */
.csf-foot.is-demo { flex-wrap: wrap; }
.csf-demo-act { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
.csf-foot.is-demo .csf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* Téléphone : les gestes en colonne, pleine largeur, « Déposer mon FEC » en premier, « Plus tard » en dernier. */
@media (max-width: 440px) {
    .csf-foot.is-demo { flex-direction: column-reverse; align-items: stretch; }
    .csf-demo-act { flex-direction: column-reverse; margin-left: 0; }
    .csf-foot.is-demo .csf-btn, .csf-foot.is-demo .csf-ghost { width: 100%; }
}