/* ===========================================================================
   AI.Sales Value Booster — BearingPoint charter stylesheet
   A single, dependency-free stylesheet (no CDN, no build step).
   =========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     Colour rule
     ---------------------------------------------------------------------
     --primary (black)  structure, buttons, badges — BearingPoint charter
     --accent  (BLUE)   EVERY result: figures, charts, active/selected states
     --red              reserved for ERRORS and destructive actions ONLY
                        (and the BearingPoint logo, which is an image asset)

     Red is no longer used to carry a result: on a synthesis screen it reads as
     an alert, and it collided with the invalid-field styling. Results are blue,
     warnings orange, errors red — one meaning per colour.
     ------------------------------------------------------------------------- */
  --primary:       #0D0D0D;    /* near-black — structure, buttons, badges */
  --primary-dark:  #000000;    /* pure black */
  --accent:        #0057B8;    /* blue — results, charts, active/selected states */
  --accent-dark:   #003C7E;    /* deep blue — hover on accent */
  --accent-soft:   #4D8FD6;    /* light blue — secondary chart series */
  --good:          #2E7D32;    /* green — semantic: gains, validated steps */
  --good-bg:       #E8F3E9;
  --warning:       #ED6C02;    /* orange — semantic: warnings, payback */
  --warning-bg:    #FCEEE0;
  --red:           #E8002A;    /* BearingPoint red — errors / destructive only */
  --blue-bg:       #EFF5FC;    /* light blue tint — subtle result background */
  --gray-bg:       #F3F3F3;    /* neutral light gray */

  --ink:           #0D0D0D;    /* body text — pure near-black (brand rule: black text only) */
  --ink-soft:      #3A3A3A;    /* secondary text */
  --muted:         #6B7280;
  --line:          #E0E0E0;
  --surface:       #FFFFFF;
  --page:          #F7F7F7;

  --radius:        12px;
  --radius-sm:     8px;
  --shadow:        0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
  --shadow-sm:     0 1px 2px rgba(16, 24, 40, .08);
  --maxw:          1160px;
  --font:          "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--page);
  line-height: 1.55;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); font-weight: 700; }
