/* ================================================================
 * Calculateur e-Facture — OperaFlux (tokens + premium_landing)
 * ================================================================ */

/* Hero outil : plus court, preuve intégrée, quiz qui remonte */
.efac-page .efac-hero {
  padding-bottom: 72px;
}
.efac-page .efac-hero h1 {
  font-size: clamp(1.65rem, 5.5vw, 2.55rem);
  max-width: 22ch;
}
.efac-page .efac-hero > .reveal { max-width: 720px; }

.efac-proof {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.efac-proof li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  min-width: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.efac-proof li:last-child { border-right: 0; }
.efac-proof strong {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.15;
}
.efac-proof span {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 500;
  color: var(--landing-on-ink-soft, #94a3b8);
  line-height: 1.35;
}

.efac-section {
  max-width: 720px;
  margin: -16px auto 0;
  padding: 0 var(--container-padding, 24px) 1rem;
  position: relative;
  z-index: 2;
}
.efac-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--sf-radius-xl, 16px);
  padding: 1.75rem 1.65rem;
  box-shadow: 0 24px 48px -28px rgba(15, 23, 42, 0.35);
}
.efac-noscript {
  text-align: center;
  padding: 2rem 0.5rem;
  color: var(--landing-text-muted, #64748b);
  margin: 0;
}
.efac-noscript a { color: var(--sf-color-cta, #2563eb); }

@media (max-width: 720px) {
  .efac-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .efac-proof li:nth-child(2) { border-right: 0; }
  .efac-proof li:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
}
@media (max-width: 640px) {
  .efac-page .efac-hero { padding-bottom: 40px; }
  .efac-section {
    margin-top: 0;
    padding-inline: max(var(--container-padding, 16px), env(safe-area-inset-left, 0px))
      max(var(--container-padding, 16px), env(safe-area-inset-right, 0px));
  }
  .efac-card { padding: 1.35rem 1.15rem; }
  .efac-proof li { padding: 0.75rem 0.85rem; }
  :is(.efac-field input, .efac-field select, .efac-export-cta) {
    min-height: var(--sf-touch-min, 44px);
    font-size: var(--font-size-base, 1rem);
  }
}

/* ── Progress bar (flux normal, pas d’étiquette flottante) ── */
.efac-prog {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0 0 1rem;
  background: none;
  height: auto;
}
.efac-prog-meta {
  display: flex;
  justify-content: flex-end;
}
.efac-prog-meta span {
  font-size: 0.72rem;
  color: var(--sf-color-text-muted, #64748b);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.efac-prog-track {
  height: 4px;
  border-radius: 9999px;
  background: var(--sf-color-border-subtle, #e2e8f0);
  overflow: hidden;
}
.efac-prog-bar {
  height: 100%;
  border-radius: 9999px;
  background: var(--sf-color-cta, #2563eb);
  transition: width 0.35s var(--sf-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* ── Étape & Options ── */
.efac-step { animation: efacFade 0.25s ease-out; }
@keyframes efacFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.efac-step h2 {
  font-size: var(--font-size-xl, 1.25rem);
  font-weight: 700;
  color: var(--sf-color-text, #0f172a);
  margin-bottom: 0.35rem;
  line-height: 1.35;
}
.efac-hint {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--sf-color-text-muted, #64748b);
  margin-bottom: 1.5rem;
}

.efac-opts { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.75rem; }
.efac-opt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.15rem;
  border-radius: var(--sf-radius-lg, 12px);
  border: 1.5px solid var(--sf-color-border, #e2e8f0);
  background: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: var(--font-size-sm, 0.92rem);
  color: var(--sf-color-text, #0f172a);
  font-weight: 500;
  user-select: none;
}
.efac-opt input[type=radio] { accent-color: var(--sf-color-cta, #2563eb); width: 17px; height: 17px; flex-shrink: 0; }
.efac-opt:hover {
  border-color: var(--sf-color-cta, #2563eb);
  background: var(--sf-color-cta-soft, rgba(37, 99, 235, 0.04));
  transform: translateX(2px);
}
.efac-opt.is-selected {
  border-color: var(--sf-color-cta, #2563eb) !important;
  background: var(--sf-color-cta-soft, rgba(37, 99, 235, 0.08)) !important;
  box-shadow: 0 0 0 1px var(--sf-color-cta, #2563eb);
}

.efac-nav { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1rem; }

/* ── Formulaire Lead ── */
.efac-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
@media (max-width: 540px) { .efac-row { grid-template-columns: 1fr; } }
.efac-field { display: flex; flex-direction: column; gap: 0.35rem; }
.efac-field span {
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 700;
  color: var(--sf-color-text-secondary, #334155);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.efac-field input {
  padding: 0.7rem 0.9rem;
  border-radius: var(--sf-radius-md, 8px);
  border: 1.5px solid var(--sf-color-border, #cbd5e1);
  background: #ffffff;
  color: var(--sf-color-text, #0f172a);
  font-size: var(--font-size-sm, 0.92rem);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.efac-field input:focus {
  border-color: var(--sf-color-cta, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.efac-check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--font-size-xs, 0.8rem);
  color: var(--sf-color-text-muted, #64748b);
  line-height: 1.5;
  margin-top: 0.85rem;
}
.efac-check input { margin-top: 2px; flex-shrink: 0; accent-color: var(--sf-color-cta, #2563eb); }
.efac-check a { color: var(--sf-color-cta, #2563eb); text-decoration: underline !important; }
.efac-err {
  font-size: var(--font-size-xs, 0.82rem);
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: var(--sf-radius-md, 8px);
  padding: 0.5rem 0.75rem;
  margin-top: 0.6rem;
}
.efac-skip { text-align: center; margin-top: 0.75rem; }
.efac-skip a { font-size: var(--font-size-xs, 0.8rem); color: var(--sf-color-text-muted, #64748b); text-decoration: underline !important; }

/* ── Diagnostic Résultat ── */
.efac-result { animation: efacFade 0.3s ease-out; }
.efac-result h2 { font-size: var(--font-size-2xl, 1.45rem); font-weight: 800; color: var(--sf-color-text, #0f172a); margin-bottom: 0.4rem; }
.efac-email-ok { font-size: var(--font-size-sm, 0.85rem); color: #15803d; margin-bottom: 1rem; }

/* Score de maturité globale */
.efac-score-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--sf-radius-lg, 12px);
  background: var(--sf-color-surface-subtle, #f8fafc);
  border: 1.5px solid var(--sf-color-border, #e2e8f0);
  margin-bottom: 1.25rem;
}
@media (max-width: 540px) {
  .efac-score-header { flex-direction: column; align-items: flex-start; }
}
.efac-score-sub {
  margin: 0.35rem 0 0;
  font-size: var(--font-size-xs, 0.84rem);
  color: var(--sf-color-text-secondary, #475569);
  font-weight: 500;
}
.efac-score-pill {
  width: 140px;
  height: 8px;
  background: var(--sf-color-border, #cbd5e1);
  border-radius: var(--sf-radius-pill, 9999px);
  overflow: hidden;
  flex-shrink: 0;
}
.efac-score-fill {
  height: 100%;
  border-radius: var(--sf-radius-pill, 9999px);
  background: linear-gradient(90deg, var(--sf-color-cta, #2563eb), #10b981);
  transition: width 0.6s ease-out;
}

/* Échéances */
.efac-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.25rem 0; }
@media (max-width: 540px) { .efac-dates { grid-template-columns: 1fr; } }
.efac-date-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--sf-radius-lg, 12px);
  background: var(--sf-color-surface-subtle, #f8fafc);
  border: 1.5px solid var(--sf-color-border, #e2e8f0);
}
.efac-date-card span { font-size: var(--font-size-xs, 0.75rem); color: var(--sf-color-text-muted, #64748b); font-weight: 700; text-transform: uppercase; }
.efac-date-card strong { font-size: var(--font-size-lg, 1.1rem); color: var(--sf-color-text, #0f172a); }
.efac-date-card em { font-size: var(--font-size-xs, 0.82rem); color: var(--sf-color-text-muted, #64748b); font-style: normal; }

.efac-date-card.efac-risk--danger { border-color: rgba(220, 38, 38, 0.35); background: rgba(220, 38, 38, 0.04); }
.efac-date-card.efac-risk--danger strong { color: #b91c1c; }
.efac-date-card.efac-risk--warning { border-color: rgba(217, 119, 6, 0.35); background: rgba(217, 119, 6, 0.04); }
.efac-date-card.efac-risk--warning strong { color: #b45309; }

.efac-penalty {
  padding: 0.9rem 1.1rem;
  border-radius: var(--sf-radius-lg, 12px);
  background: rgba(220, 38, 38, 0.06);
  border: 1.5px solid rgba(220, 38, 38, 0.2);
  font-size: var(--font-size-sm, 0.88rem);
  color: #991b1b;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

/* ── Audit 4 Piliers ── */
.efac-pillars-section {
  margin: 1.5rem 0;
}
.efac-pillars-intro {
  margin-bottom: 1rem;
}
.efac-pillars-intro h3 {
  font-size: var(--font-size-lg, 1.15rem);
  font-weight: 700;
  color: var(--sf-color-text, #0f172a);
  margin: 0.35rem 0 0.25rem;
}
.efac-pillars-intro p {
  font-size: var(--font-size-sm, 0.88rem);
  color: var(--sf-color-text-muted, #64748b);
  margin: 0;
}
.efac-stack-tag {
  font-size: var(--font-size-2xs, 0.68rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: var(--sf-radius-pill, 9999px);
  background: var(--sf-color-cta-soft, rgba(37, 99, 235, 0.08));
  color: var(--sf-color-cta, #2563eb);
  border: 1px solid var(--sf-color-cta-border, rgba(37, 99, 235, 0.2));
}

.efac-pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 680px) {
  .efac-pillars-grid { grid-template-columns: 1fr; }
}

.efac-pillar-card {
  padding: 1.15rem 1.25rem;
  border-radius: var(--sf-radius-lg, 12px);
  background: #ffffff;
  border: 1.5px solid var(--sf-color-border, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.efac-pillar-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(15, 23, 42, 0.06));
}
.efac-pillar-card.efac-pillar--danger {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.02);
}
.efac-pillar-card.efac-pillar--warning {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.02);
}
.efac-pillar-card.efac-pillar--optimal {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.02);
}

.efac-pillar-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.efac-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--sf-radius-md, 8px);
  background: var(--sf-color-surface-subtle, #f1f5f9);
  color: var(--sf-color-text-secondary, #334155);
  flex-shrink: 0;
  border: 1px solid var(--sf-color-border-subtle, #e2e8f0);
}
.efac-pillar-icon svg {
  width: 17px;
  height: 17px;
}
.efac-pillar--optimal .efac-pillar-icon {
  background: rgba(16, 185, 129, 0.08);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.2);
}
.efac-pillar--warning .efac-pillar-icon {
  background: rgba(245, 158, 11, 0.08);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.2);
}
.efac-pillar--danger .efac-pillar-icon {
  background: rgba(239, 68, 68, 0.08);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.2);
}
.efac-pillar-titles {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.efac-pillar-titles strong {
  font-size: var(--font-size-sm, 0.92rem);
  color: var(--sf-color-text, #0f172a);
}
.efac-pillar-badge {
  font-size: var(--font-size-2xs, 0.68rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.45rem;
  border-radius: var(--sf-radius-pill, 9999px);
  width: fit-content;
}
.efac-pillar-badge--danger {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
.efac-pillar-badge--warning {
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
}
.efac-pillar-badge--optimal {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}

.efac-pillar-risk {
  font-size: var(--font-size-xs, 0.83rem);
  color: var(--sf-color-text-secondary, #475569);
  line-height: 1.45;
  margin: 0;
}
.efac-pillar-sol {
  margin-top: auto;
  padding: 0.65rem 0.8rem;
  border-radius: var(--sf-radius-md, 8px);
  background: var(--sf-color-surface-subtle, #f8fafc);
  border: 1px solid var(--sf-color-border-subtle, #e2e8f0);
  font-size: var(--font-size-xs, 0.82rem);
  color: var(--sf-color-text, #0f172a);
  line-height: 1.45;
}

/* ── Comparatif Économique Tout-en-Un ── */
.efac-comparison-card {
  padding: 1.35rem 1.5rem;
  border-radius: var(--sf-radius-lg, 12px);
  background: var(--sf-color-cta-soft, rgba(37, 99, 235, 0.04));
  border: 1.5px solid var(--sf-color-cta-border, rgba(37, 99, 235, 0.22));
  margin: 1.5rem 0;
}
.efac-comparison-header h3 {
  font-size: var(--font-size-lg, 1.15rem);
  font-weight: 700;
  color: var(--sf-color-text, #0f172a);
  margin: 0.35rem 0 0.25rem;
}
.efac-comparison-header p {
  font-size: var(--font-size-sm, 0.88rem);
  color: var(--sf-color-text-muted, #64748b);
  margin: 0 0 1rem;
}
.efac-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (max-width: 640px) {
  .efac-comparison-grid { grid-template-columns: 1fr; }
}
.efac-compare-col {
  padding: 1.1rem;
  border-radius: var(--sf-radius-md, 10px);
  background: #ffffff;
  border: 1px solid var(--sf-color-border, #e2e8f0);
}
.efac-compare-col h4 {
  font-size: var(--font-size-sm, 0.92rem);
  font-weight: 700;
  margin: 0 0 0.75rem;
}
.efac-compare-col--bad h4 { color: #b91c1c; }
.efac-compare-col--good {
  border-color: var(--sf-color-cta, #2563eb);
  box-shadow: 0 4px 16px -4px rgba(37, 99, 235, 0.15);
}
.efac-compare-col--good h4 { color: var(--sf-color-cta, #2563eb); }
.efac-compare-col ul {
  margin: 0;
  padding-left: 1.15rem;
}
.efac-compare-col li {
  font-size: var(--font-size-xs, 0.83rem);
  color: var(--sf-color-text-secondary, #334155);
  line-height: 1.5;
  margin-bottom: 0.45rem;
}
.efac-compare-col mark {
  background: rgba(37, 99, 235, 0.12);
  color: var(--sf-color-cta, #2563eb);
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

/* ── Actions & Nav ── */
.efac-actions {
  padding: 1.2rem 1.35rem;
  border-radius: var(--sf-radius-lg, 12px);
  background: var(--sf-color-surface-subtle, #f8fafc);
  border: 1.5px solid var(--sf-color-border, #e2e8f0);
  margin-bottom: 1.5rem;
}
.efac-actions h3 { font-size: var(--font-size-base, 1rem); font-weight: 700; color: var(--sf-color-text, #0f172a); margin-bottom: 0.65rem; }
.efac-actions ol { padding-left: 1.25rem; margin: 0; }
.efac-actions li { font-size: var(--font-size-sm, 0.88rem); color: var(--sf-color-text-secondary, #334155); line-height: 1.55; margin-bottom: 0.4rem; }

.efac-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin: 1.5rem 0 1rem; }
.efac-restart {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--sf-color-text-muted, #64748b);
  font-size: var(--font-size-xs, 0.8rem);
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.2s;
}
.efac-restart:hover { color: var(--sf-color-text, #0f172a); }

.efac-bridge {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.efac-bridge .btn-premium { width: 100%; justify-content: center; }

.efac-export {
  margin: 1.5rem 0 0.5rem;
  border-radius: var(--sf-radius-xl, 16px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(165deg, #0f172a 0%, #1e293b 55%, #0f172a 100%);
  color: #f8fafc;
  overflow: hidden;
  box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.55);
}
.efac-export-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.4rem 1.5rem 1.15rem;
  position: relative;
}
.efac-export-hero::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #b48e46, #d4af6a);
}
.efac-export-copy { flex: 1; min-width: 0; }
.efac-export-copy .efac-stack-tag {
  background: rgba(180, 142, 70, 0.18);
  color: #e8d5a8;
  border-color: rgba(180, 142, 70, 0.35);
}
.efac-export-copy h3 {
  font-size: var(--font-size-lg, 1.15rem);
  font-weight: 750;
  margin: 0.45rem 0 0.35rem;
  color: #fff;
  letter-spacing: -0.01em;
}
.efac-export-copy p {
  margin: 0;
  font-size: var(--font-size-sm, 0.88rem);
  color: #94a3b8;
  line-height: 1.5;
  max-width: 36rem;
}
.efac-export-cta {
  flex-shrink: 0;
  min-height: 44px;
  background: linear-gradient(135deg, #b48e46, #d4af6a) !important;
  border: none !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 20px -10px rgba(180, 142, 70, 0.8);
}
.efac-export-cta:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.efac-export-cta:disabled {
  opacity: 0.75;
  cursor: wait;
}
.efac-share {
  margin: 0;
  padding: 0.9rem 1.5rem 1.15rem;
  border: none;
  border-top: 1px solid rgba(248, 250, 252, 0.08);
  background: transparent;
  border-radius: 0;
}
.efac-share-label {
  margin: 0;
  font-size: var(--font-size-2xs, 0.68rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}
.efac-share-url {
  margin: 0.35rem 0 0;
  font-size: var(--font-size-xs, 0.8rem);
  color: #e8d5a8;
  font-weight: 600;
  letter-spacing: 0.01em;
  word-break: break-all;
}
.efac-share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}
.efac-share-row .btn-premium {
  background: rgba(248, 250, 252, 0.06) !important;
  border-color: rgba(248, 250, 252, 0.14) !important;
  color: #e2e8f0 !important;
}
.efac-share-row .btn-premium:hover {
  background: rgba(248, 250, 252, 0.12) !important;
  border-color: rgba(212, 175, 106, 0.45) !important;
}
.efac-share-msg {
  margin: 0;
  padding: 0 1.5rem 1.1rem;
  font-size: var(--font-size-xs, 0.8rem);
  color: #d4af6a;
  font-weight: 600;
}
@media (max-width: 640px) {
  .efac-export-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .efac-export-cta { width: 100%; justify-content: center; }
}
.efac-disclaimer,
.efac-source {
  font-size: var(--font-size-xs, 0.8rem);
  color: var(--sf-color-text-muted, #64748b);
  line-height: 1.5;
  text-align: center;
  margin: 1rem auto 0;
  max-width: 640px;
}
.efac-disclaimer a,
.efac-source a { color: var(--sf-color-cta, #2563eb); }

/* ── Guide evergreen (page vendeuse + éditoriale) ── */
.efac-guide-hero .hero-kicker { margin-bottom: 0.75rem; text-align: center; }
.efac-guide-hero h1 {
  max-width: min(48rem, 100%);
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.02em;
}
.efac-guide-hero-meta {
  margin: 1.1rem 0 0;
  font-size: var(--font-size-xs, 0.8rem);
  color: var(--landing-text-muted, #64748b);
  letter-spacing: 0.02em;
}
.efac-guide-proof {
  margin-top: -28px;
  position: relative;
  z-index: 2;
}
.efac-guide-band {
  max-width: 820px;
  margin: 0.5rem auto 0;
  padding: 0 1.25rem;
}
.efac-guide-band-inner {
  padding: 1.75rem 1.75rem 1.85rem;
  border-radius: var(--sf-radius-xl, 16px);
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  color: #e2e8f0;
  box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.55);
}
.efac-guide-band-inner .ai-tag {
  color: #93c5fd;
  background: rgba(147, 197, 253, 0.12);
  border-color: transparent;
}
.efac-guide-band-inner h2 {
  margin: 0.5rem 0 0.75rem;
  font-family: var(--sf-font-display, inherit);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  letter-spacing: -0.015em;
}
.efac-guide-band-inner p {
  margin: 0;
  font-size: var(--font-size-base, 1rem);
  line-height: 1.65;
  color: #cbd5e1;
}
.efac-guide-inline-cta {
  text-align: center;
  margin: 1.5rem auto 0;
  max-width: 36rem;
  font-size: var(--font-size-base, 1rem);
  color: var(--landing-text-muted, #64748b);
}
.efac-guide-inline-cta a {
  color: var(--sf-color-cta, #2563eb);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.efac-guide-inline-cta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.efac-guide-article {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 0.5rem;
}
.efac-guide-article .article-body {
  max-width: 42rem;
}
.efac-guide-article .article-content h2 {
  margin-top: 2.25rem;
}
.efac-guide-article .article-content > h2:first-child {
  margin-top: 0;
}
.efac-guide-steps {
  margin: 1.25rem 0 1.75rem;
  padding: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
}
.efac-guide-step {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.85rem 1rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1);
}
.efac-guide-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--sf-color-cta, #2563eb);
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex-shrink: 0;
}
.efac-guide-step p {
  margin: 0.2rem 0 0 !important;
  color: var(--landing-text, #0f172a);
  font-size: var(--font-size-base, 1rem);
  line-height: 1.55;
}
.efac-guide-step strong {
  color: var(--landing-text, #0f172a);
  font-weight: 650;
}
@media (max-width: 640px) {
  .efac-guide-hero h1 { max-width: none; }
  .efac-guide-band-inner { padding: 1.35rem 1.25rem; }
  .efac-guide-inline-cta a { white-space: normal; }
  .efac-guide-step { grid-template-columns: 1.75rem 1fr; gap: 0.65rem 0.75rem; }
  .efac-guide-step-num { width: 1.75rem; height: 1.75rem; font-size: 0.8rem; }
}

/* Hub outils (oft-*/clm-*) — bundle avec efacture_calculator.css */

/* --- Hero Outils Métiers (Centrage et typographie) --- */
.pricing-hero.oft-hero {
  text-align: center;
  padding-bottom: 3.5rem;
}
.pricing-hero.oft-hero > .reveal,
.pricing-hero.oft-hero > div {
  max-width: min(56rem, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pricing-hero.oft-hero h1 {
  text-align: center;
  max-width: min(48rem, 100%);
  margin: 0 auto 14px;
}
.pricing-hero.oft-hero .oft-hero-desc,
.pricing-hero.oft-hero p {
  text-align: center;
  max-width: min(44rem, 100%);
  margin: 0 auto;
  color: var(--landing-on-ink-soft, #94a3b8);
  font-size: var(--font-size-base, 1rem);
  line-height: 1.6;
}

/* Badges de réassurance */
.oft-hero-proof {
  list-style: none;
  margin: 1.75rem auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  max-width: 760px;
  width: 100%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.oft-hero-proof li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.oft-hero-proof li:last-child {
  border-right: 0;
}
.oft-hero-proof strong {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
}
.oft-hero-proof span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--landing-on-ink-soft, #94a3b8);
  line-height: 1.3;
}
/* --- Section Conteneur & Workbench Central --- */
.oft-workbench-section {
  position: relative;
  z-index: 2;
  margin-top: -28px;
  padding-bottom: 3.5rem;
}
.oft-container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--landing-gutter, 24px);
  box-sizing: border-box;
}

/* --- Barre de sélection & Navigation Sticky Ergonomique --- */
.oft-sticky-nav {
  position: sticky;
  top: 14px;
  z-index: 45;
  margin-bottom: 2rem;
}
.oft-selector-panel {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--sf-radius-xl, 18px);
  padding: 1rem 1.35rem 0.85rem;
  box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
}
.oft-selector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding-bottom: 0.5rem;
}
.oft-selector-title {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sf-color-primary, #0f172a);
}
.oft-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: oftPulse 2s infinite;
  display: inline-block;
}
@keyframes oftPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
.oft-selector-title .badge-free {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 99px;
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
  font-size: 0.6875rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.oft-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.oft-btn-quick-pdf {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 0.4rem 0.85rem;
  border-radius: 99px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: all 0.15s ease;
}
.oft-btn-quick-pdf:hover {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.2);
}
.oft-btn-quick-pdf:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* --- 1. Piliers métiers --- */
.oft-pillar-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  background: #f1f5f9;
  padding: 0.35rem;
  border-radius: 14px;
  margin-bottom: 0.75rem;
}
.oft-pillar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: transparent;
  border: 1px solid transparent;
  color: #64748b;
  font-size: 0.835rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
  white-space: nowrap;
  touch-action: manipulation;
}
.oft-pillar-btn .oft-tab-icon {
  flex-shrink: 0;
  color: #64748b;
  transition: color 0.15s ease;
}
.oft-pillar-count {
  font-size: 0.6875rem;
  font-weight: 700;
  background: rgba(148, 163, 184, 0.2);
  color: #475569;
  padding: 0.1rem 0.45rem;
  border-radius: 99px;
  line-height: 1.2;
}
.oft-pillar-btn:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.6);
}
.oft-pillar-btn:hover .oft-tab-icon {
  color: #0f172a;
}
.oft-pillar-btn.is-active {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(226, 232, 240, 0.8);
  box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.1);
}
.oft-pillar-btn.is-active .oft-tab-icon {
  color: #2563eb;
}
.oft-pillar-btn.is-active .oft-pillar-count {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

/* --- 2. Sous-barre des outils du pilier actif (Pills compactes, 1 seule ligne, 0 wrap) --- */
.oft-sub-nav {
  padding: 0.2rem 0;
  width: 100%;
}
.oft-sub-group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.35rem;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.oft-sub-group::-webkit-scrollbar {
  display: none;
}
.oft-sub-group[hidden] {
  display: none !important;
}
.oft-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}
.oft-cat-tab .oft-tab-icon {
  flex-shrink: 0;
  color: #64748b;
  transition: color 0.15s ease;
}
.oft-cat-tab .oft-tab-tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0.08rem 0.35rem;
  border-radius: 99px;
  background: #f1f5f9;
  color: #64748b;
  transition: all 0.15s ease;
}
.oft-cat-tab:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #0f172a;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.08);
}
.oft-cat-tab:hover .oft-tab-icon {
  color: #0f172a;
}
.oft-cat-tab.is-active {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.25);
  transform: none;
}
.oft-cat-tab.is-active .oft-tab-icon {
  color: #38bdf8;
}
.oft-cat-tab.is-active .oft-tab-tag {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
.oft-cat-tab:focus-visible,
.oft-pillar-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* --- 3. Conteneur Exécutif pour l'Audit e-Facture 2026 --- */
.oft-audit-wrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: 0.5rem 0 2rem;
}
.oft-audit-header {
  text-align: center;
  margin-bottom: 1.75rem;
}
.oft-audit-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.2);
  color: #2563eb;
  border-radius: 99px;
  padding: 0.35rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.75rem;
}
.oft-audit-header h2 {
  font-size: clamp(1.4rem, 3.5vw, 1.85rem);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.45rem;
  letter-spacing: -0.02em;
}
.oft-audit-subtitle {
  color: #64748b;
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 680px;
  margin: 0 auto;
}
.oft-audit-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 20px;
  padding: 2.25rem 2.25rem 2rem;
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.02);
}
@media (max-width: 640px) {
  .oft-audit-card {
    padding: 1.5rem 1.25rem;
    border-radius: 16px;
  }
}

/* --- Panneaux des services --- */
.oft-services-container {
  width: 100%;
  min-width: 0;
}
.oft-service-panel {
  display: block;
  animation: oftFadeIn 0.22s ease-in-out;
}
.oft-service-panel[hidden] {
  display: none !important;
}

@keyframes oftFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Cartes des services intégrées */
.oft-service-panel > section.card,
.oft-service-panel > .card {
  margin-bottom: 1.5rem;
  border-radius: var(--sf-radius-lg, 14px);
}
.oft-service-panel #grcClmGeneratorFold {
  margin-top: 1.5rem;
}

/* --- 4. Dual Workbench Studio & Métier Layout (Plein cadre, 0 troncature, 0 décalage) --- */
.oft-workbench-section .oft-container {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

.clm-studio {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.clm-studio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.5rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.clm-studio-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1 1 auto;
}

.clm-studio-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
}

.clm-studio-lead {
  margin: 0;
  font-size: 0.8125rem;
  color: #475569;
  line-height: 1.4;
}

.clm-studio-meta {
  flex-shrink: 0;
}

.clm-legal-disclaimer {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
}


.clm-editor-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  align-items: start;
  min-height: 600px;
  background: #f8fafc;
  width: 100%;
  min-width: 0;
}

@media (max-width: 960px) {
  .clm-editor-layout {
    grid-template-columns: 1fr;
  }
}

.clm-config-panel {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  min-width: 0;
  position: sticky;
  top: 130px;
  max-height: calc(100vh - 150px);
}

@media (max-width: 960px) {
  .clm-config-panel {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    position: static;
    max-height: none;
  }
}

.clm-config-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.clm-config-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.clm-config-title {
  font-size: 0.78125rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  margin: 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #f1f5f9;
}

.clm-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.clm-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.clm-label {
  font-size: 0.78125rem;
  font-weight: 600;
  color: #334155;
  margin: 0;
}

.clm-config-panel .form-control,
.clm-config-panel .form-select,
.clm-config-panel input,
.clm-config-panel select {
  width: 100%;
  font-size: 0.8125rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.clm-config-panel .form-control:focus,
.clm-config-panel select:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.clm-actions {
  flex-shrink: 0;
  padding: 1rem 1.25rem;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
  margin-top: auto;
}

.clm-actions > .btn-primary,
#wbExportPdfBtn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  font-size: 0.84rem;
  font-weight: 650;
  border-radius: 10px;
  background: #2563eb;
  color: #ffffff;
  border: 1px solid #2563eb;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
  transition: all 0.15s ease;
}

.clm-actions > .btn-primary:hover,
#wbExportPdfBtn:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transform: translateY(-1px);
}

.clm-actions > .btn-primary svg {
  flex-shrink: 0;
}

.clm-preview-area {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: #f8fafc;
  overflow-x: hidden;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .clm-preview-area {
    padding: 1rem 0.75rem;
  }
}

.clm-paper,
#panel-tool-workbench .clm-paper {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 4px 15px -3px rgba(15, 23, 42, 0.05);
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .clm-paper,
  #panel-tool-workbench .clm-paper {
    padding: 1rem 0.75rem;
    border-radius: 10px;
  }
}

/* KPI Boxes (Treso, Paie, DSN, Seuil, etc.) */
.treso-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.treso-kpi {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  overflow: hidden;
  transition: all 0.15s ease;
}

.treso-kpi:hover {
  border-color: #cbd5e1;
  background: #ffffff;
}

.treso-kpi--primary {
  border-color: rgba(37, 99, 235, 0.25);
  background: rgba(37, 99, 235, 0.03);
}

.treso-kpi-label,
.treso-kpi-value {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.treso-kpi-label {
  font-size: 0.71875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b;
  line-height: 1.25;
}

.treso-kpi-value {
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* Tableaux — scroll horizontal si besoin, jamais de colonne coupée */
.oft-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin: 0 -.15rem;
  padding-bottom: .2rem;
}
table.sf-table-compact {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  background: #ffffff;
  margin-bottom: 0;
}
table.sf-table-compact.oft-table-wide { width: max-content; min-width: 100%; }
table.sf-table-compact th,
table.sf-table-compact td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid #f1f5f9;
  color: #1e293b;
  vertical-align: middle;
  text-align: right;
  white-space: nowrap;
}
table.sf-table-compact th:first-child,
table.sf-table-compact td:first-child { text-align: left; }
table.sf-table-compact th {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #475569;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
}
table.sf-table-compact .oft-col-end { font-weight: 700; }
table.sf-table-compact .is-pos,
.oft-month-card .is-pos { color: #16a34a; }
table.sf-table-compact .is-neg,
.oft-month-card .is-neg { color: #dc2626; }
table.sf-table-compact tbody tr:hover { background: #f8fafc; }

/* Cartes mois (mobile) — lecture verticale sans scroll latéral */
.oft-month-cards { display: none; flex-direction: column; gap: .45rem; }
.oft-month-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: .55rem .7rem;
  background: #fff;
}
.oft-month-card__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .35rem; font-size: .84rem;
}
.oft-month-card__end { font-weight: 750; font-variant-numeric: tabular-nums; }
.oft-month-card__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .2rem .65rem;
  font-size: .72rem; color: #64748b; font-variant-numeric: tabular-nums;
}
.oft-month-card__grid b { color: #0f172a; font-weight: 650; }

/* Mobile tool-first — variables + chrome minimal (cascade après styles base) */
@media (max-width: 768px) {
  .outils-page {
    --landing-nav-height: 52px;
    --oft-chip: 34px;
    --oft-gap: .3rem;
    --oft-sticky-top: calc(var(--landing-nav-height) + env(safe-area-inset-top, 0px));
    --oft-pad-x: max(.65rem, env(safe-area-inset-left, 0px));
    --oft-pad-r: max(.65rem, env(safe-area-inset-right, 0px));
    --oft-safe-b: env(safe-area-inset-bottom, 0px);
  }
  .outils-page .landing-nav {
    height: calc(var(--landing-nav-height) + env(safe-area-inset-top, 0px));
  }
  /* Hero marketing hors écran : l’outil commence tout de suite */
  .pricing-hero.oft-hero,
  .oft-hero-proof { display: none; }
  .oft-workbench-section {
    margin-top: 0;
    padding: .45rem 0 calc(4.75rem + var(--oft-safe-b));
  }
  .oft-container,
  .oft-workbench-section .oft-container {
    padding-inline: var(--oft-pad-x) var(--oft-pad-r);
  }
  .oft-sticky-nav {
    top: var(--oft-sticky-top);
    margin-bottom: .5rem;
    overscroll-behavior: contain;
  }
  .oft-selector-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "pillars pdf" "tools tools";
    align-items: center;
    gap: var(--oft-gap) .4rem;
    padding: .35rem .4rem;
    border-radius: 12px;
    box-shadow: 0 6px 18px -12px rgba(15, 23, 42, .16);
  }
  .oft-selector-header {
    grid-area: pdf; display: contents; padding: 0; margin: 0; gap: 0;
  }
  .oft-selector-title,
  .oft-selector-title .badge-free,
  .oft-live-dot { display: none; }
  .oft-header-actions { grid-area: pdf; }
  .oft-btn-quick-pdf {
    width: var(--oft-chip); height: var(--oft-chip); min-height: var(--oft-chip); min-width: var(--oft-chip);
    padding: 0; border-radius: 10px; justify-content: center;
  }
  .oft-btn-quick-pdf .oft-pdf-label,
  .oft-btn-quick-pdf svg { width: 14px; height: 14px; }
  .oft-btn-quick-pdf .oft-pdf-label { display: none; }
  .oft-pillar-nav {
    grid-area: pillars;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px; margin: 0; padding: 2px; border-radius: 10px;
  }
  .oft-pillar-btn {
    min-height: var(--oft-chip); padding: .25rem .15rem; gap: 0;
    font-size: .68rem; font-weight: 650; touch-action: manipulation;
  }
  .oft-pillar-btn .oft-tab-icon,
  .oft-pillar-count { display: none; }
  .oft-sub-nav { grid-area: tools; margin: 0; }
  .oft-sub-group {
    justify-content: flex-start; gap: .3rem; padding: 0;
    scroll-snap-type: x proximity;
  }
  .oft-cat-tab {
    min-height: var(--oft-chip); padding: .25rem .65rem; font-size: .72rem;
    scroll-snap-align: start; touch-action: manipulation;
  }
  .oft-cat-tab .oft-tab-tag,
  .oft-cat-tab .oft-tab-icon { display: none; }
  /* Contenu outil : densifié, typo sobre */
  .oft-audit-wrapper { padding: 0 0 .5rem; }
  .oft-audit-header { margin-bottom: .45rem; }
  .oft-audit-header h2 { font-size: 1rem; margin-bottom: .1rem; font-weight: 700; letter-spacing: -0.01em; }
  .oft-audit-subtitle { font-size: .76rem; line-height: 1.35; }
  .oft-audit-badge { font-size: .62rem; padding: .2rem .55rem; margin-bottom: .4rem; }
  .oft-audit-card { padding: .7rem .7rem .8rem; border-radius: 12px; box-shadow: 0 6px 18px -12px rgba(15, 23, 42, .12); }
  .efac-prog { margin-bottom: .75rem; }
  .efac-step h2 { font-size: 1rem; }
  .efac-hint { font-size: .8rem; margin-bottom: .9rem; }
  .clm-studio { border-radius: 12px; box-shadow: 0 4px 16px -10px rgba(15, 23, 42, .1); }
  /* Spécificité > :is(... .clm-studio-header) de core/services */
  .outils-page .clm-studio > .clm-studio-header { display: none; }
  .clm-editor-layout { grid-template-columns: 1fr; }
  .clm-config-panel { position: static; max-height: none; border: 0; }
  .clm-config-scroll { padding: .75rem .8rem; gap: .7rem; }
  .clm-config-title { font-size: .68rem; letter-spacing: .03em; }
  .clm-label { font-size: .72rem; }
  .clm-config-panel .form-control,
  .clm-config-panel .form-select,
  .clm-config-panel input,
  .clm-config-panel select {
    font-size: .84rem; padding: .45rem .6rem; border-radius: 8px;
  }
  .clm-field-row { gap: .5rem; }
  .clm-actions {
    position: sticky; bottom: calc(.5rem + var(--oft-safe-b));
    z-index: 20; padding: .45rem .55rem; background: rgba(255,255,255,.94);
    border-top: 1px solid #e2e8f0;
  }
  .clm-actions .btn { width: 100%; min-height: 44px; font-size: .84rem; touch-action: manipulation; }
  .clm-preview-area { padding: .55rem .15rem; overflow-x: visible; }
  .clm-paper, #panel-tool-workbench .clm-paper { padding: .75rem .65rem; overflow: visible; }
  /* Nav solide (plus de voile hero sur fond clair) */
  .outils-page .landing-nav.nav-hero:not(.menu-open) {
    background-color: #0f172a;
    background-image: none;
    box-shadow: 0 1px 0 rgba(15, 23, 42, .18);
  }
  .outils-page .landing-nav.nav-hero:not(.menu-open) :is(.nav-logo, .nav-logo .logo-base, .nav-logo .logo-suffix) {
    color: #f8fafc;
  }
  .outils-page .landing-nav.nav-hero:not(.menu-open) .landing-burger span { background: #f1f5f9; }
  /* Trésorerie : cartes mois, pas de colonne coupée */
  .oft-month-cards { display: flex; }
  .oft-month-cards + .oft-table-scroll { display: none; }
  .oft-table-scroll {
    margin: 0; border: 1px solid #e2e8f0; border-radius: 10px;
  }
  table.sf-table-compact { font-size: .72rem; }
  table.sf-table-compact th,
  table.sf-table-compact td { padding: .4rem .45rem; }
  .efac-opt, label.efac-opt {
    min-height: 44px; padding: .7rem .85rem !important; font-size: .86rem !important;
    touch-action: manipulation;
  }
  .efac-nav {
    position: sticky; bottom: calc(.5rem + var(--oft-safe-b));
    z-index: 20; margin-top: .85rem !important; padding: .45rem;
    background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
    border: 1px solid #e2e8f0; border-radius: 12px;
    box-shadow: 0 8px 22px -14px rgba(15, 23, 42, .3);
  }
  .efac-nav .btn { min-height: 44px; flex: 1; font-size: .86rem; touch-action: manipulation; }
}