/* app.css — CSS v25 externalisé en Phase 0 (déplacement pur, fonts sorties en woff2).
   Phase 1 y taillera tokens.css + matiere.css. Chargé APRÈS tokens.css et matiere.css. */

  /* ===== Fonts self-hosted (base64, zéro requête externe) — Archivo + Space Mono, latin + latin-ext ===== */
/* Archivo 300 italic · latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src:url(../assets/fonts/archivo-300-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo 300 italic · latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src:url(../assets/fonts/archivo-300-italic-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo 200 normal · latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 200;
  font-stretch: 100%;
  font-display: swap;
  src:url(../assets/fonts/archivo-200.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo 200 normal · latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 200;
  font-stretch: 100%;
  font-display: swap;
  src:url(../assets/fonts/archivo-200-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo 300 normal · latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src:url(../assets/fonts/archivo-200.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo 300 normal · latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300;
  font-stretch: 100%;
  font-display: swap;
  src:url(../assets/fonts/archivo-200-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo 400 normal · latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src:url(../assets/fonts/archivo-200.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo 400 normal · latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src:url(../assets/fonts/archivo-200-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo 500 normal · latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src:url(../assets/fonts/archivo-200.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo 500 normal · latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src:url(../assets/fonts/archivo-200-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo 600 normal · latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src:url(../assets/fonts/archivo-200.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo 600 normal · latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src:url(../assets/fonts/archivo-200-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Archivo 700 normal · latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src:url(../assets/fonts/archivo-200.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo 700 normal · latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src:url(../assets/fonts/archivo-200-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space Mono 400 normal · latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url(../assets/fonts/space-mono-400.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Mono 400 normal · latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:url(../assets/fonts/space-mono-400-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space Mono 700 normal · latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url(../assets/fonts/space-mono-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Mono 700 normal · latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:url(../assets/fonts/space-mono-700-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    background:
      radial-gradient(130vw 95vh at 8% -12%, oklch(0.98 0.006 92 / .85), transparent 52%),
      radial-gradient(95vw 85vh at 112% 116%, oklch(0.86 0.014 248 / .55), transparent 58%),
      radial-gradient(60vw 60vh at 88% 8%, oklch(0.95 0.01 40 / .3), transparent 55%),
      oklch(0.895 0.004 106);
    background-attachment:fixed;
    color:var(--ink); font-family:var(--sans); font-size:var(--fs-3); font-weight:400; line-height:1.5; letter-spacing:-.006em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
  .mono{font-family:var(--mono)}
  .ic{ width:1em; height:1em; display:inline-block; vertical-align:-.125em; flex:none }

  /* ---------- app shell : sidebar + content ---------- */
  .app{ display:flex; align-items:flex-start; min-height:100vh }
  /* H1 — sidebar = panneau verre franc (jour). Matière liquid-glass reconstruite (north-star nav-sidebar.*),
     PAS le render étiré en fond fantôme. Edge-light à droite + top-highlight + creux bas. */
  .side{ width:var(--sidew); flex:0 0 var(--sidew); position:sticky; top:0; align-self:stretch; height:100vh; overflow-y:auto; padding:28px 16px 32px; scrollbar-width:thin;
    background:
      linear-gradient(180deg, oklch(1 0 0 / .62), oklch(1 0 0 / .16) 34%, oklch(1 0 0 / .04) 78%, oklch(0.2 0.002 106.6 / .03)),
      var(--panel);
    border-right:1px solid oklch(0.2 0.002 106.6 / .10);
    box-shadow:
      inset -1px 0 0 oklch(1 0 0 / .55),
      inset 1px 0 0 oklch(1 0 0 / .35),
      inset 0 1px 0 oklch(1 0 0 / .7),
      6px 0 28px -18px oklch(0.2 0.002 106.6 / .28);
    -webkit-backdrop-filter:blur(8px) saturate(1.05); backdrop-filter:blur(8px) saturate(1.05) }
  .brand{ padding:4px 12px 20px}
  .brand .bk{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.22em; text-transform:uppercase; color:var(--oxblood) }
  .brand .bt{ font-weight:300; font-size:var(--fs-5); line-height:1.1; letter-spacing:-.02em; margin-top:8px}
  .brand .bt b{ font-weight:500; color:var(--oxblood) }
  .navgroup{ margin-top:20px}
  .navgroup .gh{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2); padding:0 12px 8px; display:flex; align-items:center; gap:8px}
  .navgroup .gh .zn{ background:var(--ink); color:var(--paper); width:16px; height:16px; display:grid; place-items:center; font-size:var(--fs-1); border-radius:var(--r-sm); flex:none }
  .navgroup .gh .zn.ox{ background:var(--oxblood) }
  .nav-i{ appearance:none; width:100%; text-align:left; cursor:pointer; background:none; border:none; border-radius:var(--r-sm); color:var(--ink-2); font-family:var(--sans); font-size:var(--fs-3); font-weight:400; letter-spacing:-.01em; padding:8px 12px; display:flex; align-items:center; gap:12px; transition:background 0.12s,color 0.12s }
  .nav-i:hover{ background:var(--paper-2) }
  /* H4 — actif = pill verre + anneau oxblood (render nav-buttons.active), PAS un bloc plein */
  .nav-i[aria-current="true"]{ background:transparent; color:var(--ink); font-weight:500 }
  .nav-i[aria-current="true"] .dot{ box-shadow:0 0 0 3px var(--oxblood-soft) }
  .nav-i:focus-visible{ outline:2px solid var(--oxblood); outline-offset:-2px }
  .nav-i .dot{ width:7px; height:7px; border-radius:var(--r-pill); background:var(--line-2); flex:none }
  .nav-i .dot.btp{ background:var(--btp) } .nav-i .dot.gastro{ background:var(--gastro) } .nav-i .dot.vin{ background:var(--vin) } .nav-i .dot.immo{ background:var(--immo) } .nav-i .dot.immoprestige{ background:var(--immoprestige) } .nav-i .dot.hotellerie{ background:var(--hotellerie) } .nav-i .dot.ecommerce{ background:var(--ecommerce) } .nav-i .dot.auto{ background:var(--auto) } .nav-i .dot.beaute{ background:var(--beaute) } .nav-i .dot.gc{ background:var(--gc) }
  .nav-i .cnt{ margin-left:auto; font-family:var(--mono); font-size:var(--fs-1); color:var(--grey) }
  .nav-i[aria-current="true"] .cnt{ color:var(--grey) }
  .nav-i.big{ font-weight:500; font-size:var(--fs-3)}

  .content{ flex:1; min-width:0; max-width:1080px; margin:0 auto; padding:40px 40px 80px}
  .view{ display:none } .view.on{ display:block; animation:fade 0.32s ease }
  @keyframes fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

  /* ---------- editorial atoms ---------- */
  .kick{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.24em; text-transform:uppercase; color:var(--oxblood); display:flex; align-items:center; gap:16px; margin-bottom:16px}
  .kick::after{ content:""; height:1px; flex:1; max-width:120px; background:var(--line-2) }
  h1{ font-weight:360; font-size:var(--fs-display); line-height:1.1; letter-spacing:-.022em; text-wrap:balance }
  /* accent niche (liseré + badge d'étape teinté) — --nc posé par openFiche/renderRef/renderPB */
  #pbFiche .finfo, #pbFiche .grid2>.finfo{ border-left:3px solid var(--nc,var(--line-2)) }
  #pbFiche .fk .nsq, #v-ref .block-k .nsq{ background:var(--nc,var(--ink)) }
  #v-ref .card, #v-ref .tier{ border-left:3px solid var(--nc,var(--line-2)) }
  h1 b{ font-weight:500; color:var(--oxblood) }
  h2.sec{ font-weight:300; font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.02em; margin-bottom:8px}
  h2.sec b{ font-weight:500 }
  .lead{ font-weight:300; font-size:var(--fs-lead); line-height:1.5; color:var(--ink-2); max-width:66ch }
  .lead strong{ font-weight:500; color:var(--ink) }
  .nsq{ width:24px; height:24px; flex:0 0 24px; background:var(--cc,var(--ink)); color:var(--paper); display:grid; place-items:center; font-family:var(--mono); font-size:var(--fs-1)}
  .nsq.ox{ background:var(--oxblood) }
  .block{ margin-top:40px}
  .block-k{ font-family:var(--mono); font-size:var(--fs-meta); font-weight:inherit; letter-spacing:.2em; text-transform:uppercase; color:var(--grey); display:flex; align-items:center; gap:12px; margin:0 0 20px}
  .block-k .nsq{ width:22px;height:22px;flex:0 0 22px; font-size:var(--fs-1)}
  /* D1 — sommaire collant méthode (3 zones) : focal + navigation, sans masquer le contenu */
  .meth-toc{ position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 32px; padding:12px 0; background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:saturate(1.2) blur(10px); -webkit-backdrop-filter:saturate(1.2) blur(10px); border-bottom:1px solid var(--line) }
  .meth-toc-k{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-right:4px}
  .meth-toc-b{ appearance:none; cursor:pointer; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.04em; text-transform:uppercase; padding:8px 16px; min-height:40px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:transparent; color:var(--ink-2); transition:color 0.12s var(--e-out), border-color 0.12s var(--e-out) }
  .meth-toc-b:hover{ color:var(--ink); border-color:var(--oxblood) }
  .meth-toc-b:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .meth-toc-b[aria-current="true"]{ color:var(--oxblood); border-color:var(--oxblood) }
  #meth-offre,#meth-roi,#meth-philo{ scroll-margin-top:80px} /* décale sous le sommaire collant */
  .stnote{ font-weight:300; font-size:var(--fs-3); color:var(--grey); margin-top:12px; max-width:70ch }
  .stnote b{ color:var(--ink-2); font-weight:500 }

  /* cards / tiers */
  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .card{ border:1px solid var(--line-2); border-radius:var(--r); padding:24px 24px; background:var(--paper) }
  .card .ct{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--oxblood); margin-bottom:8px}
  .card p{ font-weight:300; font-size:var(--fs-3); line-height:1.5; color:var(--ink-2) } .card p b{ font-weight:500; color:var(--ink) }
  .tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .tier{ position:relative; border:1px solid var(--line-2); border-radius:var(--r); padding:24px 20px; background:var(--paper); display:flex; flex-direction:column }
  .tier.reco{ border-color:var(--ink); border-width:1.5px }
  .tier .tl{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--grey) } .tier.reco .tl{ color:var(--oxblood) }
  .tier .tn{ font-weight:500; font-size:var(--fs-4); margin:4px 0 0; line-height:1.1}
  .tier .tw{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey-2); text-decoration:line-through; margin-top:12px}
  .tier .tp{ font-family:var(--mono); font-size:var(--fs-5); font-weight:700; letter-spacing:-.02em; line-height:1.1; margin-top:4px} .tier .tp small{ font-family:var(--sans); font-size:var(--fs-2); font-weight:400; color:var(--grey) }
  .tier .tm{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.05em; text-transform:uppercase; color:var(--grey); margin-top:8px}
  .rbadge{ position:absolute; top:-10px; left:18px; background:var(--oxblood); color:var(--paper); font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; padding:4px 12px; border-radius:var(--r-pill)}

  /* say / script */
  .say{ font-weight:300; font-size:var(--fs-3); line-height:1.5; color:var(--ink); border-left:2px solid var(--oxblood); padding-left:16px} .say b{ font-weight:500; color:var(--oxblood) }
  .q{ display:block; font-weight:300; font-size:var(--fs-3); color:var(--ink-2); padding:4px 0 4px 16px; border-left:2px solid var(--line-2); margin:4px 0}
  .move{ border:1px solid var(--line-2); border-radius:var(--r); background:var(--paper); overflow:hidden; margin-bottom:12px}
  .move .mh{ display:flex; align-items:center; gap:12px; padding:12px 20px; background:var(--paper-2) }
  .move .mt{ font-weight:500; font-size:var(--fs-3)} .move .mb{ padding:20px 20px}

  /* duo leading/lagging */
  .duo{ display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .col{ border-radius:var(--r); padding:24px}
  .col.after{ background:var(--ink); color:var(--paper) } .col.before{ border:1px solid var(--line-2); background:var(--paper) }
  .col h3{ font-family:var(--mono); font-size:var(--fs-meta); font-weight:inherit; letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px}
  .col.after h3{ color:oklch(0.712 0.099 27.6) } .col.before h3{ color:var(--grey) }
  .col .row{ display:flex; gap:12px; padding:8px 0; border-top:1px solid rgba(128,128,124,.28); font-weight:300; font-size:var(--fs-3); align-items:flex-start; line-height:1.4}
  .col.after .row{ color:oklch(0.884 0.004 106.5) } .col.before .row{ color:var(--ink-2) }
  .col .row:first-of-type{ border-top:none } .col .row b{ font-weight:500 } .col.after .row b{ color:var(--paper) } .col.before .row b{ color:var(--ink) }
  .col .row .ic{ flex:none; margin-top:4px; width:14px; height:14px } .col.after .row .ic{ color:oklch(0.762 0.068 155.3) } .col.before .row .ic{ color:var(--grey) }

  /* objections */
  .obj{ border:1px solid var(--line-2); border-radius:var(--r); background:var(--paper); margin-bottom:12px; overflow:hidden }
  .obj[hidden]{ display:none }
  .obj .oq{ width:100%; text-align:left; appearance:none; background:none; border:none; cursor:pointer; color:var(--ink); font-family:var(--sans); font-size:var(--fs-3); font-weight:500; letter-spacing:-.01em; padding:16px 20px; display:flex; align-items:center; gap:12px}
  .obj .oq:focus-visible{ outline:2px solid var(--oxblood); outline-offset:-3px }
  .catchip{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:var(--r-sm); flex:none; font-weight:700 }
  .obj .oq .chev{ margin-left:auto; color:var(--grey); transition:transform 0.2s; width:18px; height:18px; flex:none }
  .obj.open .oq .chev{ transform:rotate(90deg) }
  .obj .oa{ max-height:0; overflow:hidden; transition:max-height 0.32s ease } .obj.open .oa{ max-height:520px }
  .obj .oa .inner{ padding:0 20px 20px; font-weight:300; font-size:var(--fs-3); line-height:1.5; color:var(--ink-2); max-width:70ch }
  .tech{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--oxblood); display:inline-block; margin-bottom:12px; padding:4px 12px; border:1px solid rgba(123,45,38,.4); border-radius:var(--r-sm)}
  .obj .oa b{ font-weight:500; color:var(--oxblood) }
  .obj .oa .then{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:var(--fs-3); color:var(--grey) } .obj .oa .then b{ color:var(--ink) }
  .filterbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
  .fbtn{ appearance:none; cursor:pointer; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.04em; text-transform:uppercase; padding:8px 16px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:transparent; color:var(--grey); transition:all 0.2s }
  .fbtn[aria-pressed="true"]{ color:var(--paper); background:var(--ink); border-color:var(--ink) }
  .fbtn:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }

  /* elite blueprint */
  .led{ font-family:var(--mono); background:var(--ink); color:var(--paper); border-radius:var(--r); padding:24px 28px; font-size:var(--fs-3)}
  .led .lr{ display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px dotted rgba(233,233,231,.22) }
  .led .lr .k{ color:oklch(0.828 0.008 106.6); font-weight:400 } .led .lr .v{ font-weight:700; white-space:nowrap }
  .led .res{ display:flex; justify-content:space-between; gap:16px; margin-top:12px; padding-top:16px; border-top:1px solid rgba(233,233,231,.3) }
  .led .res .k{ color:var(--paper); font-weight:700 } .led .res .v{ color:oklch(0.815 0.062 28.5); font-weight:700; font-size:var(--fs-5); white-space:nowrap }
  .led .pull{ font-family:var(--sans); font-weight:300; color:oklch(0.884 0.004 106.5); font-size:var(--fs-3); line-height:1.5; margin-top:16px} .led .pull b{ color:var(--paper); font-weight:500 }
  .formula{ border:1px solid var(--line-2); border-radius:var(--r); padding:24px 24px; background:var(--paper) }
  .formula .fx{ display:grid; grid-template-columns:auto 1fr; gap:8px 12px; align-items:baseline; font-weight:300; font-size:var(--fs-3); color:var(--ink-2) }
  .formula .fx .ar{ font-family:var(--mono); font-weight:700 } .formula .fx .up{ color:var(--pine) } .formula .fx .dn{ color:var(--oxblood) }
  .formula .fx b{ color:var(--ink); font-weight:500 }
  .formula .bar{ grid-column:1/3; height:1px; background:var(--line-2); margin:4px 0}
  .formula .cc{ grid-column:1/3; font-family:var(--mono); font-size:var(--fs-2); color:var(--grey); margin-top:8px}
  .qflow{ display:flex; flex-direction:column; gap:12px}
  .qi{ display:flex; gap:16px; align-items:flex-start }
  .qi .qn{ flex:none; width:26px; height:26px; border-radius:var(--r-pill); border:1.5px solid var(--oxblood); color:var(--oxblood); display:grid; place-items:center; font-family:var(--mono); font-size:var(--fs-1); font-weight:700; margin-top:4px}
  .qi .qt{ font-weight:400; font-size:var(--fs-3); color:var(--ink); line-height:1.4}
  .qi .qt .qr{ display:block; font-weight:300; font-size:var(--fs-3); color:var(--oxblood); margin-top:4px}
  .callout{ border-left:3px solid var(--oxblood); background:var(--oxblood-soft); border-radius:var(--r-sm); padding:16px 20px}
  .callout .ch{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.14em; text-transform:uppercase; color:var(--oxblood); font-weight:700; margin-bottom:8px}
  .callout p{ font-weight:300; font-size:var(--fs-3); color:var(--ink-2); line-height:1.5} .callout p b{ color:var(--ink); font-weight:600 }
  .twoup{ display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .path{ font-family:var(--mono); background:var(--paper-2); border:1px solid var(--line-2); border-radius:var(--r); padding:20px 24px; font-size:var(--fs-3); line-height:1.5; color:var(--ink-2) } .path b{ color:var(--oxblood) } .path .big{ font-size:var(--fs-4); color:var(--ink); font-weight:700 }

  /* dashboard */
  .dgrid{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; align-items:start }
  .dcard{ border:1px solid var(--line-2); border-radius:var(--r); padding:24px; background:var(--paper) }
  .dcard h3{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:16px; display:flex; align-items:center; gap:12px} .dcard h3 .ic{ color:var(--oxblood) }
  .funnel{ display:flex; flex-direction:column; gap:8px}
  .frow{ display:flex; align-items:center; gap:16px}
  .frow .flab{ font-weight:400; font-size:var(--fs-3); color:var(--ink-2); width:120px; flex:none }
  .fbar{ height:40px; border-radius:var(--r-sm); display:flex; align-items:center; padding:0 16px; font-family:var(--mono); font-weight:700; color:var(--paper); min-width:52px }
  .frow .frate{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); width:52px; flex:none; text-align:right }
  .fnote{ font-weight:300; font-size:var(--fs-2); color:var(--grey); margin-top:16px; line-height:1.5}
  .obj-goal{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap }
  .obj-goal .big{ font-family:var(--mono); font-size:var(--fs-7); font-weight:700; color:var(--oxblood); line-height:1.1}
  .obj-goal .lbl{ font-weight:300; color:var(--grey) }
  .stepper{ display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; margin-left:auto }
  .stepper button{ appearance:none; cursor:pointer; background:var(--paper-2); border:none; color:var(--oxblood); width:38px; height:40px; font-family:var(--mono); font-size:var(--fs-4)}
  .stepper button:focus-visible{ outline:2px solid var(--oxblood); outline-offset:-2px }
  .stepper .val{ width:44px; text-align:center; font-family:var(--mono); font-size:var(--fs-4); font-weight:700 }
  .need{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); font-weight:300; font-size:var(--fs-3); color:var(--ink-2) } .need b{ font-family:var(--mono); color:var(--oxblood); font-weight:700 }
  .split{ display:flex; gap:12px}
  .split .sp{ flex:1; border:1px solid var(--line-2); border-radius:var(--r-sm); padding:16px 20px; background:var(--paper) }
  .split .sp .sn{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; color:var(--grey); display:flex; align-items:center; gap:8px}
  .split .sp .sn i{ width:8px;height:8px;background:var(--ink);flex:none } .split .sp.jb .sn i{ background:var(--oxblood) }
  .split .sp .sv{ font-family:var(--mono); font-size:var(--fs-5); font-weight:700; margin-top:8px} .split .sp .sd{ font-weight:300; font-size:var(--fs-2); color:var(--grey); margin-top:4px}
  .tips{ display:flex; flex-direction:column; gap:12px}
  .tip-i{ display:flex; gap:12px; align-items:flex-start; font-weight:300; font-size:var(--fs-3); line-height:1.5; color:var(--ink-2) } .tip-i b{ font-weight:500; color:var(--ink) }
  .tip-i .nsq{ width:20px;height:20px;flex:0 0 20px;font-size:var(--fs-1)}
  .mini{ display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .mini-i{ appearance:none; text-align:left; cursor:pointer; border:1px solid var(--line-2); border-radius:var(--r-sm); padding:12px 16px; background:var(--paper); transition:border-color 0.2s }
  .mini-i:hover{ border-color:var(--ink) } .mini-i:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .mini-i .mn{ font-weight:500; font-size:var(--fs-3); letter-spacing:-.01em; line-height:1.1}
  .mini-i .mc{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); margin-top:8px; display:flex; align-items:center; gap:8px}
  .mini-i .mc i{ width:7px;height:7px;border-radius:var(--r-pill);flex:none }

  /* fiche (playbook) */
  .pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px}
  #pbList[hidden]{ display:none }
  .pcard{ border:1px solid var(--line-2); border-radius:var(--r); padding:24px 24px; background:var(--paper); display:flex; flex-direction:column; gap:12px; cursor:pointer; transition:border-color 0.2s }
  .pcard:hover{ border-color:var(--ink) } .pcard:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .phead{ display:flex; align-items:flex-start; gap:16px}
  .pname{ font-weight:500; font-size:var(--fs-4); letter-spacing:-.012em; line-height:1.1}
  .pcity{ display:block; font-family:var(--mono); font-size:var(--fs-1); font-weight:400; color:var(--grey); margin-top:4px}
  .psig{ font-weight:300; font-size:var(--fs-3); line-height:1.4; color:var(--ink-2); flex:1 }
  .pchips{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--line) }
  .pconf{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:4px 8px 4px 8px; border-radius:var(--r-sm); display:inline-flex; align-items:center; gap:8px}
  .pconf::before{ content:""; width:6px; height:6px; border-radius:var(--r-pill); flex:none }
  .pconf.haute{ background:color-mix(in oklab, var(--pine) 14%, transparent); color:var(--pine-chip) } .pconf.haute::before{ background:var(--pine-chip) }
  .pconf.moyenne{ background:color-mix(in oklab, var(--ochre) 18%, transparent); color:var(--ochre-chip) } .pconf.moyenne::before{ background:var(--ochre-chip) }
  .pexp{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; color:var(--grey); display:inline-flex; align-items:center; gap:8px} .pexp i{ width:8px; height:8px; flex:none; background:var(--cc,var(--ink)) } .pexp.jb i{ background:var(--oxblood) }
  .seemore{ margin-left:auto; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; color:var(--oxblood); display:inline-flex; align-items:center; gap:8px} .seemore .ic{ width:14px;height:14px }
  .backbtn{ appearance:none; cursor:pointer; font-family:var(--mono); font-size:var(--fs-2); padding:8px 16px; border-radius:var(--r-sm); border:1px solid var(--line-2); background:transparent; color:var(--ink); display:inline-flex; gap:8px; align-items:center; margin-bottom:24px} .backbtn:hover{ border-color:var(--ink) } .backbtn:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px } .backbtn .ic{ transform:scaleX(-1) }
  .fhead{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; padding-bottom:24px; border-bottom:1px solid var(--line-2) }
  .fhead .nsq{ margin-top:4px} .fname{ font-weight:400; font-size:var(--fs-5); letter-spacing:-.02em; line-height:1.1}
  .fcity{ font-family:var(--mono); font-size:var(--fs-2); color:var(--grey); display:block; margin-top:8px} .fchips{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap }
  .fsec{ margin-top:28px} .fk{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.2em; text-transform:uppercase; color:var(--grey); display:flex; align-items:center; gap:12px; margin-bottom:16px} .fk .nsq{ width:20px;height:20px;flex:0 0 20px;font-size:var(--fs-1)}
  .finfo{ border:1px solid var(--line-2); border-radius:var(--r); padding:20px 24px; background:var(--paper) }
  .finfo .ft{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; color:var(--oxblood); margin-bottom:8px}
  .finfo p{ font-weight:300; font-size:var(--fs-3); line-height:1.5; color:var(--ink-2) } .finfo p b{ font-weight:500; color:var(--ink) }
  .say2{ font-weight:300; font-size:var(--fs-3); line-height:1.5; color:var(--ink); border-left:2px solid var(--oxblood); padding-left:16px; margin-top:8px} .say2 b{ font-weight:500; color:var(--oxblood) }
  .fchecklist{ list-style:none; display:flex; flex-direction:column; gap:8px} .fchecklist li{ display:flex; gap:12px; align-items:flex-start; font-weight:300; font-size:var(--fs-3); line-height:1.4; color:var(--ink-2) } .fchecklist li .ic{ color:var(--oxblood); margin-top:4px; flex:none; width:14px;height:14px }
  .objtags{ display:flex; gap:8px; flex-wrap:wrap }
  .msgbox{ border:1px solid var(--line-2); border-radius:var(--r); background:var(--paper); padding:20px 24px}
  .omsg{ font-weight:300; font-size:var(--fs-3); line-height:1.5; color:var(--ink); border-left:2px solid var(--oxblood); padding-left:20px; white-space:pre-line } .omsg b{ font-weight:500; color:var(--oxblood) }
  /* ---- v12 moteur d'entonnoir ---- */
  /* v15 — FUNNEL : 5 cartes verre à pills (design funnel-questions), remplace les <select> */
  .fun-grid{ display:flex; flex-direction:column; gap:12px}
  .fun-card{ position:relative; isolation:isolate; border-radius:var(--r); padding:16px 16px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    background:linear-gradient(158deg, oklch(1 0 0 / .5), oklch(1 0 0 / .05) 55%, transparent); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .45), var(--sh-1);
    transition:box-shadow 0.32s var(--e-out), transform 0.32s var(--e-spring) }
  html.night .fun-card{ background:linear-gradient(158deg, oklch(1 0 0 / .07), oklch(1 0 0 / .015) 55%, transparent); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .12) }
  .fun-card.answered{ box-shadow:inset 0 0 0 1.5px var(--oxblood), inset 0 1px 0 oklch(1 0 0 / .45) }
  .fun-card .fun-q{ font-weight:500; font-size:var(--fs-3); color:var(--ink); flex:1 1 auto; min-width:120px }
  .fun-card.answered .fun-q{ color:var(--oxblood) }
  .fun-opts{ display:flex; gap:8px; flex-wrap:wrap }
  .fun-opt{ appearance:none; cursor:pointer; font-family:var(--sans); font-size:var(--fs-2); font-weight:500; color:var(--ink-2); padding:8px 16px; border-radius:var(--r-pill); border:none;
    background:linear-gradient(160deg, oklch(1 0 0 / .4), oklch(1 0 0 / .06)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .35);
    transition:transform 0.2s var(--e-spring), box-shadow 0.2s var(--e-out), color 0.2s }
  html.night .fun-opt{ background:linear-gradient(160deg, oklch(1 0 0 / .08), oklch(1 0 0 / .02)) }
  .fun-opt:hover:not(:disabled){ transform:translateY(-1px); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .5), var(--sh-1) }
  .fun-opt.on{ color:var(--paper); background:var(--oxblood); box-shadow:inset 0 0 0 1px var(--oxblood) }
  html.night .fun-opt.on{ background:var(--oxblood); color:oklch(1 0 0) }  /* fix : html.night .fun-opt (0,2,1) écrasait .fun-opt.on (0,2,0) → pill jamais remplie + texte AA KO */
  .fun-opt:disabled{ opacity:.5; cursor:default }
  .fun-opt:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  @media (prefers-reduced-motion:reduce){ .fun-card,.fun-opt{ transition:none } }
  @media (max-width:560px){ .fun-card{ flex-direction:column; align-items:flex-start; gap:12px} }

  /* ============================================================
     FUNNEL v23 — verre liquide (méthode B) + révélation 1-à-1 + barre.
     L'asset funnel §3 (3 wells pilule bakés) est inutilisable → reconstruction CSS.
     Staging posé par JS (.staged) : sans JS, tout reste visible (dégradé propre).
     ============================================================ */
  .fun-card{ background-color:oklch(0.98 0.004 106 / .5); background-image:var(--glass-mat);
    box-shadow:var(--glass-sh),var(--glass-hi),var(--glass-line);
    -webkit-backdrop-filter:blur(10px) saturate(1.08); backdrop-filter:blur(10px) saturate(1.08) }
  html.night .fun-card{ background-color:oklch(0.235 0.006 106 / .42); background-image:var(--glass-mat) }
  .fun-card.answered{ box-shadow:inset 0 0 0 1px var(--oxblood), var(--glass-sh-hi), var(--glass-hi) }
  .fun-card.is-current{ box-shadow:inset 0 0 0 1px oklch(0.409 0.11 28 / .38), var(--glass-sh), var(--glass-hi) }
  html.night .fun-card.is-current{ box-shadow:inset 0 0 0 1px oklch(0.620 0.110 28 / .4), var(--glass-sh), var(--glass-hi) }
  /* numéro de question dans un pastille verre */
  .fun-card .fun-q{ display:flex; align-items:center }
  .fun-n{ display:inline-grid; place-items:center; width:19px; height:19px; margin-right:12px; flex:none; border-radius:var(--r-sm);
    background:var(--paper-2); color:var(--grey); font-family:var(--mono); font-size:var(--fs-1); font-weight:700 }
  .fun-card.answered .fun-n{ background:var(--oxblood); color:oklch(1 0 0) }

  /* staging 1-à-1 */
  .fun-grid.staged .fun-card:not(.revealed){ overflow:hidden; max-height:0; opacity:0; margin-top:-12px;
    padding-top:0; padding-bottom:0; pointer-events:none; transform:translateY(-6px);
    transition:max-height 0.32s var(--e-out), opacity 0.2s var(--e-out), transform 0.32s var(--e-out), margin 0.32s var(--e-out), padding 0.32s var(--e-out) }
  .fun-grid.staged .fun-card.revealed{ transition:opacity 0.32s var(--e-out), transform 0.32s var(--e-out) }
  @media (prefers-reduced-motion:reduce){ .fun-grid.staged .fun-card{ transition:none } }

  /* barre de progression + label « chemin qui se dessine » */
  .fun-prog{ margin:0 0 16px}
  .fun-prog-bar{ height:5px; border-radius:var(--r); background:var(--paper-2); box-shadow:var(--glass-line); overflow:hidden }
  .fun-prog-bar>i{ display:block; height:100%; border-radius:var(--r); background:linear-gradient(90deg,var(--oxblood),var(--gastro)); transition:width 0.45s var(--e-out) }
  .fun-prog-lab{ margin-top:8px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; color:var(--grey) }
  .fun-prog-lab b{ color:var(--ink) } .fun-prog-lab #funPath b{ color:var(--oxblood) }
  @media (prefers-reduced-motion:reduce){ .fun-prog-bar>i{ transition:none } }
  .reco-wait{ color:var(--grey); border:1px dashed var(--line-2); background:var(--paper) }
  .reco-fiche .finfo{ border-color:var(--oxblood) }
  .reco-fiche.is-elite .finfo{ border-color:var(--ochre) }
  .reco-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap }
  .reco-title{ font-size:var(--fs-4); font-weight:600; letter-spacing:-.01em; margin:4px 0 0}
  .reco-price{ font-family:var(--mono); font-size:var(--fs-3); color:var(--ink); background:var(--paper-2); padding:8px 12px; border-radius:var(--r-sm)}
  .reco-obj{ margin-top:12px; padding-left:12px; border-left:2px solid var(--line-2) }
  .ro-q{ font-weight:600; font-size:var(--fs-3)} .ro-a{ font-size:var(--fs-3); color:var(--ink-2); margin-top:4px; line-height:1.5}
  .reco-next{ margin-top:16px; padding:12px 12px; background:rgba(156,107,34,.1); border-radius:var(--r-sm); font-size:var(--fs-3)}
  .reco-fallback{ margin-top:16px; padding:12px 16px; border:1px dashed var(--line-2); border-radius:var(--r-sm)} .reco-fallback .ft{ color:var(--ochre) }
  .reco-alt{ margin-top:16px; font-size:var(--fs-3); color:var(--grey); display:flex; align-items:center; gap:12px; flex-wrap:wrap }
  .reco-elite-badge{ margin-left:auto; font-family:var(--mono); font-size:var(--fs-1); text-transform:uppercase; letter-spacing:.08em; background:var(--oxblood); color:oklch(1 0 0); padding:4px 8px; border-radius:var(--r-sm)}
  .msgbox.is-locked{ opacity:.7 } .msgbox.is-locked .copybtn{ cursor:not-allowed; background:var(--grey); border-color:var(--grey) }
  .omsg.locked-ph{ user-select:none; -webkit-user-select:none; color:var(--grey); font-style:italic }
  .reco-status{ margin-top:16px; padding:12px 12px; border-radius:var(--r-sm); font-size:var(--fs-3); display:flex; align-items:center; gap:12px; flex-wrap:wrap }
  .reco-status.wait{ background:color-mix(in oklab, var(--ochre) 12%, transparent); color:var(--ochre-chip) }
  .reco-status.warn{ background:rgba(123,45,38,.1); color:var(--oxblood) }
  .reco-status.ok{ background:rgba(46,110,74,.12); color:var(--pine) }
  .reco-elite-badge.ok{ background:var(--pine) }

  /* ============================================================
     ÉCHELLE 6 barreaux — reconstruction CSS liquide (méthode B, réglages-gagnants).
     Rail oxblood à gauche · chaque barreau = tuile verre · reco surlignée oxblood + bille.
     Night-first, parité jour. L'asset alpha §3 (5 rangs bakés) n'est PAS utilisable ici
     (creux fixes ≠ 6 barreaux dynamiques + damier baké) → tout est reconstruit.
     ============================================================ */
  .ech{ position:relative; margin:12px 0 4px; padding-left:24px; display:flex; flex-direction:column; gap:8px}
  .ech::before{ content:""; position:absolute; left:7px; top:16px; bottom:16px; width:2px; border-radius:var(--r-sm);
    background:linear-gradient(to top, transparent, var(--oxblood) 26%, var(--oxblood) 74%, transparent); opacity:.4 }
  .ech-rung{ position:relative; display:flex; align-items:center; gap:16px; padding:12px 16px; border-radius:var(--r);
    background-color:oklch(0.98 0.004 106 / .5); background-image:var(--glass-mat);
    box-shadow:var(--glass-sh),var(--glass-hi),var(--glass-line);
    -webkit-backdrop-filter:blur(9px) saturate(1.08); backdrop-filter:blur(9px) saturate(1.08);
    transition:transform 0.32s var(--e-out), box-shadow 0.32s var(--e-out) }
  html.night .ech-rung{ background-color:oklch(0.235 0.006 106 / .42) }
  .ech-rung::before{ content:""; position:absolute; left:-24px; top:50%; transform:translateY(-50%);
    width:9px; height:9px; border-radius:var(--r-pill); background:var(--line-2); box-shadow:0 0 0 3px var(--paper) }
  .ech-rung.wedge{ opacity:.82 }
  .ech-main{ flex:1; min-width:0 }
  .ech-name{ font-weight:600; font-size:var(--fs-3); letter-spacing:-.005em; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
  .ech-star{ color:var(--oxblood); font-size:var(--fs-3); line-height:1.1}
  .ech-sub{ font-size:var(--fs-2); color:var(--grey); margin-top:4px}
  .ech-price{ font-family:var(--mono); font-size:var(--fs-2); color:var(--ink); white-space:nowrap; text-align:right }
  .ech-tag{ font-family:var(--mono); font-size:var(--fs-1); text-transform:uppercase; letter-spacing:.1em;
    background:var(--oxblood); color:oklch(1 0 0); padding:4px 8px; border-radius:var(--r-sm)}
  /* barreau RECOMMANDÉ — hairline oxblood (jamais un fill) + bille signature + léger décalage */
  .ech-rung.reco{ box-shadow:inset 0 0 0 1px var(--oxblood), var(--glass-sh-hi), var(--glass-hi); transform:translateX(3px) }
  .ech-rung.reco::before{ background:var(--oxblood);
    box-shadow:0 0 0 3px var(--paper), 0 0 0 6px oklch(0.409 0.11 28 / .2) }        /* fallback dur : oxblood jour */
  html.night .ech-rung.reco::before{ box-shadow:0 0 0 3px var(--paper), 0 0 0 6px oklch(0.620 0.110 28 / .22) }
  .ech-rung.reco::after{ content:""; position:absolute; top:9px; right:11px; width:11px; height:11px; border-radius:var(--r-pill);
    background:var(--av-bead); pointer-events:none; opacity:.9 }
  .ech-bridge{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:4px 16px 4px 4px; font-size:var(--fs-2); color:var(--grey-2) }
  .ech-bridge::before{ content:""; position:absolute; left:-24px; top:0; bottom:0; border-left:2px dashed var(--line-2) }
  .ech-bp{ font-family:var(--mono); color:var(--grey); white-space:nowrap }
  @media (hover:hover) and (pointer:fine){
    .ech-rung:not(.reco):hover{ transform:translateX(3px); box-shadow:var(--glass-sh-hi),var(--glass-hi),var(--glass-line) }
  }
  @media (prefers-reduced-motion:reduce){ .ech-rung{ transition:none } }
  @media (max-width:560px){
    .ech-rung{ flex-direction:column; align-items:flex-start; gap:4px; padding:12px 16px}
    .ech-price{ font-size:var(--fs-2); text-align:left }
    .ech-rung.reco{ padding-right:28px}   /* place pour la bille */
  }
  .rc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px}
  .rc-field{ display:flex; flex-direction:column; gap:4px; font-size:var(--fs-2); color:var(--grey) }
  .rc-field input{ font-family:var(--sans); font-size:var(--fs-3); padding:8px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); color:var(--ink) }
  .rc-field input:read-only{ opacity:.7 }
  /* ---- écran de validation Elite (Aroz) ---- */
  .elite-card{ max-width:640px; width:100%; max-height:86vh; overflow:auto; text-align:left }
  .elite-list{ display:flex; flex-direction:column; gap:16px; margin:16px 0 20px}
  .elite-empty{ color:var(--grey); padding:20px; text-align:center; border:1px dashed var(--line-2); border-radius:var(--r-sm)}
  .elite-item{ border:1px solid var(--line-2); border-radius:var(--r); padding:16px 20px; background:var(--paper) }
  .ev-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap } .ev-head b{ font-size:var(--fs-3)}
  .ev-niche{ font-family:var(--mono); font-size:var(--fs-1); text-transform:uppercase; letter-spacing:.06em; background:var(--paper-2); color:var(--ink-2); padding:4px 8px; border-radius:var(--r-sm)}
  .ev-by{ margin-left:auto; font-size:var(--fs-2); color:var(--grey) }
  .ev-recap{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0}
  .ev-recap>div{ font-size:var(--fs-3)} .ev-recap i{ display:block; font-style:normal; font-size:var(--fs-1); text-transform:uppercase; letter-spacing:.05em; color:var(--grey); margin-bottom:4px}
  .ev-funnel{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px} .ev-f{ font-size:var(--fs-2); background:var(--paper-2); border-radius:var(--r-sm); padding:4px 8px; color:var(--ink-2) } .ev-f i{ font-style:normal; color:var(--grey); margin-right:4px}
  .ev-offer{ font-size:var(--fs-2); color:var(--grey); margin-bottom:12px}
  .ev-act{ display:flex; gap:12px; flex-wrap:wrap }
  .ev-note textarea{ width:100%; font-family:var(--sans); font-size:var(--fs-3); padding:8px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); resize:vertical; background:var(--paper); color:var(--ink) } .ev-note-b{ display:flex; gap:12px; margin-top:8px}
  @media (max-width:520px){ .ev-recap{ grid-template-columns:1fr } }
  /* ---- progression (playbook lock) + rapport de clôture ---- */
  .pb-lock{ border:1px dashed var(--line-2); border-radius:var(--r); padding:20px 20px; margin-bottom:20px; background:var(--paper) }
  .pb-lock.active{ border-style:solid; border-color:var(--ochre) }
  .pb-lock-h{ font-weight:600; margin-bottom:8px}
  .pb-lock p{ font-size:var(--fs-3); color:var(--ink-2); margin:8px 0}
  .pb-lock .ctrl{ margin-top:12px}
  .report-card .rep-stats{ display:flex; gap:20px; flex-wrap:wrap; margin:8px 0 16px}
  .rep-stats>div{ display:flex; flex-direction:column } .rep-stats b{ font-size:var(--fs-4); font-family:var(--mono) } .rep-stats span{ font-size:var(--fs-1); color:var(--grey); text-transform:uppercase; letter-spacing:.05em }
  .rep-meta{ display:flex; gap:20px; flex-wrap:wrap; font-size:var(--fs-2); color:var(--ink-2); margin-bottom:16px}
  .rep-edit{ display:flex; flex-direction:column; gap:12px} .rep-edit label{ display:flex; flex-direction:column; gap:4px; font-size:var(--fs-2); color:var(--grey) }
  .rep-edit textarea{ font-family:var(--sans); font-size:var(--fs-3); padding:8px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); resize:vertical; background:var(--paper); color:var(--ink) }
  .rep-published p{ font-size:var(--fs-3); margin:4px 0} .rep-published .rep-tips{ color:var(--pine) }
  .ofoot{ display:flex; align-items:center; gap:16px; margin-top:16px; flex-wrap:wrap }
  .copybtn{ appearance:none; cursor:pointer; font-family:var(--mono); font-size:var(--fs-2); padding:12px 20px; border-radius:var(--r-sm); border:1px solid var(--ink); background:var(--ink); color:var(--paper); display:inline-flex; gap:8px; align-items:center; transition:opacity 0.2s,background 0.2s } .copybtn .ic{ width:15px;height:15px } .copybtn:hover{ opacity:.88 } .copybtn:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px } .copybtn.done{ background:var(--pine); border-color:var(--pine) }
  .copyhint{ font-weight:300; font-size:var(--fs-2); color:var(--pine); opacity:0; transition:opacity 0.2s } .copyhint.on{ opacity:1 }

  @media (max-width:900px){
    .app{ display:block }
    .side{ position:static; width:auto; height:auto; border-right:none; border-bottom:1px solid var(--line-2); display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:16px}
    .brand{ padding:0 12px 0 4px; flex-basis:100%; margin-bottom:4px}
    .navgroup{ margin:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center }
    .navgroup .gh{ padding:0 8px; flex-basis:100%; margin-top:8px}
    .nav-i{ width:auto; padding:8px 12px; border:1px solid var(--line-2); border-radius:var(--r-pill)}
    .nav-i .cnt{ margin-left:8px}
    .content{ padding:28px 20px 72px}
    .grid2,.grid3,.tiers,.duo,.dgrid,.pgrid,.mini,.twoup{ grid-template-columns:1fr }
  }
  @media (prefers-reduced-motion:reduce){ .view{animation:none} .obj .oa,.fbar{transition:none} }

  /* ============ v2 — moteur d'état, charts, jeu ============ */
  /* controls bar */
  .ctrls{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:24px}
  /* D10 — boutons cockpit = pills verre (primaire = verre oxblood ; danger = oxblood sur verre neutre) */
  .ctrl{ appearance:none; cursor:pointer; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.04em; text-transform:uppercase; padding:8px 16px; border-radius:var(--r-pill); color:var(--ink); display:inline-flex; gap:8px; align-items:center;
    border:1px solid oklch(0.2 0.002 106.6 / .1);
    background:linear-gradient(160deg, oklch(1 0 0 / .5), oklch(1 0 0 / .12));
    box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .5), var(--sh-1);
    transition:transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast), color var(--t-fast) } .ctrl .ic{ width:14px;height:14px }
  .ctrl:hover{ transform:translateY(-1px); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .6), var(--sh-2) } .ctrl:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .ctrl.solid{ color:oklch(1 0 0); border-color:transparent; background:linear-gradient(160deg, oklch(0.47 0.125 28), oklch(0.40 0.11 28)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .3), var(--sh-2), 0 0 0 1px oklch(0.409 0.11 28 / .4) }
  .ctrl.solid:hover{ transform:translateY(-1px); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .42), var(--sh-3), 0 0 0 1px oklch(0.409 0.11 28 / .5) }
  .ctrl.danger{ color:var(--oxblood) }
  html.night .ctrl{ border-color:oklch(1 0 0 / .1); background:linear-gradient(160deg, oklch(1 0 0 / .1), oklch(1 0 0 / .02)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .16) }
  html.night .ctrl:hover{ box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .22), 0 8px 22px -12px oklch(0 0 0 / .8) }
  html.night .ctrl.solid{ color:oklch(1 0 0); background:linear-gradient(160deg, oklch(0.47 0.125 28), oklch(0.40 0.11 28)); border-color:transparent }
  html.night .ctrl.danger{ color:oklch(0.62 0.13 28) }

  /* KPI hero row */
  .kpirow{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .kpi{ border:1px solid var(--line-2); border-radius:var(--r); padding:20px 24px; background:var(--paper); position:relative; overflow:hidden }
  .kpi.ink{ background:var(--ink); border-color:var(--ink) }
  .kpi .kl{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); display:flex; align-items:center; gap:8px} .kpi.ink .kl{ color:oklch(0.778 0.008 106.6) }
  .kpi .kv{ font-family:var(--mono); font-weight:700; font-size:var(--fs-6); letter-spacing:-.02em; line-height:1.1; margin-top:12px; color:var(--ink) } .kpi.ink .kv{ color:var(--paper) }
  .kpi .kv small{ font-family:var(--sans); font-size:var(--fs-2); font-weight:400; color:var(--grey) } .kpi.ink .kv small{ color:oklch(0.778 0.008 106.6) }
  .kpi .ksub{ font-weight:300; font-size:var(--fs-2); color:var(--grey); margin-top:8px} .kpi.ink .ksub{ color:oklch(0.834 0.007 106.5) }
  .kpi .kv.up{ animation:pop 0.45s ease }
  @keyframes pop{ 0%{transform:scale(1)} 35%{transform:scale(1.14)} 100%{transform:scale(1)} }
  .mgauge{ height:12px; border-radius:var(--r-pill); background:var(--paper-2); overflow:hidden; margin-top:16px; border:1px solid var(--line) }
  .mgauge > i{ display:block; height:100%; background:linear-gradient(90deg,var(--oxblood),oklch(0.491 0.122 27.5)); border-radius:var(--r-pill); transition:width 0.45s cubic-bezier(.2,.8,.2,1) }
  .kpi.ink .mgauge{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.14) }

  /* generic chart card + svg */
  .charts2{ display:grid; grid-template-columns:1.5fr 1fr; gap:20px; align-items:start }
  .svgwrap{ width:100%; overflow-x:auto }
  #trendWrap svg{ display:block; width:100%; height:auto }
  .lgd{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-family:var(--mono); font-size:var(--fs-1); color:var(--grey) }
  .lgd i{ width:18px; height:3px; display:inline-block; vertical-align:middle; margin-right:8px; border-radius:var(--r-sm)}
  .lgd .dash{ background:repeating-linear-gradient(90deg,currentColor 0 5px,transparent 5px 9px); height:2px }

  /* donuts */
  .donuts{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
  .donut{ text-align:center }
  .donut svg{ width:100%; max-width:118px; height:auto; display:block; margin:0 auto }
  .donut .dpc{ font-family:var(--mono); font-weight:700; font-size:var(--fs-4); fill:var(--ink) }
  .donut .dcap{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; text-transform:uppercase; color:var(--grey); margin-top:8px} .donut .draw{ font-weight:300; font-size:var(--fs-1); color:var(--grey-2); margin-top:4px}

  /* niche horizontal bars */
  .hrow{ display:grid; grid-template-columns:74px 1fr; gap:12px; align-items:center; padding:8px 0}
  .hlab{ font-family:var(--mono); font-size:var(--fs-1); color:var(--ink-2); display:flex; align-items:center; gap:8px} .hlab i{ width:9px;height:9px;border-radius:var(--r-pill);flex:none }
  .htrack{ display:flex; flex-direction:column; gap:4px}
  .hbar{ height:11px; border-radius:var(--r-pill); min-width:2px; display:flex; align-items:center }
  .hbar span{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); margin-left:8px; white-space:nowrap }

  /* volume steppers per closer */
  .volgrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px}
  .volc{ border:1px solid var(--line-2); border-radius:var(--r-sm); padding:16px 16px; background:var(--paper) }
  .volc .vn{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; color:var(--grey); display:flex; align-items:center; gap:8px} .volc .vn i{ width:8px;height:8px;background:var(--ink);flex:none } .volc.jb .vn i{ background:var(--oxblood) }
  .volc .vrow{ display:flex; align-items:center; justify-content:space-between; margin-top:12px}
  .volc .vv{ font-family:var(--mono); font-size:var(--fs-5); font-weight:700 } .volc .vv small{ font-family:var(--sans); font-size:var(--fs-1); color:var(--grey); font-weight:400 }

  /* ======== COCKPIT — dashboard bento (DA papier) ======== */
  .dash-controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
  .dash-year{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:8px 16px; white-space:nowrap }
  .cockpit{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:8px}
  .ck-card{ background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r); padding:16px 20px 16px; box-shadow:var(--sh-1); display:flex; flex-direction:column; min-width:0 }
  .ck-h{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-bottom:16px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none }
  .ck-h .ck-hint{ text-transform:none; letter-spacing:.01em; font-size:var(--fs-1); color:var(--grey-2); font-weight:400 }
  .ck-sig{ grid-column:span 3 } .ck-kpi{ grid-column:span 5 } .ck-total{ grid-column:span 4 }
  .ck-market{ grid-column:span 4 } .ck-products{ grid-column:span 4 } .ck-closers{ grid-column:span 4 }
  .ck-growth{ grid-column:span 8 } .ck-obj{ grid-column:span 4 }
  .ck-gauge-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; justify-content:center }
  .ck-gauge{ width:100%; max-width:190px } .ck-gauge-v{ font-family:var(--mono); font-weight:700; font-size:var(--fs-4); fill:var(--ink) }
  .ck-gauge path:last-of-type{ transition:stroke-dashoffset 0.45s var(--e-out) }
  .ck-gsub{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); text-transform:uppercase; letter-spacing:.05em; display:flex; align-items:center; gap:8px}
  .ck-delta{ font-family:var(--mono); font-size:var(--fs-1); font-weight:700; padding:4px 8px; border-radius:var(--r-pill); letter-spacing:.03em; white-space:nowrap }
  .ck-delta.up{ background:rgba(60,107,78,.15); color:var(--pine) } .ck-delta.down{ background:rgba(123,45,38,.13); color:var(--oxblood) }
  .ck-kpis{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; flex:1; align-content:center }
  .ck-kp{ display:flex; align-items:center; gap:12px; min-width:0 }
  /* D3 — badge KPI = gemme de verre teintée (la couleur sémantique inline devient un verre coloré) */
  .ck-kpn{ font-family:var(--mono); font-weight:700; font-size:var(--fs-4); color:oklch(1 0 0); min-width:48px; height:42px; padding:0 12px; border-radius:var(--r-sm); display:grid; place-items:center; position:relative; isolation:isolate; overflow:hidden;
    box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .45), var(--sh-1); text-shadow:0 1px 2px oklch(0 0 0 / .28) }
  .ck-kpn::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
    background:linear-gradient(158deg, oklch(1 0 0 / .38), oklch(1 0 0 / .05) 52%, oklch(0 0 0 / .1)) }
  .ck-kpl{ font-size:var(--fs-3); color:var(--ink-2) }
  .ck-total{ justify-content:flex-start } .ck-total-v{ font-family:var(--mono); font-weight:700; font-size:var(--fs-7); letter-spacing:-.02em; color:var(--ink); line-height:1.1; margin-top:auto }
  .ck-total-sub{ margin-top:12px; font-size:var(--fs-2); color:var(--grey); display:flex; align-items:center; gap:12px; flex-wrap:wrap }
  .ck-mrow{ display:grid; grid-template-columns:66px 1fr 40px; gap:12px; align-items:center; margin-bottom:12px}
  .ck-mrow:last-child{ margin-bottom:0}
  .ck-mlab{ font-size:var(--fs-2); color:var(--ink-2) } .ck-mval{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); text-align:right }
  .ck-mtrack{ height:9px; background:var(--paper-2); border-radius:var(--r-pill); overflow:hidden }
  .ck-mtrack > i{ display:block; height:100%; border-radius:var(--r-pill); transition:width 0.45s var(--e-out) }
  .ck-pie-wrap{ display:flex; align-items:center; gap:20px; flex:1 }
  .ck-pie{ width:116px; height:116px; border-radius:var(--r-pill); flex:none; box-shadow:inset 0 0 0 1px rgba(22,22,21,.06) }
  .ck-pie[data-empty]{ background:var(--paper-2)!important }
  .ck-legend{ display:flex; flex-direction:column; gap:12px; flex:1; min-width:0 }
  .ck-lg{ display:flex; align-items:center; gap:8px; font-size:var(--fs-2)}
  .ck-lg i{ width:11px; height:11px; border-radius:var(--r-sm); flex:none } .ck-lgn{ color:var(--ink-2); flex:1 } .ck-lgv{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); white-space:nowrap }
  .ck-bars{ display:flex; align-items:flex-end; gap:16px; height:152px; padding-top:8px; flex:1 }
  .ck-barcol{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; gap:8px; min-width:0 }
  .ck-barv{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); white-space:nowrap }
  .ck-bartrack{ width:100%; max-width:48px; flex:1; display:flex; align-items:flex-end; background:var(--paper-2); border-radius:var(--r-sm) var(--r-sm) var(--r-sm) var(--r-sm); overflow:hidden }
  .ck-bartrack > i{ width:100%; border-radius:var(--r-sm); transition:height 0.45s var(--e-out) }
  .ck-barlab{ font-family:var(--mono); font-size:var(--fs-1); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2) }
  .ck-chart{ flex:1; display:flex; align-items:center } .ck-chart svg{ width:100%; height:auto; display:block }
  .ck-obj .mgauge{ margin:8px 0 12px} .ck-obj .objslim-sub{ font-size:var(--fs-2); color:var(--grey) }
  @media (max-width:1080px){ .cockpit{ grid-template-columns:repeat(6,1fr) } .ck-sig,.ck-kpi,.ck-total,.ck-market,.ck-products,.ck-closers,.ck-obj{ grid-column:span 3 } .ck-growth{ grid-column:span 6 } }
  @media (max-width:680px){ .cockpit{ grid-template-columns:1fr } .ck-card{ grid-column:span 1!important } .ck-bars{ height:132px } .ck-total-v{ font-size:var(--fs-6)} }
  @media (prefers-reduced-motion:reduce){ .ck-gauge path:last-of-type,.ck-mtrack>i,.ck-bartrack>i{ transition:none } }
  /* Surface C — filtres/tris + sélection clavier atelier */
  .cl-filter{ display:flex; flex-wrap:wrap; gap:12px 12px; align-items:center; justify-content:space-between; margin-bottom:16px}
  .cl-chips{ display:flex; gap:8px; flex-wrap:wrap }
  /* v15 — chips verre (états réels : repos / hover / actif — design niche-chips) */
  .cl-chip{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; text-transform:uppercase; padding:8px 12px; border:none; border-radius:var(--r-pill); color:var(--grey); cursor:pointer; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
    background:linear-gradient(160deg, oklch(1 0 0 / .4), oklch(1 0 0 / .05)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .35);
    transition:transform 0.2s var(--e-spring), box-shadow 0.2s var(--e-out), color 0.2s }
  html.night .cl-chip{ background:linear-gradient(160deg, oklch(1 0 0 / .07), oklch(1 0 0 / .02)) }
  .cl-chip:hover{ transform:translateY(-1px); color:var(--ink); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .5), var(--sh-1) }
  .cl-chip.on{ color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--oxblood), inset 0 1px 0 oklch(1 0 0 / .4) }
  .cl-chip:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .cl-tools{ display:flex; gap:8px; align-items:center }
  .cl-search{ font-family:var(--sans); font-size:var(--fs-2); padding:8px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); min-height:44px; width:150px; max-width:44vw }
  .cl-search:focus-visible{ outline:2px solid var(--oxblood); outline-offset:1px }
  .cl-sort{ font-family:var(--mono); font-size:var(--fs-1); text-transform:uppercase; letter-spacing:.06em; padding:8px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); color:var(--grey); min-height:44px; cursor:pointer }
  .cl-row.sel{ box-shadow:0 0 0 2px var(--ink), var(--sh-2); border-radius:var(--r-sm); position:relative; z-index:1 }
  @media (prefers-reduced-motion:reduce){ .cl-chip{ transition:none } }
  /* quick-log post-appel */
  .ql-status{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 16px}
  .ql-st{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.05em; text-transform:uppercase; padding:12px 16px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); color:var(--ink-2); cursor:pointer; min-height:44px }
  .ql-st .statusdot{ width:9px; height:9px }
  .ql-st.on{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
  .ql-st:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .ql-note{ width:100%; font-family:var(--sans); font-size:var(--fs-3); padding:12px 16px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); color:var(--ink); resize:vertical; margin-bottom:16px; line-height:1.5}
  .ql-note:focus-visible{ outline:2px solid var(--oxblood); outline-offset:1px }
  .ql-foot{ display:flex; gap:12px; align-items:center }
  /* duel */
  .duel{ display:flex; flex-direction:column; gap:12px}
  .duel .drow{ display:grid; grid-template-columns:22px 1fr auto; gap:12px; align-items:center }
  .duel .dav{ width:22px; height:22px; background:var(--cc,var(--ink)); color:var(--paper); font-family:var(--mono); font-size:var(--fs-1); display:grid; place-items:center } .duel .drow.jb .dav{ background:var(--oxblood) }
  .duel .dbar{ height:22px; border-radius:var(--r-sm); background:var(--paper-2); overflow:hidden; position:relative }
  .duel .dbar > i{ display:block; height:100%; background:var(--cc,var(--ink)); border-radius:var(--r-sm); transition:width 0.45s } .duel .drow.jb .dbar > i{ background:var(--oxblood) }
  .duel .dsc{ font-family:var(--mono); font-weight:700; font-size:var(--fs-3); min-width:74px; text-align:right }
  .duel .lead-tag{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; color:var(--pine); font-weight:700 }

  /* streak */
  .streak{ display:flex; align-items:center; gap:16px}
  /* v15 : médaillon flamme = gamif-streak.light recadré sur l'anneau (compteur en code à côté) */
  .streak-medal{ width:76px; height:76px; flex:none; border-radius:var(--r); box-shadow:var(--glass-line), var(--glass-sh);
    background:url("../assets/concepts/gamif-streak.light.webp") center / 150% no-repeat }
  html.night .streak-medal{ filter:brightness(.94) contrast(1.02) }
  .streak-medal.lit{ animation:medalPulse 0.45s ease-in-out infinite }
  @keyframes medalPulse{ 0%,100%{ box-shadow:var(--glass-line), var(--glass-sh) } 50%{ box-shadow:var(--glass-line), var(--glass-sh), 0 0 0 3px var(--oxblood-soft) } }
  @media (prefers-reduced-motion:reduce){ .streak-medal.lit{ animation:none } }
  .streak .snum{ font-family:var(--mono); font-size:var(--fs-7); font-weight:700; color:var(--ochre); line-height:1.1}
  .streak .sdays{ display:flex; gap:4px; margin-top:8px}
  .streak .sd{ width:15px; height:15px; border-radius:var(--r-sm); background:var(--paper-2); border:1px solid var(--line-2) } .streak .sd.on{ background:var(--ochre); border-color:var(--ochre) }

  /* coaching */
  .coach{ border-left:3px solid var(--ochre); background:rgba(156,107,34,.08); border-radius:var(--r-sm); padding:16px 20px; margin-bottom:12px}
  .coach.ok{ border-color:var(--pine); background:rgba(60,107,78,.08) }
  .coach .ch{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--ochre); font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:8px} .coach.ok .ch{ color:var(--pine) }
  .coach p{ font-weight:300; font-size:var(--fs-3); line-height:1.5; color:var(--ink-2) } .coach p b{ color:var(--ink); font-weight:500 }

  /* next action */
  .nextcard{ border:1.5px solid var(--ink); border-radius:var(--r); padding:20px 20px; background:var(--paper); margin-bottom:12px}
  .nextcard .nl{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--oxblood); font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:12px}
  .nextcard .nq{ font-weight:500; font-size:var(--fs-3); letter-spacing:-.01em; line-height:1.3} .nextcard .nq b{ color:var(--oxblood) }
  .nextcard .nwho{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); margin-top:4px}
  /* v0 — CTA primaire = verre oxblood (aligné .ctrl.solid), fin du bloc noir */
  .nextcard .go{ appearance:none; cursor:pointer; margin-top:16px; font-family:var(--mono); font-size:var(--fs-1); padding:8px 16px; border-radius:var(--r-pill); border:1px solid transparent; color:oklch(1 0 0); background:linear-gradient(160deg, oklch(0.47 0.125 28), oklch(0.40 0.11 28)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .3), var(--sh-2), 0 0 0 1px oklch(0.409 0.11 28 / .4); display:inline-flex; gap:8px; align-items:center; transition:transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast) } .nextcard .go:hover{ transform:translateY(-1px); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .42), var(--sh-3), 0 0 0 1px oklch(0.409 0.11 28 / .5) } .nextcard .go:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px } .nextcard .go .ic{ width:14px;height:14px }
  .nextcard.empty{ border-style:dashed; border-color:var(--line-2) } .nextcard.empty .nq{ font-weight:300; color:var(--grey) }

  /* relances du jour */
  .rel-i{ border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); padding:16px 16px; margin-bottom:12px}
  .rel-i .rh{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
  .rel-i .rn{ font-weight:500; font-size:var(--fs-3)} .rel-i .rday{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:4px 8px; border-radius:var(--r-sm)}
  .rday.j3{ background:color-mix(in oklab, var(--btp) 16%, transparent); color:var(--btp-chip) } .rday.j7{ background:color-mix(in oklab, var(--oxblood) 14%, transparent); color:var(--oxblood) }
  .rel-i .rmsg{ font-weight:300; font-size:var(--fs-3); line-height:1.5; color:var(--ink-2); border-left:2px solid var(--line-2); padding-left:16px; margin-top:12px} .rel-i .rmsg b{ color:var(--ink);font-weight:500 }
  .rel-i .rfoot{ display:flex; gap:12px; align-items:center; margin-top:12px; flex-wrap:wrap }
  .relempty{ font-weight:300; font-size:var(--fs-3); color:var(--grey) }

  /* status pipe (fiche + mini) */
  .pipe{ display:flex; flex-wrap:wrap; gap:8px}
  .pipe button{ appearance:none; cursor:pointer; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.02em; padding:8px 12px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:transparent; color:var(--grey); transition:all 0.2s }
  .pipe button:hover{ border-color:var(--ink); color:var(--ink) } .pipe button:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .pipe button[aria-pressed="true"]{ color:var(--paper); font-weight:700; border-color:transparent }
  .pipe button.s-todo[aria-pressed="true"]{ background:var(--grey) }
  .pipe button.s-hook[aria-pressed="true"]{ background:var(--btp) }
  .pipe button.s-convo[aria-pressed="true"]{ background:var(--ochre) }
  .pipe button.s-rdv[aria-pressed="true"]{ background:var(--immo) }
  .pipe button.s-won[aria-pressed="true"]{ background:var(--pine) }
  .pipe button.s-lost[aria-pressed="true"]{ background:var(--oxblood) }
  .statusdot{ width:9px;height:9px;border-radius:var(--r-pill);flex:none;display:inline-block;background:var(--line-2) }
  .statusdot.s-todo{ background:var(--grey-2) } .statusdot.s-hook{ background:var(--btp) } .statusdot.s-convo{ background:var(--ochre) } .statusdot.s-rdv{ background:var(--immo) } .statusdot.s-won{ background:var(--pine) } .statusdot.s-lost{ background:var(--oxblood) }
  .mini-i .mst{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.04em; text-transform:uppercase; margin-top:8px; display:flex; align-items:center; gap:8px; color:var(--grey) }

  /* "explique comme à un enfant" toggle */
  .child{ margin-top:16px; border:1px dashed var(--line-2); border-radius:var(--r-sm); overflow:hidden; background:var(--paper-2) }
  .child > summary{ list-style:none; cursor:pointer; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; text-transform:uppercase; color:var(--oxblood); padding:12px 16px; min-height:44px; box-sizing:border-box; display:flex; align-items:center; gap:8px; font-weight:700 }
  .child > summary::-webkit-details-marker{ display:none }
  .child > summary .ic{ width:14px;height:14px; transition:transform 0.2s } .child[open] > summary .ic{ transform:rotate(90deg) }
  .child > summary:focus-visible{ outline:2px solid var(--oxblood); outline-offset:-3px }
  .child .cbody{ padding:0 16px 16px; font-weight:300; font-size:var(--fs-3); line-height:1.5; color:var(--ink-2); max-width:70ch } .child .cbody b{ color:var(--ink); font-weight:600 }
  .child .cbody .big{ font-family:var(--mono); font-weight:700; color:var(--oxblood) }

  /* value ladder */
  .ladder{ display:flex; flex-direction:column; gap:4px}
  .lstep{ display:grid; grid-template-columns:34px 1fr auto; gap:16px; align-items:center; padding:12px 16px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); position:relative }
  .lstep .lsn{ width:34px; height:34px; border-radius:var(--r-pill); background:var(--paper-2); border:1px solid var(--line-2); display:grid; place-items:center; font-family:var(--mono); font-size:var(--fs-1); font-weight:700; color:var(--ink-2) }
  .lstep.hot .lsn{ background:var(--oxblood); color:var(--paper); border-color:var(--oxblood) }
  .lstep .lsname{ font-weight:500; font-size:var(--fs-3); line-height:1.1} .lstep .lsname small{ display:block; font-weight:300; font-size:var(--fs-2); color:var(--grey); margin-top:4px}
  .lstep .lsp{ font-family:var(--mono); font-weight:700; font-size:var(--fs-3); text-align:right; white-space:nowrap } .lstep .lsp small{ font-family:var(--sans); font-weight:400; font-size:var(--fs-1); color:var(--grey) }
  .lconn{ height:12px; width:1px; background:var(--line-2); margin-left:32px}

  /* bonus stack */
  .bstack{ border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; background:var(--paper) }
  .brow{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; border-top:1px solid var(--line); font-weight:300; font-size:var(--fs-3); color:var(--ink-2) } .brow:first-child{ border-top:none }
  .brow .bv{ font-family:var(--mono); font-weight:700; color:var(--ink); white-space:nowrap }
  .brow.tot{ background:var(--ink); color:var(--paper); font-weight:500 } .brow.tot .bv{ color:oklch(0.815 0.062 28.5) }
  .brow.tot .bl{ font-weight:500 }

  /* proof engine cards reuse .grid2/.card ; founders badge */
  .fbadge{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--oxblood); border:1px solid rgba(123,45,38,.4); border-radius:var(--r-pill); padding:4px 12px; margin-bottom:12px}

  /* celebration overlay */
  .celebrate{ position:fixed; inset:0; z-index:60; display:none; place-items:center; pointer-events:none }
  .celebrate.on{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px }
  .celebrate .cwin{ background:var(--ink); color:var(--paper); border-radius:var(--r); padding:28px 36px; text-align:center; box-shadow:0 30px 80px rgba(0,0,0,.35); animation:cwin 0.45s cubic-bezier(.2,.9,.2,1) }
  .celebrate .cwk{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.2em; text-transform:uppercase; color:oklch(0.815 0.062 28.5) }
  .celebrate .cwt{ font-weight:200; font-size:var(--fs-6); margin-top:8px; letter-spacing:-.02em } .celebrate .cwt b{ font-weight:600; color:oklch(0.815 0.062 28.5) }
  .celebrate .cws{ font-weight:300; font-size:var(--fs-3); color:oklch(0.834 0.007 106.5); margin-top:8px}
  @keyframes cwin{ from{transform:scale(.8) translateY(14px);opacity:0} to{transform:none;opacity:1} }
  /* célébration « won » — signature DA anneau + bille (chrome) + arc oxblood (Phase 4C).
     Tout en tokens, tout sous prefers-reduced-motion. Remplace les confettis (hex en dur retirés). */
  .celebrate .cel-sig{ position:relative; width:170px; height:170px; pointer-events:none }
  .celebrate .cel-ring{ position:absolute; inset:0; margin:auto; width:120px; height:120px; border-radius:var(--r-pill); border:2px solid var(--oxblood); opacity:0 }
  .celebrate.on .cel-ring{ animation:celRing 1.1s var(--e-out) both }
  .celebrate.on .cel-ring2{ animation-delay:.18s }
  @keyframes celRing{ 0%{transform:scale(.35);opacity:.85} 70%{opacity:.35} 100%{transform:scale(1.7);opacity:0} }
  .celebrate .cel-arc{ position:absolute; inset:0; margin:auto; width:150px; height:150px; overflow:visible }
  .celebrate .cel-arc circle{ fill:none; stroke:var(--oxblood); stroke-width:3; stroke-linecap:round; stroke-dasharray:377; stroke-dashoffset:377; transform:rotate(-90deg); transform-origin:center; opacity:.9 }
  .celebrate.on .cel-arc circle{ animation:celArc 1s var(--e-out) both }
  @keyframes celArc{ 0%{stroke-dashoffset:377} 100%{stroke-dashoffset:66} }
  .celebrate .cel-bille{ position:absolute; inset:0; margin:auto; width:54px; height:54px; border-radius:var(--r-pill); opacity:0;
    background:radial-gradient(circle at 34% 28%, var(--chrome-hi), var(--oxblood) 60%, oklch(.30 .09 28) 100%);
    box-shadow:0 1px 0 0 var(--chrome-hi) inset, 0 -2px 6px oklch(.20 .06 28 / .6) inset, 0 10px 24px -6px var(--sh-diffuse) }
  .celebrate.on .cel-bille{ animation:celBille .5s var(--e-out) both }
  @keyframes celBille{ 0%{transform:scale(.5);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
  @media (prefers-reduced-motion:reduce){
    .celebrate .cel-ring{ display:none }
    .celebrate.on .cel-bille,.celebrate.on .cel-arc circle{ animation:none; opacity:1 }
    .celebrate .cel-arc circle{ stroke-dashoffset:66 } }

  @media (prefers-reduced-motion:reduce){ .kpi .kv.up,.celebrate .cwin{animation:none} .confetti{display:none} .mgauge>i,.duel .dbar>i,.child > summary .ic{transition:none} }
  @media (max-width:900px){
    .kpirow,.charts2,.donuts,.volgrid{ grid-template-columns:1fr }
    .kpirow{ gap:12px} .donuts{ grid-template-columns:repeat(3,1fr) }
  }
  @media (max-width:520px){ .donuts{ grid-template-columns:1fr } .lstep{ grid-template-columns:30px 1fr; row-gap:4px} .lstep .lsp{ grid-column:2; text-align:left } }

  /* ============ v3 — dashboard one-page luxe + ateliers ============ */
  .zn.pine{ background:var(--pine) } .zn.ochre{ background:var(--ochre) }
  #v-dash.on{ display:flex; flex-direction:column; gap:16px}
  .dash-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap }
  .dash-title .kick{ margin-bottom:8px}
  .dash-title h1{ font-size:var(--fs-6)}

  /* segmented control (Apple) */
  .seg{ position:relative; display:flex; width:224px; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px}
  .seg-b{ position:relative; z-index:1; flex:1; appearance:none; cursor:pointer; background:none; border:none; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; color:var(--grey); padding:8px 0; text-align:center; border-radius:var(--r-pill); transition:color 0.32s ease }
  .seg-b[aria-selected="true"]{ color:var(--paper) }
  .seg-b:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .seg-thumb{ position:absolute; z-index:0; top:4px; left:4px; width:calc(50% - 4px); height:calc(100% - 8px); background:var(--ink); border-radius:var(--r-pill); box-shadow:0 3px 10px rgba(0,0,0,.14); transition:transform 0.45s cubic-bezier(.4,0,.1,1) }
  .seg.month .seg-thumb{ transform:translateX(100%) }

  /* KPI luxe */
  .kpirow.lux{ gap:16px}
  .kpirow.lux .kpi{ padding:16px 24px; transition:transform 0.32s cubic-bezier(.2,.7,.2,1), box-shadow 0.32s }
  .kpirow.lux .kpi:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(22,22,21,.09) }
  .kpirow.lux .kpi.ink:hover{ box-shadow:0 14px 40px rgba(22,22,21,.28) }
  .kpirow.lux .kv{ font-size:var(--fs-6); margin-top:8px}
  .kpirow.lux .kl{ font-size:var(--fs-1)} .kpirow.lux .ksub{ margin-top:8px}

  /* donuts as centrepiece */
  .donuts.lux{ grid-template-columns:repeat(3,1fr); gap:16px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--paper); padding:16px 20px}
  .donuts.lux .donut svg{ max-width:106px }
  .donuts.lux .dpc{ font-size:var(--fs-4)}
  .donuts.lux .dcap{ margin-top:8px; font-size:var(--fs-1)} .donuts.lux .draw{ margin-top:4px}
  .donut .ring{ transition:stroke-dashoffset 0.45s cubic-bezier(.34,1.1,.4,1) }

  /* objectif slim */
  .objslim{ border:1px solid var(--line-2); border-radius:var(--r); background:var(--paper); padding:12px 24px}
  .objslim-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; text-transform:uppercase; color:var(--grey) }
  .mgauge.lux{ height:12px; margin-top:12px}
  .objslim-sub{ font-weight:300; font-size:var(--fs-2); color:var(--ink-2); margin-top:8px} .objslim-sub b{ font-family:var(--mono); color:var(--oxblood); font-weight:700 }
  .stepper.stsmall button{ width:30px; height:32px; font-size:var(--fs-3)} .stepper.stsmall .val{ width:36px; font-size:var(--fs-3)}

  /* strip duel/streak/coach */
  .dash-strip{ display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:16px; align-items:stretch }
  .strip-card{ border:1px solid var(--line-2); border-radius:var(--r); background:var(--paper); padding:16px 20px; display:flex; flex-direction:column }
  .strip-h{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--grey); display:flex; align-items:center; gap:8px; margin-bottom:12px} .strip-h .ic{ color:var(--oxblood); width:14px; height:14px } .strip-hint{ margin-left:auto; color:var(--grey-2); letter-spacing:.06em }
  .strip-card .coach{ margin:0} .strip-card #coach .coach{ border:none; background:none; padding:0} .strip-card #coach .coach .ch{ margin-bottom:8px}
  .ctrls.lux{ margin-top:4px} .dash-foot{ font-weight:300; font-size:var(--fs-2); color:var(--grey) } .dash-foot b{ color:var(--ink-2); font-weight:500 }

  /* entrance */
  .rise{ opacity:0; animation:rise 0.45s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(var(--d) * 0.12s) }
  @keyframes rise{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

  /* ---- atelier closer ---- */
  .cl-head{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; justify-content:space-between; margin-bottom:8px}
  .cl-stats{ display:flex; gap:12px; flex-wrap:wrap }
  .cl-stat{ border:1px solid var(--line-2); border-radius:var(--r-sm); padding:8px 16px; background:var(--paper); min-width:78px }
  .cl-stat .n{ font-family:var(--mono); font-weight:700; font-size:var(--fs-5); line-height:1.1} .cl-stat .l{ font-family:var(--mono); font-size:var(--fs-1); text-transform:uppercase; letter-spacing:.08em; color:var(--grey); margin-top:4px}
  .cl-sec{ margin-top:28px} .cl-sec .fk{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.2em; text-transform:uppercase; color:var(--grey); display:flex; align-items:center; gap:12px; margin-bottom:16px} .cl-sec .fk .cnt2{ margin-left:auto; font-size:var(--fs-1); color:var(--grey-2) }
  .cl-row{ border:1px solid var(--line-2); border-radius:var(--r); background:var(--paper); padding:16px 20px; margin-bottom:12px; transition:border-color 0.2s, box-shadow 0.2s, transform 0.2s cubic-bezier(.2,.8,.2,1); touch-action:pan-y }
  .cl-row.swipe-right{ box-shadow:inset 5px 0 0 var(--pine), 0 8px 22px rgba(60,107,78,.14) }
  .cl-row.swipe-left{ box-shadow:inset -5px 0 0 var(--oxblood), 0 8px 22px rgba(123,45,38,.14) }
  .cl-pin.on{ animation:pinpop 0.32s cubic-bezier(.3,1.3,.5,1) }
  @keyframes pinpop{ 0%{transform:scale(1)} 45%{transform:scale(1.22)} 100%{transform:scale(1)} }
  .cl-hint-line{ display:none }
  @media (max-width:900px){ .cl-hint-line{ display:flex; align-items:center; gap:8px; font-weight:300; font-size:var(--fs-2); color:var(--grey); background:var(--paper-2); border-radius:var(--r-sm); padding:12px 16px; margin-bottom:12px} .cl-hint-line svg{ width:15px; height:15px; color:var(--oxblood); flex:none } }
  @media (prefers-reduced-motion:reduce){ .cl-pin.on{ animation:none } .cl-row{ transition:border-color 0.2s, box-shadow 0.2s } }
  .cl-row.pinned{ border-color:var(--ochre); box-shadow:inset 3px 0 0 var(--ochre) }
  .cl-row.done{ opacity:.62 }
  .cl-main{ display:flex; align-items:center; gap:12px}
  .cl-pin{ appearance:none; cursor:pointer; background:none; border:1px solid var(--line-2); border-radius:var(--r-sm); width:34px; height:34px; display:grid; place-items:center; color:var(--grey-2); flex:none; transition:all 0.2s } .cl-pin:hover{ border-color:var(--ochre); color:var(--ochre) } .cl-pin.on{ background:var(--ochre); border-color:var(--ochre); color:oklch(1 0 0) } .cl-pin:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px } .cl-pin .ic{ width:15px; height:15px }
  .cl-id{ flex:1; min-width:0 } .cl-name{ font-weight:500; font-size:var(--fs-3); letter-spacing:-.01em } .cl-city{ display:block; font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); margin-top:4px}
  .cl-pipe{ margin-top:12px}
  .cl-note{ width:100%; margin-top:12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--panel); padding:12px 12px; font-family:var(--sans); font-size:var(--fs-3); color:var(--ink); resize:vertical; min-height:42px; line-height:1.5} .cl-note:focus-visible{ outline:2px solid var(--oxblood); outline-offset:-1px } .cl-note::placeholder{ color:var(--grey-2) }
  .cl-foot{ display:flex; align-items:center; gap:16px; margin-top:12px; flex-wrap:wrap }
  .cl-fiche{ appearance:none; cursor:pointer; background:none; border:none; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; text-transform:uppercase; color:var(--oxblood); display:inline-flex; align-items:center; gap:8px; padding:4px 0} .cl-fiche:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px } .cl-fiche .ic{ width:13px; height:13px }
  .cl-vol{ display:flex; align-items:center; gap:16px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--paper); padding:16px 20px} .cl-vol .vv{ font-family:var(--mono); font-size:var(--fs-5); font-weight:700 } .cl-vol .vl{ font-weight:300; font-size:var(--fs-3); color:var(--grey); flex:1 }

  @media (prefers-reduced-motion:reduce){ .rise{ opacity:1; animation:none } .seg-thumb,.donut .ring,.kpirow.lux .kpi{ transition:none } }
  @media (max-width:900px){ .dash-strip{ grid-template-columns:1fr } .donuts.lux{ grid-template-columns:repeat(3,1fr) } .dash-top{ align-items:flex-start } }
  @media (max-width:560px){ .donuts.lux{ grid-template-columns:1fr } .dash-controls{ width:100% } .seg{ width:100% } }

  /* ============ v4 — accessibilité & tactile (cibles ≥ 44px) ============ */
  .skip{ position:absolute; left:8px; top:-60px; z-index:120; background:var(--ink); color:var(--paper); padding:12px 20px; border-radius:var(--r-sm); font-family:var(--mono); font-size:var(--fs-2); transition:top 0.2s } .skip:focus{ top:8px; outline:2px solid var(--oxblood); outline-offset:2px }
  .pipe button{ min-height:44px; padding:12px 16px}
  .stepper button{ width:44px; height:44px } .stepper.stsmall button{ width:44px; height:44px }
  .seg-b{ padding:12px 0; min-height:44px }
  .cl-pin{ width:44px; height:44px }
  .cl-fiche{ min-height:44px; padding:12px 4px}
  .ctrl{ min-height:44px } .copybtn{ min-height:44px } .fbtn{ min-height:44px } .backbtn{ min-height:44px }
  .nav-i{ min-height:42px }
  .mini-i{ min-height:56px }
  .syncpill{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; text-transform:uppercase; color:var(--grey); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:4px 12px; margin-right:8px; white-space:nowrap }
  .syncpill.live{ color:var(--pine); border-color:rgba(60,107,78,.35) }
  .syncdot{ width:6px; height:6px; border-radius:var(--r-pill); background:var(--ochre); flex:none } .syncpill.live .syncdot{ background:var(--pine) }
  .syncpill.off{ color:var(--oxblood); border-color:rgba(123,45,38,.35) } .syncpill.off .syncdot{ background:var(--oxblood) }
  /* toasts */
  .toasts{ position:fixed; left:0; right:0; bottom:0; z-index:130; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 12px 20px; pointer-events:none }
  .toast{ pointer-events:auto; display:flex; align-items:center; gap:16px; background:var(--ink); color:var(--paper); border-radius:var(--r); padding:12px 16px 12px 20px; box-shadow:0 14px 44px rgba(0,0,0,.3); font-weight:300; font-size:var(--fs-3); max-width:min(440px,92vw); opacity:0; transform:translateY(14px) scale(.98); transition:opacity 0.32s ease, transform 0.32s cubic-bezier(.2,.8,.2,1) }
  .toast.in{ opacity:1; transform:none } .toast.out{ opacity:0; transform:translateY(10px) }
  .toast.warn{ background:var(--oxblood) } .toast b{ font-weight:600; color:oklch(1 0 0) } .toast-msg{ line-height:1.4}
  .toast-act{ appearance:none; cursor:pointer; background:rgba(255,255,255,.16); border:none; color:oklch(1 0 0); font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.05em; text-transform:uppercase; padding:8px 12px; border-radius:var(--r-sm); min-height:40px; flex:none; transition:background 0.2s } .toast-act:hover{ background:rgba(255,255,255,.28) } .toast-act:focus-visible{ outline:2px solid oklch(1 0 0); outline-offset:2px }
  @media (max-width:900px){ .toasts{ bottom:calc(76px + env(safe-area-inset-bottom)) } }
  @media (prefers-reduced-motion:reduce){ .toast{ transition:none; opacity:1; transform:none } }
  /* onboarding */
  .onboard{ position:fixed; inset:0; z-index:140; display:grid; place-items:center; padding:20px} .onboard[hidden]{ display:none }
  .ob-scrim{ position:absolute; inset:0; background:rgba(22,22,21,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:fade 0.32s }
  .ob-card{ position:relative; background:var(--paper); border-radius:var(--r-lg); max-width:460px; width:100%; padding:36px 36px 32px; box-shadow:0 30px 90px rgba(0,0,0,.35); animation:obin 0.45s cubic-bezier(.2,.85,.2,1) }
  @keyframes obin{ from{opacity:0; transform:translateY(16px) scale(.97)} to{opacity:1; transform:none} }
  .ob-kick{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.2em; text-transform:uppercase; color:var(--oxblood) }
  .ob-t{ font-weight:200; font-size:var(--fs-6); letter-spacing:-.02em; margin-top:12px; line-height:1.1} .ob-t b{ font-weight:600; color:var(--oxblood) }
  .ob-lead{ font-weight:300; color:var(--ink-2); margin-top:8px}
  .ob-steps{ list-style:none; margin-top:24px; display:flex; flex-direction:column; gap:16px}
  .ob-steps li{ display:flex; gap:16px; align-items:flex-start; font-weight:300; font-size:var(--fs-3); line-height:1.5; color:var(--ink-2) } .ob-steps li b{ color:var(--ink); font-weight:600 }
  .ob-n{ flex:none; width:30px; height:30px; border-radius:var(--r-pill); background:var(--ink); color:var(--paper); display:grid; place-items:center; font-family:var(--mono); font-size:var(--fs-2); font-weight:700 }
  .ob-cta{ appearance:none; cursor:pointer; margin-top:28px; width:100%; padding:16px; min-height:52px; border:none; border-radius:var(--r); background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:var(--fs-2); letter-spacing:.06em; text-transform:uppercase; transition:opacity 0.2s } .ob-cta:hover{ opacity:.9 } .ob-cta:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .ob-replay{ appearance:none; background:none; border:none; cursor:pointer; color:var(--oxblood); font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.04em; text-transform:uppercase; text-decoration:underline; padding:8px; min-height:36px }
  /* #5 — identité fondue dans l'onboarding (1 écran) */
  .ob-me{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line) }
  .ob-me-h{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:12px; text-align:center }
  @media (prefers-reduced-motion:reduce){ .ob-card,.ob-scrim{ animation:none } }
  /* visible focus ring, consistent */
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible, textarea:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .view[tabindex]:focus{ outline:none }

  /* ============ v4 — nav mobile (bottom tab bar + sheet) ============ */
  .tabbar{ display:none }
  .sheet{ display:none }
  .pbn{ display:none }
  @keyframes sheetup{ from{transform:translateY(100%)} to{transform:none} }
  @media (max-width:900px){
    .side{ display:none }
    .content{ padding-bottom:calc(90px + env(safe-area-inset-bottom)) }
    .tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-top:1px solid var(--line-2); padding:6px 6px calc(6px + env(safe-area-inset-bottom)); box-shadow:0 -6px 24px rgba(0,0,0,.06) }
    .tab-i{ position:relative; flex:1; appearance:none; background:none; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 4px; min-height:54px; color:var(--grey); font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.03em; text-transform:uppercase; border-radius:var(--r-sm); transition:color 0.2s, transform 0.2s }
    .tab-i .ic{ width:21px; height:21px; transition:transform 0.2s cubic-bezier(.2,.8,.2,1) }
    .tab-i[aria-current="true"]{ color:var(--oxblood) } .tab-i[aria-current="true"] .ic{ transform:translateY(-1px) scale(1.08) }
    /* C2e — indicateur non-chromatique (WCAG 1.4.1) : barre 2px sous l'onglet actif, pas juste la couleur */
    .tab-i[aria-current="true"]::after{ content:""; position:absolute; bottom:1px; left:50%; transform:translateX(-50%); width:18px; height:2px; border-radius:var(--r-sm); background:var(--oxblood) }
    .tab-i:active{ transform:scale(.94) }
    .tab-i:focus-visible{ outline:2px solid var(--oxblood); outline-offset:-2px }
    .sheet{ display:block; position:fixed; inset:0; z-index:110 } .sheet[hidden]{ display:none }
    .sheet-scrim{ position:absolute; inset:0; background:rgba(22,22,21,.34); animation:fade 0.2s ease }
    .sheet-panel{ position:absolute; left:0; right:0; bottom:0; background:var(--paper); border-radius:var(--r-lg); padding:8px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow:0 -12px 44px rgba(0,0,0,.24); animation:sheetup 0.32s cubic-bezier(.2,.85,.2,1) }
    .sheet-handle{ width:42px; height:5px; border-radius:var(--r-pill); background:var(--line-2); margin:7px auto 14px }
    .sheet-title{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); padding:0 8px 8px}
    .sheet-row{ width:100%; display:flex; align-items:center; gap:12px; padding:16px 8px; min-height:54px; background:none; border:none; border-top:1px solid var(--line); font-family:var(--sans); font-size:var(--fs-3); color:var(--ink); cursor:pointer; text-align:left }
    .sheet-row:active{ background:var(--paper-2) }
    .sheet-row .dot{ width:9px; height:9px; border-radius:var(--r-pill); background:var(--line-2); flex:none }
    .sheet-row .dot.btp{ background:var(--btp) } .sheet-row .dot.gastro{ background:var(--gastro) } .sheet-row .dot.vin{ background:var(--vin) } .sheet-row .dot.immo{ background:var(--immo) } .sheet-row .dot.immoprestige{ background:var(--immoprestige) } .sheet-row .dot.hotellerie{ background:var(--hotellerie) } .sheet-row .dot.ecommerce{ background:var(--ecommerce) } .sheet-row .dot.auto{ background:var(--auto) } .sheet-row .dot.beaute{ background:var(--beaute) } .sheet-row .dot.gc{ background:var(--gc) }
    .sheet-close{ width:100%; margin-top:16px; padding:16px; min-height:54px; border:1px solid var(--line-2); border-radius:var(--r); background:none; font-family:var(--mono); font-size:var(--fs-2); letter-spacing:.04em; text-transform:uppercase; color:var(--ink); cursor:pointer }
    .pbn{ display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 4px}
    .pbn-i{ min-height:44px; padding:12px 16px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:none; font-family:var(--mono); font-size:var(--fs-1); text-transform:uppercase; letter-spacing:.04em; color:var(--grey); cursor:pointer; display:inline-flex; align-items:center; gap:8px}
    .pbn-i[aria-current="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
    .pbn-i .dot{ width:8px; height:8px; border-radius:var(--r-pill); background:var(--line-2) }
    .pbn-i .dot.btp{ background:var(--btp) } .pbn-i .dot.immo{ background:var(--immo) } .pbn-i .dot.immoprestige{ background:var(--immoprestige) } .pbn-i .dot.hotellerie{ background:var(--hotellerie) } .pbn-i .dot.gastro{ background:var(--gastro) } .pbn-i .dot.vin{ background:var(--vin) } .pbn-i .dot.ecommerce{ background:var(--ecommerce) } .pbn-i .dot.auto{ background:var(--auto) } .pbn-i .dot.beaute{ background:var(--beaute) }
  }

  /* ============ v5 — CRM-lite : ajout/édition de cibles ============ */
  .addcta{ appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:12px 20px; border-radius:var(--r-sm); border:1.5px dashed var(--line-2); background:transparent; color:var(--oxblood); font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.04em; text-transform:uppercase; transition:border-color 0.2s, background 0.2s }
  .addcta:hover{ border-color:var(--oxblood); background:var(--oxblood-soft) } .addcta:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px } .addcta .ic{ width:15px; height:15px }
  .badge-new{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:4px 8px; border-radius:var(--r-sm); background:rgba(60,107,78,.14); color:var(--pine) } .badge-new::before{ content:""; width:6px; height:6px; border-radius:var(--r-pill); background:var(--pine); flex:none }
  /* contacts (fiche) */
  .contacts{ display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .cfield label{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; color:var(--grey); display:block; margin-bottom:8px}
  .cfield input{ width:100%; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--panel); padding:12px 12px; font-family:var(--sans); font-size:var(--fs-3); color:var(--ink); min-height:44px } .cfield input:focus-visible{ outline:2px solid var(--oxblood); outline-offset:-1px } .cfield input::placeholder{ color:var(--grey-2) }
  .clink{ display:inline-flex; align-items:center; gap:8px; min-height:44px; margin-top:8px; font-family:var(--mono); font-size:var(--fs-1); color:var(--oxblood); text-decoration:none; padding:4px 0} .clink:hover{ text-decoration:underline } .clink:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px } .clink .ic{ width:14px; height:14px } .clink[hidden]{ display:none }
  .cust-manage{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:8px}
  /* modal form */
  .pmodal{ position:fixed; inset:0; z-index:150; display:grid; place-items:end center; padding:0} .pmodal[hidden]{ display:none }
  .pm-scrim{ position:absolute; inset:0; background:rgba(22,22,21,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:fade 0.2s }
  .pm-card{ position:relative; background:var(--paper); width:100%; max-width:560px; max-height:92vh; overflow-y:auto; border-radius:var(--r-lg); padding:10px 26px calc(24px + env(safe-area-inset-bottom)); box-shadow:0 -12px 60px rgba(0,0,0,.3); animation:sheetup 0.32s cubic-bezier(.2,.85,.2,1) }
  @media (min-width:640px){ .pmodal{ place-items:center } .pm-card{ border-radius:var(--r-lg); max-height:88vh; padding:12px 32px 28px; animation:obin 0.45s cubic-bezier(.2,.85,.2,1) } }
  .pm-handle{ width:42px; height:5px; border-radius:var(--r-pill); background:var(--line-2); margin:8px auto 6px } @media (min-width:640px){ .pm-handle{ display:none } }
  .pm-kick{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.18em; text-transform:uppercase; color:var(--oxblood); margin-top:8px}
  .pm-t{ font-weight:300; font-size:var(--fs-5); letter-spacing:-.02em; margin-top:8px; line-height:1.1} .pm-t b{ font-weight:600; color:var(--oxblood) }
  .pm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px}
  .pm-f{ display:flex; flex-direction:column } .pm-f.wide{ grid-column:1/3 }
  .pm-f label{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; color:var(--grey); margin-bottom:8px} .pm-f label .req{ color:var(--oxblood) }
  .pm-f input,.pm-f select,.pm-f textarea{ width:100%; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--panel); padding:12px 12px; font-family:var(--sans); font-size:var(--fs-3); color:var(--ink); min-height:46px } .pm-f textarea{ resize:vertical; line-height:1.5; min-height:74px }
  .pm-f input:focus-visible,.pm-f select:focus-visible,.pm-f textarea:focus-visible{ outline:2px solid var(--oxblood); outline-offset:-1px }
  .pm-f input.err,.pm-f select.err{ border-color:var(--oxblood); background:var(--oxblood-soft) }
  .pm-msgbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
  .pm-regen{ appearance:none; cursor:pointer; background:none; border:none; color:var(--oxblood); font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.04em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; min-height:36px } .pm-regen:hover{ text-decoration:underline } .pm-regen:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px } .pm-regen .ic{ width:13px; height:13px }
  .pm-foot{ display:flex; gap:12px; align-items:center; margin-top:24px; flex-wrap:wrap }
  .pm-save{ appearance:none; cursor:pointer; flex:1; min-width:160px; min-height:52px; padding:16px; border:none; border-radius:var(--r); background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:var(--fs-2); letter-spacing:.05em; text-transform:uppercase; transition:opacity 0.2s } .pm-save:hover{ opacity:.9 } .pm-save:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .pm-cancel{ appearance:none; cursor:pointer; min-height:52px; padding:16px 24px; border:1px solid var(--line-2); border-radius:var(--r); background:none; color:var(--ink); font-family:var(--mono); font-size:var(--fs-2); letter-spacing:.04em; text-transform:uppercase } .pm-cancel:hover{ border-color:var(--ink) } .pm-cancel:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .pm-del{ appearance:none; cursor:pointer; min-height:52px; padding:16px 20px; border:1px solid rgba(123,45,38,.4); border-radius:var(--r); background:none; color:var(--oxblood); font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.04em; text-transform:uppercase; margin-left:auto } .pm-del:hover{ background:var(--oxblood); border-color:var(--oxblood); color:oklch(1 0 0) } .pm-del:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  @media (max-width:560px){ .pm-grid{ grid-template-columns:1fr } .pm-f.wide{ grid-column:1 } .pm-foot{ flex-direction:column-reverse; align-items:stretch } .pm-del{ margin-left:0} }
  @media (prefers-reduced-motion:reduce){ .pm-card,.pm-scrim{ animation:none } }

  /* ============ v5 — bibliothèque d'astuces (élite) ============ */
  .tipsearch{ position:relative; margin-bottom:16px}
  .tipsearch input{ width:100%; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); padding:12px 16px 12px 44px; font-family:var(--sans); font-size:var(--fs-3); color:var(--ink); min-height:48px } .tipsearch input:focus-visible{ outline:2px solid var(--oxblood); outline-offset:-1px } .tipsearch input::placeholder{ color:var(--grey-2) }
  .tipsearch .si{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--grey); pointer-events:none }
  .tipgrid{ display:flex; flex-direction:column; gap:12px}
  .tip{ border:1px solid var(--line-2); border-radius:var(--r); background:var(--paper); padding:16px 20px} .tip[hidden]{ display:none }
  .tip .th{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px}
  .tip .tt{ font-weight:500; font-size:var(--fs-3); letter-spacing:-.012em }
  .tip .tcat{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:4px 8px; border-radius:var(--r-sm); background:rgba(22,22,21,.07); color:var(--ink-2) }
  .tip .ttech{ margin-left:auto; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; color:var(--oxblood); border:1px solid rgba(123,45,38,.34); border-radius:var(--r-sm); padding:4px 8px}
  .tip .tbody{ font-weight:300; font-size:var(--fs-3); line-height:1.5; color:var(--ink-2); max-width:70ch } .tip .tbody b{ color:var(--oxblood); font-weight:500 }
  .tip .tsay{ display:block; border-left:2px solid var(--oxblood); padding-left:16px; margin-top:8px; color:var(--ink); font-weight:300 } .tip .tsay b{ color:var(--oxblood); font-weight:500 }
  .tipempty{ font-weight:300; font-size:var(--fs-3); color:var(--grey); padding:8px 4px} .tipempty[hidden]{ display:none }
  .subhead{ display:flex; align-items:baseline; gap:12px; margin:44px 0 4px} .subhead h2{ font-weight:300; font-size:var(--fs-h2); letter-spacing:-.02em } .subhead h2 b{ font-weight:600; color:var(--oxblood) }

  /* ============ v5 — calculateur ROI configurable ============ */
  .roicalc{ border:1px solid var(--line-2); border-radius:var(--r); background:var(--paper); padding:20px 24px; margin-top:16px}
  .roicalc .rc-h{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--oxblood); display:flex; align-items:center; gap:8px; margin-bottom:16px} .roicalc .rc-h .ic{ width:14px; height:14px }
  .rc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .rc-f{ display:flex; flex-direction:column; gap:8px} .rc-f > span{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; text-transform:uppercase; color:var(--grey) }
  .rc-f select,.rc-f input{ width:100%; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--panel); padding:12px 12px; font-family:var(--sans); font-size:var(--fs-3); color:var(--ink); min-height:46px } .rc-f select:focus-visible,.rc-f input:focus-visible{ outline:2px solid var(--oxblood); outline-offset:-1px }
  .rc-inw{ position:relative; display:flex; align-items:center } .rc-inw input{ padding-right:32px} .rc-inw i{ position:absolute; right:14px; font-family:var(--mono); color:var(--grey); font-style:normal; font-size:var(--fs-3); pointer-events:none }
  .rc-out{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:baseline; gap:16px; flex-wrap:wrap }
  .rc-big{ font-family:var(--mono); font-weight:700; font-size:var(--fs-6); letter-spacing:-.02em; color:var(--oxblood); line-height:1.1; white-space:nowrap }
  .rc-sub{ font-weight:300; font-size:var(--fs-3); color:var(--ink-2); flex:1; min-width:180px }
  @media (max-width:560px){ .rc-grid{ grid-template-columns:1fr } }
  /* ---- Surface B · constructeur de proposition ---- */
  .pbuild{ border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--paper); padding:24px 28px; margin-top:16px}
  .pb-h{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--oxblood); display:flex; align-items:center; gap:8px; margin-bottom:20px} .pb-h .ic{ width:14px; height:14px }
  .pb-tag{ margin-left:auto; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; text-transform:uppercase; font-weight:700; color:var(--ink-2); background:rgba(22,22,21,.07); padding:4px 12px; border-radius:var(--r-pill)}
  .pb-steps{ display:flex; flex-direction:column; gap:20px}
  .pb-step{ display:flex; gap:12px; align-items:flex-start }
  .pb-step .pb-n{ width:22px; height:22px; flex:0 0 22px; background:var(--ink); color:var(--paper); display:grid; place-items:center; font-family:var(--mono); font-size:var(--fs-1); margin-top:4px}
  .pb-step.opt .pb-n{ background:var(--paper-2); color:var(--grey) }
  .pb-f{ flex:1; min-width:0 }
  .pb-f > label{ display:block; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; text-transform:uppercase; color:var(--grey); margin-bottom:12px} .pb-f > label b{ color:var(--ink-2); font-weight:700 } .pb-f > label i{ font-style:normal; text-transform:none; letter-spacing:0; color:var(--grey-2); font-weight:400 }
  .pb-f input[type=text]{ width:100%; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--panel); padding:12px 12px; font-family:var(--sans); font-size:var(--fs-3); color:var(--ink); min-height:46px } .pb-f input:focus-visible{ outline:2px solid var(--oxblood); outline-offset:-1px }
  .pb-f .rc-inw{ max-width:220px }
  .pb-paliers{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
  .pb-p{ position:relative; appearance:none; cursor:pointer; text-align:left; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); padding:16px 16px 16px; display:flex; flex-direction:column; gap:4px; transition:border-color 0.2s,box-shadow 0.2s,background 0.2s }
  @media (hover:hover) and (pointer:fine){ .pb-p:hover{ border-color:var(--ink-2) } }
  .pb-p:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .pb-p.sel{ border-color:var(--oxblood); border-width:1.5px; background:var(--oxblood-soft); box-shadow:var(--sh-2) }
  .pb-p-lab{ font-weight:500; font-size:var(--fs-3); line-height:1.1}
  .pb-p-price{ font-family:var(--mono); font-size:var(--fs-2); color:var(--grey); font-weight:700 }
  .pb-p-roi{ margin-top:8px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
  .pb-p-roi b{ font-family:var(--mono); font-size:var(--fs-5); font-weight:700; letter-spacing:-.02em; color:var(--oxblood); line-height:1.1}
  .pb-p-sub{ font-size:var(--fs-1); color:var(--grey); font-weight:400 }
  .pb-reco{ position:absolute; top:-9px; right:12px; background:var(--oxblood); color:var(--paper); font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:var(--r-pill)}
  .pb-out{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line) }
  .pb-out-h{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; color:var(--pine); margin-bottom:12px; display:flex; align-items:center; gap:8px} .pb-out-h .ic{ width:13px; height:13px }
  @media (max-width:640px){ .pb-paliers{ grid-template-columns:1fr } }

  /* ============ v5 — log des « non » ============ */
  /* réservé admin (Aroz) : Direction gc, validations Elite */
  html:not(.is-admin) .is-admin-only{ display:none !important }
  .lostmodal{ position:fixed; inset:0; z-index:150; display:grid; place-items:end center } .lostmodal[hidden]{ display:none }
  .lm-scrim{ position:absolute; inset:0; background:oklch(0.145 0 0 / .55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:fade 0.2s }
  .lm-card{ position:relative; background:var(--paper); width:100%; max-width:460px; border-radius:var(--r-lg); padding:10px 24px calc(22px + env(safe-area-inset-bottom)); box-shadow:0 -12px 60px rgba(0,0,0,.3); animation:sheetup 0.32s cubic-bezier(.2,.85,.2,1) }
  @media (min-width:640px){ .lostmodal{ place-items:center } .lm-card{ border-radius:var(--r-lg); animation:obin 0.32s cubic-bezier(.2,.85,.2,1) } }
  .lm-handle{ width:42px; height:5px; border-radius:var(--r-pill); background:var(--line-2); margin:8px auto 6px } @media (min-width:640px){ .lm-handle{ display:none } }
  .lm-kick{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.16em; text-transform:uppercase; color:var(--oxblood); margin-top:8px}
  .lm-t{ font-weight:300; font-size:var(--fs-5); letter-spacing:-.02em; margin-top:4px; line-height:1.1} .lm-t b{ font-weight:600 }
  .lm-reasons{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
  .lm-r{ appearance:none; cursor:pointer; min-height:44px; padding:12px 16px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:transparent; color:var(--ink); font-family:var(--sans); font-size:var(--fs-3); transition:all 0.12s } .lm-r:hover{ border-color:var(--oxblood); color:var(--oxblood) } .lm-r:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .lm-skip{ appearance:none; cursor:pointer; margin-top:20px; width:100%; min-height:48px; padding:12px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:none; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.05em; text-transform:uppercase; color:var(--grey); } .lm-skip:hover{ border-color:var(--ink); color:var(--ink) } .lm-skip:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  @media (prefers-reduced-motion:reduce){ .lm-card,.lm-scrim{ animation:none } }
  /* répartition des raisons (dashboard coaching) */
  .lostbrk{ margin-top:16px; padding-top:12px; border-top:1px solid var(--line) }
  .lostbrk .lbh{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; color:var(--grey); margin-bottom:12px}
  .lostbrk .lbrow{ display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center; margin-bottom:8px}
  .lostbrk .lbl{ font-weight:300; font-size:var(--fs-2); color:var(--ink-2) } .lostbrk .lbn{ font-family:var(--mono); font-size:var(--fs-1); font-weight:700; color:var(--oxblood) }
  .lostbrk .lbbar{ grid-column:1/3; height:6px; border-radius:var(--r-pill); background:var(--paper-2); overflow:hidden } .lostbrk .lbbar > i{ display:block; height:100%; background:var(--oxblood); border-radius:var(--r-pill)}

  /* ============ v5 — identité closer + présence temps réel ============ */
  .bytag{ display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:4px 8px; border-radius:var(--r-sm); background:rgba(79,110,140,.16); color:var(--btp) } .bytag .ic{ width:11px; height:11px } .bytag.me{ background:rgba(60,107,78,.16); color:var(--pine) }
  .mepill{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:4px 8px 4px 12px; margin-right:8px; white-space:nowrap } .mepill i{ width:7px; height:7px; border-radius:var(--r-pill); background:var(--pine); flex:none }
  .mepill button{ appearance:none; cursor:pointer; background:none; border:none; color:var(--oxblood); font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.04em; text-transform:uppercase; text-decoration:underline; padding:4px 8px; min-height:32px } .mepill button:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .me-choices{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
  .me-input{ display:flex; gap:8px; margin-top:12px} .me-input input{ flex:1; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--panel); padding:12px 12px; font-family:var(--sans); font-size:var(--fs-3); color:var(--ink); min-height:44px } .me-input input:focus-visible{ outline:2px solid var(--oxblood); outline-offset:-1px }
  /* états lecture-seule / désactivés (gating par rôle) */
  .pipe button:disabled,.cl-pin:disabled,.stepper button:disabled{ opacity:.32; cursor:not-allowed; pointer-events:none }
  .cl-note[readonly]{ opacity:.7; cursor:default; background:var(--paper-2) }
  .cl-row.ro{ opacity:.92 } .cl-row.ro .cl-note[readonly]{ border-style:dashed }
  .cfield input[readonly]{ opacity:.72; background:var(--paper-2); cursor:default }
  .pm-f select:disabled{ opacity:.6; cursor:not-allowed }

  /* ============ v5 — palette de recherche rapide (⌘K) ============ */
  /* H3 — ⌘K + Réglages = matière verre (north-star nav-cmdk), pas une boîte outline plate */
  .cmdk-trigger{ appearance:none; cursor:pointer; width:calc(100% - 24px); margin:4px 12px 8px; display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid oklch(0.2 0.002 106.6 / .08); border-radius:var(--r-sm); color:var(--grey); font-family:var(--sans); font-size:var(--fs-2);
    background:linear-gradient(160deg, oklch(1 0 0 / .55), oklch(1 0 0 / .12));
    box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .5), var(--sh-1);
    transition:transform var(--t-fast) var(--e-spring), box-shadow var(--t-fast), color var(--t-fast), border-color var(--t-fast) }
  .cmdk-trigger:hover{ color:var(--ink); transform:translateY(-1px); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .6), var(--sh-2) }
  .cmdk-trigger:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px } .cmdk-trigger .ic{ width:15px; height:15px; flex:none } .cmdk-trigger kbd{ margin-left:auto; font-family:var(--mono); font-size:var(--fs-1); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:4px 8px; background:oklch(1 0 0 / .35) }
  html.night .cmdk-trigger{ border-color:oklch(1 0 0 / .08); background:linear-gradient(160deg, oklch(1 0 0 / .1), oklch(1 0 0 / .02)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .16) }
  html.night .cmdk-trigger:hover{ color:var(--ink); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .22), 0 6px 18px -10px oklch(0 0 0 / .7) }
  html.night .cmdk-trigger kbd{ background:oklch(1 0 0 / .06); border-color:oklch(1 0 0 / .12) }
  /* H7 — toggle jour/nuit du hub : segmenté verre + bille glissante (reconstruit d'après nav-toggle-daynight) */
  .side-foot{ margin-top:24px; padding:16px 12px 8px; border-top:1px solid oklch(0.2 0.002 106.6 / .08) }
  html.night .side-foot{ border-top-color:oklch(1 0 0 / .07) }
  .hub-theme{ appearance:none; cursor:pointer; position:relative; isolation:isolate; width:100%; display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:var(--r-pill);
    border:1px solid oklch(0.2 0.002 106.6 / .08);
    background:linear-gradient(160deg, oklch(1 0 0 / .5), oklch(1 0 0 / .1));
    box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .5), var(--sh-1);
    transition:box-shadow var(--t-fast) var(--e-out) }
  .hub-theme .ht-cell{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 8px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); transition:color 0.2s var(--e-out) }
  .hub-theme .ht-cell .ic{ width:13px; height:13px }
  .hub-theme .ht-knob{ position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:var(--r-pill);
    background:linear-gradient(160deg, oklch(1 0 0 / .78), oklch(1 0 0 / .3));
    box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .7), var(--sh-1);
    transition:transform 0.32s var(--e-spring), box-shadow var(--t-fast) }
  .hub-theme .ht-day{ color:var(--ink) }                                   /* défaut = jour actif */
  .hub-theme[aria-checked="true"] .ht-knob{ transform:translateX(100%) }
  .hub-theme[aria-checked="true"] .ht-day{ color:var(--grey) }
  .hub-theme[aria-checked="true"] .ht-night{ color:var(--ink) }
  .hub-theme:hover .ht-knob{ box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .82), var(--sh-2) }
  .hub-theme:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .hub-theme:active{ transform:scale(.985) }
  html.night .hub-theme{ border-color:oklch(1 0 0 / .08); background:linear-gradient(160deg, oklch(1 0 0 / .08), oklch(1 0 0 / .02)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .14) }
  html.night .hub-theme .ht-knob{ background:linear-gradient(160deg, oklch(1 0 0 / .18), oklch(1 0 0 / .05)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .22) }
  @media (prefers-reduced-motion:reduce){ .hub-theme .ht-knob{ transition:none } }

  /* ======== v0 — COHÉRENCE GLOBALE : tout état actif/sélectionné = pill verre + anneau oxblood ========
     Fin du « bloc noir plein » (ancienne DA) sur toggle période, filtres, sélecteurs de statut, onglets. */
  .ql-st.on, .pbn-i[aria-current="true"], .fbtn[aria-pressed="true"]{
    background:linear-gradient(160deg, oklch(1 0 0 / .5), oklch(1 0 0 / .12)) !important;
    color:var(--ink) !important; border-color:transparent !important;
    box-shadow:inset 0 0 0 1.5px var(--oxblood), var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .5), var(--sh-1) !important }
  html.night .ql-st.on, html.night .pbn-i[aria-current="true"], html.night .fbtn[aria-pressed="true"]{
    background:linear-gradient(160deg, oklch(1 0 0 / .1), oklch(1 0 0 / .025)) !important; color:var(--ink) !important }
  /* toggle période (Semaine/Mois) : le thumb devient un pill verre à anneau oxblood, texte encre */
  .seg-thumb{ background:linear-gradient(160deg, oklch(1 0 0 / .55), oklch(1 0 0 / .14));
    box-shadow:inset 0 0 0 1.5px var(--oxblood), var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .6), var(--sh-1) }
  html.night .seg-thumb{ background:linear-gradient(160deg, oklch(1 0 0 / .12), oklch(1 0 0 / .03)) }
  .seg-b[aria-selected="true"]{ color:var(--ink) }
  .seg{ background:linear-gradient(160deg, oklch(1 0 0 / .4), oklch(1 0 0 / .08)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .4) }
  html.night .seg{ background:linear-gradient(160deg, oklch(1 0 0 / .07), oklch(1 0 0 / .02)) }

  /* v0 — inputs = matière verre légère (fin du champ plat papier) */
  .rc-field input, .ev-note textarea, .rep-edit textarea, .cfield input, .pm-f input, .pm-f select, .pm-f textarea,
  .tipsearch input, .rc-f select, .rc-f input, .pb-f input[type=text], .me-input input{
    background:linear-gradient(160deg, oklch(1 0 0 / .42), oklch(1 0 0 / .08)) !important;
    border:1px solid oklch(0.2 0.002 106.6 / .1) !important;
    box-shadow:var(--glass-line), inset 0 1px 2px oklch(0.2 0.002 106.6 / .05) }
  html.night .rc-field input, html.night .ev-note textarea, html.night .rep-edit textarea, html.night .cfield input,
  html.night .pm-f input, html.night .pm-f select, html.night .pm-f textarea, html.night .tipsearch input,
  html.night .rc-f select, html.night .rc-f input, html.night .pb-f input[type=text], html.night .me-input input{
    background:linear-gradient(160deg, oklch(1 0 0 / .07), oklch(1 0 0 / .02)) !important;
    border-color:oklch(1 0 0 / .1) !important }
  .cmdk{ position:fixed; inset:0; z-index:160; display:grid; place-items:start center; padding:12vh 16px 16px} .cmdk[hidden]{ display:none }
  .cmdk-scrim{ position:absolute; inset:0; background:rgba(22,22,21,.42); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:fade 0.2s }
  .cmdk-panel{ position:relative; width:100%; max-width:580px; background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--sh-3); overflow:hidden; animation:cmdkin 0.2s var(--e-out) }
  @keyframes cmdkin{ from{ opacity:0; transform:translateY(-10px) scale(.98) } to{ opacity:1; transform:none } }
  .cmdk-in{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line) } .cmdk-in > .ic{ width:18px; height:18px; color:var(--grey); flex:none }
  .cmdk-in input{ flex:1; border:none; background:none; font-family:var(--sans); font-size:var(--fs-4); color:var(--ink); outline:none; min-width:0 } .cmdk-in input::placeholder{ color:var(--grey-2) }
  .cmdk-in kbd{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:4px 8px; flex:none }
  .cmdk-list{ max-height:54vh; overflow-y:auto; padding:8px; scrollbar-width:thin }
  .cmdk-i{ display:flex; align-items:center; gap:12px; padding:12px 12px; border-radius:var(--r-sm); cursor:pointer }
  .cmdk-i[aria-selected="true"]{ background:var(--paper-2) }
  .cmdk-i .ci{ width:28px; height:28px; border-radius:var(--r-sm); display:grid; place-items:center; flex:none; background:var(--paper-2); color:var(--oxblood) } .cmdk-i .ci .ic{ width:14px; height:14px }
  .cmdk-i .cdot2{ width:28px; height:28px; border-radius:var(--r-sm); display:grid; place-items:center; flex:none; background:var(--paper-2) } .cmdk-i .cdot2 i{ width:9px; height:9px; border-radius:var(--r-pill)}
  .cmdk-i .cmain{ flex:1; min-width:0 } .cmdk-i .ctitle{ font-weight:500; font-size:var(--fs-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .cmdk-i .csub{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .cmdk-i .cgo{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; text-transform:uppercase; color:var(--grey-2); flex:none } .cmdk-i[aria-selected="true"] .cgo{ color:var(--oxblood) }
  .cmdk-empty{ padding:28px; text-align:center; color:var(--grey); font-weight:300 }
  .cmdk-hint{ display:flex; gap:16px; padding:8px 16px; border-top:1px solid var(--line); font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.04em; color:var(--grey-2) }
  @media (max-width:900px){ .cmdk{ padding:8vh 12px 12px} .cmdk-hint{ display:none } }
  @media (prefers-reduced-motion:reduce){ .cmdk-panel,.cmdk-scrim{ animation:none } }

  /* ============ v5 — couche MOTION éditoriale (enhancement progressif) ============ */
  /* transition de vue : crossfade doux (le reveal gère le mouvement vertical) */
  .view.on{ animation:vfade 0.45s var(--e-out) }
  @keyframes vfade{ from{opacity:0; transform:translateY(9px) scale(.986); filter:blur(3px)} to{opacity:1; transform:none; filter:none} }

  /* reveal au scroll (activé seulement si .anim sur <html> — sans JS tout reste visible) */
  .anim .reveal{ opacity:0; transform:translateY(16px); will-change:opacity,transform }
  .anim .reveal.in{ opacity:1; transform:none; transition:opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out); transition-delay:calc(var(--ri,0) * 55ms) }
  .anim .reveal.done{ will-change:auto }

  /* elevation ramp au hover — GPU only, jamais de reflow */
  .card,.tier,.tip,.finfo,.roicalc,.bstack,.formula{ transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out) }
  @media (hover:hover){
    .card:hover,.tip:hover,.roicalc:hover{ transform:translateY(-3px); box-shadow:var(--sh-2) }
    .tier:hover{ transform:translateY(-4px); box-shadow:var(--sh-2) } .tier.reco:hover{ box-shadow:var(--sh-3) }
    .lstep{ transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out) } .lstep:hover{ transform:translateX(4px); box-shadow:var(--sh-1) }
    .obj{ transition:box-shadow var(--t-mid) var(--e-out) } .obj:hover{ box-shadow:var(--sh-1) }
  }

  /* press feedback — scale subtil (hors boutons magnétiques qui pilotent leur transform) */
  .pipe button,.fbtn,.pconf,.nav-i,.tab-i,.sheet-row,.mini-i,.lm-r,.pbn-i,.seg-b,.stepper button,.cl-pin,.addcta,.backbtn{ transition:transform var(--t-fast) var(--e-spring), background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast) }
  .pipe button:active,.fbtn:active,.mini-i:active,.lm-r:active,.pbn-i:active,.stepper button:active,.cl-pin:active,.addcta:active,.backbtn:active,.nav-i:active,.sheet-row:active{ transform:scale(.96) }
  .pcard:active,.cl-row:active{ transform:scale(.992) }

  /* magnétisme des CTA primaires (piloté en JS, gated pointer:fine + !reduced) */
  .magnetic{ transition:transform var(--t-slow) var(--e-spring), box-shadow var(--t-mid) var(--e-out), opacity var(--t-fast) }
  .magnetic.pulling{ transition:transform 0.12s linear, box-shadow var(--t-mid) var(--e-out) }

  /* donut ring : léger overshoot déjà présent ; statusdot pop quand il change */
  .statusdot{ transition:background var(--t-fast) var(--e-out) }

  /* orchestration d'entrée de la sidebar au 1er paint */
  .anim .side .brand,.anim .side .navgroup{ opacity:0; transform:translateX(-8px); animation:sideIn 0.45s var(--e-out) forwards; animation-delay:calc(var(--si,0) * 60ms) }
  @keyframes sideIn{ to{ opacity:1; transform:none } }

  /* délice — flourish au changement de statut */
  .statusdot{ position:relative }
  .statusdot.s-todo{ color:var(--grey-2) } .statusdot.s-hook{ color:var(--btp) } .statusdot.s-convo{ color:var(--ochre) } .statusdot.s-rdv{ color:var(--immo) } .statusdot.s-won{ color:var(--pine) } .statusdot.s-lost{ color:var(--oxblood) }
  .cl-row.just .statusdot{ animation:dotpop 0.45s var(--e-spring) }
  .cl-row.just .statusdot::after{ content:''; position:absolute; inset:-3px; border-radius:var(--r-pill); border:2px solid currentColor; animation:dotring 0.45s var(--e-out) forwards; pointer-events:none }
  @keyframes dotpop{ 0%{transform:scale(1)} 45%{transform:scale(1.6)} 100%{transform:scale(1)} }
  @keyframes dotring{ from{ transform:scale(.5); opacity:.6 } to{ transform:scale(2.6); opacity:0 } }
  /* délice — flash discret des KPI qui bougent */
  .kpi.flash{ animation:kpiflash 0.45s var(--e-out) }
  @keyframes kpiflash{ 0%{ box-shadow:0 0 0 0 rgba(123,45,38,.22) } 100%{ box-shadow:0 0 0 0 rgba(123,45,38,0) } }
  .kpi.ink.flash{ animation:kpiflashInk 0.45s var(--e-out) } @keyframes kpiflashInk{ 0%{ box-shadow:0 0 0 3px rgba(232,180,172,.3) } 100%{ box-shadow:0 0 0 3px rgba(232,180,172,0) } }
  .fStatLab-pop{ display:inline-block; animation:dotpop 0.45s var(--e-spring) }
  /* délice — empty state "tout est traité" respire */
  .nextcard.empty .nl .ic{ animation:breathe 0.45s ease-in-out infinite }
  @keyframes breathe{ 0%,100%{ transform:scale(1); opacity:.7 } 50%{ transform:scale(1.12); opacity:1 } }

  @media (prefers-reduced-motion:reduce){
    .cl-row.just .statusdot,.cl-row.just .statusdot::after,.kpi.flash,.kpi.ink.flash,.fStatLab-pop,.nextcard.empty .nl .ic{ animation:none }
    .view.on{ animation:none }
    .anim .reveal,.anim .reveal.in{ opacity:1 !important; transform:none !important; transition:none !important }
    .anim .side .brand,.anim .side .navgroup{ opacity:1; transform:none; animation:none }
    .card:hover,.tier:hover,.tip:hover,.roicalc:hover,.lstep:hover{ transform:none }
    .magnetic,.magnetic.pulling{ transition:none }
    .pipe button:active,.fbtn:active,.mini-i:active,.pcard:active,.cl-row:active,.nav-i:active{ transform:none }
  }

  /* ======== AROZ paper-glass — matière liquid glass au papier (fin de feuille : gagne la cascade) ======== */
  .ck-card,.strip-card,.card,.tier,.kpi,.pcard,.volc,.ob-card,.pm-card,.lm-card,.cmdk-panel,.pbuild{
    background-image:var(--glass-mat);
    box-shadow:var(--glass-sh),var(--glass-hi),var(--glass-line);
    border:0!important; border-radius:var(--r-lg);
    transition:box-shadow 0.45s var(--e-out),transform 0.45s var(--e-spring);
  }
  .ck-card,.strip-card,.card{ position:relative; overflow:hidden; isolation:isolate }
  .ck-card::after,.strip-card::after,.card::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,-30%),rgba(255,255,255,.5),transparent 55%);
    opacity:0; transition:opacity 0.45s var(--e-out); mix-blend-mode:soft-light;
  }
  .ck-card.spec-on::after,.strip-card.spec-on::after,.card.spec-on::after{ opacity:1 }
  .ck-card > *,.strip-card > *,.card > *{ position:relative; z-index:1 }
  @media (hover:hover) and (pointer:fine){
    .ck-card:hover,.strip-card:hover,.card:hover{ transform:translateY(-3px); box-shadow:var(--glass-sh-hi),var(--glass-hi),var(--glass-line) }
  }
  .ck-card:active,.strip-card:active{ transform:scale(.992) }
  @media (prefers-reduced-motion:reduce){
    .ck-card,.strip-card,.card,.tier,.kpi,.pcard,.volc{ transition:none }
    .ck-card::after,.strip-card::after,.card::after{ display:none }
    .ck-card:hover,.strip-card:hover,.card:hover{ transform:none; box-shadow:var(--glass-sh),var(--glass-hi),var(--glass-line) }
  }
  /* gel-press — feedback tactile ressort (spring-back), :where() = 0 spécificité, ne clobbe pas les transitions couleur */
  :where(.ctrl,.addcta,.cl-chip,.cl-fiche,.copybtn,.ql-st,.seg-b,.pipe button,.stepper button,.pm-save,.lm-r,.cl-pin,.pcard,.go,.backbtn,.pm-regen,.pm-cancel,.tab-i){ transition:transform 0.2s var(--e-spring) }
  @media (hover:hover) and (pointer:fine){
    .ctrl:active,.addcta:active,.cl-chip:active,.cl-fiche:active,.copybtn:active,.ql-st:active,.seg-b:active,.pipe button:active,.stepper button:active,.pm-save:active,.lm-r:active,.cl-pin:active,.pcard:active,.go:active,.backbtn:active,.tab-i:active{ transform:scale(.95) }
  }
  @media (prefers-reduced-motion:reduce){
    :where(.ctrl,.addcta,.cl-chip,.cl-fiche,.copybtn,.ql-st,.seg-b,.pipe button,.stepper button,.pm-save,.lm-r,.cl-pin,.pcard,.go,.backbtn,.tab-i){ transition:none }
    .ctrl:active,.addcta:active,.cl-chip:active,.cl-fiche:active,.copybtn:active,.ql-st:active,.seg-b:active,.pipe button:active,.stepper button:active,.pm-save:active,.lm-r:active,.cl-pin:active,.pcard:active,.go:active,.backbtn:active,.tab-i:active{ transform:none }
  }

  /* ======== v11 TOOLS — nudges · feed · réglages · densité ======== */
  .nudgebar{ display:flex; align-items:center; gap:16px; margin:0 0 24px; padding:12px 20px; border-radius:var(--r); background:var(--oxblood-soft); border:1px solid rgba(123,45,38,.22) }
  .nudge-c{ flex:none; min-width:30px; height:30px; padding:0 8px; display:grid; place-items:center; background:var(--oxblood); color:oklch(1 0 0); font-family:var(--mono); font-weight:700; font-size:var(--fs-3); border-radius:var(--r-sm)}
  .nudge-tx{ flex:1; min-width:0; font-weight:300; font-size:var(--fs-3); color:var(--ink-2) } .nudge-tx b{ font-weight:600; color:var(--ink) }
  .nudge-tag{ font-family:var(--mono); font-size:var(--fs-1); font-weight:700; padding:4px 8px; border-radius:var(--r-sm); letter-spacing:.05em; white-space:nowrap }
  .nudge-tag.j3{ background:color-mix(in oklab, var(--btp) 16%, transparent); color:var(--btp-chip) } .nudge-tag.j7{ background:color-mix(in oklab, var(--oxblood) 14%, transparent); color:var(--oxblood) }
  .nudge-go{ flex:none; appearance:none; cursor:pointer; font-family:var(--mono); font-size:var(--fs-1); padding:8px 16px; border-radius:var(--r-sm); border:1px solid var(--ink); background:var(--ink); color:var(--paper); display:inline-flex; align-items:center; gap:8px; min-height:40px } .nudge-go .ic{ width:13px; height:13px } .nudge-go:hover{ opacity:.9 } .nudge-go:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  @media (max-width:560px){ .nudgebar{ flex-wrap:wrap } .nudge-tx{ flex-basis:100%; order:3 } }
  .nav-i .rb{ margin-left:auto; font-family:var(--mono); font-size:var(--fs-1); font-weight:700; background:var(--oxblood); color:oklch(1 0 0); min-width:16px; height:16px; padding:0 4px; border-radius:var(--r-sm); display:grid; place-items:center; line-height:1.1}
  .nav-i .rb:not([hidden]) ~ .cnt{ margin-left:8px}
  .nav-i .rb:empty{ display:none }   /* v15 fix : badge sans compte ne s'affiche pas en bloc oxblood vide */
  .feed{ display:flex; flex-direction:column; margin-top:4px}
  .fd-row{ display:flex; align-items:center; gap:12px; padding:8px 4px; border-bottom:1px solid var(--line) } .fd-row:last-child{ border-bottom:none }
  .fd-dot{ width:8px; height:8px; border-radius:var(--r-pill); flex:none }
  .fd-ic{ width:24px; height:24px; flex:none; display:grid; place-items:center; color:var(--grey); background:var(--paper-2); border-radius:var(--r-sm)} .fd-ic .ic{ width:13px; height:13px }
  .fd-tx{ flex:1; min-width:0; font-weight:300; font-size:var(--fs-3); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .fd-tx b{ font-weight:600; color:var(--ink) }
  .fd-t{ flex:none; font-family:var(--mono); font-size:var(--fs-1); color:var(--grey) }
  .set-trigger{ margin-top:8px}
  /* réglages — panneau + interrupteurs */
  .set-card{ max-width:468px }
  .set-head{ display:flex; align-items:center; justify-content:space-between }
  .set-x{ appearance:none; cursor:pointer; background:none; border:none; color:var(--grey); width:34px; height:34px; display:grid; place-items:center; border-radius:var(--r-sm)} .set-x .ic{ width:18px; height:18px } .set-x:hover{ background:var(--paper-2); color:var(--ink) } .set-x:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .setlist{ display:flex; flex-direction:column; gap:4px; margin-top:20px}
  .setrow{ display:flex; align-items:center; gap:12px; padding:12px 12px; border-radius:var(--r-sm); cursor:pointer; transition:background 0.12s } .setrow:hover{ background:var(--paper-2) }
  .set-ic{ flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:var(--r-sm); background:var(--paper-2); color:var(--oxblood) } .set-ic .ic{ width:18px; height:18px }
  .set-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px} .set-tx b{ font-weight:500; font-size:var(--fs-3)} .set-tx i{ font-style:normal; font-size:var(--fs-2); color:var(--grey); font-weight:300; line-height:1.4}
  .switch{ flex:none; position:relative; width:48px; height:28px } .switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer }
  .sw-t{ position:absolute; inset:0; background:var(--line-2); border-radius:var(--r-pill); transition:background 0.2s } .sw-t::after{ content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:var(--r-pill); background:oklch(1 0 0); box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform 0.2s cubic-bezier(.4,0,.1,1) }
  .switch input:checked + .sw-t{ background:var(--pine) } .switch input:checked + .sw-t::after{ transform:translateX(20px) }
  .switch input:focus-visible + .sw-t{ outline:2px solid var(--oxblood); outline-offset:2px }
  .set-foot{ margin-top:20px; font-size:var(--fs-2); color:var(--grey); font-weight:300 }
  /* densité compacte */
  html.dense .ck-card,html.dense .strip-card,html.dense .card,html.dense .tier,html.dense .pbuild{ padding-top:16px; padding-bottom:16px}
  html.dense .block{ margin-top:28px} html.dense .cockpit{ gap:12px} html.dense .dash-strip{ gap:12px} html.dense .fd-row{ padding:8px 4px} html.dense .nudgebar{ margin-bottom:16px; padding:12px 16px}

  /* ======== v11 — MODE NUIT (papier mat le jour · matière lumineuse la nuit) ======== */
  html.night{
    /* ===== DA OKLCH — NUIT (dark). Override du :root. ===== */
    --paper:oklch(0.226 0.004 106.7);  /* · */  --paper-2:oklch(0.26 0.004 106.7); /* · */  --panel:oklch(0.24 0.004 84.6); /* · */
    --glass-fill:oklch(0.19 0.004 106.8);  /* plaque verre nuit · */  --glass-fill-deep:oklch(0.163 0.002 106.6);
    --ink:oklch(0.942 0.005 106.5);    /* · */  --ink-2:oklch(0.853 0.008 106.6); /* oklch(0.853 0.008 106.6) */  --grey:oklch(0.687 0.01 106.7); /* · */  --grey-2:oklch(0.768 0.01 106.6); /* · */
    --line:oklch(0.942 0.005 106.5 / .12); --line-2:oklch(0.942 0.005 106.5 / .24);
    --oxblood:oklch(0.620 0.110 28); /* · */  --oxblood-soft:oklch(0.620 0.110 28 / .13);
    --pine:oklch(0.767 0.09 156.7); --ochre:oklch(0.745 0.118 77.1);
    --btp:oklch(0.72 0.116 253.6); --gastro:oklch(0.753 0.125 44.9); --vin:oklch(0.694 0.13 25.6); --immo:oklch(0.765 0.121 165.3);
    --immoprestige:oklch(0.726 0.138 292.2); --hotellerie:oklch(0.761 0.094 205); --ecommerce:oklch(0.807 0.136 126.6); --auto:oklch(0.723 0.035 262.6); --beaute:oklch(0.745 0.122 353.8); --gc:oklch(0.829 0.116 82.7);
    /* v19 — pastilles niche en nuit : le token clair passe déjà AA sur tint sombre → alias direct */
    --btp-chip:var(--btp); --gastro-chip:var(--gastro); --vin-chip:var(--vin); --immo-chip:var(--immo); --immoprestige-chip:var(--immoprestige); --hotellerie-chip:var(--hotellerie); --ecommerce-chip:var(--ecommerce); --auto-chip:var(--auto); --beaute-chip:var(--beaute); --gc-chip:var(--gc); --pine-chip:var(--pine); --ochre-chip:var(--ochre);
    --glass-mat:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.02) 44%,rgba(255,255,255,0));
    --glass-sh:0 1px 2px rgba(0,0,0,.5),0 10px 30px -10px rgba(0,0,0,.65);
    --glass-sh-hi:0 2px 6px rgba(0,0,0,.55),0 22px 48px -14px rgba(0,0,0,.75);
    --glass-hi:inset 0 1px 0 rgba(255,255,255,.16);
    --glass-line:inset 0 0 0 1px rgba(236,236,232,.10);
  }
  html.night body{ background:var(--glass-fill); color:var(--ink) }
  /* H1 — sidebar verre profond franc (nuit). Matière + edge-light, sans render en fond fantôme. */
  html.night .side{
    background:
      linear-gradient(180deg, oklch(1 0 0 / .12), oklch(1 0 0 / .03) 34%, transparent 72%),
      var(--glass-fill);
    border-right:1px solid oklch(1 0 0 / .07);
    box-shadow:
      inset -1px 0 0 oklch(1 0 0 / .12),
      inset 1px 0 0 oklch(1 0 0 / .05),
      inset 0 1px 0 oklch(1 0 0 / .16),
      6px 0 34px -20px oklch(0 0 0 / .8) }
  /* matière lumineuse : le sheen passe en screen (verre éclairé de nuit) */
  html.night .ck-card::after,html.night .strip-card::after,html.night .card::after{ background:radial-gradient(260px circle at var(--mx,50%) var(--my,-30%),rgba(255,255,255,.20),transparent 55%); mix-blend-mode:screen }
  /* cartes « sombres » (ROI ledger, colonne after) : rester des cartes contrastées, texte clair */
  html.night .led{ background:var(--glass-fill-deep); color:var(--ink) } html.night .led .res .k,html.night .led .pull b{ color:oklch(1 0 0) } html.night .led .lr .k{ color:var(--grey-2) }
  html.night .col.after{ background:var(--glass-fill-deep) } html.night .col.after .row b{ color:oklch(1 0 0) }
  html.night .nav-i[aria-current="true"]{ background:transparent; color:var(--ink) }
  html.night .copybtn,html.night .nudge-go,html.night .pm-save{ background:var(--ink); color:oklch(0.2 0.002 106.6); border-color:var(--ink) }  /* .ctrl.solid retiré : primaire cockpit = verre oxblood (D10) */

  /* ============================================================
     NAV SHELL v24 — PILL NAV ACTIVE (verre + liseré oxblood + bille).
     L'asset §3 « pill nav active » = damier baké → reconstruction CSS.
     DA : oxblood = liseré SEUL (jamais un fill) ; le fill est du verre neutre.
     ============================================================ */
  .nav-i[aria-current="true"]{ position:relative; isolation:isolate; color:var(--ink); font-weight:500;
    background-color:oklch(0.99 0.004 106 / .5); background-image:var(--glass-mat);
    box-shadow:inset 3px 0 0 var(--oxblood), inset 0 0 0 1px oklch(0.409 0.11 28 / .16), var(--glass-hi), var(--glass-line);
    -webkit-backdrop-filter:blur(7px) saturate(1.06); backdrop-filter:blur(7px) saturate(1.06) }
  html.night .nav-i[aria-current="true"]{ background-color:oklch(0.26 0.006 106 / .52); background-image:var(--glass-mat);
    box-shadow:inset 3px 0 0 var(--oxblood), inset 0 0 0 1px oklch(0.620 0.110 28 / .2), var(--glass-hi), var(--glass-line) }
  /* bille signature — bead verre en haut-droite, offset constant (DA) */
  .nav-i[aria-current="true"]::after{ content:""; position:absolute; top:8px; right:10px; width:8px; height:8px; border-radius:var(--r-pill);
    background:var(--av-bead); pointer-events:none; z-index:2 }
  .nav-i[aria-current="true"].big{ font-weight:600 }
  .nav-i[aria-current="true"] .cnt{ margin-right:12px}   /* laisse la place à la bille */
  @media (prefers-reduced-motion:no-preference){ .nav-i[aria-current="true"]{ transition:box-shadow 0.32s var(--e-out), background-color 0.32s var(--e-out) } }
  html.night .nudge-c,html.night .nav-i .rb,html.night .rbadge,html.night .pb-reco{ color:oklch(0.191 0.002 106.6) }
  html.night .sw-t::after{ background:var(--ink) }
  html.night .celebrate .cwin{ color:var(--ink) }

  /* ======== v13 — KIT VISUEL : bille signature · moments · texture ambient ======== */
  /* Bille signature réutilisable (verre clair, haut-droite, offset constant). Texte reste en code. */
  :root{
    --av-bead: radial-gradient(circle at 34% 30%, rgba(255,255,255,.96), rgba(255,255,255,.4) 36%, rgba(198,204,214,.12) 62%, transparent 72%);
    --av-bead-size:14px;
  }
  .av-bead{ position:relative }
  .av-bead::after{ content:""; position:absolute; top:10px; right:10px; width:var(--av-bead-size); height:var(--av-bead-size); border-radius:var(--r-pill);
    background:var(--av-bead); box-shadow:0 1px 3px rgba(0,0,0,.22), inset 0 1px 1px rgba(255,255,255,.9);
    opacity:.85; pointer-events:none; transition:transform 0.32s var(--e-spring), opacity 0.32s var(--e-out) }
  .av-bead:hover::after{ transform:scale(1.14); opacity:1 }
  @media (prefers-reduced-motion:reduce){ .av-bead::after{ transition:none } }

  /* Texture ambient — couche de fond app. Jour = blob clair très discret · Nuit = blob sombre lumineux. */
  body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:url("../assets/concepts/ambient-wallpaper.light.webp") right -6vw top -4vh / auto 120vh no-repeat;
    opacity:.09 }
  html.night body::before{ background-image:url("../assets/concepts/ambient-wallpaper.dark.webp"); opacity:.15 }
  @media (prefers-reduced-motion:no-preference){ body::before{ transition:opacity 0.45s var(--e-out) } }

  /* Célébration « Signé » — art anneau + bille + arc oxblood derrière la carte (bg d'un élément caché = fetch différé). */
  .celebrate .cel-art{ display:none; position:absolute; left:50%; top:50%; width:min(72vw,440px); aspect-ratio:1500/837;
    transform:translate(-50%,-60%) scale(.92); opacity:0; pointer-events:none;
    background:url("../assets/concepts/gamif-celebration.dark.webp") center/contain no-repeat;
    filter:drop-shadow(0 20px 60px rgba(0,0,0,.5)) }
  .celebrate.on .cel-art{ animation:celArt 0.45s var(--e-out) both }
  @keyframes celArt{ 0%{opacity:0;transform:translate(-50%,-60%) scale(.72)} 55%{opacity:.92} 100%{opacity:.82;transform:translate(-50%,-60%) scale(1)} }
  @media (prefers-reduced-motion:reduce){ .celebrate.on .cel-art{ animation:none; opacity:.8; transform:translate(-50%,-60%) scale(1) } }

  /* Marque AV en sidebar (jour = logo clair · nuit = logo sombre). Texte inchangé. */
  .brand{ display:flex; align-items:center; gap:12px}
  .brand .brand-mark{ width:36px; height:36px; flex:none; border-radius:var(--r-sm);
    background:url("../assets/concepts/brand-logo-av.light.webp") center/cover no-repeat;
    box-shadow:var(--glass-sh), var(--glass-line); transition:transform 0.32s var(--e-spring) }
  .brand .brand-mark:hover{ transform:scale(1.05) }
  html.night .brand .brand-mark{ background-image:url("../assets/concepts/brand-logo-av.dark.webp") }
  .brand .brand-txt{ min-width:0 }
  @media (prefers-reduced-motion:reduce){ .brand .brand-mark{ transition:none } }

  /* ======== PHASE 0 — CÂBLAGE COMPOSANTS (matière verre du kit sur les vrais modules) ========
     Principe : NUIT = plaque verre .dark.webp posée en fond (plaques quasi-noires → texte code
     clair par-dessus reste lisible, pas de scrim) · JOUR = plaque papier CSS conservée (kit ~90%
     dark-only, jamais repeint en noir, cf. CABLAGE §4). Art baké (bille/texte) = illustration
     dédiée, jamais derrière du texte code redondant. Bille = token .av-bead posé en classe.       */

  /* — helper : fond plaque verre nuit (cover, texte par-dessus) — */
  html.night .cl-row, html.night .pcard, html.night .move, html.night .cmdk-panel,
  html.night .roicalc, html.night .fhead, html.night .nextcard, html.night .feed{
    background-repeat:no-repeat; background-position:center; background-size:cover;
    background-blend-mode:normal }

  /* NAV / SHELL */
  /* H1 — le render nav-sidebar.dark reste north-star (objet-rail 4 slots, non tuilable → jamais étiré
     en fond). La matière verre franc de .side (plus haut) porte l'effet. Edge-light droit renforcé. */
  .side{ position:relative }
  .side::after{ content:""; position:absolute; top:0; bottom:0; right:0; width:1px; z-index:0; pointer-events:none;
    background:linear-gradient(180deg, oklch(1 0 0 / .5), oklch(1 0 0 / .06) 50%, oklch(1 0 0 / .18)) }
  html.night .side::after{ background:linear-gradient(180deg, oklch(1 0 0 / .16), transparent 45%, oklch(1 0 0 / .06)) }
  .side > *{ position:relative; z-index:1 }
  html.night .cmdk-panel{ background-color:var(--glass-fill); background-image:url("../assets/concepts/nav-cmdk.dark.webp") }
  html.night label[for="setNight"] .sw-t{ background-image:url("../assets/concepts/nav-toggle-daynight.dark.webp"); background-size:cover; background-position:center }

  /* PIPELINE — carte prospect (clean plate) + bille signature */
  /* PATTERN GAGNANT v13 : la plaque verre EST la surface. Image sur ::before (z-index:-1)
     pour ne PAS filtrer le texte ; brightness remonte le verre quasi-noir → il DOMINE la carte. */
  /* v15 : pcard = carte verre CSS PROPRE (l'ancienne plaque pipeline-pcard.dark = plateau à 4 slots qui barrait le texte) */
  html.night .pcard, html.night .cl-row{ position:relative; isolation:isolate; background-color:var(--glass-fill); background-image:none }
  html.night .pcard::before, html.night .cl-row::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
    background:linear-gradient(158deg, oklch(1 0 0 / .09), oklch(1 0 0 / .02) 50%, transparent 82%); box-shadow:inset 0 1px 0 oklch(1 0 0 / .14) }
  /* rail statut pipeline — STEPPER VERRE LIVE (v15 : reconstruit d'après pipeline-rail.dark, texte en code, compte réel, clic = filtre) */
  .pb-rail{ grid-column:1/-1; margin:0 0 12px; padding:16px 20px 12px; border-radius:var(--r); position:relative; isolation:isolate;
    background:var(--glass-fill); box-shadow:var(--glass-line), var(--glass-sh); display:block }
  html:not(.night) .pb-rail{ background:var(--panel) }
  .pb-rail .rail-track{ display:flex; align-items:flex-start; gap:0}
  .rail-node{ appearance:none; border:none; background:none; cursor:pointer; flex:1 1 0; min-width:0; color:var(--ink);
    display:flex; flex-direction:column; align-items:center; gap:8px; padding:4px 4px 4px; position:relative }
  .rail-node:not(:first-child)::before{ content:""; position:absolute; left:-50%; right:50%; top:24px; height:1px; background:var(--line-2); z-index:0 }
  .rn-chip{ width:44px; height:44px; border-radius:var(--r-sm); display:grid; place-items:center; position:relative; z-index:1;
    background:linear-gradient(160deg, oklch(1 0 0 / .10), oklch(1 0 0 / .015)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .2);
    font-family:var(--mono); font-size:var(--fs-3); font-weight:500; letter-spacing:-.02em;
    transition:transform 0.32s var(--e-spring), box-shadow 0.32s var(--e-out) }
  html:not(.night) .rn-chip{ background:linear-gradient(160deg, oklch(1 0 0 / .7), oklch(1 0 0 / .25)) }
  .rn-lab{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; color:var(--grey); white-space:nowrap }
  .rail-node.empty{ opacity:.45 }
  .rail-node:hover .rn-chip{ transform:translateY(-2px); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .28), var(--glass-sh) }
  /* nœud focalisé (poids du pipeline) ou filtre actif : anneau oxblood + bille signature */
  .rail-node.focus .rn-chip, .rail-node.on .rn-chip{ box-shadow:inset 0 0 0 1.5px var(--oxblood), var(--glass-line); transform:translateY(-2px) }
  .rail-node.focus .rn-lab, .rail-node.on .rn-lab{ color:var(--oxblood) }
  .rail-node.focus .rn-chip::after, .rail-node.on .rn-chip::after{ content:""; position:absolute; top:-4px; right:-4px; width:11px; height:11px; border-radius:var(--r-pill);
    background:var(--av-bead); box-shadow:0 1px 3px oklch(0 0 0 / .3), inset 0 1px 1px oklch(1 0 0 / .9) }
  .rail-node:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px; border-radius:var(--r-sm)}
  .rail-lost{ display:flex; justify-content:flex-end; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line) }
  .rail-lost .rail-node{ flex:0 0 auto; flex-direction:row; gap:12px; align-items:center }
  .rail-lost .rn-chip{ width:32px; height:32px; font-size:var(--fs-2); background:linear-gradient(160deg, oklch(1 0 0 / .05), transparent) }
  @media (prefers-reduced-motion:reduce){ .rn-chip{ transition:none } }
  @media (max-width:680px){ .pb-rail{ padding:12px 12px 12px} .rn-lab{ font-size:var(--fs-1)} .rn-chip{ width:38px; height:38px } }

  /* FICHE — en-tête prospect + sortie message (clean plates) */
  html.night .fhead{ background-color:var(--glass-fill); background-image:url("../assets/concepts/fiche-prospect.dark.webp"); background-position:center top; padding:20px; border-radius:var(--r)}
  html.night .move{ background-color:var(--glass-fill); background-image:url("../assets/concepts/fiche-message.dark.webp") }
  html.night .move .mh{ background:rgba(20,20,19,.55) }

  /* FUNNEL — illustration chemins au-dessus des 3 tiers (art, tel quel) */
  .funnel-chemins-art{ width:100%; aspect-ratio:1500/560; margin:4px 0 16px; border-radius:var(--r);
    background:url("../assets/concepts/funnel-chemins.dark.webp") center/cover no-repeat; display:none }
  html.night .funnel-chemins-art{ display:block }

  /* ROI — bloc récurrent en fond de tableau (nuit) */
  html.night .roicalc{ background-color:var(--glass-fill); background-image:url("../assets/concepts/roi-recurrent.dark.webp") }

  /* GAMIF — feed en fond plaque (nuit) */
  /* D9 — feed reconstruit : la carte #feedCard EST le verre ; les lignes live (.fd-row) en code par-dessus.
     Plus d'image gamif-feed baké (Equipe / A-new document) en fond → texte jamais baké, données live. */
  html.night .feed{ background:transparent; border-radius:var(--r); padding:4px 0 0}

  /* NEXT ACTION — carte prochaine action : v19 dé-smearé (verre CSS live, plus de webp cover derrière le texte) */
  html.night .nextcard{ position:relative; isolation:isolate; background-color:var(--glass-fill); background-image:none }
  html.night .nextcard::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
    background:linear-gradient(158deg, oklch(1 0 0 / .09), oklch(1 0 0 / .02) 50%, transparent 82%); box-shadow:inset 0 1px 0 oklch(1 0 0 / .14) }

  /* ELITE — panneau admin = plaque briefing (décision opérateur) + scrim pour lisibilité du texte live */
  html.night .elite-card{ background-color:var(--glass-fill-deep);
    background-image:linear-gradient(oklch(0.15 0.003 106 / .80), oklch(0.15 0.003 106 / .90)), url("../assets/concepts/fiche-closer-briefing.dark.webp");
    background-size:cover; background-position:center top }
  html.night .elite-item{ background-color:var(--glass-fill); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .04) }
  /* verrou Direction (art) */
  .kit-verrou{ width:100%; max-width:340px; aspect-ratio:1200/670; margin:0 auto 14px;
    background:url("../assets/concepts/elite-verrou.dark.webp") center/contain no-repeat; display:none }
  html.night .kit-verrou{ display:block }
  /* badge « en attente » (art lozenge) */
  .kit-badge-attente{ width:120px; aspect-ratio:1/1; flex:none;
    background:url("../assets/concepts/elite-badge-attente.dark.webp") center/contain no-repeat; display:none }
  html.night .kit-badge-attente{ display:block }

  /* HERO Accueil — blob réfractif en backdrop du dash (nuit, discret, jamais sous du texte) */
  /* (retiré : blob brand-hero-accueil.dark en ::after du dash-top — décor flottant parasite en nuit, ne sert pas) */
  /* (KPI revenu nuit : plaque roi-kpi-ca retirée — flottait ; verre CSS uniforme) */

  /* NICHE — blueprint en-tête (art) au-dessus de la vue niche */
  /* v17 Étape 2 : bandeau blueprint dé-baké — remplacé par .bp-live (texte en code), l'image niche-blueprint.dark.webp reste la référence visuelle */

  /* FEEDBACK — divider verre réutilisable (art, bille + hairline oxblood) */
  .kit-divider{ height:26px; margin:20px 0; background:url("../assets/concepts/feedback-divider.dark.webp") center/contain no-repeat; opacity:.9; display:none }
  html.night .kit-divider{ display:block }
  /* banque « raisons de perte » — header plaque sur le lost modal */
  html.night #lostModal .lm-card{ background-color:var(--glass-fill); background-image:linear-gradient(rgba(20,20,19,.78),rgba(20,20,19,.9)), url("../assets/concepts/feedback-banque-non.dark.webp"); background-size:cover; background-position:center top }

  /* GAMIF — feed plaque (portrait → position haut) · streak & recap illustrations */
  html.night .feed{ background-position:center top }
  .kit-streak-art{ width:100%; aspect-ratio:1500/430; margin:0 0 12px; background:url("../assets/concepts/gamif-streak.light.webp") center/contain no-repeat; display:block; opacity:.95 }
  html.night .kit-streak-art{ filter:brightness(.9) }
  /* D8 — rapport reconstruit : carte verre + RDV/Signes/CA live en code. Plus d'image gamif-recap baké. */

  /* ROI — anneau jauge (light, jour ET nuit : asset clair posé en illustration) */
  .kit-jauge{ width:100%; max-width:260px; aspect-ratio:1200/670; margin:6px auto 2px; background:url("../assets/concepts/roi-jauge.light.webp") center/contain no-repeat }
  html.night .kit-jauge{ filter:brightness(.86) contrast(1.05) }

  /* ======== v14 — CÂBLAGE JOUR : plaques verre .light (le jour est le DÉFAUT) ========
     Même pattern A/BD que la nuit : l'art .light EST la surface, posé sur ::before (z-index:-1)
     pour ne pas filtrer le texte. Scopé html:not(.night) → la nuit (plaques .dark) reste intacte.
     Plaques claires → texte encre foncé reste lisible ; opacité modérée pour garder AA.            */
  html:not(.night) .pcard, html:not(.night) .cl-row, html:not(.night) .fhead,
  html:not(.night) .move, html:not(.night) .nextcard, html:not(.night) .cmdk-panel,
  html:not(.night) .ck-total{ position:relative; isolation:isolate }
  html:not(.night) .pcard::before, html:not(.night) .cl-row::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
    background:linear-gradient(158deg, oklch(1 0 0 / .55), oklch(1 0 0 / .06) 52%, transparent 82%); box-shadow:inset 0 1px 0 oklch(1 0 0 / .5) }
  html:not(.night) .fhead::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
    background:url("../assets/concepts/fiche-prospect.light.webp") center top/cover no-repeat; opacity:.42 }
  html:not(.night) .move::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
    background:url("../assets/concepts/fiche-message.light.webp") center/cover no-repeat; opacity:.4 }
  html:not(.night) .nextcard{ position:relative; isolation:isolate }
  html:not(.night) .nextcard::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
    background:linear-gradient(158deg, oklch(1 0 0 / .5), oklch(1 0 0 / .06) 55%, transparent); box-shadow:inset 0 1px 0 oklch(1 0 0 / .45) }
  html:not(.night) .cmdk-panel::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
    background:url("../assets/concepts/nav-cmdk.light.webp") center/cover no-repeat; opacity:.6 }
  /* (ck-total : plaque roi-kpi-ca retirée — plate-photo qui flottait ; passe au verre CSS uniforme comme les autres cartes) */
  /* (rail pipeline = stepper CSS live, cf. .pb-rail plus haut — plus d'image de fond) */

  /* ======== v15 — HUB (colonne gauche) + COCKPIT en matière verre : chaque surface sert une image ======== */
  /* — SIDEBAR : items nav en pastilles verre (états réels, réf. nav-buttons.dark/.active) — */
  .nav-i{ position:relative; isolation:isolate }
  .nav-i::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; opacity:0; pointer-events:none; transition:opacity 0.2s var(--e-out);
    background:linear-gradient(160deg, oklch(1 0 0 / .55), oklch(1 0 0 / .12)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .35) }
  html.night .nav-i::before{ background:linear-gradient(160deg, oklch(1 0 0 / .09), oklch(1 0 0 / .02)) }
  .nav-i:hover{ background:transparent }
  .nav-i:hover:not([aria-current="true"])::before{ opacity:1 }
  .nav-i:hover:not([aria-current="true"]){ transform:translateX(2px) }   /* micro-élévation hover (render nav-buttons hover) */
  /* actif = pill verre franc (::before visible) + anneau oxblood + top-highlight + ombre */
  .nav-i[aria-current="true"]::before{ opacity:1 }
  .nav-i[aria-current="true"]{ box-shadow:inset 0 0 0 1.5px var(--oxblood), var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .55), var(--sh-1) }
  html.night .nav-i[aria-current="true"]{ box-shadow:inset 0 0 0 1.5px var(--oxblood), var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .18), 0 6px 18px -10px oklch(0 0 0 / .7) }
  /* — badges de groupe (A/B/C/D) en verre — */
  .navgroup .gh .zn{ background:linear-gradient(160deg, oklch(1 0 0 / .16), oklch(1 0 0 / .03)); color:var(--ink); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .25) }
  html.night .navgroup .gh .zn{ background:linear-gradient(160deg, oklch(1 0 0 / .1), oklch(1 0 0 / .02)); color:var(--ink) }
  .navgroup .gh .zn.ox{ background:var(--oxblood); color:var(--paper); box-shadow:none }

  /* — COCKPIT : matière verre CSS edge-to-edge (les cartes data-viz n'ont pas d'asset dédié → pas de plateau-photo qui flotte) — */
  .ck-card, .strip-card{ position:relative; isolation:isolate }
  .ck-card::before,
  .strip-card::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
    background:
      linear-gradient(122deg, transparent 30%, oklch(1 0 0 / .7) 42%, oklch(1 0 0 / .28) 46%, oklch(1 0 0 / .05) 52%, transparent 62%),
      linear-gradient(158deg, oklch(1 0 0 / .5), oklch(1 0 0 / .05) 46%, transparent 78%);
    box-shadow:inset 0 1px 0 oklch(1 0 0 / .55) }
  html.night .ck-card::before,
  html.night .strip-card::before{ background:
      linear-gradient(122deg, transparent 28%, oklch(1 0 0 / .11) 44%, oklch(1 0 0 / .03) 49%, transparent 60%),
      linear-gradient(158deg, oklch(1 0 0 / .08), oklch(1 0 0 / .015) 46%, transparent 78%);
    box-shadow:inset 0 1px 0 oklch(1 0 0 / .12) }

  /* D1 — cockpit VERRE FRANC : pavé de verre MODELÉ (pas une boîte blanche plate).
     Dégradé haut-lumineux → bas-ombré + biseaux (top clair / bas foncé) + ombre de volume interne
     bas-droite + backdrop-blur. Jour : fond translucide neutre, jamais blanc opaque. */
  .ck-card, .strip-card, .card{
    background:
      linear-gradient(158deg, oklch(0.99 0.003 235 / .46), oklch(0.97 0.003 235 / .10) 44%, oklch(0.5 0.006 250 / .07) 100%),
      oklch(0.985 0.004 235 / .12);
    -webkit-backdrop-filter:blur(24px) saturate(1.22); backdrop-filter:blur(24px) saturate(1.22);
    box-shadow:
      inset 0 0 0 1px oklch(1 0 0 / .55),
      inset 0 1px 0 oklch(1 0 0 / .9),
      inset -1px -1px 0 oklch(0.2 0.002 106.6 / .08),
      inset -18px -26px 50px -34px oklch(0.28 0.02 250 / .3),
      0 1px 2px oklch(0.2 0.002 106.6 / .06),
      0 8px 20px -8px oklch(0.2 0.002 106.6 / .18),
      0 26px 60px -22px oklch(0.2 0.002 106.6 / .3) }
  html.night .ck-card, html.night .strip-card, html.night .card{
    background:
      linear-gradient(158deg, oklch(1 0 0 / .12), oklch(1 0 0 / .02) 42%, oklch(0 0 0 / .12) 100%),
      oklch(0.19 0.004 106.8 / .5);
    -webkit-backdrop-filter:blur(22px) saturate(1.1); backdrop-filter:blur(22px) saturate(1.1);
    box-shadow:
      inset 0 1px 0 oklch(1 0 0 / .18),
      inset 1px 0 0 oklch(1 0 0 / .06),
      inset -18px -24px 46px -34px oklch(0 0 0 / .55),
      var(--glass-sh-hi) }

  /* (TAUX DE SIGNATURE : gauge = data-viz live SVG, gardé propre ; roi-jauge non forcé en fond — plate-photo muddy) */

  /* — FEED / RAPPORT : jour = plaque claire subtile (la nuit garde gamif-feed / gamif-recap du v13, pas de doublon) — */
  #feedCard, #reportCard{ position:relative; isolation:isolate }
  html:not(.night) #feedCard::before,
  html:not(.night) #reportCard::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
    background:linear-gradient(158deg, oklch(1 0 0 / .5), oklch(1 0 0 / .05) 46%, transparent 78%); box-shadow:inset 0 1px 0 oklch(1 0 0 / .5) }
  /* (H1 — sidebar jour : edge-light CSS assumé ; render nav-sidebar.light = north-star, plus de ghost .04) */

  /* ======== PHASE 0 — FEATURES : splash · loading · scratch ======== */
  /* SPLASH — 1er paint, ~800 ms, fade-out, non bloquant, derrière reduced-motion */
  #avSplash{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; background:var(--bg);
    transition:opacity 0.45s var(--e-out) }
  #avSplash.gone{ opacity:0; pointer-events:none }
  /* splash art = cutout alpha (verre détouré) → flotte proprement sur var(--bg) en jour ET nuit (P5) */
  #avSplash .av-splash-art{ width:min(58vw,300px); aspect-ratio:1/1;
    background:url("../assets/concepts/ambient-splash.light.webp") center/contain no-repeat;
    animation:avSplashPulse 0.45s var(--e-out) both }
  @keyframes avSplashPulse{ 0%{opacity:0;transform:scale(.94)} 45%{opacity:1} 100%{opacity:1;transform:scale(1)} }
  @media (prefers-reduced-motion:reduce){ #avSplash{ transition:none } #avSplash .av-splash-art{ animation:none; opacity:1 } }

  /* LOADING — overlay pendant async réel (KV sync, génération message), cycle 5 images, jamais permanent */
  #avLoad{ position:fixed; inset:0; z-index:9500; display:grid; place-items:center; background:rgba(18,18,17,.60); backdrop-filter:blur(2px) }
  #avLoad[hidden]{ display:none }
  #avLoad .av-load-art{ width:132px; aspect-ratio:1/1; background:center/contain no-repeat }
  #avLoad .av-load-cap{ position:absolute; top:calc(50% + 92px); font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.2em; text-transform:uppercase; color:oklch(0.853 0.008 106.6) }
  @media (prefers-reduced-motion:reduce){ #avLoad{ backdrop-filter:none } }

  /* SCRATCH — « Dossier scellé » : gate physique drag-to-scratch avant la reco funnel */
  .scratch-wrap{ position:relative }
  .scratch-seal{ position:relative; border-radius:var(--r); overflow:hidden; min-height:180px; margin:8px 0 4px;
    background:var(--glass-fill) url("../assets/concepts/scratch-dossier.dark.webp") center/cover no-repeat; box-shadow:var(--glass-line) }
  .scratch-seal canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab; z-index:2; border-radius:var(--r)}
  .scratch-seal canvas:active{ cursor:grabbing }
  .scratch-seal.revealed canvas{ opacity:0; transition:opacity 0.45s var(--e-out); pointer-events:none }
  .scratch-cap{ position:relative; z-index:1; text-align:center; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em;
    text-transform:uppercase; color:oklch(0.881 0.008 106.6); pointer-events:none; padding:36px 20px; line-height:1.5}
  .scratch-cap b{ display:block; color:oklch(1 0 0); font-weight:600; font-size:var(--fs-2); letter-spacing:.14em; margin-bottom:8px}
  .scratch-cap .sub{ color:oklch(0.687 0.010 106.7); font-size:var(--fs-1); letter-spacing:.16em }
  .scratch-revealbtn{ position:absolute; z-index:3; bottom:12px; right:12px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.1em;
    text-transform:uppercase; padding:8px 12px; border-radius:var(--r-sm); border:1px solid rgba(236,236,232,.24); background:rgba(20,20,19,.7); color:oklch(0.853 0.008 106.6); cursor:pointer }
  .scratch-revealbtn:hover{ border-color:var(--oxblood); color:oklch(1 0 0) }
  @media (prefers-reduced-motion:reduce){ .scratch-seal.revealed canvas{ transition:none } }

  /* ===== v17 ÉTAPE 0 — SOCLE MOTION (helpers réutilisables, inertes tant qu'aucune surface ne porte la classe ; appliqués par surface aux étapes 1-5) ===== */
  :root{ --glint:oklch(1 0 0 / .55) }
  /* hover-border-gradient — liseré conic rotatif (glint + pointe oxblood hairline). .live = moving border permanent (1 SEUL élément à la fois : le RDV le plus chaud) */
  @property --hbg-a{ syntax:'<angle>'; initial-value:0deg; inherits:false }
  .hbg{ position:relative }
  .hbg::after{ content:""; position:absolute; inset:-1px; border-radius:inherit; padding:4px; pointer-events:none;
    background:conic-gradient(from var(--hbg-a), transparent 0 70%, var(--glint) 82%, var(--oxblood) 89%, transparent 97%);
    -webkit-mask:linear-gradient(oklch(0 0 0) 0 0) content-box,linear-gradient(oklch(0 0 0) 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity 0.32s var(--e-out) }
  .hbg:hover::after,.hbg.live::after{ opacity:1; animation:hbgSpin 0.45s linear infinite }
  @keyframes hbgSpin{ to{ --hbg-a:360deg } }
  /* hover-lift générique (listes, cartes) */
  .hover-lift{ transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out) }
  .hover-lift:hover{ transform:translateY(-2px); box-shadow:var(--sh-2) }
  /* rail pipeline vivant — le node actif respire (pulse oxblood, hairline only) */
  .rail-breathe{ animation:railBreathe 0.45s ease-in-out infinite }
  @keyframes railBreathe{ 0%,100%{ box-shadow:0 0 0 0 oklch(0.409 0.110 28 / .35) } 50%{ box-shadow:0 0 0 7px oklch(0.409 0.110 28 / 0) } } /* = --oxblood en alpha .35→0 */
  /* container-text-flip (hero cockpit « Cette semaine : {niche} ») — animé par AROZ_MOTION.ctFlip */
  .ctf{ display:inline-flex; overflow:hidden; vertical-align:bottom }
  .ctf>b{ display:inline-block; font-weight:inherit; will-change:transform }
  /* verre épais réfractif — SVG feDisplacementMap (#avRefract), fallback blur simple */
  .glass-refract{ -webkit-backdrop-filter:blur(14px) saturate(1.12); backdrop-filter:blur(14px) saturate(1.12) }
  @supports (backdrop-filter:url(#avRefract)){ .glass-refract{ backdrop-filter:url(#avRefract) blur(10px) saturate(1.12) } }
  @media (prefers-reduced-motion:reduce){
    .hbg:hover::after,.hbg.live::after{ animation:none; opacity:.6 }
    .rail-breathe{ animation:none }
    .hover-lift,.hover-lift:hover{ transition:none; transform:none } }

  /* ===== v17 ÉTAPE 1 — coquille IA : 3 menus + coin Aroz + strip niche + shells Aujourd'hui/Toutes cibles ===== */
  @media (min-width:901px){ .side{ display:flex; flex-direction:column } .side .navgroup{ flex:none } } /* scopé desktop — ne pas écraser le display:none du breakpoint mobile */
  .gh.sub{ padding-top:12px; letter-spacing:.14em; color:var(--grey) }
  .aroz-corner{ margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px}
  .aroz-corner .aroz-id{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:4px 12px 8px}
  .aroz-corner .hub-theme{ margin-top:8px}
  /* strip niche — Cibles | Blueprint au même endroit, verre + liseré oxblood sur l'onglet actif */
  .nichebar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 20px; padding:4px 8px; border-radius:var(--r-sm); width:fit-content; max-width:100%;
    background:linear-gradient(160deg, oklch(1 0 0 / .5), oklch(1 0 0 / .12)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .4), var(--sh-1) }
  html.night .nichebar{ background:linear-gradient(160deg, oklch(1 0 0 / .08), oklch(1 0 0 / .02)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .1) }
  .nichebar .nb-niche{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--grey); padding:0 8px}
  .nichebar .dot,.tcard .dot{ width:8px; height:8px; border-radius:var(--r-pill); flex:none; background:var(--line-2) }
  .nichebar .dot.btp,.tcard .dot.btp{background:var(--btp)} .nichebar .dot.immo,.tcard .dot.immo{background:var(--immo)}
  .nichebar .dot.immoprestige,.tcard .dot.immoprestige{background:var(--immoprestige)} .nichebar .dot.hotellerie,.tcard .dot.hotellerie{background:var(--hotellerie)}
  .nichebar .dot.gastro,.tcard .dot.gastro{background:var(--gastro)} .nichebar .dot.vin,.tcard .dot.vin{background:var(--vin)}
  .nichebar .dot.ecommerce,.tcard .dot.ecommerce{background:var(--ecommerce)} .nichebar .dot.auto,.tcard .dot.auto{background:var(--auto)}
  .nichebar .dot.beaute,.tcard .dot.beaute{background:var(--beaute)} .nichebar .dot.gc,.tcard .dot.gc{background:var(--gc)}
  .nb-i{ appearance:none; border:none; cursor:pointer; background:transparent; font-family:var(--sans); font-size:var(--fs-2); color:var(--ink-2); padding:8px 16px; border-radius:var(--r-sm); transition:color 0.12s var(--e-out) }
  .nb-i:hover{ color:var(--ink) }
  .nb-i.on{ color:var(--ink); font-weight:500; background:linear-gradient(160deg, oklch(1 0 0 / .6), oklch(1 0 0 / .18)); box-shadow:inset 0 0 0 1.5px var(--oxblood), inset 0 1px 0 oklch(1 0 0 / .5), var(--sh-1) }
  html.night .nb-i.on{ background:linear-gradient(160deg, oklch(1 0 0 / .1), oklch(1 0 0 / .03)); box-shadow:inset 0 0 0 1.5px var(--oxblood), inset 0 1px 0 oklch(1 0 0 / .16) }
  .nb-i:focus-visible{ outline:2px solid var(--oxblood); outline-offset:-2px }
  /* shells Aujourd'hui / Toutes mes cibles — cartes verre, texte en code */
  .tgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px}
  .tcard{ appearance:none; text-align:left; cursor:pointer; border:none; border-radius:var(--r); padding:20px 16px; display:flex; flex-direction:column; gap:8px; color:var(--ink); font-family:var(--sans);
    background:linear-gradient(160deg, oklch(1 0 0 / .55), oklch(1 0 0 / .14)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .45), var(--sh-1) }
  html.night .tcard{ background:linear-gradient(160deg, oklch(1 0 0 / .07), oklch(1 0 0 / .02)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .12) }
  .tcard b{ font-size:var(--fs-3); font-weight:600; letter-spacing:-.01em }
  .tcard .tk{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.14em; text-transform:uppercase; color:var(--grey) }
  .tcard .td{ font-size:var(--fs-2); color:var(--grey); line-height:1.4}
  .tcard .cnt{ margin-left:auto; font-family:var(--mono); font-size:var(--fs-1); color:var(--grey) }
  .tcard:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  #v-targets .tcard{ flex-direction:row; align-items:center; gap:12px}
  /* sheet mobile : 4 sections → scroll interne + coin Aroz ; rows en ligne (annule le style colonne .tab-i de la tabbar) */
  .sheet-panel{ max-height:84vh; overflow-y:auto }
  .sheet-aroz{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:4px 8px 8px}
  @media (max-width:900px){
    .sheet-row{ flex-direction:row; justify-content:flex-start; text-transform:none; letter-spacing:0; color:var(--ink); font-family:var(--sans); font-size:var(--fs-3)}
    .sheet-row .ic{ width:18px; height:18px; flex:none } }

  /* ===== v17 ÉTAPE 2 — TERRAIN : Aujourd'hui · board · close mode · blueprint live · briefing · device-frame ===== */
  /* — strip du haut (streak · objectif) — */
  .tstrip{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px}
  .tstrip .tpill{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; color:var(--grey);
    padding:8px 16px; border-radius:var(--r-pill); background:linear-gradient(160deg, oklch(1 0 0 / .5), oklch(1 0 0 / .1)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .4) }
  html.night .tstrip .tpill{ background:linear-gradient(160deg, oklch(1 0 0 / .07), oklch(1 0 0 / .02)); box-shadow:var(--glass-line) }
  .tstrip .tpill b{ font-family:var(--sans); font-size:var(--fs-3); letter-spacing:0; color:var(--ink); font-weight:600 }
  /* — les 3 coups du jour — */
  .nba-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px}
  .nba{ appearance:none; border:none; cursor:pointer; text-align:left; position:relative; isolation:isolate; border-radius:var(--r); padding:20px;
    display:flex; flex-direction:column; gap:12px; color:var(--ink); font-family:var(--sans); min-height:148px;
    background:linear-gradient(160deg, oklch(1 0 0 / .55), oklch(1 0 0 / .12)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .45), var(--sh-1);
    transition:transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out) }
  html.night .nba{ background:linear-gradient(160deg, oklch(1 0 0 / .08), oklch(1 0 0 / .02)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .12) }
  .nba:hover{ transform:translateY(-2px); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .45), var(--sh-2) }
  .nba:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .nba .nb-top{ display:flex; align-items:center; gap:12px}
  .nba .nb-rank{ width:24px; height:24px; border-radius:var(--r-sm); display:grid; place-items:center; font-family:var(--mono); font-size:var(--fs-1); color:var(--ink);
    background:linear-gradient(160deg, oklch(1 0 0 / .5), oklch(1 0 0 / .1)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .4); flex:none }
  .nba .nb-why{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase; color:var(--grey) }
  .nba .nb-name{ font-size:var(--fs-4); font-weight:600; letter-spacing:-.01em }
  .nba .nb-name small{ display:block; font-family:var(--mono); font-size:var(--fs-1); font-weight:400; color:var(--grey); margin-top:4px}
  .nba .nb-line{ font-size:var(--fs-3); font-weight:300; color:var(--ink-2); line-height:1.4; flex:1 }
  .nba .nb-cta{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; color:var(--oxblood) }
  .nba .nb-cta .ic{ width:13px; height:13px }
  /* — listes relances / RDV / notes — */
  .tcols{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
  @media (max-width:900px){ .tcols{ grid-template-columns:1fr } }
  .tpanel{ border-radius:var(--r); padding:16px; position:relative; isolation:isolate;
    background:linear-gradient(160deg, oklch(1 0 0 / .45), oklch(1 0 0 / .08)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .4) }
  html.night .tpanel{ background:linear-gradient(160deg, oklch(1 0 0 / .06), oklch(1 0 0 / .02)); box-shadow:var(--glass-line) }
  .tpanel .tp-h{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin-bottom:12px; display:flex; align-items:center; gap:8px}
  .tpanel .tp-h b{ margin-left:auto; font-family:var(--sans); color:var(--ink); font-weight:600; font-size:var(--fs-3)}
  .trow{ appearance:none; border:none; background:none; cursor:pointer; width:100%; text-align:left; font-family:var(--sans);
    display:flex; align-items:center; gap:12px; padding:12px 8px; min-height:44px; border-radius:var(--r-sm); border-top:1px solid var(--line); color:var(--ink) }
  .trow:first-of-type{ border-top:none }
  .trow:hover{ background:oklch(1 0 0 / .14) } html.night .trow:hover{ background:oklch(1 0 0 / .05) }
  .trow:focus-visible{ outline:2px solid var(--oxblood); outline-offset:-2px }
  .trow .dot{ width:8px; height:8px; border-radius:var(--r-pill); flex:none; background:var(--line-2) }
  .trow .tr-name{ font-weight:500; font-size:var(--fs-3)} .trow .tr-name small{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); font-weight:400; margin-left:8px}
  .trow .tr-tag{ margin-left:auto; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; padding:4px 12px; border-radius:var(--r-pill); color:var(--ink-2);
    box-shadow:inset 0 0 0 1px var(--line-2) }
  .trow .tr-tag.j7{ color:var(--oxblood); box-shadow:inset 0 0 0 1px var(--oxblood) }
  .trow .tr-note{ font-size:var(--fs-2); font-weight:300; color:var(--grey); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1 }
  .tempty{ padding:16px 8px; font-size:var(--fs-3); font-weight:300; color:var(--grey); line-height:1.5}
  .tempty [data-goto]{ background:none; border:none; cursor:pointer; padding:0; color:var(--oxblood); font:inherit; text-decoration:underline; text-underline-offset:3px }
  /* — semaine perso (count-up) — */
  .twk{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-top:12px}
  .twk .wk{ border-radius:var(--r); padding:16px 16px; position:relative; isolation:isolate;
    background:linear-gradient(160deg, oklch(1 0 0 / .45), oklch(1 0 0 / .08)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .4) }
  html.night .twk .wk{ background:linear-gradient(160deg, oklch(1 0 0 / .06), oklch(1 0 0 / .02)); box-shadow:var(--glass-line) }
  .twk .wk b{ display:block; font-size:var(--fs-5); font-weight:600; letter-spacing:-.02em } .twk .wk b small{ font-size:var(--fs-3); font-weight:400 }
  .twk .wk span{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--grey) }
  /* — board Toutes mes cibles — */
  .tgbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:20px 0 16px}
  .tgbar input[type="search"]{ flex:1 1 220px; min-width:180px; appearance:none; border:none; border-radius:var(--r-sm); padding:12px 16px; font-family:var(--sans); font-size:var(--fs-3); color:var(--ink);
    background:linear-gradient(160deg, oklch(1 0 0 / .5), oklch(1 0 0 / .12)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .4) }
  html.night .tgbar input[type="search"]{ background:linear-gradient(160deg, oklch(1 0 0 / .07), oklch(1 0 0 / .02)); box-shadow:var(--glass-line) }
  .tgbar input[type="search"]:focus-visible{ outline:2px solid var(--oxblood); outline-offset:-2px }
  .tgchips{ display:flex; flex-wrap:wrap; gap:8px}
  .tgc{ appearance:none; border:none; cursor:pointer; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
    padding:8px 12px; min-height:44px; border-radius:var(--r-pill); background:transparent; box-shadow:inset 0 0 0 1px var(--line-2); display:inline-flex; align-items:center; gap:8px; transition:color 0.12s var(--e-out) }
  .tgc .dot{ width:7px; height:7px; border-radius:var(--r-pill); flex:none }
  .tgc:hover{ color:var(--ink) }
  .tgc[aria-pressed="true"]{ color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--oxblood), inset 0 1px 0 oklch(1 0 0 / .35); background:linear-gradient(160deg, oklch(1 0 0 / .5), oklch(1 0 0 / .12)); font-weight:700 }
  html.night .tgc[aria-pressed="true"]{ background:linear-gradient(160deg, oklch(1 0 0 / .09), oklch(1 0 0 / .02)) }
  .tgc:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .tgcount{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); margin:4px 0 12px}
  /* — CLOSE MODE plein écran (overlay CSS, aucun re-parenting) — */
  html.close-on{ overflow:hidden }
  #pbFiche.close-mode{ position:fixed; inset:0; z-index:120; overflow-y:auto; overscroll-behavior:contain; padding:24px clamp(16px,4vw,48px) 64px;
    background:radial-gradient(120vw 80vh at 12% -10%, oklch(0.98 0.006 92 / .9), transparent 55%), var(--bg, oklch(0.937 0.003 106)) }
  html.night #pbFiche.close-mode{ background:radial-gradient(120vw 80vh at 12% -10%, oklch(0.22 0.004 106 / .9), transparent 55%), oklch(0.145 0 0) }
  #pbFiche.close-mode > *{ max-width:880px; margin-left:auto; margin-right:auto }
  #pbFiche.close-mode .backbtn{ position:sticky; top:0; z-index:5; display:flex; width:fit-content; align-items:center; gap:8px; margin-bottom:16px; padding:12px 16px; border-radius:var(--r-pill);
    -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
    background:linear-gradient(160deg, oklch(1 0 0 / .6), oklch(1 0 0 / .2)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .5), var(--sh-1) }
  html.night #pbFiche.close-mode .backbtn{ background:linear-gradient(160deg, oklch(1 0 0 / .1), oklch(1 0 0 / .04)) }
  .fesc{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; color:var(--grey); padding:4px 8px; border-radius:var(--r-sm); box-shadow:inset 0 0 0 1px var(--line-2); margin-left:8px}
  /* — v19 fiche : groupes repliables (progressive disclosure, finding #3) — plaque verre = tiroir, texte en code — */
  .fgroup{ margin-top:24px}
  .fgroup>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; min-height:52px; padding:16px 20px; border-radius:var(--r); position:relative; isolation:isolate;
    background:linear-gradient(158deg, oklch(1 0 0 / .5), oklch(1 0 0 / .06) 55%, transparent);
    box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .45), var(--sh-1);
    transition:box-shadow 0.2s var(--e-out), transform 0.2s var(--e-spring) }
  html.night .fgroup>summary{ background:linear-gradient(158deg, oklch(1 0 0 / .07), oklch(1 0 0 / .015) 55%, transparent); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .12) }
  .fgroup>summary::-webkit-details-marker{ display:none } .fgroup>summary::marker{ content:"" }
  .fgroup>summary:hover{ transform:translateY(-1px); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .5), var(--sh-1) }
  .fgroup>summary:focus-visible{ outline:2px solid var(--oxblood); outline-offset:3px }
  .fgroup>summary .nsq{ background:var(--nc,var(--ink)) }
  .fgroup-t{ font-family:var(--mono); font-size:var(--fs-meta); letter-spacing:.18em; text-transform:uppercase; color:var(--ink); font-weight:500 }
  .fgroup-sub{ font-family:var(--sans); font-size:var(--fs-1); letter-spacing:.005em; text-transform:none; color:var(--grey); font-weight:400 }
  .fgroup-chev{ margin-left:auto; width:15px; height:15px; flex:0 0 15px; color:var(--grey); transition:transform 0.2s var(--e-out) }
  .fgroup[open]>summary .fgroup-chev{ transform:rotate(90deg) }
  .fgroup[open]>summary{ border-bottom-left-radius:5px; border-bottom-right-radius:5px }
  .fgroup-b>.fsec:first-child{ margin-top:20px}
  @media (prefers-reduced-motion:reduce){ .fgroup>summary,.fgroup-chev{ transition:none } }
  @media (max-width:560px){ .fgroup-sub{ display:none } .fgroup>summary{ padding:16px 16px} }
  /* — blueprint niche LIVE (dé-baké : texte en code, référence = niche-blueprint.dark.webp) — */
  .bp-live{ position:relative; isolation:isolate; border-radius:var(--r); padding:20px 20px 20px; margin:0 0 20px; overflow:hidden;
    background:linear-gradient(168deg, oklch(1 0 0 / .55), oklch(1 0 0 / .1) 46%, oklch(1 0 0 / .03));
    box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .5), var(--sh-1) }
  html.night .bp-live{ background:linear-gradient(168deg, oklch(1 0 0 / .09), oklch(1 0 0 / .025) 46%, oklch(1 0 0 / .01)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .14) }
  .bp-live::before{ content:""; position:absolute; inset:0 0 auto; height:2px; background:var(--oxblood); opacity:.85 } /* hairline signature */
  .bp-live .bp-t{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.14em; text-transform:uppercase; color:var(--grey); margin:8px 0 16px}
  .bp-live .bp-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:0}
  .bp-live .bp-c{ padding:0 16px; border-left:1px solid var(--line) } .bp-live .bp-c:first-child{ padding-left:0; border-left:none }
  .bp-live .bp-k{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-bottom:8px}
  .bp-live .bp-v{ font-size:var(--fs-2); font-weight:300; line-height:1.5; color:var(--ink-2) }
  .bp-live .bp-v:not(.expanded){ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden } /* D2 — clampé par défaut, révélable */
  .bp-live .bp-v b{ color:var(--ink); font-weight:500 }
  .bp-more{ display:none; margin-top:8px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; color:var(--oxblood); background:none; border:none; cursor:pointer; padding:4px 0; min-height:32px }
  .bp-live .bp-c.clamped .bp-more{ display:inline-flex; align-items:center; gap:4px}
  .bp-more:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px; border-radius:var(--r-sm)}
  @media (max-width:900px){ .bp-live .bp-cols{ grid-template-columns:1fr 1fr; gap:16px 0} .bp-live .bp-c:nth-child(3){ padding-left:0; border-left:none } }
  /* — briefing Go/No-Go (référence = fiche-closer-briefing.dark.webp) — */
  .fbrief{ border-radius:var(--r); overflow:hidden; position:relative; isolation:isolate;
    box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .45), var(--sh-1);
    background:linear-gradient(168deg, oklch(1 0 0 / .5), oklch(1 0 0 / .1) 50%, oklch(1 0 0 / .03)) }
  html.night .fbrief{ background:linear-gradient(168deg, oklch(1 0 0 / .08), oklch(1 0 0 / .02) 50%, oklch(1 0 0 / .01)) }
  .fbrief::before{ content:""; position:absolute; inset:0 0 auto; height:2px; background:var(--oxblood); opacity:.85 }
  .fbrief .fb-row{ display:grid; grid-template-columns:120px 1fr; gap:16px; padding:12px 20px; border-top:1px solid var(--line); align-items:baseline }
  .fbrief .fb-row:first-of-type{ border-top:none; padding-top:16px}
  .fbrief .fb-k{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--grey) }
  .fbrief .fb-v{ font-size:var(--fs-3); font-weight:300; color:var(--ink-2); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .fbrief .fb-foot{ display:flex; justify-content:center; padding:16px 20px 20px}
  .gonogo{ appearance:none; border:none; cursor:default; display:inline-flex; align-items:center; gap:12px; padding:12px 28px; border-radius:var(--r-pill);
    font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
    background:linear-gradient(160deg, oklch(1 0 0 / .55), oklch(1 0 0 / .15)); box-shadow:var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .5), var(--sh-1) }
  html.night .gonogo{ background:linear-gradient(160deg, oklch(1 0 0 / .1), oklch(1 0 0 / .03)) }
  .gonogo.go{ box-shadow:inset 0 0 0 1.5px var(--pine), var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .5) }
  .gonogo.nogo{ box-shadow:inset 0 0 0 1.5px var(--oxblood), var(--glass-line), inset 0 1px 0 oklch(1 0 0 / .5) }
  .fb-missing{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:0 20px 16px}
  .fb-missing button{ appearance:none; border:none; cursor:pointer; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; color:var(--ink-2);
    padding:8px 12px; border-radius:var(--r-pill); background:none; box-shadow:inset 0 0 0 1px var(--line-2) }
  .fb-missing button:hover{ color:var(--oxblood); box-shadow:inset 0 0 0 1px var(--oxblood) }
  /* — device-frame démo (argument close : sa démo, à son nom) — */
  .dframe{ border-radius:var(--r); overflow:hidden; box-shadow:var(--glass-line), var(--sh-2); position:relative; isolation:isolate }
  .dframe .df-bar{ display:flex; align-items:center; gap:8px; padding:12px 16px;
    background:linear-gradient(160deg, oklch(1 0 0 / .6), oklch(1 0 0 / .25)); box-shadow:inset 0 -1px 0 var(--line) }
  html.night .dframe .df-bar{ background:linear-gradient(160deg, oklch(1 0 0 / .12), oklch(1 0 0 / .05)) }
  .dframe .df-dot{ width:8px; height:8px; border-radius:var(--r-pill); background:var(--line-2); flex:none }
  .dframe .df-url{ margin-left:8px; flex:1; font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); padding:8px 12px; border-radius:var(--r-sm);
    background:oklch(1 0 0 / .3); box-shadow:inset 0 0 0 1px var(--line) }
  html.night .dframe .df-url{ background:oklch(0 0 0 / .25) }
  .dframe .df-screen{ padding:36px 28px 40px; text-align:center;
    background:radial-gradient(90% 120% at 50% -20%, oklch(1 0 0 / .5), transparent 60%), linear-gradient(180deg, oklch(1 0 0 / .2), oklch(1 0 0 / .04)) }
  html.night .dframe .df-screen{ background:radial-gradient(90% 120% at 50% -20%, oklch(1 0 0 / .08), transparent 60%), linear-gradient(180deg, oklch(1 0 0 / .04), oklch(1 0 0 / .01)) }
  .dframe .df-kick{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.16em; text-transform:uppercase; color:var(--grey); margin-bottom:12px}
  .dframe .df-name{ font-size:var(--fs-6); font-weight:600; letter-spacing:-.02em }
  .dframe .df-line{ margin-top:12px; font-size:var(--fs-3); font-weight:300; color:var(--ink-2) }
  /* — spotlight curseur étendu aux nouvelles surfaces (même pattern que .card) — */
  .nba::after,.tcard::after,.pcard::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity 0.45s var(--e-out);
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,-30%), oklch(1 0 0 / .5), transparent 55%); mix-blend-mode:soft-light }
  .nba.spec-on::after,.tcard.spec-on::after,.pcard.spec-on::after{ opacity:1 }
  html.night .nba::after,html.night .tcard::after,html.night .pcard::after{ background:radial-gradient(260px circle at var(--mx,50%) var(--my,-30%), oklch(1 0 0 / .2), transparent 55%); mix-blend-mode:screen }
  @media (prefers-reduced-motion:reduce){ .nba{ transition:none } .nba:hover{ transform:none } .nba::after,.tcard::after,.pcard::after{ display:none } }

  /* ============================================================
     ÉLITE v18 — primitives ADDITIVES (réconciliation tokens-elite.css).
     Ne touche pas au :root vert v17. Source : aroz-brandkit/wiring-modes §pattern §0.
     ============================================================ */
  /* .rndr — render verre EN SURFACE (mode A/BD, §0 PLANCHE-MASTER).
     L'image EST la matière : posée en ::before z-index:-1, remontée en brightness.
     Le texte/données restent EN CODE par-dessus (non filtrés).
     Usage : style="--rndr:url('../assets/concepts/ROLE-dark'); --rndr-l:url('../assets/concepts/ROLE-light')"
     --rndr = .dark (obligatoire, matière nuit) · --rndr-l = .light (optionnel, matière jour). */
  .rndr{ position:relative; isolation:isolate }
  .rndr::before{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
    background:var(--rndr-l,var(--rndr)) center/cover no-repeat;
    filter:brightness(1.02) contrast(1.02);          /* JOUR défaut : matière claire (.light) */
    content-visibility:auto;                          /* perf : ::before lazy hors écran (gate 5) */
  }
  html.night .rndr::before{ background-image:var(--rndr); filter:brightness(1.5) contrast(1.06); }  /* NUIT : .dark quasi-noir → remonter */

  /* .float — élément B/D/GFX flottant = cutout alpha (noir→transparent), posé tel quel, taille fixe */
  .float{ display:block; object-fit:contain; -webkit-user-drag:none; -webkit-user-select:none; user-select:none }

  /* .grain — overlay global 5% (couche 6 matière élite), posé juste après <body> */
  .grain{ position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='gn'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23gn)'/></svg>"); }
  html.night .grain{ mix-blend-mode:soft-light; opacity:.06 }
  @media (prefers-reduced-motion:reduce){ .grain{ opacity:.035 } }

  /* ============================================================
     SHELL v18 — portes accordéon (Cockpit/Terrain/Entraînement).
     Zone header cliquable (aria-expanded) + corps collapsible.
     ============================================================ */
  .porte{ margin-top:20px}
  .porte:first-of-type{ margin-top:20px}
  .porte-h{ appearance:none; width:100%; cursor:pointer; background:none; border:none; text-align:left;
    display:flex; align-items:center; gap:8px; padding:8px 12px 8px; color:var(--grey-2);
    font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.16em; text-transform:uppercase;
    border-radius:var(--r-sm); transition:color var(--t-fast), background var(--t-fast) }
  .porte-h:hover{ color:var(--ink-2) }
  .porte-h:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .porte-h .zn{ background:var(--ink); color:var(--paper); width:16px; height:16px; display:grid; place-items:center; font-size:var(--fs-1); border-radius:var(--r-sm); flex:none }
  .porte-h .zn.ox{ background:var(--oxblood) }
  .porte-t{ display:flex; flex-direction:column; line-height:1.1; letter-spacing:.14em }
  .porte-s{ font-size:var(--fs-1); letter-spacing:.18em; color:var(--grey); margin-top:4px; opacity:.85 }
  .porte-chev{ margin-left:auto; width:.82em; height:.82em; color:var(--grey); transition:transform var(--t-mid) var(--e-out) }
  .porte.open .porte-chev{ transform:rotate(180deg) }
  .porte.open .porte-h{ color:var(--ink) }
  /* corps collapsible : max-height (léger, pas de mesure JS) */
  .porte-b{ overflow:hidden; max-height:0; opacity:.4;
    transition:max-height var(--t-mid) var(--e-out), opacity var(--t-mid) var(--e-out); }
  .porte.open .porte-b{ max-height:720px; opacity:1 }
  @media (prefers-reduced-motion:reduce){ .porte-b{ transition:none } .porte-chev{ transition:none } }
  /* mobile : la sidebar est masquée (dock+sheet 3 zones prennent le relais) → portes = desktop only */

  /* SHELL v18 — les rendus nav ne sont PAS posés en fond diffus (feedback fondateur 2026-07-10).
     La matière verre du shell = le paper-glass CSS vert existant. Les rendus reviennent
     en OBJETS composés (GFX contenu/centré · CHR plaque cadrée), jamais en cover basse-opacité. */

  /* ============================================================
     COCKPIT v18 — composition « tuile de réf » (MOCK-shell-dash-v2).
     Bande today + 3 hero CENTRÉS + drill « cockpit complet ». Tokens jour/nuit réels.
     ============================================================ */
  /* — bande today : série (médaillon gamif-streak en OBJET contenu) + objectif — */
  .ck-today{ display:flex; align-items:center; gap:20px; flex-wrap:wrap;
    background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--sh-1);
    padding:16px 20px; margin-top:8px}
  .ck-streak-lead{ display:flex; align-items:center; gap:12px}
  .ck-med{ position:relative; width:54px; height:54px; flex:none; border-radius:var(--r); overflow:hidden;
    background:oklch(0.145 0 0); box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-1); display:grid; place-items:center }
  .ck-med::before{ content:""; position:absolute; inset:0; background:url("../assets/concepts/gamif-streak.light.webp") center/118% no-repeat; }
  html.night .ck-med::before{ mix-blend-mode:screen; filter:brightness(1.35) }
  .ck-med span{ position:relative; z-index:1; font-family:var(--mono); font-weight:700; font-size:var(--fs-4); color:oklch(1 0 0); text-shadow:0 1px 4px oklch(0 0 0) }
  .ck-streak-t b{ font-size:var(--fs-4); font-weight:600; display:block; line-height:1.1}
  .ck-streak-t span{ font-size:var(--fs-2); color:var(--grey) }
  .ck-vr{ width:1px; height:40px; background:var(--line-2); flex:none }
  .ck-goalband{ flex:1; min-width:230px }
  .ck-gbrow{ display:flex; justify-content:space-between; align-items:baseline; font-size:var(--fs-2); color:var(--grey); margin-bottom:8px}
  .ck-gbrow b{ color:var(--ink); font-family:var(--mono); font-weight:700; font-size:var(--fs-2)}
  .ck-gbrow-2{ margin:8px 0 0}
  .ck-bar{ height:9px; border-radius:var(--r); background:var(--paper-2); box-shadow:var(--glass-line); overflow:hidden; border:1px solid var(--line) }
  .ck-bar>i{ display:block; height:100%; border-radius:var(--r); background:linear-gradient(90deg,var(--oxblood),var(--gastro)); box-shadow:var(--accent-glow,none); transition:width 0.45s var(--e-out) }

  /* — kicker — */
  .ck-kick{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2); margin:28px 0 12px; display:flex; align-items:center; gap:12px}
  .ck-kick::after{ content:""; height:1px; flex:1; background:var(--line-2) }

  /* — 3 HERO CENTRÉS — */
  .heroes{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:16px; margin-bottom:8px}
  .heroes .hcard{ grid-column:auto }   /* neutralise les vieux span de l'ancien .cockpit 12-col */
  .hcard{ position:relative; background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--sh-1);
    padding:20px 20px 20px; display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; min-height:190px }
  .hcard-h{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.13em; text-transform:uppercase; color:var(--grey); align-self:flex-start; display:flex; align-items:center; gap:8px}
  .hcard .ck-hint{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey-2); text-transform:none; letter-spacing:.02em }
  .hcard-v{ font-family:var(--mono); font-weight:700; font-size:var(--fs-6); letter-spacing:-.02em; color:var(--ink); line-height:1.1; margin:auto 0 0 }
  .hcard-big{ justify-content:center }
  .hcard-big .hcard-v{ margin:8px 0 0}
  .hcard-d{ font-size:var(--fs-2); color:var(--grey); margin-top:8px}
  .hcard-d .up,.hcard-d.up{ color:var(--pine) }
  /* jauge (SVG) centrée — réutilise .ck-gauge-wrap existant */
  .hcard .ck-gauge-wrap{ margin-top:4px}
  /* objectif : stepper centré */
  .ck-objrow{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:16px}
  .ck-stp{ width:34px; height:34px; border-radius:var(--r-sm); border:1px solid var(--line-2); cursor:pointer;
    background:var(--paper-2); color:var(--ink); font-family:var(--mono); font-size:var(--fs-4); line-height:1.1; transition:background var(--t-fast), border-color var(--t-fast) }
  .ck-stp:hover{ border-color:var(--oxblood); background:var(--oxblood-soft) }
  .ck-stp:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .ck-objv{ font-family:var(--mono); font-weight:700; font-size:var(--fs-6); letter-spacing:-.02em; min-width:2.4ch; text-align:center; color:var(--ink) }
  .ck-obj .mgauge.lux{ width:100%; margin:16px 0 8px}
  .ck-obj-sub{ text-align:center }

  /* — drill « cockpit complet » — */
  .ck-more{ appearance:none; width:100%; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--sh-1);
    color:var(--grey); font-family:var(--sans); font-size:var(--fs-2); padding:12px; margin:16px 0 0; transition:color var(--t-fast), background var(--t-fast) }
  .ck-more:hover{ color:var(--ink) }
  .ck-more:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .ck-more .ic{ width:15px; height:15px; transition:transform var(--t-mid) var(--e-out) }
  .ck-more[aria-expanded="true"] .ic{ transform:rotate(180deg) }
  .ck-drill{ overflow:hidden; max-height:0; opacity:0; transition:max-height var(--t-mid) var(--e-out), opacity var(--t-mid) var(--e-out), margin var(--t-mid) }
  .ck-drill.open{ max-height:900px; opacity:1; margin-top:16px}
  .ck-drill-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
  .ck-mini{ background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--sh-1); padding:16px 16px; min-width:0; display:flex; flex-direction:column }
  .ck-mini-wide{ grid-column:1 / -1 }
  .ck-mini-h{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-bottom:12px; display:flex; align-items:center; gap:8px}

  @media (max-width:900px){ .heroes{ grid-template-columns:1fr } .ck-drill-grid{ grid-template-columns:1fr } .ck-mini-wide{ grid-column:auto } }
  @media (prefers-reduced-motion:reduce){ .ck-bar>i{ transition:none } .ck-more .ic,.ck-drill{ transition:none } }

  /* ============================================================
     COCKPIT v21 — VERRE LIQUIDE sur les surfaces v18.
     Régression corrigée : les cartes hero v18 avaient été rebâties en fill --paper
     PLAT (opaque), hors du système paper-glass → rectangles morts nuit+jour.
     On les ramène dans le verre : --glass-mat + edge-light + sheen curseur, et on
     BRANCHE la réfraction #avRefract (filtre présent mais câblé nulle part).
     Night-first, parité jour : fill translucide → l'ambient (body radials jour /
     blobs nuit) passe derrière et se fait réfracter. Sans ça le verre est invisible.
     ============================================================ */
  .ck-today,.hcard,.ck-mini,.ck-more{
    position:relative; overflow:hidden; isolation:isolate;
    border:0!important; border-radius:var(--r-lg);
    background-color:oklch(0.98 0.004 106 / .46);          /* JOUR : givré satiné translucide sur ambient chaud */
    background-image:var(--glass-mat);
    box-shadow:var(--glass-sh),var(--glass-hi),var(--glass-line);
    -webkit-backdrop-filter:blur(13px) saturate(1.12);
    backdrop-filter:blur(13px) saturate(1.12);              /* frost fallback (Safari + no-SVG-filter) */
  }
  @supports (backdrop-filter:url(#avRefract)){
    .ck-today,.hcard,.ck-mini,.ck-more{ backdrop-filter:url(#avRefract) blur(9px) saturate(1.14) }  /* réfraction épaisse feDisplacement */
  }
  html.night :is(.ck-today,.hcard,.ck-mini,.ck-more){
    background-color:oklch(0.235 0.006 106 / .4);           /* NUIT : verre lumineux réfractif sur noir + blobs */
  }
  /* sheen spéculaire suivi-curseur — réutilise --mx/--my (wiré en JS via SPECSEL) */
  .ck-today::after,.hcard::after,.ck-mini::after,.ck-more::after{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
    background:radial-gradient(240px circle at var(--mx,50%) var(--my,-30%),rgba(255,255,255,.5),transparent 55%);
    opacity:0; transition:opacity 0.45s var(--e-out); mix-blend-mode:soft-light;
  }
  html.night :is(.ck-today,.hcard,.ck-mini,.ck-more)::after{
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,-30%),rgba(255,255,255,.22),transparent 55%); mix-blend-mode:screen;
  }
  .ck-today.spec-on::after,.hcard.spec-on::after,.ck-mini.spec-on::after,.ck-more.spec-on::after{ opacity:1 }
  .ck-today>*,.hcard>*,.ck-mini>*,.ck-more>*{ position:relative; z-index:1 }
  @media (hover:hover) and (pointer:fine){
    .hcard:hover,.ck-mini:hover,.ck-more:hover{ transform:translateY(-3px); box-shadow:var(--glass-sh-hi),var(--glass-hi),var(--glass-line) }
  }
  /* creux liquide : le grand chiffre KPI vit DANS un well réfractif (DoD « contenu dans les creux ») */
  .hcard-v{ padding:8px 20px; border-radius:var(--r);
    box-shadow:inset 0 1px 2px rgba(22,22,21,.10), inset 0 -1px 0 rgba(255,255,255,.5); }
  html.night .hcard-v{ box-shadow:inset 0 2px 5px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.08); }
  @media (prefers-reduced-motion:reduce){
    .ck-today::after,.hcard::after,.ck-mini::after,.ck-more::after{ display:none }
    .hcard:hover,.ck-mini:hover,.ck-more:hover{ transform:none; box-shadow:var(--glass-sh),var(--glass-hi),var(--glass-line) }
  }

  /* — CHAMP AMBIANT COCKPIT : matière que le verre réfracte (sans ça, verre invisible).
       Night-first (blobs oxblood/bleu francs) ; jour = mêmes teintes, discrètes (quiet luxury).
       Posé DERRIÈRE les cartes (z-index:-1) → capté par leur backdrop-filter. */
  #v-dash{ position:relative; z-index:0 }
  #v-dash::before{
    content:""; position:absolute; inset:-40px -40px 0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(50vw 42vh at 84% 28%, oklch(0.55 0.14 28 / .15), transparent 60%),
      radial-gradient(46vw 40vh at 10% 70%, oklch(0.62 0.10 250 / .11), transparent 62%),
      radial-gradient(40vw 36vh at 60% 2%,  oklch(0.70 0.09 60 / .07), transparent 58%);
  }
  html.night #v-dash::before{
    background:
      radial-gradient(54vw 48vh at 86% 24%, oklch(0.53 0.17 28 / .32), transparent 60%),
      radial-gradient(50vw 44vh at 6% 74%,  oklch(0.55 0.13 250 / .22), transparent 62%),
      radial-gradient(42vw 40vh at 56% 0%,  oklch(0.60 0.10 60 / .13), transparent 58%);
    filter:blur(4px);
  }

  /* ============================================================
     ONE-PAGE APP SHELL v18 — feel app native (feedback fondateur 2026-07-10).
     Le shell (sidebar) reste FIXE ; le viewport ne grandit pas ; seule la zone
     contenu scrolle en interne à hauteur d'écran. Scopé desktop (mobile = dock fixe).
     ============================================================ */
  @media (min-width:901px){
    html,body{ height:100%; overflow:hidden }              /* aucun scroll de page */
    .app{ height:100dvh; overflow:hidden; align-items:stretch }
    .side{ height:100dvh; top:0 }
    .content{ height:100dvh; overflow-y:auto; overscroll-behavior:contain;
      scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
      padding-top:36px; padding-bottom:56px}
    .content::-webkit-scrollbar{ width:9px }
    .content::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:var(--r); border:2px solid transparent; background-clip:content-box }
    .content::-webkit-scrollbar-track{ background:transparent }
  }

  /* ============================================================
     JONCTION v18 — bouton fiche « Générer la proposition » + vue Propositions (/p).
     ============================================================ */
  /* — bloc jonction dans la fiche — */
  .jonc{ display:flex; gap:20px; align-items:center; flex-wrap:wrap;
    background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--sh-1); padding:20px 20px}
  .jonc-l{ flex:1; min-width:220px }
  .jonc-amt{ font-family:var(--mono); font-weight:700; font-size:var(--fs-6); letter-spacing:-.02em; color:var(--ink); line-height:1.1; display:flex; flex-direction:column; gap:4px}
  .jonc-amt-s{ font-family:var(--sans); font-weight:400; font-size:var(--fs-1); letter-spacing:.04em; text-transform:uppercase; color:var(--grey) }
  .jonc-note{ font-size:var(--fs-2); color:var(--grey); margin-top:12px; max-width:52ch; line-height:1.5} .jonc-note b{ color:var(--ink-2) }
  .jonc-r{ display:flex; flex-direction:column; gap:12px; align-items:flex-start }
  .jonc-btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:1px solid var(--oxblood);
    background:var(--oxblood); color:oklch(1 0 0); font-family:var(--sans); font-weight:500; font-size:var(--fs-3); padding:12px 20px; border-radius:var(--r-sm);
    box-shadow:var(--sh-1); transition:transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) }
  html.night .jonc-btn{ color:var(--paper) }
  .jonc-btn:hover{ transform:translateY(-1px); box-shadow:var(--sh-2) }
  .jonc-btn:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .jonc-btn.sent{ background:transparent; color:var(--ink-2); border-color:var(--line-2); cursor:default }
  .jonc-btn.sent:hover{ transform:none; box-shadow:var(--sh-1) }
  .jonc-done{ font-size:var(--fs-2); color:var(--grey) }
  .jonc-link{ background:none; border:0; cursor:pointer; color:var(--oxblood); font-family:var(--sans); font-size:var(--fs-2); padding:0; text-decoration:underline; text-underline-offset:2px }

  /* — pastilles de statut /p (partagées fiche + vue) — */
  .jonc-pill{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase; padding:4px 12px; border-radius:var(--r-pill); font-weight:700 }
  .st-envoye{ background:oklch(0.6 0.01 106 / .16); color:var(--grey-2) }
  .st-vu{ background:oklch(0.553 0.164 259 / .18); color:var(--btp-chip) }
  .st-confirme{ background:oklch(0.729 0.145 70 / .2); color:var(--gc-chip) }
  .st-paye{ background:oklch(0.485 0.07 156 / .2); color:var(--pine-chip) }
  html.night .st-vu{ color:oklch(0.7 0.14 259) } html.night .st-confirme{ color:oklch(0.8 0.14 75) } html.night .st-paye{ color:oklch(0.72 0.11 156) }

  /* — vue Propositions — */
  .props-sum{ display:flex; gap:16px; flex-wrap:wrap; margin:24px 0 20px}
  .ps-c{ flex:1; min-width:140px; background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--sh-1); padding:16px 20px; display:flex; flex-direction:column; gap:4px}
  .ps-k{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.12em; text-transform:uppercase; color:var(--grey) }
  .ps-v{ font-family:var(--mono); font-weight:700; font-size:var(--fs-5); letter-spacing:-.02em; color:var(--ink); line-height:1.1}
  .ps-paid{ color:var(--pine) } html.night .ps-paid{ color:oklch(0.72 0.11 156) }
  .props-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px}
  .prop-card{ background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--sh-1); padding:16px 20px; display:flex; flex-direction:column; gap:16px}
  /* #4 — message envoyé, révélable + copiable */
  .pc-msg{ border-top:1px solid var(--line); padding-top:12px; margin-top:-4px}
  .pc-msg>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; min-height:44px; font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.06em; text-transform:uppercase; color:var(--grey); transition:color 0.12s var(--e-out) }
  .pc-msg>summary::-webkit-details-marker{ display:none } .pc-msg>summary::marker{ content:"" }
  .pc-msg>summary:hover{ color:var(--ink) } .pc-msg>summary:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px; border-radius:var(--r-sm)}
  .pc-msg>summary::after{ content:"›"; margin-left:auto; font-family:var(--sans); transition:transform 0.2s var(--e-out) } .pc-msg[open]>summary::after{ transform:rotate(90deg) }
  .pc-msg-body{ white-space:pre-wrap; font-size:var(--fs-3); line-height:1.5; color:var(--ink-2); max-width:68ch; background:var(--paper-2); border-radius:var(--r-sm); padding:12px 16px; margin:4px 0 12px}
  .pc-copy{ align-self:flex-start }
  .pc-top{ display:flex; align-items:flex-start; gap:12px}
  .pc-dot{ width:9px; height:9px; border-radius:var(--r-pill); flex:none; margin-top:8px}
  .pc-id{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
  .pc-name{ appearance:none; background:none; border:0; cursor:pointer; text-align:left; padding:0; font-family:var(--sans); font-weight:600; font-size:var(--fs-3); color:var(--ink); letter-spacing:-.01em }
  .pc-name:hover{ color:var(--oxblood) } .pc-name:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px; border-radius:var(--r-sm)}
  .pc-meta{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); letter-spacing:.02em }
  .pc-amt{ font-family:var(--mono); font-weight:700; font-size:var(--fs-4); color:var(--ink); flex:none }
  .pc-track{ display:flex; align-items:center; gap:0}
  .pt-node{ width:9px; height:9px; border-radius:var(--r-pill); flex:none; background:var(--line-2); transition:background var(--t-mid) }
  .pt-node.done{ background:var(--oxblood) } .pt-node.cur{ box-shadow:0 0 0 3px var(--oxblood-soft) }
  .pt-line{ flex:1; height:2px; background:var(--line-2); margin:0 4px}
  .pc-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px}
  .pc-adv{ appearance:none; cursor:pointer; background:var(--paper-2); border:1px solid var(--line-2); border-radius:var(--r-sm); color:var(--ink-2); font-family:var(--sans); font-size:var(--fs-2); padding:8px 12px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; transition:border-color var(--t-fast), background var(--t-fast) }
  .pc-adv:hover{ border-color:var(--oxblood); background:var(--oxblood-soft) } .pc-adv:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  .pc-closed,.pc-wait{ font-family:var(--mono); font-size:var(--fs-1); color:var(--grey); letter-spacing:.04em }
  .props-empty{ text-align:center; max-width:420px; margin:60px auto; display:flex; flex-direction:column; align-items:center; gap:12px}
  .pe-med{ width:64px; height:64px; border-radius:var(--r); background:oklch(0.145 0 0); position:relative; overflow:hidden; box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-1) }
  .pe-med::before{ content:""; position:absolute; inset:0; background:url("../assets/concepts/scratch-dossier.dark.webp") center/cover no-repeat; opacity:.9 }
  html.night .pe-med::before{ filter:brightness(1.3) }
  .pe-t{ font-weight:600; font-size:var(--fs-4)} .pe-p{ font-size:var(--fs-3); color:var(--grey); line-height:1.5}
  @media (max-width:680px){ .jonc{ flex-direction:column; align-items:stretch } .jonc-r{ align-items:stretch } .jonc-btn{ justify-content:center } }

  /* ============================================================
     DÉBLOCAGE NICHE v18 — modal + flip 🔒→ouvert (niche-badge-deblocage = objet composé).
     ============================================================ */
  .unlock-modal{ position:fixed; inset:0; z-index:130; display:grid; place-items:center; padding:24px}
  .unlock-modal[hidden]{ display:none }
  .ul-scrim{ position:absolute; inset:0; background:oklch(0.145 0 0 / .55); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px) }
  .ul-card{ position:relative; z-index:1; width:min(400px,92vw); text-align:center; padding:36px 32px 28px;
    background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--sh-3);
    display:flex; flex-direction:column; align-items:center; gap:8px; animation:ulpop 0.45s var(--e-spring) }
  @keyframes ulpop{ from{opacity:0;transform:translateY(12px) scale(.96)} to{opacity:1;transform:none} }
  .ul-badge{ width:96px; height:96px; margin-bottom:12px; position:relative; transform-style:preserve-3d; transition:transform 0.45s var(--e-spring) }
  .ul-badge.flipped{ transform:rotateY(180deg) }
  .ul-face{ position:absolute; inset:0; border-radius:var(--r-lg); display:grid; place-items:center; -webkit-backface-visibility:hidden; backface-visibility:hidden; overflow:hidden }
  .ul-lock{ background:var(--paper-2); border:1px solid var(--line-2); color:var(--grey) }
  .ul-lock svg{ width:34px; height:34px }
  .ul-open{ transform:rotateY(180deg); background:oklch(0.145 0 0); box-shadow:inset 0 0 0 1px var(--nc,var(--oxblood)), 0 0 26px -4px var(--nc,var(--oxblood)) }
  .ul-open::before{ content:""; position:absolute; inset:0; background:url("../assets/concepts/niche-badge-deblocage.dark.webp") center/cover no-repeat; filter:brightness(1.4) contrast(1.05) }
  .ul-open::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 42%, var(--nc,var(--oxblood)), transparent 62%); opacity:.32; mix-blend-mode:screen }
  .ul-k{ font-family:var(--mono); font-size:var(--fs-1); letter-spacing:.18em; text-transform:uppercase; color:var(--nc,var(--oxblood)) }
  .ul-name{ font-weight:600; font-size:var(--fs-5); letter-spacing:-.02em; color:var(--ink); line-height:1.1}
  .ul-sub{ font-size:var(--fs-3); color:var(--grey); line-height:1.5; max-width:32ch; margin:4px 0 12px}
  .ul-acts{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center }
  .ul-btn{ cursor:pointer; border:1px solid var(--oxblood); background:var(--oxblood); color:oklch(1 0 0); font-family:var(--sans); font-weight:500; font-size:var(--fs-3); padding:12px 24px; border-radius:var(--r-sm); transition:transform var(--t-fast) }
  html.night .ul-btn{ color:var(--paper) }
  .ul-btn:hover{ transform:translateY(-1px) }
  .ul-goto{ cursor:pointer; border:1px solid var(--line-2); background:transparent; color:var(--ink-2); font-family:var(--sans); font-size:var(--fs-3); padding:12px 20px; border-radius:var(--r-sm); transition:border-color var(--t-fast) }
  .ul-goto:hover{ border-color:var(--oxblood) }
  .ul-btn:focus-visible,.ul-goto:focus-visible{ outline:2px solid var(--oxblood); outline-offset:2px }
  @media(prefers-reduced-motion:reduce){ .ul-card{ animation:none } .ul-badge{ transition:none } }

