/* SITEAUDIT — console interne.
   Densité avant tout : c'est un outil ouvert toute la journée, pas une vitrine.
   La donnée est en monospace tabulaire, l'interface en system-ui. */

:root {
  --encre: #0e1116;
  --encre-2: #3d4653;
  --encre-3: #6b7684;
  --encre-4: #9aa4b2;

  --fond: #eef0f3;
  --surface: #ffffff;
  --trait: #dfe3e8;
  --trait-fort: #c8cfd8;

  --accent: #2b39ff;
  --accent-doux: #eceefe;

  /* Rampe de score : volontairement sourde. Un tableau plein de feux
     tricolores saturés devient illisible au bout de dix minutes. */
  --bon: #1f7a5a;
  --moyen: #b5761f;
  --mauvais: #b23b34;
  --inconnu: #9aa4b2;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, monospace;
  --ui: system-ui, -apple-system, "Segoe UI", sans-serif;

  --rail: 208px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 14px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* ── Ossature ───────────────────────────────────────── */
.app { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; }

.rail {
  background: var(--encre);
  color: #fff;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marque {
  font: 600 13px var(--mono);
  letter-spacing: .14em;
  padding: 0 10px 20px;
  color: #fff;
}
.marque span { color: var(--encre-4); }

.rail a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 6px;
  color: #b6bfcc;
  text-decoration: none;
  font-size: 13.5px;
}
.rail a:hover { background: #1a1f27; color: #fff; }
.rail a[aria-current="page"] { background: var(--accent); color: #fff; }
.rail a .pastille {
  font: 11px var(--mono);
  background: #262c36;
  color: #cfd6e0;
  padding: 1px 6px;
  border-radius: 10px;
}
.rail a[aria-current="page"] .pastille { background: rgba(255,255,255,.22); color: #fff; }

.rail-bas { margin-top: auto; font: 11px/1.5 var(--mono); color: #5b6572; padding: 0 10px; }

main { min-width: 0; padding: 22px 26px 60px; }

.entete {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
h1 { font-size: 21px; font-weight: 620; letter-spacing: -.02em; margin: 0; }
.sous { color: var(--encre-3); font-size: 13px; }
.entete .actions { margin-left: auto; display: flex; gap: 8px; }

/* ── Boutons ────────────────────────────────────────── */
.btn {
  border: 1px solid var(--trait-fort);
  background: var(--surface);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
.btn:hover { border-color: var(--encre-3); }
.btn:active { transform: translateY(1px); }
.btn.primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primaire:hover { filter: brightness(1.08); }
.btn.danger:hover { border-color: var(--mauvais); color: var(--mauvais); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.mini { padding: 3px 8px; font-size: 12px; }

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Tuiles ─────────────────────────────────────────── */
.tuiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.tuile {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 12px 14px;
}
.tuile .k {
  font: 11px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre-3);
}
.tuile .v {
  font: 500 27px/1.15 var(--mono);
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  letter-spacing: -.02em;
}
.tuile .n { font-size: 12px; color: var(--encre-3); margin-top: 2px; }
.tuile.alerte { border-color: #e8c3c0; background: #fdf6f5; }
.tuile.alerte .v { color: var(--mauvais); }

/* ── Panneau + tableau ──────────────────────────────── */
.panneau {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 8px;
  overflow: hidden;
}
.panneau + .panneau { margin-top: 16px; }
.panneau-tete {
  padding: 11px 14px;
  border-bottom: 1px solid var(--trait);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.panneau-tete h2 { font-size: 14px; font-weight: 600; margin: 0; }
.panneau-tete .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  font: 11px var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--encre-3);
  font-weight: 500;
  padding: 8px 12px;
  border-bottom: 1px solid var(--trait);
  white-space: nowrap;
}
tbody td { padding: 7px 12px; border-bottom: 1px solid #f0f2f5; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfc; }
td.num { font: 13px var(--mono); font-variant-numeric: tabular-nums; }
.serre { white-space: nowrap; }

/* Les actions n'apparaissent qu'au survol : le tableau reste lisible. */
td.outils { text-align: right; white-space: nowrap; }
td.outils .btn { opacity: 0; transition: opacity .12s; }
tr:hover td.outils .btn, td.outils .btn:focus-visible { opacity: 1; }

/* ── Signature : la gouttière de score ──────────────── */
/* Une barre verticale par ligne, hauteur = note. En descendant le tableau, on
   lit la santé du portefeuille comme un graphique. */
.gouttiere { width: 26px; padding-left: 14px !important; padding-right: 0 !important; }
.jauge {
  width: 4px;
  height: 26px;
  background: #edeff2;
  border-radius: 2px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.jauge i {
  display: block;
  width: 100%;
  border-radius: 2px;
  background: var(--inconnu);
  transition: height .45s cubic-bezier(.2,.8,.2,1);
}
.s-bon    { background: var(--bon) !important; }
.s-moyen  { background: var(--moyen) !important; }
.s-mauvais{ background: var(--mauvais) !important; }

.score { font: 500 15px var(--mono); font-variant-numeric: tabular-nums; }
.score.t-bon { color: var(--bon); }
.score.t-moyen { color: var(--moyen); }
.score.t-mauvais { color: var(--mauvais); }
.score.t-inconnu { color: var(--encre-4); }

.delta { font: 12px var(--mono); margin-left: 6px; }
.delta.hausse { color: var(--bon); }
.delta.baisse { color: var(--mauvais); }

.spark { display: block; }

/* ── Étiquettes ─────────────────────────────────────── */
.tag {
  display: inline-block;
  font: 11px var(--mono);
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: #eef0f3;
  color: var(--encre-2);
  white-space: nowrap;
}
.tag.client { background: var(--accent-doux); color: var(--accent); }
.tag.critique { background: #fdecea; color: var(--mauvais); }
.tag.attention { background: #fdf3e3; color: var(--moyen); }
.tag.ok { background: #e9f5f0; color: var(--bon); }

.hote { font: 13px var(--mono); }
.libelle { font-weight: 500; }
.meta { color: var(--encre-3); font-size: 12px; }

/* ── Filtres ────────────────────────────────────────── */
.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.filtre {
  border: 1px solid var(--trait);
  background: var(--surface);
  border-radius: 20px;
  padding: 4px 11px;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--encre-2);
}
.filtre[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.filtre .n { font: 11px var(--mono); opacity: .65; margin-left: 4px; }

/* ── Formulaires ────────────────────────────────────── */
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ label { font: 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--encre-3); }
input[type=text], input[type=email], input[type=password], select, textarea {
  border: 1px solid var(--trait-fort);
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--surface);
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
textarea { font: 13px var(--mono); resize: vertical; min-height: 120px; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.corps { padding: 14px; }

/* ── Findings ───────────────────────────────────────── */
.finding { padding: 12px 14px; border-bottom: 1px solid #f0f2f5; }
.finding:last-child { border-bottom: 0; }
.finding .t { font-weight: 560; margin: 5px 0 3px; }
.finding .e { color: var(--encre-2); }
.finding .p { font: 12px var(--mono); color: var(--encre-4); margin-top: 5px; word-break: break-all; }

/* ── Vide, bandeau, dialogue ────────────────────────── */
.vide { padding: 40px 20px; text-align: center; color: var(--encre-3); }
.vide p { margin: 0 0 14px; }

.bandeau {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  border: 1px solid;
}
.bandeau.info { background: var(--accent-doux); border-color: #ccd2fd; color: #1b249e; }
.bandeau.attention { background: #fdf6e9; border-color: #f0dcb4; color: #8a5a10; }

dialog {
  border: 1px solid var(--trait);
  border-radius: 10px;
  padding: 0;
  width: min(560px, 92vw);
  box-shadow: 0 20px 50px rgba(14,17,22,.22);
}
dialog::backdrop { background: rgba(14,17,22,.42); }
dialog h2 { margin: 0; font-size: 15px; }
.dialogue-pied {
  padding: 12px 14px;
  border-top: 1px solid var(--trait);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

#toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--encre);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
  z-index: 60;
  max-width: 76vw;
}
#toast.visible { opacity: 1; transform: translate(-50%, 0); }
#toast.erreur { background: var(--mauvais); }

.chargement { color: var(--encre-3); padding: 30px; text-align: center; font: 12px var(--mono); }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; padding: 8px; flex-direction: row; overflow-x: auto; align-items: center; }
  .rail a { white-space: nowrap; }
  .marque, .rail-bas { display: none; }
  main { padding: 16px 14px 50px; }
  .masquable { display: none; }
}

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

/* ── Fiche site : verdict, positifs, pages ──────────── */
.verdict {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14.5px;
}

.liste-positifs { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.liste-positifs li { margin-bottom: 7px; break-inside: avoid; font-size: 13.5px; }
.coche { color: var(--bon); font-weight: 700; margin-right: 5px; }
@media (max-width: 720px) { .liste-positifs { columns: 1; } }

td.lent { color: var(--moyen); }

.tuile .v.t-bon { color: var(--bon); }
.tuile .v.t-moyen { color: var(--moyen); }
.tuile .v.t-mauvais { color: var(--mauvais); }
.tuile .v.t-inconnu { color: var(--encre-4); }

/* ── Captures d'écran ───────────────────────────────── */
.apercus { display: flex; gap: 18px; align-items: flex-start; }
.apercus figure { margin: 0; flex: 1 1 0; min-width: 0; }
.apercus figure.tel { flex: 0 0 260px; }
.apercus figcaption {
  font: 11px var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--encre-3);
  margin-bottom: 6px;
}
/* Les captures sont hautes : on plafonne pour garder la fiche lisible, le
   clic ouvre l'image entière. */
.apercus img, .zoom img {
  width: 100%;
  border: 1px solid var(--trait);
  border-radius: 6px;
  display: block;
}
.apercus img { max-height: 420px; object-fit: cover; object-position: top; }

.zoom { display: block; margin-top: 10px; max-width: 520px; text-decoration: none; }
.zoom img { max-height: 260px; object-fit: contain; background: #f6f7f9; }
.zoom .meta { display: block; margin-top: 4px; }

@media (max-width: 720px) {
  .apercus { flex-direction: column; }
  .apercus figure.tel { flex: 1 1 auto; width: 100%; }
}

/* ── Écran de connexion ─────────────────────────────── */
.connexion {
  position: fixed;
  inset: 0;
  background: var(--encre);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.carte-connexion {
  background: var(--surface);
  border-radius: 12px;
  padding: 30px 28px;
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.marque-connexion {
  font: 600 13px var(--mono);
  letter-spacing: .14em;
  color: var(--encre);
  margin-bottom: 12px;
}
.marque-connexion span { color: var(--encre-4); }
.carte-connexion label {
  font: 11px var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--encre-3);
}
.carte-connexion button { margin-top: 6px; }

/* ── Entonnoir de la vue d'ensemble ─────────────────── */
.entonnoir {
  display: flex;
  gap: 6px;
  align-items: stretch;
  overflow-x: auto;
}
.entonnoir .etape {
  flex: 1 1 0;
  min-width: 92px;
  background: var(--fond);
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
}
.entonnoir .etape .v {
  font: 500 24px var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.entonnoir .etape .l { font-size: 11.5px; color: var(--encre-3); margin-top: 3px; line-height: 1.3; }
/* Le taux de passage d'une étape à la suivante : sous 25 %, c'est là que ça
   coince, et c'est là qu'il faut travailler. */
.entonnoir .etape .t { font: 11px var(--mono); color: var(--encre-4); margin-top: 6px; min-height: 14px; }
.entonnoir .etape .t.faible { color: var(--mauvais); font-weight: 600; }