/* Pierre AI — l'atelier, la page de connexion, le tiroir.
   La palette et les fontes vivent dans theme.css, chargé AVANT ce fichier.
   Ici : les formes. Sombre mat, éditorial, la mémoire toujours à vue. */

:root {
  /* Mesures de CETTE mise en page. Elles n'ont rien à faire dans le thème :
     un rail n'est pas une couleur, et la console d'administration a les
     siennes. */
  --rail-left-w: 300px;
  --rail-right-w: 336px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font: 400 15.5px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--leaf); text-decoration: none; }
a:hover { color: var(--leaf-strong); text-decoration: underline; text-underline-offset: 2px; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 2px;
  border-radius: var(--edge);
}

/* ---------------------------------------------------------------- marque */

.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand svg { display: block; flex: none; }
.brand-name {
  font: 600 1.35rem/1 var(--serif);
  letter-spacing: -.015em;
}
.brand-suite {
  font: 500 .62rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-pale);
  padding-top: .3rem;
}

/* ------------------------------------------------------- page connexion */

.gate {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
}

.gate-story {
  padding: clamp(2rem, 5vw, 4.5rem);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 3rem;
}

.gate-title {
  font: 400 clamp(2.1rem, 4.4vw, 3.4rem)/1.12 var(--serif);
  letter-spacing: -.02em;
  text-wrap: balance;
  max-width: 15ch;
}
.gate-title em { font-style: italic; color: var(--leaf); }

.gate-lead {
  margin-top: 1.4rem;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 1.02rem;
}

/* La démonstration : trois lignes d'index, comme Pierre les voit vraiment. */
.demo-index {
  margin-top: 2.6rem;
  border: 1px solid var(--rule);
  border-radius: var(--edge);
  background: var(--card);
  overflow: hidden;
  max-width: 34rem;
}
.demo-head {
  padding: .5rem .85rem;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-pale);
}
.demo-row {
  display: flex; gap: .7rem; align-items: baseline;
  padding: .55rem .85rem;
  border-bottom: 1px solid var(--rule);
  font-size: .88rem;
}
.demo-row:last-child { border-bottom: 0; }
.demo-num { font: 500 .78rem/1 var(--mono); color: var(--leaf); flex: none; }
.demo-title { font-weight: 500; flex: none; }
.demo-hook { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gate-foot { font-size: .82rem; color: var(--ink-pale); }

/* Les deux pages légales, sous le formulaire : discrètes, jamais absentes.
   ⚠ En absolu, DÉLIBÉRÉMENT. `.gate-form` est un flex centré ; y ajouter un
   frère normal pousserait le formulaire hors de son centre. Ici la ligne se
   pose au bas du panneau sans rien déplacer. */
.gate-legal {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 clamp(2rem, 5vw, 4.5rem) 1.2rem;
  display: flex; gap: .5rem; align-items: center; justify-content: center;
  font-size: .78rem; color: var(--ink-pale);
}
.gate-legal a { color: var(--ink-pale); }
.gate-legal a:hover { color: var(--leaf); }

.gate-form {
  position: relative;               /* l'ancre de .gate-legal, tout en bas */
  padding: clamp(2rem, 5vw, 4.5rem);
  padding-bottom: calc(clamp(2rem, 5vw, 4.5rem) + 1.6rem);
  background: var(--card);          /* le côté « agir » se distingue du récit */
  display: flex; align-items: center; justify-content: center;
}
.form { width: 100%; max-width: 25rem; }
.form-title {
  font: 400 1.5rem/1.2 var(--serif); letter-spacing: -.015em; margin-bottom: .35rem;
}
.form-lead { color: var(--ink-soft); font-size: .9rem; margin-bottom: 1.9rem; }

.tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.9rem; }
.tab {
  background: none; border: 0; cursor: pointer;
  padding: 0 0 .7rem; margin-bottom: -1px;
  font: 500 .95rem/1 var(--sans); color: var(--ink-pale);
  border-bottom: 2px solid transparent;
}
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--leaf); }
.tab:hover { color: var(--ink); }

.field-row { margin-bottom: 1.05rem; }
.field-row label {
  display: block; margin-bottom: .34rem;
  font: 500 .78rem/1 var(--sans); color: var(--ink-soft);
}
.field-row input, .field-row select {
  width: 100%; padding: .62rem .75rem;
  border: 1px solid var(--rule-strong); border-radius: var(--edge);
  background: var(--card-2); color: var(--ink); font: inherit;
}
.field-row select { cursor: pointer; }
.field-row input:focus, .field-row select:focus { border-color: var(--leaf); outline-offset: 1px; }
.field-row .hint { margin-top: .3rem; font-size: .76rem; color: var(--ink-pale); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .68rem 1rem;
  border: 1px solid var(--ink); border-radius: var(--edge);
  background: var(--ink); color: var(--paper); cursor: pointer;
  font: 600 .95rem/1 var(--sans);
  transition: background .15s, border-color .15s;
}
.button:hover:not(:disabled) { background: var(--ink-soft); border-color: var(--ink-soft); }
.button:disabled { opacity: .5; cursor: default; }

