@layer components{
  /* ══ Socle composants - CDC_UPDATE.md lot U2 ══
     .btn : équivalent visuel du button global (03-layout.css:137) mais portable
     sur <a>/<label>. Variantes primary/secondary/danger/ghost, tailles sm/lg/mini.
     .btn-sm = alias historique émis par certains JS (= .btn.sm). */
  .btn,.btn-sm{font:inherit;font-size:var(--fs-md);border:1px solid var(--line);background:var(--card);color:var(--txt);
    padding:var(--sp-6) var(--sp-12);border-radius:var(--radius-sm);cursor:pointer;font-weight:var(--fw-medium);
    display:inline-flex;align-items:center;gap:var(--sp-6);text-decoration:none;user-select:none;
    transition:background .12s,border-color .12s,color .12s}
  .btn:hover,.btn-sm:hover{border-color:var(--mut2);background:var(--line2)}
  .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-solid)}
  .btn.primary:hover{background:var(--accent-h);border-color:var(--accent-h)}
  .btn.secondary{background:var(--card);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--txt)}
  .btn.secondary:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--card))}
  .btn.danger{border-color:color-mix(in srgb,var(--err) 40%,var(--line));color:var(--err);background:transparent}
  .btn.danger:hover{background:var(--err);color:var(--on-solid);border-color:var(--err)}
  .btn.ghost{border-color:transparent;background:transparent;color:var(--mut)}
  .btn.ghost:hover{color:var(--txt);background:var(--line2);border-color:transparent}
  /* Tailles */
  .btn.sm,.btn-sm{font-size:var(--fs-sm);padding:var(--sp-4) var(--sp-8)}
  .btn.lg{font-size:var(--fs-base);padding:var(--sp-8) var(--sp-16)}
  /* .mini : géométrie héritée de 11-business.css:402 (qui garde la main en cascade) */
  .btn.mini{padding:var(--sp-4) var(--sp-12);font-size:var(--fs-sm);font-weight:var(--fw-strong);background:var(--card2)}
  .btn.mini:hover{background:var(--card);border-color:var(--accent)}
  .btn[disabled],.btn.loading,.btn-sm[disabled]{opacity:.55;pointer-events:none}

  /* En-tête de section : titre + sous-titre + actions à droite */
  .sec-head{display:flex;align-items:flex-start;gap:var(--sp-14);margin-bottom:var(--sp-14)}
  .sec-head h2{margin:0 0 var(--sp-2);font-size:var(--fs-lg)}
  .sec-head p{margin:0;color:var(--mut);font-size:var(--fs-md)}
  .sec-head .sec-actions{margin-left:auto;display:flex;gap:var(--sp-8)}

  /* État vide générique */
  .empty-state{text-align:center;color:var(--mut);font-size:var(--fs-md);padding:var(--sp-26) var(--sp-16)}
  .empty-state .es-title{font-weight:var(--fw-strong);color:var(--txt);font-size:var(--fs-base);margin-bottom:var(--sp-4)}
  .empty-state .es-act{margin-top:var(--sp-12)}

  /* Scrollbars utilitaires */
  /* Conservé pour le code existant : la barre maison s'applique déjà partout. */
  .scroll-thin{scrollbar-color:var(--sb-thumb) transparent}
  .scroll-thin::-webkit-scrollbar{width:var(--sb-size);height:var(--sb-size)}
  .scroll-thin::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:var(--radius-pill);
    border:var(--sb-pad) solid transparent;background-clip:padding-box}
  .scroll-thin::-webkit-scrollbar-track{background:transparent}
  .scroll-hidden{scrollbar-width:none}
  .scroll-hidden::-webkit-scrollbar{display:none}
  /* ══ Fin socle composants ══ */

  /* ── Modal (native <dialog>) ── */
  dialog{border:none;padding:0;background:transparent;color:var(--txt);max-width:none;max-height:none;margin:auto}
  dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(3px)}
  @media (prefers-reduced-motion:no-preference){
    dialog[open]{animation:pop .16s ease}
    @keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
  }
  .modal-card{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius-modal);box-shadow:var(--elev-1)}
  .modal-head{position:sticky;top:0;background:var(--card);display:flex;align-items:center;gap:var(--sp-12);
    padding:var(--sp-18) var(--sp-20);border-bottom:1px solid var(--line);z-index:1}
  .modal-head h2{margin:0;font-size:var(--fs-lg);font-weight:var(--fw-strong);flex:1;letter-spacing:-.01em}
  .modal-body{padding:var(--sp-18) var(--sp-20)}
  .modal-foot{position:sticky;bottom:0;background:var(--card);display:flex;gap:var(--sp-10);justify-content:flex-end;
    padding:var(--sp-16) var(--sp-20);border-top:1px solid var(--line)}
  .modal-foot .left{margin-right:auto}
  #modal.wide .modal-card{width:min(920px,calc(100vw - 32px))}

  /* ── Assistant « Nouveau projet » - modal plein format, split 1/3 (rail) / 2/3 (contenu) ── */
  /* Format FIXE et compact : la carte ne bouge plus d'une étape à l'autre - le chrome
     reste immobile, seul le contenu change. Les étapes longues défilent (cf. chaîne de
     contrainte plus bas), les courtes respirent. */
  #modal.wizard .modal-card{width:min(1020px,calc(100vw - 28px));height:min(660px,calc(100vh - 40px));
    display:flex;flex-direction:column;overflow:hidden}
  /* Survols instantanés : les transitions rendaient les longues listes poussives
     (des dizaines de lignes repeintes au passage de la souris). */
  #modal.wizard *,#modal.wizard *::before,#modal.wizard *::after{transition-duration:0s}
  #modal.wizard .wizx{flex:1 1 auto;min-height:0}
  #modal.wizard .wizx-head h3:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius-xs)}
  #modal.wizard .wizx-head h3:focus:not(:focus-visible){outline:none}
  #modal.wizard .modal-head{display:none}
  /* Chaîne de contrainte : la carte plafonne, le corps se comprime, le contenu défile.
     Sans `display:flex` + `min-height:0` ici, une étape longue pousse la grille au-delà
     du plafond et se fait couper par l'`overflow:hidden` de la carte au lieu de défiler. */
  #modal.wizard .modal-body{flex:1 1 auto;min-height:0;padding:0;display:flex;overflow:hidden}
  .wizx{display:grid;grid-template-columns:minmax(258px,1fr) 2.2fr;min-height:0}
  .wizx-side{position:relative;display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-18) var(--sp-16) var(--sp-14);
    border-right:1px solid var(--line);background:var(--bg2);min-height:0;overflow:auto}
  /* Halo d'accent en haut de colonne : donne un point de départ au regard sans bruit. */
  .wizx-side::before{content:"";position:absolute;inset:0 0 auto;height:210px;pointer-events:none;
    background:radial-gradient(120% 100% at 22% 0,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)}
  .wizx-side>*{position:relative}
  .wizx-brand{display:flex;align-items:center;gap:var(--sp-8)}
  .wizx-logo{width:30px;height:30px;border-radius:var(--radius);display:grid;place-items:center;flex:none;
    background:linear-gradient(135deg,var(--accent),var(--accent-h));color:var(--on-solid);
    box-shadow:0 3px 10px color-mix(in srgb,var(--accent) 32%,transparent)}
  .wizx-logo svg.ic{width:16px;height:16px}
  .wizx-bt{font-weight:var(--fw-bold);font-size:var(--fs-base);letter-spacing:-.01em}
  .wizx-bs{font-size:var(--fs-xs);color:var(--mut)}
  /* Jauge d'avancement : le repère immédiat, avant même de lire le rail. */
  .wizx-prog{height:3px;border-radius:var(--radius-xs);background:var(--line2);overflow:hidden;flex:none}
  .wizx-prog i{display:block;height:100%;border-radius:var(--radius-xs);background:var(--accent)}
  .wizx-art{margin:0 -4px;flex:none}
  .wizx-art svg{width:100%;height:auto;display:block;max-height:124px}
  .wizx-side--launch .wizx-art svg{max-height:210px}
  .wizx-rail{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex:0 0 auto}
  .wizx-fill{flex:1 1 auto;min-height:4px}
  .wizx-step{display:flex;gap:var(--sp-10);position:relative;padding:0 0 var(--sp-12);min-width:0}
  .wizx-step:last-child{padding-bottom:0}
  .wizx-step::before{content:"";position:absolute;left:9.5px;top:23px;bottom:3px;width:1.5px;border-radius:var(--radius-xs);background:var(--line2)}
  .wizx-step:last-child::before{display:none}
  .wizx-step.done::before{background:color-mix(in srgb,var(--accent) 45%,var(--line))}
  .wizx-dot{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;
    font-size:var(--fs-2xs);font-weight:var(--fw-bold);background:var(--card2);border:1.5px solid var(--line);color:var(--mut)}
  .wizx-dot svg.ic{width:11px;height:11px}
  .wizx-step.on .wizx-dot{background:var(--accent);border-color:var(--accent);color:var(--on-solid);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
  .wizx-step.done .wizx-dot{background:color-mix(in srgb,var(--accent) 14%,var(--card2));border-color:var(--accent);color:var(--accent)}
  .wizx-stxt{display:flex;flex-direction:column;min-width:0;padding-top:var(--sp-1)}
  .wizx-sl{font-size:var(--fs-sm);font-weight:var(--fw-strong);line-height:var(--lh-tight);color:var(--txt)}
  .wizx-step:not(.on):not(.done) .wizx-sl{color:var(--mut)}
  .wizx-sd{font-size:var(--fs-xs);color:var(--mut);margin-top:var(--sp-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wizx-sbtn{display:flex;gap:var(--sp-10);background:none;border:0;padding:0;margin:0;cursor:pointer;
    text-align:left;color:inherit;font:inherit;min-width:0;flex:1}
  .wizx-sbtn:hover .wizx-sl{color:var(--accent)}
  .wizx-reassure{display:flex;gap:var(--sp-6);align-items:flex-start;font-size:var(--fs-2xs);color:var(--mut2);line-height:1.45;
    margin:0;padding-top:var(--sp-10);border-top:1px solid var(--line2)}
  .wizx-reassure svg.ic{width:12px;height:12px;flex:none;margin-top:var(--sp-1)}
  .wizx-main{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;position:relative}
  .wizx-close{position:absolute;top:12px;right:12px;z-index:2}
  .wizx-head{padding:var(--sp-18) var(--sp-24) var(--sp-2);padding-right:var(--sp-52)}
  .wizx-stepn{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--accent)}
  .wizx-head h3{margin:var(--sp-2) 0 var(--sp-4);font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-.015em}
  .wizx-lead{margin:0;font-size:var(--fs-sm);color:var(--mut);line-height:var(--lh-normal);max-width:600px}
  .wizx-lead b{color:var(--txt);font-weight:var(--fw-strong)}
  .wizx-content{flex:1;min-height:0;overflow:auto;padding:var(--sp-14) var(--sp-24) var(--sp-10);display:flex;flex-direction:column}
  .wizx-content>*{flex:none}
  .wizx-foot{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-10) var(--sp-24);border-top:1px solid var(--line);background:var(--card)}
  .wizx-foot .primary svg.ic{width:15px;height:15px;vertical-align:-2px;margin-right:var(--sp-4)}
  .wizx-foot .primary[disabled]{opacity:.45;cursor:not-allowed}
  .wizx-foot-sp{flex:1 1 auto}
  .wizx-block{font-size:var(--fs-sm);color:var(--mut);text-align:right}
  .wizx-now{background:none;border:0;padding:var(--sp-6) var(--sp-4);color:var(--accent);font-weight:var(--fw-strong);font-size:var(--fs-sm);
    cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
  .wizx-now:hover{color:var(--accent-h,var(--accent));text-decoration-thickness:2px}
  /* Écran de démarrage : les cartes s'étirent pour occuper la hauteur au lieu de
     flotter au milieu ; le reste part en marges automatiques. */
  .wizx-content--center{padding-bottom:var(--sp-18)}
  .wizx-content--center>.wiz-launch{flex:1 1 auto;min-height:230px;max-height:420px;margin:auto 0}
  /* Doublage de classe : .wizx-will est déclaré PLUS BAS à spécificité égale et gagnerait sinon. */
  .wizx-will.wizx-will--promise{background:var(--card);border:0}
  .wizx-will--promise ul{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:var(--sp-6)}
  .wizx-will--promise li{position:relative;padding-left:var(--sp-16);font-size:var(--fs-xs);color:var(--mut);line-height:1.45}
  .wizx-will--promise li::before{content:"";position:absolute;left:2px;top:6px;width:5px;height:5px;
    border-radius:50%;background:color-mix(in srgb,var(--accent) 70%,transparent)}
  .wizx-will--promise li b{color:var(--txt)}
  #modal.wizard .wiz-glist{flex:1 1 auto;max-height:none;min-height:180px}
  #modal.wizard .fb-list{max-height:none;min-height:180px}
  /* Récap - « ce qui va se passer » */
  .wizx-will{border:1px solid var(--line);border-radius:var(--radius-sm);
    background:color-mix(in srgb,var(--accent) 4%,var(--card2));padding:var(--sp-8) var(--sp-10);max-height:36vh;overflow:auto}
  .wizx-will-t{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.06em;
    text-transform:uppercase;color:var(--accent);margin-bottom:var(--sp-4)}
  .wizx-will-t svg.ic{width:11px;height:11px}
  .wizx-will ol{margin:0;padding-left:var(--sp-14);display:flex;flex-direction:column;gap:var(--sp-4)}
  .wizx-will li{font-size:var(--fs-xs);color:var(--mut);line-height:1.42}
  .wizx-will li b{color:var(--txt)} .wizx-will li code{font-size:var(--fs-2xs);word-break:break-all}
  /* Étape « Compléments » */
  .wiz-adwrap{flex:0 1 auto;min-height:170px;max-height:min(46vh,360px);overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-1)}
  .wiz-ad{display:flex;align-items:flex-start;gap:var(--sp-10);padding:var(--sp-8) var(--sp-8);border-radius:var(--radius);cursor:pointer}
  .wiz-ad:hover{background:var(--line2)}
  .wiz-ad.on{background:color-mix(in srgb,var(--accent) 7%,transparent)}
  .wiz-ad.locked{cursor:default}
  .wiz-ad .wiz-tcb{margin-top:var(--sp-6)}
  .wiz-ad .cmp-ic{width:30px;height:30px;flex:none}
  .wiz-ad-main{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;flex:1}
  .wiz-ad-n{font-size:var(--fs-md);font-weight:var(--fw-strong)}
  .wiz-ad-v{font-size:var(--fs-2xs);color:var(--mut2);font-weight:var(--fw-medium)}
  .wiz-ad-d{font-size:var(--fs-xs);color:var(--mut);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .wiz-ad-cat{font-size:var(--fs-2xs);color:var(--mut2);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
    border:1px solid var(--line2);border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-8);margin-top:var(--sp-4)}
  .wiz-adcfg{margin-top:var(--sp-12);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card2);padding:var(--sp-12) var(--sp-14)}
  .wiz-adcfg-t{font-size:var(--fs-sm);font-weight:var(--fw-bold);display:flex;align-items:center;gap:var(--sp-6);margin-bottom:var(--sp-2)}
  .wiz-adcfg-t svg.ic{width:13px;height:13px;color:var(--accent)}
  .wiz-adcfg-s{font-size:var(--fs-xs);color:var(--mut);margin:0 0 var(--sp-10)}
  /* Écran étroit : rail horizontal compact en bandeau, illustration masquée */
  @media(max-width:880px){
    #modal.wizard .modal-card{height:calc(100vh - 20px);width:calc(100vw - 16px)}
    .wizx{grid-template-columns:1fr;grid-template-rows:auto 1fr}
    .wizx-side{flex-direction:row;align-items:center;gap:var(--sp-14);border-right:0;border-bottom:1px solid var(--line);
      padding:var(--sp-12) var(--sp-16);overflow-x:auto;overflow-y:hidden}
    .wizx-art,.wizx-reassure,.wizx-sd,.wizx-bs,.wizx-will,.wizx-fill,.wizx-prog{display:none}
    .wizx-side::before{display:none}
    .wizx-rail{flex-direction:row;gap:var(--sp-14);flex:1}
    .wizx-block{display:none}                      /* la raison reste dans le toast au clic */
    .wiz-idn{max-width:none}
    .wizx-step{padding:0;align-items:center}
    .wizx-step::before{display:none}
    .wizx-head{padding:var(--sp-18) var(--sp-20) var(--sp-4)}
    .wizx-content{padding:var(--sp-14) var(--sp-20) var(--sp-10)}
    .wizx-foot{padding:var(--sp-12) var(--sp-20)}
  }
  /* Store des compléments */
  .cmps-bar{margin-bottom:var(--sp-12)}
  .cmps-search{width:100%;padding:var(--sp-8) var(--sp-12);font-size:var(--fs-md)}
  .cmps-chips{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-bottom:var(--sp-16)}
  .cmps-chip{font-size:var(--fs-sm);color:var(--mut);background:var(--card2);border:1px solid var(--line);
    border-radius:var(--radius-pill);padding:var(--sp-4) var(--sp-12);cursor:pointer;white-space:nowrap;transition:all .12s}
  .cmps-chip:hover{color:var(--txt);border-color:var(--mut2)}
  .cmps-chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-solid)}
  .cmps-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12)}
  @media(max-width:640px){ .cmps-grid{grid-template-columns:1fr} }
  .cmps-card{display:flex;flex-direction:column;gap:var(--sp-8);background:var(--card2);border:1px solid var(--line2);
    border-radius:var(--radius);padding:var(--sp-12) var(--sp-14)}
  .cmps-top{display:flex;align-items:center;gap:var(--sp-10)}
  .cmps-id{display:flex;flex-direction:column;min-width:0}
  .cmps-cat{font-size:var(--fs-2xs);color:var(--mut2);text-transform:uppercase;letter-spacing:.04em;margin-top:var(--sp-2)}
  .cmps-card .cmp-desc{flex:1;margin-top:0}
  .cmps-stats{display:flex;align-items:center;gap:var(--sp-10);font-size:var(--fs-xs);color:var(--mut);flex-wrap:wrap}
  .cmp-stars{color:var(--accent);font-size:var(--fs-sm);letter-spacing:1px}
  .cmp-stars-off{color:var(--line)}
  .cmps-foot{display:flex;align-items:center;gap:var(--sp-8);border-top:1px solid var(--line2);padding-top:var(--sp-8)}
  .cmps-foot .mini svg.ic{width:14px;height:14px}

  /* ── Formulaires ── */
  .field{margin-bottom:var(--sp-14)}
  .field:last-child{margin-bottom:0}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-14)}
  .three{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:var(--sp-14)}
  @media(max-width:480px){ .two,.three{grid-template-columns:1fr} }
  .ent-list{display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-12)}
  .ent-card{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-10) var(--sp-12);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2)}
  .ent-card-ic{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius);background:var(--card2);color:var(--accent)}
  .ent-card-ic svg{width:19px;height:19px}
  .ent-card-r{flex:1;min-width:0}
  .ent-card-n{font-size:var(--fs-md);font-weight:var(--fw-strong)}
  .ent-card-d{font-size:var(--fs-sm);color:var(--mut);margin-top:var(--sp-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ent-empty{display:flex;align-items:center;gap:var(--sp-12);margin-top:var(--sp-12);padding:var(--sp-18) var(--sp-16);border:1px dashed var(--line);border-radius:var(--radius-sm);color:var(--mut);font-size:var(--fs-sm);line-height:var(--lh-normal)}
  .ent-empty svg{flex:none;width:26px;height:26px;color:var(--mut2)}
  /* ── Logo entreprise ── */
  .ent-head-with-logo{display:flex;align-items:flex-start;gap:var(--sp-16)}
  .ent-head-text{flex:1;min-width:0}
  .ent-logo-zone{position:relative;width:68px;height:68px;flex:none;border-radius:var(--radius);background:var(--bg2);border:1.5px solid var(--line);display:grid;place-items:center;cursor:pointer;overflow:hidden;transition:border-color .15s,box-shadow .15s;user-select:none}
  .ent-logo-zone:hover{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
  .ent-logo-ph{display:grid;place-items:center;color:var(--mut2)}
  .ent-logo-ph svg.ic{width:28px;height:28px}
  .ent-logo-img{width:100%;height:100%;object-fit:cover;display:block}
  .ent-logo-ovl{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.42);color:var(--on-solid);opacity:0;transition:opacity .15s;pointer-events:none}
  .ent-logo-ovl svg.ic{width:17px;height:17px}
  .ent-logo-zone:hover .ent-logo-ovl{opacity:1}
  .ent-logo-rm{position:absolute;top:4px;right:4px;width:19px;height:19px;border-radius:50%;background:rgba(0,0,0,.6);color:var(--on-solid);border:none;cursor:pointer;display:grid;place-items:center;padding:0;opacity:0;transition:opacity .15s;z-index:2;line-height:var(--lh-flat)}
  .ent-logo-rm svg.ic{width:10px;height:10px}
  .ent-logo-zone:hover .ent-logo-rm{opacity:1}
  .lang-list{display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-10)}
  .lang-row{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-10) var(--sp-12);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2)}
  .lang-row.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
  .lang-r{flex:1;min-width:0}
  .lang-n{font-size:var(--fs-md);font-weight:var(--fw-strong);display:flex;align-items:center;gap:var(--sp-8)}
  .lang-d{font-size:var(--fs-xs);color:var(--mut);margin-top:var(--sp-2)}
  .lang-tag{font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.03em;padding:var(--sp-2) var(--sp-6);border-radius:var(--radius-pill);background:var(--card2);color:var(--mut);border:1px solid var(--line)}
  .lang-tag.ok{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
  .lang-tag.mut{opacity:.7}
  .lang-x{flex:none;width:30px;height:30px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:var(--radius-sm);background:transparent;color:var(--mut);cursor:pointer}
  .lang-x:hover{color:var(--err);border-color:var(--err)}
  .lang-x svg{width:15px;height:15px}
  label{font-size:var(--fs-sm);color:var(--mut);display:block;margin-bottom:var(--sp-4);font-weight:var(--fw-medium)}
  .req{color:var(--err)}
  input,select{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--txt);
    padding:var(--sp-8) var(--sp-10);border-radius:var(--radius-sm);font:inherit;font-size:var(--fs-base)}
  input[type=checkbox],input[type=radio]{width:auto;padding:0;border:revert;background:revert}
  input::placeholder{color:var(--mut2)}
  input:hover,select:hover{border-color:var(--mut2)}
  input:focus,select:focus{border-color:var(--accent)}
  /* Chrome peint tout champ auto-rempli en jaune/bleu pâle, ignore `background`
     et ne laisse passer qu'une ombre : on ré-injecte donc le fond normal en
     `box-shadow` inset (assez large pour couvrir le champ) plutôt qu'en
     background - c'est le seul levier qui marche sur l'autofill. Le délai de
     transition à 9999s empêche le flash jaune le temps que Chrome bascule. */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--txt);caret-color:var(--txt);
    -webkit-box-shadow:0 0 0 1000px var(--bg2) inset;
    box-shadow:0 0 0 1000px var(--bg2) inset;
    transition:background-color 9999s ease-in-out 0s}
  .field .desc{font-size:var(--fs-xs);color:var(--mut2);margin-top:var(--sp-4)}
  .field textarea{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--txt);
    padding:var(--sp-8) var(--sp-10);border-radius:var(--radius-sm);font:inherit;font-size:var(--fs-base);resize:vertical;line-height:var(--lh-normal)}
  .field textarea::placeholder{color:var(--mut2)}
  .field textarea:hover{border-color:var(--mut2)} .field textarea:focus{border-color:var(--accent);outline:none}
  input[type=color]{padding:var(--sp-2);height:40px;cursor:pointer}
  .color-row{display:flex;gap:var(--sp-10);align-items:center}
  .color-row input[type=color]{width:52px;flex:none}
  .color-row input[type=text]{flex:1;font-family:var(--font-mono)}

  /* ── Assistant « Nouveau projet » ── */
  .wiz-prog{margin-bottom:var(--sp-18)}
  .wiz-dots{display:flex;gap:var(--sp-6);margin-bottom:var(--sp-8)}
  .wiz-dot{flex:1;height:5px;border-radius:var(--radius-xs);border:0;padding:0;background:var(--line);transition:background .15s}
  .wiz-dot.done{background:color-mix(in srgb,var(--accent) 55%,var(--line));cursor:pointer}
  .wiz-dot.done:hover{background:var(--accent)}
  .wiz-dot.on{background:var(--accent)}
  .wiz-prog-l{font-size:var(--fs-sm);color:var(--mut)}
  .wiz-prog-n{font-weight:var(--fw-strong);color:var(--txt)}
  .wiz-lead{margin:0 0 var(--sp-14);font-size:var(--fs-base);color:var(--mut)}
  .wiz-lead b{color:var(--txt);font-weight:var(--fw-strong)}
  /* Tuiles de plateformes (cible) */
  .wiz-sep{display:flex;align-items:center;gap:var(--sp-10);margin:var(--sp-20) 0 var(--sp-10);font-size:var(--fs-xs);font-weight:var(--fw-bold);
    letter-spacing:.06em;text-transform:uppercase;color:var(--mut2)}
  .wiz-sep::after{content:"";flex:1;height:1px;background:var(--line)}
  .wiz-tsec .wiz-sep:first-child{margin-top:var(--sp-22)}
  /* Étape « Identité » / « Emplacement » : formulaire court, colonne étroite lisible. */
  .wiz-idn{display:flex;flex-direction:column;gap:var(--sp-14);max-width:560px}
  .wiz-idn .field{margin:0}
  .wiz-plats{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:var(--sp-8)}
  .wiz-plat{display:flex;flex-direction:column;align-items:center;gap:var(--sp-8);text-align:center;padding:var(--sp-14) var(--sp-8);
    border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2);cursor:pointer;transition:border-color .12s,background .12s}
  .wiz-plat:hover{border-color:var(--mut2)}
  .wiz-plat.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg2));box-shadow:0 0 0 1px var(--accent) inset}
  .wiz-plat-ic{display:grid;place-items:center;width:32px;height:32px;color:var(--mut)}
  .wiz-plat.on .wiz-plat-ic{color:var(--accent)}
  .wiz-plat-ic svg.ic{width:22px;height:22px}
  .wiz-plat-l{font-size:var(--fs-sm);font-weight:var(--fw-medium);line-height:1.25}
  .wiz-choice{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12)}
  @media(max-width:520px){ .wiz-choice{grid-template-columns:1fr} }
  .wiz-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-8);text-align:left;
    background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-16);cursor:pointer}
  .wiz-card:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--card))}
  .wiz-card.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
  .wiz-card.big{min-height:150px}
  .wiz-card.disabled{opacity:.5;cursor:not-allowed}
  .wiz-card.disabled:hover{border-color:var(--line);background:var(--bg2)}
  /* Écran de démarrage : les trois entrées sont EN LIGNE (icône · texte · action) plutôt
     qu'en trois colonnes hautes. Le markup reste plat (4 spans) : c'est la grille qui les
     place, via des zones nommées - aucun changement côté JS. */
  .wiz-launch{display:grid;grid-template-columns:1fr;gap:var(--sp-10);align-content:center}
  .wiz-launch .wiz-card.big{min-height:0}
  .wiz-launch .wiz-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"ic t go" "ic d go";align-items:center;column-gap:var(--sp-14);row-gap:var(--sp-2);padding:var(--sp-14) var(--sp-16)}
  .wiz-launch .wiz-ic{grid-area:ic}
  .wiz-launch .wiz-card-t{grid-area:t;align-self:end;font-size:var(--fs-base)}
  .wiz-launch .wiz-card-d{grid-area:d;align-self:start;font-size:var(--fs-sm);line-height:1.45}
  .wiz-launch .wiz-card-go{grid-area:go;margin:0;padding:0;white-space:nowrap}
  /* Étroit : l'action passe sous le texte plutôt que de comprimer la description. */
  @media(max-width:760px){
    .wiz-launch .wiz-card{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic t" "ic d" "go go"}
    .wiz-launch .wiz-card-go{margin-top:var(--sp-6)}
  }
  .wiz-card-go{margin-top:auto;padding-top:var(--sp-10);display:flex;align-items:center;gap:var(--sp-4);
    font-size:var(--fs-xs);font-weight:var(--fw-strong);color:var(--accent);opacity:.7}
  .wiz-card-go svg.ic{width:12px;height:12px}
  .wiz-card:hover .wiz-card-go,.wiz-card:focus-visible .wiz-card-go{opacity:1}
  .wiz-card-ai{background:color-mix(in srgb,var(--accent) 5%,var(--bg2));border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
  .wiz-card-ai .wiz-ic{background:var(--accent);color:var(--on-solid);flex-shrink:0}

  /* ── Mode « Discuter de votre projet » (36-wizard-ai.js, CDC_WIZARD_AI.md) ── */
  .wzai-rail .wizx-step:not(.on){opacity:.55}
  .wzai-wrap{padding-bottom:var(--sp-10)}
  .wzai-thread{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--sp-10);padding:var(--sp-2) var(--sp-2) var(--sp-8)}
  .wzai-b{max-width:86%;padding:var(--sp-8) var(--sp-12);border-radius:var(--radius);font-size:var(--fs-md);line-height:1.55;white-space:normal;word-break:break-word}
  .wzai-b.me{align-self:flex-end;background:var(--accent);color:var(--on-solid);border-bottom-right-radius:4px;white-space:pre-wrap}
  .wzai-b.ai{align-self:flex-start;background:var(--bg2);border:1px solid var(--line);border-bottom-left-radius:4px}
  .wzai-b.ai code{font-size:var(--fs-xs)}
  .wzai-typing{align-self:flex-start;display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-8) var(--sp-12);color:var(--mut)}
  .wzai-typing span{width:6px;height:6px;border-radius:50%;background:var(--mut);animation:wzaiB 1.1s infinite}
  .wzai-typing span:nth-child(2){animation-delay:.18s} .wzai-typing span:nth-child(3){animation-delay:.36s}
  .wzai-typing i{font-style:normal;font-size:var(--fs-xs);color:var(--mut2);margin-left:var(--sp-6)}
  @keyframes wzaiB{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
  .wzai-bar{flex:none;display:flex;gap:var(--sp-8);align-items:flex-end;border-top:1px solid var(--line);padding-top:var(--sp-10)}
  .wzai-in{flex:1;resize:none;min-height:40px;max-height:120px;font-size:var(--fs-md);line-height:1.45}
  .wzai-send{flex:none}
  .wzai-mlabel{font-size:var(--fs-xs);color:var(--mut)}
  .wzai-model{max-width:210px;font-size:var(--fs-sm)}
  .wzai-hello{margin:auto;max-width:480px;text-align:center;display:flex;flex-direction:column;gap:var(--sp-8);align-items:center;padding:var(--sp-24) 0}
  .wzai-hello-ic{width:44px;height:44px;border-radius:var(--radius);display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
  .wzai-hello-ic svg.ic{width:22px;height:22px}
  .wzai-hello-t{font-weight:var(--fw-bold);font-size:var(--fs-base)}
  .wzai-hello-d{font-size:var(--fs-sm);color:var(--mut);line-height:1.55}
  .wzai-ex{display:flex;flex-direction:column;gap:var(--sp-6);margin-top:var(--sp-8);width:100%}
  .wzai-exb{font-size:var(--fs-sm);text-align:left;background:var(--bg2);border:1px dashed var(--line);border-radius:var(--radius);padding:var(--sp-8) var(--sp-12);cursor:pointer;color:var(--txt)}
  .wzai-exb:hover{border-color:var(--accent);color:var(--accent)}
  /* Carte plan */
  .wzai-plan{align-self:stretch;border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:var(--radius-sm);
    background:color-mix(in srgb,var(--accent) 4%,var(--card));padding:var(--sp-12) var(--sp-14);display:flex;flex-direction:column;gap:var(--sp-8)}
  .wzai-plan.off{flex-direction:row;align-items:center;gap:var(--sp-8);font-size:var(--fs-sm);color:var(--mut);opacity:.8}
  .wzai-plan.off svg.ic{width:14px;height:14px;color:var(--accent)}
  .wzai-plan-t{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
  .wzai-plan-t svg.ic{width:14px;height:14px}
  .wzai-pv{font-weight:var(--fw-medium);letter-spacing:var(--ls-none);text-transform:none;color:var(--mut);font-size:var(--fs-xs)}
  .wzai-plan-r{margin:0;font-size:var(--fs-sm);color:var(--txt);line-height:var(--lh-normal)}
  .wzai-warn{font-size:var(--fs-xs);color:var(--warn)} .wzai-err{font-size:var(--fs-xs);color:var(--bad)}
  .wzai-grid{margin:0;display:flex;flex-direction:column;gap:var(--sp-6)}
  .wzai-row{display:grid;grid-template-columns:130px 1fr;gap:var(--sp-10);align-items:start}
  .wzai-row dt{font-size:var(--fs-xs);color:var(--mut);padding-top:var(--sp-6);display:flex;align-items:center;gap:var(--sp-4)}
  .wzai-row dd{margin:0;display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
  .wzai-row dd input:not([type=color]),.wzai-row dd select{width:100%;font-size:var(--fs-sm)}
  .wzai-row dd input[type=color]{width:44px;height:28px;padding:var(--sp-2)}
  .wzai-ads{display:flex;flex-wrap:wrap;gap:var(--sp-4);max-height:96px;overflow:auto}
  .wzai-why{width:16px;height:16px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);color:var(--mut);
    font-size:var(--fs-2xs);line-height:var(--lh-flat);cursor:help;padding:0;flex:none}
  .wzai-why:hover{color:var(--accent);border-color:var(--accent)}
  .wzai-cta{display:flex;align-items:center;gap:var(--sp-10);margin-top:var(--sp-4);flex-wrap:wrap}
  .wzai-cta .primary svg.ic{width:14px;height:14px;vertical-align:-2px;margin-right:var(--sp-4)}
  .wzai-direct{display:flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-xs);color:var(--mut);user-select:none}
  .wzai-badge{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-sm);color:var(--accent);margin-bottom:var(--sp-10);
    border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:var(--radius);padding:var(--sp-6) var(--sp-10);
    background:color-mix(in srgb,var(--accent) 5%,transparent)}
  .wzai-badge svg.ic{width:14px;height:14px;flex:none}
  .wiz-card-f{margin-top:auto;font-size:var(--fs-2xs);color:var(--mut2);word-break:break-all;font-family:var(--font-mono);line-height:1.4}
  .wiz-ic{width:34px;height:34px;border-radius:var(--radius);display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
  .wiz-ic svg.ic{width:18px;height:18px}
  .wiz-card-t{font-weight:var(--fw-strong);font-size:var(--fs-base)}
  .wiz-card-d{font-size:var(--fs-sm);color:var(--mut);line-height:1.45}
  .wiz-pathline{font-size:var(--fs-sm);color:var(--mut)}
  .wiz-pathline code{font-family:var(--font-mono);color:var(--link);background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-1) var(--sp-6);word-break:break-all}
  .wiz-adv{margin-top:var(--sp-4)}
  .wiz-adv summary{font-size:var(--fs-sm);color:var(--mut);cursor:pointer;padding:var(--sp-6) 0;user-select:none}
  .wiz-adv summary:hover{color:var(--txt)} .wiz-adv[open] summary{margin-bottom:var(--sp-8)}
  .wiz-tpls{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8)}
  @media(max-width:520px){ .wiz-tpls{grid-template-columns:1fr} }
  .wiz-tpl{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);text-align:left;
    background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-8) var(--sp-10);cursor:pointer}
  .wiz-tpl:hover{border-color:var(--accent)}
  .wiz-tpl.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
  .wiz-tpl-t{font-weight:var(--fw-strong);font-size:var(--fs-md)}
  .wiz-tpl-d{font-size:var(--fs-xs);color:var(--mut)}
  .wiz-note{display:flex;align-items:center;gap:var(--sp-6);margin-top:var(--sp-8);padding:var(--sp-8) var(--sp-10);border-radius:var(--radius-sm);
    font-size:var(--fs-xs);line-height:1.45;border:1px solid var(--line)}
  .wiz-note code{font-size:var(--fs-xs)}
  .wiz-note svg.ic{width:14px;height:14px;flex:none}
  .wiz-note.ok{background:color-mix(in srgb,var(--ok) 9%,var(--card2));border-color:color-mix(in srgb,var(--ok) 30%,var(--line));color:var(--mut)}
  .wiz-note.warn{background:color-mix(in srgb,var(--warn) 11%,var(--card2));border-color:color-mix(in srgb,var(--warn) 34%,var(--line));color:var(--txt)}
  .lbl-hint{font-weight:var(--fw-regular);color:var(--mut2);font-size:var(--fs-xs)}
  .wiz-hintbox{font-size:var(--fs-sm);color:var(--mut);background:var(--bg2);border:1px dashed var(--line);border-radius:var(--radius-sm);padding:var(--sp-8) var(--sp-10)}
  .wiz-chips{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
  .wiz-chip{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--mut);background:var(--bg2);border:1.5px solid var(--line);
    border-radius:var(--radius);padding:var(--sp-6) var(--sp-14);cursor:pointer;transition:background .12s,border-color .12s,color .12s}
  .wiz-chip:hover{color:var(--txt);border-color:var(--mut2);background:var(--bg3)}
  .wiz-chip.on{background:color-mix(in srgb,var(--accent) 12%,var(--bg2));border-color:var(--accent);color:var(--accent);font-weight:var(--fw-strong)}
  .wiz-chip svg.ic{width:15px;height:15px;flex:none}
  .wiz-name-wrap{display:flex;flex-direction:column;gap:var(--sp-16)}
  .wiz-pathline-name{margin-top:var(--sp-2);padding:var(--sp-10) var(--sp-12);background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm)}
  .wiz-fsearch{width:100%;padding:var(--sp-8) var(--sp-10);font-size:var(--fs-md);margin-bottom:var(--sp-8)}
  .wiz-gbar{display:flex;align-items:center;gap:var(--sp-8);margin-bottom:var(--sp-8)}
  .wiz-gcount{font-size:var(--fs-xs);color:var(--mut);margin-left:auto}
  .wiz-glist{display:flex;flex-direction:column;gap:var(--sp-1);max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-4)}
  .wiz-trow{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-4) var(--sp-6);border-radius:var(--radius-sm)}
  .wiz-trow:hover{background:var(--line2)}
  .wiz-tcaret{background:none;border:0;padding:0;display:inline-flex;align-items:center;justify-content:center;width:16px;flex:none;color:var(--mut2);cursor:pointer}
  .wiz-tcaret svg{width:13px;height:13px;transition:transform .12s}
  .wiz-tcaret.open svg{transform:rotate(90deg)}
  .wiz-tcaret-sp{width:16px;flex:none}
  .wiz-tcb{accent-color:var(--accent);width:15px;height:15px;flex:none;cursor:pointer}
  .wiz-gic{display:inline-flex;flex:none} .wiz-gic svg.ic{width:16px;height:16px;color:var(--mut)}
  .wiz-gname{flex:1;font-size:var(--fs-md);font-weight:var(--fw-medium);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono)}
  .wiz-gmeta{font-size:var(--fs-xs);color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
  .wiz-ghint{font-size:var(--fs-xs);color:var(--mut);margin:var(--sp-10) 0 0}
  /* Liste de fonctionnalités (manifeste socle) */
  .wiz-fcat{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--mut2);font-weight:var(--fw-bold);padding:var(--sp-8) var(--sp-6) var(--sp-2)}
  .wiz-fcat:first-child{padding-top:var(--sp-2)}
  .wiz-feat{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-8) var(--sp-8);border-radius:var(--radius);cursor:pointer}
  .wiz-feat:hover{background:var(--line2)}
  .wiz-feat.locked{cursor:default}
  .wiz-feat-ic{width:30px;height:30px;flex:none;display:grid;place-items:center;font-size:var(--fs-base);background:var(--card2);border:1px solid var(--line2);border-radius:var(--radius)}
  .wiz-feat-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}
  .wiz-feat-n{font-size:var(--fs-md);font-weight:var(--fw-strong);display:flex;align-items:center;gap:var(--sp-6)}
  .wiz-feat-d{font-size:var(--fs-xs);color:var(--mut);line-height:var(--lh-snug);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wiz-feat-meta{font-size:var(--fs-xs);color:var(--mut2);white-space:nowrap;font-variant-numeric:tabular-nums}
  .wiz-feat-req{font-size:var(--fs-2xs);color:var(--accent);border:1px solid var(--accent);border-radius:var(--radius-xs);padding:var(--sp-1) var(--sp-4);text-transform:uppercase;letter-spacing:.03em;font-weight:var(--fw-bold)}
  .recap{margin:0;display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
  .recap>div{display:flex;gap:var(--sp-12);padding:var(--sp-8) var(--sp-12)}
  .recap>div+div{border-top:1px solid var(--line2)}
  .recap dt{flex:none;width:130px;color:var(--mut);font-size:var(--fs-sm);margin:0}
  .recap dd{flex:1;min-width:0;margin:0;font-size:var(--fs-md);word-break:break-all;display:flex;align-items:center;gap:var(--sp-6)}
  .recap dd.mono{font-family:var(--font-mono);font-size:var(--fs-sm)}
  .recap-sw{width:14px;height:14px;border-radius:var(--radius-xs);flex:none;border:1px solid var(--line)}
  /* Navigateur de dossiers */
  .fb{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--bg2)}
  .fb-bar{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-8) var(--sp-10);border-bottom:1px solid var(--line);background:var(--card2)}
  .fb-bar .mini{padding:var(--sp-4) var(--sp-8)}
  .fb-path{flex:1;min-width:0;padding:var(--sp-6) var(--sp-8);font-size:var(--fs-sm)}
  .fb-roots{display:flex;gap:var(--sp-6);flex-wrap:wrap;padding:var(--sp-8) var(--sp-10);border-bottom:1px solid var(--line2)}
  .fb-root{font-size:var(--fs-xs);padding:var(--sp-2) var(--sp-8);border:1px solid var(--line);background:var(--card);border-radius:var(--radius-pill);cursor:pointer;color:var(--mut)}
  .fb-root:hover{border-color:var(--accent);color:var(--txt)}
  .fb-list{max-height:300px;min-height:160px;overflow:auto;padding:var(--sp-4)}
  .fb-row{display:flex;align-items:center;gap:var(--sp-8);width:100%;text-align:left;background:transparent;border:none;
    border-radius:var(--radius-sm);padding:var(--sp-6) var(--sp-8);cursor:pointer;font:inherit;font-size:var(--fs-md)}
  .fb-row:hover{background:var(--line2)}
  .fb-row svg.ic{width:15px;height:15px;flex:none;color:var(--accent)}
  .fb-row .fb-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)}
  .fb-row > svg.ic:last-child{color:var(--mut2);width:13px;height:13px}
  .fb-pick{padding:var(--sp-8) var(--sp-10);border-top:1px solid var(--line);background:var(--card2);font-size:var(--fs-sm);color:var(--mut)}
  .fb-pick code{font-family:var(--font-mono);color:var(--link);word-break:break-all}
  /* Étape « Nature » - que voulez-vous créer ? (multi-sélection, par catégories) */
  .wiz-kindcat{display:flex;align-items:center;gap:var(--sp-6);margin:var(--sp-18) var(--sp-2) var(--sp-8);
    font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
  .wiz-kindcat:first-child{margin-top:var(--sp-2)}
  .wiz-kindcat svg.ic{width:14px;height:14px;color:var(--accent)}
  .wiz-kinds{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10)}
  @media(max-width:560px){ .wiz-kinds{grid-template-columns:1fr} }
  .wiz-kind{display:flex;align-items:center;gap:var(--sp-12);text-align:left;padding:var(--sp-12) var(--sp-14);cursor:pointer;
    background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);transition:border-color .12s,background .12s}
  .wiz-kind:hover{border-color:var(--mut2)}
  .wiz-kind.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg2));box-shadow:0 0 0 1px var(--accent) inset}
  .wiz-kind-ic{width:36px;height:36px;flex:none;border-radius:var(--radius);display:grid;place-items:center;
    background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent)}
  .wiz-kind-ic svg.ic{width:19px;height:19px}
  .wiz-kind-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
  .wiz-kind-l{font-size:var(--fs-md);font-weight:var(--fw-strong);line-height:var(--lh-tight)}
  .wiz-kind-d{font-size:var(--fs-xs);color:var(--mut);line-height:var(--lh-snug)}
  .wiz-kind-chk{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
    border:1.5px solid var(--line2);color:transparent;transition:all .12s}
  .wiz-kind-chk svg.ic{width:13px;height:13px}
  .wiz-kind.on .wiz-kind-chk{background:var(--accent);border-color:var(--accent);color:var(--on-solid)}
  /* Étape « Nature » - panneau « l'IA propose des idées » (en tête) */
  .wiz-ideas{margin:var(--sp-2) 0 var(--sp-4);padding:var(--sp-12) var(--sp-14);border:1px solid var(--line);border-radius:var(--radius-sm);
    background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--bg2)),var(--bg2))}
  .wiz-ideas-head{display:flex;align-items:center;gap:var(--sp-10)}
  .wiz-ideas-ic{width:30px;height:30px;flex:none;border-radius:var(--radius);display:grid;place-items:center;
    background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
  .wiz-ideas-ic svg.ic{width:17px;height:17px}
  .wiz-ideas-tx{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
  .wiz-ideas-tx b{font-size:var(--fs-md);font-weight:var(--fw-strong)}
  .wiz-ideas-tx i{font-size:var(--fs-xs);color:var(--mut);font-style:normal}
  .wiz-ideas-ask{display:flex;gap:var(--sp-8);margin-top:var(--sp-10)}
  .wiz-ideas-topic{flex:1;min-width:0;padding:var(--sp-8) var(--sp-10);font-size:var(--fs-md);border:1px solid var(--line);
    border-radius:var(--radius-sm);background:var(--bg);color:var(--fg)}
  .wiz-ideas-topic:focus{outline:none;border-color:var(--accent)}
  .wiz-ideas-go{flex:none;white-space:nowrap}
  .wiz-ideas-load{display:flex;align-items:center;gap:var(--sp-8);margin-top:var(--sp-10);font-size:var(--fs-sm);color:var(--mut)}
  .wiz-ideas-err{margin-top:var(--sp-8);font-size:var(--fs-sm);color:var(--err)}
  .wiz-ideas-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);margin-top:var(--sp-10)}
  @media(max-width:560px){ .wiz-ideas-grid{grid-template-columns:1fr} }
  .wiz-idea{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-10) var(--sp-12);background:var(--bg);
    border:1px solid var(--line);border-radius:var(--radius-sm)}
  .wiz-idea-t{font-size:var(--fs-md);font-weight:var(--fw-strong);line-height:1.25}
  .wiz-idea-p{font-size:var(--fs-xs);color:var(--mut);line-height:1.4}
  .wiz-idea-ch{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-1)}
  .wiz-idea-chip{display:inline-flex;align-items:center;gap:var(--sp-4);padding:var(--sp-2) var(--sp-8);font-size:var(--fs-2xs);font-weight:var(--fw-medium);
    border-radius:var(--radius-pill);background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent)}
  .wiz-idea-chip svg.ic{width:11px;height:11px}
  .wiz-idea-pick{margin-top:var(--sp-4);align-self:flex-start;padding:var(--sp-4) var(--sp-12);font-size:var(--fs-sm);font-weight:var(--fw-strong);cursor:pointer;
    border:1px solid var(--accent);color:var(--accent);background:transparent;border-radius:var(--radius-pill);transition:all .12s}
  .wiz-idea-pick:hover{background:var(--accent);color:var(--on-solid)}
  .wiz-ideas-foot{margin-top:var(--sp-10)}
  .wiz-ideas-again{display:inline-flex;align-items:center;gap:var(--sp-6);padding:var(--sp-6) var(--sp-12);font-size:var(--fs-sm);cursor:pointer;
    border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:var(--radius-sm)}
  .wiz-ideas-again svg.ic{width:13px;height:13px}
  /* Vue détail d'une idée (immersive) */
  .idd{display:flex;flex-direction:column;gap:var(--sp-16)}
  .idd-hero{position:relative;display:grid;grid-template-columns:minmax(0,210px) 1fr;gap:var(--sp-18);align-items:center;
    padding:var(--sp-16) var(--sp-18);border-radius:var(--radius);overflow:hidden;
    background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--bg2)),var(--bg2))}
  @media(max-width:680px){ .idd-hero{grid-template-columns:1fr} }
  .idd-prev{border-radius:var(--radius);padding:var(--sp-8);background:color-mix(in srgb,var(--accent) 8%,var(--bg));
    border:1px solid var(--line);box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 14%,transparent)}
  .idd-prev-svg{display:block;width:100%;height:auto}
  .idd-hero-tx{display:flex;flex-direction:column;min-width:0}
  .idd-name{width:100%;font-size:var(--fs-xl);font-weight:var(--fw-bold);line-height:var(--lh-tight);padding:var(--sp-4) var(--sp-2);
    background:transparent;border:none;border-bottom:1.5px solid transparent;color:var(--fg)}
  .idd-name:focus{outline:none;border-bottom-color:var(--accent)}
  .idd-pitch{width:100%;margin-top:var(--sp-6);font-size:var(--fs-md);line-height:1.45;color:var(--mut);resize:vertical;
    background:transparent;border:1px solid transparent;border-radius:var(--radius);padding:var(--sp-6) var(--sp-8);font-family:inherit}
  .idd-pitch:hover{border-color:var(--line)}
  .idd-pitch:focus{outline:none;border-color:var(--accent);color:var(--fg)}
  .idd-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--sp-18);align-items:start}
  @media(max-width:680px){ .idd-cols{grid-template-columns:1fr} }
  .idd-col-main,.idd-col-side{display:flex;flex-direction:column;gap:var(--sp-14);min-width:0}
  .idd-sec h4{display:flex;align-items:center;gap:var(--sp-6);margin:0 0 var(--sp-8);font-size:var(--fs-sm);font-weight:var(--fw-bold);
    letter-spacing:.03em;text-transform:uppercase;color:var(--mut)}
  .idd-sec h4 svg.ic{width:14px;height:14px;color:var(--accent)}
  .idd-deliv{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-8)}
  .idd-deliv li{display:flex;align-items:flex-start;gap:var(--sp-10)}
  .idd-deliv-ic{width:30px;height:30px;flex:none;border-radius:var(--radius);display:grid;place-items:center;
    background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
  .idd-deliv-ic svg.ic{width:16px;height:16px}
  .idd-deliv-tx{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
  .idd-deliv-tx b{font-size:var(--fs-md);font-weight:var(--fw-strong)}
  .idd-deliv-tx i{font-size:var(--fs-xs);color:var(--mut);font-style:normal;line-height:var(--lh-snug)}
  .idd-empty{font-size:var(--fs-sm);color:var(--mut)}
  .idd-aisec{padding:var(--sp-12) var(--sp-12);border:1px solid var(--line);border-radius:var(--radius-sm);
    background:color-mix(in srgb,var(--accent) 4%,var(--bg2))}
  .idd-ov{margin:0;font-size:var(--fs-md);line-height:var(--lh-normal)}
  .idd-kv{margin-top:var(--sp-8);font-size:var(--fs-sm);color:var(--mut)}
  .idd-kv b{color:var(--fg);font-weight:var(--fw-strong);margin-right:var(--sp-4)}
  .idd-block{margin-top:var(--sp-10)}
  .idd-block h5{margin:0 0 var(--sp-6);font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--mut);text-transform:uppercase;letter-spacing:.03em}
  .idd-feat{margin:0;padding-left:var(--sp-18);display:flex;flex-direction:column;gap:var(--sp-4);font-size:var(--fs-sm);line-height:1.4}
  .idd-plan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-8)}
  .idd-plan>li{padding:var(--sp-8) var(--sp-10);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg)}
  .idd-plan-h{display:flex;align-items:center;gap:var(--sp-8)}
  .idd-plan-h b{font-size:var(--fs-sm);font-weight:var(--fw-strong);flex:1;min-width:0}
  .idd-plan-add{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-8);font-size:var(--fs-xs);font-weight:var(--fw-strong);cursor:pointer;flex:none;
    border:1px solid var(--accent);color:var(--accent);background:transparent;border-radius:var(--radius-pill);transition:all .12s}
  .idd-plan-add:hover{background:var(--accent);color:var(--on-solid)}
  .idd-plan-add svg.ic{width:11px;height:11px}
  .idd-plan-note{margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--mut);line-height:var(--lh-snug)}
  .idd-plan-ch{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-6)}
  .idd-pchip{display:inline-flex;align-items:center;gap:var(--sp-4);padding:var(--sp-2) var(--sp-8);font-size:var(--fs-2xs);font-weight:var(--fw-medium);
    border-radius:var(--radius-pill);background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent)}
  .idd-pchip svg.ic{width:11px;height:11px}
  .idd-ai-load{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-sm);color:var(--mut)}
  .idd-deepen{display:inline-flex;align-items:center;gap:var(--sp-6);padding:var(--sp-8) var(--sp-14);font-size:var(--fs-sm);font-weight:var(--fw-strong);cursor:pointer;
    border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);border-radius:var(--radius-pill);transition:all .12s}
  .idd-deepen:hover{background:var(--accent);color:var(--on-solid)}
  .idd-deepen svg.ic{width:15px;height:15px}
  .idd-steps{margin:0;padding-left:var(--sp-20);display:flex;flex-direction:column;gap:var(--sp-6);font-size:var(--fs-sm);line-height:1.4}
  .idd-steps li{padding-left:var(--sp-2)}
  .idd-tags{display:flex;flex-wrap:wrap;gap:var(--sp-6)}
  .idd-tag{display:inline-flex;align-items:center;padding:var(--sp-4) var(--sp-10);font-size:var(--fs-xs);font-weight:var(--fw-medium);border-radius:var(--radius-pill);
    background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent)}
  .idd-tag.soft{background:var(--bg2);color:var(--mut)}
  .idd-nats{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-bottom:var(--sp-8)}
  .idd-nat{display:inline-flex;align-items:center;gap:var(--sp-6);padding:var(--sp-4) var(--sp-6) var(--sp-4) var(--sp-8);font-size:var(--fs-sm);font-weight:var(--fw-medium);
    border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--bg2)}
  .idd-nat-ic{display:inline-flex;color:var(--accent)}
  .idd-nat-ic svg.ic{width:13px;height:13px}
  .idd-nat-x{display:grid;place-items:center;width:18px;height:18px;border:none;border-radius:50%;cursor:pointer;
    background:transparent;color:var(--mut);transition:all .12s}
  .idd-nat-x:hover{background:var(--err);color:var(--on-solid)}
  .idd-nat-x svg.ic{width:11px;height:11px}
  .idd-add{width:100%}
  /* Étape « Cibles » - bloc */
  .wiz-tsec{display:flex;flex-direction:column;gap:var(--sp-14)}
  /* Étape « Emplacement » - affichage compact + bouton Finder */
  .wz-place{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-8) var(--sp-10);background:var(--bg2);
    border:1px solid var(--line);border-radius:var(--radius-sm)}
  .wz-place-ic{flex:none;display:inline-flex;color:var(--accent)} .wz-place-ic svg.ic{width:17px;height:17px}
  .wz-place-path{flex:1;min-width:0;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--txt);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:rtl;text-align:left}
  .wz-place-btn{flex:none;width:34px;height:34px;border-radius:var(--radius);display:grid;place-items:center;
    border:1px solid var(--line);background:var(--card);color:var(--mut);cursor:pointer}
  .wz-place-btn:hover{border-color:var(--accent);color:var(--accent)} .wz-place-btn svg.ic{width:17px;height:17px}
  .wz-folder{display:flex;align-items:center;gap:var(--sp-8);margin-top:var(--sp-10);font-size:var(--fs-sm);color:var(--mut)}
  .wz-folder-k{display:inline-flex;align-items:center;gap:var(--sp-6)} .wz-folder-k svg.ic{width:14px;height:14px}
  .wz-folder-v{font-family:var(--font-mono);color:var(--link);background:var(--bg2);
    border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-8);font-size:var(--fs-sm)}
  /* Navigateur de dossiers en pop-up empilée */
  #wz-fb-modal{border:none;padding:0;background:transparent;color:var(--txt);max-width:none;max-height:none;margin:auto}
  #wz-fb-modal::backdrop{background:var(--backdrop);backdrop-filter:blur(3px)}
  .wzfb-card{width:min(620px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius-modal);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
  .wzfb-head{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-14) var(--sp-16);border-bottom:1px solid var(--line)}
  .wzfb-t{flex:1;font-weight:var(--fw-strong);font-size:var(--fs-base);display:flex;align-items:center;gap:var(--sp-8)}
  .wzfb-t svg.ic{width:17px;height:17px;color:var(--accent)}
  .wzfb-card .fb{border:0;border-radius:0;margin:0}
  .wzfb-foot{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-12) var(--sp-16);border-top:1px solid var(--line);background:var(--card2)}

  /* ── Paramètres ── */
  .set-sec{margin-bottom:var(--sp-16);padding-bottom:var(--sp-14);border-bottom:1px solid var(--line2)}
  .set-sec:last-of-type{border-bottom:none;padding-bottom:0}
  .set-label{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--mut);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--sp-10)}
  .set-label svg.ic{width:13px;height:13px;vertical-align:-2px;margin-right:var(--sp-4);opacity:.75}
  .set-row{display:flex;align-items:center;gap:var(--sp-12);min-height:34px}
  .set-row+.set-row{margin-top:var(--sp-4)}
  .set-k{flex:1;font-size:var(--fs-base);display:flex;flex-direction:column;gap:var(--sp-2)}
  .set-d{font-size:var(--fs-xs);color:var(--mut);font-weight:var(--fw-regular)}
  .set-v{flex:none;max-width:60%;font-size:var(--fs-md);color:var(--txt);text-align:right;word-break:break-word}
  .seg{display:inline-flex;gap:var(--sp-2);background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-2);flex:none}
  .seg-theme{display:inline-flex;align-items:center;gap:var(--sp-6);border:none;background:transparent;color:var(--mut);
    padding:var(--sp-6) var(--sp-10);border-radius:var(--radius-sm);font-size:var(--fs-sm);cursor:pointer}
  .seg-theme:hover{color:var(--txt);background:transparent}
  .seg-theme.on{background:var(--accent);color:var(--on-solid)}
  .seg-theme svg.ic{width:15px;height:15px}
  .set-note{font-size:var(--fs-sm);color:var(--mut2);margin:0 0 var(--sp-4);line-height:var(--lh-normal)}
  .set-select{flex:none;width:auto;padding:var(--sp-6) var(--sp-10);font-size:var(--fs-md)}
  .set-dir{display:flex;gap:var(--sp-6);align-items:center;flex:none;max-width:62%}
  .set-dirinput{width:230px;max-width:46vw;padding:var(--sp-6) var(--sp-8);font-size:var(--fs-sm)}
  /* ── Identifiants dans la conversation : flous par défaut, lisibles au survol ──────
     Pudeur d'affichage (épaule, partage d'écran, capture), pas une protection : la valeur
     est dans la page. Ce qui est protégé, c'est ce qui part sur le disque (77-secrets.js). */
  /* Pas de `nowrap` ici : une clé d'API de 60 caractères insécable élargit la bulle et fait
     apparaître une barre de défilement HORIZONTALE dans tout le fil. Elle se coupe donc. */
  .dh-secret{filter:blur(5px);border-radius:var(--radius-sm);cursor:default;
    background:color-mix(in srgb,var(--txt) 8%,transparent);
    transition:filter .12s ease;word-break:break-word;overflow-wrap:anywhere}
  .dh-secret:hover,.dh-secret:focus-visible{filter:none;background:transparent}
  @media (prefers-reduced-motion:reduce){ .dh-secret{transition:none} }
  /* interrupteur */
  .switch{flex:none;width:40px;height:23px;border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--bg2);
    padding:0;cursor:pointer;position:relative;transition:background .15s,border-color .15s}
  .switch.on{background:var(--accent);border-color:var(--accent)}
  .switch-kn{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--on-solid);
    box-shadow:var(--elev-1);transition:left .15s}
  .switch.on .switch-kn{left:19px}
  /* Paramètres - disposition en menu */
  #modal.settings .modal-card{width:min(1080px,calc(100vw - 32px))}
  #modal.settings .modal-body{padding:0}
  .set-layout{display:flex;align-items:stretch;min-height:min(560px,72vh)}
  .set-nav{flex:none;width:208px;padding:var(--sp-10);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:var(--sp-2)}
  .set-nav-item{display:flex;align-items:center;gap:var(--sp-10);width:100%;text-align:left;border:none;background:transparent;color:var(--mut);
    padding:var(--sp-8) var(--sp-10);border-radius:var(--radius);font:inherit;font-size:var(--fs-md);cursor:pointer;transition:background 0s,color 0s}
  .set-nav-item:hover{background:var(--line2);color:var(--txt)}
  .set-nav-item.on{background:var(--accent);color:var(--on-solid)}
  .set-nav-item svg.ic{width:16px;height:16px;flex:none}
  /* Accordéon : élément parent porteur d'un sous-menu + sa flèche */
  .set-nav-item.has-sub .set-nav-l{flex:1;min-width:0}
  .set-nav-caret{flex:none;display:grid;place-items:center;width:16px;height:16px;opacity:.6;transition:transform .15s}
  .set-nav-caret svg.ic{width:14px;height:14px}
  .set-nav-item.has-sub.expanded .set-nav-caret{transform:rotate(90deg)}
  /* Conteneur repliable des sous-éléments (show/hide fiable à toute profondeur) */
  .set-nav-subwrap{display:none;margin:var(--sp-2) 0 var(--sp-2) var(--sp-12);border-left:1px solid var(--line);padding-left:var(--sp-6)}
  .set-nav-subwrap.open{display:block;animation:setNavReveal .18s ease}
  @keyframes setNavReveal{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
  .set-nav-subinner{display:flex;flex-direction:column;gap:var(--sp-2)}
  .set-nav-item.set-nav-sub{font-size:var(--fs-md)}
  .set-pane{flex:1;min-width:0;padding:var(--sp-18) var(--sp-22);max-height:72vh;overflow:auto}
  .set-pane-h{font-size:var(--fs-base);font-weight:var(--fw-strong);margin:0 0 var(--sp-16);letter-spacing:-.01em}
  /* Paramètres → Contenu socle (gestion du contenu de la golden template) */
  .gc-head{display:flex;align-items:center;gap:var(--sp-10);margin:0 0 var(--sp-14)}
  .gc-head .gc-h-r{flex:1;min-width:0}
  .gc-path{font-size:var(--fs-sm);color:var(--mut);margin-top:var(--sp-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gc-actions{display:flex;gap:var(--sp-6);flex:none}
  .gc-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--sp-14);height:min(58vh,520px)}
  @media(max-width:760px){ .gc-grid{grid-template-columns:1fr;height:auto} }
  .gc-tree{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2);overflow:auto;padding:var(--sp-6)}
  .gc-trow{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-4) var(--sp-6);border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-md);min-height:28px}
  .gc-trow:hover{background:var(--line2)}
  .gc-trow.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
  .gc-tcaret{flex:none;width:16px;height:16px;display:grid;place-items:center;color:var(--mut);transition:transform .12s}
  .gc-tcaret.open{transform:rotate(90deg)}
  .gc-tcaret-sp{flex:none;width:16px}
  .gc-gic{flex:none;display:grid;place-items:center;color:var(--mut)}
  .gc-gic svg.ic{width:15px;height:15px}
  .gc-gname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gc-gmeta{flex:none;font-size:var(--fs-xs);color:var(--mut)}
  .gc-trow .gc-x{flex:none;opacity:0;border:none;background:transparent;color:var(--mut);cursor:pointer;padding:var(--sp-2);border-radius:var(--radius-xs);display:grid;place-items:center}
  .gc-trow:hover .gc-x{opacity:1}
  .gc-trow .gc-x:hover{color:var(--err);background:var(--line)}
  .gc-trow .gc-x svg.ic{width:13px;height:13px}
  .gc-view{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2);overflow:hidden}
  .gc-vbar{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-8) var(--sp-10);border-bottom:1px solid var(--line);min-height:42px}
  .gc-vname{flex:1;min-width:0;font-size:var(--fs-md);font-weight:var(--fw-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gc-vmeta{flex:none;font-size:var(--fs-xs);color:var(--mut)}
  .gc-edit{flex:1;width:100%;border:none;outline:none;resize:none;background:var(--card);color:var(--txt);
    font-family:var(--mono,ui-monospace,monospace);font-size:var(--ed-font,13px);line-height:1.55;padding:var(--sp-12) var(--sp-14);tab-size:var(--ed-tab,2)}
  .gc-empty{flex:1;display:grid;place-items:center;text-align:center;color:var(--mut);font-size:var(--fs-md);padding:var(--sp-24)}
  .gc-empty svg.ic{width:30px;height:30px;opacity:.5;margin-bottom:var(--sp-8)}
  .gc-noconf{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-12);padding:var(--sp-22);border:1px dashed var(--line);border-radius:var(--radius-sm);background:var(--bg2)}
  .set-acc-head{display:flex;align-items:center;gap:var(--sp-14);margin-bottom:var(--sp-18)}
  .set-avatar{width:54px;height:54px;border-radius:50%;background:var(--accent);color:var(--on-solid);display:grid;place-items:center;
    font-size:var(--fs-lg);font-weight:var(--fw-bold);flex:none;letter-spacing:.02em}
  .set-acc-name{font-size:var(--fs-base);font-weight:var(--fw-strong)}
  .set-acc-mail{font-size:var(--fs-sm);color:var(--mut)}
  .plan-card{display:flex;align-items:center;gap:var(--sp-14);padding:var(--sp-14) var(--sp-16);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2)}
  .plan-info{flex:1;min-width:0}
  .plan-name{font-size:var(--fs-base);font-weight:var(--fw-strong)}
  .plan-desc{font-size:var(--fs-sm);color:var(--mut);margin-top:var(--sp-2)}
  .plan-badge{flex:none;font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.04em;padding:var(--sp-4) var(--sp-10);border-radius:var(--radius-pill);
    background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
  .plan-list{display:flex;flex-direction:column;gap:var(--sp-8)}
  .plan-opt{display:flex;align-items:center;gap:var(--sp-12);width:100%;text-align:left;background:var(--bg2);border:1px solid var(--line);
    border-radius:var(--radius-sm);padding:var(--sp-12) var(--sp-14);cursor:pointer;transition:border-color .12s,box-shadow .12s}
  .plan-opt:hover{border-color:var(--mut2)}
  .plan-opt.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
  .plan-opt-r{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
  .plan-opt-t{font-weight:var(--fw-strong);font-size:var(--fs-base)}
  .plan-opt-d{font-size:var(--fs-sm);color:var(--mut)}
  /* Cartes tarifaires (Abonnements) */
  .plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-12)}
  @media(max-width:760px){ .plan-grid{grid-template-columns:1fr 1fr} }
  @media(max-width:560px){ .plan-grid{grid-template-columns:1fr} }
  .plan-tile{display:flex;flex-direction:column;gap:var(--sp-10);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2);padding:var(--sp-16)}
  .plan-tile.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
  .plan-tile-h{display:flex;align-items:center;gap:var(--sp-8)}
  .plan-tile-n{font-size:var(--fs-base);font-weight:var(--fw-strong)}
  .plan-price{display:flex;align-items:baseline;gap:var(--sp-6);flex-wrap:wrap}
  .plan-price b{font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)}
  .plan-per{font-size:var(--fs-xs);color:var(--mut);line-height:1.3}
  .plan-feats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-6)}
  .plan-feats li{display:flex;align-items:flex-start;gap:var(--sp-8);font-size:var(--fs-sm);color:var(--mut)}
  .plan-feats li svg.ic{width:14px;height:14px;flex:none;color:var(--accent);margin-top:var(--sp-1)}
  .plan-cta{margin-top:auto;padding-top:var(--sp-2)}
  .plan-cta button{width:100%}
  .plan-cta .mini[disabled]{opacity:.55;cursor:default}
  .plan-popular{position:relative;border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent) inset}
  .plan-pop-badge{font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.06em;
    color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
    border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-8);width:fit-content;margin-bottom:var(--sp-2)}
  .plan-feat-no svg.ic,.plan-feat-no span{color:var(--mut)!important}
  .plan-saving{font-size:var(--fs-2xs);font-weight:var(--fw-bold);padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill);
    background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
  .plan-res-bar{height:4px;border-radius:var(--radius-xs);background:var(--line);margin-top:var(--sp-8);overflow:hidden}
  .plan-res-fill{height:100%;border-radius:var(--radius-xs);background:var(--accent)}
  .plan-tile-wide{max-width:none}
  .plan-card-empty{opacity:.65}

  /* ── Formules : une LISTE horizontale, puis le détail ──
     Quatre paliers aux libellés longs (« 99,95 %, avec pénalités »,
     « ingénieur nommé ») ne tiennent pas côte à côte sans devenir illisibles.
     Et ce qu'on compare d'abord, ce sont trois nombres et un prix : la ligne
     les ALIGNE, la colonne les empile. La ligne mène au détail, où tout ce
     qu'elle a tu se dit enfin. */
  .abos-list{display:flex;flex-direction:column;gap:var(--sp-8)}
  .abos-row{display:flex;align-items:center;gap:var(--sp-12);width:100%;text-align:left;
    background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);
    padding:var(--sp-14) var(--sp-16);cursor:pointer;
    transition:border-color .12s,box-shadow .12s,background .12s}
  .abos-row:hover{border-color:var(--mut2);background:var(--bg3,var(--bg2))}
  .abos-row.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
  .abos-row-id{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
  .abos-row-n{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;
    font-size:var(--fs-base);font-weight:var(--fw-strong);color:var(--txt)}
  .abos-row-t{font-size:var(--fs-sm);color:var(--mut);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .abos-row-facts{flex:1 1 240px;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-12)}
  .abos-fact{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
  .abos-fact b{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--txt);
    font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Étiquettes en bas de casse et sans interlettrage : « CRÉDITS / MOIS » en
     capitales espacées ne tient pas dans un tiers de 300 px, et une étiquette
     coupée par des points de suspension n'étiquette plus rien. */
  .abos-fact i{font-style:normal;font-size:var(--fs-2xs);color:var(--mut2);
    letter-spacing:var(--ls-none);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .abos-row-p{flex:none;display:flex;align-items:baseline;gap:var(--sp-4)}
  .abos-row-p b{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);
    color:var(--txt);font-variant-numeric:tabular-nums;white-space:nowrap}
  .abos-row-p i{font-style:normal;font-size:var(--fs-xs);color:var(--mut);white-space:nowrap}
  .abos-row-go{flex:none;display:flex;color:var(--mut2)}
  .abos-row-go svg.ic{width:16px;height:16px}
  .abos-row:hover .abos-row-go{color:var(--txt)}

  /* Sous 860 px la rangée se replie : l'identité et le prix restent sur la
     même ligne, les chiffres passent dessous. Rien ne disparaît. */
  @media(max-width:760px){
    .abos-row{flex-wrap:wrap;gap:var(--sp-10)}
    .abos-row-id{flex:1 1 auto}
    .abos-row-facts{flex:1 1 100%;order:3;grid-template-columns:repeat(3,minmax(0,1fr))}
  }

  .abos-detail{display:flex;flex-direction:column;gap:var(--sp-16)}
  .abos-back{align-self:flex-start;display:flex;align-items:center;gap:var(--sp-6);
    background:none;border:none;padding:0;cursor:pointer;color:var(--mut);font-size:var(--fs-sm)}
  .abos-back:hover{color:var(--txt)}
  .abos-back svg.ic{width:14px;height:14px;transform:rotate(180deg)}
  .abos-det-h{display:flex;align-items:flex-end;justify-content:space-between;
    gap:var(--sp-16);flex-wrap:wrap;padding-bottom:var(--sp-14);border-bottom:1px solid var(--line)}
  .abos-det-id{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
  .abos-det-n{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;
    font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);color:var(--txt)}
  .abos-det-t{font-size:var(--fs-sm);color:var(--mut)}
  .abos-det-p{display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-1);text-align:right}
  .abos-det-p b{font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);
    color:var(--txt);font-variant-numeric:tabular-nums;white-space:nowrap}
  .abos-det-pitch{font-size:var(--fs-base);color:var(--mut);line-height:1.6;max-width:68ch}
  .abos-detail .abos-caps{margin-top:0}
  /* Dans le détail, une précision comme « Réponse sous 1 heure, 24/7, ingénieur
     nommé » est une PHRASE : en nowrap elle sortait de sa colonne et passait
     sous la voisine. Elle a le droit de tenir sur deux lignes. */
  .abos-detail .abos-cap .abos-approx{white-space:normal;line-height:1.45}
  .abos-detail .plan-cta button{width:auto;min-width:220px}
  .abos-lvl-d{font-size:var(--fs-sm);color:var(--mut)}

  /* ── Abonnements : quotas, jauges, extensions ──
     Sobriété chromatique (DA console) : l'accent ne marque qu'un ÉTAT - la
     formule sélectionnée, la part consommée, le total à payer. */
  .abos-badge-slot{min-height:19px;display:flex;align-items:center}
  .abos-badge-slot .plan-pop-badge{margin-bottom:0}
  .abos-caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-10) var(--sp-22);margin-top:var(--sp-12)}
  .abos-cap{display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-sm);min-width:0}
  .abos-cap-k{font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
  .abos-cap b{overflow:hidden;text-overflow:ellipsis}
  .abos-quota li b{color:var(--txt);font-weight:var(--fw-strong)}
  .abos-approx{color:var(--mut2);font-size:var(--fs-xs);white-space:nowrap;font-weight:var(--fw-regular)}
  .abos-fam-k{font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--mut)}
  .abos-lvl{padding-top:var(--sp-10);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--sp-6)}
  .abos-lvl-n{font-size:var(--fs-md);font-weight:var(--fw-strong)}

  /* Les natures déployables, listées sous « Ce qu'elle déploie » dans le
     détail d'une formule. L'encart d'introduction qui les portait autrefois
     en tête de la liste a été retiré : la liste se lit sans préambule. */
  .abos-same-f{padding-top:var(--sp-6);border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--mut2)}

  /* Jauges (stockage, enveloppe Pilote) */
  .abos-gauge{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2);padding:var(--sp-14) var(--sp-16)}
  .abos-gauge-h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-16);flex-wrap:wrap}
  .abos-gauge-v{font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)}
  .abos-gauge-d{font-size:var(--fs-sm);color:var(--mut);margin-top:var(--sp-2)}
  .abos-gauge-p{font-size:var(--fs-base);font-weight:var(--fw-strong);color:var(--accent);white-space:nowrap}
  .abos-gauge-p span{font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--mut)}
  .abos-bar{display:flex;height:6px;border-radius:var(--radius-xs);overflow:hidden;background:var(--line);margin-top:var(--sp-12)}
  .abos-bar-a{background:var(--accent)}
  .abos-bar-a.warn{background:var(--warn)}
  .abos-bar-b{background:color-mix(in srgb,var(--accent) 22%,transparent)}
  .abos-legend{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;margin-top:var(--sp-8);font-size:var(--fs-xs);color:var(--mut)}
  .abos-legend span[class^="abos-dot"]{width:8px;height:8px;border-radius:var(--radius-xs);flex:none}
  .abos-dot-a{background:var(--accent)}
  .abos-dot-b{background:color-mix(in srgb,var(--accent) 22%,transparent);margin-left:var(--sp-12)}
  .abos-mods{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-top:var(--sp-12);padding-top:var(--sp-10);border-top:1px solid var(--line)}
  .abos-mod{display:flex;align-items:baseline;gap:var(--sp-6);font-size:var(--fs-xs);color:var(--mut);
    border:1px solid var(--line);border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-10)}
  .abos-mod b{color:var(--txt);font-variant-numeric:tabular-nums}

  .abos-scan{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-14);flex-wrap:wrap;
    margin-top:var(--sp-12);padding-top:var(--sp-10);border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--mut)}
  .abos-scan .mini{flex:none}
  .abos-scan .cmp-spin{margin-right:var(--sp-4)}

  /* Extensions de stockage */
  .abos-caps-list{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2);padding:var(--sp-12) var(--sp-16)}
  .abos-ext-k{font-size:var(--fs-sm);font-weight:var(--fw-strong);margin:var(--sp-16) 0 var(--sp-8)}
  .abos-addons{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-10)}
  @media(max-width:560px){ .abos-addons{grid-template-columns:1fr} }
  .abos-addon{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-10) var(--sp-14);border:1px solid var(--line);
    border-radius:var(--radius-sm);background:var(--bg2)}
  .abos-addon-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1);font-size:var(--fs-base)}
  .abos-addon-p{font-size:var(--fs-sm);color:var(--mut);font-weight:var(--fw-regular)}
  .abos-step{display:flex;align-items:center;gap:var(--sp-6);flex:none}
  .abos-step .mini{min-width:28px;padding:var(--sp-2) 0;text-align:center;line-height:var(--lh-tight)}
  .abos-step-q{min-width:20px;text-align:center;font-size:var(--fs-md);font-weight:var(--fw-strong);font-variant-numeric:tabular-nums}

  /* Nom de domaine offert : un registre, jamais une caisse. */
  .abos-dom-form{display:flex;gap:var(--sp-8);flex-wrap:wrap;align-items:center}
  .abos-dom-in{flex:1;min-width:200px;padding:var(--sp-6) var(--sp-10);border:1px solid var(--line);border-radius:var(--radius-sm);
    background:var(--card);color:var(--txt);font-size:var(--fs-md);font-family:var(--mono,ui-monospace,monospace)}
  .abos-dom-in:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
  .abos-dom-form .set-select{flex:0 1 190px;min-width:150px}
  .abos-dom-res{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;margin-top:var(--sp-10);padding:var(--sp-10) var(--sp-14);
    border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2);font-size:var(--fs-md)}
  .abos-dom-res svg.ic{width:15px;height:15px;flex:none;color:var(--mut)}
  .abos-dom-res.libre{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
  .abos-dom-res.libre svg.ic{color:var(--ok)}
  .abos-dom-res .mini{margin-left:auto}
  .abos-dom-rows{display:flex;flex-direction:column;gap:var(--sp-8)}
  .abos-dom-row{display:flex;align-items:center;gap:var(--sp-12);flex-wrap:wrap;padding:var(--sp-10) var(--sp-14);
    border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2)}
  .abos-dom-row.off{opacity:.6}
  .abos-dom-n{flex:1;min-width:180px;display:flex;flex-direction:column;gap:var(--sp-1)}
  .abos-dom-n b{font-size:var(--fs-base);font-family:var(--mono,ui-monospace,monospace)}
  .abos-dom-m{font-size:var(--fs-xs);color:var(--mut)}
  .abos-dom-etat{flex:none;font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.04em;
    padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill);background:var(--line2,var(--line));color:var(--mut)}
  .abos-dom-etat.s-a_commander{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
  .abos-dom-etat.s-actif{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
  .abos-dom-act{display:flex;gap:var(--sp-6);flex:none;flex-wrap:wrap}

  /* Échelle d'infrastructure : elle se lit, elle ne s'achète pas à la carte. */
  .abos-ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-10)}
  .abos-ladder-4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:900px){ .abos-ladder-4{grid-template-columns:repeat(2,1fr)} }
  /* Le régime est un ÉTAT : c'est le seul endroit du panneau où la couleur alerte. */
  .abos-regime{margin-left:var(--sp-8);font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.04em;
    padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill);vertical-align:middle;
    background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
  .abos-regime.economie{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
  .abos-regime.arret{background:color-mix(in srgb,var(--err) 18%,transparent);color:var(--err)}
  @media(max-width:700px){ .abos-ladder{grid-template-columns:1fr} }
  .abos-rung{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2);padding:var(--sp-10) var(--sp-14)}
  .abos-rung.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
  .abos-rung-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-10);font-size:var(--fs-md)}
  .abos-rung-h span{font-size:var(--fs-xs);color:var(--mut);text-transform:uppercase;letter-spacing:.04em;font-weight:var(--fw-bold)}
  .abos-rung-d{font-size:var(--fs-xs);color:var(--mut);margin-top:var(--sp-2);line-height:var(--lh-normal)}

  /* Achat de crédits : le curseur est une commodité, la saisie n'a pas de plafond. */
  .abos-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:var(--radius-xs);
    background:var(--line);outline:none;margin:0 0 var(--sp-8)}
  .abos-range:focus-visible{box-shadow:var(--focus)}
  .abos-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
    background:var(--accent);border:2px solid var(--card);box-shadow:0 0 0 1px var(--accent);cursor:pointer}
  .abos-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);
    border:2px solid var(--card);box-shadow:0 0 0 1px var(--accent);cursor:pointer}
  .abos-buy{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);flex-wrap:wrap}
  .abos-range-out{font-size:var(--fs-md);font-weight:var(--fw-strong);font-variant-numeric:tabular-nums}
  .abos-buy-free{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-xs);color:var(--mut)}
  .abos-buy-n{width:74px;padding:var(--sp-4) var(--sp-8);border:1px solid var(--line);border-radius:var(--radius-sm);
    background:var(--card);color:var(--txt);font-size:var(--fs-md);font-variant-numeric:tabular-nums;text-align:right}
  .abos-buy-n:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--focus)}

  /* Récapitulatif engageant (le total vient du serveur) */
  .abos-recap{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2);padding:var(--sp-14) var(--sp-16)}
  .abos-recap-l{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-16);font-size:var(--fs-md);
    color:var(--mut);padding:var(--sp-2) 0}
  .abos-recap-l b{font-variant-numeric:tabular-nums;color:var(--txt);font-weight:var(--fw-strong)}
  .abos-recap-tot{margin-top:var(--sp-6);padding-top:var(--sp-8);border-top:1px solid var(--line);color:var(--txt);font-weight:var(--fw-strong)}
  .abos-recap-tot b{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);color:var(--accent)}
  .abos-recap-sum{font-size:var(--fs-sm);color:var(--mut);margin-top:var(--sp-2);line-height:var(--lh-normal)}
  .abos-pilote{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2);padding:var(--sp-16)}
  .abos-pilote p{margin:0 0 var(--sp-12);font-size:var(--fs-md);line-height:1.6;color:var(--mut)}
  .abos-pilote li{font-size:var(--fs-sm);line-height:1.55}
  .abos-pilote li b{color:var(--txt);font-weight:var(--fw-strong)}

  /* ── Librairie boutique ── */
  /* Recherche */
  .lib-search-wrap{position:relative;margin-bottom:var(--sp-20)}
  .lib-search{width:100%;padding:var(--sp-8) var(--sp-12) var(--sp-8) var(--sp-36);border:none;border-radius:var(--radius);
    background:var(--bg2);color:var(--fg);font-size:var(--fs-md);outline:none;
    transition:box-shadow .12s;box-sizing:border-box}
  .lib-search:focus{box-shadow:var(--focus)}
  .lib-search-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);
    color:var(--mut);pointer-events:none;display:flex;font-size:var(--fs-base)}
  /* En-têtes de section */
  .lib-cat-section{margin-bottom:var(--sp-22)}
  .lib-cat-title{font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.09em;
    color:var(--mut);margin-bottom:var(--sp-6);padding:0 var(--sp-2);
    display:flex;align-items:center;gap:var(--sp-6)}
  .lib-cat-title-ic{display:flex;align-items:center;font-size:var(--fs-sm);flex:none}
  .lib-cat-label{flex:1}
  .lib-cat-count{font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--mut);
    text-transform:none;letter-spacing:var(--ls-none)}
  .lib-cat-title .lib-reg-status{font-size:var(--fs-2xs);font-weight:var(--fw-regular);color:var(--mut);
    text-transform:none;letter-spacing:var(--ls-none)}
  .lib-cat-add-btn{display:inline-flex;align-items:center;gap:var(--sp-4);padding:var(--sp-2) var(--sp-10);
    border:1px solid var(--accent);border-radius:var(--radius-sm);background:transparent;
    font-size:var(--fs-2xs);font-weight:var(--fw-bold);color:var(--accent);cursor:pointer;text-transform:none;letter-spacing:var(--ls-none);
    transition:background .12s,color .12s}
  .lib-cat-add-btn:hover{background:var(--accent);color:var(--on-solid)}
  /* ── Frameworks modal ── */
  .fw-mtabs{display:flex;gap:0;margin-bottom:var(--sp-20);border-bottom:1px solid var(--line2)}
  .fw-mtab{padding:var(--sp-8) var(--sp-16);font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--mut);border:none;background:transparent;
    cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s,border-color .12s}
  .fw-mtab.on{color:var(--accent);border-bottom-color:var(--accent)}
  .fw-mtab:hover:not(.on){color:var(--fg)}
  .fw-catalog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-10)}
  @media(max-width:540px){.fw-catalog-grid{grid-template-columns:1fr}}
  .fw-catalog-card{border:1px solid var(--line2);border-radius:var(--radius);background:var(--card);
    padding:var(--sp-16);cursor:default;transition:border-color .12s;position:relative}
  .fw-catalog-card:hover{border-color:color-mix(in srgb,var(--lc,var(--accent)) 40%,var(--line2))}
  .fw-catalog-icon{width:36px;height:36px;border-radius:var(--radius);display:flex;align-items:center;
    justify-content:center;font-size:var(--fs-lg);margin-bottom:var(--sp-10)}
  .fw-catalog-name{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--fg);margin-bottom:var(--sp-2)}
  .fw-catalog-desc{font-size:var(--fs-xs);color:var(--mut);line-height:var(--lh-normal)}
  .fw-catalog-tags{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-8)}
  .fw-catalog-tag{font-size:var(--fs-2xs);font-weight:var(--fw-strong);padding:var(--sp-2) var(--sp-6);border-radius:var(--radius-xs);
    background:var(--bg2);color:var(--mut);border:1px solid var(--line2)}
  .fw-install-btn{position:absolute;top:12px;right:12px;font-size:var(--fs-xs);padding:var(--sp-2) var(--sp-10);
    border:1px solid var(--line2);border-radius:var(--radius-sm);background:var(--card);color:var(--mut);cursor:pointer;
    transition:border-color .12s,color .12s}
  .fw-install-btn:hover{border-color:var(--accent);color:var(--accent)}
  .fw-install-btn.done{border-color:var(--ok);color:var(--ok);pointer-events:none}
  .fw-style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);margin-top:var(--sp-4)}
  .fw-style-btn{padding:var(--sp-8) var(--sp-4);border:1px solid var(--line2);border-radius:var(--radius);
    font-size:var(--fs-xs);font-weight:var(--fw-strong);text-align:center;color:var(--mut);background:var(--card);
    cursor:pointer;transition:border-color .12s,color .12s,background .12s}
  .fw-style-btn.on{border-color:var(--accent);color:var(--accent);
    background:color-mix(in srgb,var(--accent) 8%,var(--card))}
  .fw-gen-progress{display:flex;flex-direction:column;align-items:center;gap:var(--sp-18);padding:var(--sp-36) 0;text-align:center}
  .fw-gen-bar{width:100%;height:4px;background:var(--line2);border-radius:var(--radius-xs);overflow:hidden;margin-top:var(--sp-4)}
  .fw-gen-fill{height:100%;background:var(--accent);border-radius:var(--radius-xs);transition:width .5s ease}
  /* ── Framework detail amélioré ── */
  .fw-token-palette{display:flex;gap:var(--sp-8);flex-wrap:wrap;margin:var(--sp-10) 0 var(--sp-4)}
  .fw-token-swatch{width:44px;text-align:center}
  .fw-token-swatch-color{width:44px;height:36px;border-radius:var(--radius);border:1px solid var(--line2);margin-bottom:var(--sp-4)}
  .fw-token-swatch-name{font-size:var(--fs-2xs);color:var(--mut);font-weight:var(--fw-strong);overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;letter-spacing:var(--ls-none)}
  .fw-comp-list{border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden}
  .fw-comp-row{padding:var(--sp-8) var(--sp-14);border-bottom:1px solid var(--line2);display:flex;
    align-items:center;gap:var(--sp-10);flex-wrap:wrap}
  .fw-comp-row:last-child{border-bottom:none}
  .fw-comp-name{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--fg);min-width:110px}
  .fw-comp-cat{font-size:var(--fs-2xs);color:var(--mut);font-weight:var(--fw-strong);letter-spacing:.04em;margin-left:var(--sp-2)}
  .fw-comp-variants{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-left:auto}
  .fw-comp-variant{font-size:var(--fs-2xs);padding:var(--sp-2) var(--sp-6);border-radius:var(--radius-xs);
    background:var(--bg2);color:var(--mut);border:1px solid var(--line2)}
  .fw-doc-link{display:inline-flex;align-items:center;gap:var(--sp-8);padding:var(--sp-10) var(--sp-18);
    border:1px solid var(--line2);border-radius:var(--radius);background:var(--card);
    font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--fg);text-decoration:none;cursor:pointer;
    transition:border-color .12s,color .12s}
  .fw-doc-link:hover{border-color:var(--accent);color:var(--accent)}

  /* ── Aperçu vivant de la doc framework (iframe incorporée) ───────────── */
  .fw-doc-frame{margin:var(--sp-6) 0 var(--sp-4);border:1px solid var(--line2);border-radius:var(--radius);
    overflow:hidden;background:var(--card);box-shadow:var(--shadow-sm,0 2px 8px rgba(0,0,0,.05))}
  .fw-doc-frame-bar{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-8) var(--sp-12);
    background:var(--bg2);border-bottom:1px solid var(--line2)}
  .fw-doc-dot{width:9px;height:9px;border-radius:50%;background:var(--line2);flex:none}
  .fw-doc-dot:nth-child(1){background:#ff5f57}
  .fw-doc-dot:nth-child(2){background:#febc2e}
  .fw-doc-dot:nth-child(3){background:#28c840}
  .fw-doc-frame-url{margin-left:var(--sp-8);font-size:var(--fs-xs);font-family:var(--font-mono);
    color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fw-doc-frame-iframe{display:block;width:100%;height:540px;border:0;background:var(--paper)}
  .fw-doc-frame-btn{display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;border:1px solid var(--line2);border-radius:var(--radius);background:var(--card);
    color:var(--mut);cursor:pointer;transition:border-color .12s,color .12s}
  .fw-doc-frame-btn:hover{border-color:var(--accent);color:var(--accent)}
  /* Plein écran (modale) */
  .fw-doc-full{width:100%;height:min(78vh,720px)}
  .fw-doc-full-iframe{display:block;width:100%;height:100%;border:0;border-radius:var(--radius);background:var(--paper)}

  /* ── Breadcrumb fil d'Ariane ────────────────────────────────────────── */
  .lib-breadcrumb{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
  .lib-bc-link{background:none;border:none;padding:0;font-size:var(--fs-md);font-weight:var(--fw-strong);
    color:var(--mut);cursor:pointer;transition:color .12s}
  .lib-bc-link:hover{color:var(--accent)}
  .lib-bc-sep{font-size:var(--fs-sm);color:var(--line2);padding:0 var(--sp-2);user-select:none}
  .lib-bc-current{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--fg)}

  /* ── Librairie - section cat sub ────────────────────────────────────── */
  .lib-cat-sub{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--mut);margin-left:var(--sp-8)}

  /* ── Librairie - store browse button ────────────────────────────────── */
  .lib-store-browse-btn{display:flex;align-items:center;gap:var(--sp-14);width:100%;padding:var(--sp-16) var(--sp-18);
    border:1px solid var(--line2);border-radius:var(--radius);background:var(--card);cursor:pointer;
    transition:border-color .13s,box-shadow .13s;text-align:left}
  .lib-store-browse-btn:hover{border-color:var(--accent);box-shadow:var(--elev-1)}
  .lib-store-browse-icon{font-size:var(--fs-xl);color:var(--accent);flex-shrink:0;
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    background:color-mix(in srgb,var(--accent) 10%,var(--bg2));border-radius:var(--radius)}
  .lib-store-browse-text{flex:1;min-width:0}
  .lib-store-browse-title{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--fg)}
  .lib-store-browse-sub{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--mut);margin-top:var(--sp-2)}
  .lib-store-browse-arr{font-size:var(--fs-lg);color:var(--mut);flex-shrink:0;transition:transform .12s}
  .lib-store-browse-btn:hover .lib-store-browse-arr{transform:translateX(4px);color:var(--accent)}

  /* ── Librairie Store - vue catalogue ────────────────────────────────── */
  .lib-store-hero{padding:0 0 var(--sp-14)}
  .lib-store-hero-title{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--fg)}
  .lib-store-hero-sub{font-size:var(--fs-md);color:var(--mut);margin-top:var(--sp-2)}
  .lib-store-list{display:flex;flex-direction:column;gap:var(--sp-8)}
  .lib-store-item{display:flex;align-items:center;gap:var(--sp-14);padding:var(--sp-12) var(--sp-14);
    border:1px solid var(--line2);border-radius:var(--radius);background:var(--card);
    transition:border-color .12s}
  .lib-store-item:hover{border-color:var(--accent)}
  .lib-store-item-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius);font-size:var(--fs-base);flex-shrink:0}
  .lib-store-item-body{flex:1;min-width:0}
  .lib-store-item-name{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--fg);display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap}
  .lib-store-item-ver{font-size:var(--fs-2xs);font-weight:var(--fw-strong);color:var(--mut);background:var(--bg2);
    border:1px solid var(--line2);border-radius:var(--radius-xs);padding:0 var(--sp-4)}
  .lib-store-item-sub{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--mut);margin-top:var(--sp-2)}
  .lib-store-item-action{flex-shrink:0;display:flex;align-items:center;gap:var(--sp-6)}
  .lib-store-item-link{cursor:pointer}
  .lib-store-item-link:hover{border-color:var(--accent);box-shadow:var(--elev-1)}
  .lib-store-item-arr{font-size:var(--fs-base);color:var(--mut);opacity:0;transform:translateX(-4px);
    transition:opacity .12s,transform .12s,color .12s}
  .lib-store-item-link:hover .lib-store-item-arr{opacity:1;transform:translateX(0);color:var(--accent)}
  .lib-store-copy-btn{white-space:nowrap}
  .lib-store-cdn-code{width:100%;padding:var(--sp-10) var(--sp-12);border:1px solid var(--line2);border-radius:var(--radius);
    background:var(--bg2);color:var(--fg);font-family:var(--font-mono);font-size:var(--fs-sm);resize:vertical;
    box-sizing:border-box}

  /* ── Font install modal ──────────────────────────────────────────────── */
  .fnt-bar{display:flex;flex-direction:column;gap:var(--sp-8);margin-bottom:var(--sp-12);
    position:sticky;top:0;z-index:1;background:var(--card);padding-bottom:var(--sp-4)}
  .fnt-live-count{position:absolute;right:12px;top:50%;transform:translateY(-50%);
    font-size:var(--fs-xs);font-weight:var(--fw-strong);color:var(--mut);pointer-events:none}
  .fnt-filter-row{display:flex;gap:var(--sp-4);overflow-x:auto;padding-bottom:var(--sp-2);scrollbar-width:none}
  .fnt-filter-row::-webkit-scrollbar{display:none}
  .fnt-filter-btn{display:inline-flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-10);
    border:1px solid var(--line2);border-radius:var(--radius-modal);font-size:var(--fs-xs);font-weight:var(--fw-strong);
    color:var(--mut);background:var(--card);cursor:pointer;white-space:nowrap;flex-shrink:0;
    transition:border-color .1s,color .1s,background .1s}
  .fnt-filter-btn em{font-style:normal;font-size:var(--fs-2xs);opacity:.55;font-weight:var(--fw-bold)}
  .fnt-filter-btn:hover{border-color:var(--accent);color:var(--accent)}
  .fnt-filter-btn.on{background:var(--fg);border-color:var(--fg);color:var(--bg)}
  .fnt-filter-btn.on em{opacity:.5}
  .fnt-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
  .fnt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--sp-6);
    max-height:calc(100vh - 320px);min-height:280px;overflow-y:auto;padding-right:var(--sp-2)}
  .fnt-grid::-webkit-scrollbar{width:var(--sb-size)}
  .fnt-grid::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:var(--radius-pill);
    border:var(--sb-pad) solid transparent;background-clip:padding-box}
  .fnt-card{border-radius:var(--radius);background:var(--bg2);overflow:hidden;
    transition:transform .12s,box-shadow .12s}
  .fnt-card:hover{transform:translateY(-2px);box-shadow:var(--elev-2)}
  .fnt-card-sample{height:68px;display:flex;align-items:center;justify-content:center;
    font-size:var(--fs-4xl);line-height:var(--lh-flat);color:var(--fg);background:var(--card);
    border-bottom:1px solid var(--line2);transition:color .2s}
  .fnt-card-sample:not([style]){color:var(--line2)}
  .fnt-card-foot{padding:var(--sp-6) var(--sp-8);display:flex;align-items:center;gap:var(--sp-4);justify-content:space-between}
  .fnt-card-info{min-width:0;flex:1}
  .fnt-card-name{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--fg);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fnt-card-cat{font-size:var(--fs-2xs);font-weight:var(--fw-strong);text-transform:uppercase;
    letter-spacing:.04em;margin-top:var(--sp-1);opacity:.8}
  .fnt-card-btn{width:22px;height:22px;border-radius:var(--radius-sm);border:1.5px solid var(--line2);
    background:transparent;color:var(--mut);font-size:var(--fs-base);cursor:pointer;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    transition:background .1s,color .1s,border-color .1s;line-height:var(--lh-flat);padding:0}
  .fnt-card-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--on-solid)}
  .fnt-card.installed .fnt-card-btn{background:color-mix(in srgb,var(--ok) 15%,var(--bg2));
    border-color:color-mix(in srgb,var(--ok) 45%,var(--line2));color:var(--ok);
    cursor:default;font-size:var(--fs-xs)}
  .fnt-sentinel{height:1px;width:100%;grid-column:1/-1;pointer-events:none}
  .fnt-url-form{display:flex;flex-direction:column;gap:0}
  .fnt-url-suggestions{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;margin-top:var(--sp-8)}
  .fnt-upload-zone{border:2px dashed var(--line2);border-radius:var(--radius);padding:var(--sp-36) var(--sp-24);
    text-align:center;cursor:pointer;transition:border-color .15s,background .15s;user-select:none}
  .fnt-upload-zone:hover,.fnt-upload-zone.drag-over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--card))}
  .fnt-upload-icon{font-size:var(--fs-3xl);margin-bottom:var(--sp-10);color:var(--mut)}
  .fnt-upload-label{font-size:var(--fs-base);font-weight:var(--fw-strong);color:var(--fg)}
  .fnt-upload-hint{font-size:var(--fs-sm);color:var(--mut);margin-top:var(--sp-4)}
  /* Grouped list - 1 seule bordure autour du groupe */
  .lib-store-grid{display:flex;flex-direction:column;
    border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden}
  /* Ligne */
  .lib-store-card{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-10) var(--sp-14);
    border:none;border-radius:0;background:var(--card);
    position:relative;transition:background .1s}
  .lib-store-card+.lib-store-card{border-top:1px solid var(--line2)}
  .lib-store-card.lib-card-click{cursor:pointer}
  .lib-store-card.lib-card-click:hover{
    background:color-mix(in srgb,var(--lc,var(--accent)) 6%,var(--card))}
  /* Icône */
  .lib-store-icon{font-size:var(--fs-lg);flex:none;width:38px;height:38px;display:flex;
    align-items:center;justify-content:center;border-radius:var(--radius);border:none;
    background:color-mix(in srgb,var(--lc,var(--mut)) 13%,var(--bg2));
    transition:background .12s}
  .lib-store-card:hover .lib-store-icon{
    background:color-mix(in srgb,var(--lc,var(--mut)) 22%,var(--bg2))}
  /* Texte */
  .lib-store-info{flex:1;min-width:0}
  .lib-store-name{font-size:var(--fs-md);font-weight:var(--fw-strong);display:flex;align-items:center;
    gap:var(--sp-6);flex-wrap:wrap;line-height:var(--lh-tight)}
  .lib-store-desc{font-size:var(--fs-sm);color:var(--mut);margin-top:var(--sp-2);line-height:1.3;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Actions */
  .lib-store-act{flex:none;display:flex;align-items:center;gap:var(--sp-6)}
  .lib-card-chevron{color:var(--mut);display:flex;align-items:center;font-size:var(--fs-md);
    opacity:0;transform:translateX(-4px);transition:opacity .12s,transform .12s,color .12s}
  .lib-store-card:hover .lib-card-chevron{opacity:1;transform:translateX(0);
    color:var(--lc,var(--accent))}
  /* Badges - texte seul, sans fond */
  .lib-badge{display:inline-flex;align-items:center;font-size:var(--fs-2xs);font-weight:var(--fw-bold);
    letter-spacing:.03em;padding:0 var(--sp-2);white-space:nowrap;flex:none}
  .lib-badge-default{color:var(--accent)}
  .lib-badge-avail{color:var(--bc,var(--ok))}
  .lib-badge-remote{color:var(--accent)}
  .lib-badge-included{color:var(--warn)}
  .lib-badge-db{color:var(--err);margin-left:var(--sp-2)}
  .lib-badge-tech{color:var(--mut);background:var(--line2);border-radius:var(--radius-xs);margin-left:var(--sp-2);font-size:var(--fs-2xs);padding:var(--sp-1) var(--sp-4);letter-spacing:.04em}
  .lib-tabs-spacer{flex:1}
  .lib-tabs-bar{flex-wrap:nowrap}
  /* ── Panel détail ── */
  #lib-pane-body{min-height:0}
  .lib-detail-view{display:flex;flex-direction:column;padding:0}
  .lib-detail-head{padding:0 0 var(--sp-14);display:flex;align-items:center}
  .lib-detail-back{display:inline-flex;align-items:center;gap:var(--sp-6);padding:var(--sp-6) var(--sp-12);
    border:none;border-radius:var(--radius);background:var(--bg2);font-size:var(--fs-sm);font-weight:var(--fw-medium);
    color:var(--mut);cursor:pointer;transition:background .1s,color .1s}
  .lib-detail-back:hover{background:color-mix(in srgb,var(--accent) 10%,var(--bg2));color:var(--fg)}
  /* Hero card - teinté couleur de la librairie */
  .lib-detail-hero{display:flex;align-items:center;gap:var(--sp-20);margin-bottom:var(--sp-22);
    padding:var(--sp-20) var(--sp-22);
    background:color-mix(in srgb,var(--lc,var(--accent)) 7%,var(--bg2));
    border:1px solid color-mix(in srgb,var(--lc,var(--accent)) 20%,var(--line2));
    border-radius:var(--radius)}
  .lib-detail-hero-body{flex:1;min-width:0}
  .lib-detail-icon{width:68px;height:68px;display:flex;align-items:center;justify-content:center;
    border:none;border-radius:var(--radius-modal);font-size:var(--fs-3xl);flex:none}
  .lib-detail-name{font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:1.1;letter-spacing:-.015em;
    display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-8)}
  .lib-detail-meta{font-size:var(--fs-xs);color:var(--mut);margin-top:var(--sp-6)}
  .lib-detail-desc{font-size:var(--fs-md);color:var(--fg);line-height:var(--lh-loose);margin-bottom:var(--sp-18)}
  .lib-detail-tags{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-22)}
  .lib-tag{font-size:var(--fs-xs);padding:var(--sp-2) var(--sp-10);border-radius:var(--radius-modal);
    background:var(--bg2);color:var(--mut);border:1px solid var(--line2)}
  /* Stats : bande horizontale, 1 seule bordure autour */
  .lib-detail-stats{display:flex;margin-bottom:var(--sp-24);
    border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden}
  .lib-detail-stat{flex:1;padding:var(--sp-14) var(--sp-16);text-align:center;background:var(--card)}
  .lib-detail-stat+.lib-detail-stat{border-left:1px solid var(--line2)}
  .lib-detail-stat-v{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--fg);line-height:var(--lh-flat)}
  .lib-detail-stat-k{font-size:var(--fs-2xs);color:var(--mut);margin-top:var(--sp-4);
    text-transform:uppercase;letter-spacing:var(--ls-wide)}
  /* Titres sous-sections dans le détail */
  .lib-detail-section-title{font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;
    letter-spacing:.12em;color:var(--mut);margin-bottom:var(--sp-8);margin-top:var(--sp-24);
    display:flex;align-items:center;gap:var(--sp-8)}
  .lib-detail-section-title::after{content:'';flex:1;height:1px;background:var(--line2)}
  /* Liste de fichiers sans bordures externes */
  .lib-detail-files{background:var(--bg2);border-radius:var(--radius);overflow:hidden;
    border:1px solid var(--line2)}
  .lib-detail-file{display:flex;align-items:center;justify-content:space-between;
    padding:var(--sp-8) var(--sp-14);font-size:var(--fs-sm)}
  .lib-detail-file+.lib-detail-file{border-top:1px solid var(--line2)}
  .lib-detail-file-path{font-family:var(--font-mono);color:var(--fg);display:flex;align-items:center;min-width:0}
  .lib-detail-file-size{color:var(--mut);flex:none;margin-left:var(--sp-12);font-size:var(--fs-xs)}
  .lib-detail-file-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;
    width:15px;height:15px;margin-right:var(--sp-10);color:color-mix(in srgb,var(--lc,var(--accent)) 75%,var(--mut))}
  .lib-detail-file-ic svg{width:14px;height:14px}
  /* Tagline + pastilles tech dans le héro */
  .lib-detail-tagline{font-size:var(--fs-md);color:var(--fg);margin-top:var(--sp-6);font-weight:var(--fw-medium);line-height:1.45}
  .lib-detail-pills{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-top:var(--sp-12)}
  .lib-pill{display:inline-flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-2xs);font-weight:var(--fw-bold);
    letter-spacing:.04em;padding:var(--sp-2) var(--sp-10);border-radius:var(--radius-modal);
    color:color-mix(in srgb,var(--pc,var(--mut)) 82%,var(--fg));
    background:color-mix(in srgb,var(--pc,var(--mut)) 15%,var(--bg2));
    border:1px solid color-mix(in srgb,var(--pc,var(--mut)) 28%,transparent)}
  .lib-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--pc,var(--mut))}
  /* Grille de fonctionnalités */
  .lib-feat-grid{list-style:none;margin:0 0 var(--sp-2);padding:0;display:grid;
    grid-template-columns:1fr 1fr;gap:var(--sp-8) var(--sp-20)}
  .lib-feat{display:flex;align-items:flex-start;gap:var(--sp-8);font-size:var(--fs-sm);color:var(--fg);line-height:1.45}
  .lib-feat-ic{flex:none;width:18px;height:18px;margin-top:.5px;display:flex;align-items:center;
    justify-content:center;border-radius:50%;color:var(--lc,var(--accent));
    background:color-mix(in srgb,var(--lc,var(--accent)) 15%,transparent)}
  .lib-feat-ic svg{width:11px;height:11px}
  @media (max-width:680px){ .lib-feat-grid{grid-template-columns:1fr} }
  /* ── Fiche moteur : deux niveaux de lecture ─────────────────────────────
     Une fiche sert deux publics opposés : quelqu'un qui découvre et veut
     comprendre à quoi ça sert, et quelqu'un qui va l'installer et veut tout.
     On ne fait pas la moyenne des deux (elle ne convient à personne) : on
     bascule d'un niveau à l'autre. ── */


  /* « En clair » — le bloc que lit quelqu'un qui découvre */
  .lib-clear{border-radius:var(--radius);padding:var(--sp-20) var(--sp-22);margin-bottom:var(--sp-22);
    background:color-mix(in srgb,var(--lc,var(--accent)) 7%,var(--bg2));
    border:1px solid color-mix(in srgb,var(--lc,var(--accent)) 20%,transparent)}
  .lib-clear-what{font-size:var(--fs-base);line-height:1.55;color:var(--fg);font-weight:var(--fw-medium);margin:0}
  .lib-clear-ex{display:flex;gap:var(--sp-8);align-items:flex-start;margin-top:var(--sp-14);
    font-size:var(--fs-sm);line-height:1.55;color:var(--mut);font-style:italic}
  .lib-clear-ex-ic{flex:none;width:17px;height:17px;margin-top:var(--sp-1);color:var(--lc,var(--accent))}
  .lib-clear-ex-ic svg{width:15px;height:15px}

  /* Bénéfices concrets : 3 cartes lisibles sans connaissance technique */
  .lib-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:var(--sp-12);margin-bottom:var(--sp-24)}
  .lib-why-card{background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);
    padding:var(--sp-14) var(--sp-16)}
  .lib-why-ic{width:30px;height:30px;border-radius:var(--radius);display:flex;align-items:center;
    justify-content:center;margin-bottom:var(--sp-10);color:var(--lc,var(--accent));
    background:color-mix(in srgb,var(--lc,var(--accent)) 14%,transparent)}
  .lib-why-ic svg{width:16px;height:16px}
  .lib-why-t{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--fg);line-height:1.3;margin-bottom:var(--sp-4)}
  .lib-why-d{font-size:var(--fs-sm);color:var(--mut);line-height:1.55}

  /* « Bon à savoir » : les faits en langage courant, pas en jargon */
  .lib-facts{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-bottom:var(--sp-24)}
  .lib-fact{display:inline-flex;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-14);
    border-radius:var(--radius);background:var(--bg2);border:1px solid var(--line2);
    font-size:var(--fs-sm);color:var(--fg);line-height:1.3}
  .lib-fact svg{width:15px;height:15px;flex:none;color:var(--lc,var(--accent))}
  .lib-fact.is-warn{background:color-mix(in srgb,var(--warn) 10%,var(--bg2));
    border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
  .lib-fact.is-warn svg{color:var(--warn)}

  /* Sections repliables : le technique reste là, mais ne saute pas au visage */
  .lib-fold{border:1px solid var(--line2);border-radius:var(--radius);margin-bottom:var(--sp-12);
    background:var(--card);overflow:hidden}
  .lib-fold>summary{list-style:none;cursor:pointer;padding:var(--sp-14) var(--sp-16);
    display:flex;align-items:center;gap:var(--sp-10);font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--fg)}
  .lib-fold>summary::-webkit-details-marker{display:none}
  .lib-fold>summary:hover{background:var(--bg2)}
  .lib-fold-chev{margin-left:auto;color:var(--mut);display:inline-flex;transition:transform .16s}
  .lib-fold-chev svg{width:15px;height:15px}
  .lib-fold[open] .lib-fold-chev{transform:rotate(90deg)}
  .lib-fold-sub{font-weight:var(--fw-regular);color:var(--mut);font-size:var(--fs-xs)}
  .lib-fold-body{padding:var(--sp-2) var(--sp-16) var(--sp-18)}
  .lib-fold-body>.lib-detail-section-title:first-child{margin-top:0}
  @media (prefers-reduced-motion:reduce){ .lib-fold-chev{transition:none} }

  /* Phrase d'intro sous un titre de section : elle dit en langage courant
     ce qu'on va lire, pour que personne n'arrive nu devant une liste. */
  .lib-sec-intro{font-size:var(--fs-sm);color:var(--mut);line-height:1.6;margin:-6px 0 13px;max-width:70ch}

  /* ── Fiche framework : rendu NATIF (pas d'iframe) ─────────────────────
     La doc d'un framework est une page distante : l'incruster affiche le
     chrome d'un navigateur dans un panneau de réglages, avec un thème et
     une typographie étrangers. On rend nous-mêmes ce qu'on connaît. ── */

  /* Palette : les couleurs se jugent à l'œil, en grand, avec leur valeur */
  .fw-pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:var(--sp-10);margin-bottom:var(--sp-6)}
  .fw-pal-item{border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden;background:var(--card)}
  .fw-pal-chip{height:56px;position:relative}
  /* Damier : sans lui, une couleur transparente paraît blanche. */
  .fw-pal-chip::after{content:'';position:absolute;inset:0;
    background-image:linear-gradient(45deg,rgba(0,0,0,.05) 25%,transparent 25%),
      linear-gradient(-45deg,rgba(0,0,0,.05) 25%,transparent 25%);
    background-size:10px 10px;z-index:-1}
  .fw-pal-meta{padding:var(--sp-8) var(--sp-10)}
  .fw-pal-name{font-size:var(--fs-xs);font-weight:var(--fw-strong);color:var(--fg);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fw-pal-val{font-size:var(--fs-2xs);color:var(--mut);font-family:var(--font-mono);margin-top:var(--sp-2)}
  .fw-pal-item.is-copy{cursor:pointer}
  .fw-pal-item.is-copy:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line2))}

  /* Composants groupés par famille */
  .fw-fam{margin-bottom:var(--sp-18)}
  .fw-fam-h{display:flex;align-items:baseline;gap:var(--sp-8);margin-bottom:var(--sp-8)}
  .fw-fam-n{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--fg)}
  .fw-fam-c{font-size:var(--fs-xs);color:var(--mut)}
  .fw-comps{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--sp-10)}
  .fw-comp{background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);padding:var(--sp-12) var(--sp-14)}
  .fw-comp-n{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--fg);margin-bottom:var(--sp-4);
    display:flex;align-items:center;gap:var(--sp-6)}
  .fw-comp-n::before{content:'';width:7px;height:7px;border-radius:var(--radius-xs);flex:none;
    background:var(--lc,var(--accent))}
  .fw-comp-d{font-size:var(--fs-sm);color:var(--mut);line-height:1.55}
  .fw-comp-vars{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-8)}
  .fw-comp-var{font-size:var(--fs-2xs);font-weight:var(--fw-strong);padding:var(--sp-2) var(--sp-6);border-radius:var(--radius-sm);
    background:var(--bg2);border:1px solid var(--line2);color:var(--mut)}

  /* Tokens : arrondis, ombres et typo se MONTRENT, ils ne se listent pas */
  .fw-tok{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--sp-10)}
  .fw-tok-item{background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);
    padding:var(--sp-12);text-align:center}
  .fw-tok-demo{height:52px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-8)}
  .fw-tok-box{width:56px;height:44px;background:color-mix(in srgb,var(--lc,var(--accent)) 22%,var(--bg2));
    border:1px solid color-mix(in srgb,var(--lc,var(--accent)) 40%,transparent)}
  .fw-tok-n{font-size:var(--fs-xs);font-weight:var(--fw-strong);color:var(--fg)}
  .fw-tok-v{font-size:var(--fs-2xs);color:var(--mut);font-family:var(--font-mono);margin-top:var(--sp-2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fw-type-demo{background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);padding:var(--sp-16) var(--sp-18)}
  .fw-type-line{color:var(--fg);line-height:1.25;margin-bottom:var(--sp-6)}
  .fw-type-meta{font-size:var(--fs-xs);color:var(--mut);font-family:var(--font-mono)}


  /* Section de composants et ses variantes réelles */
  .fw-sec{border:1px solid var(--line2);border-radius:var(--radius);background:var(--card);
    padding:var(--sp-14) var(--sp-14);margin-bottom:var(--sp-10)}
  .fw-sec-h{display:flex;align-items:baseline;gap:var(--sp-8);margin-bottom:var(--sp-4)}
  .fw-sec-n{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--fg)}
  .fw-sec-c{font-size:var(--fs-xs);color:var(--mut)}
  .fw-sec-d{font-size:var(--fs-sm);color:var(--mut);line-height:1.55;margin-bottom:var(--sp-10);max-width:78ch}
  .fw-sec-none{font-size:var(--fs-sm);color:var(--mut);font-style:italic}

  .fw-vars{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:var(--sp-10)}
  .fw-var{border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden;background:var(--bg2)}
  .fw-var-h{display:flex;align-items:baseline;gap:var(--sp-8);padding:var(--sp-8) var(--sp-10);flex-wrap:wrap}
  .fw-var-l{font-size:var(--fs-xs);font-weight:var(--fw-strong);color:var(--fg)}
  .fw-var-notes{font-size:var(--fs-2xs);color:var(--mut);font-family:var(--font-mono);
    background:var(--card);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:var(--sp-1) var(--sp-4)}
  /* La scène porte un fond CLAIR quel que soit le thème de l'app : les
     composants d'un framework sont dessinés pour leur propre fond, pas pour
     le nôtre. Les afficher sur du sombre les rendrait illisibles. */
  /* La hauteur suit le composant. L'ascenseur n'apparaît que sur les rares
     variantes réellement hautes (grille de cartes), marquées par la mesure. */
  .fw-var-stage{background:var(--paper);padding:var(--sp-16);border-top:1px solid var(--line2);
    overflow:visible}
  .fw-var[data-h="scroll"] .fw-var-stage{overflow:auto;max-height:460px}

  /* Le nombre de colonnes qu'occupe chaque variante est calculé après montage
     (libFwFitPreviews) d'après sa largeur naturelle ET la grille réellement
     résolue — une media query sur la fenêtre se tromperait, la fiche pouvant
     être étroite dans un grand écran. Reste ici le cas des composants qui
     débordent même à pleine largeur : ils défilent, ils ne sont pas coupés. */
  .fw-var[data-w="scroll-x"] .fw-var-stage{overflow-x:auto}

  /* Variante dont le balisage appelle des classes absentes de la feuille :
     l'aperçu est fidèle, c'est le framework qui est incomplet. */
  .fw-var.is-incomplete{border-color:color-mix(in srgb,var(--warn) 45%,var(--line2))}
  .fw-var-warn{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-6) var(--sp-10);
    font-size:var(--fs-xs);line-height:1.4;color:var(--warn);
    background:color-mix(in srgb,var(--warn) 12%,transparent);
    border-top:1px solid color-mix(in srgb,var(--warn) 28%,transparent);cursor:help}
  .fw-var-warn svg{width:13px;height:13px;flex:0 0 auto}

  /* ── Couche d'interactions du framework ── */
  .fw-js{border:1px solid var(--line2);border-radius:var(--radius);background:var(--card);
    padding:var(--sp-14) var(--sp-14)}
  .fw-js-api{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-bottom:var(--sp-12)}
  .fw-js-fn{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--fg);
    background:var(--bg2);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-8)}
  .fw-js-foot{display:flex;align-items:center;gap:var(--sp-12);flex-wrap:wrap}
  .fw-js-files{font-size:var(--fs-xs);color:var(--mut);font-family:var(--font-mono)}

  .fw-var-stage.on-navy{background:#16235e}
  .fw-var-stage.on-dark{background:#111}

  /* ── Palette modifiable ── */
  .fw-pal-bar{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;margin-bottom:var(--sp-10)}
  .fw-pal-item.is-edit{cursor:pointer;position:relative}
  .fw-pal-item.is-edit .fw-pal-chip::before{content:'';position:absolute;inset:0;
    background:rgba(0,0,0,.28);opacity:0;transition:opacity .12s;
    display:flex;align-items:center;justify-content:center}
  .fw-pal-item.is-edit:hover .fw-pal-chip::before{opacity:1}
  .fw-pal-item.is-edit:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line2))}
  .fw-pal-item.is-dirty{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}

  .fw-pal-state{font-size:var(--fs-xs);color:var(--accent);font-weight:var(--fw-strong)}

  /* Batteries de palettes proposées en exemple */
  .fw-sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:var(--sp-10);margin-bottom:var(--sp-6)}
  .fw-set{border:1px solid var(--line2);border-radius:var(--radius);padding:var(--sp-10) var(--sp-12);background:var(--card);
    cursor:pointer;text-align:left;transition:border-color .12s,transform .08s}
  .fw-set:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line2));transform:translateY(-1px)}
  /* Les enfants sont des <span> dans un <button> : sans display explicite ils
     restent en ligne et le bandeau de couleurs disparaît. */
  .fw-set-strip{display:flex;height:26px;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:var(--sp-8);width:100%}
  .fw-set-strip i{flex:1 1 0;min-width:0}
  .fw-set-n{display:block;font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--fg)}
  .fw-set-d{display:block;font-size:var(--fs-xs);color:var(--mut);margin-top:var(--sp-2);line-height:1.45}

  /* Bloc de code « mise en route » */
  .lib-code-wrap{position:relative}
  .lib-code{margin:0;background:var(--bg2);border:1px solid var(--line2);border-radius:var(--radius);
    padding:var(--sp-14) var(--sp-16);overflow:auto;font-size:var(--fs-sm);line-height:1.6;
    font-family:var(--font-mono);color:var(--fg)}
  .lib-code code{font-family:inherit;white-space:pre}
  .lib-code-copy{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;gap:var(--sp-4);
    font-size:var(--fs-xs);font-weight:var(--fw-strong);padding:var(--sp-4) var(--sp-10);border-radius:var(--radius-sm);cursor:pointer;
    border:1px solid var(--line2);background:var(--card);color:var(--mut);transition:color .1s,border-color .1s}
  .lib-code-copy:hover{color:var(--fg);border-color:color-mix(in srgb,var(--accent) 40%,var(--line2))}
  .lib-code-copy svg{width:12px;height:12px}
  /* Mots-clés (tags) en pied de fiche */
  .lib-detail-keywords{margin-top:var(--sp-22)}

  /* ── Librairie - polices : résumé KPI ── */
  .lib-font-kpi{border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden;background:var(--card)}
  .lib-font-kpi-stats{display:flex;border-bottom:1px solid var(--line2)}
  .lib-font-kpi-stats .lib-detail-stat{background:var(--card)}
  .lib-font-samples{display:flex;gap:0;border-bottom:1px solid var(--line2);overflow:hidden}
  .lib-font-sample{flex:1;padding:var(--sp-16) var(--sp-18);cursor:pointer;transition:background .1s;min-width:0}
  .lib-font-sample:hover{background:var(--bg2)}
  .lib-font-sample+.lib-font-sample{border-left:1px solid var(--line2)}
  .lib-font-sample-name{font-size:var(--fs-lg);font-weight:var(--fw-medium);color:var(--fg);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
  .lib-font-sample-cat{font-size:var(--fs-2xs);color:var(--mut);margin-top:var(--sp-4);
    text-transform:uppercase;letter-spacing:.07em;font-weight:var(--fw-strong)}
  .lib-font-kpi-actions{padding:var(--sp-12) var(--sp-16);display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-8)}
  .lib-font-browse-btn{display:inline-flex;align-items:center;gap:var(--sp-8);padding:var(--sp-8) var(--sp-16);
    border:1px solid var(--accent);border-radius:var(--radius);background:transparent;
    font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--accent);cursor:pointer;
    transition:background .1s,color .1s}
  .lib-font-browse-btn:hover{background:var(--accent);color:var(--on-solid)}
  /* ── Polices - navigateur (vue secondaire) ── */
  .lib-font-filter-row{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-bottom:var(--sp-16)}
  .lib-font-filter-btn{padding:var(--sp-4) var(--sp-12);border:1px solid var(--line2);border-radius:var(--radius-modal);
    font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--mut);background:var(--card);cursor:pointer;
    transition:border-color .1s,color .1s,background .1s}
  .lib-font-filter-btn:hover{border-color:var(--accent);color:var(--accent)}
  .lib-font-filter-btn.on{background:var(--accent);border-color:var(--accent);color:var(--on-solid)}
  .lib-font-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:var(--sp-10);margin-bottom:var(--sp-20)}
  .lib-font-grid-card{border:1px solid var(--line2);border-radius:var(--radius);
    background:var(--card);cursor:pointer;overflow:hidden;
    transition:border-color .12s,box-shadow .12s}
  .lib-font-grid-card:hover{border-color:var(--accent);
    box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 12%,transparent)}
  .lib-font-grid-preview{padding:var(--sp-20) var(--sp-18) var(--sp-12);font-size:var(--fs-4xl);line-height:var(--lh-flat);
    color:var(--fg);font-weight:var(--fw-regular);min-height:80px;display:flex;align-items:center}
  .lib-font-grid-body{padding:var(--sp-8) var(--sp-14) var(--sp-12);border-top:1px solid var(--line2);
    background:var(--bg2)}
  .lib-font-grid-name{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--fg);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lib-font-grid-meta{display:flex;align-items:center;gap:var(--sp-6);margin-top:var(--sp-4);flex-wrap:wrap}
  .lib-font-install-box{margin-top:var(--sp-8);padding-top:var(--sp-8)}
  /* ── Polices - détail police ── */
  .lib-font-cat-chip{font-size:var(--fs-2xs);font-weight:var(--fw-bold);margin-left:var(--sp-4)}
  .lib-font-preview-box{border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden;margin-bottom:var(--sp-16)}
  .lib-font-preview-text{padding:var(--sp-24) var(--sp-20);font-size:var(--fs-3xl);line-height:1.3;color:var(--fg);
    min-height:70px;word-break:break-word;transition:font-size .1s}
  .lib-font-preview-controls{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-8) var(--sp-14);
    border-top:1px solid var(--line2);background:var(--bg2)}
  .lib-font-size-slider{flex:1;accent-color:var(--accent);height:3px;cursor:pointer}
  .lib-font-weight-sel{border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-8);font-size:var(--fs-sm);
    background:var(--card);color:var(--fg);cursor:pointer}
  .lib-font-weights{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-bottom:var(--sp-4)}
  .lib-font-weight-chip{display:flex;flex-direction:column;align-items:center;padding:var(--sp-6) var(--sp-10);
    border:1px solid var(--line2);border-radius:var(--radius);background:var(--bg2);min-width:56px}
  .lib-font-weight-num{font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--fg)}
  .lib-font-weight-lbl{font-size:var(--fs-2xs);color:var(--mut);margin-top:var(--sp-1)}

  /* ── Intégrations & SDKs ── */
  .lib-int-cat-chip{font-size:var(--fs-2xs);font-weight:var(--fw-bold);margin-left:var(--sp-4)}
  .lib-int-type-row{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin:var(--sp-14) 0 var(--sp-4)}
  .lib-int-type-chip{display:inline-flex;align-items:center;font-size:var(--fs-xs);font-weight:var(--fw-bold);
    letter-spacing:.04em;padding:var(--sp-4) var(--sp-10);border-radius:var(--radius-sm)}
  /* Hébergement local - layout deux colonnes */
  .lib-local-box{margin-top:var(--sp-4);padding:var(--sp-18) var(--sp-20);
    background:var(--bg2);border-radius:var(--radius);border:1px solid var(--line2);
    display:flex;align-items:center;gap:var(--sp-20)}
  .lib-local-info{flex:1;min-width:0}
  .lib-local-desc{font-size:var(--fs-md);color:var(--mut);margin:0;line-height:var(--lh-normal)}
  .lib-local-btn{flex:none;display:inline-flex;align-items:center;gap:var(--sp-6);padding:var(--sp-10) var(--sp-18);
    border:1px solid var(--line2);border-radius:var(--radius);background:var(--card);
    font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--fg);cursor:pointer;white-space:nowrap;
    transition:border-color .12s,color .12s}
  .lib-local-btn:hover{border-color:var(--accent);color:var(--accent)}
  .lib-local-btn:disabled{opacity:.45;cursor:not-allowed}
  /* Code blocks - style éditeur sombre */
  .lib-int-snippet{position:relative;background:#16181d;border:1px solid #2a2d35;
    border-radius:var(--radius);padding:var(--sp-14) var(--sp-56) var(--sp-14) var(--sp-16);margin-bottom:var(--sp-4);overflow:auto}
  .lib-int-snippet code{font-family:var(--font-mono);
    font-size:var(--fs-sm);color:var(--code-fg);white-space:pre;display:block;line-height:var(--lh-loose)}
  .lib-int-copy-btn{position:absolute;top:8px;right:8px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);
    color:rgba(255,255,255,.5);border-radius:var(--radius-sm);padding:var(--sp-4) var(--sp-8);
    font-size:var(--fs-xs);cursor:pointer;white-space:nowrap;
    transition:background .1s,color .1s,border-color .1s}
  .lib-int-copy-btn:hover{background:rgba(255,255,255,.14);color:rgba(255,255,255,.9);
    border-color:rgba(255,255,255,.28)}
  /* Commandes npm/composer - même style éditeur */
  .lib-int-cmd{position:relative;display:flex;align-items:center;gap:var(--sp-10);
    background:#16181d;border:1px solid #2a2d35;border-radius:var(--radius);
    padding:var(--sp-10) var(--sp-16);margin-bottom:var(--sp-4)}
  .lib-int-cmd code{flex:1;font-family:var(--font-mono);
    font-size:var(--fs-md);color:var(--code-fg);letter-spacing:-.01em}
  .lib-int-cmd .lib-int-copy-btn{position:static;background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.5)}
  /* Variables d'env */
  .lib-int-envs{background:var(--bg2);border:1px solid var(--line2);border-radius:var(--radius);
    overflow:hidden;margin-bottom:var(--sp-4)}
  .lib-int-env-row{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-8) var(--sp-14)}
  .lib-int-env-row+.lib-int-env-row{border-top:1px solid var(--line2)}
  .lib-int-env-key{font-family:var(--font-mono);
    font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--fg);flex:1}
  .lib-int-env-lbl{font-size:var(--fs-xs);color:var(--mut)}
  .lib-int-docs-link{display:inline-flex;align-items:center;gap:var(--sp-8);padding:var(--sp-10) var(--sp-18);
    border:1px solid var(--line2);border-radius:var(--radius);background:var(--card);
    font-size:var(--fs-md);font-weight:var(--fw-strong);color:var(--fg);text-decoration:none;
    transition:border-color .12s,color .12s}
  .lib-int-docs-link:hover{border-color:var(--accent);color:var(--accent)}
  .lib-int-docs-link:hover{text-decoration:underline}

  /* ── Stats trafic ── */
  .em-stats{padding:var(--sp-14)}
  .em-stats-empty{text-align:center;padding:var(--sp-32) var(--sp-20);color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:var(--sp-8)}
  .em-stats-empty-icon{font-size:var(--fs-3xl)}
  .em-stats-empty p{font-size:var(--fs-md);line-height:var(--lh-normal);max-width:360px}
  .em-stats-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8);margin-bottom:var(--sp-16)}
  @media(max-width:640px){.em-stats-kpis{grid-template-columns:1fr 1fr}}
  .em-stats-kpi{background:var(--card2);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:var(--sp-10) var(--sp-12)}
  .em-hv-warn .em-hv{color:var(--err)}
  .em-stats-chart{margin-bottom:var(--sp-16)}
  .em-stats-chart-title{font-size:var(--fs-xs);font-weight:var(--fw-strong);text-transform:uppercase;letter-spacing:.06em;
    color:var(--mut);margin-bottom:var(--sp-10)}
  .stat-bars{display:flex;align-items:flex-end;gap:var(--sp-4);height:90px;padding:0 var(--sp-2)}
  .stat-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);flex:1}
  .stat-bar{background:var(--accent);border-radius:var(--radius-xs) var(--radius-xs) 0 0;width:100%;min-height:3px;
    opacity:.8;transition:opacity .15s}
  .stat-bar-wrap:hover .stat-bar{opacity:1}
  .stat-bar-l{font-size:var(--fs-2xs);color:var(--mut);font-variant-numeric:tabular-nums}
  .em-stats-section{margin-bottom:var(--sp-14)}
  .em-stats-section-title{font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.06em;
    color:var(--mut);margin-bottom:var(--sp-8)}
  .stat-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
  .stat-table th{text-align:left;font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;
    letter-spacing:.06em;color:var(--mut);padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--line)}
  .stat-table td{padding:var(--sp-4) var(--sp-6);border-bottom:1px solid var(--line2)}
  .st-rank{color:var(--mut);font-size:var(--fs-xs);width:24px}
  .st-path{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-sm)}
  .st-n{text-align:right;font-variant-numeric:tabular-nums;color:var(--txt)}
  .st-pct{width:80px}.st-pct-bar{height:4px;background:var(--line2);border-radius:var(--radius-xs)}
  .st-pct-bar>div{height:100%;background:var(--accent);border-radius:var(--radius-xs);opacity:.7}
  .stat-refs{display:flex;flex-direction:column;gap:var(--sp-4)}
  .stat-ref{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-4) var(--sp-8);
    background:var(--bg2);border-radius:var(--radius-sm);font-size:var(--fs-sm)}
  .stat-ref-src{color:var(--txt);font-weight:var(--fw-medium)}
  .stat-ref-n{color:var(--mut);font-variant-numeric:tabular-nums}
  .stat-codes{display:flex;gap:var(--sp-8);flex-wrap:wrap}
  .stat-code{padding:var(--sp-6) var(--sp-12);border-radius:var(--radius);border:1px solid var(--line);background:var(--bg2);
    font-size:var(--fs-sm);display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);min-width:64px}
  .stat-code.ok{border-color:color-mix(in srgb,var(--ok) 35%,var(--line));background:color-mix(in srgb,var(--ok) 8%,var(--bg2))}
  .stat-code.err{border-color:color-mix(in srgb,var(--err) 35%,var(--line));background:color-mix(in srgb,var(--err) 8%,var(--bg2))}
  .stat-code.warn{border-color:color-mix(in srgb,var(--warn) 35%,var(--line));background:color-mix(in srgb,var(--warn) 8%,var(--bg2))}
  .stat-code-v{font-size:var(--fs-base);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
  .stat-code-n{font-size:var(--fs-xs);color:var(--mut)}
  .em-stats-footer{display:flex;align-items:center;gap:var(--sp-12);margin-top:var(--sp-8);padding-top:var(--sp-8);border-top:1px solid var(--line2)}
  @media(max-width:640px){
    #modal.settings .modal-card{width:calc(100vw - 24px)}
    .set-layout{flex-direction:column;min-height:0}
    .set-nav{flex-direction:row;width:auto;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line)}
    .set-nav-item{white-space:nowrap}
    .set-pane{max-height:none}
  }

  /* ── Écran de connexion (verrou du poste, un seul compte local) ──
     Superposé à toute l'appli (z-index au-dessus du header fixe), retiré du
     DOM dès l'identifiant validé - cf. le script inline dans index.php.
     La marque reprend TEL QUEL le logo de l'en-tête (.brand-mark.bic, système
     solaire animé de 09-ai.css - mêmes id de dégradé #dh-pilot-grad/-orb) :
     pas un pictogramme générique, le même signe qu'ailleurs dans l'appli. */
  .dh-login{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
    background:var(--bg);padding:var(--sp-24);overflow:hidden}
  /* Halo doux derrière la carte : un dégradé radial de l'accent, posé une fois,
     pas une pastille pleine - la couleur reste rare, juste assez pour ancrer
     la marque au centre d'un fond qui, sinon, serait entièrement plat. */
  .dh-login::before{content:'';position:absolute;top:50%;left:50%;width:640px;height:640px;
    transform:translate(-50%,-58%);border-radius:50%;pointer-events:none;
    background:radial-gradient(circle,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%)}
  .dh-login-card{position:relative;width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;
    text-align:center;gap:var(--sp-4);
    background:var(--card);border:1px solid var(--line);border-radius:calc(var(--radius-modal) + 8px);
    padding:var(--sp-32) var(--sp-28)}
  .dh-login-mark{width:52px;height:52px;display:grid;place-items:center;margin-bottom:var(--sp-14)}
  .dh-login-mark .bic{width:52px;height:52px}
  .dh-login-title{margin:0;font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)}
  .dh-login-title span{color:var(--accent)}
  .dh-login-sub{margin:0 0 var(--sp-24);color:var(--mut);font-size:var(--fs-md)}
  .dh-login-card .field{width:100%;text-align:left;margin-bottom:var(--sp-12)}
  .dh-login-err{width:100%;margin:0 0 var(--sp-10);font-size:var(--fs-sm);color:var(--err);text-align:left}
  .dh-login-btn{width:100%;margin-top:var(--sp-6);height:40px;justify-content:center;font-weight:var(--fw-strong)}
  /* Écran de connexion : le lien secondaire sous le bouton (mot de passe oublié,
     abandon du second facteur). Discret, mais pas illisible. */
  .dh-login-alt{width:100%;margin:var(--sp-14) 0 0;font-size:var(--fs-sm);color:var(--mut);text-align:center;line-height:1.5}
  .dh-login-alt a{color:var(--accent);text-decoration:none}
  .dh-login-alt a:hover{text-decoration:underline}
  /* Codes de secours : montrés une seule fois, donc lisibles sans effort. */
  .sec-2fa-codes{font-family:var(--mono);font-size:var(--fs-md);line-height:1.9;letter-spacing:.06em;
    margin:var(--sp-12) 0;padding:var(--sp-12);background:var(--card);border-radius:var(--r-md);
    border:1px solid var(--bd);user-select:all}
  @media(max-width:420px){ .dh-login-card{padding:var(--sp-24) var(--sp-20)} }
}