/* ===== Phase 1 — planchers de lisibilité + purge blur (overrides) ===== */
svg text, svg tspan{ font-size:0.6875rem; line-height:1.3 }   /* labels de graphe ≥ 11px + fin du ratio 'normal' */
small{ font-size:var(--fs-2) }          /* <small> non scopé (UA 0.833em) → 13px */
sup, sub{ font-size:var(--fs-1) }       /* fin du 0.833em UA sur les exposants → 11px */
.tp-h{ font-size:var(--fs-1) !important }   /* titre panneau posé en inline .62rem par legacy.js */
button, input, select, textarea, option{ line-height:1.3 }   /* fin du line-height:normal des form controls / <option> */
.porte-h{ color:var(--ink-2) }          /* en-têtes de section sidebar → AA */
.porte-s{ color:var(--ink-2) !important; opacity:1 !important }   /* labels de section : fin de l'opacité .85 qui ternissait le contraste */
.brand .bk, .kick{ font-weight:700 }     /* kickers oxblood plus denses → sampler + lisibilité */
.tip .ttech, .tip .tbody b{ color:var(--oxblood-ink) }   /* emphase inline oxblood : jour inchangé, nuit relevée (--oxblood-ink). Spécificité = règles legacy (0,2,x) */
html.night .tip .ttech{ font-weight:600 }   /* tag technique 11px : trait plus plein → lisibilité nuit */
.fbtn{ background:var(--surface-solid); color:var(--ink) }   /* onglets funnel : PAPIER lisible (encre sur teinte = sous-AA) */
.cnt, .cnt2{ font-size:var(--fs-2); font-weight:700 }   /* compteurs mono plus gros+denses → le sampler capte l'encre */
/* backdrop-filter retiré des CARTES de contenu/liste (arête+spéculaire+fond opaque = identique, 20× moins cher).
   Gardé sur scrims/modales/cmdk/nav/loader uniquement (≤3 simultanés). */
.card, .strip-card, .ck-today, .hcard, .ck-mini, .ck-more, .meth-toc{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important }
/* sidebar NUIT : le voile blanc .62 éclaircissait le haut → écrasait le kicker oxblood et les labels */
html.night .side{ background: linear-gradient(180deg, oklch(1 0 0/.05), oklch(1 0 0/.015) 40%, transparent 78%), oklch(0.155 0.004 106) }   /* fond quasi-bg (0.155) : max de contraste pour kicker + labels */