.alert {
  margin-bottom: 1.1rem; padding: .6rem .8rem;
  border: 1px solid var(--clay); border-left-width: 3px;
  border-radius: var(--edge);
  background: var(--clay-wash); color: var(--clay);
  font-size: .87rem;
}

/* -------------------------------------------------------------- l'atelier */

/* ⚠ MESURÉ 2026-08-20 : la conversation ne défilait PAS et le champ de saisie
   finissait hors écran — mesuré à 2820 px de haut dans une rangée de 900.
   Cause : un élément de grille vaut `min-height: auto`, donc il ne rétrécit
   JAMAIS sous son contenu. `.thread` grandissait avec la conversation, sa zone
   de défilement n'était donc jamais contrainte, `overflow-y: auto` n'avait
   rien à faire défiler, et le `overflow: hidden` ci-dessous coupait le reste
   en silence. Sur mobile, où la fenêtre est courte, c'était le cas normal.

   La règle : DÈS QU'UN ENFANT DOIT DÉFILER, chaque parent entre lui et la
   hauteur fixée porte `min-height: 0`. */
.workspace {
  display: grid;
  grid-template-columns: var(--rail-left-w) minmax(0, 1fr) var(--rail-right-w);
  /* dvh suit la barre d'adresse mobile qui se rétracte ; vh reste pour les
     navigateurs qui l'ignorent, et vaut mieux que rien. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.workspace > * { min-height: 0; }

.rail {
  display: flex; flex-direction: column;
  min-height: 0;
  background: var(--well);
  overflow: hidden;
}
.rail-left { border-right: 1px solid var(--rule); }
.rail-right { border-left: 1px solid var(--rule); }
/* Sur un rail creux, un panneau posé dessus remonte de DEUX paliers pour se
   détacher franchement — un seul ne se verrait pas. */
.rail .mini { background: var(--card); }
.rail .mini:hover { background: var(--leaf-wash); }

.rail-head {
  padding: 1rem 1.05rem;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  flex: none;
}
.rail-label {
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-pale);
}
.rail-body { flex: 1; min-height: 0; overflow-y: auto; padding: .55rem;
             overscroll-behavior: contain; }
.rail-foot {
  flex: none; border-top: 1px solid var(--rule); padding: .8rem 1.05rem;
  display: flex; flex-direction: column; gap: .6rem;
}

.mini {
  background: none; border: 1px solid var(--rule); border-radius: var(--edge);
  color: var(--ink-soft); cursor: pointer;
  padding: .28rem .6rem; font: 500 .78rem/1.3 var(--sans);
  transition: border-color .15s, color .15s, background .15s;
}
.mini:hover { border-color: var(--leaf); color: var(--leaf); background: var(--leaf-wash); }
/* Les outils se partagent la largeur : cinq cibles egales, aucune ne mange
   le nom puisque le nom n est plus sur leur rangee. */
.who-tools { display: flex; gap: .3rem; }
.who-tools .mini { flex: 1; min-width: 0; padding: .34rem 0;
                   justify-content: center; font-size: .8rem; }
.who-id { min-width: 0; flex: 1; }

/* ─── L'allocation du mois ──────────────────────────────────────────────────
   Une barre fine et un chiffre. Discret quand tout va bien, visible quand la
   fin approche — c'est le seul moment où ça mérite l'attention. */
.purse { display: flex; flex-direction: column; gap: .3rem; }
.purse-bar {
  height: 3px; border-radius: 999px; background: var(--rule); overflow: hidden;
}
.purse-bar span {
  display: block; height: 100%; width: 0;
  background: var(--leaf); transition: width .3s ease-out;
}
.purse-bar .purse-low { background: var(--amber); }
.purse-bar .purse-out { background: var(--clay); }
.purse-line { font: 400 .7rem/1.4 var(--mono); color: var(--ink-pale); }

/* Le rythme d'une persona, à côté de son nom dans l'en-tête du fil. */
.pace { color: var(--ink-pale); }

/* conversations */
.conv {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: var(--edge);
  padding: .5rem .6rem; color: var(--ink-soft);
  font: 400 .89rem/1.35 var(--sans);
  position: relative;
}
.conv:hover { background: var(--leaf-wash); color: var(--ink); }
.conv[aria-current="true"] { background: var(--card); color: var(--ink); box-shadow: inset 2px 0 0 var(--leaf); font-weight: 500; }
.conv-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 1.2rem; }
.conv-date { font: 400 .7rem/1 var(--mono); color: var(--ink-pale); }
.conv-x {
  position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; color: var(--ink-pale);
  padding: .2rem .3rem; border-radius: 4px; opacity: 0; font-size: .95rem; line-height: 1;
}
.conv:hover .conv-x { opacity: 1; }
.conv-x:hover { color: var(--clay); background: var(--clay-wash); }

