/* ═══════════════════════════════════════════════════════════════
   ARCHEA B2B — front praticien
   Webapp desktop d'abord, responsive : le même écran doit rester
   utilisable sur un mobile en salle d'attente.
   ═══════════════════════════════════════════════════════════════ */

/* Palette : variant « jour » de l'identité Archea (validé par Laurent le
   26/08/2026). Le B2C (archea.app) vit la nuit — nuit violacée #0c091e,
   or champagne #e4ca98, mauve #7a6c9e ; le Pro vit le jour : mêmes
   couleurs, autre lumière. La nuit ne survit que dans le bandeau et
   l'encre, le mauve du site devient la couleur d'action, l'or champagne
   est assombri pour rester lisible sur fond clair. Aucun bleu astro.
   Typographie de marque (Cormorant Garamond / Raleway) : à trancher au
   moment de la landing. */
:root {
  --papier:   #f7f5f1;   /* fond général, ivoire chaud */
  --carte:    #ffffff;
  --encre:    #2b2440;   /* nuit violacée adoucie — texte et bandeau */
  --encre-2:  #6f6885;   /* texte secondaire, mauve-gris */
  --trait:    #e6e1ea;   /* bordures */
  --accent:   #7a6c9e;   /* mauve Archea — actions */
  --accent-f: #635683;
  --accent-p: #f0edf6;   /* fond pâle de l'accent */
  --or:       #b28d4a;   /* or champagne assombri — signature marque */
  --ok:       #2c7a4b;
  --alerte:   #b3552c;
  --erreur:   #a33b3b;
  --rayon:    10px;
  --ombre:    0 1px 3px rgba(38, 48, 59, .08), 0 4px 16px rgba(38, 48, 59, .05);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--papier);
  color: var(--encre);
}
button { font: inherit; cursor: pointer; }
button:disabled { opacity: .45; cursor: not-allowed; }
h1, h2, h3 { line-height: 1.25; }
.hidden { display: none !important; }

/* ── Boutons ─────────────────────────────────────────────────── */
.btn {
  border: 1px solid var(--trait);
  background: var(--carte);
  color: var(--encre);
  border-radius: 8px;
  padding: 8px 14px;
  transition: background .12s, border-color .12s;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn.primaire {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.primaire:hover:not(:disabled) { background: var(--accent-f); }
.btn.discret {
  border: none;
  background: transparent;
  color: var(--encre-2);
  padding: 6px 8px;
}
.btn.discret:hover:not(:disabled) { color: var(--encre); }
.btn.danger { color: var(--erreur); }
.btn.danger:hover:not(:disabled) { border-color: var(--erreur); }

/* ── Champs ──────────────────────────────────────────────────── */
label { display: block; font-size: 13px; color: var(--encre-2); margin: 12px 0 4px; }
input, select, textarea {
  font: inherit;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--carte);
  color: var(--encre);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent-p);
  border-color: var(--accent);
}
textarea { resize: vertical; }
.indication { font-size: 12.5px; color: var(--encre-2); margin-top: 5px; }
.avertissement { font-size: 13px; color: var(--alerte); margin-top: 6px; }

/* ── Message global (toast) ──────────────────────────────────── */
#toast {
  position: fixed;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  max-width: min(560px, calc(100vw - 32px));
  padding: 11px 18px;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  font-size: 14px;
  display: none;
}
#toast.ok  { display: block; background: #e5f2ea; color: var(--ok);  border: 1px solid #bcdcc9; }
#toast.err { display: block; background: #f7e5e5; color: var(--erreur); border: 1px solid #e4bcbc; }

/* ── Écran de connexion ──────────────────────────────────────── */
#vue-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.carte-auth {
  width: 100%;
  max-width: 420px;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 14px;
  box-shadow: var(--ombre);
  padding: 36px 32px 30px;
}
.marque {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--encre);
}
.marque .point { color: var(--or); }
.sous-marque { font-size: 13px; color: var(--encre-2); margin: 2px 0 22px; }
.carte-auth .actions { display: flex; gap: 10px; margin-top: 20px; align-items: center; }
.lien {
  background: none; border: none; padding: 0;
  color: var(--accent); font-size: 13.5px; text-decoration: underline;
}

/* ── Structure de l'app ──────────────────────────────────────── */
#vue-app { min-height: 100vh; display: flex; flex-direction: column; }

