/* QUALIFELEC — feuille de style unique, sans dépendance externe. */

:root {
  --fond: #f6f7f9;
  --carte: #ffffff;
  --texte: #1b1f24;
  --discret: #5c6672;
  --bord: #dde2e8;
  --accent: #1f4b8e;
  --accent-clair: #e8eefa;
  --succes: #1c7a4a;
  --succes-fond: #e7f5ee;
  --attention: #8a5a00;
  --attention-fond: #fdf3e0;
  --erreur: #b32020;
  --erreur-fond: #fdeaea;
  --rayon: 10px;
}

[x-cloak] { display: none !important; }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  background: var(--carte);
  border-bottom: 1px solid var(--bord);
}

.marque { text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.marque-nom { font-weight: 700; letter-spacing: 0.04em; color: var(--accent); }
.marque-suite { font-size: 0.82rem; color: var(--discret); }

.entete nav { display: flex; gap: 1.25rem; }
.entete nav a { color: var(--accent); text-decoration: none; font-size: 0.94rem; }
.entete nav a:hover { text-decoration: underline; }

.contenu { max-width: 1100px; margin: 1.5rem auto 3rem; padding: 0 1.25rem; }

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.25rem;
}

h1 { font-size: 1.4rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.1rem; margin: 0 0 0.75rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 0.6rem; }

.intro { color: var(--discret); margin-top: 0; }
.discret { color: var(--discret); font-size: 0.9rem; }

/* Avis ------------------------------------------------------------------- */

.avis {
  background: var(--accent-clair);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 0.8rem 1rem;
  margin: 1rem 0;
  font-size: 0.94rem;
}
.avis-attention { background: var(--attention-fond); border-left-color: var(--attention); }
.avis-erreur { background: var(--erreur-fond); border-left-color: var(--erreur); }

.erreur { color: var(--erreur); font-size: 0.92rem; }

/* Dépôt de fichier -------------------------------------------------------- */

