/* Charte TenRun — socle commun aux écrans branchés sur l'API réelle.
 *
 * Extrait de `Tender-Resultats.html`, qui la portait en ligne. Trois écrans la partagent
 * désormais : la dupliquer les ferait diverger sans que rien ne le signale, et une démo
 * dont les écrans ne se ressemblent plus se lit comme trois produits.
 *
 * Aucune police distante, aucune ressource externe : ce fichier et le navigateur suffisent.
 */

:root {
  --navy: #1f3b57; --blue: #2c6fb3; --gold: #c8a24b; --ink: #16212b; --muted: #64748b;
  --line: #dde4ec; --bg: #f4f6f9; --ok: #2e7d4f; --warn: #b7791f; --bad: #b3402f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5;
}

.wrap { max-width: 1280px; margin: 0 auto; padding: 20px; }

/* --- Bandeau ------------------------------------------------------------- */
.top {
  display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border-bottom: 2px solid var(--navy); margin-bottom: 22px; flex-wrap: wrap;
}
.wm { font-weight: 800; font-size: 22px; }
.wm .a { color: var(--blue); } .wm .b { color: var(--gold); }
.by { color: var(--muted); font-size: 12px; }
.top .ref { margin-left: auto; font-size: 12px; color: var(--muted); text-align: right; }