/* identité en pied de rail */
.who { display: flex; align-items: center; gap: .6rem; }
.who-dot {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--leaf-wash); color: var(--leaf-strong);
  display: grid; place-items: center;
  font: 600 .78rem/1 var(--sans);
}
.who-name { font-size: .85rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-org { font: 400 .72rem/1.2 var(--mono); color: var(--ink-pale); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------------ le fil */

.thread { display: flex; flex-direction: column; min-width: 0; min-height: 0;
          background: var(--paper); }

.thread-head {
  flex: none; padding: .85rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: .8rem;
}
/* ⚠ `flex: 1` : sans lui, rien ne pousse le bouton de droite au bord.
   Sur grand écran c’est `.thread-state` qui le faisait, avec son
   `margin-left: auto` — mais il disparaît sur mobile, et le bouton de la
   mémoire venait se coller contre le titre au milieu de la barre. */
.thread-title { flex: 1; min-width: 0;
  font: 500 .95rem/1.3 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-state { margin-left: auto; font: 400 .72rem/1 var(--mono); color: var(--ink-pale); white-space: nowrap; }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); margin-right: .4rem; }

.thread-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 2rem 1.5rem 1rem;
  display: flex; flex-direction: column;
  /* le rebond du fil ne doit pas entraîner la page derrière lui */
  overscroll-behavior: contain;
}
.track { max-width: 46rem; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; gap: 1.9rem; }

/* accueil d'une conversation vide : au centre optique, pas collé en haut */
.blank {
  max-width: 46rem; width: 100%; margin: auto;
  padding-bottom: 6vh; text-align: left;
}
.blank h1 {
  font: 400 clamp(1.8rem, 3.2vw, 2.5rem)/1.15 var(--serif);
  letter-spacing: -.02em; margin-bottom: .7rem;
}
.blank h1 em { font-style: italic; color: var(--leaf); }
.blank p { color: var(--ink-soft); max-width: 44ch; }
.prompts { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.8rem; }
.prompt {
  border: 1px solid var(--rule); border-radius: var(--edge);
  background: var(--card); cursor: pointer;
  padding: .5rem .8rem; font: 400 .87rem/1.3 var(--sans); color: var(--ink-soft);
  text-align: left; transition: border-color .15s, color .15s;
}
.prompt:hover { border-color: var(--leaf); color: var(--ink); }

/* messages */
.turn { display: flex; flex-direction: column; gap: .5rem; }
.turn-you { align-items: flex-end; }

.bubble-you {
  max-width: 82%;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--edge) var(--edge) 2px var(--edge);
  padding: .7rem .95rem;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.said { border-left: 2px solid var(--leaf); padding-left: 1.05rem; }
.said .prose { overflow-wrap: anywhere; }
.who-label {
  font: 500 .66rem/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-pale); margin-bottom: .5rem;
}

/* Les gestes : ce que Pierre FAIT à sa mémoire.
   Replié par défaut — une marque par famille et un compte, en gris. Ce que
   l'assistant a fait doit rester DISPONIBLE, pas criard : le détail est à un
   clic et n'est jamais perdu. */
.moves { margin-bottom: .6rem; }
.moves-full { display: none; flex-wrap: wrap; gap: .35rem; align-items: center; }
.moves.open .moves-full { display: flex; }
.moves.open .moves-peek { display: none; }

.moves-peek {
  display: inline-flex; align-items: center; gap: .6rem;
  border: 0; background: none; cursor: pointer; padding: .1rem 0;
  font: 400 .74rem/1.4 var(--sans); color: var(--ink-pale);
  transition: color .15s;
}
.moves-peek:hover { color: var(--ink-soft); }
/* Une icône PAR usage : trois outils et une lecture se voient, « ⌗3 ▤1 » se
   déchiffre. Les familles se suivent, séparées par le seul écart du groupe. */
.peek { display: inline-flex; align-items: center; gap: .16rem; }
.peek-tool { color: var(--leaf); }
.peek-write { color: var(--leaf-strong); }
.peek-read { color: var(--amber); }
.peek-ask, .peek-refused { color: var(--clay); }
.peek-more { font: 500 .68rem/1 var(--mono); color: var(--ink-pale); }
.moves-caret { font-size: .95rem; opacity: .45; }

/* Une seule forme par famille, en currentColor : la couleur vient du parent,
   jamais d'une seconde règle à tenir en accord. */
.ic {
  width: 13px; height: 13px; flex: none; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .85;
}
.ic-solid { fill: currentColor; stroke: none; }
.ic .dot { fill: currentColor; stroke: none; }
.move .ic { opacity: 1; }

.move {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; cursor: pointer;
  padding: .16rem .55rem .16rem .42rem;
  font: 400 .74rem/1.5 var(--sans); color: var(--ink-pale);
  transition: border-color .15s, background .15s, color .15s;
}
.move:hover { border-color: var(--rule-strong); background: var(--card);
              color: var(--ink-soft); }
.move b { font: 500 .7rem/1 var(--mono); color: var(--ink-soft); }
/* La couleur ne vit que sur la marque de tête : elle identifie, elle ne crie
   pas. */
