/* Feuille de style commune des documentations d'utilisation de la
   messagerie chiffrée (exploitation, administrateur, utilisateur).
   Fichiers locaux, sans ressource externe. */

:root {
  --fond: #f6f7f9;
  --surface: #ffffff;
  --texte: #111827;
  --doux: #5b6472;
  --bord: #e3e6eb;
  --accent: #2563eb;
  --accent-doux: #e8efff;
  --code-fond: #f1f3f6;
  --ok: #047857;
  --ok-fond: #e7f6ef;
  --attention: #b45309;
  --attention-fond: #fdf3e2;
  --danger: #b91c1c;
  --danger-fond: #fdeaea;
  --lien-autre: #7c3aed;
  --lien-autre-fond: #f2ecff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0f141b;
    --surface: #161d27;
    --texte: #e7ebf1;
    --doux: #9aa4b5;
    --bord: #273142;
    --accent: #7aa2ff;
    --accent-doux: #1b2740;
    --code-fond: #1d2532;
    --ok: #34d399;
    --ok-fond: #12291f;
    --attention: #f5b83d;
    --attention-fond: #2b2212;
    --danger: #f87171;
    --danger-fond: #2c1616;
    --lien-autre: #b79bff;
    --lien-autre-fond: #241b38;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

.mise-en-page {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  max-width: 1320px;
  margin: 0 auto;
}

nav.sommaire {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 24px 18px;
  border-right: 1px solid var(--bord);
  font-size: 14px;
}
nav.sommaire .titre-doc { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
nav.sommaire .sous-titre { color: var(--doux); margin-bottom: 16px; }
nav.sommaire ol { list-style: none; padding: 0; margin: 0; }
nav.sommaire ol ol { padding-left: 14px; margin: 2px 0 6px; }
nav.sommaire a { display: block; color: var(--texte); text-decoration: none; padding: 3px 8px; border-radius: 6px; }
nav.sommaire a:hover { background: var(--accent-doux); color: var(--accent); }
nav.sommaire > ol > li > a { font-weight: 600; margin-top: 6px; }

main { padding: 32px 40px 80px; min-width: 0; }

header.entete { margin-bottom: 28px; }
header.entete h1 { margin: 0 0 6px; font-size: 30px; line-height: 1.2; }
header.entete p { margin: 0; color: var(--doux); }

h2 {
  font-size: 23px;
  margin: 48px 0 12px;
  padding-top: 12px;
  border-top: 1px solid var(--bord);
}
h3 { font-size: 18px; margin: 30px 0 8px; }
h4 { font-size: 16px; margin: 22px 0 6px; }
h2, h3, h4 { scroll-margin-top: 16px; }

p, li { max-width: 78ch; }
a { color: var(--accent); }
.doux { color: var(--doux); }

code, kbd, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.9em; }
code { background: var(--code-fond); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
kbd { border: 1px solid var(--bord); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--surface); }
pre {
  background: var(--code-fond);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 10px 14px;
  overflow-x: auto;
  max-width: 100%;
}
pre code { background: none; padding: 0; }

/* Chemin dans l'interface : Page › Carte › Bouton */
.chemin { font-weight: 600; }
.chemin .sep { color: var(--doux); font-weight: 400; margin: 0 4px; }
.bouton {
  display: inline-block;
  font-weight: 600;
  font-size: 0.92em;
  padding: 0 7px;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: var(--surface);
  white-space: nowrap;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0 18px;
  font-size: 14.5px;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: 8px;
  overflow: hidden;
  display: block;
  overflow-x: auto;
}
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--bord); }
th { background: var(--code-fond); font-weight: 600; }
tr:last-child td { border-bottom: none; }

.encadre {
  border: 1px solid var(--bord);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 14px 0;
  background: var(--surface);
  max-width: 86ch;
}
.encadre > :first-child { margin-top: 0; }
.encadre > :last-child { margin-bottom: 0; }
.encadre .titre { font-weight: 700; display: block; margin-bottom: 2px; }
.info { border-left-color: var(--accent); background: var(--accent-doux); }
.ok { border-left-color: var(--ok); background: var(--ok-fond); }
.attention { border-left-color: var(--attention); background: var(--attention-fond); }
.danger { border-left-color: var(--danger); background: var(--danger-fond); }
/* Action d'un autre acteur (administrateur, client) */
.autre { border-left-color: var(--lien-autre); background: var(--lien-autre-fond); }

ol.etapes { counter-reset: etape; list-style: none; padding-left: 0; }
ol.etapes > li { counter-increment: etape; position: relative; padding-left: 40px; margin: 10px 0; }
ol.etapes > li::before {
  content: counter(etape);
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}

figure { margin: 16px 0 22px; }
figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--bord);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
figure.etroite img { max-width: 420px; }
figcaption { color: var(--doux); font-size: 14px; margin-top: 6px; }
.figures { display: flex; flex-wrap: wrap; gap: 16px; }
.figures figure { margin: 8px 0; }

.badge {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 1px 8px; border-radius: 999px; vertical-align: middle;
}
.badge.exploitant { background: var(--accent-doux); color: var(--accent); }
.badge.admin { background: var(--lien-autre-fond); color: var(--lien-autre); }
.badge.client { background: var(--attention-fond); color: var(--attention); }
.badge.avenir { background: var(--code-fond); color: var(--doux); }

@media (max-width: 900px) {
  .mise-en-page { display: block; }
  nav.sommaire { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--bord); padding: 16px; }
  main { padding: 20px 16px 60px; }
  figure.etroite img { max-width: 100%; }
}

@media print {
  nav.sommaire { display: none; }
  .mise-en-page { display: block; }
  main { padding: 0; }
  h2 { page-break-before: always; }
  figure, table, pre, .encadre { page-break-inside: avoid; }
}

/* Tailles d'images et premier titre (classes : pas de style en ligne,
   interdit par la politique de sécurité du site web). */
img.mini { max-width: 300px; }
img.moyen { max-width: 340px; }
img.large { max-width: 640px; }
img.pleine { max-width: 100%; }
h2.premier { border-top: none; margin-top: 0; }