/* ---------------------------------------------------------------------------
   Moteur de recherche — feuille de style.

   Parti pris : les titres sont en chasse fixe. Ce n'est pas un tic technique,
   c'est la thèse du projet — la procédure est un fichier texte lisible, et la
   typographie le dit avant le premier paragraphe. Le corps, lui, reste en
   linéale système : un brief se lit, il ne se déchiffre pas.

   Palette : encre marine (le fond), ocre (l'accent unique, réservé à l'étape
   en cours et aux citations), et deux teintes sémantiques employées deux fois
   chacune — le rouge pour ce qui bloque, le vert pour ce qui est livrable.
--------------------------------------------------------------------------- */

:root {
  --encre:        #131a26;
  --panneau:      #1a2333;
  --panneau-haut: #212c3f;
  --trait:        #2c3850;
  --texte:        #e7eaf0;
  --texte-doux:   #8b99b0;
  --ocre:         #d9a441;
  --ocre-sourd:   #8a6a2c;
  --rouge:        #e0554a;
  --vert:         #6fbf8b;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r: 3px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--encre);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

code, pre { font-family: var(--mono); }

/* --- barre ---------------------------------------------------------------- */

.barre {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: flex-end; justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--trait);
  background: var(--panneau);
}

.marque-nom {
  display: block;
  font-family: var(--mono);
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.02em;
}

.marque-note {
  display: block;
  font-family: var(--mono);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--ocre-sourd);
}

.barre-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }

.champ { display: flex; flex-direction: column; gap: 4px; }

.champ-label {
  font-family: var(--mono);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--texte-doux);
}

select, .bouton {
  font-family: var(--mono); font-size: 12px;
  color: var(--texte);
  background: var(--panneau-haut);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  padding: 7px 11px;
}

select { max-width: 46ch; }

.bouton { cursor: pointer; }
.bouton:hover { border-color: var(--ocre); color: var(--ocre); }
.bouton[disabled] { opacity: 0.45; cursor: default; }
.bouton[disabled]:hover { border-color: var(--trait); color: var(--texte); }

.bouton-secondaire { padding: 5px 9px; font-size: 11px; }

.bouton-accent { border-color: var(--ocre-sourd); color: var(--ocre); }
.bouton-accent:hover { background: var(--ocre); color: var(--encre); border-color: var(--ocre); }

/* --- formulaire de lancement ---------------------------------------------- */

#dialogue-lancer { max-width: 54ch; }
#formulaire-lancer { padding: 26px 28px 24px; }

#formulaire-lancer h2 {
  margin: 0 0 20px;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
}

.champ-bloc { display: block; margin-bottom: 16px; }
.champ-bloc .champ-label { display: block; margin-bottom: 5px; }

.champ-bloc input, .champ-bloc select {
  width: 100%;
  font-family: var(--mono); font-size: 13px;
  color: var(--texte); background: var(--panneau-haut);
  border: 1px solid var(--trait); border-radius: var(--r);
  padding: 8px 10px;
}
.champ-bloc input:focus { border-color: var(--ocre); }

.avertissement {
  margin: 18px 0 0; padding: 10px 12px;
  font-size: 12px; color: var(--texte-doux);
  border-left: 2px solid var(--ocre-sourd);
}

.erreur-formulaire {
  margin: 14px 0 0; font-family: var(--mono); font-size: 12px; color: var(--rouge);
}

.dialogue-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px;
}

/* --- exécution en cours ---------------------------------------------------- */

.en-cours .marque-nom::after {
  content: "";
  display: inline-block; width: 7px; height: 7px; margin-left: 9px;
  border-radius: 50%; background: var(--ocre);
  animation: pulse 1.5s ease-in-out infinite;
  vertical-align: 1px;
}

@keyframes pulse { 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  .en-cours .marque-nom::after { animation: none; }
}

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

.badge-mode {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--texte-doux);
  border: 1px solid var(--trait); border-radius: var(--r);
  padding: 5px 8px;
}

/* --- entête --------------------------------------------------------------- */

.entete { padding: 26px 28px 20px; border-bottom: 1px solid var(--trait); }

h1 {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: clamp(19px, 2.4vw, 27px);
  font-weight: 600; letter-spacing: -0.025em; line-height: 1.25;
  max-width: 52ch;
}

.faits { display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 0; }
.faits dt {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--texte-doux);
}
.faits dd { margin: 2px 0 0; font-family: var(--mono); font-size: 13px; }

/* --- colonnes ------------------------------------------------------------- */

/* Les colonnes s'étirent à la hauteur de la plus haute : sans cela, la couleur
   du fond de grille — qui dessine les séparateurs — remplirait le vide sous
   une colonne courte, et la page se terminerait sur un bloc plus clair. */
