/* Composants PARTAGÉS par l'interface pilote et l'espace client : la frise des phases,
 * le comparatif des analyses, le texte mis en forme d'un dépôt, le fil en journal
 * d'événements. Les mises en page propres à chaque surface restent dans leur feuille
 * (app/app.css, suivi/suivi.css). Lisent design/jetons.css, aucune couleur en dur. */

/* ---- Frise des phases : le trait se remplit jusqu'à l'étape courante ---- */
.frise {
  --avance: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: var(--e-3) 0 0;
  list-style: none;
}

.frise::before,
.frise::after {
  content: "";
  position: absolute;
  top: calc(var(--e-3) + 5px);
  right: 12.5%;
  left: 12.5%;
  height: 1px;
  background: var(--filet-fort);
}

.frise::after {
  background: var(--texte);
  transform: scaleX(var(--avance));
  transform-origin: left;
  transition: transform var(--duree-3) var(--courbe-sortie);
}

.frise-etape {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
}

.frise-point {
  width: 11px;
  height: 11px;
  background: var(--fond);
  border: 1.5px solid var(--filet-fort);
  border-radius: 50%;
  transition: background-color var(--duree-2) var(--courbe-standard), border-color var(--duree-2) var(--courbe-standard);
}

.frise-mot {
  color: var(--texte-3);
  font-size: var(--t-micro);
  font-weight: 500;
}

.frise-etape[data-etat="fait"] .frise-point { background: var(--texte-2); border-color: var(--texte-2); }
.frise-etape[data-etat="fait"] .frise-mot { color: var(--texte-2); }
.frise-etape[data-etat="courant"] .frise-point {
  background: var(--decision);
  border-color: var(--decision);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--decision) 14%, transparent);
}
.frise-etape[data-etat="courant"] .frise-mot { color: var(--texte); }

.refus-motif {
  overflow-wrap: anywhere;
}

/* Le comparatif : une colonne par IA, les sections alignées ligne à ligne. */
.comparatif {
  --colonnes: 3;
  /* clip, pas hidden : hidden ferait de la boîte un conteneur de défilement et
     l'en-tête des colonnes cesserait de coller en haut de l'écran. */
  overflow: clip;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-panneau);
}

.comparatif[data-colonnes="0"] {
  background: var(--halo-panneau), var(--surface);
}

.comparatif-tete,
.comparatif-cellules {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
}

.comparatif-tete {
  position: sticky;
  z-index: 2;
  top: 0;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  border-bottom: 1px solid var(--filet);
  backdrop-filter: blur(10px);
}

.comparatif-ia {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-4) var(--e-5);
  border-left: 1px solid var(--filet);
}

.comparatif-ia:first-child,
.comparatif-cellule:first-child {
  border-left: 0;
}

.comparatif-ia-nom {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 600;
}

.comparatif-ia-quand {
  color: var(--texte-3);
  font-family: var(--police-mono);
  font-size: var(--t-micro);
}

.comparatif-ligne {
  border-bottom: 1px solid var(--filet);
}

.comparatif-ligne:last-child {
  border-bottom: 0;
}

.comparatif-section {
  padding: var(--e-3) var(--e-5) 0;
  color: var(--texte-2);
  font-size: var(--t-petit);
  font-weight: 600;
}

.comparatif-cellule {
  padding: var(--e-3) var(--e-5) var(--e-5);
  border-left: 1px solid var(--filet);
}

.comparatif-cellule-ia {
  display: none;
}

.comparatif-rien {
  color: var(--texte-3);
  font-size: var(--t-petit);
  font-style: italic;
}

/* Le filet coloré en haut de chaque colonne dit qui parle (pas de bordure latérale). */
.comparatif-ia { box-shadow: inset 0 2px 0 var(--c, transparent); }
.comparatif-ia[data-ia="claude"] { --c: var(--ia-claude); }
.comparatif-ia[data-ia="codex"] { --c: var(--ia-codex); }
.comparatif-ia[data-ia="locale"] { --c: var(--ia-locale); }

/* Texte mis en forme d'un dépôt. */
.texte {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  font-size: 0.9375rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.texte ul,
.texte ol {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  margin: 0;
  padding-left: 1.2em;
}

.texte li::marker {
  color: var(--texte-3);
}

.texte strong {
  font-weight: 600;
}

.texte code {
  padding: 0.05em 0.35em;
  background: var(--surface-3);
  border-radius: 5px;
}

.texte-titre {
  margin-top: 0.4em;
  font-weight: 600;
}

.texte-code {
  margin: 0;
  padding: var(--e-3);
  overflow-x: auto;
  background: var(--fond);
  border: 1px solid var(--filet);
  border-radius: var(--r-petit);
  font-family: var(--police-mono);
  font-size: var(--t-micro);
  white-space: pre;
}

/* ---- Fil : journal d'événements ---- */
.fil {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fil::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 15px;
  width: 1px;
  background: var(--filet);
}

.fil-tour {
  position: relative;
  padding: var(--e-4) 0 var(--e-1) 44px;
}

.fil-entree {
  --c: var(--decision);
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--e-3);
  border-radius: var(--r-carte);
  transition: background-color var(--duree-3) var(--courbe-standard);
}

.fil-entree[data-ia="claude"] { --c: var(--ia-claude); }
.fil-entree[data-ia="codex"] { --c: var(--ia-codex); }
.fil-entree[data-ia="locale"] { --c: var(--ia-locale); }

.fil-noeud {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--c);
  background: color-mix(in oklab, var(--c) 12%, var(--fond));
  border: 1px solid color-mix(in oklab, var(--c) 30%, transparent);
  border-radius: 10px;
}

.fil-noeud .icone {
  width: 16px;
  height: 16px;
}

.fil-carte {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  min-width: 0;
  padding: var(--e-3) var(--e-4) var(--e-4);
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
}

.fil-entree[data-type="arbitrage"] .fil-carte {
  border-color: color-mix(in oklab, var(--decision) 30%, transparent);
}

.fil-entree[data-cible] .fil-carte {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-doux);
}

.fil-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
}

.fil-type {
  color: var(--texte-2);
  font-size: var(--t-petit);
}

.fil-heure {
  margin-left: auto;
  color: var(--texte-3);
  font-family: var(--police-mono);
  font-size: var(--t-micro);
}

.fil-corps[data-replie] {
  max-height: 14rem;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, var(--fond) 60%, transparent);
}

.fil-bascule {
  align-self: flex-start;
}

.fil-vide {
  padding: var(--e-6) 0 var(--e-6) 44px;
}

@media (max-width: 1080px) {
  .comparatif {
    border-radius: var(--r-carte);
  }

  .comparatif-tete {
    display: none;
  }

  .comparatif-cellules {
    grid-template-columns: minmax(0, 1fr);
  }

  .comparatif-cellule {
    border-top: 1px solid var(--filet);
    border-left: 0;
  }

  .comparatif-cellule:first-child {
    border-top: 0;
  }

  .comparatif-cellule-ia {
    display: inline-flex;
    margin-bottom: var(--e-2);
    color: var(--c);
    font-size: var(--t-micro);
    font-weight: 600;
  }

  .comparatif-cellule[data-ia="claude"] { --c: var(--ia-claude); }
  .comparatif-cellule[data-ia="codex"] { --c: var(--ia-codex); }
  .comparatif-cellule[data-ia="locale"] { --c: var(--ia-locale); }
}