/* L'ESPACE EN ZONES (#1108, socle #1108.2) : LE STYLE COMMUN DE LA MAQUETTE VALIDÉE PAR GUILLAUME (version 8), TEL QUEL.
   Les sources, mot pour mot : docs/refonte-zones/A-style.md (variables, feuille kd-) et B-pixel.md (Pixel, le guide).
   ⭐ SERVIE PAR LE MANDATAIRE à /kaordia-espace.css (mandataire/Dockerfile, default.conf) : la coquille de /admin la reçoit
      de mandataire/espace-en-zones.js ; une page du cadre qui pose des composants kd- la charge elle-même, APRÈS
      /charte-application.css (l'Accueil : modules/mcp/accueil.html).
   ⭐ QUATRE PARTIES : ① les polices (Plus Jakarta Sans servie par le projet, Inter déclarée par la charte commune) ;
      ② les variables de la maquette, clair puis sombre, posées sur la RACINE de l'espace (.kd) et sur elle seule : rien
      n'en déborde sur une page qui ne pose pas `.kd` ; « Système » suit `html[data-mode]` (/static/apparence.js) ;
      ③ la feuille commune kd- et Pixel (px-), recopiées des annexes ; ④ LE BRANCHEMENT : la coquille sans volet,
      l'en-tête, l'en-tête de zone, l'Accueil en tuiles (ce que les annexes décrivent en mots, écrit ici).
   ⛔ Le SEUL autre fichier où une couleur s'écrit en toutes lettres (charte/theme.css excepté) : la palette validée de la
      maquette. tests/test_charte_de_l_admin.py l'exclut en le nommant ; ④ n'écrit que des var(--…).
   ⛔ Une couleur de plus se pose dans ②, jamais dans une règle. Comment brancher une zone : docs/refonte-zones/brancher-une-zone.md. */

