/* Page publique du diagnostic — diag.ldlm.fr/<code> — feuille autonome.
 *
 * Servie par le routeur PUBLIC (`static/diag.css`), pas par `/cockpit/static/`
 * qui est derrière Authentik. Même langage que la carte de visite publique
 * (`app/static/carte.css`) : bandeau bleu IRI, cartes plates et bordées,
 * rayons 16 / 10, eyebrows 11 px espacées, aucun emoji, aucun gradient.
 * Mobile d'abord, lisible aussi sur l'écran d'un PC de bureau.
 *
 * RÈGLE : aucune couleur, aucun rayon, aucune police en dur hors du bloc de
 * tokens ci-dessous.
 */

:root {
  --iri-bleu: #10509d;
  --iri-bleu-clair: #d0e0f0;
  --iri-bleu-fonce: #0d4384;
  --iri-bleu-voile: #9fb9d9;
  --creme: #fafaf7;
  --papier: #ffffff;
  --bordure: #dde0e4;
  --bordure-douce: #e9ebee;
  --encre: #22262c;
  --encre-douce: #5c646f;
  --encre-discrete: #7a828c;
  --sur-marque: #ffffff;
  --code-fond: #1f2a37;
  --code-encre: #f3f5f7;
  --danger: #a4262c;
  --danger-fond: #fdf3f3;
  --danger-bordure: #f0caca;
  --attention: #8a5300;
  --attention-fond: #fff6e5;
  --succes: #1d6b3f;
  --succes-fond: #eef8f1;
  --succes-bordure: #c3e3cf;

  --rayon-carte: 16px;
  --rayon-controle: 10px;
  --filet: 1px;

  --police: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-titre: "Fraunces", Georgia, "Times New Roman", serif;
  --police-code: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --corps: 17px;
  --interligne: 1.55;
  --t-titre: 1.7rem;
  --t-sous-titre: 1.15rem;
  --t-note: 0.88rem;
  --t-code: 0.86rem;
  --t-eyebrow: 11px;

  --marge-page: 20px;
  --padding-carte: 20px;
  --espace-bloc: 14px;
  --cible: 48px;
  --largeur-page: 46rem;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("fraunces-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* === FIN DES TOKENS ====================================================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; background: var(--creme); }
body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--police);
  font-size: var(--corps);
  line-height: var(--interligne);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0 0 8px; line-height: 1.25; }
h1 { font-family: var(--police-titre); font-size: var(--t-titre); font-weight: 600; }
h2 { font-size: var(--t-sous-titre); font-weight: 700; }
p { margin: 0 0 10px; }
a { color: var(--iri-bleu); overflow-wrap: anywhere; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--iri-bleu-voile); outline-offset: 2px; }
.mono { font-family: var(--police-code); }
.pour-lecteur {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.eyebrow {
  margin: 0 0 6px;
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre-discrete);
}
.note { font-size: var(--t-note); color: var(--encre-douce); }

/* --- Bandeau ------------------------------------------------------------- */
.bandeau { background: var(--iri-bleu); color: var(--sur-marque); padding: 18px 0; }
.bandeau-contenu {
  max-width: var(--largeur-page); margin: 0 auto; padding: 0 var(--marge-page);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.bandeau-nom { margin: 0; font-family: var(--police-titre); font-size: var(--t-sous-titre); font-weight: 600; }
.bandeau-outil {
  margin: 0; font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--iri-bleu-clair);
}

/* --- Page et cartes ------------------------------------------------------ */
.page { max-width: var(--largeur-page); margin: 0 auto; padding: var(--marge-page); }
.bloc {
  background: var(--papier);
  border: var(--filet) solid var(--bordure);
  border-radius: var(--rayon-carte);
  padding: var(--padding-carte);
  margin-bottom: var(--espace-bloc);
}
.loyaute { color: var(--encre-douce); margin: 0; }
.loyaute strong { color: var(--encre); }