.colonnes {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: stretch;
  gap: 1px;
  background: var(--trait);
  border-bottom: 1px solid var(--trait);
}

.colonne { background: var(--encre); padding: 22px 24px 34px; min-height: 60vh; }

.colonne-tete { margin-bottom: 20px; }

.lettre {
  display: inline-block;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  color: var(--encre); background: var(--ocre);
  width: 18px; height: 18px; line-height: 18px; text-align: center;
  border-radius: var(--r);
  vertical-align: 2px;
}

.colonne-tete h2 {
  display: inline; margin: 0 0 0 8px;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
}

.colonne-note {
  margin: 10px 0 0; max-width: 46ch;
  font-size: 12.5px; color: var(--texte-doux);
}

.colonne-note code { color: var(--texte); font-size: 11.5px; }

/* --- W · étapes ----------------------------------------------------------- */

.etapes { list-style: none; margin: 0; padding: 0; }

.etape {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  padding: 11px 0 12px;
  border-top: 1px solid var(--trait);
}
.etape:last-child { border-bottom: 1px solid var(--trait); }

.etape-num {
  font-family: var(--mono); font-size: 11px;
  color: var(--texte-doux);
  border: 1px solid var(--trait); border-radius: var(--r);
  height: 22px; line-height: 20px; text-align: center;
}

.etape-titre {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: -0.01em;
}

.etape-resume { font-size: 12px; color: var(--texte-doux); margin-top: 1px; }

/* La preuve : le nom du fichier qui établit l'étape. C'est la signature de
   l'interface, elle doit se lire comme une pièce à conviction. */
.preuve {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 7px;
  font-family: var(--mono); font-size: 11px;
  color: var(--texte-doux);
  border-left: 2px solid var(--trait);
  padding-left: 8px;
}

.etape-detail { display: block; margin-top: 4px; font-size: 11.5px; color: var(--texte-doux); }

.etape[data-etat="fait"] .etape-num { color: var(--vert); border-color: color-mix(in srgb, var(--vert) 40%, var(--trait)); }
.etape[data-etat="fait"] .preuve { color: var(--texte); border-left-color: var(--vert); }
.etape[data-etat="partiel"] .etape-num { color: var(--ocre); border-color: var(--ocre-sourd); }
.etape[data-etat="partiel"] .preuve { color: var(--texte); border-left-color: var(--ocre); }
.etape[data-etat="attente"] { opacity: 0.42; }

.etape.active { background: var(--panneau); box-shadow: inset 2px 0 0 var(--ocre); }
.etape.active .etape-titre { color: var(--ocre); }

.lien-discret {
  margin-top: 18px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--texte-doux);
  border-bottom: 1px solid var(--trait);
}
.lien-discret:hover { color: var(--ocre); border-bottom-color: var(--ocre); }

/* --- A · fil -------------------------------------------------------------- */

.fil { list-style: none; margin: 0; padding: 0; }

.fil-entree {
  border-left: 1px solid var(--trait);
  padding: 0 0 18px 16px;
  position: relative;
}
.fil-entree::before {
  content: ""; position: absolute; left: -3px; top: 6px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--trait);
}
.fil-entree[data-etat="fait"]::before { background: var(--vert); }
.fil-entree[data-etat="partiel"]::before { background: var(--ocre); }
.fil-entree[data-etat="erreur"]::before { background: var(--rouge); }
.fil-entree[data-etat="erreur"] .fil-sortie { color: var(--rouge); }
.fil-entree:last-child { padding-bottom: 0; }

.fil-etape {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--texte-doux);
}

.fil-action {
  font-family: var(--mono); font-size: 12.5px;
  margin-top: 3px; word-break: break-word;
}

.fil-sortie { font-size: 12px; color: var(--texte-doux); margin-top: 3px; }

.fil-liste {
  margin: 6px 0 0; padding: 0; list-style: none;
  font-family: var(--mono); font-size: 11.5px; color: var(--texte-doux);
}
.fil-liste li { padding: 1px 0; }

/* --- T · blocs ------------------------------------------------------------ */

.bloc {
  border: 1px solid var(--trait); border-radius: var(--r);
  padding: 16px 18px; margin-bottom: 16px;
  background: var(--panneau);
}

.bloc h3 {
  margin: 0 0 10px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--texte-doux);
}

.bloc-note { margin: 0 0 12px; font-size: 12px; color: var(--texte-doux); }
.bloc-note code { color: var(--texte); }
.bloc-note a {
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ocre); text-decoration: none;
  border-bottom: 1px solid var(--ocre-sourd);
  word-break: break-all;
}
.bloc-note a:hover { border-bottom-color: var(--ocre); }

