/* ═══════════════════════════════════════════════════════════════════════
   PLOOM — l'interface.
   ====================
   Un produit, pas une démo. La référence tenue : Revolut, Apple, OKX —
   fond profond, une seule couleur d'accent, des surfaces qui se
   distinguent par la lumière et non par le trait, des chiffres en
   chasse fixe, et des mouvements courts.

   Trois règles qui font la différence entre « propre » et « bricolé » :
     · une seule échelle d'espacement (multiples de 4) ;
     · une seule couleur d'accent, celle du logo Qualitest ;
     · aucun dégradé décoratif, aucune ombre colorée.

   Le clair et le sombre sont deux vrais thèmes, pas une inversion.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* la marque */
  --bleu:          #0090D3;
  --bleu-profond:  #375CAD;
  --bleu-clair:    #73D9FF;

  /* sombre par défaut */
  /* Noir pur. Pas « presque noir » : un fond légèrement teinté se voit
     comme une approximation dès qu'il côtoie une vraie image noire. */
  --fond:      #000000;
  --surface:   #0A0A0B;
  --surface-2: #101113;
  --surface-3: #161719;
  --trait:     rgba(255,255,255,.075);
  --trait-fort:rgba(255,255,255,.14);
  --texte:     #F2F4F7;
  --texte-2:   rgba(242,244,247,.66);
  --texte-3:   rgba(242,244,247,.40);
  --accent:    #37A9E8;
  --accent-doux: rgba(55,169,232,.14);
  --vert:      #2FBF71;
  --ambre:     #E0A33E;
  --rouge:     #E5576B;
  --ombre:     0 1px 2px rgba(0,0,0,.40), 0 12px 32px -12px rgba(0,0,0,.65);

  --r-xl: 22px; --r-l: 16px; --r-m: 12px; --r-s: 9px;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  --transition: 180ms cubic-bezier(.22,.61,.36,1);

  --police: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
            "Segoe UI", Roboto, sans-serif;
  --police-titre: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
            "Segoe UI", Roboto, sans-serif;
  --chiffres: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
}

/* PLOOM reste en sombre, quel que soit le réglage de l'ordinateur : c'est la
   charte (fond noir franc). La variante claire, qui suivait le système,
   faisait changer l'outil d'aspect d'un poste à l'autre. */
:root { color-scheme: dark; }

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─────────────────────────────── en-tête ─────────────────────────────── */

.tete {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--trait);
}
.tete-dedans {
  max-width: 1200px; margin: 0 auto;
  padding: var(--e3) var(--e5);
  display: flex; align-items: center; gap: var(--e4);
}
.marque { display: flex; align-items: baseline; gap: var(--e2); }
.marque b {
  font-family: var(--police-titre);
  font-size: 18px; font-weight: 640; letter-spacing: -.02em;
}
.marque span { font-size: 12px; color: var(--texte-3); letter-spacing: .01em; }

.pastilles { margin-left: auto; display: flex; gap: var(--e1); flex-wrap: wrap; }
.pastille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--trait); border-radius: 999px;
  font-size: 11.5px; color: var(--texte-2);
  background: var(--surface);
  cursor: default; white-space: nowrap;
  transition: border-color var(--transition), color var(--transition);
}
.pastille:hover { border-color: var(--trait-fort); color: var(--texte); }
.point { width: 6px; height: 6px; border-radius: 50%; background: var(--texte-3); flex: none; }
.point.vert   { background: var(--vert);  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 18%, transparent); }
.point.orange { background: var(--ambre); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ambre) 18%, transparent); }
.point.rouge  { background: var(--rouge); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rouge) 18%, transparent); }

/* ─────────────────────────────── structure ─────────────────────────────── */

.page { max-width: 1200px; margin: 0 auto; padding: var(--e6) var(--e5) 96px; }
.colonnes { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--e5); }
@media (min-width: 1080px) {
  .colonnes { grid-template-columns: minmax(0,1fr) 340px; align-items: start; }
  .rail { position: sticky; top: 84px; }
}

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-xl);
  box-shadow: var(--ombre);
  overflow: hidden;
  margin-bottom: var(--e5);
}
.carte-tete {
  display: flex; align-items: center; gap: var(--e3);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--trait);
}
.carte-tete h2 {
  margin: 0; font-family: var(--police-titre);
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
}
.carte-tete .sous { font-size: 12px; color: var(--texte-3); margin-left: auto; }
.carte-corps { padding: var(--e5); }
.carte-corps.serre { padding: var(--e4) var(--e5); }