.depot {
  display: block;
  border: 2px dashed var(--bord);
  border-radius: var(--rayon);
  padding: 1.6rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.depot:hover { border-color: var(--accent); background: var(--accent-clair); }
.depot input[type="file"] { display: block; margin: 0 auto 0.6rem; }
.depot-texte { color: var(--discret); font-size: 0.94rem; }

button, .bouton-lien {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}
button:hover, .bouton-lien:hover { background: #17396c; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
.bouton-lien { margin-top: 0; padding: 0.35rem 0.8rem; font-size: 0.86rem; }

/* Journal ----------------------------------------------------------------- */

.journal-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.journal-outils {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-size: 0.87rem;
  color: var(--discret);
}
.journal-outils select { font: inherit; padding: 0.15rem 0.3rem; }

.journal {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.6rem;
  max-height: 26rem;
  overflow-y: auto;
  background: #fbfcfd;
  border: 1px solid var(--bord);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84rem;
}
.ligne {
  display: flex;
  gap: 0.7rem;
  padding: 0.22rem 0.4rem;
  border-left: 3px solid transparent;
}
.ligne-heure { color: var(--discret); flex: none; }
.ligne-texte { white-space: pre-wrap; }
.niveau-success { border-left-color: var(--succes); color: var(--succes); }
.niveau-warning { border-left-color: var(--attention); color: var(--attention); }
.niveau-error { border-left-color: var(--erreur); color: var(--erreur); }

/* Progression ------------------------------------------------------------- */

.progression { margin-top: 1rem; }
.barre {
  height: 9px;
  background: var(--bord);
  border-radius: 5px;
  overflow: hidden;
}
.barre-remplie {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.4s ease;
}
.progression-texte { margin: 0.45rem 0 0; font-size: 0.87rem; color: var(--discret); }

/* Résultats --------------------------------------------------------------- */

.groupe { border-top: 1px solid var(--bord); padding-top: 0.4rem; }

.page-bloc {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.2rem;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--bord);
}
@media (max-width: 720px) { .page-bloc { grid-template-columns: 1fr; } }

.page-vignette { margin: 0; }
.page-vignette img {
  width: 100%;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: #fff;
}
.page-vignette figcaption {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  color: var(--discret);
}

.etiquette {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 4px;
  background: var(--succes-fond);
  color: var(--succes);
  font-size: 0.75rem;
}

.champs {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr auto;
  gap: 0.3rem 1rem;
  margin: 0;
}
.champs dt { color: var(--discret); font-size: 0.88rem; }
.champs dd { margin: 0; }
/* La colonne des notes : elle ne prend de la place que si le modèle en a donné. */
.champ-confiance { justify-self: end; align-self: center; }
.champ-vide { color: #98a2ae; font-style: italic; }

/* Auto-évaluation du modèle (R14.6). Une lecture sûre ne se signale pas : le
   relecteur cherche ce qu'il doit vérifier, pas ce qu'il peut ignorer. */
.confiance {
  display: inline-block;
  padding: 0.02rem 0.38rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}
.confiance-haute { background: var(--succes-fond); color: var(--succes); }
.confiance-moyenne { background: var(--attention-fond); color: var(--attention); }
.confiance-basse { background: var(--erreur-fond); color: var(--erreur); }

/* Qualifications QUALIFELEC déduites d'une activité garantie. Déduites, donc
   affichées à côté du libellé recopié et jamais à sa place : une mauvaise
   correspondance doit se voir. */
.qualif {
  display: inline-block;
  padding: 0.02rem 0.38rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--succes-fond);
  color: var(--succes);
}
/* LCPT et MGTI se départagent par le type de bâtiment, que l'assurance ne dit
   jamais. Le pointillé dit que la paire n'a pas été tranchée. */
.qualif-indecise {
  background: transparent;
  color: var(--discret);
  border: 1px dashed currentColor;
}
.code-activite {
  color: var(--discret);
  font-variant-numeric: tabular-nums;
  margin-right: 0.35rem;
}
.tableau-activites td { vertical-align: top; }

.tableau { width: 100%; border-collapse: collapse; margin: 0.5rem 0; font-size: 0.9rem; }
.tableau th, .tableau td {
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--bord);
  vertical-align: top;
}
.tableau th { color: var(--discret); font-weight: 600; font-size: 0.84rem; }

details { margin-top: 0.7rem; }
summary { cursor: pointer; font-size: 0.88rem; color: var(--accent); }
.brut {
  white-space: pre-wrap;
  word-break: break-word;
  background: #fbfcfd;
  border: 1px solid var(--bord);
  border-radius: 6px;
  padding: 0.7rem;
  font-size: 0.8rem;
  max-height: 22rem;
  overflow-y: auto;
}

/* États ------------------------------------------------------------------- */

.etat {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 20px;
  font-size: 0.8rem;
  background: var(--bord);
  color: var(--texte);
}
.etat-done { background: var(--succes-fond); color: var(--succes); }
.etat-running { background: var(--accent-clair); color: var(--accent); }
.etat-failed { background: var(--erreur-fond); color: var(--erreur); }
.etat-interrupted, .etat-pending { background: var(--attention-fond); color: var(--attention); }

/* L'analyse en deux colonnes sur la liste : un verdict par famille, lisible
   d'un coup d'œil sur vingt lignes. Mêmes couleurs que les contrôles du
   dossier, pour qu'un « non conforme » soit le même rouge des deux côtés. */
