/* Suivi IA'Optim — feuille de style.
 *
 * Direction : un poste de pilotage calme. Encre sur porcelaine (ou craie sur
 * ardoise, en sombre) ; la couleur n'apparait QUE pour dire quelque chose :
 * vert = en ordre, ambre = a surveiller, rouge = a traiter. Un ecran sans
 * couleur est un ecran ou tout va bien.
 *
 * Deux voix : Literata (serif de lecture) pour les noms — clients,
 * applications, titres ; Schibsted Grotesk pour tout le reste. Polices
 * hebergees ici (public/polices, licence SIL OFL 1.1) : la CSP interdit tout
 * domaine exterieur.
 */

@font-face {
  font-family: 'Literata';
  src: url('/polices/literata.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/polices/schibsted-grotesk.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* --- Jetons ------------------------------------------------------------------ */

:root {
  --serif: 'Literata', Georgia, serif;
  --sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Echelle typographique (rapport ~1,2) */
  --t-xs: .75rem;    /* 12 */
  --t-s: .8125rem;   /* 13 */
  --t-m: .9375rem;   /* 15 : texte courant */
  --t-l: 1.125rem;   /* 18 */
  --t-xl: 1.375rem;  /* 22 */
  --t-2xl: 1.75rem;  /* 28 */
  --t-3xl: 2.125rem; /* 34 */

  --r-petit: 6px;
  --r: 10px;
  --r-grand: 16px;
  --duree: 140ms;

  /* Porcelaine (clair) */
  --fond: #f3f4f1;
  --surface: #ffffff;
  --survol: #eef0ec;
  --encre: #162024;
  --texte-2: #48555a;
  --discret: #667276;
  --ligne: #e1e4df;
  --ligne-forte: #c9cfca;
  --ok: #2c7a4b;
  --attention: #935500;
  --ko: #b3261e;
  --ok-fond: #e7f2ea;
  --attention-fond: #fbf0de;
  --ko-fond: #fbeceb;
  --plein: #162024;          /* bouton principal */
  --plein-texte: #ffffff;
  --bulle-moi: #162024;
  --bulle-moi-texte: #f3f4f1;
  --voile: rgba(16, 24, 26, .42);
  --ombre-fenetre: 0 24px 60px -20px rgba(16, 24, 26, .35), 0 2px 6px rgba(16, 24, 26, .08);
  color-scheme: light;
}

/* Ardoise (sombre) : Yacine travaille en sombre. */
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #141a1b;
    --surface: #1b2224;
    --survol: #232b2d;
    --encre: #e7ece9;
    --texte-2: #b7c0bd;
    --discret: #8f9b97;
    --ligne: #283133;
    --ligne-forte: #3b4648;
    --ok: #6fc996;
    --attention: #e8b25f;
    --ko: #ff8f86;
    --ok-fond: rgba(111, 201, 150, .10);
    --attention-fond: rgba(232, 178, 95, .10);
    --ko-fond: rgba(255, 143, 134, .09);
    --plein: #e7ece9;
    --plein-texte: #141a1b;
    --bulle-moi: #2c3638;
    --bulle-moi-texte: #e7ece9;
    --voile: rgba(4, 8, 9, .62);
    --ombre-fenetre: 0 24px 70px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .05);
    color-scheme: dark;
  }
}

/* --- Base ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-m);
  line-height: 1.55;
  background: var(--fond);
  color: var(--encre);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: filter var(--duree) ease;
}

/* Fenetre qui perd la main : on ne voit plus rien de lisible. */
body.floute #ecran,
body.floute #fenetre { filter: blur(14px); }

h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.2; }
h1 { font-family: var(--serif); font-size: var(--t-2xl); letter-spacing: -.01em; }
h2 { font-family: var(--serif); font-size: var(--t-xl); }
h3 { font-size: var(--t-m); font-weight: 600; }
p { margin: 0; }
code { font: .85em var(--mono); }
a { color: inherit; text-decoration-color: var(--ligne-forte); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
strong { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--ligne); margin: 1rem 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

.discret { color: var(--discret); }
.petit { font-size: var(--t-s); }
.erreur { color: var(--ko); font-size: var(--t-s); }
.explication { color: var(--texte-2); }

/* --- Boutons et champs -------------------------------------------------------- */

button {
  font: inherit;
  font-weight: 500;
  line-height: 1.2;
  min-height: 40px;
  padding: .55rem 1rem;
  border-radius: var(--r);
  border: 1px solid var(--plein);
  background: var(--plein);
  color: var(--plein-texte);
  cursor: pointer;
  transition: background-color var(--duree) ease, border-color var(--duree) ease, color var(--duree) ease, opacity var(--duree) ease;
}
button:hover { opacity: .86; }
button:disabled { opacity: .5; cursor: default; }
button.secondaire { background: transparent; color: var(--encre); border-color: var(--ligne-forte); }
button.secondaire:hover { background: var(--survol); opacity: 1; }
button.danger { background: transparent; color: var(--ko); border-color: color-mix(in srgb, var(--ko) 45%, transparent); }
button.danger:hover { background: var(--ko-fond); opacity: 1; }
button.fantome { background: transparent; border-color: transparent; color: var(--texte-2); }
button.fantome:hover { color: var(--encre); background: var(--survol); opacity: 1; }
button.petit { min-height: 32px; padding: .35rem .7rem; font-size: var(--t-s); }
/* Bouton-lien : une action secondaire dite en toutes lettres. */
button.lien {
  min-height: 0;
  background: none;
  border: none;
  border-radius: 3px;
  padding: .2rem 0;
  color: var(--texte-2);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--ligne-forte);
  text-underline-offset: 3px;
}
button.lien:hover { color: var(--encre); text-decoration-color: currentColor; opacity: 1; }
button.lien + button.lien { margin-left: 1rem; }
button.danger-texte { color: var(--ko); }
button.danger-texte:hover { color: var(--ko); }

/* Retour : un chevron dessine, pas une fleche typographique. */
button.retour { padding-left: .35rem; }
button.retour::before {
  content: '';
  display: inline-block;
  width: .42em; height: .42em;
  margin-right: .6em;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-.06em) rotate(45deg);
}