h1.titre-ao {
  font-family: var(--police-titre);
  font-size: clamp(22px, 3.2vw, 30px); font-weight: 660;
  letter-spacing: -.025em; line-height: 1.18; margin: 0 0 var(--e2);
}

/* ─────────────────────────────── contrôles ─────────────────────────────── */

textarea, input[type=text], input[type=number] {
  width: 100%; font-family: var(--police); font-size: 14px; line-height: 1.6;
  color: var(--texte); background: var(--surface-3);
  border: 1px solid var(--trait); border-radius: var(--r-m);
  padding: var(--e3) var(--e4); resize: vertical;
  transition: border-color var(--transition), background var(--transition);
}
textarea::placeholder { color: var(--texte-3); }
textarea:focus, input:focus {
  outline: none; border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 4px var(--accent-doux);
}
textarea.ao { min-height: 180px; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  font: inherit; font-size: 14px; font-weight: 550; letter-spacing: -.005em;
  padding: 11px var(--e5); border-radius: 999px; border: 1px solid transparent;
  background: var(--accent); color: #fff; cursor: pointer;
  transition: transform var(--transition), filter var(--transition),
              background var(--transition), border-color var(--transition);
}
.bouton:hover { filter: brightness(1.08); }
.bouton:active { transform: scale(.985); }
.bouton[disabled] { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.bouton.fantome {
  background: transparent; color: var(--texte); border-color: var(--trait-fort);
}
.bouton.fantome:hover { background: var(--surface-3); filter: none; }
.bouton.discret {
  background: transparent; color: var(--texte-2); border-color: transparent;
  padding: 7px var(--e3); font-size: 13px;
}
.bouton.discret:hover { color: var(--texte); background: var(--surface-3); }

.barre-actions { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; margin-top: var(--e4); }
.barre-actions .droite { margin-left: auto; }

.segment {
  display: inline-flex; background: var(--surface-3); border-radius: 999px;
  padding: 3px; gap: 2px; border: 1px solid var(--trait);
}
.segment button {
  font: inherit; font-size: 13px; color: var(--texte-2); background: transparent;
  border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.segment button[aria-selected="true"] {
  background: var(--surface); color: var(--texte);
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}

/* ─────────────────────────────── grille & score ─────────────────────────────── */

.critere { padding: var(--e3) 0; border-bottom: 1px solid var(--trait); }
.critere:last-child { border-bottom: 0; }
.critere .ligne1 { display: flex; align-items: baseline; gap: var(--e2); }
.critere .nom { font-size: 13.5px; font-weight: 520; }
.critere .pts {
  margin-left: auto; font-family: var(--chiffres); font-size: 12.5px;
  font-variant-numeric: tabular-nums; color: var(--texte-2);
}
.critere .detail { font-size: 11.5px; color: var(--texte-3); margin-top: 3px; }
.critere.hors .nom { color: var(--texte-3); }

.jauge { height: 4px; border-radius: 999px; background: var(--surface-3); margin-top: 7px; overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--accent); border-radius: 999px;
           transition: width 520ms cubic-bezier(.22,.61,.36,1); }
.jauge.faible i { background: var(--ambre); }
.jauge.basse i  { background: var(--rouge); }

.score-gros {
  display: flex; align-items: baseline; gap: var(--e2); margin-bottom: var(--e2);
}
.score-gros b {
  font-family: var(--police-titre); font-size: 38px; font-weight: 640;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.score-gros span { font-size: 13px; color: var(--texte-3); }

.etiquette {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--trait); color: var(--texte-2); background: var(--surface-3);
}
.etiquette.attention { color: var(--ambre); border-color: color-mix(in srgb, var(--ambre) 35%, transparent); }
.etiquette.bien { color: var(--vert); border-color: color-mix(in srgb, var(--vert) 32%, transparent); }

/* ─────────────────────────────── le mémoire ─────────────────────────────── */

.memoire { font-size: 15.5px; line-height: 1.72; max-width: 72ch; }
.memoire h2 {
  font-family: var(--police-titre); font-size: 17px; font-weight: 620;
  letter-spacing: -.015em; margin: var(--e6) 0 var(--e3);
  padding-top: var(--e4); border-top: 1px solid var(--trait);
}
.memoire h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.memoire p { margin: 0 0 var(--e4); color: var(--texte); }
.memoire p.alerte { color: var(--ambre); font-size: 13.5px; }
.memoire table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin: var(--e2) 0 var(--e5); font-size: 13.5px;
  border: 1px solid var(--trait); border-radius: var(--r-m); overflow: hidden;
}
.memoire th {
  text-align: left; font-weight: 580; font-size: 12.5px;
  background: var(--surface-3); color: var(--texte-2);
  padding: 10px var(--e3); border-bottom: 1px solid var(--trait);
}
.memoire td { padding: 10px var(--e3); border-bottom: 1px solid var(--trait); vertical-align: top; }
.memoire tbody tr:last-child td { border-bottom: 0; }