.move > span:first-child { opacity: .8; display: inline-flex; align-items: center; }
.move-open > span:first-child, .move-write > span:first-child { color: var(--leaf); }
.move-read > span:first-child, .move-revise > span:first-child { color: var(--amber); }
.move-ask > span:first-child { color: var(--clay); }

/* Replier : sans bordure, en bout de rangée. */
.move-fold { border: 0; padding: .16rem .3rem; color: var(--ink-pale);
             font-size: .95rem; }
.move-fold:hover { background: none; color: var(--ink-soft); }

.prose p { margin-bottom: .75rem; }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 .75rem 1.15rem; }
.prose li { margin-bottom: .2rem; }
.prose code {
  font: 400 .87em/1.4 var(--mono);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 4px; padding: .05em .35em;
}
.prose pre {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--edge);
  padding: .8rem 1rem; overflow-x: auto; margin-bottom: .75rem;
}
.prose pre code { border: 0; background: none; padding: 0; font-size: .84rem; }
.prose strong { font-weight: 600; }
.prose h1, .prose h2, .prose h3 {
  font: 500 1.05rem/1.3 var(--serif); margin: 1rem 0 .45rem; letter-spacing: -.01em;
}

.cursor { display: inline-block; width: .5rem; height: 1.05em; vertical-align: -.18em;
  background: var(--leaf); animation: blink 1.05s steps(2) infinite; }
@keyframes blink { 0%,49% { opacity: 1 } 50%,100% { opacity: 0 } }

.failure {
  border: 1px solid var(--clay); border-left-width: 3px; border-radius: var(--edge);
  background: var(--clay-wash); color: var(--clay);
  padding: .6rem .85rem; font-size: .88rem;
}

/* barre d'écriture */
/* La marge du bas suit l'encoche : sur iPhone, 1.4rem passe SOUS la barre
   d'accueil et le bouton d'envoi devient intouchable. */
.composer { flex: none;
  padding: .9rem 1.5rem max(1.4rem, env(safe-area-inset-bottom)); }
.composer-box {
  max-width: 46rem; margin: 0 auto;
  display: flex; align-items: flex-end; gap: .6rem;
  border: 1px solid var(--rule-strong); border-radius: 10px;
  background: var(--card); padding: .5rem .5rem .5rem .9rem;
  transition: border-color .15s;
}
.composer-box:focus-within { border-color: var(--leaf); }
.composer textarea {
  flex: 1; border: 0; outline: 0; resize: none; background: none;
  color: var(--ink); font: inherit; max-height: 11rem; padding: .35rem 0;
}
.composer textarea::placeholder { color: var(--ink-pale); }
.send {
  flex: none; width: 34px; height: 34px; border-radius: var(--edge);
  border: 0; background: var(--ink); color: var(--paper); cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s;
}
.send:hover:not(:disabled) { background: var(--ink-soft); }
.send:disabled { background: var(--card-2); color: var(--ink-pale); cursor: default; }
.composer-hint {
  max-width: 46rem; margin: .5rem auto 0;
  font: 400 .72rem/1.4 var(--mono); color: var(--ink-pale); text-align: center;
}

/* -------------------------------------------- la mémoire, à vue (signature) */

.note-row {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--edge);
  background: none; padding: .5rem .6rem; margin-bottom: .12rem;
  transition: background .15s, border-color .15s;
}
.note-row:hover { background: var(--card); border-color: var(--rule); }