input, textarea, select {
  font: inherit;
  width: 100%;
  min-height: 42px;
  padding: .55rem .8rem;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--encre);
  transition: border-color var(--duree) ease, box-shadow var(--duree) ease;
}
input::placeholder, textarea::placeholder { color: var(--discret); }
input:focus, textarea:focus, select:focus { border-color: var(--encre); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--encre) 14%, transparent); }
textarea { resize: vertical; min-height: 4.5rem; line-height: 1.5; }
select { width: auto; max-width: 100%; }
.formulaire select { width: 100%; }
input[type=checkbox], input[type=radio] { width: 1.05rem; height: 1.05rem; min-height: 0; padding: 0; margin: 0; accent-color: var(--encre); flex: none; }
input[type=checkbox]:focus, input[type=radio]:focus { box-shadow: none; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.case { display: inline-flex; align-items: center; gap: .5rem; color: var(--texte-2); cursor: pointer; }
.case select { min-height: 34px; padding: .3rem .6rem; }

/* --- Connexion, code, verrou ------------------------------------------------- */

.connexion {
  width: min(380px, 100% - 2rem);
  margin: 14vh auto 2rem;
}
.connexion .marque { display: block; margin-bottom: 2.5rem; font-size: var(--t-2xl); text-align: center; }
.connexion h1 { font-size: var(--t-xl); margin-bottom: .4rem; }
.connexion .formulaire { margin-top: 1.5rem; }
.connexion .formulaire > button { width: 100%; margin-top: .25rem; }
.connexion > div > .lien { display: block; margin: 1.5rem auto 0; }

.marque {
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--encre);
  white-space: nowrap;
}

.formulaire { display: grid; gap: 1rem; }
.formulaire label { display: grid; gap: .35rem; }
.formulaire label > span { font-size: var(--t-s); color: var(--texte-2); }
.formulaire .actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }

/* --- Entete -------------------------------------------------------------------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0 2rem;
  min-height: 60px;
  background: color-mix(in srgb, var(--fond) 90%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--ligne);
}
.onglets { display: flex; gap: 1.75rem; align-self: stretch; }
.onglet {
  min-height: 0;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--discret);
  padding: 0;
  font-weight: 500;
  box-shadow: inset 0 -2px 0 transparent;
}
.onglet:hover { color: var(--encre); opacity: 1; }
.onglet.actif { color: var(--encre); box-shadow: inset 0 -2px 0 var(--encre); }
.outils { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.reste { font-size: var(--t-s); color: var(--discret); margin-right: .5rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
kbd {
  font: 500 var(--t-xs) var(--sans);
  color: var(--discret);
  border: 1px solid var(--ligne-forte);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0 .3rem;
  margin-left: .5rem;
}

/* --- Mise en page ------------------------------------------------------------ */

.contenu { max-width: 1060px; margin: 0 auto; padding: 2.75rem 2rem 4rem; }
.contenu.etroit { max-width: 760px; }
.contenu.large { max-width: 1320px; }

.tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.tete > div { min-width: 0; }
.tete .explication { margin-top: .45rem; }
.fil-ariane { margin: -1rem 0 1.25rem -.35rem; }

.barre { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.barre > .explication { flex: 1 1 22rem; }

/* Le panneau : UNE surface pour une liste, des lignes separees par un filet. */
.panneau {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-grand);
  overflow: hidden;
}
.panneau > ul, .panneau > ol { list-style: none; margin: 0; padding: 0; }
.panneau > ul > li + li, .panneau > ol > li + li { border-top: 1px solid var(--ligne); }

.groupe + .groupe { margin-top: 2.25rem; }
.titre-groupe { font-family: var(--sans); font-size: var(--t-s); font-weight: 600; color: var(--texte-2); margin: 0 0 .7rem; }
.titre-groupe-ligne { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.titre-groupe-ligne .titre-groupe { margin: 0; }

/* --- Acces (mode discret) ---------------------------------------------------- */

.recherche { margin-bottom: 2rem; }

.liste-clients, .liste-acces { list-style: none; margin: 0; padding: 0; }
.client {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  padding: .9rem 1.25rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--encre);
  text-align: left;
  font-weight: 400;
}
.client:hover { background: var(--survol); opacity: 1; }
.client .nom { font-family: var(--serif); font-size: var(--t-l); font-weight: 450; overflow-wrap: anywhere; }
.client .compte { display: inline-flex; align-items: center; gap: .85rem; color: var(--discret); font-size: var(--t-s); white-space: nowrap; font-variant-numeric: tabular-nums; }
.chevron::after, .client .compte::after {
  content: '';
  display: block;
  width: .42rem; height: .42rem;
  border-right: 1.5px solid var(--ligne-forte);
  border-top: 1.5px solid var(--ligne-forte);
  transform: rotate(45deg);
  transition: border-color var(--duree) ease, transform var(--duree) ease;
}
.client:hover .compte::after { border-color: var(--encre); transform: translateX(2px) rotate(45deg); }

.acces {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  flex-wrap: wrap;
  padding: .9rem 1.25rem;
}
.acces-nom { display: grid; gap: .05rem; min-width: 0; }
.intitule { font-weight: 500; overflow-wrap: anywhere; }
.boutons { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.legende { color: var(--discret); font-size: var(--t-s); margin-right: .2rem; }
.copie.fait { border-color: var(--ok); color: var(--ok); }
.copie.fait::after { content: ' \2713'; }

/* Etat vide : une phrase qui dit quoi faire, pas un decor. */
.vide { color: var(--discret); padding: .5rem 0; }
.accueil-vide { padding: 2.25rem 2rem; text-align: center; }
.accueil-vide .titre { font-family: var(--serif); font-size: var(--t-l); color: var(--encre); margin-bottom: .45rem; }
.accueil-vide p { max-width: 48ch; margin-left: auto; margin-right: auto; color: var(--texte-2); }
.accueil-vide button { margin-top: 1.25rem; }

/* --- Tableau de bord ---------------------------------------------------------- */

.resume { margin-bottom: 2rem; }
.resume h1 { font-size: var(--t-3xl); font-weight: 450; letter-spacing: -.02em; }
.resume .explication { margin-top: .5rem; }

/* Une alerte : un filet de couleur, le texte reste en encre — impossible a
   rater, sans crier. */
.alerte-bloc {
  display: grid;
  gap: .75rem;
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--ko-fond);
  border: 1px solid color-mix(in srgb, var(--ko) 25%, transparent);
  border-left: 3px solid var(--ko);
  border-radius: var(--r);
}
.alerte-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.alerte-ligne > p { flex: 1 1 24rem; min-width: 0; }
.sortie {
  flex-basis: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-petit);
  padding: .6rem .8rem;
  margin: .25rem 0 0;
  font: var(--t-xs)/1.6 var(--mono);
  color: var(--texte-2);
}