.resume {
  font-size: 15px; line-height: 1.7; color: var(--texte);
  border-left: 2px solid var(--accent); padding-left: var(--e4);
}

/* ─────────────────────────────── le chat ─────────────────────────────── */

.fil { display: flex; flex-direction: column; gap: var(--e3); margin-bottom: var(--e4); }
.bulle {
  max-width: 85%; padding: 10px var(--e4); border-radius: var(--r-l);
  font-size: 14px; line-height: 1.6;
}
.bulle.moi { align-self: flex-end; background: var(--accent); color: #fff;
             border-bottom-right-radius: var(--r-s); }
.bulle.lui { align-self: flex-start; background: var(--surface-3); color: var(--texte);
             border: 1px solid var(--trait); border-bottom-left-radius: var(--r-s); }
.bulle.lui.travaille { color: var(--texte-3); }

.composeur { display: flex; gap: var(--e2); align-items: flex-end; }
.composeur textarea { min-height: 46px; max-height: 160px; border-radius: var(--r-l); }

/* ─────────────────────────────── divers ─────────────────────────────── */

.vide { color: var(--texte-3); font-size: 14px; text-align: center; padding: var(--e6) 0; }
.chargement { display: flex; align-items: center; gap: var(--e3); color: var(--texte-2); font-size: 13.5px; }
.rondelle {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid var(--trait-fort); border-top-color: var(--accent);
  animation: tourne .7s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

.progression { height: 3px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-top: var(--e3); }
.progression i { display: block; height: 100%; background: var(--accent);
                 transition: width 400ms cubic-bezier(.22,.61,.36,1); }

.panne {
  border: 1px solid color-mix(in srgb, var(--rouge) 38%, transparent);
  background: color-mix(in srgb, var(--rouge) 9%, transparent);
  color: var(--texte); border-radius: var(--r-m);
  padding: var(--e3) var(--e4); font-size: 13.5px; margin: var(--e3) 0;
}
.panne b { color: var(--rouge); }

.liste-dossiers { display: flex; flex-direction: column; }
.dossier-ligne {
  display: flex; align-items: center; gap: var(--e3); width: 100%;
  padding: var(--e3) var(--e5); border: 0; border-bottom: 1px solid var(--trait);
  background: transparent; color: var(--texte); font: inherit; text-align: left;
  cursor: pointer; transition: background var(--transition);
}
.dossier-ligne:hover { background: var(--surface-3); }
.dossier-ligne:last-child { border-bottom: 0; }
.dossier-ligne .quoi { min-width: 0; }
.dossier-ligne .quoi b { display: block; font-size: 13.5px; font-weight: 540;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dossier-ligne .quoi span { font-size: 11.5px; color: var(--texte-3); }
.dossier-ligne .note {
  margin-left: auto; font-family: var(--chiffres); font-size: 12.5px;
  font-variant-numeric: tabular-nums; color: var(--texte-2);
}

table.mesure { width: 100%; border-collapse: collapse; font-size: 13px; }
table.mesure th { text-align: left; font-weight: 520; color: var(--texte-3);
  font-size: 11.5px; padding: 0 var(--e2) var(--e2) 0; }
table.mesure td { padding: 6px var(--e2) 6px 0; border-top: 1px solid var(--trait);
  font-variant-numeric: tabular-nums; }

.aide { font-size: 12.5px; color: var(--texte-3); margin-top: var(--e2); }
.mono { font-family: var(--chiffres); font-variant-numeric: tabular-nums; }

dialog {
  border: 1px solid var(--trait); border-radius: var(--r-xl); padding: 0;
  background: var(--surface); color: var(--texte); box-shadow: var(--ombre);
  max-width: 560px; width: calc(100vw - 32px);
}
dialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }

@media (max-width: 640px) {
  .page { padding: var(--e4) var(--e4) 80px; }
  /* les pastilles passent à la ligne : sans ce retour, l'en-tête débordait
     de 170 px sur un téléphone de 390 px (mesuré le 23/09) */
  .tete-dedans { padding: var(--e3) var(--e4); flex-wrap: wrap; }
  .carte-corps { padding: var(--e4); }
  .pastilles { width: 100%; margin-left: 0; order: 3; }
}

/* ─────────────────────────── le mémoire en direct ───────────────────────────
   L'aperçu pendant la rédaction (voir « L'APERÇU EN DIRECT » dans ploom.js).
   Même typographie que le mémoire fini : ce qu'on voit s'écrire, c'est lui.
   Une pastille par morceau dit où il en est ; le curseur clignote là où
   l'IA écrit. Moins de mouvement demandé = rien ne clignote ni ne glisse. */

.apercu-barre { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
                margin-bottom: var(--e4); }
.apercu-legende { font-size: 13.5px; color: var(--texte-2); min-width: 0; flex: 1 1 220px; }
.apercu { max-width: 76ch; }
.apercu .ap-section h2 { display: flex; align-items: baseline; gap: var(--e2); }
.apercu .ap-num { font-size: 12px; color: var(--texte-3); min-width: 1.4em; }
.apercu .ap-compte { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--texte-3); }
.apercu h3 {
  font-family: var(--police-titre); font-size: 14.5px; font-weight: 600;
  margin: var(--e4) 0 var(--e1); color: var(--texte);
}
.ap-morceau { margin: 0 0 var(--e4); overflow-wrap: anywhere; }
.ap-morceau .ap-texte p { margin: 0 0 var(--e3); }
.ap-morceau .ap-inter { font-weight: 600; }
.ap-tableau {
  font-family: var(--chiffres); font-size: 12px; line-height: 1.5; color: var(--texte-2);
  background: var(--surface-2); border: 1px solid var(--trait); border-radius: var(--r-s);
  padding: var(--e2) var(--e3); overflow-x: auto; white-space: pre; margin: 0 0 var(--e3);
}
.ap-etat {
  display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
  font-size: 12px; color: var(--texte-3); margin-bottom: var(--e2);
}
.ap-mots { margin-left: auto; font-size: 11.5px; }
.ap-pastille {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--trait-fort);
}
.ap-morceau[data-etat="attente"] .ap-texte:empty { display: none; }
.ap-morceau[data-etat="attente"] h3 { color: var(--texte-3); }
.ap-morceau[data-etat="ecrit"] .ap-pastille { background: var(--accent); animation: ap-pouls 1.1s ease-in-out infinite; }
.ap-morceau[data-etat="ecrit"] .ap-etat { color: var(--accent); }
.ap-morceau[data-etat="relecture"] .ap-pastille { background: var(--bleu-clair); }
.ap-morceau[data-etat="relecture"] .ap-texte { color: var(--texte-2); }
.ap-morceau[data-etat="bloc"] .ap-pastille,
.ap-morceau[data-etat="fini"] .ap-pastille { background: var(--vert); }
.ap-morceau[data-etat="bloc"] .ap-etat { color: var(--vert); }
.ap-morceau[data-etat="bloc"] .ap-texte {
  border-left: 2px solid color-mix(in srgb, var(--vert) 55%, transparent); padding-left: var(--e3);
}
.ap-morceau[data-etat="panne"] .ap-pastille,
.ap-morceau[data-etat="interrompu"] .ap-pastille { background: var(--rouge); }
.ap-morceau[data-etat="panne"] .ap-etat,
.ap-morceau[data-etat="interrompu"] .ap-etat { color: var(--rouge); }