.note-top { display: flex; align-items: baseline; gap: .45rem; }
.note-num { font: 500 .72rem/1.4 var(--mono); color: var(--leaf); flex: none; }
.note-title {
  font: 500 .87rem/1.4 var(--sans); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lock { font-size: .68rem; color: var(--ink-pale); flex: none; }
.note-hook {
  font-size: .79rem; color: var(--ink-soft); margin-top: .1rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Le dossier : une ligne de séparation, pas un titre. Il range l'œil, il ne
   réclame pas son attention — c'est la fiche qu'on vient lire. */
.note-folder {
  font: 500 .68rem/1.4 var(--mono); color: var(--ink-pale);
  letter-spacing: .06em; text-transform: lowercase;
  padding: .75rem .6rem .28rem; border-bottom: 1px solid var(--rule);
  margin-bottom: .3rem;
}
.note-folder:first-child { padding-top: .35rem; }

/* ⭐ ICI L'ACCENT PORTE DU SENS, et c'est la seule raison de l'employer :
   une fiche périmée est FAUSSE aujourd'hui, et rien d'autre sur la ligne ne
   le dit. Le reste — une échéance qui approche, une entrée en vigueur — se
   contente du texte doux : c'est une information, pas une alarme. */
.note-life { font: 400 .72rem/1.4 var(--mono); margin-top: .18rem; }
.note-life.expired { color: var(--clay); }
.note-life.soon,
.note-life.later { color: var(--ink-pale); }

/* les trois réactions : lues, écrites, corrigées */
.note-row.read { animation: pulse-leaf 1.6s ease-out; }
.note-row.fresh { animation: pulse-leaf 2.2s ease-out; }
.note-row.changed { animation: pulse-amber 2.2s ease-out; }
@keyframes pulse-leaf {
  0% { background: var(--leaf-wash); border-color: var(--leaf); }
  100% { background: transparent; border-color: transparent; }
}
@keyframes pulse-amber {
  0% { background: var(--amber-wash); border-color: var(--amber); }
  100% { background: transparent; border-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .note-row.read, .note-row.fresh, .note-row.changed { animation: none; }
  .cursor { animation: none; opacity: .6; }
}

.rail-empty { padding: 1.4rem 1.05rem; color: var(--ink-pale); font-size: .84rem; }
.rail-empty b { display: block; color: var(--ink-soft); font-weight: 500; margin-bottom: .3rem; }

/* ----------------------------------------------------------------- tiroir */

.veil {
  position: fixed; inset: 0; background: var(--veil);
  display: none; z-index: 40;
}
.veil.open { display: block; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(38rem, 94vw);
  background: var(--paper); border-left: 1px solid var(--rule);
  z-index: 50; display: none; flex-direction: column;
  box-shadow: -18px 0 44px var(--shadow);
}
.drawer.open { display: flex; animation: slide .18s ease-out; }
@keyframes slide { from { transform: translateX(16px); opacity: .4 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .drawer.open { animation: none } }

.drawer-head {
  flex: none; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--rule);
  display: flex; align-items: flex-start; gap: 1rem;
}
.drawer-head h2 { font: 500 1.2rem/1.3 var(--serif); letter-spacing: -.01em; }
.drawer-meta { font: 400 .73rem/1.5 var(--mono); color: var(--ink-pale); margin-top: .25rem; }
.drawer-x {
  margin-left: auto; flex: none; border: 0; background: none; cursor: pointer;
  color: var(--ink-pale); font-size: 1.35rem; line-height: 1; padding: .1rem .3rem; border-radius: 4px;
}
.drawer-x:hover { color: var(--ink); background: var(--rule); }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.4rem;
               overscroll-behavior: contain; }
.drawer-foot { flex: none; border-top: 1px solid var(--rule); padding: .9rem 1.4rem; display: flex; gap: .55rem; }

.label {
  font: 500 .66rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-pale); display: block; margin-bottom: .45rem;
}
.field {
  width: 100%; border: 1px solid var(--rule-strong); border-radius: var(--edge);
  background: var(--card-2); color: var(--ink); font: inherit;
  padding: .65rem .8rem; resize: vertical;
}
.field:focus { border-color: var(--leaf); outline-offset: 1px; }
.block { margin-bottom: 1.3rem; }

.hist { border-top: 1px solid var(--rule); padding-top: .7rem; margin-top: .7rem; }
.hist:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.hist-head { display: flex; gap: .5rem; align-items: baseline; font: 400 .74rem/1.5 var(--mono); color: var(--ink-pale); }
.hist-what { font-weight: 500; }
.hist-created .hist-what { color: var(--leaf); }
.hist-revised .hist-what { color: var(--amber); }
.hist-archived .hist-what { color: var(--clay); }
.hist-before {
  margin-top: .35rem; padding: .5rem .7rem;
  background: var(--card); border: 1px solid var(--rule);
  border-left: 2px solid var(--rule-strong); border-radius: 0 var(--edge) var(--edge) 0;
  font-size: .82rem; color: var(--ink-soft); white-space: pre-wrap;
}

/* ⭐ L'action que l'on vient faire, en petit : craie pleine, comme les
   boutons pleine largeur. Sans elle, « Enregistrer » et « Retirer de la
   mémoire » avaient exactement le même poids — et sur fond sombre l'argile
   vive criait PLUS FORT que l'enregistrement. Le geste destructeur ne doit
   jamais être le plus visible de la rangée. */
.mini.go {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
  font-weight: 600;
}
.mini.go:hover { background: var(--ink-soft); border-color: var(--ink-soft);
                 color: var(--paper); }

/* L'argile nomme le danger sans le hurler : le texte reste argile — c'est lui
   qui avertit — mais la bordure s'efface pour ne pas rivaliser avec l'action
   principale. */
.danger { border-color: color-mix(in oklab, var(--clay) 38%, transparent);
          color: var(--clay); }
.danger:hover { background: var(--clay-wash); border-color: var(--clay); color: var(--clay); }

/* --------------------------------------------------------------- étroit */

.toggle { display: none; }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: var(--rail-left-w) minmax(0, 1fr); }
  .rail-right {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(var(--rail-right-w), 88vw); z-index: 45; display: none;
    /* L'encoche mange le flanc en paysage ; le rail se pousse d'autant. */
    padding-right: env(safe-area-inset-right);
  }
  .rail-right.open { display: flex; box-shadow: -18px 0 44px var(--shadow); }
  .toggle { display: inline-flex; }
}