/* Le point d'etat : la seule couleur d'une ligne. */
.point { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok); flex: none; }
.point.attention { background: var(--attention); }
.point.ko { background: var(--ko); box-shadow: 0 0 0 3px var(--ko-fond); }
.point.neutre { background: var(--ligne-forte); }

.applis { list-style: none; margin: 0; padding: 0; }
.appli {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, .95fr) .75rem;
  align-items: start;
  gap: 1.5rem;
  padding: 1.05rem 1.25rem;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--encre);
  text-align: left;
  font-weight: 400;
  line-height: 1.45;
}
.appli:hover { background: var(--survol); opacity: 1; }
.appli:hover .chevron::after { border-color: var(--encre); transform: translateX(2px) rotate(45deg); }
.appli .ident { display: grid; gap: .15rem; min-width: 0; }
.appli .nom { display: flex; align-items: center; gap: .65rem; font-family: var(--serif); font-size: var(--t-l); font-weight: 500; line-height: 1.25; }
.appli .nom > span:last-child { overflow-wrap: anywhere; }
.appli .client-de { color: var(--discret); font-size: var(--t-s); padding-left: 1.15rem; overflow-wrap: anywhere; }
.appli .etats, .appli .meta { display: grid; gap: .1rem; font-size: var(--t-s); padding-top: .2rem; min-width: 0; }
.appli .meta { color: var(--texte-2); }
.appli .phrase { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chevron { display: flex; justify-content: flex-end; padding-top: .55rem; }

.ton-ok { color: var(--texte-2); }
.ton-attention { color: var(--attention); font-weight: 500; }
.ton-ko { color: var(--ko); font-weight: 500; }

.pied { margin-top: 1rem; font-size: var(--t-s); color: var(--discret); }

/* --- Fiche d'une application ------------------------------------------------- */

.etat-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.etat-ligne .discret::before { content: ''; display: inline-block; width: 1px; height: .9em; background: var(--ligne-forte); margin-right: .6rem; vertical-align: -.1em; }

.sous-onglets {
  display: flex;
  gap: 1.6rem;
  margin: 0 0 1.75rem;
  border-bottom: 1px solid var(--ligne);
  overflow-x: auto;
  scrollbar-width: none;
}
.sous-onglets::-webkit-scrollbar { display: none; }
.sous-onglets .onglet { padding: .75rem 0; white-space: nowrap; flex: none; }
.fiche-corps { display: grid; gap: 1.25rem; min-width: 0; }
.fiche-corps > .barre { margin-bottom: 0; }
.description { font-family: var(--serif); font-size: var(--t-l); color: var(--texte-2); max-width: 60ch; }

.bloc {
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-grand);
  padding: 1.25rem 1.4rem;
  min-width: 0;
}
.sous-titre { font-family: var(--serif); font-size: var(--t-l); font-weight: 500; margin: 0 0 .85rem; }
.bloc h3 { margin: 1.25rem 0 .4rem; }
.bloc > button { margin-top: 1rem; }
.bloc > .explication { margin: -.4rem 0 .75rem; font-size: var(--t-s); }

/* Paires libelle / valeur (« En bref »). */
.paires { display: grid; grid-template-columns: minmax(10rem, max-content) 1fr; gap: .8rem 2rem; margin: 0; }
.paires dt { color: var(--discret); }
.paires dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.actions-gauche { display: flex; gap: .5rem; flex-wrap: wrap; }
.liste-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.texte-long { white-space: pre-wrap; overflow-wrap: anywhere; }
.defile { overflow-x: auto; }
.nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.total { font-family: var(--serif); font-size: var(--t-xl); font-variant-numeric: tabular-nums; }

/* Pastille : une etiquette sobre ; la couleur seulement quand elle dit quelque chose. */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--t-xs);
  font-weight: 500;
  line-height: 1.4;
  padding: .15rem .5rem;
  border-radius: var(--r-petit);
  background: var(--survol);
  color: var(--texte-2);
  white-space: nowrap;
}
.pastille.ok { background: var(--ok-fond); color: var(--ok); }
.pastille.ko { background: var(--ko-fond); color: var(--ko); }
.pastille.attention { background: var(--attention-fond); color: var(--attention); }
.pastille.neutre { background: var(--survol); color: var(--texte-2); }
.indicateurs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: 0; list-style: none; }

.etiquette { display: inline-block; margin: 0 .3rem .2rem 0; padding: 0 .4rem; border-radius: var(--r-petit); background: var(--survol); }
.ligne-alerte td { background: var(--attention-fond); }

/* Tableaux */
.historique { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.historique th, .historique td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.historique th { color: var(--discret); font-weight: 500; }
.historique tr:last-child td { border-bottom: none; }
.bloc .historique th:first-child, .bloc .historique td:first-child { padding-left: 0; }

/* Versions : un journal de bord, jour par jour. */
.journal-de-bord .journee:first-child { margin-top: 0; }
.versions { list-style: none; margin: 0; padding: 0; }
.version { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 1.25rem; }
.version .numero { font-family: var(--serif); color: var(--discret); font-variant-numeric: tabular-nums; padding-top: .05rem; }
.version-corps { display: grid; gap: .3rem; min-width: 0; }
.version .phrase { font-size: var(--t-m); }
.version .changements { margin: .35rem 0; font-size: var(--t-s); }
.version .changements ul { margin: .35rem 0 0 1rem; padding: 0; }
.version .changements li { margin: .15rem 0; }
.version .note-client { font-family: var(--serif); font-size: var(--t-l); line-height: 1.4; }
.version .note-client + .phrase { font-size: var(--t-s); }
.version.documentaire .phrase { color: var(--discret); }
.version-pied { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; font-size: var(--t-s); }

.balle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-grand);
  padding: .9rem 1.4rem;
}

/* Markdown des fiches et des reponses de l'agent */
.markdown { overflow-wrap: anywhere; max-width: 72ch; }
.markdown h3, .markdown h4, .markdown h5, .markdown h6 { margin: 1.1rem 0 .35rem; font-size: var(--t-m); font-weight: 600; }
.markdown h3 { font-family: var(--serif); font-size: var(--t-l); font-weight: 500; }
.markdown > :first-child { margin-top: 0; }
.markdown p { margin: .45rem 0; }
.markdown pre { white-space: pre-wrap; background: var(--fond); border-radius: var(--r-petit); padding: .6rem .8rem; font: var(--t-xs)/1.6 var(--mono); }
.markdown blockquote { margin: .5rem 0; padding-left: .75rem; border-left: 2px solid var(--ligne-forte); color: var(--texte-2); }
.markdown ul, .markdown ol { padding-left: 1.3rem; margin: .4rem 0; }
.markdown li { margin: .2rem 0; }