header.barre {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--encre);
  color: #f2efe9;
}
header .marque { font-size: 17px; color: #f2efe9; }
header .sous-marque { color: #9aa4af; margin: 0; font-size: 12px; }
header .espace { flex: 1; }
header .praticien { font-size: 13px; color: #cdd4db; }
header .btn.discret { color: #9aa4af; }
header .btn.discret:hover { color: #fff; }

.disposition {
  flex: 1;
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 0;
}

/* ── Colonne dossiers ────────────────────────────────────────── */
aside {
  border-right: 1px solid var(--trait);
  background: #efece5;
  padding: 16px 14px;
  overflow-y: auto;
}
aside .btn.primaire { width: 100%; }
.bloc-quota {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--encre-2);
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 9px 11px;
}
.bloc-quota strong { color: var(--encre); }
.titre-liste {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--encre-2);
  margin: 18px 4px 8px;
}
ul.dossiers { list-style: none; margin: 0; padding: 0; }
ul.dossiers li {
  padding: 9px 11px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
ul.dossiers li:hover { background: rgba(61, 86, 116, .08); }
ul.dossiers li.actif-vue { background: var(--accent-p); }
ul.dossiers .nom { font-weight: 600; flex: 1; }
ul.dossiers li.ferme .nom { color: var(--encre-2); font-weight: 400; }
.pastille {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 1.5px 7px;
  border-radius: 9px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.pastille.oriente    { color: var(--or); }
.pastille.structurel { color: var(--encre-2); }
.pastille.ferme      { color: var(--encre-2); background: rgba(128,128,128,.12); }
.pastille.ok         { color: var(--ok); }
.pastille.alerte     { color: var(--alerte); }

/* ── Zone principale ─────────────────────────────────────────── */
main { padding: 26px 34px 60px; overflow-y: auto; min-width: 0; }
.accueil-vide {
  margin-top: 12vh;
  text-align: center;
  color: var(--encre-2);
}
.accueil-vide .marque { opacity: .25; font-size: 34px; }

.panneau {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 24px 28px;
  max-width: 880px;
}
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.grille-3 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0 18px; align-items: end; }

ul.suggestions {
  list-style: none; margin: 4px 0 0; padding: 0;
  border: 1px solid var(--trait); border-radius: 8px;
  background: var(--carte);
  box-shadow: var(--ombre);
}
ul.suggestions:empty { display: none; }
ul.suggestions li { padding: 8px 11px; cursor: pointer; }
ul.suggestions li:hover { background: var(--accent-p); }

/* ── En-tête du dossier ──────────────────────────────────────── */
.entete-dossier {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 880px;
  margin-bottom: 14px;
}
.entete-dossier h1 { font-size: 24px; margin: 0; }
.entete-dossier .espace { flex: 1; }
.entete-dossier .naissance { color: var(--encre-2); font-size: 13.5px; width: 100%; margin-top: -6px; }

/* ── Onglets ─────────────────────────────────────────────────── */
nav.onglets {
  display: flex;
  gap: 4px;
  max-width: 880px;
  border-bottom: 1px solid var(--trait);
  margin-bottom: 18px;
}
nav.onglets button {
  border: none;
  background: none;
  padding: 9px 16px 11px;
  color: var(--encre-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: 14.5px;
}
nav.onglets button:hover { color: var(--encre); }
nav.onglets button.actif {
  color: var(--accent);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

/* ── Portrait ────────────────────────────────────────────────── */
.prose {
  font-family: Iowan Old Style, Palatino, Georgia, serif;
  font-size: 16.5px;
  line-height: 1.68;
  max-width: 72ch;
}
.prose h1, .prose h2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 19px;
  margin: 1.6em 0 .55em;
  color: var(--accent-f);
}
.prose h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  margin: 1.4em 0 .45em;
}
.prose p { margin: .75em 0; }
.prose ul, .prose ol { margin: .6em 0; padding-left: 1.5em; }
.prose li { margin: .3em 0; }
.prose hr { border: none; border-top: 1px solid var(--trait); margin: 1.6em 0; }
.prose .encadre {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--encre-2);
  background: var(--papier);
  border-left: 3px solid var(--or);
  border-radius: 0 8px 8px 0;
  padding: 10px 16px;
  margin: 1.4em 0;
}
.prose .encadre strong { color: var(--encre); }
.prose > .encadre:first-child {
  background: none;
  border-left: none;
  border-bottom: 1px solid var(--trait);
  border-radius: 0;
  padding: 0 0 12px;
  font-size: 15px;
  color: var(--encre);
  font-weight: 600;
}
.prose blockquote {
  margin: .9em 0; padding: .1em 1.1em;
  border-left: 3px solid var(--or);
  color: var(--encre-2);
}
.prose code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--papier);
  padding: 1px 5px;
  border-radius: 4px;
}
.flux-brut { white-space: pre-wrap; }   /* pendant le flux : texte brut lisible */

.etat-generation {
  display: flex; align-items: center; gap: 10px;
  color: var(--encre-2); font-size: 14px;
  margin-bottom: 14px;
}
.souffle {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  animation: souffle 1.2s ease-in-out infinite;
}
@keyframes souffle { 0%,100% { opacity: .25 } 50% { opacity: 1 } }

.meta-ligne { font-size: 12.5px; color: var(--encre-2); margin-top: 18px; }
details.technique { margin-top: 14px; font-size: 13px; color: var(--encre-2); }
details.technique summary { cursor: pointer; }
details.technique pre {
  background: var(--papier);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace;
}
.vide {
  color: var(--encre-2);
  text-align: center;
  padding: 42px 20px;
}

/* ── Le fil ──────────────────────────────────────────────────── */
.fil-messages { max-width: 880px; }
.message { margin: 14px 0; display: flex; }
.message .bulle {
  border-radius: 12px;
  padding: 12px 16px;
  max-width: 78%;
  overflow-wrap: break-word;
}
.message.praticien { justify-content: flex-end; }
.message.praticien .bulle {
  background: var(--accent-p);
  border: 1px solid #d4dde8;
}
.message.archea .bulle {
  background: var(--carte);
  border: 1px solid var(--trait);
  box-shadow: var(--ombre);
  max-width: 88%;
}
.message .bulle .prose { font-size: 15.5px; }
.message .bulle .prose > :first-child { margin-top: 0; }
.message .bulle .prose > :last-child { margin-bottom: 0; }
.message .cadre-seance {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--or);
  margin-bottom: 6px;
}
.message .horodatage { font-size: 11.5px; color: var(--encre-2); margin-top: 7px; }
.message.praticien .texte { white-space: pre-wrap; }