@media (max-width: 820px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .rail-left {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(var(--rail-left-w), 88vw); z-index: 45; display: none;
    background: var(--paper);
    padding-left: env(safe-area-inset-left);
  }
  .rail-left.open { display: flex; box-shadow: 18px 0 44px var(--shadow); }

  /* ⭐ LE VOILE DES RAILS, SANS UNE LIGNE DE JAVASCRIPT.
     Un panneau qui flotte au-dessus du fil, sans rien pour l'en détacher,
     donne l'impression d'un bogue d'affichage — surtout sur fond sombre, où
     deux surfaces voisines se ressemblent.
     ⚠ `pointer-events: none` est OBLIGATOIRE : le clic doit continuer
     d'atteindre `.thread`, dont l'écouteur referme les rails. Un voile qui
     avale le clic emprisonnerait la personne dans le rail ouvert. */
  .workspace:has(.rail.open)::before {
    content: ""; position: fixed; inset: 0; z-index: 44;
    background: var(--veil); pointer-events: none;
  }

  .gate { grid-template-columns: minmax(0, 1fr); }
  .gate-story { border-right: 0; border-bottom: 1px solid var(--rule); }
  /* Le formulaire est ce qu'on vient faire : il passe devant le récit. */
  .gate-story { order: 2; }
  .gate-form { order: 1; }
  .thread-body { padding: 1.4rem 1rem 1rem; }
  .composer { padding: .7rem 1rem max(1rem, env(safe-area-inset-bottom)); }
  /* Une bulle de 82 % laisse une gouttière inutile sur un écran de 360 px. */
  .bubble-you { max-width: 90%; }

  /* « Entrée pour envoyer » ne veut rien dire sur un clavier tactile, et ça
     coûtait deux lignes de hauteur au-dessus du champ. */
  .composer-hint { display: none; }
  /* Le nom du modèle écrasait le titre de la conversation. Sur un écran
     étroit, le titre gagne : on sait sur quoi on tourne dans la console. */
  .thread-state { display: none; }
  .thread-head { padding: .6rem .8rem; gap: .5rem; }

  /* Un tiroir de 94 vw laisse un liseré de 6 % qui ne sert à rien quand
     l'écran fait 360 px. À cette taille il prend tout. */
  .drawer { width: 100%; border-left: 0; }
  .drawer-head { padding: .9rem 1rem; }
  .drawer-body { padding: 1rem; }
  .drawer-foot { padding: .8rem 1rem max(.8rem, env(safe-area-inset-bottom)); }
  .rail-foot { padding-bottom: max(.8rem, env(safe-area-inset-bottom)); }
}

/* ─── Le doigt ─────────────────────────────────────────────────────────────
   Ces règles suivent le POINTEUR, pas la largeur. Une tablette large se pilote
   au doigt ; une petite fenêtre sur un portable se pilote à la souris. Régler
   la taille des cibles sur `max-width` se trompe dans les deux sens. */

@media (hover: none) and (pointer: coarse) {
  /* 44 px : ce n'est pas une préférence, c'est la largeur d'un bout de doigt.
     Les boutons d'icône en faisaient 28. */
  .mini, .toggle, .drawer-x, .conv-x, .move-fold, .tab {
    min-width: var(--touch); min-height: var(--touch);
    display: inline-flex; align-items: center; justify-content: center;
  }
  /* L'onglet garde sa hauteur de cible mais pas sa largeur minimale, sinon la
     rangée d'onglets se disloque. `flex-end` : le texte descend au bas de la
     boîte, tout contre son trait. Centré, il flottait au milieu de 44 px et
     le trait de l'onglet actif semblait appartenir à autre chose. */
  .tab { min-width: 0; align-items: flex-end; padding: 0 .2rem .55rem; }

  /* ⚠⚠ LE BOGUE QUI RENDAIT UNE FONCTION INACCESSIBLE. La croix qui supprime
     une conversation vivait en `opacity: 0`, révélée au SURVOL. Sur un écran
     tactile il n'y a pas de survol : sur téléphone, personne ne pouvait
     supprimer une conversation. Au doigt, elle est simplement là. */
  .conv-x { opacity: .55; }
  .conv-name { padding-right: 2.6rem; }

  /* Le repli des gestes est un tout petit bouton texte : on lui donne de quoi
     être touché sans le grossir à l'œil. */
  .moves-peek { min-height: 34px; padding: .4rem 0; }

  /* ⚠ MESURÉ : le bouton d'envoi faisait 34 px. C'est LA cible du produit —
     celle qu'on vise vingt fois par conversation, souvent d'une seule main,
     souvent en marchant. Elle passe à 44. */
  .send { width: var(--touch); height: var(--touch); }

  /* Les suggestions d'accueil faisaient 36 px de haut. Ce sont des boutons
     qu'on propose à quelqu'un qui ne sait pas encore quoi écrire : les rater
     au doigt est le pire moment pour rater quelque chose. */
  .prompt { min-height: var(--touch); }

  /* Le mot-symbole est un lien de 24 px de haut. On agrandit sa PRISE sans
     rien déplacer : la marge négative rend exactement ce que le remplissage
     a pris. Rien ne bouge à l'œil, le doigt trouve 44 px. */
  .brand { padding: .62rem 0; margin: -.62rem 0; }

  /* « Entrer » et « Créer un compte » : la porte du service faisait 39 px. */
  .button { min-height: var(--touch); }

  /* Les deux liens légaux sous le formulaire — 21 px de haut. Google les
     exige, une personne doit pouvoir les ouvrir. */
  .gate-legal a { padding: .6rem .3rem; }

  /* Rien ne dépend plus du survol : ce qui n'était visible qu'ainsi le devient. */
  .conv:hover, .note-row:hover { background: none; }
  .conv:active { background: var(--card); }
  .note-row:active { background: var(--card); }
}