/* Demo, mails */
.client-demo { border-top: 1px solid var(--ligne); padding-top: .75rem; margin-top: .75rem; }
.client-demo:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.client-demo ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.compte-rendu { display: grid; gap: .2rem; }
.mail { padding: .9rem 0; border-top: 1px solid var(--ligne); display: grid; gap: .5rem; }
.mail:first-child { border-top: none; padding-top: 0; }
.mail:last-child { padding-bottom: 0; }
.mail-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; }
button.titre-lien { color: var(--encre); font-weight: 600; text-decoration: none; text-align: left; }
.liste-acces.dans-bloc .acces { padding: .75rem 0; }
.liste-acces.dans-bloc li + li { border-top: 1px solid var(--ligne); }

/* Journal */
.filtres { gap: .75rem 1.25rem; justify-content: flex-start; }
.journal { list-style: none; margin: 0; padding: 0; }
.journal li {
  display: grid;
  grid-template-columns: 8rem 5rem minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: baseline;
  padding: .7rem 1.25rem;
  font-size: var(--t-s);
}
.journal li + li { border-top: 1px solid var(--ligne); }
.journal .phrase { overflow-wrap: anywhere; color: var(--encre); }

/* --- Atelier : la liste des demandes, la conversation, la saisie ----------------- */

.atelier { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.demandes { position: sticky; top: 76px; min-width: 0; }
.tickets li + li { border-top: 1px solid var(--ligne); }
.ticket-ligne {
  width: 100%; display: grid; gap: .25rem; padding: .7rem .9rem; border: none; border-radius: 0;
  background: transparent; color: var(--encre); text-align: left; font-weight: 400;
}
.ticket-ligne:hover { background: var(--survol); opacity: 1; }
.ticket-ligne.choisi { background: var(--survol); box-shadow: inset 2px 0 0 var(--encre); }
.ticket-titre { font-size: var(--t-s); font-weight: 500; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ticket-titre .ref { font-variant-numeric: tabular-nums; color: var(--texte-2); font-weight: 600; }
.ticket-etat { display: flex; align-items: center; gap: .45rem; font-size: var(--t-xs); color: var(--discret); }

.conversation {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-grand); overflow: hidden;
}
.tete-conversation { display: grid; gap: .7rem; padding: 1.3rem 1.5rem 1.1rem; border-bottom: 1px solid var(--ligne); }
.tete-ligne { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; }
.reference { display: flex; align-items: center; gap: .75rem; }
/* L'identifiant (HER-012) : ce qu'on recopie pour Claude, le seul element en grand. */
.ref-grand { font-family: var(--serif); font-size: var(--t-3xl); font-weight: 500; letter-spacing: .01em; line-height: 1; font-variant-numeric: tabular-nums; }
.titre-conversation { font-size: var(--t-xl); overflow-wrap: anywhere; }
.actions-ticket { gap: .5rem .9rem; }
.meta-conversation { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }

/* Le fil d'etapes : ou en est la demande, d'un coup d'oeil. */
.etapes { list-style: none; margin: .1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 0; font-size: var(--t-xs); }
.etapes li { display: flex; align-items: center; color: var(--discret); }
.etapes li + li::before { content: ''; width: 1.4rem; height: 1px; background: var(--ligne-forte); margin: 0 .5rem; }
.etapes li.fait { color: var(--texte-2); }
.etapes li.fait + li::before, .etapes li.actuel::before { background: var(--encre); }
.etapes li.actuel { color: var(--encre); font-weight: 600; }
.etapes li.actuel::after { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--encre); margin-left: .4rem; }
.etapes li.abandon { color: var(--ko); }

.fil-chat {
  list-style: none; margin: 0; padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 1rem;
  min-height: 260px; max-height: min(64vh, 720px); overflow-y: auto;
  background: color-mix(in srgb, var(--fond) 55%, var(--surface));
}
.bulle { max-width: min(78%, 600px); padding: .7rem .95rem .8rem; border-radius: 14px; display: grid; gap: .25rem; overflow-wrap: anywhere; }
.bulle .auteur, .rapport .auteur { font-size: var(--t-xs); color: var(--discret); }
.bulle.moi { align-self: flex-end; background: var(--bulle-moi); color: var(--bulle-moi-texte); border-bottom-right-radius: 4px; }
.bulle.moi .auteur { color: color-mix(in srgb, var(--bulle-moi-texte) 62%, transparent); }
.bulle.moi .lien { color: var(--bulle-moi-texte); text-decoration-color: color-mix(in srgb, var(--bulle-moi-texte) 45%, transparent); }
.bulle.moi.piece { background: var(--surface); color: var(--encre); border: 1px dashed var(--ligne-forte); }
.bulle.moi.piece .auteur { color: var(--discret); }
.bulle.moi.piece .lien { color: var(--texte-2); }
.bulle.agent { align-self: flex-start; background: var(--surface); border: 1px solid var(--ligne); border-bottom-left-radius: 4px; }

/* Le rapport de l'agent : une carte, une section repliable par rubrique. */
.rapport { align-self: stretch; max-width: 760px; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r); padding: .9rem 1.1rem; display: grid; gap: .35rem; }
.rapport > .markdown { margin-bottom: .2rem; }
.rapport details { border-top: 1px solid var(--ligne); }
.rapport summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .55rem; padding: .55rem 0; font-weight: 600; font-size: var(--t-s); }
.rapport summary::-webkit-details-marker { display: none; }
.rapport summary::before { content: ''; width: .38rem; height: .38rem; border-right: 1.5px solid var(--discret); border-bottom: 1.5px solid var(--discret); transform: rotate(-45deg); transition: transform var(--duree) ease; }
.rapport details[open] > summary::before { transform: rotate(45deg); }
.rapport details > .markdown { padding: 0 0 .7rem 1rem; }