/* ── ① LES POLICES ─────────────────────────────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/charte/plus-jakarta-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/charte/plus-jakarta-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── ② LES VARIABLES DE LA MAQUETTE (annexe A) : clair, puis sombre ─────────────────────────────────────────────── */
.kd {
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --border: #e0e5ee;
  --border-strong: #c3ccda;
  --text: #0e1726;
  --muted: #536079;
  --numeral: #8592a8;
  /* (#1244.6, audit #1244.5 n° 1) UNE SEULE COULEUR PRINCIPALE : celle de la charte (`--theme-primaire`, #820.2), la même
     que le bouton principal de /admin ; la valeur de la maquette ne reste qu'en repli */
  --primary: var(--theme-primaire, #13203a);
  --primary-hover: var(--theme-primaire-survol, #213459);
  --on-primary: var(--theme-sur-primaire, #ffffff);
  --accent: #16a34a;
  --accent-text: #15803d;
  --accent-soft: #dcfce7;
  --on-accent: #052e16;
  --ring: #2563eb;
  --danger: #b91c1c;
  --danger-soft: #fef2f2;
  --danger-border: #fca5a5;
  --warn-bg: #fef3c7;
  --warn-fg: #92400e;
  --switch-off: #c7d0dd;
  --logo-bg: #13203a;
  --logo-fg: #ffffff;
  --f1-bg: #dcfce7;
  --f1-fg: #166534;
  --f2-bg: #dbeafe;
  --f2-fg: #1e40af;
  --f3-bg: #ede9fe;
  --f3-fg: #5b21b6;
  --f4-bg: #e5e9f0;
  --f4-fg: #334155;
  --dot: #22c55e;
  --map-bubble: #f6f8fb;
  --scrim: rgba(14, 23, 38, 0.45);
  --toast-bg: #13203a;
  --toast-fg: #ffffff;
  --px-label: #86efac;
  --px-plein-fg: #052e16;
  --px-eye: #7CF5B0;
  --px-voile: rgba(14, 23, 38, 0.22);
  --shadow-sm: 0 1px 2px rgba(14, 23, 38, 0.06), 0 1px 3px rgba(14, 23, 38, 0.06);
  --shadow-lg: 0 18px 40px -18px rgba(14, 23, 38, 0.35);
}
html[data-mode="sombre"] .kd {
  --bg: #0a1020;
  --surface: #111a2e;
  --surface-2: #18233b;
  --border: #243150;
  --border-strong: #3a4a70;
  --text: #e8edf7;
  --muted: #9aa7c0;
  --numeral: #64769d;
  /* (#1244.6) le primaire de la charte, le même qu'en clair : le vert ne dit que « ouvert / actif » (#820.2) */
  --primary: var(--theme-primaire, #22c55e);
  --primary-hover: var(--theme-primaire-survol, #4ade80);
  --on-primary: var(--theme-sur-primaire, #04210f);
  --accent: #22c55e;
  --accent-text: #4ade80;
  --accent-soft: rgba(34, 197, 94, 0.16);
  --on-accent: #04210f;
  --ring: #60a5fa;
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --danger-border: rgba(248, 113, 113, 0.55);
  --warn-bg: rgba(245, 158, 11, 0.16);
  --warn-fg: #fcd34d;
  --switch-off: #34446a;
  --logo-bg: #e8edf7;
  --logo-fg: #0a1020;
  --f1-bg: rgba(34, 197, 94, 0.16);
  --f1-fg: #86efac;
  --f2-bg: rgba(59, 130, 246, 0.18);
  --f2-fg: #93c5fd;
  --f3-bg: rgba(139, 92, 246, 0.2);
  --f3-fg: #c4b5fd;
  --f4-bg: rgba(148, 163, 184, 0.16);
  --f4-fg: #cbd5e1;
  --dot: #22c55e;
  --map-bubble: #0e1628;
  --scrim: rgba(2, 6, 16, 0.6);
  --toast-bg: #e8edf7;
  --toast-fg: #0a1020;
  --px-label: #15803d;
  --px-plein-fg: #ffffff;
  --px-eye: #7CF5B0;
  --px-voile: rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
}

/* ── ③ LA FEUILLE COMMUNE kd- (annexe A, telle quelle) ───────────────────────────────────────────────────────── */
.kd,.kd *{box-sizing:border-box}
.kd{position:relative;min-height:100vh;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
.kd h1,.kd h2,.kd h3{font-family:'Plus Jakarta Sans','Inter',sans-serif;margin:0;color:var(--text);letter-spacing:-0.015em;word-spacing:.08em}
.kd p{margin:0}
.kd ol,.kd ul{margin:0;padding:0;list-style:none}
.kd button,.kd input,.kd select,.kd textarea{font-family:inherit}
.kd :focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.kd-ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kd-ico-sm{width:16px;height:16px}
.kd-ico-lg{width:40px;height:40px;stroke-width:2.5}
.kd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--theme-rayon,8px);font-size:14px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:background-color .15s,border-color .15s,color .15s;white-space:nowrap;flex:none}
.kd-btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.kd-btn:disabled,.kd-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.kd-btn-primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.kd-btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.kd-btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.kd-btn-ghost:hover{background:var(--surface-2);border-color:transparent;color:var(--text)}
.kd-btn-danger{background:transparent;border-color:var(--danger-border);color:var(--danger)}
.kd-btn-danger:hover{background:var(--danger-soft);border-color:var(--danger)}
.kd-btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:var(--theme-rayon,8px)}
.kd-btn-lg{height:48px;padding:0 22px;font-size:15px;border-radius:12px}
.kd-btn-icon{width:40px;padding:0}
.kd-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap}
.kd-card{background:var(--surface);border:1px solid var(--border);border-radius:18px}
.kd-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.kd-spacer{flex:1 1 0;min-width:0}
.kd-search{position:relative;display:flex;align-items:center;flex:1 1 220px;min-width:180px;max-width:420px}
.kd-search .kd-ico{position:absolute;left:12px;color:var(--muted);pointer-events:none}
.kd-input{height:40px;width:100%;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:0 12px;font-size:14px}
.kd-search .kd-input{padding-left:40px}
.kd-input::placeholder{color:var(--muted)}
textarea.kd-input{height:96px;padding:12px;resize:vertical}
.kd-select{height:40px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:0 10px;font-size:14px;font-weight:500}
.kd-label{font-size:13px;font-weight:600;color:var(--muted)}
.kd-seg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px;padding:3px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);flex:none;max-width:100%}
.kd-seg button{all:unset;cursor:pointer;height:32px;padding:0 12px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;white-space:nowrap}
.kd-seg button:hover{color:var(--text)}
.kd-seg button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}
.kd-switch{all:unset;cursor:pointer;position:relative;width:42px;height:24px;border-radius:999px;background:var(--switch-off);transition:background-color .15s;flex:none}
.kd-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.kd-switch[aria-pressed="true"]{background:var(--accent)}
.kd-switch[aria-pressed="true"]::after{transform:translateX(18px)}
.kd-brand{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:4px 6px;border-radius:10px}
.kd-crumb{all:unset;cursor:pointer;color:var(--muted);font-weight:500;padding:4px 8px;border-radius:8px}
.kd-crumb:hover{background:var(--surface-2);color:var(--text)}
.kd-avatar{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none}
.kd-hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding:32px;border-radius:24px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.kd-ring{width:108px;height:108px;border-radius:50%;display:grid;place-items:center;flex:none}
.kd-ring-in{width:86px;height:86px;border-radius:50%;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:800 24px/1 'Plus Jakarta Sans',sans-serif;color:var(--text)}
.kd-ring-in small{font:600 11px/1.2 'Inter',sans-serif;color:var(--muted)}
.kd-fam{display:flex;flex-direction:column;gap:14px}
.kd-fam-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kd-fam-head h2{font-size:20px}
.kd-fam-when{font-size:14px;color:var(--muted)}
.kd-fam-dot{width:10px;height:10px;border-radius:50%;flex:none}
.kd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.kd-tile{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:16px;min-height:204px;padding:20px;border-radius:20px;background:var(--surface);border:1px solid var(--border);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.kd-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.kd-tile:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.kd-tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.kd-tile-icon{width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.kd-tile-num{font:800 30px/1 'Plus Jakarta Sans',sans-serif;color:var(--numeral)}
.kd-tile-body{display:flex;flex-direction:column;gap:6px}
.kd-tile-title{font:700 18px/1.25 'Plus Jakarta Sans',sans-serif;color:var(--text)}
.kd-tile-text{font-size:14px;line-height:1.5;color:var(--muted)}
.kd-tile-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.kd-tile-when{font-size:12px;font-weight:500;color:var(--muted)}
.kd-tip{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:20px;border:1px dashed var(--border-strong);min-height:204px}
.kd-zone{display:flex;flex-direction:column;gap:24px}
.kd-zone-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px}
.kd-zone-num{width:60px;height:60px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;font:800 26px/1 'Plus Jakarta Sans',sans-serif;flex:none}
.kd-zone-titles{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:10px}
.kd-zone-titles h1{font-size:30px;line-height:1.15}
.kd-zone-p{font-size:16px;color:var(--muted);max-width:660px}
.kd-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kd-steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kd-steps li{display:flex;flex-direction:column;gap:10px}
.kd-step-bar{height:6px;border-radius:999px}
.kd-step-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.kd-panel{padding:28px;border-radius:20px;background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;gap:20px}
.kd-panel h2{font-size:22px}
.kd-panel-head{display:flex;flex-direction:column;gap:6px}
.kd-choice{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:16px;border:1px solid var(--border);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.kd-choice:hover{border-color:var(--border-strong)}
.kd-choice[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.kd-choice[aria-disabled="true"]{cursor:not-allowed;opacity:.6}
.kd-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.kd-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--border-strong);flex:none}
.kd-choice[aria-pressed="true"] .kd-radio{border-color:var(--accent);background:radial-gradient(var(--accent) 42%,transparent 47%)}
.kd-raccourci{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px dashed var(--border-strong)}
.kd-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--border)}
.kd-code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:14px;padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);flex:1 1 320px;min-width:0;overflow-wrap:anywhere}
.kd-mono{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.kd-ol{display:flex;flex-direction:column;gap:12px}
.kd-ol li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text)}
.kd-ol-n{min-width:26px;height:26px;padding:0 6px;border-radius:999px;background:var(--surface-2);color:var(--text);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.kd-say{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:14px;background:var(--surface-2);font-size:17px;font-weight:600;color:var(--text)}
.kd-ok{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:14px;background:var(--accent-soft);color:var(--text)}
.kd-ok-mark{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;flex:none}
.kd-done{align-items:center;text-align:center;padding:44px 24px}
.kd-done-mark{width:84px;height:84px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;animation:kd-pop .5s ease both}
.kd-list{display:flex;flex-direction:column;gap:12px}
.kd-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:16px}
.kd-row-main{display:flex;flex-direction:column;gap:4px;flex:1 1 300px;min-width:0}
.kd-row-title{font-weight:600;font-size:15px;color:var(--text)}
.kd-row-sub{font-size:14px;color:var(--muted)}
.kd-row-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kd-logo{width:42px;height:42px;border-radius:12px;color:#fff;display:inline-flex;align-items:center;justify-content:center;font:800 15px/1 'Plus Jakarta Sans',sans-serif;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.kd-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.kd-kpi{padding:20px;border-radius:18px;background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.kd-kpi-n{font:800 32px/1.1 'Plus Jakarta Sans',sans-serif;color:var(--text)}
.kd-kpi-l{font-size:14px;color:var(--muted)}
.kd-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.kd-box{padding:22px;display:flex;flex-direction:column;gap:16px}
.kd-box h2{font-size:18px}
.kd-bars{display:flex;align-items:flex-end;gap:10px}
.kd-bar-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.kd-bar-track{height:140px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.kd-bar{width:100%;max-width:44px;border-radius:8px 8px 4px 4px;background:var(--accent)}
.kd-bar-v{font-size:12px;font-weight:700;color:var(--text)}
.kd-bar-l{font-size:12px;color:var(--muted)}
.kd-meter{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.kd-meter span{display:block;height:100%;border-radius:999px;background:var(--accent)}
.kd-split{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.kd-split-main{flex:999 1 560px;min-width:0}
.kd-split-side{flex:1 1 280px;min-width:0}
.kd-table-box{overflow-x:auto;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.kd-table{width:100%;border-collapse:collapse;min-width:520px}
.kd-table th,.kd-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:14px;color:var(--text)}
.kd-table th{font-size:13px;color:var(--muted);font-weight:600;background:var(--surface-2)}
.kd-table tr:last-child td{border-bottom:0}
.kd-num{text-align:right!important;font-variant-numeric:tabular-nums}
.kd-tree{display:flex;flex-wrap:wrap;align-items:center;row-gap:20px}
.kd-node{flex:0 1 300px;padding:22px;border-radius:20px;border:2px solid var(--accent);background:var(--surface);display:flex;flex-direction:column;gap:12px}
.kd-branch{flex:999 1 480px;min-width:0;position:relative;padding-left:44px;display:flex;flex-direction:column;gap:10px}
.kd-branch::before{content:"";position:absolute;left:20px;top:30px;bottom:30px;width:2px;background:var(--accent);opacity:.5;border-radius:2px}
.kd-branch-row{position:relative;display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:var(--surface)}
.kd-branch-row::before{content:"";position:absolute;left:-25px;top:50%;width:24px;height:2px;background:var(--accent);opacity:.5}
.kd-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted)}
.kd-legend span{display:inline-flex;align-items:center;gap:6px}
.kd-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.kd-field{display:flex;flex-direction:column;gap:6px}
.kd-details{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--surface)}
.kd-details summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--text);list-style:none;display:flex;justify-content:space-between;gap:12px}
.kd-details summary::after{content:"+";color:var(--muted);font-weight:700}
.kd-details[open] summary::after{content:"−"}
.kd-toast{position:fixed;right:24px;bottom:88px;z-index:30;display:flex;align-items:center;gap:12px;max-width:440px;padding:14px 18px;border-radius:14px;background:var(--toast-bg);color:var(--toast-fg);box-shadow:var(--shadow-lg);font-size:14px;font-weight:500;animation:kd-rise .25s ease both}
.kd-anim{animation:kd-rise .28s ease both}
@keyframes kd-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes kd-pop{0%{opacity:0;transform:scale(.5)}60%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.kd,.kd *{animation:none!important;transition:none!important}}
@media (max-width: 640px){.kd-step-text{display:none}.kd-hero{padding:22px}.kd-zone-titles h1{font-size:24px}.kd-panel{padding:20px}}