.ap-curseur {
  display: inline-block; width: 2px; height: 1.1em; margin-left: 2px;
  vertical-align: text-bottom; background: var(--accent);
  animation: ap-clignote 1s steps(1) infinite;
}

.ap-xb48:empty { display: none; }
.ap-xb48 { margin: 0 0 var(--e3); display: flex; flex-direction: column; gap: var(--e1); }
.ap-xb48-ligne {
  display: flex; align-items: center; gap: var(--e2); font-size: 12.5px; color: var(--texte-2);
  background: var(--surface-2); border: 1px solid var(--trait); border-radius: var(--r-s);
  padding: 6px var(--e3);
}
.ap-xb48-ligne b { font-weight: 560; color: var(--texte); }
.ap-xb48-ligne[data-etat="en_cours"] .ap-pastille { background: var(--bleu-clair); animation: ap-pouls 1.1s ease-in-out infinite; }
.ap-xb48-ligne[data-etat="fait"] .ap-pastille { background: var(--vert); }
.ap-xb48-ligne[data-etat="garde"] .ap-pastille { background: var(--ambre); }

@keyframes ap-clignote { 50% { opacity: 0; } }
@keyframes ap-pouls { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .ap-curseur, .ap-pastille { animation: none !important; }
}
@media (max-width: 640px) {
  .apercu { font-size: 15px; }
  .ap-mots { margin-left: 0; width: 100%; }
}