/* =========================================================================
   Documentation de Toutadmin — feuille de style autonome.

   Ce site ne partage aucun fichier avec le CMS : il est copié tel quel sur
   un hébergement statique. Les couleurs reprennent la palette institutionnelle
   du produit pour que la documentation et le logiciel se ressemblent, mais les
   jetons sont redéclarés ici, sans dépendance.

   Le sens de lecture n'est pas figé : les marges emploient les propriétés
   logiques, comme dans le produit.
   ========================================================================= */

:root {
  --brand-deep: #0b46d1;
  --brand-deep-2: #0a2f8f;

  --bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --surface-hover: #f2f6fd;
  --border: #d5dce6;
  --border-strong: #b9c4d4;

  --text: #10193a;
  --text-secondary: #55618a;
  --text-tertiary: #8792ab;

  --accent: #0a66ff;
  --accent-hover: #0b52cc;
  --accent-soft: #e8f0ff;
  --accent-ring: rgba(10, 102, 255, 0.24);

  --success: #0a7d32;
  --success-bg: #e7f4ec;
  --success-border: #b6ddc4;
  --warning: #96560a;
  --warning-bg: #fdf2e3;
  --warning-border: #efd3a8;
  --danger: #c8102e;
  --danger-bg: #fdecef;
  --danger-border: #f2c2ca;

  --radius: 4px;
  --shadow-xs: 0 1px 2px rgba(16, 25, 58, 0.06);
  --shadow-sm: 0 2px 8px rgba(16, 25, 58, 0.08);

  --sidebar: 262px;
  --toc: 210px;
  --measure: 74ch;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0b1020;
  --surface: #131a2e;
  --surface-2: #182034;
  --surface-hover: #1d263d;
  --border: #2a3450;
  --border-strong: #3a4666;

  --text: #e8ecf6;
  --text-secondary: #a3aec9;
  --text-tertiary: #7b86a3;

  --accent: #5b9bff;
  --accent-hover: #7fb2ff;
  --accent-soft: #16233f;
  --accent-ring: rgba(91, 155, 255, 0.3);

  --success: #5fd08a;
  --success-bg: #12281c;
  --success-border: #24512f;
  --warning: #e3ae62;
  --warning-bg: #2b2113;
  --warning-border: #52401f;
  --danger: #ff8095;
  --danger-bg: #2c1420;
  --danger-border: #56222f;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 78px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.62;
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* ---------------------------------------------------------------- bandeau */

.top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  height: 56px;
  background: linear-gradient(100deg, var(--brand-deep-2), var(--brand-deep));
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.top a { color: #fff; }
.top a:hover { color: #fff; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -0.01em; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.78rem;
  font-weight: 700;
}
.brand small { display: block; font-size: 0.7rem; font-weight: 400; opacity: 0.72; line-height: 1; }

.top-spacer { flex: 1; }

.top-search {
  position: relative;
  width: min(320px, 40vw);
}
.top-search input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  font: inherit;
  font-size: 0.85rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
}
.top-search input::placeholder { color: rgba(255, 255, 255, 0.66); }
.top-search input:focus { background: rgba(255, 255, 255, 0.2); outline-color: #fff; }

.results {
  position: absolute;
  inset-inline-start: 0;
  top: 38px;
  width: min(460px, 84vw);
  max-height: 62vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 5px;
}
.results a {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius);
  color: var(--text);
}
.results a:hover,
.results a.is-active { background: var(--surface-hover); text-decoration: none; }
.results .r-title { font-weight: 600; font-size: 0.87rem; }
.results .r-path { font-size: 0.74rem; color: var(--text-tertiary); }
.results .r-empty { padding: 10px; color: var(--text-secondary); font-size: 0.85rem; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.2); }
.nav-toggle { display: none; }

/* ---------------------------------------------------------------- ossature */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr) var(--toc);
  gap: 0;
  max-width: 1500px;
  margin: 0 auto;
  align-items: start;
}

.side {
  position: sticky;
  top: 56px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 20px 12px 40px;
  border-inline-end: 1px solid var(--border);
  background: var(--surface);
}

.side h2 {
  margin: 18px 0 5px;
  padding-inline-start: 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.side h2:first-child { margin-top: 0; }

.side a {
  display: block;
  padding: 5px 10px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 0.875rem;
  border-inline-start: 2px solid transparent;
}
.side a:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.side a.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  border-inline-start-color: var(--accent);
}

main { padding: 26px 34px 80px; min-width: 0; }
.prose { max-width: var(--measure); }
/* Un tableau large — le lexique et ses 16 langues — déborderait d'une colonne
   calibrée pour la lecture : ces pages prennent toute la place disponible. */
.prose.is-wide { max-width: none; }
.prose.is-wide p,
.prose.is-wide ul,
.prose.is-wide ol,
.prose.is-wide .note,
.prose.is-wide pre { max-width: var(--measure); }