h2 { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 700; }
h3 { font-size: clamp(1rem, .95rem + .3vw, 1.1rem); font-weight: 700; }
p { margin: 0 0 1em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---- Header --------------------------------------------------------------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.site-header .container {
  display: flex; align-items: center; gap: 24px;
  height: 64px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { height: 30px; display: block; width: auto; }
.brand .app-logo { height: 40px; }
.brand .divider { width: 1px; height: 26px; background: var(--line); }
.brand .app-name { font-weight: 700; color: var(--primary); font-size: 1.02rem; letter-spacing: -.2px; }
.header-spacer { flex: 1; }

.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav a {
  color: var(--ink-soft); padding: 8px 12px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: .92rem;
}
.main-nav a:hover { background: var(--gray-bg); text-decoration: none; }
.main-nav a.active { color: var(--accent); }
.nav-logout-btn {
  appearance: none; background: transparent; border: none; cursor: pointer;
  color: var(--ink-soft); padding: 8px 12px; border-radius: var(--radius-sm);
  font-family: inherit; font-weight: 600; font-size: .92rem;
}
.nav-logout-btn:hover { background: var(--gray-bg); }

.lang-switch { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang-switch a {
  padding: 5px 12px; font-size: .82rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.lang-switch a:hover { text-decoration: none; background: var(--gray-bg); }
.lang-switch a.active { background: var(--primary); color: #fff; }

/* ---- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--radius-sm); font-weight: 700;
  font-size: .95rem; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, box-shadow .15s, transform .05s; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { background: var(--surface); color: var(--primary); border-color: var(--line); }
.btn-ghost:hover { background: var(--gray-bg); }
.btn-warning { background: var(--warning); color: #fff; }
.btn-warning:hover { background: #c95a00; }
.btn-danger { background: #fff; color: var(--red); border-color: #f3c9c6; }
.btn-danger:hover { background: #fdecea; }
.btn-lg { padding: 14px 28px; font-size: 1.02rem; }
.btn-sm { padding: 7px 14px; font-size: .85rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- Cards / surfaces ----------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px;
}
.card-pad-lg { padding: 32px; }

main { flex: 1; padding: 32px 0 56px; }

/* ---- Footer --------------------------------------------------------------- */
.site-footer {
  background: var(--primary-dark); color: rgba(255,255,255,.72); font-size: .85rem;
  padding: 22px 0;
}
.site-footer .container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.site-footer img { height: 22px; opacity: .95; }
.site-footer .footer-spacer { flex: 1; }
.site-footer a { color: #fff; }

/* ---- Flash messages ------------------------------------------------------- */
.flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-weight: 600; border: 1px solid transparent; }
.flash-success { background: var(--good-bg); color: #1B5E20; border-color: #BFE0C2; }
.flash-error { background: #FDECEA; color: #B71C1C; border-color: #F3C9C6; }

/* ---- Home page ONLY -------------------------------------------------------
   Every selector here is namespaced `.home*` and used exclusively by
   templates/public/home.html. The page sits inside the standard `.container`,
   so the site width (--maxw) is unchanged and no other screen is affected.
   The hero gradient is tuned to match the shipped illustration, whose own
   background fades from the same deep navy to the same vivid blue; the visual's
   left edge is masked to transparent so the two blend with no visible seam.
   --------------------------------------------------------------------------- */
.home-hero {
  position: relative; overflow: hidden; border-radius: 18px;
  background: linear-gradient(115deg, #020A28 0%, #04184C 38%, #073A9E 68%, #0A55D6 100%);
  color: #fff; display: grid;
  /* Colonne droite = exactement 40 % de la largeur du bloc (et 60 % à gauche).
     `gap: 0` est indispensable : avec un écart, les colonnes se partageraient
     (100 % - gap) et le visuel ferait un peu moins de 40 %. L'air entre le
     texte et l'image est donc porté par le padding droit de .home-hero-copy. */
  grid-template-columns: minmax(0, 60%) minmax(0, 40%);
  align-items: center; gap: 0; min-height: 300px;
}
.home-hero-copy { padding: 38px 28px 38px 44px; position: relative; z-index: 2; min-width: 0; }
.home-eyebrow {
  display: block; font-size: .95rem; font-weight: 700; letter-spacing: .01em;
  color: rgba(255,255,255,.80); margin-bottom: 14px;
}
.home-hero h1 {
  color: #fff; font-size: 2.15rem; line-height: 1.12; margin: 0 0 13px;
  max-width: 21ch; letter-spacing: -.015em;
}
.home-lead {
  color: rgba(255,255,255,.76); font-size: .95rem; line-height: 1.55;
  max-width: 62ch; margin: 0 0 20px;
}

/* pictogram facts */
.home-facts { list-style: none; margin: 0 0 22px; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.home-facts li { display: flex; align-items: center; gap: 11px; font-size: .84rem; line-height: 1.3; }
.home-facts strong { display: block; color: #fff; font-weight: 700; }
.home-facts span:last-child { color: rgba(255,255,255,.68); }

.home-ico-box {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.16);
}
.home-ico { width: 18px; height: 18px; display: block; }

/* CTA */
.home-cta {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; color: var(--accent); border-color: #fff; font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.home-cta:hover { background: #F2F6FC; color: var(--accent-dark); border-color: #F2F6FC; }
.home-cta svg { width: 18px; height: 18px; flex: none; }
.home-cta-sub { color: rgba(255,255,255,.62); font-size: .84rem; margin: 10px 0 0; }

/* configurable illustration (brand.home_illustration) */
.home-hero-visual {
  position: relative; z-index: 1; align-self: stretch; min-width: 0;
  display: flex; align-items: center; justify-content: flex-end;
  /* le visuel suit la hauteur imposée par le texte : il ne l'augmente jamais */
  overflow: hidden;
}
.home-hero-visual img {
  width: 100%; height: 100%; object-fit: cover; object-position: center right;
  display: block;
  /* dissolve the left edge into the hero gradient, whatever the image supplied */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 22%, #000 100%);
}

/* ---- steps ---------------------------------------------------------------- */
.home-steps {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 22px 0 0;
}
.home-step {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; transition: box-shadow .15s, transform .15s;
}
.home-step:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.home-step-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.home-step-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue-bg); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem;
}
.home-step h3 { font-size: 1.02rem; margin: 0; color: var(--ink); }
.home-step-ico { background: var(--blue-bg); color: var(--accent); border-color: transparent; margin-bottom: 12px; }
.home-step p { color: var(--muted); font-size: .92rem; margin: 0; line-height: 1.55; }

/* ---- trust bar ------------------------------------------------------------ */
.home-trust {
  margin-top: 22px; padding: 26px 28px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.home-trust h2 { text-align: center; font-size: 1.05rem; margin: 0 0 22px; color: var(--ink); }
.home-trust ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.home-trust li { display: flex; align-items: center; gap: 12px; font-size: .84rem; line-height: 1.3; }
.home-trust .home-ico-box { background: var(--blue-bg); color: var(--accent); border-color: transparent; }
.home-trust strong { display: block; color: var(--ink); font-weight: 700; }
.home-trust span:last-child { color: var(--muted); }

.admin-access {
  margin-top: 28px; text-align: center; font-size: .88rem; color: var(--muted);
}
.admin-access a { font-weight: 600; }

/* ---- home responsive (scoped: never touches other screens) ---------------- */
@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; min-height: 0; }
  .home-hero-copy { padding: 34px 24px 28px; }
  .home-hero h1 { font-size: 1.8rem; max-width: none; }
  .home-hero-visual { height: 170px; }
  .home-hero-visual img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 26%, #000 100%);
  }
  .home-steps { grid-template-columns: 1fr; }
  .home-trust ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .home-trust ul { grid-template-columns: 1fr; }
  .home-facts { gap: 16px; }
}

/* ---- Forms ---------------------------------------------------------------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; color: var(--ink); }
.field .help { color: var(--muted); font-size: .82rem; margin-top: 4px; }
/* NB: every text-like input type must be listed here, otherwise the field
   falls back to the browser's default rendering and looks different from the
   rest of the form (was the case for tel / email). */
.field input[type=text], .field input[type=number], .field input[type=password],
.field input[type=tel], .field input[type=email], .field input[type=url],
.field input[type=date], .field input:not([type]),
.field select, .field textarea, input.cell-input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .95rem; color: var(--ink); background: #fff;
}
.field input:focus, .field select:focus, input.cell-input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,87,184,.16);
}
.field input:focus:not(:focus-visible), .field select:focus:not(:focus-visible),
input.cell-input:focus:not(:focus-visible) {
  box-shadow: none; border-color: var(--line);
}
/* Invalid state (set by the wizard validation) */
.field input[aria-invalid="true"] {
  border-color: var(--red); box-shadow: 0 0 0 3px rgba(232,0,42,.12);
}
/* Inline validation error message */
.field-error {
  display: none; color: var(--red); font-size: .82rem; font-weight: 600;
  margin-top: 4px; padding-left: 2px;
}
.field-error.visible { display: block; animation: fade .2s ease; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.required-star { color: var(--red); margin-left: 3px; font-weight: 700; }
.optional-tag { color: var(--muted); font-weight: 400; font-size: .85em; margin-left: 4px; }
.required-legend { color: var(--muted); font-size: .84rem; margin: -6px 0 18px; }
.required-legend .required-star { margin-left: 0; }

/* Wizard — progress bar + steps */
.wizard-progress-wrap { margin-bottom: 28px; }
.wizard-progress-bar {
  height: 6px; background: var(--gray-bg); border-radius: 999px; overflow: hidden;
  margin-bottom: 14px;
}
.wizard-progress-fill {
  height: 100%; width: 33.3%; background: var(--accent); border-radius: 999px;
  transition: width .4s cubic-bezier(.22,.61,.36,1);
}
.wizard-steps { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.wizard-steps .ws {
  display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-weight: 600; font-size: .88rem;
  cursor: pointer; transition: border-color .15s, color .15s;
}
.wizard-steps .ws .dot {
  width: 22px; height: 22px; border-radius: 50%; background: var(--gray-bg); color: var(--muted);
  display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 800;
}
.wizard-steps .ws.active { border-color: var(--accent); color: var(--accent); }
.wizard-steps .ws.active .dot { background: var(--accent); color: #fff; }
.wizard-steps .ws.done { border-color: var(--good); }
.wizard-steps .ws.done .dot { background: var(--good); color: #fff; }

/* Wizard slide transitions */
.form-part { display: none; }
.form-part.active { display: block; animation: slideIn .35s cubic-bezier(.22,.61,.36,1); }
.form-part.slide-out-left { animation: slideOutLeft .25s ease forwards; }
.form-part.slide-out-right { animation: slideOutRight .25s ease forwards; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes slideInReverse { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes slideOutLeft { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-30px); } }
@keyframes slideOutRight { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(30px); } }

.part-header { margin-bottom: 20px; }
.part-header .eyebrow { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: .78rem; }

.wizard-nav { display: flex; justify-content: space-between; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }

/* Rating selector */
.rating { display: flex; gap: 8px; flex-wrap: wrap; }
.rating input { position: absolute; opacity: 0; pointer-events: none; }
.rating label {
  flex: 1; min-width: 92px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 8px; text-align: center; cursor: pointer; font-weight: 600; font-size: .82rem;
  color: var(--ink-soft); background: #fff; transition: all .12s; margin: 0;
}
.rating label:hover { border-color: var(--accent); }
.rating input:checked + label { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Channel inputs */
.channel-row { display: grid; grid-template-columns: 1fr 120px; gap: 12px; align-items: center; margin-bottom: 10px; }
.channel-total { display: flex; justify-content: space-between; font-weight: 700; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 6px; }
.channel-total.bad { color: var(--red); }
.channel-total.ok { color: var(--good); }

/* Deployed multiselect */
.toggle-row { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.deployed-block { display: none; margin-top: 14px; }
.deployed-block.show { display: block; }
.uc-group { margin-bottom: 14px; }
.uc-group h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); margin-bottom: 8px; }
.uc-check { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 6px; cursor: pointer; }
.uc-check:hover { background: var(--gray-bg); }
.uc-check input { margin-top: 3px; }
.uc-check .uc-name { font-weight: 600; }
.uc-check .uc-desc { color: var(--muted); font-size: .82rem; }

/* ---- Analyzing splash ----------------------------------------------------- */
.analyzing { text-align: center; max-width: 560px; margin: 40px auto; }
.spinner {
  width: 64px; height: 64px; border: 5px solid var(--blue-bg); border-top-color: var(--primary);
  border-radius: 50%; margin: 0 auto 28px; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.analyzing-steps { text-align: left; max-width: 360px; margin: 28px auto 0; }
.analyzing-steps li { list-style: none; padding: 10px 0 10px 34px; position: relative; color: var(--muted); font-weight: 600; }
.analyzing-steps li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line);
}
.analyzing-steps li.done { color: var(--ink); }
.analyzing-steps li.done::before { background: var(--good); border-color: var(--good); content: "✓"; color: #fff; font-size: 12px; text-align: center; line-height: 16px; }
.analyzing-steps li.active::before { border-color: var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; }
.progress-track { height: 6px; background: var(--blue-bg); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width .3s; }

/* ===========================================================================
   RESULTS — the three maquettes
   =========================================================================== */
.results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.results-head .meta { color: var(--muted); font-size: .9rem; }
.results-actions { display: flex; gap: 10px; }

/* ---- Results tabs --------------------------------------------------------- */
.result-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-top: 18px; }
.result-tab {
  appearance: none; background: transparent; border: none; cursor: pointer;
  padding: 12px 20px; font-family: inherit; font-size: .95rem; font-weight: 700;
  color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s; border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm);
}
.result-tab:hover { color: var(--ink-soft); background: var(--gray-bg); }
.result-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.result-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.tab-panel { display: none; opacity: 0; }
.tab-panel.active { display: block; animation: tabFadeIn .35s ease forwards; }

/* ---- CTA banner (non-authenticated teaser) -------------------------------- */
.cta-locked {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  margin-top: 18px; padding: 18px 24px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: #fff;
  box-shadow: var(--shadow-sm);
}
.cta-locked-text { display: flex; flex-direction: column; gap: 2px; }
.cta-locked-text strong { font-size: 1.05rem; font-weight: 800; }
.cta-locked-text span { font-size: .9rem; color: rgba(255,255,255,.80); }
.cta-locked .btn-primary { background: #fff; color: var(--primary); flex: none; }
.cta-locked .btn-primary:hover { background: #EAF0FB; }

/* ---- "Flou marketing" mask ------------------------------------------------ */
/* Blur is cosmetic; the user-select / pointer-events / touch-callout rules make
   the masked content impossible to select, copy or read on every browser. The
   bare `user-select` was ignored by Safari/iOS, which still allowed
   select-and-copy of the hidden text. */
.masked {
  filter: blur(7px);
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.maquette { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 30px; margin-top: 24px; }
.maquette > .m-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; }
.maquette .m-index { width: 30px; height: 30px; border-radius: 8px; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; flex: none; }
.maquette h2 { margin: 0; }
.maquette .m-sub { color: var(--muted); margin: 2px 0 22px 44px; }

.m-grid { display: grid; gap: 24px; }

/* shared section sub-heads */
.m1-structure h4, .channels-breakdown h4, .m1-radar h4, .gap-by-dim h4,
.m1-segmentation h4, .m2-stages h4, .m2-roi h4 {
  font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ink-soft); margin: 0 0 12px;
}

/* profile tags (sector + business type) + segmentation block */
.m1-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.m1-tag { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .4px; color: var(--ink-soft); background: var(--gray-bg);
  border: 1px solid var(--line); padding: 3px 10px; border-radius: 999px; }
.m1-tag-strong { background: var(--ink); color: #fff; border-color: var(--ink); }
.m1-segmentation .m1-bigstat { margin-bottom: 12px; }
.m1-segmentation .seg-breakdown { margin-top: 2px; }

/* shared swatches + legend */
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin-top: 12px; justify-content: center; }
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.swatch-current { background: var(--accent); }
.swatch-leader { background: #94A3B8; }
.swatch-prod { background: var(--good); }
.swatch-rev { background: var(--accent); }

/* =========================================================================
   MAQUETTE 1 — maturity synthesis (two balanced bands of 3 cards)
   ========================================================================= */
/* identity strip */
.m1-identity { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin: 2px 0 22px; }
.m1-identity-main { min-width: 0; }
.m1-id-meta { display: flex; gap: 28px; margin: 0; flex-wrap: wrap; }
.m1-id-meta > div { display: flex; flex-direction: column; gap: 1px; }
.m1-id-meta dt { margin: 0; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.m1-id-meta dd { margin: 0; font-weight: 600; color: var(--ink-soft); font-size: .9rem; }

/* bands + card grid */
.m1-band { margin-top: 26px; }
.m1-band:first-of-type { margin-top: 0; }
.m1-band-title { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin: 0 0 12px; }
.m1-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }

.m1-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.m1-card-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-soft); }
.m1-card-title::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--accent); flex: none; }
.m1-card .channels-breakdown h4 { font-size: .72rem; margin: 2px 0 10px; }
.m1-card .m1-bigstats { gap: 8px; }
.m1-card-empty { color: var(--muted); font-style: italic; font-size: .88rem; margin: 0; }
.m1-radar-card .radar-wrap { width: 100%; margin: auto 0; }
.mat-card .mat-hero { margin-top: 2px; }

.m1-grid { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 24px; align-items: start; }
.m1-col { min-width: 0; }

/* LEFT — organisation + sales structure */
.m1-company { display: flex; flex-direction: column; gap: 20px; }
.m1-org-name { margin: 0 0 6px; font-size: 1.25rem; color: var(--primary); }
.m1-org-sector { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); background: var(--gray-bg); padding: 3px 10px; border-radius: 999px; }
.m1-info { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.m1-info > div { display: flex; flex-direction: column; gap: 1px; }
.m1-info dt { margin: 0; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.m1-info dd { margin: 0; font-weight: 600; color: var(--ink); font-size: .9rem; }
.m1-bigstats { display: flex; flex-direction: column; gap: 10px; }
.m1-bigstat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--gray-bg); border-radius: var(--radius-sm); border-left: 4px solid var(--primary); }
.m1-bigstat .v { font-size: 1.45rem; font-weight: 800; color: var(--ink); line-height: 1.05; }
.m1-bigstat .l { font-size: .76rem; color: var(--muted); font-weight: 600; }

/* channel split bars */
.bar-line { display: grid; grid-template-columns: 1fr 90px 52px; align-items: center; gap: 10px; margin-bottom: 9px; }
.bar-name { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.bar-track { height: 8px; background: var(--gray-bg); border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bar-val { text-align: right; font-size: .82rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* CENTER — maturity score / ladder / compare / gaps */
.m1-maturity { display: flex; flex-direction: column; gap: 18px; }
.mat-hero { text-align: center; padding: 20px 18px; background: var(--blue-bg); border-radius: var(--radius); }
.mat-score { font-size: 3rem; font-weight: 900; color: var(--primary); line-height: 1; }
.mat-score small { font-size: 1.1rem; font-weight: 700; color: var(--muted); }
.mat-label { display: block; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-soft); margin-top: 4px; }
.mat-level { display: block; font-weight: 800; color: var(--primary); margin-top: 10px; font-size: .95rem; }
.mat-desc { margin: 6px 0 0; font-size: .82rem; color: var(--muted); }
.mat-ladder { display: flex; gap: 6px; }
.mat-ladder .rung { flex: 1; text-align: center; padding: 7px 0; border-radius: var(--radius-sm); background: var(--gray-bg); color: var(--muted); font-weight: 800; font-size: .85rem; }
.mat-ladder .rung.on { background: var(--primary); color: #fff; }
.mat-compare { display: flex; flex-direction: column; gap: 8px; }
.cmp-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.cmp-row.gap { background: var(--warning-bg); border-color: transparent; }
.cmp-key { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.cmp-val { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.cmp-row.gap .cmp-val { color: var(--warning); }

/* gap by dimension */
.gapdim { margin-bottom: 12px; }
.gapdim-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.gapdim-name { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.gapdim-delta { font-size: .8rem; font-weight: 800; color: var(--warning); font-variant-numeric: tabular-nums; }
.gapdim-track { position: relative; height: 8px; background: var(--gray-bg); border-radius: 999px; }
.gapdim-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--primary); border-radius: 999px; }
.gapdim-marker { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--ink); border-radius: 2px; transform: translateX(-1px); }

/* RIGHT — radar */
.m1-radar { display: flex; flex-direction: column; }
.radar-wrap { width: 100%; }
.radar-wrap .chart, .roi-chart .chart { width: 100%; height: auto; display: block; }

/* =========================================================================
   MAQUETTE 2 — value potential
   ========================================================================= */
/* Two natures of value, side by side and NEVER summed: productivity (an
   avoided cost, green) and revenue (additional turnover, blue). Each block is
   self-contained — its own figure, its own chart, its own trajectory. */
.m2-disclaimer {
  margin: 0 0 18px; padding: 10px 14px; background: var(--gray-bg);
  border-left: 3px solid var(--primary); border-radius: var(--radius-sm);
  font-size: .82rem; color: var(--ink-soft); line-height: 1.5;
}
.m2-natures { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-bottom: 24px; }
.nature-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: #fff; box-shadow: var(--shadow-sm); }
.nature-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.nature-head h4 { margin: 0; font-size: 1rem; color: var(--ink); }
.nature-sub { margin: 2px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.nature-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; margin-top: 4px; display: inline-block; }
.nature-prod .nature-dot { background: var(--good); }
.nature-rev .nature-dot { background: var(--accent); }
.nature-hero { text-align: center; padding: 18px; border-radius: var(--radius); color: #fff; margin-bottom: 12px; }
.nature-prod .nature-hero { background: var(--good); }
.nature-rev .nature-hero { background: var(--accent); }
.nature-amount { display: block; font-size: 2.2rem; font-weight: 900; line-height: 1; }
.nature-caption { display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; opacity: .92; margin-top: 6px; }
.nature-note { margin: 10px 0 0; padding: 9px 11px; background: var(--gray-bg);
  border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  font-size: .76rem; color: var(--ink-soft); line-height: 1.45; }
.nature-stages-title { margin: 18px 0 10px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.nature-prod .stat { border-left-color: var(--good); }
.nature-rev .stat { border-left-color: var(--accent); }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.stat { border-radius: var(--radius-sm); padding: 14px 16px; background: var(--gray-bg); border-left: 4px solid var(--primary); }
.stat-value { display: block; font-size: 1.45rem; font-weight: 800; color: var(--ink); line-height: 1.05; }
.stat-label { display: block; font-size: .76rem; color: var(--muted); font-weight: 600; margin-top: 2px; }
.stat.big { border-left-color: var(--accent); }
.stat.big .stat-value { font-size: 2rem; color: var(--primary); }

.stage-item { margin-bottom: 12px; }
.stage-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.stage-name { font-size: .85rem; font-weight: 700; color: var(--ink-soft); }
.stage-val { font-size: .85rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.bar { height: 14px; border-radius: 999px; background: var(--gray-bg); overflow: hidden; display: flex; }
.bar .seg { height: 100%; display: block; }
.bar .seg-prod { background: var(--good); }
.bar .seg-rev { background: var(--accent); }

/* ROI */
.m2-roi { margin-top: 4px; }
/* One chart, two curves — the natures are compared, never merged. */
.roi-single { max-width: 760px; margin: 0 auto; }
.roi-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; }
.roi-nature-stats { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: #fff; }
.roi-nature-stats h5 { margin: 0 0 10px; font-size: .88rem; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.roi-nature-prod .nature-dot { background: var(--good); }
.roi-nature-rev .nature-dot { background: var(--accent); }
.roi-nature-prod .stat { border-left-color: var(--good); }
.roi-nature-rev .stat { border-left-color: var(--accent); }
.roi-stats-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.roi-chart { width: 100%; }
.roi-stats { display: flex; flex-direction: column; gap: 12px; }
.m2-note { margin: 14px 0 0; font-size: .82rem; color: var(--muted); font-style: italic; }

/* =========================================================================
   MAQUETTE 3 — priority use cases
   ========================================================================= */
.uc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin-top: 6px; }
.uc-fiche { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; }
.uc-fiche:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.uc-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.uc-top .chip.feas { margin-left: auto; }
.uc-fiche .rank { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; flex: none; }
.uc-fiche .stage-tag { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); }
.uc-fiche h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.uc-desc { color: var(--ink-soft); font-size: .86rem; margin: 0 0 14px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--gray-bg); color: var(--ink-soft); }
.chip.feas { background: var(--blue-bg); color: var(--primary); }
.chip.tool { background: #EEF2FA; color: var(--ink-soft); border: 1px solid var(--line); }

/* enriched use-case blocks */
.uc-block { margin: 0 0 14px; }
.uc-block-lbl { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); margin-bottom: 6px; }
.uc-block p { margin: 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.5; }
.uc-illus { background: var(--gray-bg); border-radius: var(--radius-sm); padding: 12px 14px; border-left: 3px solid var(--accent); }
.uc-illus p { font-style: italic; }
.uc-prereq p { color: var(--muted); }
.uc-tools .chips { margin-bottom: 0; }
/* The two gains are shown in two separate cells, never stacked in one bar. */
.uc-foot { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 14px; border-top: 1px solid var(--line); margin-top: auto; }
.uc-foot-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.uc-gain { padding-left: 10px; border-left: 3px solid var(--line); }
.uc-gain-prod { border-left-color: var(--good); }
.uc-gain-rev { border-left-color: var(--accent); }
.uc-gain-lbl { display: flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 4px; }
.uc-gain-val { display: block; font-weight: 800; font-size: 1.1rem; line-height: 1; color: var(--ink); }
.uc-gain-prod .uc-gain-val { color: var(--good); }
.uc-gain-rev .uc-gain-val { color: var(--accent); }
.uc-gain-share { display: block; font-size: .7rem; color: var(--muted); margin-top: 3px; }
.m-sub-note { font-size: .8rem; color: var(--muted); font-style: italic; margin-top: 4px; }

/* admin-only calculation detail (collapsible) */
.calc-detail { margin-top: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.calc-detail > summary { cursor: pointer; padding: 18px 24px; font-weight: 700; color: var(--primary); list-style: none; display: flex; align-items: center; gap: 10px; }
.calc-detail > summary::-webkit-details-marker { display: none; }
.calc-detail > summary::before { content: "▸"; font-size: .9rem; transition: transform .15s; }
.calc-detail[open] > summary::before { transform: rotate(90deg); }
.calc-detail-body { padding: 0 24px 24px; }
.calc-detail-bases { font-size: .85rem; color: var(--ink-soft); margin: 0 0 16px; }
.calc-table { font-size: .82rem; }
.calc-table th, .calc-table td { padding: 8px 10px; }
.calc-table tfoot td { font-weight: 800; background: var(--gray-bg); border-top: 2px solid var(--line); }
.calc-table tr.row-ineligible { color: var(--muted); background: #FAFBFE; }
.calc-table tr.row-ineligible td { font-style: italic; }

/* qualitative analysis (collapsible, per result tab) */
.qual-detail { margin-top: 24px; background: var(--blue-bg); border: 1px solid var(--line); border-radius: var(--radius); }
.qual-detail > summary { cursor: pointer; padding: 16px 22px; font-weight: 800; color: var(--primary); list-style: none; display: flex; align-items: center; gap: 10px; }
.qual-detail > summary::-webkit-details-marker { display: none; }
.qual-detail > summary::before { content: "▸"; font-size: .9rem; transition: transform .15s; }
.qual-detail[open] > summary::before { transform: rotate(90deg); }
.qual-detail-body { padding: 0 22px 20px; }
.qual-detail-body p { margin: 0 0 12px; font-size: .92rem; color: var(--ink-soft); line-height: 1.6; }
.qual-detail-body p:last-child { margin-bottom: 0; }

/* results footer */
.results-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }

/* ---- Tables (admin) ------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
table.data th { background: var(--gray-bg); font-size: .76rem; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); font-weight: 800; }
table.data tbody tr:hover { background: #FAFBFE; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.empty-state { text-align: center; padding: 48px 20px; color: var(--muted); }

/* admin dashboard cards */
.admin-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.admin-card { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s; color: inherit; }
.admin-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); text-decoration: none; }
.admin-card .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--blue-bg); color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.admin-card .ic svg { width: 24px; height: 24px; }
.admin-card h3 { color: var(--primary); }
.admin-card p { color: var(--muted); font-size: .88rem; margin: 0; }

/* parameters */
.param-section { margin-bottom: 32px; }
.checkbox-cell { text-align: center; }
.sticky-actions { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding: 16px 0; margin-top: 24px; display: flex; gap: 12px; justify-content: flex-end; }

/* misc */
.badge { display: inline-block; font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.badge.dep { background: var(--warning-bg); color: var(--warning); }
.section-title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }

/* admin section headers (title + back/action button on one row) */
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.admin-head .lead { margin: 4px 0 0; }
.admin-head-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.export-group { display: inline-flex; gap: 4px; padding: 0 6px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.export-group .btn { font-weight: 800; letter-spacing: .3px; }
.admin-card .ic { font-size: 26px; line-height: 46px; }

/* table actions */
.actions-col { text-align: right; width: 1%; white-space: nowrap; }
.btn-sm { padding: 6px 12px; font-size: .8rem; }
.row-actions form { display: inline; margin: 0; }

/* upload */
.upload-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 28px; max-width: 620px; }
.upload-actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; }

/* parameters */
.params-block { margin-bottom: 32px; }
.params-block h2 { margin: 0 0 14px; }
.uc-table input[type="number"] { width: 92px; }
.uc-table input[type="checkbox"] { width: 18px; height: 18px; }
.uc-table .uc-stage-head th {
  background: var(--blue-bg); color: var(--primary);
  font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  border-top: 2px solid var(--primary); padding: 10px 14px; text-align: left;
}
.uc-table tbody.uc-stage-group:first-of-type .uc-stage-head th { border-top: none; }
.params-actions { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding: 16px 0; margin-top: 8px; display: flex; gap: 12px; justify-content: flex-end; }
.reset-form { margin-top: 20px; }
.btn-danger-ghost { color: var(--red); border-color: #f3c9c6; background: transparent; }
.btn-danger-ghost:hover { background: #fdecea; }

/* error pages */
.error-page { text-align: center; padding: 70px 20px; }
.error-code { display: block; font-size: 4.5rem; font-weight: 900; color: var(--primary); line-height: 1; }
.error-page h1 { margin: 10px 0 8px; }
.error-page .lead { margin-bottom: 24px; }
.muted { color: var(--muted); }
.text-sm { font-size: .85rem; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }

/* SVG charts container */
.chart { width: 100%; }
svg .axis { stroke: var(--line); stroke-width: 1; }
svg .axis-text { fill: var(--muted); font-size: 10px; font-family: var(--font); }
svg .grid { stroke: #EEF1F7; stroke-width: 1; }

/* ===========================================================================
   ASSESSMENT FORM — head, wizard steps, Part 2 channels, Part 3 maturity
   =========================================================================== */
.assessment-head { margin-bottom: 22px; }
.assessment-head h1 { margin-bottom: 6px; }
.lead { color: var(--ink-soft); font-size: 1.05rem; max-width: 70ch; }

.assessment-form { max-width: 860px; }
.assessment-form .form-part { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 28px; }
.assessment-form legend { padding: 0; margin-bottom: 18px; font-size: 1.25rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 12px; }
.part-tag { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 9px; border-radius: 999px; background: var(--primary); color: #fff; font-size: .82rem; font-weight: 800; }
.hint { color: var(--muted); font-size: .84rem; }
small.hint { display: block; margin-top: 4px; }

/* Part 2 — grouped sub-sections (Modèle économique / Segmentation / Force comm.) */
.form-group { margin-bottom: 8px; }
.form-group + .form-group { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.form-group-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.form-group-num { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; }
.form-group-title { margin: 0; font-size: 1.06rem; color: var(--ink); }
.form-group-sub { margin: 3px 0 0; color: var(--muted); font-size: .85rem; }
.form-group .field { margin-bottom: 0; }
.form-group .grid-2 { align-items: start; }
.form-group .grid-2 + .field { margin-top: 18px; }

/* Wizard step indicator (ws-num / ws-label) */
.wizard-steps .ws .ws-num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--gray-bg); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800;
}
.wizard-steps .ws .ws-label { font-weight: 600; font-size: .9rem; }
.wizard-steps .ws.active .ws-num { background: var(--accent); color: #fff; }
.wizard-steps .ws.done .ws-num { background: var(--good); color: #fff; }

/* Channels (Part 2) */
.channels { margin-top: 10px; }
.channels .channel-row { grid-template-columns: 1fr 130px; }
.channel-input { display: flex; align-items: center; gap: 6px; }
.channel-input input { text-align: right; }
.channel-input .suffix { color: var(--muted); font-weight: 700; }

/* Maturity scale legend (Part 3) */
.scale-legend { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.scale-legend-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--gray-bg); }
.scale-legend .scale-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; }
.scale-legend .scale-text { display: flex; flex-direction: column; gap: 2px; }
.scale-legend .scale-text strong { font-size: .82rem; color: var(--ink); }
.scale-legend .scale-text small { font-size: .74rem; color: var(--muted); line-height: 1.3; }

/* Maturity dimensions + statements */
.maturity-dim { padding: 18px 0; border-top: 1px solid var(--line); }
.maturity-dim:first-of-type { border-top: none; }
.maturity-dim-title { display: flex; flex-direction: column; gap: 2px; margin: 0 0 14px; }
.maturity-dim-title .dim-name { font-size: 1.05rem; font-weight: 700; color: var(--primary); }
.statement-field { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; flex-wrap: wrap; }
.statement-text { margin: 0; flex: 1; min-width: 240px; font-size: .92rem; color: var(--ink-soft); font-weight: 600; }

/* Anchored 1..5 rating pills (rating-opt / rating-pill) */
.rating-opt { position: relative; margin: 0; cursor: pointer; }
.rating-opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rating-pill {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink-soft);
  font-weight: 800; font-size: .95rem; transition: all .12s;
}
.rating-opt:hover .rating-pill { border-color: var(--accent); color: var(--accent); }
.rating-opt input:checked + .rating-pill { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,87,184,.16); }
.rating-opt input:focus-visible + .rating-pill { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Deployed question (yes/no + per-stage checklists) */
.deployed-q { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.radio-inline { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.radio-chip { position: relative; cursor: pointer; }
.radio-chip input { position: absolute; opacity: 0; }
.radio-chip span { display: inline-flex; align-items: center; padding: 8px 20px; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--ink-soft); background: #fff; transition: all .12s; }
.radio-chip input:checked + span { background: var(--accent); color: #fff; border-color: var(--accent); }
/* "Coming soon" choices (e.g. B2C / B2B2C) — visually muted, not selectable */
.radio-chip.soon span { border-style: dashed; color: var(--muted); background: var(--gray-bg); }
.radio-chip.soon:hover span { border-color: var(--accent); color: var(--accent); }
.field-note { display: none; margin-top: 10px; font-size: .84rem; font-weight: 600; color: var(--accent); }
.field-note.show { display: block; }

.deployed-block { margin-top: 18px; }
.deployed-title { font-weight: 700; margin-bottom: 12px; }
.deployed-stage { margin-bottom: 18px; }
.deployed-stage h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .6px; color: var(--accent); margin-bottom: 8px; }
.deployed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.check-chip { display: flex; align-items: flex-start; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: all .12s; }
.check-chip:hover { background: var(--gray-bg); }
.check-chip input { margin-top: 3px; }
.check-chip span { font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.check-chip input:checked ~ span { color: var(--accent); }

/* ---------------------------------------------------------------------------
   Feuille de route 18 mois (onglet admin) — timeline en 3 vagues
--------------------------------------------------------------------------- */
.roadmap-intro { margin: 0 0 24px; }
.roadmap-intro p { color: var(--ink-soft); line-height: 1.6; margin: 0 0 10px; }

.roadmap { list-style: none; margin: 0; padding: 0; position: relative; }
.roadmap::before {
  content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px;
  width: 2px; background: var(--line);
}
.rm-wave { position: relative; padding: 0 0 28px 56px; }
.rm-wave:last-child { padding-bottom: 0; }

.rm-marker {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--primary); color: #fff; font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 0 0 4px #fff;
}
.rm-quickwins .rm-marker { background: var(--good, #1A8D5F); }
.rm-structuring .rm-marker { background: var(--primary); }
.rm-advanced .rm-marker { background: var(--warning, #B8860B); }

.rm-body {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius, 12px);
  padding: 16px 18px;
}
.rm-quickwins .rm-body { background: var(--good-bg, #EAF7F1); }
.rm-advanced .rm-body { background: var(--warning-bg, #FBF4E3); }

.rm-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.rm-title h3 { margin: 0; font-size: 1.1rem; color: var(--ink); }
.rm-window {
  display: inline-block; margin-top: 2px; font-size: .8rem; font-weight: 600;
  color: var(--ink-soft); letter-spacing: .02em;
}
.rm-metrics { display: flex; gap: 18px; text-align: right; flex-wrap: wrap; }
.rm-metric { display: block; }
.rm-metric-prod .rm-gain { color: var(--good); }
.rm-metric-rev .rm-gain { color: var(--accent); }
.rm-gain { display: block; font-size: 1.15rem; font-weight: 700; color: var(--primary); }
.rm-gain-lbl { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--muted); }

.rm-tagline { color: var(--ink-soft); line-height: 1.55; margin: 10px 0 14px; }

.rm-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rm-item {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
}
.rm-quickwins .rm-item, .rm-advanced .rm-item { background: rgba(255,255,255,.7); }
.rm-item-name { font-weight: 600; color: var(--ink); flex: 1 1 200px; }
.rm-item-feas { font-size: .78rem; color: var(--ink-soft); }
.rm-item-gain { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.rm-item-gain:first-of-type { margin-left: auto; }
.rm-empty { color: var(--muted); font-style: italic; margin: 4px 0 0; }

/* ===========================================================================
   MAQUETTE 1 v2 — Executive hero banner + two-column layout
   =========================================================================== */
/* Hero banner: score on left, comparison on right */
.m1-hero-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 28px 32px; margin: 18px 0 24px;
  background: linear-gradient(135deg, var(--blue-bg) 0%, #E8F0FC 100%);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.m1-hero-score-block { display: flex; flex-direction: column; gap: 8px; }
.mat-score-xl { font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 900; color: var(--primary); line-height: 1; }
.mat-score-xl small { font-size: .38em; font-weight: 700; color: var(--muted); }
.mat-badge {
  display: inline-flex; align-items: center; padding: 5px 14px;
  border-radius: 999px; font-weight: 800; font-size: .82rem;
  white-space: nowrap;
}
.mat-badge-lvl1, .mat-badge-lvl2 { background: #FDECEA; color: #B71C1C; }
.mat-badge-lvl3 { background: var(--warning-bg); color: #B8600B; }
.mat-badge-lvl4, .mat-badge-lvl5 { background: var(--good-bg); color: #1B5E20; }
.m1-hero-banner .mat-desc { margin: 0; font-size: .85rem; color: var(--ink-soft); max-width: 42ch; }
.m1-hero-banner .mat-ladder { margin-top: 4px; }

.m1-hero-compare {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 200px; padding: 16px 20px;
  background: rgba(255,255,255,.8); border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,.6);
}
.m1-hero-compare .cmp-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0;
  border: none;
}
.m1-hero-compare .cmp-val { font-size: 1.15rem; font-weight: 900; }
.cmp-val-accent { color: var(--accent); }
.cmp-val-warning { color: var(--warning); }
.cmp-row-gap { padding-top: 8px; border-top: 1px solid var(--line); }

/* Two-column layout: gaps + radar */
.m1-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.m1-duo-left, .m1-duo-right {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 24px;
}

/* Gap by dimension v2 — bicolor bars */
.gap-v2 { display: flex; flex-direction: column; gap: 18px; }
.gapdim-v2 { display: grid; grid-template-columns: 1fr 44px 50px; gap: 8px; align-items: center; }
.gapdim-v2-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gapdim-v2 .gapdim-name { font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.gapdim-v2-score { font-size: .92rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.gapdim-v2-track {
  position: relative; height: 10px; background: var(--gray-bg);
  border-radius: 999px; overflow: visible; grid-column: 1 / 3;
}
.gapdim-v2-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--accent); border-radius: 999px;
  transition: width .9s cubic-bezier(.22,.61,.36,1);
}
.gapdim-v2-marker {
  position: absolute; top: -3px; width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 8px solid var(--warning);
  transform: translateX(-6px);
}
.gapdim-v2-delta {
  font-size: .82rem; font-weight: 800; color: var(--warning);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* Enlarged radar */
.radar-wrap-lg { max-width: 420px; margin: 0 auto; }

/* Target swatch (green) for legend */
.swatch-target { background: #2E7D32; }

/* ===========================================================================
   STICKY SCALE LEGEND (Part 3 — maturity assessment)
   =========================================================================== */
.scale-sticky {
  position: sticky; top: 64px; z-index: 30;
  display: none; gap: 4px; padding: 8px 12px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm); font-size: .78rem; margin-bottom: 14px;
}
.scale-sticky.visible { display: flex; flex-wrap: wrap; }
.scale-sticky-item { padding: 2px 8px; color: var(--muted); white-space: nowrap; }
.scale-sticky-item strong { color: var(--ink); margin-right: 3px; }

/* ===========================================================================
   TAB CROSSFADE TRANSITIONS
   =========================================================================== */
@keyframes tabFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===========================================================================
   HAMBURGER MENU (mobile)
   =========================================================================== */
.hamburger {
  display: none; appearance: none; background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; padding: 10px; flex-direction: column; justify-content: center; gap: 5px;
}
.hamburger span {
  display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===========================================================================
   CHART TOOLTIPS
   =========================================================================== */
.chart-tooltip {
  position: absolute; z-index: 100; pointer-events: none;
  background: var(--primary); color: #fff; padding: 6px 12px; border-radius: 6px;
  font-size: .82rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,.15); opacity: 0;
  transition: opacity .15s ease;
}
.chart-tooltip.visible { opacity: 1; }
.chart-tooltip::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -5px; border: 5px solid transparent; border-top-color: var(--primary);
}

/* ===========================================================================
   ANALYZING — error state
   =========================================================================== */
.analyzing-error {
  margin-top: 24px; padding: 18px; background: #FDECEA; border: 1px solid #F3C9C6;
  border-radius: var(--radius-sm); text-align: center;
}
.analyzing-error p { color: #B71C1C; font-weight: 600; margin-bottom: 12px; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 900px) {
  .scale-legend { grid-template-columns: 1fr 1fr; }
  .statement-field { justify-content: flex-start; }
  .m1-grid, .m1-cards, .m2-natures, .roi-stats-grid, .steps, .admin-cards, .stat-row,
  .grid-2, .grid-3, .uc-foot-duo, .roi-stats-inline, .m1-duo { grid-template-columns: 1fr; }
  .m1-hero-banner { flex-direction: column; gap: 18px; padding: 20px; }
  .m1-hero-compare { min-width: unset; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .hero { padding: 40px 28px; } .hero h1 { font-size: 1.9rem; }
  .brand .app-logo { height: 30px; }

  /* Hamburger mobile menu */
  .hamburger { display: flex; }
  .main-nav {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 12px 24px; flex-direction: column; gap: 4px;
    z-index: 50;
  }
  .main-nav.open { display: flex; animation: fade .2s ease; }
  .main-nav a { padding: 12px 16px; border-radius: var(--radius-sm); }

  .lang-switch { margin-left: auto; }
}
@media (max-width: 600px) {
  .wizard-steps .ws .ws-label { display: none; }
  .wizard-steps .ws { padding: 8px 12px; }
  .scale-legend { grid-template-columns: 1fr; }
}
@media print {
  .site-header, .site-footer, .results-actions, .wizard-nav, .result-tabs,
  .wizard-progress-wrap, .scale-sticky, .hamburger { display: none; }
  body { background: #fff; }
  .maquette { break-inside: avoid; box-shadow: none; }
  .tab-panel { display: block !important; opacity: 1 !important; }
}