/* Carte Facile — app mobile, charte Margoterp (navy + doré, Plus Jakarta Sans) */

/* Theme wrapper — pleine largeur, masquer le titre de l'article */
.cf-fullwidth .mia-article-header,
.mia-article:has(.cf-app) .mia-article-header { display: none !important; }
.mia-article:has(.cf-app), .cf-fullwidth .mia-article { background:transparent !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; max-width:100% !important; }
.mia-page-content:has(.cf-app), .cf-fullwidth.mia-page-content { padding:0 !important; }
.mia-content-area:has(.cf-app), .cf-fullwidth .mia-content-area { max-width:100% !important; }

.cf-app{
  --cf-ink:#1B2A4A; --cf-ink-deep:#0F1A30; --cf-gold:#E8A838; --cf-gold-soft:#F0BC5A;
  --cf-bg:#F3F6FB; --cf-surface:#FFFFFF; --cf-surface-2:#F8FAFC; --cf-line:#E6EAF2;
  --cf-text:#1B2A4A; --cf-muted:#64748B; --cf-faint:#94A3B8;
  --cf-success:#16A34A; --cf-danger:#DC2626;
  --cf-radius:14px; --cf-radius-lg:20px;
  --cf-shadow:0 1px 2px rgba(16,26,48,.04), 0 8px 24px -12px rgba(16,26,48,.18);
  --cf-font:"Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family:var(--cf-font); color:var(--cf-text); -webkit-font-smoothing:antialiased; line-height:1.5;
  max-width:560px; margin:0 auto; background:var(--cf-bg);
  border-radius:var(--cf-radius-lg); overflow:hidden; box-shadow:var(--cf-shadow);
  display:flex; flex-direction:column; min-height:70vh;
}
@media (max-width:600px){
  .cf-app{ max-width:100%; margin:0; border-radius:0; box-shadow:none; min-height:calc(100vh - 60px); }
}
.cf-app *{box-sizing:border-box}