.toc {
  position: sticky;
  top: 56px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 26px 16px 40px;
  font-size: 0.82rem;
}
.toc strong {
  display: block;
  margin-bottom: 7px;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.toc a {
  display: block;
  padding-block: 3px;
  padding-inline: 9px 0;
  color: var(--text-secondary);
  border-inline-start: 2px solid var(--border);
}
.toc a:hover { color: var(--text); text-decoration: none; }
.toc a.is-active { color: var(--accent); border-inline-start-color: var(--accent); }
.toc a.lvl-3 { padding-inline-start: 20px; font-size: 0.78rem; }

/* ---------------------------------------------------------------- contenu */

h1 {
  margin: 0 0 6px;
  font-size: 1.85rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.lede {
  margin: 0 0 26px;
  font-size: 1.03rem;
  color: var(--text-secondary);
  max-width: 68ch;
}

h2 {
  margin: 38px 0 12px;
  padding-bottom: 7px;
  font-size: 1.22rem;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--border);
}
h3 { margin: 26px 0 8px; font-size: 1.02rem; }
h4 { margin: 20px 0 6px; font-size: 0.92rem; color: var(--text-secondary); }

p { margin: 0 0 13px; }
ul, ol { margin: 0 0 13px; padding-inline-start: 22px; }
li { margin-bottom: 5px; }
li > ul, li > ol { margin-top: 5px; }

strong { font-weight: 640; }
code {
  font-family: var(--mono);
  font-size: 0.85em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow-wrap: anywhere;
}
pre {
  margin: 0 0 15px;
  padding: 13px 15px;
  overflow-x: auto;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.84rem;
  line-height: 1.55;
}
pre code { padding: 0; border: 0; background: none; font-size: inherit; }

.anchor {
  margin-inline-start: 7px;
  font-weight: 400;
  color: var(--text-tertiary);
  opacity: 0;
  text-decoration: none;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }

/* ---------------------------------------------------------------- tableaux */

.table-wrap {
  overflow-x: auto;
  margin: 0 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
thead th {
  position: sticky;
  top: 0;
  text-align: start;
  padding: 9px 13px;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td { padding: 9px 13px; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-hover); }
td.mono, .mono { font-family: var(--mono); font-size: 0.83em; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- encarts */

.note, .warn, .good {
  margin: 0 0 16px;
  padding: 12px 15px;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
}
.note > :last-child, .warn > :last-child, .good > :last-child { margin-bottom: 0; }
.note-title { display: block; font-weight: 650; margin-bottom: 4px; font-size: 0.88rem; }
.warn { border-inline-start-color: var(--warning); background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.warn .note-title { color: inherit; }
.good { border-inline-start-color: var(--success); background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.good .note-title { color: inherit; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.card {
  display: block;
  padding: 14px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  box-shadow: var(--shadow-xs);
}
a.card:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow-sm); }
.card-title { display: block; margin-bottom: 4px; font-size: 0.95rem; font-weight: 650; color: var(--accent); }
.card p { margin: 0; font-size: 0.84rem; color: var(--text-secondary); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}
.stat {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.stat b { display: block; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; }
.stat span { font-size: 0.76rem; color: var(--text-secondary); }

.tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.tag-done { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.tag-todo { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.tag-off { background: var(--surface-2); color: var(--text-tertiary); }

/* ---------------------------------------------------- explorateur du lexique */

.lex-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: end;
  margin: 0 0 14px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label { font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); }
.field input, .field select {
  height: 32px;
  padding: 0 9px;
  font: inherit;
  font-size: 0.86rem;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.field input { min-width: 190px; }
.lex-count { margin-inline-start: auto; font-size: 0.8rem; color: var(--text-secondary); }

#lex-table td:first-child { white-space: nowrap; }
#lex-table td[lang="ar"] { direction: rtl; text-align: start; }
.lex-more { margin: 12px 0 0; text-align: center; }
.btn {
  padding: 7px 15px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.btn:hover { background: var(--surface-hover); border-color: var(--accent); }

/* ---------------------------------------------------------------- pied */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 0.88rem;
}
.pager span { color: var(--text-tertiary); }

.foot {
  margin-top: 22px;
  font-size: 0.78rem;
  color: var(--text-tertiary);
}

/* ---------------------------------------------------------------- écrans étroits */

@media (max-width: 1180px) {
  .shell { grid-template-columns: var(--sidebar) minmax(0, 1fr); }
  .toc { display: none; }
}

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .nav-toggle { display: grid; }
  .side {
    position: fixed;
    inset-block: 56px 0;
    inset-inline-start: 0;
    width: min(300px, 84vw);
    z-index: 45;
    border-inline-end: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transform: translateX(-102%);
    transition: transform 0.18s ease;
    max-height: none;
  }
  html[dir="rtl"] .side { transform: translateX(102%); }
  .side.is-open { transform: none; }
  main { padding: 20px 17px 64px; }
  .top-search { width: auto; flex: 1; }
  .brand small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .side { transition: none; }
}

@media print {
  .top, .side, .toc, .pager { display: none; }
  .shell { grid-template-columns: 1fr; }
  main { padding: 0; }
  body { background: #fff; }
}

/* ------------------------------------------------------------- langues
   Le choix de la langue tient dans un menu replié : seize drapeaux dans la
   barre du haut la rempliraient, et sur un téléphone il n'en resterait rien.
   Un <details> suffit — aucun script, donc le menu marche aussi quand le
   navigateur bloque le JavaScript. */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; cursor: pointer; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu[open] > summary { background: var(--surface-2); }

.lang {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
}
.lang a {
  padding: 6px 10px;
  border-radius: 5px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.lang a:hover { background: var(--surface-2); color: var(--text); }
.lang a.is-active { background: var(--accent); color: #fff; }

/* Une page servie dans une autre langue que celle demandée le dit, sans
   crier : l'information est utile, elle n'est pas une erreur. */
.note.pending { border-inline-start-color: var(--warning); }

/* Les tableaux de référence sont longs : l'en-tête reste visible. */
table.ref thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
table.ref td code { font-size: 0.8rem; }

@media (max-width: 700px) {
  .lang { grid-template-columns: 1fr; max-height: 60vh; overflow-y: auto; }
}