/* ─── Le clavier logiciel ──────────────────────────────────────────────────
   ⚠⚠ iOS Safari ZOOME la page dès qu'on touche un champ dont le texte fait
   moins de 16 px. La page part de travers, on perd le fil, et rien ne
   ramène le cadrage. Le corps du site est à 15,5 px : TOUS les champs
   tombaient dans le piège. 16 px exactement, et le zoom ne se déclenche pas.

   Sur `pointer: coarse` seulement : sur un écran de bureau, un champ à 16 px
   jurerait au milieu d'un texte à 15,5. */
@media (pointer: coarse) {
  input, select, textarea,
  .field, .field-row input, .field-row select, .composer textarea {
    font-size: 16px;
  }
}

/* Le sélecteur de domaine, dans le tiroir des réglages. */
select.field { cursor: pointer; }
select.field:disabled { opacity: .6; cursor: not-allowed; }

/* ─── Bases de connaissances : partagées, en lecture seule ──────────────── */

.rail-section {
  display: flex; align-items: baseline; gap: .5rem;
  margin: 1.2rem .6rem .4rem;
  padding-top: .8rem; border-top: 1px solid var(--rule);
  font: 500 .68rem/1.4 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-pale);
}
.stamp {
  margin-left: auto; letter-spacing: .06em; text-transform: none;
  font-size: .66rem; color: var(--amber);
  background: var(--amber-wash); border: 1px solid color-mix(in oklab, var(--amber) 30%, transparent);
  border-radius: 999px; padding: .05rem .45rem;
}

.base-name {
  display: flex; align-items: baseline; gap: .4rem;
  margin: .7rem .6rem .25rem;
  font: 500 .8rem/1.4 var(--sans); color: var(--ink-soft);
}
.base-name b { font: 500 .68rem/1 var(--mono); color: var(--amber); }
.base-count { margin-left: auto; font: 400 .7rem/1 var(--mono); color: var(--ink-pale); }

.note-row.from-base .note-num { color: var(--amber); }
.note-row.from-base:hover { background: var(--amber-wash); border-color: color-mix(in oklab, var(--amber) 30%, transparent); }
.note-row.read-kb { animation: pulse-kb 1.6s ease-out; }
@keyframes pulse-kb {
  0% { background: var(--amber-wash); border-color: var(--amber); }
  100% { background: transparent; border-color: transparent; }
}
@media (prefers-reduced-motion: reduce) { .note-row.read-kb { animation: none; } }

/* Une fiche de base de connaissance : la teinte ambre, sur la marque
   seulement — voir .move plus haut. */
.move-read b { color: var(--ink-soft); }

/* Réglages d'accès, dans le tiroir */
.access-card { border: 1px solid var(--rule); border-radius: var(--edge);
  background: var(--card); padding: .8rem .9rem; margin-bottom: .8rem; }
.access-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .1rem; }
.access-head b { font: 500 .95rem/1.4 var(--sans); }
.access-default { margin-left: auto; font: 400 .7rem/1 var(--mono); color: var(--ink-pale); }
.access-desc { font-size: .8rem; color: var(--ink-soft); margin-bottom: .6rem; }
.access-people { display: flex; flex-direction: column; gap: .3rem; }
.access-people label {
  display: flex; align-items: center; gap: .5rem;
  font-size: .87rem; cursor: pointer; padding: .15rem 0;
}
.access-people input { width: auto; accent-color: var(--leaf); cursor: pointer; }
.access-people .self { color: var(--ink-pale); font-size: .74rem; }

/* ─── Les trous : ce que Pierre ne sait pas encore ──────────────────────── */

.stamp-gap { color: var(--clay, var(--clay)); background: var(--clay-wash);
  border-color: color-mix(in oklab, var(--clay) 30%, transparent); }