.annonce {
  border-radius: var(--rayon-controle); padding: 12px 16px; margin-bottom: var(--espace-bloc);
  border: var(--filet) solid;
}
.annonce.ok { background: var(--succes-fond); color: var(--succes); border-color: var(--succes-bordure); }
.annonce.ko { background: var(--danger-fond); color: var(--danger); border-color: var(--danger-bordure); }

/* --- Boutons ------------------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--cible); padding: 0 18px;
  border: var(--filet) solid var(--bordure); border-radius: var(--rayon-controle);
  background: var(--papier); color: var(--encre);
  font: inherit; font-weight: 600; cursor: pointer;
}
.bouton.principal { background: var(--iri-bleu); border-color: var(--iri-bleu); color: var(--sur-marque); }
.bouton.principal:hover { background: var(--iri-bleu-fonce); }

/* --- Onglets de système ---------------------------------------------------
   Sans JavaScript, les trois panneaux s'affichent l'un sous l'autre et la
   barre d'onglets reste cachée ; `diag.js` la montre et n'ouvre qu'un panneau. */
.onglets {
  display: flex; gap: 4px; margin: 6px 0 14px;
  border-bottom: var(--filet) solid var(--bordure);
}
.onglets button {
  min-height: var(--cible); padding: 0 16px; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--encre-douce); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.onglets button[aria-selected="true"] { color: var(--iri-bleu); border-bottom-color: var(--iri-bleu); }
.panneau + .panneau { margin-top: 18px; }
.js .panneau + .panneau { margin-top: 0; }
.js .panneau-titre { display: none; }
.consigne { font-weight: 600; }
.commande {
  display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
}
.commande code {
  flex: 1 1 20rem; min-width: 0;
  background: var(--code-fond); color: var(--code-encre);
  font-family: var(--police-code); font-size: var(--t-code);
  padding: 12px 14px; border-radius: var(--rayon-controle);
  overflow-wrap: anywhere; user-select: all;
}
.commande .copier { flex: 0 0 auto; min-width: 7rem; }

/* --- Coller -------------------------------------------------------------- */
.coller summary { cursor: pointer; color: var(--iri-bleu); font-weight: 600; min-height: var(--cible);
                  display: flex; align-items: center; }
.coller textarea {
  width: 100%; min-height: 8rem; margin: 6px 0 10px; padding: 10px 12px;
  border: var(--filet) solid var(--bordure); border-radius: var(--rayon-controle);
  font-family: var(--police-code); font-size: 16px; resize: vertical; background: var(--papier);
  color: var(--encre);
}

/* --- Postes -------------------------------------------------------------- */
.postes { list-style: none; margin: 8px 0 12px; padding: 0; }
.poste {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 10px 0; border-bottom: var(--filet) solid var(--bordure-douce);
}
.poste:last-child { border-bottom: 0; }
.poste-nom { font-weight: 700; }
.poste-systeme { color: var(--encre-douce); }
.poste-alerte {
  font-size: var(--t-note); font-weight: 600; padding: 2px 10px; border-radius: 999px;
  background: var(--attention-fond); color: var(--attention);
}
.poste-alerte.rouge { background: var(--danger-fond); color: var(--danger); }
.vide { color: var(--encre-discrete); font-style: italic; padding: 8px 0; }

/* --- Saisie du code ------------------------------------------------------ */
.code-form label { display: block; font-weight: 600; margin: 12px 0 6px; }
.code-ligne { display: flex; gap: 8px; flex-wrap: wrap; }
.code-ligne input {
  flex: 1 1 12rem; min-height: var(--cible); padding: 0 14px;
  border: var(--filet) solid var(--bordure); border-radius: var(--rayon-controle);
  font-family: var(--police-code); font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase;
}

.pied { max-width: var(--largeur-page); margin: 0 auto; padding: 8px var(--marge-page) 32px;
        font-size: var(--t-note); color: var(--encre-discrete); }

@media (min-width: 900px) {
  :root { --t-titre: 2rem; --padding-carte: 26px; }
}