@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&display=swap');

/* === Variables === */
:root{
  /* Spacing */
  --space-xs:4px;
  --space-sm:6px;
  --space-md:8px;
  --space-lg:12px;
  --space-xl:16px;

  /* Radius */
  --radius-lg:16px;
  --radius-full:9999px;

  /* Colors */
  --color-bg:#f1f5f9;
  --color-bg-alt:#f8fafc;
  --color-surface:#ffffff;
  --color-surface-alt:#f8fafc;
  --color-border:#e2e8f0;
  --color-border-light:#d1d5db;
  --color-text:#0f172a;
  --color-text-muted:#475569;

  --color-label:#475569;
  --color-hint:#475569;
  --color-muted:#64748b;

  --color-input-bg:#fff;
  --color-input-border:#e2e8f0;
  --color-input-focus-border:#60a5fa;
  --color-input-focus-ring:rgba(37,99,235,.12);
  --color-input-readonly-bg:#e2e8f0;
  --color-input-readonly-text:#64748b;

  --color-accent:#3b82f6;
  --color-accent-dark:#1d4ed8;
  --color-accent-soft:#60a5fa;
  --color-accent-green:#8eea7a;

  --color-chip-bg-start:#dbeafe;
  --color-chip-bg-end:#e0e7ff;
  --color-chip-text:#1e3a8a;
  --color-chip-border:#c7d2fe;
  --color-chip-neutral-bg:#e2e8f0;
  --color-chip-neutral-text:#1f2937;
  --color-chip-solid-bg:#eef2ff;

  --color-codechip-bg:#ecfeff;
  --color-codechip-text:#155e75;
  --color-codechip-border:#99f6e4;

  --color-revenue-green:34,197,94;
  --color-revenue-text:#166534;
  --color-fortune-gold:234,179,8;
  --color-fortune-text:#78350f;

  --color-badge-bg-start:#e0f2fe;
  --color-badge-bg-end:#e0e7ff;
  --color-info-text:#1d4ed8;
  --color-info-border:#bfdbfe;

  --color-note-bg:#eef2ff;
  --color-note-border:#c7d2fe;
  --color-note-text:#4338ca;

  --color-leg-del:#64748b;
  --color-leg-del-hover:#ef4444;

  --color-disabled-bg:#cbd5e1;
  --color-disabled-text:#64748b;

  --nav-footer-height: calc(56px + env(safe-area-inset-bottom));

  --color-nav-bg:#ffffff;
  --color-nav-text:#0f172a;
  --color-nav-border:var(--color-border);

  --color-nav-prev-bg:var(--color-surface);
  --color-nav-prev-border:var(--color-border);
  --color-nav-prev-text:var(--color-text);
  --color-nav-prev-hover-bg:var(--color-bg-alt);

  --color-nav-next-bg:#2563eb;
  --color-nav-next-border:#2563eb;
  --color-nav-next-text:#ffffff;
  --color-nav-next-hover-bg:#1d4ed8;

  --shadow-nav-hover:0 4px 12px rgba(2,6,23,.2);

  /* Accordions */
  --accordion-open-duration:.35s;
  --accordion-fade-duration:.25s;
}

body.dark-mode{
  --color-bg:#0b1220;
  --color-bg-alt:#0f1a2b;
  --color-surface:#0f1a2b;
  --color-surface-alt:#111f33;
  --color-border:rgba(255,255,255,.08);
  --color-border-light:rgba(255,255,255,.12);
  --color-text:#e5e7eb;
  --color-text-muted:rgba(229,231,235,.7);
  --color-label:#e5e7eb;
  --color-hint:rgba(229,231,235,.7);
  --color-muted:rgba(229,231,235,.7);
  --color-input-bg:#0f1a2b;
  --color-input-border:rgba(255,255,255,.1);
  --color-input-focus-border:#60a5fa;
  --color-input-focus-ring:rgba(96,165,250,.2);
  --color-input-readonly-bg:#111f33;
  --color-input-readonly-text:#cbd5f5;
  --color-accent:#60a5fa;
  --color-accent-dark:#3b82f6;
  --color-accent-soft:#60a5fa;
  --color-accent-green:#8eea7a;
  --color-chip-bg-start:#0f1a2b;
  --color-chip-bg-end:#1b2a44;
  --color-chip-text:#e2e8f0;
  --color-chip-border:rgba(96,165,250,.35);
  --color-chip-neutral-bg:#17263f;
  --color-chip-neutral-text:#e2e8f0;
  --color-chip-solid-bg:#1a2a45;
  --color-codechip-bg:rgba(255,255,255,.08);
  --color-codechip-text:#e5e7eb;
  --color-codechip-border:rgba(255,255,255,.12);
  --color-revenue-text:#b5e7b5;
  --color-fortune-text:#e9dca0;
  --color-badge-bg-start:#0f1a2b;
  --color-badge-bg-end:#111f33;
  --color-info-text:#cdd9f5;
  --color-info-border:rgba(255,255,255,.12);
  --color-note-bg:#111f33;
  --color-note-border:rgba(255,255,255,.12);
  --color-note-text:#e5e7eb;
  --color-leg-del:#e5e7eb;
  --color-leg-del-hover:#fca5a5;
  --color-disabled-bg:rgba(255,255,255,.08);
  --color-disabled-text:#94a3b8;
  --color-nav-bg:#0b1220;
  --color-nav-text:#e5e7eb;
  --color-nav-border:rgba(255,255,255,.1);
  --color-nav-prev-bg:#111f33;
  --color-nav-prev-border:rgba(255,255,255,.12);
  --color-nav-prev-text:#e5e7eb;
  --color-nav-prev-hover-bg:#15253f;
  --color-nav-next-bg:#2f6ad6;
  --color-nav-next-border:#2f6ad6;
  --color-nav-next-text:#f8fafc;
  --color-nav-next-hover-bg:#356fe0;
  color:var(--color-text);
  background:var(--color-bg);
}