/* Composeur */
.composeur {
  max-width: 880px;
  margin-top: 18px;
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 14px 16px;
}
.composeur .modes { display: flex; gap: 6px; margin-bottom: 10px; align-items: center; }
.composeur .modes .quota-echanges { margin-left: auto; font-size: 12.5px; color: var(--encre-2); }
.segment {
  border: 1px solid var(--trait);
  background: var(--carte);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 13px;
  color: var(--encre-2);
}
.segment.actif {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.outils { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.outil {
  border: 1px solid var(--trait);
  background: var(--papier);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12.5px;
  color: var(--encre-2);
}
.outil:hover:not(:disabled) { border-color: var(--or); color: var(--encre); }
.composeur .champ-date { max-width: 200px; }
.composeur .envoi { display: flex; gap: 10px; margin-top: 10px; align-items: center; }
.composeur .envoi .indication { margin: 0; flex: 1; }

/* ── Séances ─────────────────────────────────────────────────── */
.seance {
  background: var(--carte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 20px 24px;
  max-width: 880px;
  margin-bottom: 18px;
}
.seance h3 { margin: 0 0 2px; font-size: 16px; }
.seance .date { font-size: 13px; color: var(--encre-2); margin-bottom: 12px; }
.seance h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--encre-2); margin: 16px 0 6px;
}
.seance .observations { white-space: pre-wrap; }

/* ── Responsive : la webapp reste utilisable sur mobile ──────── */
@media (max-width: 900px) {
  .disposition { grid-template-columns: 1fr; }
  aside {
    border-right: none;
    border-bottom: 1px solid var(--trait);
    max-height: 40vh;
  }
  main { padding: 18px 14px 40px; }
  .panneau { padding: 18px 16px; }
  .grille-2, .grille-3 { grid-template-columns: 1fr; }
  .message .bulle { max-width: 92%; }
  header.barre { padding: 10px 14px; }
  header .praticien { display: none; }
}