.evenement { align-self: center; font-size: var(--t-xs); color: var(--discret); text-align: center; max-width: 90%; }
.evenement.alerte { color: var(--ko); }
.attente { display: flex; align-items: center; gap: .6rem; color: var(--texte-2); font-size: var(--t-s); }
.points { display: inline-flex; gap: 3px; }
.points span { width: 5px; height: 5px; border-radius: 50%; background: var(--discret); animation: respirer 1.2s infinite ease-in-out; }
.points span:nth-child(2) { animation-delay: .15s; }
.points span:nth-child(3) { animation-delay: .3s; }
@keyframes respirer { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* La saisie, en bas : contexte replie, type, texte, envoi. */
.composer { display: grid; gap: .7rem; padding: 1rem 1.5rem 1.2rem; border-top: 1px solid var(--ligne); }
.composer[hidden] { display: none; }
.composer textarea { min-height: 3.2rem; }
.contexte-resume { font-size: var(--t-s); color: var(--texte-2); }
.contexte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; background: var(--fond); border-radius: var(--r); }
.contexte[hidden] { display: none; }
.colonne-contexte { display: grid; gap: .5rem; align-content: start; min-width: 0; }
.colonne-contexte h3 { margin: 0; font-size: var(--t-s); }
.colonne-contexte.zone-retours { border-left: 1px dashed var(--ligne-forte); padding-left: 1rem; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; padding: .4rem 0; align-items: start; }
.note > input { margin-top: .2rem; }
.note-corps { display: grid; gap: .05rem; min-width: 0; font-size: var(--t-s); }
.titre-note-texte { font-weight: 500; overflow-wrap: anywhere; }
.genres { display: flex; flex-wrap: wrap; gap: .4rem; }
.genres legend { font-size: var(--t-s); color: var(--texte-2); margin-bottom: .4rem; }
.genre-choix { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .75rem; border: 1px solid var(--ligne-forte); border-radius: 999px; cursor: pointer; font-size: var(--t-s); }
.genre-choix:hover { background: var(--survol); }
.genre-choix:has(input:checked) { border-color: var(--encre); background: var(--survol); font-weight: 500; }
.genre-choix input { width: .9rem; height: .9rem; }
.composer-pied { display: flex; align-items: center; gap: .5rem .9rem; flex-wrap: wrap; }
.composer-pied .astuce { margin-left: auto; }
.nouvelle-demande { display: grid; gap: 1.1rem; padding: 1.4rem; }

/* --- Fiche : sommaire et sections -------------------------------------------------- */

.fiche-sections { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 2rem; align-items: start; }
.sommaire { position: sticky; top: 76px; display: grid; gap: .1rem; }
.sommaire button { justify-content: flex-start; text-align: left; }
.sections { display: grid; gap: 2.5rem; min-width: 0; }
.section-fiche { scroll-margin-top: 80px; min-width: 0; }
.titre-section { font-size: var(--t-xl); margin-bottom: 1rem; }
.section-corps { display: grid; gap: 1rem; min-width: 0; }
.section-corps > .barre { margin-bottom: 0; }

/* --- Retours clients ------------------------------------------------------------------ */

.retours { list-style: none; margin: 0; padding: 0; }
.retours li + li { border-top: 1px solid var(--ligne); }
.retour-tete {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .3rem .9rem;
  padding: .85rem 1.25rem; border: none; border-radius: 0; background: transparent; color: var(--encre); text-align: left; font-weight: 400;
}
.retour-tete:hover { background: var(--survol); opacity: 1; }
.retour-titre { font-weight: 500; overflow-wrap: anywhere; }
.retour .note-detail { padding: 0 1.25rem 1rem; }
.note-detail { display: grid; gap: .6rem; font-size: var(--t-s); }
.note-detail[hidden] { display: none; }
.note-detail .texte-long { max-height: 18rem; overflow-y: auto; padding: .6rem .75rem; background: var(--fond); border-radius: var(--r-petit); }
.lien-doc { font-weight: 500; }

.piece-image { display: block; max-width: min(100%, 420px); border: 1px solid var(--ligne); border-radius: var(--r-petit); }

/* Alertes et historique */
.alerte-en-cours { display: flex; gap: .75rem; align-items: baseline; padding: .85rem 1.25rem; }
.journee { margin: 2rem 0 .65rem; font-family: var(--serif); font-size: var(--t-l); font-weight: 500; }
.tete + .journee { margin-top: 0; }
.action {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) minmax(0, auto);
  gap: 1rem;
  align-items: baseline;
  padding: .7rem 1.25rem;
  font-size: var(--t-s);
}
.action .heure { color: var(--discret); font-variant-numeric: tabular-nums; }
.action .cible { color: var(--discret); text-align: right; overflow-wrap: anywhere; }
.action .quoi { overflow-wrap: anywhere; }

/* --- Fenetre et message ------------------------------------------------------- */

.fenetre {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--voile);
  display: grid;
  place-items: center;
  padding: 1rem;
  animation: apparaitre var(--duree) ease-out;
}
.fenetre[hidden] { display: none; }
.fenetre-boite {
  width: min(440px, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-grand);
  padding: 1.75rem;
  box-shadow: var(--ombre-fenetre);
  animation: monter 180ms cubic-bezier(.2, .8, .2, 1);
}
.fenetre-boite.large { width: min(640px, 100%); }
.fenetre-boite h2 { margin-bottom: .1rem; }
.fenetre-boite .explication { margin-top: -.5rem; }

.message {
  position: fixed;
  z-index: 30;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.1rem;
  border-radius: var(--r);
  background: var(--plein);
  color: var(--plein-texte);
  font-size: var(--t-s);
  font-weight: 500;
  box-shadow: var(--ombre-fenetre);
  max-width: calc(100% - 2rem);
  animation: apparaitre 160ms ease-out;
}
.message::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--discret); flex: none; }
.message-succes::before { background: var(--ok); }
.message-alerte::before { background: var(--ko); }
.message[hidden] { display: none; }

@keyframes apparaitre { from { opacity: 0; } }
@keyframes monter { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Ecrans moyens : la colonne des notes passe sous la conversation ---------- */

@media (max-width: 1080px) {
  .atelier { grid-template-columns: minmax(0, 1fr); }
  .demandes { position: static; }
  .fiche-sections { grid-template-columns: minmax(0, 1fr); }
  .sommaire { position: static; display: flex; flex-wrap: wrap; gap: .25rem; }
  .appli { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr) .75rem; }
  .appli .meta:not(.evolution) { grid-column: 3; }
}

/* --- Telephone ------------------------------------------------------------------ */