/* App bar */
.cf-appbar{ background:linear-gradient(140deg,var(--cf-ink) 0%, var(--cf-ink-deep) 100%); color:#fff; padding:18px 18px 16px; display:flex; align-items:center; gap:12px; }
.cf-logo{ width:42px; height:42px; border-radius:12px; flex-shrink:0; display:grid; place-items:center; background:linear-gradient(145deg,var(--cf-gold-soft),var(--cf-gold)); color:#1B2A4A; box-shadow:0 6px 16px -6px rgba(232,168,56,.6); }
.cf-appbar-txt h2{ margin:0; font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1.1; color:#fff; }
.cf-appbar-txt p{ margin:2px 0 0; font-size:12px; color:#B9C6E0; font-weight:500; }

/* Scroll content */
.cf-screen{ flex:1; padding:18px 16px 16px; display:flex; flex-direction:column; gap:18px; }
.cf-view{ display:flex; flex-direction:column; gap:18px; }
.cf-view[hidden]{ display:none; }

/* Labels */
.cf-label{ display:block; font-size:11px; font-weight:700; color:var(--cf-muted); text-transform:uppercase; letter-spacing:.09em; margin:0 0 9px 2px; }

/* Card chips */
.cf-card-selector{ }
.cf-cards-grid{ display:flex; gap:10px; overflow-x:auto; padding:2px 2px 8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.cf-cards-grid::-webkit-scrollbar{ height:0 }
.cf-card-chip{ flex-shrink:0; scroll-snap-align:start; min-width:150px; text-align:left; cursor:pointer; font-family:inherit; color:var(--cf-text);
  border:1.5px solid var(--cf-line); background:var(--cf-surface); border-radius:var(--cf-radius); padding:13px 14px;
  display:flex; flex-direction:column; gap:7px; transition:transform .12s,border-color .15s,box-shadow .2s; }
.cf-card-chip:hover{ border-color:#C9D4E6 }
.cf-card-chip:active{ transform:scale(.98) }
.cf-card-chip.active{ background:var(--cf-ink); border-color:var(--cf-ink); color:#fff; box-shadow:0 10px 24px -12px rgba(27,42,74,.55); }
.cf-card-icon{ font-size:22px; line-height:1 }
.cf-card-name{ font-size:14px; font-weight:700; letter-spacing:-.01em }
.cf-card-last4{ font-size:12.5px; font-weight:600; letter-spacing:.12em; font-variant-numeric:tabular-nums; opacity:.72 }

/* Month / Year */
.cf-month-row{ display:flex; gap:10px }
.cf-select-group{ flex:1; min-width:0 }
.cf-select{ width:100%; appearance:none; -webkit-appearance:none; font-family:inherit; font-size:15px; font-weight:600; color:var(--cf-text);
  background:var(--cf-surface); border:1.5px solid var(--cf-line); border-radius:var(--cf-radius); padding:12px 36px 12px 14px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
.cf-select:focus{ outline:none; border-color:var(--cf-ink); box-shadow:0 0 0 4px rgba(27,42,74,.12) }

/* Upload zone */
.cf-upload-zone{ border:2px dashed var(--cf-line); border-radius:var(--cf-radius-lg); background:linear-gradient(180deg,var(--cf-surface),var(--cf-surface-2));
  padding:26px 18px; text-align:center; cursor:pointer; transition:border-color .2s,box-shadow .2s,transform .2s; position:relative; }
.cf-upload-zone:hover{ border-color:#C9D4E6 }
.cf-upload-zone.dragover{ border-color:var(--cf-gold); box-shadow:0 0 0 5px rgba(232,168,56,.14); transform:scale(1.01) }
.cf-upload-inner{ pointer-events:none }
.cf-upload-inner button,.cf-upload-inner label,.cf-upload-inner input{ pointer-events:auto }
.cf-upload-icon{ width:56px; height:56px; border-radius:16px; margin:0 auto 12px; display:grid; place-items:center; background:rgba(27,42,74,.06); color:var(--cf-ink); font-size:26px }
.cf-upload-text{ font-size:16px; font-weight:700; color:var(--cf-text); margin:0 }
.cf-upload-hint{ font-size:12.5px; color:var(--cf-faint); margin:5px 0 16px }
.cf-upload-buttons{ display:flex; gap:10px; justify-content:center }

/* Buttons */
.cf-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 18px; border-radius:12px; font-size:14.5px; font-weight:700; font-family:inherit;
  border:1.5px solid var(--cf-line); background:var(--cf-surface); color:var(--cf-text); cursor:pointer; transition:transform .1s,background .15s,border-color .15s; white-space:nowrap; }
.cf-btn:active{ transform:scale(.97) }
.cf-btn-primary{ background:var(--cf-ink); color:#fff; border-color:var(--cf-ink); box-shadow:0 10px 22px -12px rgba(27,42,74,.5) }
.cf-btn-primary:hover{ filter:brightness(1.07) }
.cf-btn-camera svg{ color:var(--cf-gold) }
.cf-btn-gold{ background:var(--cf-gold); color:#10192E; border-color:var(--cf-gold) }
.cf-btn-danger{ background:var(--cf-danger); color:#fff; border-color:var(--cf-danger) }
.cf-btn-sm{ padding:9px 12px; font-size:13px; border-radius:9px }
.cf-upload-buttons .cf-btn{ flex:1 }

/* Progress */
.cf-progress{ text-align:center; padding:28px 16px; background:var(--cf-surface); border:1px solid var(--cf-line); border-radius:var(--cf-radius-lg) }
.cf-progress-icon{ font-size:34px; margin-bottom:8px; animation:cf-spin 2s linear infinite }
@keyframes cf-spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
.cf-progress-counter{ font-size:14px; font-weight:800; color:var(--cf-ink); margin:0 0 6px }
.cf-progress-file{ font-size:13px; color:var(--cf-muted); margin:0 0 12px; word-break:break-all }
.cf-progress-bar{ height:7px; background:var(--cf-line); border-radius:4px; overflow:hidden; margin-bottom:8px }
.cf-progress-bar::after{ content:''; display:block; height:100%; width:0; background:var(--cf-gold); border-radius:4px; animation:cf-pulse 1.5s ease-in-out infinite }
.cf-progress-bar.done::after{ width:100%; background:var(--cf-success); animation:none }
@keyframes cf-pulse{ 0%{width:10%} 50%{width:70%} 100%{width:10%} }
.cf-progress-status{ font-size:13px; color:var(--cf-faint); margin:0 }
.cf-batch-results{ margin-top:10px; text-align:left; max-height:180px; overflow-y:auto }

/* Scan preview */
.cf-preview{ background:var(--cf-surface); border:1px solid var(--cf-line); border-radius:var(--cf-radius-lg); padding:18px; text-align:center; box-shadow:var(--cf-shadow) }
.cf-preview-header h3{ font-size:15px; font-weight:800; color:var(--cf-ink); margin:0 0 8px }
.cf-preview-filename{ font-size:13px; color:var(--cf-muted); margin:0 }
.cf-page-count{ background:var(--cf-ink); color:#fff; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700 }
.cf-preview-frame{ background:var(--cf-surface-2); border:1px solid var(--cf-line); border-radius:12px; padding:12px; max-height:460px; overflow-y:auto; margin:12px 0 }
.cf-preview-frame canvas,.cf-preview-frame img{ max-width:100%; height:auto; display:block; margin:0 auto; border-radius:4px }
.cf-preview-pages{ display:flex; gap:8px; overflow-x:auto; padding:4px; -webkit-overflow-scrolling:touch }
.cf-preview-pages:empty{ display:none }
.cf-page-thumb{ flex-shrink:0; width:52px; height:68px; border-radius:8px; border:1.5px solid var(--cf-line); overflow:hidden; cursor:pointer; position:relative; transition:border-color .15s }
.cf-page-thumb.active{ border-color:var(--cf-gold); box-shadow:0 0 0 2px rgba(232,168,56,.25) }
.cf-page-thumb img,.cf-page-thumb canvas{ width:100%; height:100%; object-fit:cover }
.cf-page-thumb-num{ position:absolute; bottom:2px; right:2px; background:rgba(16,26,48,.7); color:#fff; font-size:10px; padding:0 5px; border-radius:4px; font-weight:700 }
.cf-btn-add-page{ background:color-mix(in srgb,var(--cf-gold) 10%, var(--cf-surface)); color:var(--cf-ink); border-color:color-mix(in srgb,var(--cf-gold) 50%, var(--cf-line)) }
.cf-preview-actions{ display:flex; gap:10px; justify-content:center }
.cf-preview-actions .cf-btn{ flex:1 }

/* Business reason */
.cf-reason-prompt{ margin:14px 0; text-align:left }
.cf-reason-toggle{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:12px 14px; background:color-mix(in srgb,var(--cf-gold) 9%, var(--cf-surface)); border:1px solid color-mix(in srgb,var(--cf-gold) 45%, transparent); border-radius:12px }
.cf-reason-toggle input[type="checkbox"]{ width:18px; height:18px; accent-color:var(--cf-ink); cursor:pointer }
.cf-reason-toggle-label{ font-size:14px; font-weight:700; color:var(--cf-ink) }
.cf-reason-fields{ margin-top:10px; padding:14px; background:var(--cf-surface-2); border:1px solid var(--cf-line); border-radius:12px }

/* Confirm */
.cf-confirm{ text-align:center; padding:28px 16px; background:#F0FDF4; border:1px solid #BBF7D0; border-radius:var(--cf-radius-lg) }
.cf-confirm-icon{ font-size:38px; margin-bottom:8px }
.cf-confirm-msg{ font-size:15px; color:var(--cf-text); margin:0 0 16px }

/* History */
.cf-history-header{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 11px }
.cf-history-title{ font-size:15px; font-weight:800; color:var(--cf-text); margin:0 }
.cf-history-count{ font-size:11px; font-weight:700; color:var(--cf-muted); background:var(--cf-surface); border:1px solid var(--cf-line); padding:3px 10px; border-radius:999px }
.cf-history-list{ display:flex; flex-direction:column; gap:9px }
.cf-receipt-card{ display:flex; align-items:center; gap:12px; padding:13px 14px; background:var(--cf-surface); border:1px solid var(--cf-line); border-radius:var(--cf-radius); cursor:pointer; transition:transform .1s,border-color .15s,box-shadow .2s }
.cf-receipt-card:hover{ border-color:#C9D4E6; box-shadow:var(--cf-shadow) }
.cf-receipt-card:active{ transform:scale(.99) }
.cf-receipt-icon{ font-size:24px; flex-shrink:0 }
.cf-receipt-info{ flex:1; min-width:0 }
.cf-receipt-name{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cf-receipt-meta{ font-size:12px; color:var(--cf-faint); margin-top:2px }
.cf-receipt-actions{ display:flex; gap:6px; flex-shrink:0 }
.cf-empty{ text-align:center; color:var(--cf-faint); font-size:14px; padding:24px }

/* Pagination */
.cf-pagination{ display:flex; justify-content:center; gap:6px; margin-top:12px; flex-wrap:wrap }
.cf-page-btn{ min-width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid var(--cf-line); border-radius:9px; background:var(--cf-surface); font-size:13px; font-family:inherit; cursor:pointer; transition:all .15s }
.cf-page-btn:hover{ background:var(--cf-surface-2) }
.cf-page-btn.active{ background:var(--cf-ink); color:#fff; border-color:var(--cf-ink) }

/* Card management (Mes cartes) */
.cf-cardmgmt-item{ display:flex; align-items:center; gap:13px; background:var(--cf-surface); border:1px solid var(--cf-line); border-radius:var(--cf-radius); padding:13px 14px; transition:border-color .15s,box-shadow .2s,opacity .16s,transform .16s }
.cf-cardmgmt-item:hover{ border-color:#C9D4E6; box-shadow:var(--cf-shadow) }
.cf-cardmgmt-visual{ width:54px; height:35px; border-radius:7px; flex-shrink:0; position:relative; overflow:hidden; background:linear-gradient(135deg,var(--cf-ink),var(--cf-ink-deep)); box-shadow:0 4px 10px -4px rgba(16,26,48,.5) }
.cf-cardmgmt-visual i{ position:absolute; top:7px; left:8px; width:13px; height:10px; border-radius:2px; background:linear-gradient(135deg,var(--cf-gold-soft),var(--cf-gold)) }
.cf-cardmgmt-visual b{ position:absolute; bottom:7px; left:8px; right:8px; height:3px; border-radius:2px; background:rgba(255,255,255,.3) }
.cf-cardmgmt-info{ flex:1; min-width:0 }
.cf-cardmgmt-name{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cf-cardmgmt-sub{ font-size:12px; color:var(--cf-faint); margin-top:2px; font-variant-numeric:tabular-nums; letter-spacing:.05em }
.cf-del-card{ width:38px; height:38px; border-radius:10px; border:1px solid var(--cf-line); background:var(--cf-surface); color:var(--cf-faint); display:grid; place-items:center; cursor:pointer; flex-shrink:0; transition:all .15s }
.cf-del-card:hover{ color:var(--cf-danger); border-color:#FCA5A5; background:#FEF2F2 }
.cf-addcard-btn{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:15px; border-radius:var(--cf-radius); border:1.5px dashed color-mix(in srgb,var(--cf-gold) 55%, var(--cf-line)); background:color-mix(in srgb,var(--cf-gold) 8%, var(--cf-surface)); color:var(--cf-ink); font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer; transition:all .15s }
.cf-addcard-btn:hover{ border-color:var(--cf-gold); background:color-mix(in srgb,var(--cf-gold) 15%, var(--cf-surface)) }
.cf-addcard-form{ background:var(--cf-surface); border:1px solid var(--cf-line); border-radius:var(--cf-radius-lg); padding:16px; display:flex; flex-direction:column; gap:13px; box-shadow:var(--cf-shadow) }
.cf-addcard-form h3{ margin:0; font-size:15px; font-weight:800 }
.cf-input-label{ font-size:11px; font-weight:700; color:var(--cf-muted); text-transform:uppercase; letter-spacing:.07em; margin:0 0 6px 2px; display:block }
.cf-input{ width:100%; font-family:inherit; font-size:15px; font-weight:600; color:var(--cf-text); background:var(--cf-surface-2); border:1.5px solid var(--cf-line); border-radius:12px; padding:12px 14px }
.cf-input::placeholder{ color:var(--cf-faint); font-weight:500 }
.cf-input:focus{ outline:none; border-color:var(--cf-ink); box-shadow:0 0 0 4px rgba(27,42,74,.1); background:var(--cf-surface) }
.cf-form-actions{ display:flex; gap:10px }
.cf-form-actions .cf-btn{ flex:1 }

/* Bottom tab bar */
.cf-tabbar{ flex-shrink:0; display:flex; gap:6px; background:var(--cf-surface); border-top:1px solid var(--cf-line); padding:9px 12px; position:sticky; bottom:0; }
.cf-tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:0; cursor:pointer; font-family:inherit; font-size:11px; font-weight:700; color:var(--cf-faint); padding:2px 4px; transition:color .15s }
.cf-tab-ic{ width:46px; height:28px; border-radius:9px; display:grid; place-items:center; transition:background .15s }
.cf-tab.active{ color:var(--cf-ink) }
.cf-tab.active .cf-tab-ic{ background:rgba(27,42,74,.08) }

/* Footer */
.cf-footer{ padding:18px 10px; border-top:1px solid var(--cf-line); text-align:center; display:flex; flex-direction:column; align-items:center; gap:7px }
.cf-footer-brand{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--cf-muted); font-weight:500 }
.cf-footer-brand b{ color:var(--cf-text); font-weight:800 }
.cf-footer-mark{ width:23px; height:23px; border-radius:7px; display:grid; place-items:center; background:linear-gradient(145deg,var(--cf-gold-soft),var(--cf-gold)); color:#1B2A4A; font-weight:800; font-size:13px }
.cf-footer-by{ margin:0; font-size:11px; color:var(--cf-faint); letter-spacing:.05em }
.cf-footer-by a{ color:var(--cf-ink); font-weight:700; text-decoration:none; border-bottom:1.5px solid color-mix(in srgb,var(--cf-gold) 60%, transparent); padding-bottom:1px }
.cf-footer-by a:hover{ border-bottom-color:var(--cf-gold) }

/* PDF viewer modal */
.cf-viewer{ position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:99999; display:flex; flex-direction:column }
.cf-viewer-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:#101A2E; color:#fff; flex-shrink:0; padding-top:max(12px,env(safe-area-inset-top)) }
.cf-viewer-header span{ font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cf-viewer-close{ background:none; border:none; color:#fff; font-size:28px; cursor:pointer; padding:0 8px }
.cf-viewer canvas{ flex:1; width:100%; object-fit:contain; overflow-y:auto }
.cf-viewer-nav{ display:flex; align-items:center; justify-content:center; gap:16px; padding:14px 10px; background:#101A2E; color:#fff; flex-shrink:0; padding-bottom:max(14px,env(safe-area-inset-bottom)) }
.cf-viewer-nav span{ font-size:14px; font-weight:700 }
.cf-viewer-btn{ display:flex; align-items:center; justify-content:center; width:56px; height:46px; border-radius:11px; background:#28344D; border:2px solid #3B4A68; cursor:pointer; transition:all .15s }
.cf-viewer-btn:hover{ background:#3B4A68; border-color:var(--cf-gold) }

/* Toast */
.cf-toast-container{ position:fixed; bottom:20px; left:16px; right:16px; z-index:999999; display:flex; flex-direction:column; gap:8px; align-items:center }
.cf-toast{ padding:12px 18px; border-radius:11px; font-size:13.5px; font-weight:600; color:#fff; box-shadow:0 10px 28px -10px rgba(0,0,0,.4); animation:cf-fadein .3s; max-width:360px }
.cf-toast-success{ background:var(--cf-success) } .cf-toast-error{ background:var(--cf-danger) } .cf-toast-info{ background:var(--cf-ink) }
@keyframes cf-fadein{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

@media (max-width:600px){
  .cf-screen{ padding:16px 14px 14px }
  .cf-appbar-txt h2{ font-size:18px } .cf-logo{ width:38px; height:38px }
  .cf-upload-buttons{ flex-wrap:wrap }
}
@media (prefers-reduced-motion:reduce){ .cf-app *{ animation:none!important; transition:none!important } }

/* ── Données extraites (OCR) ─────────────────────────────────────────── */
.cf-receipt{ margin-bottom:8px; }
.cf-receipt .cf-receipt-card{ margin-bottom:0; }
.cf-receipt-xtr{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:6px; font-size:12.5px; }
.cf-xtr-sup{ font-weight:700; color:var(--cf-ink); }
.cf-xtr-sup em{ color:var(--cf-faint); font-weight:600; font-style:normal; }
.cf-xtr-amt{ font-weight:800; color:var(--cf-ink-deep); font-variant-numeric:tabular-nums; }
.cf-xtr-date{ color:var(--cf-muted); font-variant-numeric:tabular-nums; }
.cf-xtr-badge{ margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.03em; padding:2px 8px; border-radius:999px; background:#FEF3E2; color:#B4761A; }
.cf-xtr-badge.cf-xtr-manual{ background:#E7F6EC; color:var(--cf-success); }

.cf-btn-edit{ background:var(--cf-surface-2); }

.cf-receipt-edit{ background:var(--cf-surface-2); border:1px solid var(--cf-line); border-top:0; border-radius:0 0 var(--cf-radius) var(--cf-radius); padding:12px; margin-top:-2px; }
.cf-me-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.cf-me-grid label{ display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:700; color:var(--cf-muted); text-transform:uppercase; letter-spacing:.06em; }
.cf-me-grid label.cf-me-wide{ grid-column:1 / -1; }
.cf-me-grid .cf-input{ margin:0; text-transform:none; letter-spacing:normal; }
.cf-me-actions{ display:flex; gap:8px; margin-top:10px; }
@media (max-width:420px){ .cf-me-grid{ grid-template-columns:1fr; } }

/* ── Historique épuré (données extraites) ────────────────────────────── */
.cf-rc-head{ display:flex; align-items:baseline; gap:10px; }
.cf-rc-sup{ font-weight:700; color:var(--cf-ink); font-size:14.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cf-rc-sup .cf-rc-miss{ color:var(--cf-faint); font-weight:600; font-style:normal; }
.cf-rc-amt{ font-weight:800; color:var(--cf-ink-deep); font-size:14.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cf-rc-sub{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:3px; font-size:12px; color:var(--cf-muted); }
.cf-rc-sub .cf-rc-date, .cf-rc-sub .cf-rc-tax{ font-variant-numeric:tabular-nums; }
.cf-rc-tax{ color:var(--cf-muted); }
.cf-rc-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-left:auto; flex-shrink:0; }
.cf-rc-dot-auto{ background:var(--cf-gold); }
.cf-rc-dot-ok{ background:var(--cf-success); }
.cf-rc-file{ margin-top:4px; font-size:11px; color:var(--cf-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cf-rc-pending{ color:var(--cf-gold); font-weight:600; }
.cf-rc-failed{ color:var(--cf-faint); font-weight:600; }

/* ── Forfaits ────────────────────────────────────────────────────────── */
.cf-plans{ display:flex; flex-direction:column; gap:12px; }
.cf-plan-card{ border:1px solid var(--cf-line); border-radius:var(--cf-radius); padding:16px; background:var(--cf-surface); }
.cf-plan-card.current{ border-color:var(--cf-gold); box-shadow:0 0 0 3px rgba(232,168,56,.16); }
.cf-plan-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.cf-plan-name{ font-weight:800; font-size:17px; color:var(--cf-ink); letter-spacing:-.01em; }
.cf-plan-price{ font-weight:800; color:var(--cf-ink-deep); font-variant-numeric:tabular-nums; }
.cf-plan-feats{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:6px; }
.cf-plan-feats li{ position:relative; padding-left:22px; font-size:13.5px; color:var(--cf-text); }
.cf-plan-feats li::before{ content:""; position:absolute; left:4px; top:7px; width:9px; height:5px; border-left:2px solid var(--cf-gold); border-bottom:2px solid var(--cf-gold); transform:rotate(-45deg); }
.cf-plan-action{ min-height:34px; display:flex; align-items:center; }
.cf-plan-badge{ font-size:12px; font-weight:700; color:var(--cf-success); background:#E7F6EC; padding:5px 12px; border-radius:999px; }
.cf-plan-action .cf-btn{ width:100%; justify-content:center; }
.cf-plan-portal{ width:100%; justify-content:center; margin-top:14px; }
.cf-plan-note{ font-size:12px; color:var(--cf-muted); text-align:center; margin-top:14px; line-height:1.5; }

/* ── Jauges d'utilisation du forfait ─────────────────────────────────── */
.cf-usage{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.cf-gauge{ background:var(--cf-surface); border:1px solid var(--cf-line); border-radius:var(--cf-radius); padding:12px 14px; }
.cf-gauge-top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; font-size:13px; }
.cf-gauge-top span:first-child{ font-weight:700; color:var(--cf-ink); }
.cf-gauge-top span:last-child{ color:var(--cf-muted); font-variant-numeric:tabular-nums; font-weight:600; }
.cf-gauge-bar{ height:8px; border-radius:999px; background:var(--cf-line); overflow:hidden; }
.cf-gauge-bar > i{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--cf-gold-soft),var(--cf-gold)); transition:width .4s ease; }
.cf-gauge-bar.cf-gauge-near > i{ background:linear-gradient(90deg,#F0BC5A,#E8912F); }
.cf-gauge-bar.cf-gauge-warn > i{ background:linear-gradient(90deg,#F08A3C,var(--cf-danger)); }
.cf-gauge-bar.cf-gauge-inf{ background:linear-gradient(90deg,rgba(232,168,56,.25),rgba(232,168,56,.08)); }
.cf-gauge-bar.cf-gauge-inf > i{ width:100%; background:repeating-linear-gradient(45deg,rgba(232,168,56,.5) 0 6px,transparent 6px 12px); }

/* ── Icône usager + profil ───────────────────────────────────────────── */
.cf-appbar{ position:relative; }
.cf-appbar .cf-appbar-txt{ flex:1; min-width:0; }
.cf-user-btn{ flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,.35); background:rgba(255,255,255,.12); color:#fff; font-weight:800; font-size:13px; letter-spacing:.02em; cursor:pointer; display:grid; place-items:center; transition:background .15s,border-color .15s; }
.cf-user-btn:hover{ background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.6); }

.cf-back{ display:inline-flex; align-items:center; gap:4px; background:none; border:0; color:var(--cf-muted); font:inherit; font-weight:600; font-size:13px; cursor:pointer; padding:4px 0; margin-bottom:12px; }
.cf-back:hover{ color:var(--cf-ink); }

.cf-profile{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.cf-profile-avatar{ width:72px; height:72px; border-radius:50%; background:linear-gradient(145deg,var(--cf-gold-soft),var(--cf-gold)); color:var(--cf-ink); font-weight:800; font-size:26px; display:grid; place-items:center; box-shadow:0 8px 20px -8px rgba(232,168,56,.6); }
.cf-profile-name{ margin:12px 0 4px; font-size:19px; color:var(--cf-ink); }
.cf-profile-plan{ font-size:12px; font-weight:700; color:#B4761A; background:#FEF3E2; padding:3px 12px; border-radius:999px; }
.cf-profile-info{ width:100%; margin:20px 0 0; display:flex; flex-direction:column; gap:1px; background:var(--cf-line); border-radius:var(--cf-radius); overflow:hidden; border:1px solid var(--cf-line); }
.cf-profile-info > div{ display:flex; justify-content:space-between; gap:12px; padding:12px 14px; background:var(--cf-surface); font-size:13.5px; }
.cf-profile-info dt{ color:var(--cf-muted); font-weight:600; margin:0; }
.cf-profile-info dd{ margin:0; color:var(--cf-ink); font-weight:600; text-align:right; word-break:break-word; }
.cf-profile-logout{ width:100%; justify-content:center; margin-top:16px; }

.cf-danger-zone{ width:100%; margin-top:24px; padding:16px; border:1px solid #F3C9C9; border-radius:var(--cf-radius); background:#FEF6F6; text-align:left; }
.cf-danger-zone h4{ margin:0 0 6px; color:var(--cf-danger); font-size:14px; }
.cf-danger-zone p{ margin:0 0 12px; font-size:12.5px; color:var(--cf-muted); line-height:1.5; }
.cf-btn-danger{ background:var(--cf-danger); color:#fff; border-color:var(--cf-danger); width:100%; justify-content:center; }
.cf-btn-danger:hover{ filter:brightness(1.05); }
.cf-del-confirm{ margin-top:12px; }
.cf-del-confirm .cf-input{ margin-top:4px; }