.live {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .3px; padding: 3px 10px; border-radius: 20px;
  background: #e8f5ec; color: var(--ok);
}
.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.live.off { background: #fdecea; color: var(--bad); }
.live.off .dot { background: var(--bad); }

/* --- Cartes -------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 20px;
  margin-bottom: 18px;
}
.card h2 { font-size: 16px; color: var(--navy); display: flex; align-items: center; gap: 8px; }
.card h2::before {
  content: ''; width: 4px; height: 16px; background: var(--gold); border-radius: 2px;
}
.card.done { border-color: #cde5d6; }
.card.done h2::before { background: var(--ok); }
.card[hidden] { display: none; }
.sub { color: var(--muted); font-size: 12.5px; margin: 4px 0 16px; }
h3 { font-size: 14px; color: var(--navy); margin-bottom: 3px; }

/* --- Fil des étapes ------------------------------------------------------ */
.steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.step {
  display: flex; align-items: center; gap: 7px; padding: 8px 13px; background: #fff;
  border: 1px solid var(--line); border-radius: 20px; font-size: 12.5px; color: var(--muted);
}
.step .n {
  width: 20px; height: 20px; border-radius: 50%; background: #eef2f7; color: var(--muted);
  display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none;
}
.step.on { border-color: var(--gold); background: #fdfaf3; color: var(--navy); font-weight: 600; }
.step.on .n { background: var(--gold); color: #fff; }
.step.ok { border-color: #cde5d6; color: var(--ok); }
.step.ok .n { background: var(--ok); color: #fff; }

/* --- Tableaux ------------------------------------------------------------ */
table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left; padding: 8px 9px; border-bottom: 1px solid var(--line);
  font-size: 13px; vertical-align: top;
}
th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px;
  color: var(--navy); background: #f5f8fb;
}
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr.win { background: #fdfaf3; }
tr.win td { font-weight: 700; }
.scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.scroll.tall { max-height: 340px; overflow-y: auto; }
.scroll.tall th { position: sticky; top: 0; }

/* --- Marqueurs ----------------------------------------------------------- */
.pill { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.p1 { background: #e8f5ec; color: var(--ok); }
.p2 { background: #eef2f7; color: var(--muted); }
.p3 { background: #fdecea; color: var(--bad); }
.p4 { background: #fdf6e6; color: var(--warn); }
.nc { color: var(--muted); font-style: italic; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12px; }

.note {
  border-left: 3px solid var(--blue); background: #f2f7fd; padding: 10px 12px;
  border-radius: 0 8px 8px 0; font-size: 12.5px; margin-top: 12px;
}
.note.warn { border-left-color: var(--warn); background: #fdf8ee; }
.note.bad { border-left-color: var(--bad); background: #fdf1ef; }
.note.ok { border-left-color: var(--ok); background: #f1f8f3; }
.note b { color: var(--navy); }

/* --- Compteurs ----------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.kpi .v { font-size: 24px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.kpi .l {
  font-size: 10.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .3px; margin-top: 5px;
}
.kpi.gold { border-color: #e6d4a8; background: #fdfaf3; }
.kpi.gold .v { font-size: 17px; color: var(--gold); }

/* --- Contrôles ----------------------------------------------------------- */
.bar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.bar:last-child { margin-bottom: 0; }
.field { display: flex; flex-direction: column; }
label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
  color: var(--muted); display: block; margin-bottom: 4px;
}
input, select {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 13.5px; background: #fff; color: var(--ink);
}
input[readonly] { background: #f5f8fb; color: var(--muted); }
.btn {
  padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line); background: #fff;
  font-weight: 600; cursor: pointer; font-family: inherit; font-size: 13.5px;
}
.btn.prim { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn:disabled { opacity: .5; cursor: default; }

/* Réglage technique — l'adresse de l'instance.
 *
 * Elle n'existe que parce que la démonstration sert les écrans et le moteur depuis deux
 * origines. En production c'est un seul déploiement, et cette adresse est en dur : ni le
 * client ni le prestataire n'ont jamais à la connaître. Repliée, donc — la montrer au
 * premier plan ferait passer un produit pour une paillasse. */
.reglage { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.reglage > summary {
  cursor: pointer; font-size: 11.5px; color: var(--muted); list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.reglage > summary::-webkit-details-marker { display: none; }
.reglage > summary::before { content: '⚙'; font-size: 12px; }
.reglage > summary:hover { color: var(--navy); }
.reglage .bar { margin: 12px 0 0; }

/* Zone de dépôt du portail prestataire. */
.drop {
  border: 2px dashed var(--line); border-radius: 12px; padding: 28px; text-align: center;
  color: var(--muted); background: #fbfcfe;
}
.drop.hot { border-color: var(--gold); background: #fdfaf3; color: var(--navy); }

/* Sélecteur de langue du bandeau.
   Discret par construction : sur ces écrans la langue est d'abord celle du COMPTE, et
   ce sélecteur ne sert qu'à montrer les deux versions. Un réglage aussi visible qu'un
   bouton d'action laisserait croire qu'il change quelque chose au fond. */
/* Bandeau de compte — posé par `demarrerEcran()` une fois la session prouvée.
   Il s'enroule volontairement : sur un écran étroit, l'adresse du compte passe à la
   ligne au lieu de pousser le sélecteur de langue hors du bandeau. */
.compte { display: inline-flex; align-items: center; gap: 10px; margin-right: 10px; flex-wrap: wrap; }
.compte a { color: var(--blue); text-decoration: none; }
.compte a:hover { text-decoration: underline; }
.compte .btn { font-size: 12px; padding: 3px 8px; }
.top .ref { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }

.langhost { display: inline-flex; align-items: center; margin-right: 10px; }
.langsel {
  font: inherit; font-size: 12px; color: var(--muted); background: #fff;
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; cursor: pointer;
}
.langsel:hover { border-color: var(--gold); color: var(--navy); }

/* --- Curseurs de pondération --------------------------------------------- */
/* Repris À L'IDENTIQUE de `TenRun-Demo-Client.html` (28/08/2026). C'est le point :
   le prospect voit ces curseurs en démonstration, puis souscrit et retrouve les mêmes.
   Un écart de présentation à cet endroit-là le perd au moment où il accorde sa
   confiance (arbitrage JP du 27/08). Toute retouche ici se reporte sur les deux
   démos, et réciproquement. */
.wrow {
  display: grid; grid-template-columns: 200px 1fr 64px; gap: 12px;
  align-items: center; margin-bottom: 9px;
}
.wrow label {
  margin: 0; text-transform: none; font-size: 12.5px; color: var(--ink); letter-spacing: 0;
}
input[type=range] { padding: 0; border: none; background: transparent; accent-color: var(--blue); }
.wsum { font-weight: 800; font-variant-numeric: tabular-nums; }
.wbar {
  display: flex; height: 22px; border-radius: 6px; overflow: hidden;
  margin: 10px 0 4px; border: 1px solid var(--line);
}
.wbar span {
  display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #fff;
  transition: width .2s; overflow: hidden; white-space: nowrap;
}

/* --- Suggestions A&M à arrêter (AO-03, 25/09/2026) ------------------------ */
/* Chaque ligne montre le critère, la valeur PROPOSÉE — modifiable sur place — et son
   origine. Le point qui compte est la modifiabilité : une valeur affichée mais figée
   serait une notification, pas une décision, et le journal continuerait d'attester un
   consentement que le client n'a pas donné. */
.srow {
  display: grid; grid-template-columns: 1fr 190px; gap: 12px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line);
}
.srow:last-of-type { border-bottom: none; }
.srow .slab { font-size: 12.5px; color: var(--ink); }
.srow .sori { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.srow input, .srow select { width: 100%; }
.srow .sfix { font-size: 12.5px; color: var(--muted); text-align: right; }
/* Le bandeau de validation. Volontairement distinct d'un bouton : cocher est un geste
   que l'on fait, tandis qu'une case pré-cochée est un geste que l'on subit. */
.sugval {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  padding: 11px 13px; border: 1px solid var(--gold); border-radius: 8px;
  background: #fffaf0; font-size: 12.5px; line-height: 1.5; cursor: pointer;
}
.sugval input { margin-top: 2px; flex: 0 0 auto; }
/* Le mode, au-dessus de ses paliers. Un AO mixte en affiche deux : sans ce titre, le
   client lirait douze lignes d'affilée sans savoir laquelle vaut pour quel mode. */
.delh {
  margin: 16px 0 4px; font-size: 11px; font-family: var(--mono, monospace);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}

/* --- Onglets ------------------------------------------------------------- */
/* Repris de la démonstration client (28/08/2026), même raison que les curseurs :
   le prospect y choisit sa voie d'entrée du besoin entre trois pastilles, et doit
   retrouver les mêmes une fois abonné. */
.tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tab {
  padding: 6px 13px; border: 1px solid var(--line); border-radius: 20px;
  font-size: 12.5px; cursor: pointer; background: #fff;
}
.tab.on { background: var(--navy); color: #fff; border-color: var(--navy); font-weight: 600; }

/* --- Champ de mot de passe avec bascule d'affichage (31/08/2026, demande JP) ---------
 *
 * Un mot de passe saisi à l'aveugle est une faute de frappe qu'on ne découvre qu'à la
 * connexion suivante — c'est-à-dire au pire moment, quand plus rien ne permet de la
 * corriger. La bascule ne remplace pas la double saisie à l'inscription : elle sert
 * l'autre besoin, relire ce qu'on vient de taper.
 *
 * Le bouton se superpose au champ, à droite ; la réserve à droite de l'input l'empêche
 * de recouvrir le texte saisi. Rien ici ne dépend d'un glyphe de police : le pictogramme
 * est un SVG posé par le script, et les polices d'un site peuvent être réduites aux
 * seuls caractères qu'il affiche. */
.mdp-zone { position: relative; display: block; }
.mdp-zone input { padding-right: 42px; }
.mdp-oeil {
  position: absolute; top: 0; right: 0; height: 100%; width: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted);
}
.mdp-oeil:hover { color: var(--ink); }
.mdp-oeil:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 6px; }
.mdp-oeil svg { width: 18px; height: 18px; display: block; }

/* --- `hidden` doit rester `hidden` (31/08/2026) --------------------------------------
 *
 * La feuille du navigateur pose `[hidden] { display: none }` avec une spécificité de
 * (0,1,0) : toute règle de mise en page un peu précise l'écrase. C'est arrivé sur l'écran
 * de connexion — `.porte .field { display: block }`, spécificité (0,2,0) — et le champ
 * « adresse du service », posé `hidden` par le script, s'affichait en production. Le code
 * croyait cacher, le style montrait, et rien ne signalait le désaccord.
 *
 * `!important` est ici le bon outil, et non un aveu : `hidden` n'est pas une opinion de
 * mise en page, c'est une propriété de l'élément. Une règle qui prétendrait afficher un
 * élément marqué caché serait une faute, pas un cas d'usage. */
[hidden] { display: none !important; }