.analyse-etat {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.analyse-conforme { background: var(--succes-fond); color: var(--succes); }
.analyse-non_conforme { background: var(--erreur-fond); color: var(--erreur); }
.analyse-indetermine { background: var(--attention-fond); color: var(--attention); }

/* Une famille dont rien n'a été demandé : ni un état, ni une case vide. */
.analyse-absent {
  background: transparent;
  border: 1px dashed var(--bord);
  color: var(--discret);
  font-weight: 500;
  font-style: italic;
}

.pied {
  text-align: center;
  padding: 1.5rem;
  color: var(--discret);
  font-size: 0.83rem;
}

/* Paramètres --------------------------------------------------------------- */

.avis-succes { background: var(--succes-fond); border-left-color: var(--succes); }

.parametres input[type="text"],
.parametres input[type="password"],
.parametres input[type="number"],
.parametres select {
  width: 100%;
  max-width: 34rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
}
.parametres input:focus, .parametres select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.reglage {
  padding: 0.9rem 0;
  border-top: 1px solid var(--bord);
}
.reglage:first-of-type { border-top: none; }
.reglage-fautif {
  border-left: 3px solid var(--erreur);
  padding-left: 0.8rem;
  margin-left: -0.8rem;
  background: var(--erreur-fond);
}

.reglage-tete {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.reglage-tete label { font-weight: 600; }

/* D'où vient la valeur : le canal qui a décidé, pas une décoration. */
.origine {
  font-size: 0.75rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--bord);
  color: var(--discret);
  background: var(--fond);
}
.origine-base {
  color: var(--accent);
  background: var(--accent-clair);
  border-color: var(--accent);
}

.etiquette {
  font-size: 0.75rem;
  color: var(--attention);
  background: var(--attention-fond);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

.aide {
  margin: 0.4rem 0 0;
  color: var(--discret);
  font-size: 0.86rem;
  max-width: 60ch;
}
.aide code { font-size: 0.82rem; }

.bascule {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.94rem;
  cursor: pointer;
}
.bascule input { margin: 0; }

/* Un bouton qui n'est pas une action principale ne doit pas en avoir l'air. */
button.lien {
  margin-top: 0.5rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.86rem;
  text-decoration: underline;
}
button.lien:hover { background: none; color: #17396c; }

button.secondaire {
  background: #fff;
  color: var(--accent);
}
button.secondaire:hover { background: var(--accent-clair); }

.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; }
.actions .discret { flex-basis: 100%; margin: 0; }

/* Prompts ------------------------------------------------------------------ */

/* Un prompt se relit en colonnes : la casse et les espaces y comptent, donc
   police à pas fixe et retour à la ligne visible. */
textarea.prompt {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: #fbfcfd;
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.5;
  resize: vertical;
  tab-size: 2;
}
textarea.prompt:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.alerte-douce {
  margin: 0.4rem 0 0;
  color: var(--attention);
  font-size: 0.86rem;
  max-width: 60ch;
}

.historique { margin-top: 0.6rem; }
.revisions {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.revisions > li {
  border-left: 2px solid var(--bord);
  padding-left: 0.7rem;
}
.revision-tete {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.88rem;
}
.revision-tete time { color: var(--discret); font-size: 0.8rem; }
.revision-tete button.lien { margin-top: 0; }
.revisions .brut { margin: 0.35rem 0 0; max-height: 14rem; }

/* --- Instruction d'un dossier : les contrôles d'abord (V1.1, V3.1) -------- */

.avis-titre { margin: 0 0 0.3rem; font-size: 1rem; }
.avis-conforme { background: var(--succes-fond); border-left-color: var(--succes); }
.avis-non_conforme { background: var(--erreur-fond); border-left-color: var(--erreur); }
.avis-indetermine { background: var(--attention-fond); border-left-color: var(--attention); }

.verdict { margin: 0 0 0.3rem; font-size: 1.25rem; font-weight: 700; }
.verdict-conforme { color: var(--succes); }
.verdict-non_conforme { color: var(--erreur); }
.verdict-indetermine { color: var(--attention); }

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

.controle {
  border-left: 3px solid var(--bord);
  padding: 0.55rem 0 0.55rem 0.85rem;
  margin-bottom: 0.6rem;
}
.controle-conforme { border-left-color: var(--succes); }
.controle-non_conforme { border-left-color: var(--erreur); }
.controle-indetermine { border-left-color: var(--attention); }

.controle-question { margin: 0 0 0.2rem; font-weight: 600; }
.controle-reponse { margin: 0; font-size: 0.93rem; }
.controle-motif { color: var(--discret); }

.etat-controle {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  margin-right: 0.4rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}
.controle-conforme .etat-controle { background: var(--succes-fond); color: var(--succes); }
.controle-non_conforme .etat-controle { background: var(--erreur-fond); color: var(--erreur); }
.controle-indetermine .etat-controle { background: var(--attention-fond); color: var(--attention); }

/* Un contrôle qui apparaît ou disparaît : ni un état, ni une case vide. */
.etat-absent {
  background: transparent;
  border: 1px dashed var(--bord);
  color: var(--discret);
  font-weight: 500;
  font-style: italic;
}

/* A proof nobody can open is a proof nobody checks (V3.3). */
.preuves { list-style: none; margin: 0.4rem 0 0; padding: 0; font-size: 0.89rem; }
.preuve { margin: 0.2rem 0; }
.preuve-ou { color: var(--discret); margin-right: 0.35rem; }
.preuve-citation { font-style: italic; }

.liste-pieces { list-style: none; margin: 0; padding: 0; }
.piece { border-top: 1px solid var(--bord); padding: 0.55rem 0; }
.piece-nom { margin: 0 0 0.15rem; font-weight: 600; }
.piece-failed .piece-nom { color: var(--erreur); }
.document { margin: 0.1rem 0 0 0.85rem; }

.champs-depot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
  margin: 1rem 0;
}
.champs-depot label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.92rem; }
.champs-depot input, .champs-depot select { font: inherit; padding: 0.35rem 0.4rem; }

.preuve-liens { margin-left: 0.4rem; font-size: 0.86rem; }
.preuve-liens a { color: var(--accent); margin-right: 0.6rem; }

.pages-lues { display: flex; flex-wrap: wrap; gap: 1rem; }
.pages-lues .page-vignette img { max-width: 220px; border: 1px solid var(--bord); }

.ligne-boutons { display: flex; gap: 0.8rem; align-items: center; }
.bouton-refus { background: var(--erreur); }
.bouton-refus:hover { background: #8d1919; }
.ajout-piece { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; margin-top: 1rem; }
.ajout-piece label { font-size: 0.92rem; }
.champ-bouton { justify-content: flex-end; }

.regles textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84rem;
  line-height: 1.45;
  padding: 0.6rem;
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
}
.regles label { display: block; margin-bottom: 0.3rem; font-size: 0.92rem; }

/* Référentiel des titres --------------------------------------------------- */

.filtres { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.8rem; }
.filtre {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--bord);
  border-radius: 999px;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
}
.filtre:hover { background: var(--accent-clair); }
.filtre-actif { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Les libellés reconnus sont ce dont dépend un verdict : ils sont montrés en
   entier, jamais comptés, parce qu'un référent les relit pour les corriger. */
.libelles { font-size: 0.86rem; color: var(--discret); max-width: 28rem; }

.exigences { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
.exigences > li { margin: 0.15rem 0; }

/* Édition d'un titre, d'un barreau, d'une exigence. Les formulaires sont
   repliés : la page sert d'abord à lire le référentiel, et un écran couvert de
   champs cache la liste qu'on est venu consulter. */
.edition { margin-top: 0.9rem; }
.edition > summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.9rem;
  padding: 0.2rem 0;
}
.actions-titre { white-space: nowrap; vertical-align: top; }
.actions-titre > details > summary { cursor: pointer; color: var(--accent); font-size: 0.86rem; }
.actions-titre form { display: inline-flex; gap: 0.3rem; margin-top: 0.3rem; }

.formulaire-titre { margin: 0.6rem 0 0; }
.champs-titre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.6rem 1rem;
}
.champs-titre label, .champ-large {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
}
.champ-large { margin-top: 0.6rem; }
.champs-titre input, .champs-titre select, .champ-large textarea, .champ-large select {
  font: inherit;
  font-size: 0.92rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: #fff;
}
.en-ligne { display: inline-flex; gap: 0.3rem; margin-left: 0.5rem; }