/* Espace client — la D.A. de la vitrine (DESIGN.md : Resend sur la mise en page acquire / ebx), en tableau de
 * bord à deux colonnes : le résumé à gauche reste à l'écran, le fil à droite. Composants partagés :
 * design/base.css et composants.css (frise, fil, comparatif). Jetons seulement, aucune couleur en dur. */

html {
  scrollbar-color: var(--filet-fort) var(--fond);
}

body {
  background: var(--fond);
}

/* ---- Barre flottante en pilule, comme la vitrine ---- */
.suivi-barre {
  position: sticky;
  z-index: var(--plan-bandeau);
  top: var(--e-3);
  padding-inline: var(--gouttiere);
}

.suivi-barre-ligne {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  width: min(100%, 1200px);
  min-height: 56px;
  margin-inline: auto;
  padding: 0 var(--e-2) 0 var(--e-5);
  background: color-mix(in oklab, var(--fond) 72%, transparent);
  border: 1px solid var(--filet);
  border-radius: var(--r-pilule);
  box-shadow: var(--ombre-2);
  backdrop-filter: blur(14px) saturate(1.2);
}

.suivi-barre .marque [data-marque="embleme"],
.suivi-barre .marque-embleme {
  flex: none;
}

.suivi-qui {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suivi {
  outline: none;
}

.suivi-page {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
  width: min(100% - 2 * var(--gouttiere), 1200px);
  margin: 0 auto;
  padding: var(--e-7) 0 var(--e-section);
}

/* Démonstration : une légende neutre, comme sur la vitrine (le jaune est réservé à l'attente). */
.suivi-demo {
  --c: var(--texte-3);
  align-items: center;
}

.suivi-retour-site {
  margin-inline-start: auto;
}

/* ---- Deux colonnes : le résumé collant, le fil ---- */
.suivi-projet {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

.suivi-resume {
  position: sticky;
  top: calc(56px + var(--e-3) * 2 + var(--e-4));
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.suivi-retour {
  width: fit-content;
  text-decoration: none;
}

.suivi-retour::before {
  content: "←";
  margin-right: 0.4em;
}

.suivi-projet-titre {
  font-family: var(--police-titre);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: var(--approche-titre);
  text-wrap: balance;
}

/* La frise devient verticale dans le résumé, à l'ordinateur. --avance : 0 par défaut, le script
 * la règle sur l'élément même (style en ligne), qui l'emporte. */
.suivi-frise {
  --avance: 0;
  margin-block: var(--e-2);
}

.suivi-etape {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5);
  background: var(--halo-panneau), var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-panneau);
  box-shadow: var(--ombre-3);
}

.suivi-etape-texte {
  font-family: var(--police-titre);
  font-size: var(--t-2);
  line-height: 1.15;
  letter-spacing: var(--approche-titre);
  text-wrap: balance;
}

/* ---- Le fil ---- */
.suivi-colonne {
  display: flex;
  flex-direction: column;
  gap: var(--e-8);
  min-width: 0;
  container-type: inline-size;
}

/* Le comparatif s'empile dès que la colonne fait moins de 900 px (même mode que composants.css sous
 * 1080 px) : à trois colonnes, il ne tiendrait que 25 caractères par ligne. La page plafonnant à 1200 px,
 * la colonne n'atteint jamais 900 px : le client lit TOUJOURS les analyses empilées, IA par IA. */
@container (max-width: 900px) {
  #suivi-comparatif .comparatif-tete {
    display: none;
  }

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

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

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

  #suivi-comparatif .comparatif-cellule .texte {
    max-width: var(--mesure);
  }

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

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

.suivi-section {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.suivi-section-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}

.suivi-section-titre {
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.suivi-question {
  max-width: 30ch;
  font-family: var(--police-titre);
  font-size: var(--t-2);
  line-height: 1.08;
  letter-spacing: var(--approche-titre);
  text-wrap: balance;
}

.suivi-explication {
  max-width: 64ch;
}

/* Publier à la décision : l'avancement des trois IA, en fragments comme sur la vitrine. */
/* Sans texte à comparer, le comparatif perd son cadre : pas de carte dans la carte. */
#suivi-comparatif[data-colonnes="0"] {
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
}

.suivi-avancement {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.suivi-avancement-compte {
  font-weight: 600;
}

.suivi-avancement-liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.suivi-avancement-ia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4);
  background: var(--halo-panneau), var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-2);
}

/* Une livraison est un geste humain : blanche comme la décision (le vert est à Codex). */
.fil-entree[data-ton="livraison"] {
  --c: var(--decision);
}

/* La décision du tour en cours : la seule carte blanche de la page. */
.suivi-decision {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5);
  color: var(--sur-decision);
  background: var(--decision);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-3);
}

.suivi-decision-tete {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--t-micro);
  font-weight: 600;
}

.suivi-decision .texte,
.suivi-decision .texte * {
  color: var(--sur-decision);
}

/* L'en-tête collant du comparatif s'arrête sous la barre flottante, pas dessous. */
.suivi .comparatif-tete {
  top: calc(56px + 2 * var(--e-3));
}

/* Pas de trait de journal à côté d'un état vide. */
.fil:has(> .suivi-vide)::before,
.suivi-chemin:has(> .suivi-vide)::before {
  display: none;
}

/* Le chemin parcouru : un nœud par tour, blanc quand le tour est tranché. */
.suivi-chemin {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  margin: 0;
  padding: 0 0 0 var(--e-6);
  list-style: none;
}