@media (max-width: 760px) {
  .entete { flex-wrap: wrap; gap: 0 1rem; padding: .55rem 1rem 0; }
  .entete .marque { font-size: var(--t-l); }
  .entete .onglets { order: 3; flex-basis: 100%; gap: 1.4rem; overflow-x: auto; scrollbar-width: none; }
  .entete .onglets::-webkit-scrollbar { display: none; }
  .entete .onglet { padding: .6rem 0; flex: none; }
  .entete:not(:has(.onglets)) { padding-bottom: .55rem; }
  .outils { gap: .25rem; }
  .outils button { min-height: 36px; padding: .4rem .65rem; font-size: var(--t-s); }
  .reste, kbd { display: none; }

  .contenu { padding: 1.75rem 1rem 3rem; }
  h1 { font-size: var(--t-xl); }
  .resume h1 { font-size: var(--t-2xl); }
  .tete { align-items: flex-start; }
  .tete > .actions-gauche { width: 100%; }

  .client { padding: .85rem 1rem; min-height: 56px; }
  .acces { padding: .9rem 1rem; flex-direction: column; align-items: stretch; }

  .appli {
    grid-template-columns: minmax(0, 1fr) .75rem;
    gap: .3rem 1rem;
    padding: 1rem;
  }
  .appli .ident { grid-column: 1; }
  .appli .chevron { grid-column: 2; grid-row: 1; }
  .appli .etats, .appli .meta, .appli .meta:not(.evolution) { grid-column: 1; padding-left: 1.15rem; padding-top: 0; }
  .appli .etats { padding-top: .2rem; }

  .bloc { padding: 1rem; border-radius: var(--r); }
  .paires { grid-template-columns: 1fr; gap: .1rem; }
  .paires dd { margin-bottom: .7rem; }
  .journal li { grid-template-columns: 1fr auto; gap: .2rem .75rem; padding: .75rem 1rem; }
  .journal li .phrase { grid-column: 1 / -1; }
  .journal li > .actions-ligne { grid-column: 1 / -1; justify-content: flex-start; }
  .version { grid-template-columns: 1fr; gap: .2rem; padding: .9rem 1rem; }
  .action { grid-template-columns: 3rem minmax(0, 1fr); gap: .1rem .75rem; padding: .7rem 1rem; }
  .action .cible { grid-column: 2; text-align: left; }
  .alerte-en-cours { padding: .8rem 1rem; }
  .balle { flex-direction: column; align-items: stretch; padding: 1rem; }

  .tete-conversation, .composer { padding: 1rem; }
  .fil-chat { padding: 1rem; max-height: 70vh; min-height: 200px; }
  .bulle { max-width: 90%; }
  .contexte { grid-template-columns: minmax(0, 1fr); }
  .colonne-contexte.zone-retours { border-left: none; padding-left: 0; border-top: 1px dashed var(--ligne-forte); padding-top: .8rem; }
  .composer-pied .astuce { flex-basis: 100%; margin-left: 0; order: 5; }
  .composer-pied > button[type=submit] { margin-left: auto; }
  .retour-tete { grid-template-columns: auto minmax(0, 1fr); padding: .8rem 1rem; }
  .retour-tete > .discret { grid-column: 2; }
  .retour .note-detail { padding: 0 1rem 1rem; }

  .fenetre { align-items: end; padding: .5rem; }
  .fenetre-boite { padding: 1.25rem; }
}

@media (max-width: 760px) { .ref-grand { font-size: var(--t-2xl); } }
.etat-court { display: inline-flex; align-items: center; gap: .55rem; }
@media (max-width: 760px) {
  .etat-ligne { display: grid; gap: .2rem; }
  .etat-ligne .discret::before { display: none; }
}
/* Sur telephone, une ligne d'application ne dit que ce qui compte : le neutre se tait. */
@media (max-width: 760px) {
  .appli .rien-a-signaler { display: none; }
  .appli .etats:not(:has(> :not(.rien-a-signaler))), .appli .meta:not(:has(> :not(.rien-a-signaler))) { display: none; }
}

/* --- Acces de test (en clair) et confidentiels ------------------------------- */

.formulaire label.case-ligne { display: flex; align-items: flex-start; gap: .65rem; padding: .75rem .85rem; border: 1px solid var(--ligne); border-radius: var(--r); cursor: pointer; }
.case-ligne > span { display: grid; gap: .15rem; }
.case-ligne input { margin-top: .2rem; }
.formulaire label[hidden] { display: none; }

.intitule .confidentiel { margin-left: .55rem; vertical-align: .1em; }
.acces.test { display: grid; gap: .6rem; justify-content: stretch; align-items: stretch; }
.acces-tete { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; }
.champs-acces { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .35rem 1rem; margin: 0; align-items: center; }
.champs-acces dt { color: var(--discret); font-size: var(--t-s); }
.champs-acces dd { margin: 0; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; min-width: 0; }
.valeur { font: .9rem/1.5 var(--mono); background: var(--fond); border-radius: var(--r-petit); padding: .2rem .5rem; overflow-wrap: anywhere; min-width: 0; }
.valeur.masquee { letter-spacing: .12em; color: var(--discret); }
.note-acces { color: var(--texte-2); font-size: var(--t-s); }
a.bouton-lien {
  display: inline-flex; align-items: center; min-height: 32px; padding: .35rem .8rem; border-radius: var(--r);
  border: 1px solid var(--ligne-forte); background: transparent; color: var(--encre); font-size: var(--t-s); font-weight: 500; text-decoration: none;
  transition: background-color var(--duree) ease;
}
a.bouton-lien::after { content: ''; width: .38rem; height: .38rem; margin-left: .5rem; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
a.bouton-lien:hover { background: var(--survol); }
@media (max-width: 760px) {
  .champs-acces { grid-template-columns: 1fr; gap: .15rem; }
  .champs-acces dd { margin-bottom: .4rem; }
}

/* Résumé visible de chaque projet, avant ses onglets. */
.apercu { padding: 1rem; margin-block: 1rem; }
.apercu .paires { margin-block: .7rem; }
.resume-fiche { max-width: 75ch; }
.section-corps details > summary { cursor: pointer; padding-block: .5rem; }
.applis > li > .secondaire { margin: 0 1rem .75rem; }

/* Activité : gros titres et fil du projet. */
.activite-titres, .fil-projet { display: grid; gap: .45rem; margin: .5rem 0; padding-left: 0; list-style: none; }
.activite-titres li, .fil-projet li { overflow-wrap: anywhere; min-width: 0; }
.activite-titres time, .fil-projet time { color: var(--discret); font-size: var(--t-s); }

/* Projets et clients (point 6). */
.actions-projet { display: flex; flex-wrap: wrap; gap: .5rem; }
.groupe-client .titre-groupe-ligne .lien { font-size: var(--t-s); }

/* Inventaire lu dans le code (point 8). */
.inventaire { display: grid; gap: .6rem; margin: .6rem 0; padding: 0; list-style: none; }
.inventaire > li { padding: .8rem 1rem; display: grid; gap: .4rem; }
.inventaire p { margin: 0; }
.variables { display: flex; flex-wrap: wrap; gap: .3rem; }
.si-ca-tombe { font-size: var(--t-s); }

/* Coûts réels (point 9). */
.couts tfoot th { border-top: 1px solid var(--ligne-forte); }
.couts td .pastille { margin-left: .5rem; }
.note-couts { padding: .8rem 1rem; margin-block: 1rem; }
.note-couts ul { margin: .3rem 0 0; }
.filtres-couts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-start; }
.filtres-couts select, .filtres-couts input { width: auto; flex: 0 0 auto; }