/* === Base / Typo === */
body{
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}

img,
svg,
canvas{
  max-width:100%;
  height:auto;
}

body.dark-mode{
  color:var(--color-text);
}

body.dark-mode .text-slate-900,
body.dark-mode .text-slate-800,
body.dark-mode .text-slate-700,
body.dark-mode .text-slate-600,
body.dark-mode .text-slate-500,
body.dark-mode .text-slate-400{
  color:var(--color-text) !important;
}

body.dark-mode .text-slate-500,
body.dark-mode .text-slate-400{
  color:var(--color-text-muted) !important;
}

body.dark-mode .text-blue-900,
body.dark-mode .text-blue-800,
body.dark-mode .text-blue-700,
body.dark-mode .text-blue-600,
body.dark-mode .text-blue-500,
body.dark-mode .text-indigo-900,
body.dark-mode .text-indigo-800,
body.dark-mode .text-indigo-700,
body.dark-mode .text-indigo-600{
  color:var(--color-accent-soft) !important;
}

body.dark-mode .bg-white,
body.dark-mode .bg-blue-100,
body.dark-mode .bg-slate-200,
body.dark-mode .bg-slate-100{
  background-color:var(--color-surface) !important;
}

body.dark-mode .bg-white\/60{
  background-color:var(--color-surface-alt) !important;
}

body.dark-mode .bg-blue-800,
body.dark-mode .bg-blue-900{
  background-color:#2f6ad6 !important;
}

body.dark-mode .bg-slate-50{
  background-color:var(--color-surface-alt) !important;
}

body.dark-mode .border-slate-200{
  border-color:var(--color-border) !important;
}

/* === Page shell / professional layout === */
.page-shell{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(224,242,254,.85) 0%, rgba(224,242,254,0) 60%),
    radial-gradient(1000px 520px at 100% 0%, rgba(224,231,255,.85) 0%, rgba(224,231,255,0) 55%),
    #f8fafc;
  color:#0f172a;
}

.impotlab-floating-logo{
  position:fixed;
  top:1.25rem;
  left:1.25rem;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.65rem 0.9rem;
  color:#0f172a;
}

.impotlab-floating-logo-mark{
  width:clamp(90px, 9vw, 150px);
  height:clamp(22px, 2.2vw, 34px);
  display:block;
}

.step-help-label-mobile{
  display:none;
}

body.dark-mode .impotlab-floating-logo{
  background:transparent;
  border:none;
  box-shadow:none;
  color:#fff;
}

@media (max-width:640px){
  .impotlab-floating-logo{
    top:0.75rem;
    left:0.75rem;
    padding:0.45rem 0.65rem;
    border-radius:12px;
  }
}

@media print{
  .impotlab-floating-logo{
    display:none !important;
  }
}

body.dark-mode .page-shell{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 32%),
    var(--color-bg);
  color:var(--color-text);
}

.hero-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,250,252,.96) 100%);
  border:1px solid rgba(148,163,184,.25);
  box-shadow:0 1px 2px rgba(15,23,42,.08);
  backdrop-filter:blur(6px);
}

body.dark-mode .hero-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 100%),
    var(--color-surface);
  border:1px solid var(--color-border);
  box-shadow:0 1px 2px rgba(2,6,23,.35);
}

.surface-card{
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 1px 2px rgba(15,23,42,.08);
}

body.dark-mode .surface-card{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  box-shadow:0 1px 2px rgba(2,6,23,.4);
}

.tab-switcher{
  background:rgba(248,250,252,.9);
  border:1px solid rgba(148,163,184,.35);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}