.suivi-chemin::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 6px;
  width: 1px;
  background: var(--filet-fort);
}

.suivi-pas {
  position: relative;
}

.suivi-pas-noeud {
  position: absolute;
  top: 4px;
  left: calc(-1 * var(--e-6));
  width: 13px;
  height: 13px;
  background: var(--fond);
  border: 2px solid var(--filet-fort);
  border-radius: 50%;
}

.suivi-pas[data-tranche] .suivi-pas-noeud {
  background: var(--decision);
  border-color: var(--decision);
}

.suivi-pas-corps {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.suivi-pas-question {
  font-weight: 500;
}

.suivi-pas-decision {
  color: var(--texte-2);
  font-size: var(--t-petit);
}

.suivi-vide {
  padding: var(--e-4) var(--e-5);
  color: var(--texte-2);
  list-style: none;
}

/* ---- Plusieurs projets ---- */
.suivi-liste-vue {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
  max-width: 760px;
}

.suivi-liste {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.suivi-ligne {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  color: var(--texte);
  text-decoration: none;
}

.noscript {
  padding: var(--e-6);
}

/* ---- Ordinateur : la frise verticale dans le résumé ---- */
@media (min-width: 1021px) {
  .suivi-frise {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-4);
    padding: 0;
  }

  .suivi-frise::before,
  .suivi-frise::after {
    top: 8px;
    right: auto;
    bottom: 8px;
    left: 5px;
    width: 1px;
    height: auto;
  }

  .suivi-frise::after {
    transform: scaleY(var(--avance));
    transform-origin: top;
  }

  .suivi-frise .frise-etape {
    flex-direction: row;
    align-items: center;
    gap: var(--e-3);
  }

  .suivi-frise .frise-mot {
    font-size: var(--t-petit);
  }
}

/* ---- Tablette et téléphone : une colonne, le résumé d'abord ---- */
@media (max-width: 1020px) {
  .suivi-projet {
    grid-template-columns: minmax(0, 1fr);
  }

  .suivi-resume {
    position: static;
  }

  .suivi-colonne {
    gap: var(--e-7);
  }
}

@media (max-width: 600px) {
  /* La pilule reste, mais collée en haut sur un fond : le texte ne défile plus visible au-dessus
     d'elle ni dans ses coins. */
  .suivi-barre {
    top: 0;
    padding-top: var(--e-2);
    padding-bottom: var(--e-2);
    background: linear-gradient(var(--fond) 70%, transparent);
  }

  .suivi-barre-ligne {
    padding-left: var(--e-4);
  }

  /* Avant la décision : trois lignes courtes, pas trois cartes d'un écran. */
  .suivi-avancement-liste {
    gap: 0;
    background: var(--halo-panneau), var(--surface);
    border: 1px solid var(--filet);
    border-radius: var(--r-carte);
  }

  .suivi-avancement-ia {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .suivi-avancement-ia + .suivi-avancement-ia {
    border-top: 1px solid var(--filet);
  }

  .suivi-page {
    padding-top: var(--e-6);
  }

  .suivi-avancement-liste {
    grid-template-columns: minmax(0, 1fr);
  }

  .suivi-barre .bouton--carre {
    min-width: 44px;
    min-height: 44px;
  }

  .suivi-retour-site {
    min-height: 44px;
  }

  .suivi-demo {
    flex-wrap: wrap;
  }

  /* Le texte reste à côté de l'icône ; seul le bouton passe à la ligne. */
  .suivi-demo > span {
    flex: 1 1 14rem;
    min-width: 0;
  }
}

/* ---- Le client valide chaque décision (sql/021) ----
   La réponse vit sous la décision, sans couleur (c'est un geste humain, comme la décision) ;
   « Je valide » est l'action principale, « J'ai une remarque » ouvre une zone de texte. */
.suivi-valider {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--filet);
}

.suivi-valider-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.suivi-valider-etat {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin: 0;
  font-size: var(--t-petit);
  font-weight: 600;
}

.suivi-valider-etat .icone {
  width: 16px;
  height: 16px;
}

.suivi-valider-etat time {
  font-weight: 400;
}

.suivi-valider-remarque {
  margin: 0;
  padding-left: var(--e-3);
  border-left: 2px solid var(--filet-fort);
}

.suivi-valider-form {
  --espace: var(--e-2);
}

.suivi-valider-form .saisie {
  width: 100%;
}

.suivi-valider-changer {
  align-self: flex-start;
}

/* Dans le bloc de la décision du tour (fond de décision) : mêmes signes, contraste du bloc. */
.suivi-decision-validation {
  padding-top: var(--e-3);
  border-top: 1px solid color-mix(in oklab, var(--sur-decision) 18%, transparent);
}

.suivi-decision-validation .suivi-valider-etat,
.suivi-decision-validation .suivi-valider-etat time {
  color: var(--sur-decision);
}

.suivi-decision-validation .bouton {
  color: var(--sur-decision);
  background: transparent;
  border-color: color-mix(in oklab, var(--sur-decision) 40%, transparent);
}

/* ---- Votre choix (après une remarque) : en tête de colonne, tant que le client n'a pas choisi ---- */
.suivi-choix-carte {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-5);
  background: var(--halo-panneau), var(--surface);
  border: 1px solid var(--texte);
  border-radius: var(--r-carte);
  box-shadow: var(--ombre-3);
}

.suivi-choix-carte .suivi-valider {
  margin-top: 0;
}