/* Journal utile (refonte-3). */
.journal .actions-ligne { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: flex-end; }
.regles-journal { margin-top: 1rem; font-size: var(--t-s); }
.regles-journal li { margin: .3rem 0; overflow-wrap: anywhere; }
.regles-journal code { font-size: var(--t-xs); color: var(--discret); }

/* Echanges (refonte-3, section 2). */
.liens-client { display: flex; gap: 1rem; }
.liste-echanges { list-style: none; margin: 0; padding: 0; }
.liste-echanges li + li { border-top: 1px solid var(--ligne); }
.echange-ligne { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.4fr) auto; gap: .5rem 1rem; align-items: center;
  width: 100%; padding: .85rem 1.1rem; background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.echange-ligne:hover { background: var(--survol); }
.echange-titre { font-weight: 600; overflow-wrap: anywhere; }
.nouvel-echange fieldset { border: 1px solid var(--ligne); border-radius: var(--r); padding: .9rem 1rem; margin: 0 0 1rem; display: grid; gap: .6rem; }
.nouvel-echange legend { font-weight: 600; padding: 0 .3rem; }
.choix-projets .cases, .cases { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.element-saisi { background: var(--fond); }
.fichiers-saisis { margin: .3rem 0 0; padding-left: 1.1rem; }
.chronologie { list-style: none; margin: .5rem 0 1rem; padding: 0; border-left: 2px solid var(--ligne); }
.chronologie .element { margin: 0 0 .9rem; padding: .2rem 0 .2rem 1rem; position: relative; }
.chronologie .element::before { content: ''; position: absolute; left: -6px; top: .75rem; width: 10px; height: 10px; border-radius: 50%; background: var(--ligne-forte); }
.element-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; font-size: var(--t-s); }
.element-titre { font-weight: 600; margin: .3rem 0; }
.element-evenement { opacity: .8; }
.ajout-echange { padding: .9rem 1rem; display: grid; gap: .6rem; }
@media (max-width: 760px) { .echange-ligne { grid-template-columns: 1fr; } }