/* ── ③ bis PIXEL, LE GUIDE (annexe B, telle quelle) ──────────────────────────────────────────────────────────── */
.px-halo{position:absolute;z-index:41;border-radius:22px;pointer-events:none;box-shadow:0 0 0 3px var(--accent),0 0 0 9999px var(--px-voile);transition:left .6s ease,top .6s ease,width .6s ease,height .6s ease,opacity .3s}
.px-bulle{position:absolute;z-index:42;width:284px;padding:14px 16px 12px;border-radius:16px;background:var(--toast-bg);color:var(--toast-fg);font-size:15px;line-height:1.45;box-shadow:var(--shadow-lg);transition:left .9s cubic-bezier(.65,0,.35,1),top .9s cubic-bezier(.65,0,.35,1),opacity .25s ease,transform .3s cubic-bezier(.3,1.5,.5,1)}
.px-bulle.px-cachee{opacity:0;transform:translateY(8px) scale(.94);pointer-events:none}
.px-queue{position:absolute;right:-7px;top:26px;width:14px;height:14px;background:var(--toast-bg);transform:rotate(45deg);border-radius:2px}
.px-droite .px-queue{right:auto;left:-7px}
.px-etiquette{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--px-label);margin-bottom:4px}
.px-pied{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.px-points{display:flex;align-items:center;gap:5px;margin-right:auto}
.px-point{all:unset;cursor:pointer;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.3;transition:all .25s}
.px-point.px-on{width:20px;border-radius:4px;opacity:1;background:var(--px-label)}
.px-b{all:unset;cursor:pointer;height:30px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:700;display:inline-flex;align-items:center}
.px-b-plein{background:var(--px-label);color:var(--px-plein-fg)}
.px-b-vide{opacity:.7}
.px-b-vide:hover{opacity:1}
.px-b:focus-visible,.px-point:focus-visible{outline:2px solid var(--px-label);outline-offset:2px}
.px-fab{position:fixed;right:24px;bottom:24px;z-index:26;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 12px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font:700 14px/1 'Inter',sans-serif;cursor:pointer;box-shadow:var(--shadow-lg);transition:transform .2s}
.px-fab:hover{transform:translateY(-2px)}
.px-mini{position:relative;flex:none;width:28px;height:22px;border-radius:9px;background:#141A2A;box-shadow:0 0 0 2px #ffffff,0 0 0 3px var(--border)}
.px-mini::before{content:"";position:absolute;left:11px;top:-9px;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent)}
.px-mini i{position:absolute;top:7px;width:5px;height:8px;border-radius:3px;background:var(--px-eye)}
.px-mini i:first-child{left:7px}.px-mini i:last-child{right:7px}
.px-bot{position:absolute;width:110px;height:150px;z-index:43;pointer-events:none;transition:left .9s cubic-bezier(.65,0,.35,1),top .9s cubic-bezier(.65,0,.35,1),opacity .3s}
.px-flip,.px-float,.px-tilt{position:absolute;inset:0}
.px-flip{transition:transform .3s ease}
.px-gauche .px-flip{transform:scaleX(-1)}
.px-float{animation:px-float 3s ease-in-out infinite}
.px-tilt{transition:transform .4s ease;transform-origin:55px 110px}
.px-vole .px-float{animation:px-hop .45s ease-in-out infinite}
.px-vole .px-tilt{transform:rotate(12deg)}
.px-ombre{position:absolute;left:30px;top:142px;width:50px;height:8px;border-radius:50%;background:#151A26;opacity:.16;animation:px-ombre 3s ease-in-out infinite}
.px-vole .px-ombre{opacity:.08}
.px-antenne{position:absolute;left:55px;top:0;width:0;height:20px;transform-origin:0 20px}
.px-tige{position:absolute;left:-2px;top:6px;width:4px;height:14px;border-radius:2px;background:#C5CCDA}
.px-bulbe{position:absolute;left:-7px;top:-4px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent);animation:px-pulse 1.6s ease-in-out infinite}
.px-pose-surprise .px-antenne{animation:px-boing .7s ease}
.px-pose-celebrate .px-antenne{animation:px-boing .7s ease infinite}
.px-oreille{position:absolute;top:44px;width:8px;height:22px;border-radius:4px;background:#C9D0DD}
.px-oreille.px-g{left:1px}.px-oreille.px-d{left:101px}
.px-tete{position:absolute;left:5px;top:18px;width:100px;height:72px;border-radius:30px;background:linear-gradient(#FFFFFF,#E8ECF4);box-shadow:inset 0 -5px 0 rgba(20,26,38,.06),0 10px 22px -10px rgba(20,26,38,.4);transform-origin:50% 100%;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.px-ecran{position:absolute;left:10px;top:10px;right:10px;bottom:10px;border-radius:20px;background:#141A2A;overflow:hidden}
.px-reflet{position:absolute;left:9px;top:5px;width:16px;height:4px;border-radius:2px;background:rgba(255,255,255,.13)}
.px-oeil{position:absolute;top:15px;width:13px;height:17px;border-radius:7px;background:var(--px-eye);box-shadow:0 0 8px var(--px-eye);transition:all .25s ease;animation:px-cligne 4.2s infinite}
.px-oeil.px-g{left:19px}.px-oeil.px-d{right:19px}
.px-joue{position:absolute;top:34px;width:11px;height:5px;border-radius:50%;background:#FF7AA8;opacity:0;transition:opacity .3s}
.px-joue.px-g{left:7px}.px-joue.px-d{right:7px}
.px-bouche{position:absolute;left:50%;bottom:7px;width:16px;height:7px;margin-left:-8px;border:3px solid var(--px-eye);border-top:0;border-radius:0 0 12px 12px;transition:all .25s ease}
.px-pose-smile .px-oeil,.px-pose-celebrate .px-oeil,.px-pose-wave .px-oeil,.px-pose-wink .px-oeil.px-d{top:19px;height:9px;background:transparent;border:4px solid var(--px-eye);border-bottom:0;border-radius:12px 12px 0 0;box-shadow:none;animation:none}
.px-pose-smile .px-joue,.px-pose-celebrate .px-joue,.px-pose-wave .px-joue,.px-pose-wink .px-joue{opacity:.9}
.px-pose-smile .px-bouche,.px-pose-wave .px-bouche,.px-pose-wink .px-bouche{width:26px;height:12px;margin-left:-13px}
.px-pose-celebrate .px-bouche{width:22px;height:13px;margin-left:-11px;background:var(--px-eye);border-radius:0 0 12px 12px}
.px-pose-wink .px-oeil.px-g{animation:none;height:18px}
.px-pose-wink .px-tete{transform:rotate(6deg)}
.px-pose-surprise .px-oeil{width:17px;height:17px;top:12px;border-radius:50%;animation:none}
.px-pose-surprise .px-oeil.px-g{left:16px}.px-pose-surprise .px-oeil.px-d{right:16px}
.px-pose-surprise .px-bouche{width:12px;height:12px;margin-left:-6px;border:3px solid var(--px-eye);border-radius:50%}
.px-pose-surprise .px-tete{transform:translateY(-5px)}
.px-pose-think .px-oeil{height:11px;top:13px;transform:translate(5px,-2px);animation:none}
.px-pose-think .px-bouche{width:10px;height:3px;margin-left:2px;border:0;border-radius:2px;background:var(--px-eye)}
.px-pose-think .px-tete{transform:rotate(-7deg)}
.px-pose-point .px-oeil{transform:translate(-5px,3px);animation:none}
.px-pose-point .px-tete{transform:rotate(-6deg)}
.px-pose-fly .px-oeil{height:14px;transform:translateX(4px);animation:none}
.px-pose-fly .px-bouche{width:12px;height:6px;margin-left:-6px}
.px-corps{position:absolute;left:31px;top:86px;width:48px;height:38px;border-radius:16px 16px 22px 22px;background:linear-gradient(#FFFFFF,#E8ECF4);box-shadow:0 8px 18px -10px rgba(20,26,38,.4)}
.px-coeur{position:absolute;left:19px;top:13px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:px-pulse 1.6s ease-in-out infinite}
.px-bras{position:absolute;top:92px;width:10px;height:30px;border-radius:5px;background:#F4F6FA;border:1px solid #D5DBE6;transform-origin:5px 4px;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.px-main{position:absolute;left:-3px;bottom:-7px;width:14px;height:14px;border-radius:50%;background:#fff;border:1px solid #D5DBE6}
.px-bras.px-g{left:24px;transform:rotate(14deg)}
.px-bras.px-d{left:76px;transform:rotate(-14deg)}
.px-pose-wave .px-bras.px-d{animation:px-salut .45s ease-in-out infinite alternate}
.px-pose-point .px-bras.px-g{transform:rotate(68deg)}
.px-pose-think .px-bras.px-d{transform:rotate(158deg)}
.px-pose-surprise .px-bras.px-g{transform:rotate(62deg)}
.px-pose-surprise .px-bras.px-d{transform:rotate(-62deg)}
.px-pose-celebrate .px-bras.px-g{animation:px-brasG .5s ease-in-out infinite}
.px-pose-celebrate .px-bras.px-d{animation:px-brasD .5s ease-in-out infinite}
.px-pose-celebrate .px-float{animation:px-saut .7s ease-in-out infinite}
.px-pose-fly .px-bras.px-g,.px-pose-fly .px-bras.px-d{transform:rotate(38deg)}
.px-flamme{position:absolute;left:47px;top:118px;width:16px;height:20px;transform-origin:50% 0;transform:scale(.55);transition:transform .3s ease}
.px-feu{width:100%;height:100%;border-radius:50% 50% 50% 50% / 40% 40% 60% 60%;background:linear-gradient(#FFE08A,#FF7A45);transform-origin:50% 0;animation:px-flamme .14s ease-in-out infinite alternate}
.px-vole .px-flamme{transform:scale(1.25)}
.px-pose-celebrate .px-flamme{transform:scale(.9)}
.px-pensee{position:absolute;left:92px;top:-8px;width:44px;height:24px;border-radius:12px;background:#fff;box-shadow:0 6px 16px -8px rgba(20,26,38,.45);display:flex;align-items:center;justify-content:center;gap:4px;opacity:0;transform:scale(.6);transition:all .3s cubic-bezier(.3,1.5,.5,1)}
.px-pensee span{width:6px;height:6px;border-radius:50%;background:#151A26;animation:px-points 1.2s ease-in-out infinite}
.px-pensee span:nth-child(2){animation-delay:.2s}.px-pensee span:nth-child(3){animation-delay:.4s}
.px-pose-think .px-pensee{opacity:1;transform:scale(1)}
.px-spark{position:absolute;width:10px;height:10px;border-radius:2px;opacity:0;transform:rotate(45deg)}
.px-s1{left:-10px;top:24px;background:#FFC93C}
.px-s2{left:110px;top:14px;background:var(--accent)}
.px-s3{left:-6px;top:84px;background:#FF7AA8}
.px-s4{left:112px;top:76px;background:#62D9A0}
.px-pose-celebrate .px-spark{animation:px-pop 1.1s ease-out infinite}
.px-pose-celebrate .px-s2{animation-delay:.25s}
.px-pose-celebrate .px-s3{animation-delay:.5s}
.px-pose-celebrate .px-s4{animation-delay:.75s}
@keyframes px-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes px-ombre{0%,100%{transform:scaleX(1);opacity:.16}50%{transform:scaleX(.8);opacity:.09}}
@keyframes px-hop{0%,100%{transform:translateY(-6px)}50%{transform:translateY(-15px)}}
@keyframes px-saut{0%,100%{transform:translateY(0)}40%{transform:translateY(-22px)}}
@keyframes px-cligne{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes px-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@keyframes px-salut{0%{transform:rotate(-128deg)}100%{transform:rotate(-172deg)}}
@keyframes px-brasG{0%,100%{transform:rotate(152deg)}50%{transform:rotate(128deg)}}
@keyframes px-brasD{0%,100%{transform:rotate(-152deg)}50%{transform:rotate(-128deg)}}
@keyframes px-flamme{0%{transform:scaleY(.85)}100%{transform:scaleY(1.12)}}
@keyframes px-boing{0%{transform:rotate(0)}25%{transform:rotate(-18deg)}50%{transform:rotate(14deg)}75%{transform:rotate(-7deg)}100%{transform:rotate(0)}}
@keyframes px-pop{0%{opacity:0;transform:rotate(45deg) scale(.3)}30%{opacity:1;transform:rotate(45deg) scale(1)}100%{opacity:0;transform:rotate(45deg) translateY(-16px) scale(.6)}}
@keyframes px-points{0%,100%{opacity:.25}50%{opacity:1}}

/* ── ④ LE BRANCHEMENT (#1108.2) : ce que les annexes décrivent en mots (C-gabarits.md), écrit sur leurs variables ──── */
.kd [hidden], .kd[hidden] { display: none !important; }
/* les teintes des quatre familles : Démarrer (vert), Suivre (bleu), Enrichir (violet), Compte (gris) */
.kd-teinte-1 { background: var(--f1-bg); color: var(--f1-fg); }
.kd-teinte-2 { background: var(--f2-bg); color: var(--f2-fg); }
.kd-teinte-3 { background: var(--f3-bg); color: var(--f3-fg); }
.kd-teinte-4 { background: var(--f4-bg); color: var(--f4-fg); }
.kd-fam-dot.kd-teinte-1 { background: var(--f1-fg); }
.kd-fam-dot.kd-teinte-2 { background: var(--f2-fg); }
.kd-fam-dot.kd-teinte-3 { background: var(--f3-fg); }
.kd-fam-dot.kd-teinte-4 { background: var(--f4-fg); }
/* une pastille d'état : à traiter (orange), en ordre (vert), neutre */
.kd-chip[data-ton="attention"] { background: var(--warn-bg); color: var(--warn-fg); }
.kd-chip[data-ton="ok"] { background: var(--accent-soft); color: var(--accent-text); }
.kd-chip[data-ton="neutre"], .kd-chip-quand { background: var(--surface-2); color: var(--muted); }

/* LA COQUILLE SANS VOLET : l'en-tête en haut, l'en-tête de zone, les onglets, puis l'écran ; à la marge des pages du
   cadre (24 px), pour que l'en-tête et l'écran s'alignent : la largeur de 1200 px de la maquette est celle du contenu
   d'une zone, que chaque mission de zone pose dans sa page */
.kd-espace { margin: 0; }
.kd-espace .volet-place, .kd-espace .volet-barre { display: none !important; }
.kd-espace .volet-contenu { background: var(--bg); }
.kd-entete { flex: none; background: var(--surface); border-bottom: 1px solid var(--border); }
.kd-entete-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 24px; min-height: 60px; }
.kd-marque { width: 34px; height: 34px; border-radius: 10px; background: var(--logo-bg); color: var(--logo-fg); display: inline-flex;
  align-items: center; justify-content: center; font: 800 18px/1 'Plus Jakarta Sans', 'Inter', sans-serif; flex: none; }
.kd-marque-nom { font: 800 17px/1 'Plus Jakarta Sans', 'Inter', sans-serif; color: var(--text); letter-spacing: -0.015em; }
.kd-brand { text-decoration: none; }
.kd-fil { display: flex; align-items: center; gap: 2px; min-width: 0; font-size: 14px; }
.kd-fil a.kd-crumb { text-decoration: none; }
.kd-fil-sep { color: var(--numeral); padding: 0 2px; }
.kd-fil-ici { color: var(--text); font-weight: 600; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-organisation { background: var(--surface-2); color: var(--text); max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.kd-avatar { overflow: hidden; }
.kd-avatar #admin-avatar { display: contents; }
.kd-avatar .admin-initiales { width: 36px; height: 36px; margin: 0; font-size: 13px; }
.kd-espace #admin-compte { left: auto; right: 24px; top: 62px; bottom: auto; }
.kd-tete-de-zone { flex: none; padding: 16px 24px 4px;
  align-items: center; gap: 16px; }
.kd-tete-de-zone .kd-zone-num { width: 52px; height: 52px; border-radius: 16px; font-size: 22px; }
.kd-tete-de-zone .kd-zone-titles { gap: 6px; }
.kd-tete-de-zone .kd-zone-titles h1 { font-size: 24px; }
.kd-tete-de-zone .kd-zone-p { font-size: 15px; }
.kd-zone-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
/* (#1254, audit #1244.5 n° 46) « Retour à l'accueil » au HAUT de l'en-tête de zone (centré, il descendait de 11 px chez le
   membre quand la phrase passait à la ligne) ; (zone A n° 5) le « i » de la page logé à côté de lui (`logerLaBulle`),
   sa bulle ouverte vers la gauche */
.kd-retour { text-decoration: none; align-self: flex-start; }
.kd-tete-de-zone > [data-bulle-logee] { align-self: flex-start; margin: 6px 0 0 auto; }
.kd-tete-de-zone > [data-bulle-logee] [data-bulle-titre] { color: var(--text); font-weight: 600; }
.kd-tete-de-zone > [data-bulle-logee] > .admin-info-texte { left: auto; right: 0; }
/* (#1244.6, audit n° 7) UN SEUL STYLE D'ONGLETS : ceux de la coquille prennent le dessin des onglets du cadre (⑭ de
   charte/application.css) : pas de bande pleine, le trait d'un bord à l'autre, le corps de 14 px */
.kd-espace .admin-onglets { background: none; }
.kd-espace .admin-onglet { border-bottom-color: transparent; font-size: 14px; }
.kd-espace .admin-onglet.actif { border-bottom-color: var(--theme-primaire); }
@media (max-width: 640px) {
  .kd-entete-ligne { padding: 8px 12px; gap: 8px; }
  .kd-marque-nom, .kd-organisation { display: none; }
  .kd-tete-de-zone { padding: 10px 12px 2px; }
  .kd-tete-de-zone .kd-zone-p, .kd-tete-de-zone .kd-retour { display: none; }
  .kd-espace #admin-compte { right: 12px; }
}

/* L'ACCUEIL EN TUILES (modules/mcp/accueil.html) : des blocs de l'espace dans la page du cadre */
.kd.kd-bloc { min-height: 0; background: transparent; }
.kd-hero .kd-hero-texte { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.kd-hero h1 { font-size: 28px; line-height: 1.2; }
.kd-hero [data-accueil-tete] { margin: 0; }
.kd-hero-p { color: var(--muted); max-width: 660px; }
.kd-hero-etapes .kd-chip[data-fait]::before { content: "\2713"; }
.kd-hero-etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kd-hero-cote { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.kd-hero-cote a { text-decoration: none; }
.kd-ring { background: conic-gradient(var(--accent) calc(var(--part, 0) * 1turn), var(--surface-2) 0); }
.kd-ring[data-part="1"] { --part: 0.3334; }
.kd-ring[data-part="2"] { --part: 0.6667; }
.kd-ring[data-part="3"] { --part: 1; }
.kd-familles { display: flex; flex-direction: column; gap: 32px; }
.kd-tile[data-a-faire] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* (#1247) UNE PASTILLE TIENT SUR UNE LIGNE : coupée en « … » si la tuile est trop étroite (son texte entier : le titre de la
   pastille et l'étiquette de la tuile, mandataire/espace-en-zones.js) */
.kd-tile .kd-chip { display: block; min-width: 0; max-width: 100%; height: auto; padding: 4px 10px; line-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-place-lecture:empty { display: none; }
/* (#1108.8) L'ENCADRÉ « PREMIÈRE LECTURE » (accueil.html, dans sa place) : une carte grise par source, sa barre verte */
[data-premiere-lecture] { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border); }
[data-lecture-tete] { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
[data-lecture-tete] > div { flex: 1 1 360px; min-width: 0; }
[data-lecture-tete] h2 { font-size: 20px; margin: 0; }
[data-lecture-tete] a { text-decoration: none; }
[data-lecture-icone] { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; flex: none; }
[data-lecture-phrase] { color: var(--muted); margin: 4px 0 0; max-width: 760px; }
[data-lecture-sources] { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
[data-lecture-source] { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); }
[data-lecture-nom] { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; color: var(--text); }
[data-lecture-detail] { font-size: 13px; color: var(--muted); }
[data-lecture-source] progress { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border: 0; border-radius: 6px; background: var(--border); overflow: hidden; }
[data-lecture-source] progress::-webkit-progress-bar { background: var(--border); border-radius: 6px; }
[data-lecture-source] progress::-webkit-progress-value { background: var(--accent); border-radius: 6px; }
[data-lecture-source] progress::-moz-progress-bar { background: var(--accent); border-radius: 6px; }
[data-accueil] > .kd-bloc { margin-bottom: 24px; }
/* (#1254, la disposition validée par Guillaume le 26/10) L'ACCUEIL SUR TROIS RANGÉES ET SA COLONNE « ENSUITE » : les tuiles
   à gauche, la colonne étroite (300 px) à droite, son haut sur la rangée Démarrer ; Démarrer sur 3 colonnes (la tuile 1
   sur une, l'astuce sur deux), Suivre sur 3 (tuiles 2 à 4), Enrichir sur 4 (tuiles 5 à 8). Sur un écran étroit, la
   colonne passe sous les tuiles, et les rangées reprennent la grille commune. (#1257) La colonne est retirée : voir dessous. */
.kd-accueil-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.kd-fam[data-famille="demarrer"] > .kd-grid, .kd-fam[data-famille="suivre"] > .kd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kd-fam[data-famille="enrichir"] > .kd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kd-fam[data-famille="demarrer"] .kd-tip { grid-column: span 2; }
/* (#1257, Guillaume 26/10) LA COLONNE DE DROITE EST RETIRÉE : « Ensuite, si vous voulez » est posée sur les deux colonnes à
   côté de la tuile 1, à la place de l'astuce ; ses étapes sur deux colonnes (à faire d'abord, puis faites), pour tenir
   dans la hauteur de la tuile 1 */
.kd-fam[data-famille="demarrer"] > .kd-grid > .kd-ensuite { grid-column: span 2; padding: 16px 20px; gap: 8px; }
[data-accueil] .kd-fam .kd-ensuite [data-bien-demarrer] { gap: 8px; }
[data-accueil] .kd-fam .kd-ensuite [data-bien-demarrer-etapes] { display: block; columns: 2; column-gap: 24px; }
[data-accueil] .kd-fam .kd-ensuite [data-bien-demarrer-etapes] > li { break-inside: avoid; padding: 6px 0; }
[data-accueil] .kd-fam .kd-ensuite [data-ensuite-replie] { flex-direction: row; flex-wrap: wrap; align-items: center; }
[data-accueil] .kd-fam .kd-ensuite [data-ensuite-replie] > h2 { flex: 1 0 100%; }
[data-accueil] .kd-ensuite { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 20px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
[data-accueil] .kd-ensuite[hidden][hidden], [data-accueil] .kd-ensuite [hidden][hidden] { display: none; }
[data-accueil] .kd-ensuite h2[data-ensuite-titre] { margin: 0; font-size: 16px; line-height: 1.3; }
[data-accueil] .kd-ensuite [data-bien-demarrer] { display: flex; flex-direction: column; gap: 12px; }
[data-accueil] .kd-ensuite [data-bien-demarrer-tete] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
[data-accueil] .kd-ensuite [data-bien-demarrer-compte] { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--text); }
[data-accueil] .kd-ensuite [data-bien-demarrer-compte] > [data-bien-demarrer-barre] { flex: 1 1 auto; width: auto; height: 6px; margin: 0; }
[data-accueil] .kd-ensuite [data-bien-demarrer-etapes] { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
[data-accueil] .kd-ensuite [data-bien-demarrer-etapes] > li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
[data-accueil] .kd-ensuite [data-bien-demarrer-etapes] > li > div { flex: 1 1 auto; min-width: 0; }
[data-accueil] .kd-ensuite [data-bien-demarrer-etapes] [data-etape-titre] { font-size: 14px; line-height: 1.35; }
[data-accueil] .kd-ensuite [data-bien-demarrer-etapes] > li .admin-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-accueil] .kd-ensuite [data-bien-demarrer-etapes] > li > .admin-bouton { flex: none; text-decoration: none; }
[data-accueil] .kd-ensuite [data-bien-demarrer-etapes] > li[data-fait] { color: var(--muted); }
[data-accueil] .kd-ensuite [data-bien-demarrer-etapes] > li[data-fait] [data-etape-titre] { text-decoration: none; color: var(--muted); }
[data-accueil] .kd-ensuite [data-ensuite-replie] { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
[data-accueil] .kd-ensuite [data-ensuite-replie] a { text-decoration: none; }
@media (max-width: 1180px) {
  .kd-fam[data-famille="enrichir"] > .kd-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
@media (max-width: 760px) {
  .kd-fam[data-famille] > .kd-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .kd-fam[data-famille="demarrer"] .kd-tip, .kd-fam[data-famille="demarrer"] > .kd-grid > .kd-ensuite { grid-column: auto; }
  [data-accueil] .kd-fam .kd-ensuite [data-bien-demarrer-etapes] { columns: 1; }
}

/* (#1147.2) LES TUILES 2, 3, 6 ET 7 : les composants kd- posés À CÔTÉ des classes de /admin (admin-carte, admin-bouton) et
   des prises du socle (data-barre-outils, data-segments). La page n'est pas une racine .kd : chaque bloc l'est (`kd kd-bloc`),
   ou son parent. Ces règles, à plusieurs classes, l'emportent sur le dessin du socle (charte/application.css, chargée après). */
.kd.kd-bloc.kd-card, .kd .admin-carte.kd-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; color: var(--text); }
.kd .kd-card > h2 { margin-bottom: 12px; font-size: 18px; }
.kd.kd-bloc.kd-toolbar[data-barre-outils] { padding: 10px; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.kd .kd-seg[data-segments] { padding: 3px; gap: 2px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border); }
.kd .kd-seg[data-segments] > [data-segment] { height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; }
.kd .kd-seg[data-segments] > [data-segment][aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.kd .admin-bouton.kd-btn { border-radius: var(--theme-rayon, 8px); font-weight: 600; }
.kd .admin-bouton.kd-btn-sm { border-radius: var(--theme-rayon, 8px); }
.kd .admin-carte.kd-kpi { padding: 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.kd .admin-carte.kd-kpi[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.kd .kd-kpi .kd-kpi-l { margin: 0; font-size: 14px; color: var(--muted); }
.kd .kd-kpi .kd-kpi-n[data-nombre] { margin: 0; font: 800 32px/1.1 'Plus Jakarta Sans', 'Inter', sans-serif; color: var(--text); }
/* (#1168.2) L'ONGLET « IA AUTORISÉES » DE LA TUILE 7 : les lignes `kd-row` du socle ; le logo `kd-logo` sur le fond de la
   surface (un logo officiel n'a pas de couleur de marque ici), sa lettre si l'image manque, grisé pour une IA refusée. */
[data-ia-autorisees] .kd-logo { background: var(--surface-2); color: var(--muted); box-shadow: none; overflow: hidden; }
[data-ia-autorisees] .kd-logo img { width: 30px; height: 30px; object-fit: contain; }
[data-ia-autorisees] .kd-row[data-refusee] .kd-logo { opacity: .5; }

/* PIXEL : le bouton caché, les éléments de la visite hors de toute visite */
.px-fab[hidden], .px-halo[hidden], .px-bulle[hidden], .px-bot[hidden] { display: none; }
.px-fab { z-index: 45; }
/* (#1108.11) L'ESPACE DU MEMBRE (/mon-index/, sans cadre) : Pixel vit dans un calque de l'écran, qui porte les variables (.kd) */
[data-calque-pixel] { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
/* (#1257) une étape du menu sous l'avatar (#admin-compte, z-index 60) : Pixel, sa bulle et son halo passent devant lui
   (dans la coquille de /admin, ils sont dans la page ; ailleurs, dans le calque) */
[data-calque-pixel][data-devant-le-menu] { z-index: 61; }
body[data-devant-le-menu] > .px-halo { z-index: 61; }
body[data-devant-le-menu] > .px-bulle { z-index: 62; }
body[data-devant-le-menu] > .px-bot { z-index: 63; }
[data-calque-pixel] > .px-fab, [data-calque-pixel] > .px-bulle { pointer-events: auto; }
/* (#1159.3) halo, bulle et Pixel sont placés à L'ÉCRAN (mandataire/pixel.js, placer) : juste sur une cible fixe (l'avatar de
   l'en-tête) comme sur une cible qui défile ; `px-suit` : ils suivent un défilement sans glisser ; la queue de la bulle
   posée sous Pixel (ou au-dessus) pointe vers lui */
.px-halo, .px-bulle, .px-bot { position: fixed; }
.px-halo.px-suit, .px-bulle.px-suit, .px-bot.px-suit { transition: none; }
.px-bulle.px-dessous .px-queue { top: -7px; right: 48px; left: auto; }
.px-bulle.px-dessus .px-queue { top: auto; bottom: -7px; right: 48px; left: auto; }

/* (#1225.2) LE PASSAGE D'UN ÉCRAN À L'AUTRE (mandataire/espace-en-zones.js) : le cadre reste ; l'écran s'estompe dès le clic
   (`data-passage`, posé quand la coquille change son adresse) et revient d'un seul fondu une fois le nouveau chargé.
   « Réduire les animations » : la règle de la palette coupe la transition (.kd *). */
.kd-espace iframe[data-cadre-ecran] { transition: opacity .18s ease; }
.kd-espace iframe[data-cadre-ecran][data-passage] { opacity: .55; transition-duration: .08s; }
/* (#1225.2) UN CLIC RÉPOND TOUT DE SUITE : le bouton, la tuile, l'onglet, le lien du fil s'enfoncent sous le doigt, même
   si l'écran ou ses données arrivent après */
.kd :is(.kd-btn, .kd-tile, .kd-choice, .kd-crumb, .kd-brand, .kd-avatar, .admin-onglet, .admin-bouton):active,
.px-fab:active { transform: translateY(1px) scale(.98); transition-duration: .05s; }