body.dark-mode .tab-switcher{
  background:rgba(15,26,43,.9);
  border:1px solid var(--color-border);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.btn-primary{
  background:#2563eb;
  color:#fff;
  border:1px solid rgba(37,99,235,.4);
  box-shadow:0 1px 2px rgba(15,23,42,.2);
}
.btn-primary:hover{
  background:#1d4ed8;
  box-shadow:0 1px 2px rgba(15,23,42,.24);
}

/* === Step titles === */
.step-title{
  position:relative;
  display:inline-block;
  padding-bottom:0.35rem;
  font-family:'Manrope','Inter',sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
  background:linear-gradient(120deg,#0f172a 0%,#1e3a8a 55%,#2563eb 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 1px 2px rgba(15,23,42,.1);
}

body.dark-mode .step-title{
  background:none;
  color:var(--color-text);
  text-shadow:none;
}
.step-title::after{
  content:none;
}

/* === Charts === */
.chart-container{position:relative;width:100%;max-width:600px;margin:0 auto;height:160px}
@media (min-width:768px){.chart-container{height:180px}}

/* === Form controls === */
.form-select,.form-input,.form-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none}
.form-select{
  background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")
}
.label{display:block;font-size:0.875rem;font-weight:600;color:var(--color-label);margin-bottom:6px}
.input,.select{width:100%;padding:12px 14px;background:var(--color-input-bg);border:1px solid var(--color-input-border);border-radius:10px;transition:border-color .15s ease,box-shadow .15s ease}
.input:focus,.select:focus{outline:none;border-color:var(--color-input-focus-border);box-shadow:0 0 0 4px var(--color-input-focus-ring)}
.input[readonly]{background:var(--color-input-readonly-bg);color:var(--color-input-readonly-text)}

.input:disabled,
.select:disabled,
.form-checkbox:disabled{
  background:var(--color-disabled-bg);
  color:var(--color-disabled-text);
}

/* === Steps / transitions === */
.step{display:none}
.step.active{display:block;animation:fadeIn .35s}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* === Cards === */
.card{background:#fff;border:1px solid #e2e8f0;border-radius:1rem;overflow:hidden;transition:box-shadow .2s ease}
.dark-mode .card{background:var(--color-surface);border:1px solid var(--color-border)}
.card--tips-visible{overflow:visible}
.card:hover{box-shadow:0 1px 2px rgba(15,23,42,.12)}
.dark-mode .card:hover{
  border-color:rgba(255,255,255,.16);
  background:#13213a;
  box-shadow:0 1px 2px rgba(2,6,23,.4);
}
.card-head{padding:calc(var(--space-lg) + 2px) var(--space-xl);display:flex;align-items:center;gap:var(--space-lg);position:relative}
.card-head input[type="checkbox"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
  width:0;
  height:0;
}
.card-head[role="button"]{cursor:pointer}
.card-title{display:flex;align-items:center;gap:10px}
.card-body{background:var(--color-bg-alt);border-top:1px solid var(--color-border);border-radius:0 0 var(--radius-lg) var(--radius-lg)}

/* === Collapsible / accordéon + blur (robuste) === */
/* État fermé par défaut */
.collapsible{
  max-height:0;
  overflow:hidden;
  filter:blur(8px);
  opacity:0;
  transition:max-height .45s ease, filter .28s ease, opacity .28s ease;
}

/* OUVERT uniquement quand l’élément lui-même a .open */
.collapsible.open{
  max-height:3000px;
  filter:blur(0);
  opacity:1;
}

/* Garde-fou : si une carte garde .is-open mais que le panneau n’a PAS .open, rester fermé */
.card.is-open .collapsible:not(.open){
  max-height:0;
  filter:blur(8px);
  opacity:0;
}

/* Flèche : pivote seulement quand le contenu est vraiment ouvert */
.rot{ transition: transform .25s ease; }
.rot.open{ transform: rotate(90deg); }

/* Neutralise l’ancien comportement qui pivotait sur .card.is-open */
.card.is-open .rot{ transform: none; }

/* Panneaux repliables (deductions, fortune, etc.) */
.deduction-content,
.fortune-card .fortune-content{
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding:0;
  transition:
    max-height var(--accordion-open-duration,.35s) ease,
    opacity var(--accordion-fade-duration,.25s) ease,
    padding var(--accordion-fade-duration,.25s) ease;
}

.deduction-content.open,
.fortune-card .fortune-content.open{
  max-height:1600px;
  opacity:1;
  padding:1rem;
  overflow:visible;
}

/* === Champs conditionnels === */
.conditional-field{max-height:0;overflow:hidden;opacity:0;transition:max-height .35s ease,opacity .3s ease,margin-top .3s ease}
.conditional-field.visible{max-height:200px;opacity:1;margin-top:.75rem}

/* === Feedback / animations === */
.checkbox-label{transition:box-shadow .2s ease-in-out}
.checkbox-label.highlighted{box-shadow:0 0 0 4px rgba(96,165,250,.12)}
body.dark-mode .checkbox-label.highlighted{box-shadow:0 0 0 4px rgba(147,197,253,.28)}
@keyframes subtlePulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
.pulse{animation:subtlePulse .35s ease}

/* === Chips & badges === */
.badge{display:inline-flex;align-items:center;gap:var(--space-md);font-size:12px;font-weight:600;padding:var(--space-sm) calc(var(--space-lg) - 2px);border-radius:var(--radius-full);background:linear-gradient(90deg,var(--color-chip-bg-start),var(--color-chip-bg-end));color:var(--color-chip-text);border:1px solid var(--color-chip-border)}
.chip{font-size:12px;font-weight:600;padding:var(--space-sm) calc(var(--space-lg) - 2px);border-radius:var(--radius-full);background:linear-gradient(90deg,var(--color-chip-bg-start),var(--color-chip-bg-end));color:var(--color-chip-text);border:1px solid var(--color-chip-border)}
.code-chip{font-size:0.75rem;font-weight:700;padding:2px 8px;border-radius:9999px;background:var(--color-codechip-bg);color:var(--color-codechip-text);border:1px solid var(--color-codechip-border)}
.code-chip.revenu-code,
.code-chip.revenue-code {
  background: rgba(var(--color-revenue-green),0.15);
  border: 1px solid rgba(var(--color-revenue-green),0.3);
  color: var(--color-revenue-text);
}
.code-chip.fortune-code {
  background: rgba(var(--color-fortune-gold),0.15);
  border: 1px solid rgba(var(--color-fortune-gold),0.3);
  color: var(--color-fortune-text);
}
.code-chip.deduction-code {
  background:rgba(248,113,113,.15);
  border:1px solid rgba(248,113,113,.3);
  color:#b91c1c;
}
body.dark-mode .code-chip.deduction-code{
  background:rgba(248,113,113,.12);
  border:1px solid rgba(248,113,113,.24);
  color:#fca5a5;
}
.code-chip.code140,
.code-chip.code150,
.code-chip.code160,
.code-chip.code165 {
  background: #fee2e2;        /* red-100 */
  border: 1px solid #fca5a5;  /* red-300 */
  color: #b91c1c;             /* red-700 */
}

/* === Step help assistant === */
.step-help-button-wrap{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin:0;
  gap:0.5rem;
}

.step-help-button-wrap--stacked{
  flex-direction:column;
  align-items:flex-end;
}

.step-help-button-wrap[data-step-help-floating]{
  margin-left:auto;
  pointer-events:auto;
}

.step-help-page-anchor{
  position:fixed;
  top:clamp(16px, 4vw, 32px);
  right:clamp(16px, 4vw, 32px);
  z-index:80;
  display:flex;
  justify-content:flex-end;
  width:max-content;
  pointer-events:none;
}

.step-help-page-anchor [data-step-help-container]{
  pointer-events:auto;
}

@media (max-width: 56rem){
  .step-help-page-anchor{
    top:max(12px, env(safe-area-inset-top));
    right:max(12px, env(safe-area-inset-right));
  }
}


.step-help-button{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.4rem 0.85rem;
  border-radius:9999px;
  border:1px solid var(--color-accent);
  background:#fff;
  color:var(--color-accent-dark);
  font-weight:600;
  margin-left:auto;
  font-size:0.875rem;
  box-shadow:0 1px 2px rgba(15,23,42,.12);
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.step-help-button:hover,
.step-help-button:focus{
  background:var(--color-accent);
  color:#fff;
  transform:translateY(-1px);
  outline:none;
  box-shadow:0 1px 2px rgba(15,23,42,.2);
}
header .progress-help-row{
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.step-help-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:9999px;
  background:linear-gradient(135deg,rgba(96,165,250,.9),rgba(59,130,246,.65));
  color:#fff;
  font-weight:700;

  transform:translateX(0.15rem);
  width:1.5rem;
  height:1.5rem;
  font-size:0.85rem;
  box-shadow:0 1px 2px rgba(15,23,42,.2);

}
.step-help-label{
  font-weight:600;
}
.step-help-overlay{
  position:fixed;
  inset:0;
  z-index:10050;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
}
.step-help-dialog{
  position:relative;
  width:min(36rem,100%);
  max-height:calc(100vh - 3rem);
  overflow:auto;
  background:#fff;
  border-radius:1.25rem;
  padding:2.5rem 2rem 2rem;
  box-shadow:0 4px 12px rgba(15,23,42,.18);
}
.step-help-close{
  position:absolute;
  top:1rem;
  right:1rem;
  border:0;
  background:transparent;
  color:var(--color-muted);
  font-size:1.75rem;
  line-height:1;
  cursor:pointer;
}
.step-help-close:hover,
.step-help-close:focus{
  color:var(--color-accent-dark);
  outline:none;
}
.step-help-title{
  font-size:1.5rem;
  font-weight:800;
  color:#0f172a;
  margin-bottom:0.85rem;
}
.step-help-summary{
  font-size:0.95rem;
  color:#334155;
  line-height:1.6;
  margin-bottom:1.35rem;
}
.step-help-contact{
  font-size:0.95rem;
  color:#334155;
  line-height:1.6;
  margin-top:0.5rem;
}
.step-help-contact-link{
  color:#2563eb;
  font-weight:600;
  text-decoration:underline;
}
.step-help-contact-link:hover,
.step-help-contact-link:focus{
  color:#1d4ed8;
}
.step-help-section{
  margin-bottom:1.35rem;
}
.step-help-section-title{
  font-size:0.85rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:#2563eb;
  margin-bottom:0.5rem;
}
.step-help-list{
  list-style:none;
  padding-left:0;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  font-size:0.95rem;
  color:#1e293b;
}
.step-help-list li strong{
  display:block;
  font-weight:700;
  color:#0f172a;
}
.step-help-list li span{
  display:block;
  margin-top:0.15rem;
  color:#334155;
  line-height:1.45;
}
.step-help-sublist{
  list-style:disc;
  padding-left:1.25rem;
  margin:0.35rem 0 0;
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  color:#334155;
}
.step-help-sublist li{
  margin:0;
}
.step-help-list.ordered{
  counter-reset:stephelp;
}
.step-help-list.ordered>li{
  counter-increment:stephelp;
  padding-left:2.25rem;
  position:relative;
}
.step-help-list.ordered>li::before{
  content:counter(stephelp);
  position:absolute;
  left:0;
  top:0.15rem;
  width:1.6rem;
  height:1.6rem;
  border-radius:9999px;
  background:rgba(37,99,235,.12);
  color:#1d4ed8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:0.85rem;
}
.step-help-footer{
  margin-top:1.75rem;
  display:flex;
  justify-content:flex-end;
}
.step-help-dismiss{
  border:0;
  border-radius:9999px;
  background:var(--color-accent-dark);
  color:#fff;
  padding:0.65rem 1.4rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.step-help-dismiss:hover,
.step-help-dismiss:focus{
  background:var(--color-accent);
  box-shadow:0 1px 2px rgba(15,23,42,.2);
  transform:translateY(-1px);
  outline:none;
}
body.dark-mode .step-help-button{
  background:var(--color-surface);
  border-color:var(--color-border-light);
  color:var(--color-text);
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
body.dark-mode .step-help-button:hover,
body.dark-mode .step-help-button:focus{
  background:var(--color-accent);
  color:#0b1220;
}
body.dark-mode .step-help-dialog{
  background:var(--color-surface);
  color:var(--color-text);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
body.dark-mode .step-help-title{
  color:var(--color-text);
}
body.dark-mode .step-help-summary,
body.dark-mode .step-help-contact,
body.dark-mode .step-help-list,
body.dark-mode .step-help-list li span,
body.dark-mode .step-help-sublist{
  color:var(--color-text-muted);
}
body.dark-mode .step-help-list li strong{
  color:var(--color-text);
}
body.dark-mode .step-help-section-title{
  color:var(--color-accent);
}
body.dark-mode .step-help-list.ordered>li::before{
  background:rgba(96,165,250,.2);
  color:var(--color-accent);
}
@media (max-width:640px){
  .step-help-dialog{
    padding:2rem 1.5rem 1.5rem;
  }
  .step-help-button-wrap{
    justify-content:flex-end;
  }
  .progress-help-row{
    flex-direction:column;
    align-items:stretch;
    gap:0.5rem;
  }
  .progress-help-row .step-help-button-wrap{
    justify-content:flex-start;
  }
}
.label-with-code{
  display:flex;
  align-items:center;
  gap:var(--space-xs);
  justify-content:flex-start;
  width:100%;
}

.code-badge{display:inline-flex;align-items:center;gap:var(--space-md);font-size:12px;font-weight:700;padding:var(--space-sm) calc(var(--space-lg) - 2px);border-radius:var(--radius-full);background:#e0e7ff;color:#3730a3}
.code-badge-banner{
  border:1px solid rgba(80,200,120,0.3);
  background:rgba(80,200,120,0.15);
  color:#166534;
}
body.dark-mode .code-badge{
  background:rgba(96,165,250,.16);
  border:1px solid rgba(96,165,250,.35);
  color:#dbeafe;
}

body.dark-mode .code-badge-banner{
  background:rgba(148,163,184,.16);
  border-color:rgba(148,163,184,.35);
  color:#e2e8f0;
}

body.dark-mode .fortune-code-banner{
  background:rgba(var(--color-fortune-gold, 201,148,0), 0.24);
  border-color:rgba(var(--color-fortune-gold, 201,148,0), 0.45);
  color:#fef3c7;
}

body.dark-mode .debt-code-banner,
body.dark-mode .deduction-code-banner{
  background:rgba(248,113,113,.18);
  border-color:rgba(248,113,113,.4);
  color:#fecaca;
}
/* Base option: garder les deux bannières, chacune avec sa palette */
.fortune-code-banner {
  /* --color-fortune-gold attendu au format "r,g,b" (ex: 201,148,0) */
  border: 1px solid rgba(var(--color-fortune-gold, 201,148,0), 0.3);
  background: rgba(var(--color-fortune-gold, 201,148,0), 0.15);
  color: var(--color-fortune-text, #6b4f00);
}


.debt-code-banner{
  border:1px solid #fca5a5;
  background:rgba(251,113,133,.15);
  color:#be123c;
}

/* Bannière de code pour les déductions (palette rouge) */
.deduction-code-banner{
  border:1px solid #fca5a5;
  background:rgba(251,113,133,.15);
  color:#be123c;
}

.debt-title {
  color: inherit;
  font-weight: 700;
}

.highlight{box-shadow:0 0 0 3px rgba(59,130,246,.25);border-radius:9999px}
body.dark-mode .highlight{box-shadow:0 0 0 3px rgba(147,197,253,.35)}

/* === Progress bar === */
.progress-wrap{position:relative;height:0.75rem;border-radius:9999px;background:#e2e8f0;overflow:hidden}
.dark-mode .progress-wrap{background:rgba(255,255,255,.08)}
.progress-bar{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--progress-color-start,#60a5fa),var(--progress-color-end,#8eea7a));background-size:200% 100%;transition:width 340ms cubic-bezier(.4,0,.2,1),opacity 340ms cubic-bezier(.4,0,.2,1),background-position 1200ms ease;transform-origin:left;opacity:1;will-change:width,opacity,background-position;box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;animation:progressPulse 4.2s ease-in-out infinite}
.progress-bar.reverse{transform-origin:right}

/* === Toolbar collante === */
.toolbar{position:sticky;bottom:0;background:var(--color-input-bg);padding:12px 0;margin-top:16px;border-top:1px solid var(--color-border)}

/* Result block container */
.result-block{display:flex;flex-direction:column;align-items:center;}

/* === Divers === */
.hidden-important{display:none !important}
.leg-row{display:flex;align-items:center;gap:12px}
.leg-del{color:var(--color-leg-del)}
.leg-del:hover{color:var(--color-leg-del-hover)}
.row-transport,.row-meals,.row-pro,.row-acc{display:flex;align-items:center;gap:var(--space-md)}
.row-transport .input,.row-meals .input,.row-pro .input,.row-acc .input{margin-left:auto}
.muted{opacity:.55}
.hint{font-size:12px;color:var(--color-hint)}
.note{background:var(--color-note-bg);border:1px solid var(--color-note-border);color:var(--color-note-text);padding:10px;border-radius:10px;font-size:12px}

/* === Navigation footer (nouvelle version, fixe & thème du site) === */
/* réserve la place en bas pour la barre fixe */
body{ padding-bottom: var(--nav-footer-height); }

/* barre toujours visible */
.nav-steps-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--nav-footer-height);
  z-index: 9998;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:0 clamp(14px,4vw,40px);
  padding-bottom:calc(env(safe-area-inset-bottom) + 8px);
  background:transparent;
  border-top:none;
  color: var(--color-nav-text);
  pointer-events:none;
}

.nav-steps-footer::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  background:linear-gradient(180deg,rgba(248,250,252,.85) 0%,rgba(248,250,252,1) 45%,rgba(255,255,255,1) 100%);
  border-radius:24px;
  pointer-events:none;
  z-index:-1;
}

body.dark-mode .nav-steps-footer::before{
  background:linear-gradient(180deg,rgba(17,31,51,.85) 0%,rgba(11,18,32,.95) 45%,rgba(11,18,32,1) 100%);
}

.nav-steps-footer-inner{
  pointer-events:auto;
  width:100%;
  max-width:100%;
  min-height:max(48px, calc(var(--nav-footer-height) - env(safe-area-inset-bottom) - 8px));
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap; /* label + ligne des boutons */
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:24px;
  box-shadow:0 -6px 16px rgba(15,23,42,.08);
}

body.dark-mode .nav-steps-footer-inner{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  box-shadow:0 -6px 16px rgba(2,6,23,.4);
}

.nav-steps-label{
  font:12px/1.2 system-ui,Inter,sans-serif;
  opacity:.7;
}

/* occupe toute la largeur pour pousser Précédent à gauche, Étape suivante à droite */
.nav-steps-links{
  display:flex;
  gap:8px;
  width:100%;
  justify-content: space-between;
  padding:var(--space-lg) 0;
}

.nav-steps-left{
  display:flex;
  align-items:center;
  gap:8px;
}

.nav-prev,.nav-next{
  display:inline-flex;align-items:center;gap:6px;
  text-decoration:none;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  transition:background .15s ease,color .15s ease,border-color .15s ease,opacity .15s ease;
  border:1px solid transparent;
}

.nav-theme{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  border-radius:12px;
  font-weight:700;
  background:var(--color-input-bg);
  border:1px solid var(--color-input-border);
  color:var(--color-nav-text);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}

.nav-theme:hover{
  background:var(--color-bg-alt);
}

.nav-prev{
  background:var(--color-nav-prev-bg);
  border-color:var(--color-nav-prev-border);
  color:var(--color-nav-prev-text);
}

.nav-prev:hover{
  background:var(--color-nav-prev-hover-bg);
}

.nav-next{
  background:var(--color-nav-next-bg);
  border-color:var(--color-nav-next-border);
  color:var(--color-nav-next-text);
}

.nav-next:hover{
  background:var(--color-nav-next-hover-bg);
}

.nav-next{
  margin-left:auto;
}

.nav-prev[aria-disabled="true"],
.nav-next[aria-disabled="true"]{
  pointer-events:none;
  cursor:default;
  background-color:var(--color-disabled-bg);
  color:var(--color-disabled-text);
}

.nav-steps-links a[aria-disabled="true"]{
  background-color:var(--color-disabled-bg);
  color:var(--color-disabled-text);
  pointer-events:none;
}

/* === Tab navigation === */
.tab-button{
  padding:0.55rem 1.1rem;
  border-radius:0.75rem;
  font-size:0.875rem;
  font-weight:600;
  color:#475569;
  transition:background .15s, color .15s, box-shadow .15s;
}

body.dark-mode .tab-button{color:#e2e8f0}
body.dark-mode .tab-button:hover{background:rgba(255,255,255,.06);color:#fff}
body.dark-mode .tab-button.bg-white{
  background:#111f33;
  color:#e5e7eb;
  box-shadow:0 1px 2px rgba(2,6,23,.4);
}
.tab-button:hover{background:rgba(226,232,240,.7);color:#1e293b}
.tab-button.bg-white{
  background:#ffffff;
  color:#1d4ed8;
  box-shadow:0 1px 2px rgba(15,23,42,.08);
}
.tab-button.active{
  border:1px solid rgba(148,163,184,.6);
  color:#0f172a;
  box-shadow:0 0 0 1px rgba(59,130,246,.25), 0 1px 2px rgba(15,23,42,.12);
}
body.dark-mode .tab-button.active{
  background:#0f223a;
  border:1px solid rgba(59,130,246,.6);
  color:#fff;
  box-shadow:0 0 0 1px rgba(59,130,246,.35), 0 1px 3px rgba(2,6,23,.6);
}

/* === Disabled section === */
.section-disabled{
  opacity:.25;
  filter:grayscale(1) brightness(.8);
  pointer-events:none;
  background-color:var(--color-disabled-bg);
  color:var(--color-disabled-text);
}
.section-disabled *{pointer-events:none}

html { scroll-behavior: smooth; }

/* --- Séquence d'entrée/sortie : logo → titre → barre → main (version à base d'animations) --- */

/* Points de départ (invisibles tant que la page n'est pas "ready") */
header img,                          /* logo */
header h1,                           /* gros titre */
header .title + p,                   /* sous-titre */
header .progress-wrap,               /* conteneur de barre */
header .progress-wrap + p,           /* texte d'étape (ancienne structure) */
header .progress-help-row + p {      /* texte d'étape (nouvelle structure) */
  opacity: 0;
  transform: translateY(-8px);
}
[data-step-help-container] {
  opacity: 0;
  transform: translateY(-8px);
}

main {
  opacity: 0;
  transform: translateY(12px);
}

/* Keyframes robustes (se jouent même si le header est injecté après .page-ready) */
@keyframes uiFadeDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes uiFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Arrivée : ordre et décalages (appliqués quand .page-ready est présent) */
body.page-ready header img                 { animation: uiFadeDown .28s ease-out both; animation-delay:   0ms; }
body.page-ready header h1                  { animation: uiFadeDown .32s ease-out both; animation-delay:  70ms; }
body.page-ready header .title + p          { animation: uiFadeDown .32s ease-out both; animation-delay: 110ms; }
body.page-ready header .progress-wrap      { animation: uiFadeDown .32s ease-out both; animation-delay: 140ms; }
body.page-ready header .progress-wrap + p  { animation: uiFadeDown .32s ease-out both; animation-delay: 180ms; }
body.page-ready header .progress-help-row + p { animation: uiFadeDown .32s ease-out both; animation-delay: 180ms; }
body.page-ready [data-step-help-container] { animation: uiFadeDown .32s ease-out both; animation-delay: 140ms; }
body.page-ready main                       { animation: uiFadeUp   .36s ease-out both; animation-delay: 200ms; }

/* Si des codes sont présents, on laisse un peu plus de temps au header avant le main */
body.page-ready:has(main .code-chip) main { animation-delay: 280ms; }

/* Cascade des cartes (pages avec codes) — inchangé, mais ça peut rester en transitions */
body:has(main .code-chip) main .card {
  --card-base-delay: 0ms;
  --card-extra-delay: 0ms;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 260ms ease, transform 320ms ease;
  transition-delay: calc(var(--card-base-delay) + var(--card-extra-delay));
  will-change: opacity, transform;
}
body.page-ready:has(main .code-chip) main .card { opacity: 1; transform: none; }
body.page-ready:has(main .code-chip) main .card:nth-of-type(1) { --card-base-delay: 260ms; }
body.page-ready:has(main .code-chip) main .card:nth-of-type(2) { --card-base-delay: 320ms; }
body.page-ready:has(main .code-chip) main .card:nth-of-type(3) { --card-base-delay: 380ms; }
body.page-ready:has(main .code-chip) main .card:nth-of-type(4) { --card-base-delay: 420ms; }
body.page-ready:has(main .code-chip) main .card:nth-of-type(5) { --card-base-delay: 460ms; }
body.page-ready:has(main .code-chip) main .card:nth-of-type(6) { --card-base-delay: 500ms; }

/* Cascade interne du résumé (1ère carte) — inchangé */
body:has(main .code-chip) main .card:first-of-type :is(p, li, dt, dd, div, section, article, tr, th) {
  --summary-item-delay: 0ms;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 220ms ease, transform 260ms ease;
  transition-delay: calc(var(--card-base-delay) + var(--summary-item-delay));
  will-change: opacity, transform;
}
body.page-ready:has(main .code-chip) main .card:first-of-type :is(p, li, dt, dd, div, section, article, tr, th) {
  opacity: 1; transform: none;
}
body.page-ready:has(main .code-chip) main .card:first-of-type
:is(p, li, dt, dd, div, section, article, tr, th):nth-child(1 of :is(p, li, dt, dd, div, section, article, tr, th)) { --summary-item-delay:  30ms; }
body.page-ready:has(main .code-chip) main .card:first-of-type
:is(p, li, dt, dd, div, section, article, tr, th):nth-child(2 of :is(p, li, dt, dd, div, section, article, tr, th)) { --summary-item-delay:  70ms; }
body.page-ready:has(main .code-chip) main .card:first-of-type
:is(p, li, dt, dd, div, section, article, tr, th):nth-child(3 of :is(p, li, dt, dd, div, section, article, tr, th)) { --summary-item-delay: 110ms; }
body.page-ready:has(main .code-chip) main .card:first-of-type
:is(p, li, dt, dd, div, section, article, tr, th):nth-child(4 of :is(p, li, dt, dd, div, section, article, tr, th)) { --summary-item-delay: 150ms; }
body.page-ready:has(main .code-chip) main .card:first-of-type
:is(p, li, dt, dd, div, section, article, tr, th):nth-child(5 of :is(p, li, dt, dd, div, section, article, tr, th)) { --summary-item-delay: 190ms; }
body.page-ready:has(main .code-chip) main .card:first-of-type
:is(p, li, dt, dd, div, section, article, tr, th):nth-child(6 of :is(p, li, dt, dd, div, section, article, tr, th)) { --summary-item-delay: 230ms; }
body.page-ready:has(main .code-chip) main .card:first-of-type
:is(p, li, dt, dd, div, section, article, tr, th):nth-child(7 of :is(p, li, dt, dd, div, section, article, tr, th)) { --summary-item-delay: 270ms; }
body.page-ready:has(main .code-chip) main .card:first-of-type
:is(p, li, dt, dd, div, section, article, tr, th):nth-child(8 of :is(p, li, dt, dd, div, section, article, tr, th)) { --summary-item-delay: 310ms; }

/* Détails : cartes listant les codes — inchangé */
body:has(main .code-chip) main .card:has(.code-chip) { --card-extra-delay: 60ms; }
body:has(main .code-chip) main .card:has(.code-chip) :is(tr, li, div, .row):has(.code-chip) {
  --code-row-delay: 0ms;
  opacity: 0; transform: translateY(12px);
  transition: opacity 220ms ease, transform 260ms ease;
  transition-delay: calc(var(--card-base-delay) + var(--card-extra-delay) + var(--code-row-delay));
  will-change: opacity, transform;
}
body.page-ready:has(main .code-chip) main .card:has(.code-chip) :is(tr, li, div, .row):has(.code-chip) {
  opacity: 1; transform: none;
}
body.page-ready:has(main .code-chip) main .card:has(.code-chip) :is(tr, li, div, .row):has(.code-chip.code100) { --code-row-delay:  40ms; }
body.page-ready:has(main .code-chip) main .card:has(.code-chip) :is(tr, li, div, .row):has(.code-chip.code140) { --code-row-delay:  60ms; }
body.page-ready:has(main .code-chip) main .card:has(.code-chip) :is(tr, li, div, .row):has(.code-chip.code150) { --code-row-delay:  80ms; }
body.page-ready:has(main .code-chip) main .card:has(.code-chip) :is(tr, li, div, .row):has(.code-chip.code160) { --code-row-delay: 100ms; }
body.page-ready:has(main .code-chip) main .card:has(.code-chip) :is(tr, li, div, .row):has(.code-chip.code165) { --code-row-delay: 120ms; }
body.page-ready:has(main .code-chip) main .card:has(.code-chip) :is(tr, li, div, .row):has(.code-chip.code200) { --code-row-delay: 140ms; }
body.page-ready:has(main .code-chip) main .card:has(.code-chip) :is(tr, li, div, .row):has(.code-chip.code300) { --code-row-delay: 160ms; }
body.page-ready:has(main .code-chip) main .card:has(.code-chip) :is(tr, li, div, .row):has(.code-chip.code400) { --code-row-delay: 180ms; }


/* Barre de progression dynamique */
.progress-bar {
  transition: width 260ms cubic-bezier(.4,0,.2,1),
              opacity 260ms cubic-bezier(.4,0,.2,1),
              background-position 1200ms ease;
  will-change: width, opacity, background-position;
  background: linear-gradient(90deg,
              var(--progress-color-start, #60a5fa),
              var(--progress-color-end, #8eea7a));
  background-size: 200% 100%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset;
  animation: progressPulse 4.2s ease-in-out infinite;
}
.progress-bar.reverse { transform-origin: right; }

@keyframes progressPulse {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  header img,
  header h1,
  header .title + p,
  header .progress-wrap,
  header .progress-wrap + p,
  [data-step-help-container],
  main,
  .progress-bar,
  body:has(main .code-chip) main .card,
  body:has(main .code-chip) main .card:first-of-type :is(p, li, dt, dd, div, section, article, tr, th),
  body:has(main .code-chip) main .card:has(.code-chip) :is(tr, li, div, .row):has(.code-chip) {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


header, .nav-steps-footer {
  will-change: opacity, transform;
}

h1:focus,
h1:focus-visible {
  outline: none;
  box-shadow: none;
}

:where(a, button, [role="button"]):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(96,165,250,.2);
}

/* Header: titre centré + aide à droite, progress bar en dessous */
header .progress-wrap{
  margin-top:12px;
}

[data-synthese-download].floating{
  position:fixed;
  top:1.5rem;
  right:1.5rem;
  z-index:40;
  display:flex;
  justify-content:flex-end;
  width:auto;
  pointer-events:auto;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 220ms ease, transform 220ms ease;
  will-change:opacity, transform;
}

[data-synthese-download].floating.is-visible{
  opacity:1;
  transform:translateY(0);
}

[data-synthese-download].floating [data-download-synthese-pdf]{
  border-radius:9999px;
  box-shadow:0 1px 2px rgba(15,23,42,.12);
}

@media (prefers-reduced-motion: reduce){
  [data-synthese-download].floating{
    transition:none;
    transform:none;
  }
}

@media print{
  [data-synthese-download],
  [data-download-synthese-pdf]{
    display:none !important;
  }

  body,
  body.dark-mode{
    color-scheme:light;
    background:#ffffff;
    color:#0f172a;
    --color-bg:#ffffff;
    --color-bg-alt:#f8fafc;
    --color-surface:#ffffff;
    --color-surface-alt:#f8fafc;
    --color-border:#e2e8f0;
    --color-border-light:#d1d5db;
    --color-text:#0f172a;
    --color-text-muted:#475569;
    --color-label:#475569;
    --color-hint:#475569;
    --color-muted:#64748b;
    --color-input-bg:#ffffff;
    --color-input-border:#e2e8f0;
    --color-input-focus-border:#60a5fa;
    --color-input-focus-ring:rgba(37,99,235,.12);
    --color-input-readonly-bg:#e2e8f0;
    --color-input-readonly-text:#64748b;
    --color-accent:#3b82f6;
    --color-accent-dark:#1d4ed8;
    --color-accent-soft:#60a5fa;
    --color-accent-green:#8eea7a;
    --color-chip-bg-start:#dbeafe;
    --color-chip-bg-end:#e0e7ff;
    --color-chip-text:#1e3a8a;
    --color-chip-border:#c7d2fe;
    --color-chip-neutral-bg:#e2e8f0;
    --color-chip-neutral-text:#1f2937;
    --color-chip-solid-bg:#eef2ff;
    --color-codechip-bg:#ecfeff;
    --color-codechip-text:#155e75;
    --color-codechip-border:#99f6e4;
    --color-revenue-text:#166534;
    --color-fortune-text:#78350f;
    --color-badge-bg-start:#e0f2fe;
    --color-badge-bg-end:#e0e7ff;
    --color-info-text:#1d4ed8;
    --color-info-border:#bfdbfe;
    --color-note-bg:#eef2ff;
    --color-note-border:#c7d2fe;
    --color-note-text:#4338ca;
    --color-leg-del:#64748b;
    --color-leg-del-hover:#ef4444;
    --color-disabled-bg:#cbd5e1;
    --color-disabled-text:#64748b;
    --color-nav-bg:#ffffff;
    --color-nav-text:#0f172a;
    --color-nav-border:var(--color-border);
    --color-nav-prev-bg:var(--color-surface);
    --color-nav-prev-border:var(--color-border);
    --color-nav-prev-text:var(--color-text);
    --color-nav-prev-hover-bg:var(--color-bg-alt);
    --color-nav-next-bg:#2563eb;
    --color-nav-next-border:#2563eb;
    --color-nav-next-text:#ffffff;
    --color-nav-next-hover-bg:#1d4ed8;
  }

  .page-shell{
    background:#ffffff !important;
  }
}