/* Delais et couleurs (refonte-3, section 3) : palette nommee, claire et sombre. */
:root { --d-vert: #2c7a4b; --d-vert-f: #e7f2ea; --d-jaune: #7a6400; --d-jaune-f: #fbf5d6; --d-orange: #a14f00; --d-orange-f: #fdebd9;
  --d-rouge: #b3261e; --d-rouge-f: #fbeceb; --d-bleu: #1f5fa8; --d-bleu-f: #e5eefa; --d-violet: #6a3fa0; --d-violet-f: #efe7f8; --d-gris: #5d6366; --d-gris-f: #eceeef; }
@media (prefers-color-scheme: dark) {
  :root { --d-vert: #6fc996; --d-vert-f: rgba(111,201,150,.12); --d-jaune: #e6d36a; --d-jaune-f: rgba(230,211,106,.12);
    --d-orange: #f0a35a; --d-orange-f: rgba(240,163,90,.12); --d-rouge: #ff8f86; --d-rouge-f: rgba(255,143,134,.12); --d-bleu: #8bb8f0; --d-bleu-f: rgba(139,184,240,.12);
    --d-violet: #c3a6ea; --d-violet-f: rgba(195,166,234,.12); --d-gris: #b4babd; --d-gris-f: rgba(180,186,189,.12); }
}
.delai { display: inline-flex; align-items: center; padding: .05rem .5rem; border-radius: var(--r-petit); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; vertical-align: .05em; }
.delai-vert { color: var(--d-vert); background: var(--d-vert-f); } .delai-jaune { color: var(--d-jaune); background: var(--d-jaune-f); }
.delai-orange { color: var(--d-orange); background: var(--d-orange-f); } .delai-rouge { color: var(--d-rouge); background: var(--d-rouge-f); }
.delai-bleu { color: var(--d-bleu); background: var(--d-bleu-f); } .delai-violet { color: var(--d-violet); background: var(--d-violet-f); }
.delai-gris { color: var(--d-gris); background: var(--d-gris-f); }
.reglages-partie { padding: .9rem 1rem; margin-bottom: 1rem; display: grid; gap: .6rem; }
.palier { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.palier input[type=number] { width: 6rem; }
.palier input[type=text] { flex: 1 1 12rem; }
.palier select { width: auto; }
.attente { display: inline-flex; gap: .35rem; align-items: center; font-size: var(--t-s); }
.delai-etape { font-size: var(--t-xs); margin: .1rem 0; }
.reglages-partie > button { justify-self: start; }
.palier > .delai { min-width: 6rem; justify-content: center; }

/* Couts : barre proportionnelle (refonte-3, section 4). */
.barre-cout { width: 18%; min-width: 4rem; }
.barre-fond { display: block; height: .45rem; border-radius: 1rem; background: var(--survol); overflow: hidden; }
.barre-remplie { display: block; height: 100%; background: var(--d-bleu); border-radius: 1rem; }

/* Utilisateurs d'un projet (refonte-3, section 5). */
.chiffres-usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; margin: .8rem 0; }
.chiffre { display: grid; gap: .1rem; padding: .6rem .8rem; border-radius: .6rem; background: var(--survol); }
.chiffre strong { font-size: var(--t-l); }
.chiffre span { font-size: var(--t-xs); color: var(--texte-2); }
.chiffre.alerte-texte strong { color: var(--ko); }
.visites { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.visites > li { padding: .5rem 0; border-bottom: 1px solid var(--ligne); display: grid; gap: .2rem; }
.visites > li:last-child { border-bottom: 0; }
.visite-tete { display: flex; flex-wrap: wrap; gap: .25rem; align-items: baseline; }
.gestes { display: flex; flex-wrap: wrap; gap: .3rem; }
.usage-jours td, .usage-jours th { white-space: nowrap; }

/* Tableau de bord (refonte-3, section 6). */
.grille-tableau { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1rem; align-items: start; }
.carte-tableau { padding: 1rem 1.1rem; min-width: 0; }
.carte-tableau .sous-titre { margin-bottom: .5rem; }
.petit-titre { font-size: var(--t-s); font-weight: 600; margin: .8rem 0 .4rem; }
.liste-tableau { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.liste-tableau > li { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.branchements { padding: .8rem 1rem; margin-bottom: 1rem; }
.branchements .petit-titre { margin-top: 0; }

/* Echanges : vues, historique simplifie, etat de Claude (refonte-4). */
.vues-echanges { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 .8rem; border-bottom: 1px solid var(--ligne); }
.etats-echange { display: inline-flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.historique-echanges { padding: .4rem 1rem 1rem; }
.historique-echanges ul { list-style: none; margin: 0; padding: 0; }
.jour-historique { font-size: var(--t-s); font-weight: 600; margin: .9rem 0 .3rem; color: var(--texte-2); }
.ligne-historique { display: grid; grid-template-columns: 3.2rem auto minmax(0, 1fr) minmax(0, 16rem); gap: .3rem .7rem; align-items: baseline;
  width: 100%; text-align: left; background: none; border: 0; padding: .35rem .2rem; border-radius: var(--r-petit); color: inherit; font: inherit; cursor: pointer; }
.ligne-historique:hover { background: var(--survol); }
.ligne-historique time { font-variant-numeric: tabular-nums; color: var(--texte-2); font-size: var(--t-s); }
.resume-historique { min-width: 0; overflow-wrap: anywhere; }
.en-bref td { vertical-align: top; }
@media (max-width: 760px) { .ligne-historique { grid-template-columns: 3.2rem 1fr; } .ligne-historique > :nth-child(n+3) { grid-column: 1 / -1; } }
.rapport-claude { border-left: 3px solid var(--d-violet); padding: .2rem 0 .2rem .9rem; }
.attente-claude { padding: .7rem 1rem; color: var(--d-violet); background: var(--d-violet-f); }
.bandeau-version { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 50; display: flex; gap: .6rem; align-items: center;
  padding: .6rem 1rem; border-radius: var(--r); background: var(--plein); color: var(--plein-texte); box-shadow: var(--ombre-fenetre); max-width: calc(100% - 2rem); }
.attendus > li { border-bottom: 1px solid var(--ligne); padding-bottom: .35rem; }
.documents-projet select { width: auto; max-width: 14rem; }

/* Suivi structure (refonte-4) : ce qui attend, documents, points. */
.grille-attente { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; align-items: start; }
.colonne-attente { padding: .9rem 1rem; min-width: 0; }
.liste-attente { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.carte-attente { display: grid; gap: .2rem; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--r-petit);
  padding: .55rem .7rem; color: inherit; font: inherit; cursor: pointer; }
.carte-attente:hover { background: var(--survol); }
.ligne-attente { display: flex; gap: .4rem; align-items: baseline; min-width: 0; }
.ligne-attente strong { overflow-wrap: anywhere; }
.barre-titre { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: .8rem; }
.barre-titre .explication { flex: 1 1 24rem; margin: 0; }
.manquants { border-left: 4px solid var(--ko); background: var(--ko-fond); padding: .8rem 1rem; margin-bottom: 1rem; }
.manquants ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .6rem; }
.manquants li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: center; border-top: 1px solid var(--ligne); padding-top: .5rem; }
.titre-manquants { font-weight: 700; color: var(--ko); margin: 0; }
.tout-est-la { padding: .6rem 1rem; color: var(--ok); background: var(--ok-fond); }
.groupe-documents + .groupe-documents { margin-top: 1rem; }
.documents-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.documents-liste > li { border-bottom: 1px solid var(--ligne); padding-bottom: .5rem; }
.document-tete { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; }
.description-doc, .memo-doc { margin: .25rem 0 0; font-size: var(--t-s); }
.bruts { margin-top: 1.2rem; }
.points-echange summary { cursor: pointer; margin-bottom: .4rem; }
.bloc-documents { padding: .9rem 1rem; }

/* Conformite au socle */
.conformite { border-collapse: collapse; width: 100%; font-size: var(--t-s); }
.conformite th, .conformite td { border-bottom: 1px solid var(--ligne); padding: .45rem .55rem; text-align: left; vertical-align: top; }
.conformite thead th { position: sticky; top: 0; background: var(--surface, var(--fond)); }
.defilant { overflow-x: auto; }

/* Lot 1 (comptes séparés) : le compte connecté dans l'en-tête, les résumés « un voyant, une phrase ». */
.compte-connecte { display: block; font-size: var(--t-xs); font-weight: 400; color: var(--discret); white-space: nowrap; line-height: 1.1; }
.resume-voyant { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; }
.qr-code { display: block; width: 200px; height: 200px; margin: .5rem auto; background: #fff; padding: .25rem; border-radius: .25rem; }
.nom .pastille { font-family: var(--sans); font-size: var(--t-xs); font-weight: 500; flex: none; }

/* Mon compte et « Mes alertes Telegram » (Réglages) */
.reglages-compte { display: grid; gap: 1rem; margin-top: 2rem; }
.carte-compte { display: grid; gap: .75rem; padding: 1.25rem 1.4rem; }
.carte-compte > * { margin: 0; }
.alertes-corps { display: grid; gap: .85rem; }
.etat-alertes { align-items: flex-start; }
.etat-alertes .point { margin-top: .45rem; }
.champ-ligne { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.champ-ligne > span { color: var(--discret); font-size: var(--t-s); }
.etapes-branchement { margin: 0; padding-left: 1.3rem; display: grid; gap: .6rem; }
.code-telegram-ligne { display: flex; align-items: center; gap: .75rem; margin: .4rem 0 .2rem; }
.code-telegram { font: 600 var(--t-xl) var(--mono); letter-spacing: .25em; padding: .3rem .7rem; border: 1px solid var(--ligne-forte); border-radius: var(--r-petit); }
.a-la-main summary { cursor: pointer; color: var(--discret); font-size: var(--t-s); }
.a-la-main .barre { margin-top: .5rem; }