/* ============================================================
   Nawame, schémas interactifs (souris et tactile)
   Servi depuis /assets/schemas.css. Réutilise les tokens de
   nawame.css (var(--ink), var(--paper), var(--indigo), etc.).
   Ne modifie jamais nawame.css.
   Chaque schéma est monté par /assets/schemas.js dans un
   conteneur <div data-schema="...">. Un état par défaut lisible
   est rendu sans aucune interaction.
   ============================================================ */

/* Ossature commune ------------------------------------------- */
.schema{margin:0}
.schema-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-3);margin:0 0 14px}
.schema-stage{position:relative}
.schema-legend{margin:16px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted);
  max-width:56ch;text-wrap:pretty}

/* Focus clavier visible et cohérent partout */
.schema :focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:4px}

/* Petit glyphe cadenas (privé) et coche (mis en commun), en pur CSS/SVG */
.mini-ico{width:13px;height:13px;flex:none;vertical-align:-1px}

/* ============================================================
   1) data-schema="fil" : le fil qui garde le pourquoi
   ============================================================ */
.fil{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start}
.fil-thread{background:var(--ink-card);border-radius:8px;padding:14px;
  display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
.fil-msg{position:relative;display:block;width:100%;text-align:left;font:inherit;
  background:#1b1c14;color:var(--ink);border:1px solid #24261d;border-radius:7px;
  padding:10px 12px;font-size:14px;line-height:1.45;
  transition:opacity .35s ease,box-shadow .2s ease,border-color .2s ease}
button.fil-msg{cursor:pointer}
.fil-msg .who{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:#8f8d80;margin-bottom:4px}
.fil-msg.key{border-color:#2f4a41}
button.fil-msg.key:hover,button.fil-msg.key:focus-visible{border-color:var(--green);
  box-shadow:0 0 0 1px var(--green) inset}
.fil-flag{position:absolute;top:-10px;right:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;color:var(--ink);background:var(--green);border-radius:3px;
  padding:2px 7px;opacity:0;transform:translateY(3px);pointer-events:none;
  transition:opacity .2s ease,transform .2s ease}
button.fil-msg.key:hover .fil-flag,button.fil-msg.key:focus-visible .fil-flag{opacity:1;transform:none}
.fil-msg.captured{border-color:var(--green);box-shadow:-3px 0 0 0 var(--green) inset;background:#20241b}
/* dès qu'une idée est en mémoire, le reste du fil s'estompe */
.fil.has-memory .fil-msg:not(.captured){opacity:.42}

.fil-core{background:var(--paper-2);border:1px solid var(--line);border-radius:8px;
  padding:14px;min-height:100%}
.fil-core-head{display:flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.fil-core-head .knot{width:16px;height:16px;color:var(--green)}
.fil-core-sub{font-size:12.5px;color:var(--muted-3);margin:4px 0 12px}
.fil-core-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fil-core-list li{font-size:13.5px;line-height:1.4;color:var(--ink);padding:9px 11px;
  background:var(--paper-3);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:5px;animation:fil-pop .35s ease both}
.fil-core-empty{font-size:13px;color:var(--muted-3)}
@keyframes fil-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============================================================
   2) data-schema="partage" : l'étage partagé qui grandit
   ============================================================ */
.partage{display:flex;flex-direction:column;gap:14px}
.partage-shared{background:var(--paper-2);border:1px dashed var(--indigo-soft);
  border-radius:8px;padding:14px;transition:background .2s ease}
.partage-shared.grew{background:var(--paper-3)}
.sh-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--indigo)}
.sh-count{color:var(--muted-2)}
.partage-meter{height:5px;border-radius:3px;background:var(--line);margin:10px 0;overflow:hidden}
.partage-meter i{display:block;height:100%;width:20%;background:var(--indigo);
  transition:width .35s cubic-bezier(.2,.7,.2,1)}
.sh-list{display:flex;flex-wrap:wrap;gap:8px;min-height:34px}
.sh-empty{font-size:13px;color:var(--muted-3)}
.sh-chip{font-size:13px;color:var(--ink);background:var(--paper-3);border:1px solid var(--indigo-soft);
  border-radius:999px;padding:7px 12px;animation:fil-pop .35s ease both;display:inline-flex;gap:7px;align-items:center}
.sh-chip .from{font-family:var(--mono);font-size:10px;color:var(--muted-3)}

.partage-privates{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.col{background:var(--ink-card);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:9px}
.col-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.col-head b{font-size:14px;font-weight:500;color:var(--ink)}
.col-lock{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.col-lock .mini-ico{color:var(--green)}
.chip{display:flex;width:100%;text-align:left;font:inherit;align-items:center;gap:8px;
  background:#1b1c14;color:var(--ink);border:1px solid #24261d;border-radius:6px;
  padding:9px 11px;font-size:13px;line-height:1.35;transition:border-color .18s ease,transform .1s ease,opacity .2s ease}
button.chip{cursor:pointer}
button.chip:hover,button.chip:focus-visible{border-color:var(--indigo-soft)}
.chip .grip{margin-left:auto;font-family:var(--mono);font-size:10px;color:#8f8d80;flex:none}
.chip.locked{color:#9a988c}
.chip.locked .mini-ico{color:var(--green);flex:none}
.chip.shared{border-color:var(--green);color:#cfd8d3}
.chip.shared .grip{color:var(--green)}
.partage-ghost{position:fixed;z-index:80;pointer-events:none;background:var(--indigo);
  color:#F5F2EA;border-radius:6px;padding:8px 11px;font-size:13px;
  box-shadow:0 16px 34px -18px rgba(20,21,15,.7);max-width:220px}
.partage-shared.drop-hot{background:#e7e9f1;border-color:var(--indigo)}

/* ============================================================
   3) data-schema="angles" : plusieurs IA, plusieurs angles
   ============================================================ */
.angles{display:grid;grid-template-columns:.92fr 1.08fr;gap:16px;align-items:start}
.angles-core{background:var(--ink-card);color:var(--ink);border-radius:8px;padding:16px}
.angles-core .kick{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);margin:0 0 10px}
.angles-core ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.angles-core li{font-size:13.5px;color:var(--ink);padding-left:14px;position:relative}
.angles-core li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--green)}
.angles-panel{margin-top:12px;background:var(--paper-2);border:1px solid var(--line);
  border-left:3px solid var(--indigo);border-radius:6px;padding:13px 14px}
.angles-panel .from{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--indigo);margin:0 0 6px}
.angles-panel .txt{font-size:14px;line-height:1.5;color:var(--ink);margin:0}
.angles-ais{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
.angles-ai{display:flex;align-items:center;gap:11px;text-align:left;font:inherit;
  background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:12px;
  cursor:pointer;color:var(--ink);transition:border-color .15s ease,transform .12s ease,box-shadow .15s ease}
.angles-ai{min-width:0;overflow:hidden}
.angles-ai>span:last-child{min-width:0}
.angles-ai b,.angles-ai .role{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.angles-ai:hover{border-color:var(--ink);transform:translateY(-1px)}
.angles-ai[aria-pressed="true"]{border-color:var(--indigo);box-shadow:0 0 0 1px var(--indigo) inset}
.angles-mark{flex:none;display:inline-flex}
.angles-mark svg{width:24px;height:24px;color:var(--ink);display:block}
.angles-ai[aria-pressed="true"] .angles-mark svg{color:var(--indigo)}
.angles-ai b{display:block;font-size:14.5px;font-weight:500}
.angles-ai .role{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted-3)}

/* ============================================================
   4) data-schema="outils" : la boîte à outils (avant / après)
   ============================================================ */
.outils{display:grid;grid-template-columns:.82fr 1.18fr;gap:16px;align-items:start}
.outils-chips{display:flex;flex-direction:column;gap:10px}
.outils-chip{display:flex;align-items:center;gap:10px;text-align:left;font:inherit;cursor:pointer;
  background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  color:var(--ink);transition:border-color .15s ease,transform .12s ease,box-shadow .15s ease}
.outils-chip:hover{border-color:var(--ink);transform:translateY(-1px)}
.outils-chip[aria-pressed="true"]{border-color:var(--indigo);box-shadow:0 0 0 1px var(--indigo) inset}
.outils-chip .dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted-3);flex:none}
.outils-chip[aria-pressed="true"] .dot{border-color:var(--indigo);background:var(--indigo)}
.outils-chip b{font-size:14.5px;font-weight:500;display:block}
.outils-chip .role{font-family:var(--mono);font-size:10.5px;color:var(--muted-3)}
.outils-preview{background:var(--ink-card);color:var(--ink);border-radius:8px;padding:16px}
.outils-preview .q{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:#8f8d80;margin:0 0 5px}
.outils-preview .qtxt{font-size:14px;color:var(--ink);margin:0 0 14px}
.outils-preview .before{font-size:12.5px;color:#8f8d80;margin:0 0 4px}
.outils-preview .before s{text-decoration-color:var(--vermillon)}
.outils-preview .after{border-left:3px solid var(--green);padding-left:11px;margin:8px 0 0;
  font-size:14.5px;line-height:1.5;color:var(--ink)}
.outils-preview .after .lbl{display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--green);margin-bottom:4px}

/* ============================================================
   Réactivité (téléphone ~400px : tout passe en une colonne)
   ============================================================ */
@media(max-width:720px){
  .fil,.angles,.outils{grid-template-columns:1fr}
  .partage-privates{grid-template-columns:1fr}
  .angles-ais{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  .angles-ais{grid-template-columns:1fr}
}

/* ============================================================
   Respect de prefers-reduced-motion : rien ne bouge en continu,
   et on coupe les transitions déclenchées.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .fil-msg,.partage-meter i,.angles-ai,.outils-chip,.fil-core-list li,.sh-chip,
  .partage-shared,.chip{transition:none;animation:none}
  .angles-ai:hover,.outils-chip:hover{transform:none}
}

/* ============================================================
   Intégration dans les pages (placement des schémas)
   ============================================================ */
.schema-hero{margin-top:30px}
.schema-wide{margin-top:26px}
.hero-ex{margin:14px 0 22px;max-width:56ch;color:var(--muted);font-size:15.5px;line-height:1.55}
/* Le cœur mémoire du fil, dans le héros, ne s'étire pas trop en hauteur */
.schema-hero .fil-core{min-height:0}
@media(min-width:900px){
  /* héros : le fil respire sur toute la largeur, colonnes internes gardées */
  .schema-wide{max-width:none}
}

/* ============================================================
   5) data-schema="relais" : la meme memoire, deux IA (preuve)
   ============================================================ */
.relais{display:flex;flex-direction:column;gap:14px}
.relais-switch{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted-2);margin:0}
.relais-toggle{display:inline-flex;gap:4px;background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:4px;align-self:flex-start}
.relais-opt{font:inherit;font-size:13px;cursor:pointer;border:0;background:transparent;color:var(--muted);padding:7px 15px;border-radius:999px;transition:background .15s ease,color .15s ease}
.relais-opt[aria-pressed="true"]{background:var(--ink);color:var(--paper-2)}
.relais-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:16px;align-items:start}
.relais-mem{background:var(--ink-card);color:var(--ink);border-radius:8px;padding:14px;transition:opacity .25s ease}
.relais-mem.dim{opacity:.38}
.relais-mem .kick{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin:0 0 10px}
.relais-mem ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.relais-mem li{font-size:13.5px;padding-left:14px;position:relative}
.relais-mem li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--green)}
.relais-panel{background:var(--paper-2);border:1px solid var(--line);border-radius:8px;padding:14px;border-left:3px solid var(--vermillon)}
.relais.on .relais-panel{border-left-color:var(--green)}
.relais-panel .from{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted-2);margin:0 0 6px}
.relais-panel .txt{font-size:14.5px;line-height:1.5;color:var(--ink);margin:0}
@media(max-width:720px){ .relais-grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){ .relais-mem,.relais-opt{transition:none} }