.gap {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid transparent; border-left: 2px solid var(--clay);
  border-radius: 0 var(--edge) var(--edge) 0;
  background: none; padding: .45rem .6rem; margin-bottom: .18rem;
  font: 400 .84rem/1.45 var(--sans); color: var(--ink-soft);
  transition: background .15s, color .15s;
}
.gap:hover { background: var(--clay-wash); color: var(--ink); }
.gap-who { display: block; font: 400 .7rem/1.5 var(--mono); color: var(--ink-pale); }
.gap.neuf { animation: pulse-gap 2.2s ease-out; }
@keyframes pulse-gap {
  0% { background: var(--clay-wash); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .gap.neuf { animation: none; } }

.move-ask b { color: var(--clay); }

.gap-done { margin-top: .8rem; padding: .6rem .8rem; border-radius: var(--edge);
  background: var(--leaf-wash); border: 1px solid color-mix(in oklab, var(--leaf) 30%, transparent);
  font-size: .85rem; color: var(--leaf-strong); }


/* Full content of a knowledge-base note, shown in the drawer. */
.kb-content {
  white-space: pre-wrap; background: var(--card);
  border: 1px solid var(--rule); border-left: 2px solid var(--amber);
  border-radius: 0 var(--edge) var(--edge) 0; padding: .8rem 1rem;
}

/* A figure computed by a micro-program, not by the model. Not clickable:
   there is nothing to open, the whole calculation is already on the chip. */
.move-compute {
  cursor: default; font-family: var(--mono); font-size: .71rem;
  border-style: dashed;
}
.move-compute > span:first-child { color: var(--leaf); }
.move-compute:hover { background: transparent; border-color: var(--rule); }

/* A refused write, shown rather than swallowed. */
/* Le seul geste qui garde sa couleur : une écriture refusée doit se voir,
   sinon le fait dicté disparaît sans que personne le sache. */
.move-refused { border-color: color-mix(in oklab, var(--clay) 50%, transparent);
  color: var(--clay); }
.move-refused > span:first-child { color: var(--clay); }

/* Sign-up closed: said plainly, not hidden behind a broken form. */
.closed-note {
  margin-bottom: 1.2rem; padding: .7rem .85rem;
  border: 1px solid var(--rule-strong); border-left: 3px solid var(--amber);
  border-radius: var(--edge); background: var(--amber-wash);
  font-size: .87rem; color: var(--ink-soft);
}
.closed-note b { display: block; color: var(--amber); margin-bottom: .2rem; }
.version { font: 400 .7rem/1 var(--mono); color: var(--ink-pale); letter-spacing: .06em; }

/* ─── Personas: which model speaks, and how it is told to behave ────────── */

.persona-row { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
.persona-tag {
  font: 400 .7rem/1.5 var(--mono); color: var(--ink-soft);
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 999px; padding: .05rem .5rem;
}
.persona-tag.persona-on { color: var(--leaf-strong); background: var(--leaf-wash);
  border-color: color-mix(in oklab, var(--leaf) 35%, transparent); }
.persona-tag.persona-off { color: var(--amber); background: var(--amber-wash);
  border-color: color-mix(in oklab, var(--amber) 35%, transparent); }
.persona-running { border-left: 2px solid var(--leaf); }
.persona-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }


/* ─────────────────────────────────────────────── clés d'application */

/* Une portée se choisit en sachant ce qu'elle ouvre : le libellé seul
   ("écrire") ne dit pas qu'on donne le droit d'effacer. */
.scope-row {
  display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  padding: .55rem .1rem; border-bottom: 1px solid var(--rule);
}
.scope-row:last-child { border-bottom: 0; }
.scope-row input { margin-top: .25rem; accent-color: var(--leaf); flex: none; }
.scope-row b { display: block; font: 500 .9rem/1.4 var(--sans); }
.scope-row i { display: block; font: 400 .8rem/1.45 var(--sans);
               font-style: normal; color: var(--ink-soft); }

.key-dead { opacity: .55; }
.key-off { border-color: color-mix(in oklab, var(--clay) 45%, transparent);
           color: var(--clay); }

/* Le secret : en mono, sélectionnable d'un geste, et il doit se voir. */
.key-secret {
  font: 500 .82rem/1.6 var(--mono); word-break: break-all; user-select: all;
  border-left-color: var(--leaf); background: var(--leaf-wash);
  transition: background .2s;
}
.key-copied { background: var(--card); }
.key-howto { font: 400 .76rem/1.65 var(--mono); white-space: pre; overflow-x: auto; }

/* ─────────────────────────────────────────────── connexion Google */

.or {
  display: flex; align-items: center; gap: .8rem;
  margin: 1.6rem 0 1.1rem;
  font-size: .78rem; color: var(--ink-pale);
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* Le bouton reste le NÔTRE : les couleurs de Google vivent dans son logo,
   pas dans le bouton. Un bouton bleu Google au milieu d'une page en papier
   chaud jurerait, et rien n'oblige à le copier. */
.google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; padding: .66rem 1rem;
  border: 1px solid var(--rule-strong); border-radius: var(--edge);
  background: var(--card); color: var(--ink);
  font: 500 .93rem/1 var(--sans); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.google:hover { border-color: var(--ink-soft); background: var(--card-2);
                text-decoration: none; }
.google svg { flex: none; }
.google-note { margin-top: .5rem; font-size: .76rem; color: var(--ink-pale);
               text-align: center; }

/* L'étape en cours — ce qui remplit le silence avant le premier mot.
   Volontairement pâle et sans bordure : elle doit se lire du coin de l'œil et
   disparaître sans laisser de trou quand la réponse commence. */
.step {
  font: 400 .78rem/1.5 var(--sans);
  color: var(--ink-pale);
  margin-bottom: .45rem;
  animation: step-pulse 1.6s ease-in-out infinite;
}
@keyframes step-pulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .step { animation: none; opacity: .8 }
}