.sources { list-style: none; margin: 0; padding: 0; }

.source {
  display: grid; grid-template-columns: 34px 1fr; gap: 10px;
  padding: 9px 8px; margin: 0 -8px;
  border-top: 1px solid var(--trait);
  border-radius: var(--r);
  scroll-margin: 90px;
}
.source:first-child { border-top: 0; }

.source-id {
  font-family: var(--mono); font-size: 11px; color: var(--ocre);
}

.source-titre { font-size: 12.5px; line-height: 1.4; }
.source-titre a { color: var(--texte); text-decoration: none; border-bottom: 1px solid var(--trait); }
.source-titre a:hover { border-bottom-color: var(--ocre); }

.source-meta {
  margin-top: 3px;
  font-family: var(--mono); font-size: 11px; color: var(--texte-doux);
}

.source.allumee { background: var(--panneau-haut); box-shadow: inset 2px 0 0 var(--ocre); }

.drapeau { color: var(--ocre); }

/* --- citations : la signature -------------------------------------------- */

.cite {
  font-family: var(--mono); font-size: 0.92em;
  color: var(--ocre); cursor: pointer;
  border-bottom: 1px dotted var(--ocre-sourd);
  padding: 0 1px;
}
.cite:hover, .cite.allumee { background: color-mix(in srgb, var(--ocre) 22%, transparent); }
.cite.exemple { cursor: default; }

/* --- contrôle qualité ----------------------------------------------------- */

.verdict {
  margin-top: 12px; padding: 10px 12px;
  border-radius: var(--r);
  font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--trait);
}
.verdict.livrable { border-color: color-mix(in srgb, var(--vert) 45%, var(--trait)); color: var(--vert); }
.verdict.bloque   { border-color: color-mix(in srgb, var(--rouge) 45%, var(--trait)); color: var(--rouge); }

.verdict ul { margin: 8px 0 0; padding-left: 18px; color: var(--texte-doux); }
.verdict-date {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--trait);
  font-size: 11px; color: var(--texte-doux);
}
.verdict li { margin: 3px 0; }

/* --- le brief ------------------------------------------------------------- */

.brief {
  max-height: 62vh; overflow-y: auto;
  padding-right: 10px;
  border-top: 1px solid var(--trait);
  padding-top: 14px;
}

.brief h2 {
  margin: 22px 0 8px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ocre);
}
.brief h2:first-child { margin-top: 0; }
.brief h3 { margin: 16px 0 6px; font-size: 13px; }
.brief p, .brief li { font-size: 13px; line-height: 1.65; }
.brief ul { padding-left: 20px; }
.brief hr { border: 0; border-top: 1px solid var(--trait); margin: 18px 0; }
.brief table { border-collapse: collapse; width: 100%; font-size: 12px; margin: 10px 0; }
.brief th, .brief td { border: 1px solid var(--trait); padding: 5px 8px; text-align: left; }
.brief a { color: var(--texte); }
.brief .ancre-interne {
  color: var(--texte-doux); text-decoration: none;
  border-bottom: 1px solid var(--trait);
}
.brief .ancre-interne:hover { color: var(--ocre); border-bottom-color: var(--ocre); }

.vide { color: var(--texte-doux); font-size: 12.5px; }

/* --- dialogue ------------------------------------------------------------- */

dialog {
  background: var(--panneau); color: var(--texte);
  border: 1px solid var(--trait); border-radius: var(--r);
  max-width: 92ch; width: 92%; max-height: 84vh;
  padding: 0;
}
dialog::backdrop { background: rgba(9, 13, 20, 0.78); }

.dialogue-fermer {
  position: sticky; top: 0; float: right;
  margin: 10px 12px 0; z-index: 1;
  background: var(--panneau-haut); color: var(--texte);
  border: 1px solid var(--trait); border-radius: var(--r);
  cursor: pointer; padding: 4px 9px;
}

dialog pre {
  margin: 0; padding: 26px 30px 34px;
  font-size: 12px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
}

/* --- animations ----------------------------------------------------------- */

.apparait { animation: apparaitre 0.34s ease both; }

@keyframes apparaitre {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .apparait { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* --- adaptatif ------------------------------------------------------------ */

@media (max-width: 1100px) {
  .colonnes { grid-template-columns: 1fr; }
  .colonne { min-height: 0; }
  .brief { max-height: none; }
}

@media (max-width: 620px) {
  .barre, .entete, .colonne { padding-left: 16px; padding-right: 16px; }
  .barre-actions { width: 100%; }
  select { max-width: 100%; width: 100%; }
}