/* ==============================
 * kit-style.css — Kit de documentation HTML
 * Généré depuis Kit - Stylesheet - HTML - Code.js v1.10
 * Toutes les valeurs dérivent des constantes du stylesheet.
 * ============================== */

/* ── Variables CSS (constantes stylesheet → CSS) ── */
:root {
  --heading-color:          #003399;
  --accent-color: #D95319;
  --cover-accent-color:  #DC5F02;
  --body-text-color:     #333333;
  --table-header-text-color:         #003399;
  --table-header-fill-color: #EEF2FA;
  --table-rule-color:        #E6E6E6;
  --table-alt-row-color:    #F2F2F2;
  --discreet-text-color:      #999999;
  --tip-text-color:      #FF6600;
  --glossary-term-color: #008080;
  --hass-entity-color:    #7952B3;
  --variable-name-color: #2E7D32;
  --url-color:     #1565C0;
  --bar-background-color: #FAF7F0;
  --cover-num-color:      #F0C39B;
  --bar-text-color:       #1B2A5B;

  /* Reglage lecteur. La feuille est en rem : une seule declaration met
     la page entiere a l'echelle. Un pourcentage, non des pixels, pour
     que le reglage se compose avec celui du navigateur au lieu de
     l'ecraser. */
  --scale: 1;

  /* Polices */
  --font-body:  Verdana, Geneva, sans-serif;
  --font-cover: 'Poppins', 'Segoe UI', sans-serif;
  --font-code:  'Courier New', Courier, monospace;

  /* Tailles */
  --size-h1:    1.10rem;
  --size-h2:    1.00rem;
  --size-h3:    0.95rem;
  --size-body:  0.90rem;
  --size-table: 0.85rem;
  --size-tip:   0.85rem;
  --size-note:  0.82rem;
  --size-footer:0.82rem;
  --size-prompt:0.82rem;

  /* Indentation (DXA → em — approximation écran) */
  --indent-l1:  1.2em;
  --indent-l2:  2.6em;
  --indent-l3:  4.0em;

  /* Navbar */
  --nav-h:      44px;
}

/* ── Reset léger ── */
*, *::before, *::after { box-sizing: border-box; }

/* Aucun lien n'est souligne, nulle part et dans aucun etat. La couleur
   porte l'affordance et le curseur en main la confirme ; le soulignement
   n'existait de toute facon qu'a la souris, donc pas sur ecran tactile.
   Declaree ici plutot que regle par regle : la v1.59 avait retire sept
   soulignements, et la regle .lang-item ecrite en v1.63 a oublie le sien
   — retirer ne protege pas des suivants. */
a { text-decoration: none; }

/* Reglage lecteur — trois crans. La feuille etant en rem, une seule
   declaration met la page a l'echelle. Sans reglage memorise, --scale
   vaut 1 et rien ne change. */
html { font-size: calc(100% * var(--scale)); }
:root[data-size="l"]  { --scale: 1.15; }
:root[data-size="xl"] { --scale: 1.30; }
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--body-text-color);
  background: #fff;
}
a { color: var(--glossary-term-color); }

/* ── Navbar ── */
/* La barre entiere sort du reglage de taille du texte. Ses mesures
   gardent leurs valeurs en rem, divisees par --scale : a la taille
   normale elles valent ce qu'elles valaient avant la v1.71, dans la taille
   de base du navigateur du lecteur, et le reglage ne les change plus —
   v1.73. Une mesure ajoutee a la barre suit la meme ecriture. */

.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bar-background-color);
  color: var(--bar-text-color);
  height: var(--nav-h);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.topnav-inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 calc(1.2rem / var(--scale));
}
.topnav-home {
  position: relative;
  z-index: 1;
  font-size: calc(1.1rem / var(--scale));
  color: var(--bar-text-color) !important;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}
.topnav-home:hover { opacity: 0.75; }
.topnav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Bouton de reglage de la taille du texte. Deux A de corps different :
   le dessin dit ce que le bouton fait, sans mot a traduire. */
/* Badge d'information — premiere porte, pour le lecteur curieux.
   Il defile avec le texte : positionne dans le flux, non fixe. */
.info-badge {
  position: absolute;
  top: calc(var(--nav-h) + 0.7rem);
  right: 1.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--url-color); color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  z-index: 20;
}
.info-badge:hover { box-shadow: 0 2px 7px rgba(0,0,0,0.30); }
.info-badge:focus-visible { outline: 2px solid var(--url-color); outline-offset: 3px; }

/* Phrase d'adaptation — deuxieme porte. Elle vient apres le contenu :
   le lecteur venu lire ne la rencontre qu'en descendant. */
.idx-adapt {
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--table-alt-row-color);
  font-size: var(--size-note);
  color: var(--discreet-text-color);
  text-align: center;
}
.idx-adapt a { color: var(--url-color); }

.size-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  background: none;
  border: 0;
  padding: 0 calc(0.2rem / var(--scale));
  cursor: pointer;
  color: var(--bar-text-color);
  font-family: var(--font-body);
  line-height: 1;
  border-radius: 3px;
}
.size-btn[hidden] { display: none; }
.size-btn .size-a1 { font-size: calc(0.72rem / var(--scale)); }
.size-btn .size-a2 { font-size: calc(1.00rem / var(--scale)); }
.size-btn:hover { background: rgba(255,255,255,0.18); }
.size-btn:focus-visible { outline: 2px solid var(--bar-text-color); outline-offset: 2px; }

.topnav-spacer {
  display: inline-block;
  width: calc(0.8rem / var(--scale));
  flex-shrink: 0;
}
.topnav-history {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  color: var(--bar-text-color) !important;
  text-decoration: none;
  line-height: 1;
  opacity: 0.90;
  transition: opacity 0.15s;
}
.topnav-history:hover { opacity: 1; }
.topnav-pdf {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  color: var(--bar-text-color) !important;
  text-decoration: none;
  line-height: 1;
  opacity: 0.90;
  transition: opacity 0.15s;
}
.topnav-pdf:hover { opacity: 1; }
.topnav-download {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  color: var(--bar-text-color) !important;
  text-decoration: none;
  line-height: 1;
  opacity: 0.90;
  transition: opacity 0.15s;
}
.topnav-download:hover { opacity: 1; }
.topnav-doctitle {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-family: var(--font-cover);
  font-size: calc(0.88rem / var(--scale));
  font-weight: 600;
  color: var(--bar-text-color);
  letter-spacing: 0.01em;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 calc(1rem / var(--scale));
}
/* .nav-sep supprimé — navbar simplifiée */

/* ── Layout document ── */
.page-layout {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

/* ── TOC ── */
.toc {
  flex: 0 0 200px;
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  max-height: calc(100vh - var(--nav-h) - 3rem);
  overflow-y: auto;
  font-size: 0.78rem;
  border-left: 2px solid var(--table-alt-row-color);
  padding-left: 0.8rem;
}
.toc-title {
  font-size: 0.72rem;
  font-weight: bold;
  color: var(--discreet-text-color);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc li { margin: 0.2rem 0; }
.toc li a {
  color: var(--body-text-color);
  text-decoration: none;
  display: block;
  padding: 1px 0;
  line-height: 1.4;
}
.toc li a:hover { color: var(--heading-color); }
.toc-l1 a { font-weight: bold; color: var(--heading-color); }
.toc-l2 { padding-left: 0.8em; }
.toc-l3 { padding-left: 1.6em; }

/* ── Contenu document ── */
.doc-content { flex: 1; min-width: 0; }

/* ── Titres ── */
.doc-h1, .doc-h2, .doc-h3 {
  font-family: var(--font-body);
  color: var(--heading-color);
  font-weight: normal;
  margin-top: 1.6rem;
  margin-bottom: 0.2rem;
  display: flex;
  gap: 0.5em;
  align-items: baseline;
  padding-left: var(--indent-l1);
}
.doc-h1 { font-size: var(--size-h1); margin-left: calc(-1 * var(--indent-l1)); }
.doc-h2 { font-size: var(--size-h2); padding-left: var(--indent-l2); margin-left: calc(-1 * var(--indent-l2)); }
.doc-h3 { font-size: var(--size-h3); padding-left: var(--indent-l3); margin-left: calc(-1 * var(--indent-l3)); }
.doc-h1.tight, .doc-h2.tight, .doc-h3.tight { margin-top: 0.5rem; }
.h-num { color: var(--heading-color); flex: 0 0 auto; }
.h-text { flex: 1; }

/* ── Paragraphes ── */
.p1, .bp1, .sp1, .bsp1,
.li1, .bli1, .li1cont {
  font-size: var(--size-body);
  line-height: 1.55;
  text-align: justify;
  margin: 0.35rem 0;
  padding-left: var(--indent-l1);
}
.p2, .bp2, .sp2, .bsp2,
.li2, .bli2, .li2cont {
  font-size: var(--size-body);
  line-height: 1.55;
  text-align: justify;
  margin: 0.35rem 0;
  padding-left: var(--indent-l2);
}
.p3, .bp3, .sp3, .bsp3,
.li3, .bli3, .li3cont {
  font-size: var(--size-body);
  line-height: 1.55;
  text-align: justify;
  margin: 0.35rem 0;
  padding-left: var(--indent-l3);
}

/* sp = sous-paragraphe : indent supplémentaire */
.sp1 { padding-left: calc(var(--indent-l1) + 0.8em); }
.sp2 { padding-left: calc(var(--indent-l2) + 0.8em); }
.sp3 { padding-left: calc(var(--indent-l3) + 0.8em); }
.bsp1 { padding-left: calc(var(--indent-l1) + 0.8em); }
.bsp2 { padding-left: calc(var(--indent-l2) + 0.8em); }
.bsp3 { padding-left: calc(var(--indent-l3) + 0.8em); }

/* ── Listes à tiret ── */
.li1, .bli1 { display: flex; gap: 0.4em; padding-left: var(--indent-l1); }
.li2, .bli2 { display: flex; gap: 0.4em; padding-left: var(--indent-l2); }
.li3, .bli3 { display: flex; gap: 0.4em; padding-left: var(--indent-l3); }
.li-dash { flex: 0 0 auto; color: var(--body-text-color); }
.li-text { flex: 1; text-align: justify; }
.li1cont { padding-left: calc(var(--indent-l1) + 0.9em); margin-top: 0.1rem; }
.li2cont { padding-left: calc(var(--indent-l2) + 0.9em); margin-top: 0.1rem; }
.li3cont { padding-left: calc(var(--indent-l3) + 0.9em); margin-top: 0.1rem; }

/* ── Tips ── */
.tip {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  font-size: var(--size-tip);
  color: var(--tip-text-color);
  font-style: italic;
  margin: 0.5rem 0;
}
.tip1 { padding-left: var(--indent-l1); }
.tip2 { padding-left: var(--indent-l2); }
.tip3 { padding-left: var(--indent-l3); }
.tip-bulb { flex: 0 0 auto; font-style: normal; }
.tip-text { flex: 1; text-align: justify; line-height: 1.5; }

/* ── Notes ── */
.note {
  display: flex;
  align-items: flex-start;
  font-size: var(--size-note);
  color: var(--glossary-term-color);
  margin: 0.4rem 0;
  line-height: 1.5;
}
.note-label {
  flex-shrink: 0;
  font-weight: bold;
  font-style: normal;
  color: var(--glossary-term-color);
  margin-right: 0.45em;
  white-space: nowrap;
}
.note-body {
  flex: 1;
  font-style: italic;
  text-align: justify;
}
.note1 { padding-left: var(--indent-l1); }
.note2 { padding-left: var(--indent-l2); }
.note3 { padding-left: var(--indent-l3); }

/* ── Marques (brand names) — v1.03 ── */
.brand-name {
  font-variant: small-caps;
  font-weight: bold;
}

/* ── Variable friendly names — v1.04 ── */
.var-name {
  font-style: italic;
  color: var(--variable-name-color);
}

/* ── URLs détectées — v1.04 ── */
.url-link {
  color: var(--url-color);
  font-weight: bold;
  text-decoration: none;
}

/* ── Liens externes (sortent de la WebView) — v1.29 ──
   Rail posé pour distinction visuelle future (icône ↗, autre couleur, etc.).
   Vide volontairement — comportement actuel identique à .url-link.
   Pour styler : ajouter la règle dans le projet ou bumper le stylesheet. */
.url-link-external {
  /* (vide — rail v1.29) */
}

/* ── Entités HASS (device/entity names) — v1.03 ── */
.hass-entity {
  font-style: italic;
  color: var(--hass-entity-color);
}

/* ── Blocs code YAML / codeBlock — v1.10 ── */
.code-block {
  margin: 0.5rem 0;
  background: #F5F5F5;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  overflow-x: auto;
}
.code-l1 { margin-left: var(--indent-l1); }
.code-l2 { margin-left: var(--indent-l2); }
.code-l3 { margin-left: var(--indent-l3); }
.code-pre {
  font-family: var(--font-code);
  font-size: var(--size-prompt);
  color: #1A1A1A;
  margin: 0;
  padding: 0.6rem 0.9rem;
  white-space: pre;
  overflow-x: auto;
  line-height: 1.5;
}
/* Colorisation syntaxique YAML */
.yaml-key     { color: #003399;     font-weight: bold; }
.yaml-sep     { color: #888888; }
.yaml-string  { color: #1E6B1E; }
.yaml-jinja   { color: #8B4500; }
.yaml-bool    { color: #8B0000; }
.yaml-comment { color: #888888; font-style: italic; }
.yaml-text    { color: #1A1A1A; }

/* ── Blocs raw — v1.31 ──
   rawBlock() produit ses propres classes, séparées de codeBlock.
   white-space: pre-wrap autorise le wrap visuel des lignes longues —
   alignement avec le rendu docx (cellule Word = wrap automatique).
   Pas d'overflow-x — pas de scrollbar horizontale.                */
.raw-block {
  margin: 0.5rem 0;
  background: #F5F5F5;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
}
.raw-l1 { margin-left: var(--indent-l1); }
.raw-l2 { margin-left: var(--indent-l2); }
.raw-l3 { margin-left: var(--indent-l3); }
.raw-pre {
  font-family: var(--font-code);
  font-size: var(--size-prompt);
  color: #1A1A1A;
  margin: 0;
  padding: 0.6rem 0.9rem;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

/* ── Meta table entity_id / friendly_name — v1.10 ── */
.meta-table-wrap {
  margin: 0.3rem 0;
  overflow-x: auto;
}
.meta-table-l1 { margin-left: var(--indent-l1); }
.meta-table-l2 { margin-left: var(--indent-l2); }
.meta-table-l3 { margin-left: var(--indent-l3); }
.meta-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-table);
}
.meta-table td {
  padding: 3px 8px;
  border: 1px solid #CCCCCC;
  vertical-align: top;
  line-height: 1.4;
}
.meta-entity {
  font-family: var(--font-code);
  font-size: var(--size-prompt);
  color: var(--glossary-term-color);
  white-space: nowrap;
}
.meta-name {
  font-style: italic;
  color: var(--discreet-text-color);
}
.meta-table tr.alt-row td { background: var(--table-alt-row-color); }

/* ── Entity ref inline — v1.10 ── */
.entity-ref {
  font-family: var(--font-code);
  font-size: 0.85em;
  color: var(--glossary-term-color);
}

/* ── P tight (avant metaTable) — v1.10 ── */
.p-tight { margin-bottom: 0 !important; }

/* ── Blocs prompt — wrapper avec bouton clipboard ── */
.prompt-wrap {
  position: relative;
  display: block;
}
.prompt1-wrap { margin-left: var(--indent-l1); }
.prompt2-wrap { margin-left: var(--indent-l2); }
.prompt3-wrap { margin-left: var(--indent-l3); }
.prompt-wrap .prompt {
  margin-left: 0;
}
.prompt-copy-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  background: rgba(255,255,255,0.85);
  border: 1px solid #C8D4F0;
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  color: var(--heading-color);
  font-size: 0.78rem;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0.25em;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
  z-index: 2;
}
.prompt-copy-btn:hover { opacity: 1; background: #fff; }
.prompt-copy-btn.copied { color: #1a8a3a; border-color: #a8d5b5; background: #f0fff4; opacity: 1; }

/* ── Blocs prompt — v1.08 : border-left supprimée (miroir General v1.47) ── */
/* ── v1.27 : overflow horizontal scroll nu — préserve formatage manuel sur mobile ── */
.prompt {
  font-family: var(--font-code);
  font-size: var(--size-prompt);
  background: #F0F4FF;
  border-top: 1px solid #C8D4F0;
  border-right: 1px solid #C8D4F0;
  border-bottom: 1px solid #C8D4F0;
  color: #1A1A1A;
  padding: 0.7rem 1rem;
  margin: 0.5rem 0;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  line-height: 1.5;
  border-radius: 4px;
}
.prompt::-webkit-scrollbar { display: none; }
.prompt1 { margin-left: var(--indent-l1); }
.prompt2 { margin-left: var(--indent-l2); }
.prompt3 { margin-left: var(--indent-l3); }

/* ── Images — pic1/pic2/pic3 — v1.08 ── */
.pic-wrap {
  margin: 0.8rem 0;
  text-align: center;
  display: block;
}
.pic1-wrap { padding-left: var(--indent-l1); }
.pic2-wrap { padding-left: var(--indent-l2); }
.pic3-wrap { padding-left: var(--indent-l3); }
/* ── Sélecteur de langue — v1.36 ── */
.lang-switch {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding: 0.35rem 0;
}
.lang-switch-label {
  font-size: 0.85rem;
  color: var(--discreet-text-color);
  margin-right: 0.15rem;
}
/* Menu de langue de la barre — v1.63. <details> natif, aucun script. */
.lang-menu {
  position: relative; flex: 0 0 auto;
  display: flex; align-items: center;
}
.lang-menu > summary {
  display: inline-flex; align-items: center; gap: 2px;
  cursor: pointer; list-style: none;
  color: var(--bar-text-color);
  /* line-height nul : sans lui la boite du summary depasse le drapeau
     de sa reserve de ligne, et le drapeau se pose au-dessus de l'axe de
     la barre. Mesure au rendu, pas au jugement. */
  line-height: 0;
}
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary::marker { content: ''; }
.lang-menu > summary svg:first-child {
  width: 20px; height: 20px; display: block; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.85);
}
.lang-caret { opacity: 0.85; transition: transform 0.15s ease; }
.lang-menu[open] .lang-caret { transform: rotate(180deg); }
.lang-menu > summary:focus-visible {
  outline: 2px solid var(--bar-text-color); outline-offset: 3px;
}
.lang-menu-list {
  position: absolute; top: calc(100% + 8px); right: 0;
  z-index: 120;
  min-width: calc(10.5rem / var(--scale));
  padding: calc(0.3rem / var(--scale)) 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}
.lang-item {
  display: flex; align-items: center; gap: calc(0.55rem / var(--scale));
  padding: calc(0.5rem / var(--scale)) calc(0.8rem / var(--scale));
  color: var(--body-text-color);
  font-size: calc(0.92rem / var(--scale)); white-space: nowrap;
}
.lang-item svg { width: 20px; height: 20px; display: block; border-radius: 50%; flex: 0 0 auto; }
.lang-item:hover, .lang-item:focus-visible { background: rgba(0,0,0,0.06); }

.lang-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  text-decoration: none;
  border: 1px solid #D0D5DD;
  background: #fff;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.12s;
}
.lang-pill:hover {
  border-color: var(--heading-color);
  box-shadow: 0 1px 4px rgba(27, 42, 74, 0.18);
  transform: translateY(-1px);
}
.lang-pill:focus-visible {
  outline: 2px solid var(--heading-color);
  outline-offset: 2px;
}
.lang-pill svg {
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 50%;
}

.pic-img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}
.pic-legend {
  font-size: var(--size-note);
  font-style: italic;
  color: var(--discreet-text-color);
  text-align: center;
  margin-top: 0.4rem;
  line-height: 1.4;
  display: block;
}

/* ── Cellule image tableau — imageCell — v1.08 ── */
.img-cell {
  text-align: center;
  vertical-align: top;
  padding: 5px 8px;
  border: 1px solid #BBBBBB;
}
.img-cell-img {
  display: block;
  margin: 0 auto;
}

/* ── Tableaux ── */
.table-wrap {
  overflow-x: auto;
  margin: 0.5rem 0;
}
.table-l1 { padding-left: var(--indent-l1); }
.table-l2 { padding-left: var(--indent-l2); }
.table-l3 { padding-left: var(--indent-l3); }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-table);
  font-family: var(--font-body);
}
/* v1.76 — L'en-tete pose une teinte tres claire et un filet sous lui ;
   le corps ne garde qu'un filet entre ses lignes. Plus de cadre ni de
   verticales. Miroir du papier, General v1.95. */
th {
  background: var(--table-header-fill-color);
  color: var(--table-header-text-color);
  font-weight: bold;
  text-align: left;
  padding: 5px 8px;
  border: none;
  border-bottom: 1.5px solid var(--heading-color);
  font-size: var(--size-table);
}
td {
  padding: 5px 8px;
  border: none;
  border-bottom: 1px solid var(--table-rule-color);
  vertical-align: top;
  text-align: left;
  line-height: 1.45;
}
tr.alt-row td { background: var(--table-alt-row-color); }

/* ── Liens glossaire ── */
.glossary-link {
  color: var(--glossary-term-color);
  font-style: italic;
  text-decoration: none;
}

/* ── Constructions posees par l'auteur — v1.59 ── */
.table-wrap tbody td:first-child { font-weight: bold; }
.text-highlight {
  font-style: italic;
  color: var(--highlight-color);
}
.emphasis {
  font-style: italic;
  font-weight: 600;
  color: var(--emphasis-color);
}

/* ── Structure ── */
.bridge-para { margin: 0; padding: 0; height: 0.1rem; }
/* Meme ecart qu'entre deux paragraphes : le bloc encadre est
   symetrique, comme cote document. */
.release-para { margin: 0.35rem 0; }

/* Renvoi vers un autre document — meme apparence que cote .docx :
   italique HEADING_COLOR, souligne seulement au survol. */
.document-reference {
  color: var(--heading-color);
  font-style: italic;
  text-decoration: none;
}

/* ── Footer ── */
.doc-footer {
  border-top: 2px solid var(--accent-color);
  margin-top: 3rem;
  padding: 0.6rem 1.5rem;
}
.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-size: var(--size-footer);
}
.footer-author { font-style: italic; color: var(--heading-color); }
.footer-compiled { color: var(--accent-color); font-style: italic; }

/* ------------------------------
 * LANDING PAGE — Cover Sheet HTML
 * ------------------------------*/
body.landing {
  background: #f8f8f8;
}

.cover-page {
  max-width: 820px;
  margin: 2rem auto;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
  border-radius: 4px;
  overflow: hidden;
}

/* Header band */
.cover-header {
  background: #DC5F02;
  color: #fff;
  padding: 0.8rem 1.6rem;
  font-family: var(--font-cover);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 4px 4px 0 0;
}
.cover-header-inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
.cover-header-lastupdate {
  font-size: 0.78rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Body */
.cover-body { padding: 1.4rem 1.8rem 1.8rem; }

.cover-subtitle {
  font-family: var(--font-cover);
  font-size: 0.82rem;
  font-weight: bold;
  color: #606060;
  margin: 0 0 0.8rem 0;
  padding-left: 0;
}

/* Quote block */
/* v1.81 — Le filet de la citation tient la meme verticale que ceux des
   rubriques, a la droite de la colonne des numeros. Il s'en decalait de
   la largeur d'un retrait, et deux filets voisins ne s'alignaient pas. */
.cover-quote {
  display: flex;
  gap: calc(1.1rem + 1px);
  align-items: flex-start;
  margin: 0 0 0.9rem calc(-1.1rem - 1px);
  padding-left: 0;
}
.cover-quote-bar {
  /* v1.86 — Trace comme le filet d'une rubrique, par une bordure. En
     boite de un pixel avec un arrondi, le rendu tombait sur une largeur
     fractionnaire et l'anticrenelage eclaircissait la couleur : deux
     filets voisins, de la meme valeur, paraissaient differents. */
  flex: 0 0 0;
  width: 0;
  border-left: 1px solid var(--cover-num-color);
  align-self: stretch;
  min-height: 1.2em;
}
.cover-quote-text {
  font-family: var(--font-cover);
  font-size: 0.80rem;
  color: #606060;
  line-height: 1.55;
  flex: 1;
}

/* En-tete de la page d'accueil — v1.80. L'illustration tient la colonne
   des numeros, a gauche de l'axe du texte ; le sous-titre, la citation,
   le filet et les titres de rubrique partagent ce meme axe, avec ou sans
   image. Sous la largeur d'un telephone, l'image se retire et le texte
   reprend toute la largeur. */
.cover-head {
  display: flex;
  align-items: flex-start;
  /* v1.82 — Meme retrait qu'une rubrique : l'en-tete et les rubriques
     partagent le meme axe. v1.89 : ce retrait tombe, il doublait le
     rembourrage du corps et gaspillait la marge de gauche. */
  padding: 0 0.5rem 0 0;
}
.cover-icon {
  flex: 0 0 2.4rem;
  display: flex;
  align-items: center;
  /* L'image se centre dans la colonne, comme le numero d'une rubrique.
     Sa boite deborde de part et d'autre, a parts egales. */
  justify-content: center;
  align-self: stretch;
  /* Le filet invisible tient la place de celui des numeros : sans lui,
     le texte de l'en-tete se decalait d'un pixel. */
  border-right: 1px solid transparent;
  /* Sans min-width, la colonne s'elargit a la taille de l'image — un
     element flex ne se reduit pas sous son contenu — et tout l'en-tete
     glissait vers la droite. L'image deborde de la colonne, centree. */
  min-width: 0;
}
.cover-icon img {
  width: 40px;
  height: 40px;
}
.cover-head-text {
  flex: 1 1 auto;
  padding-left: 1.1rem;
}
@media (max-width: 560px) {
  /* v1.88 — L'illustration reste sur un ecran etroit : elle disparaissait
     en portrait, et l'en-tete perdait alors la colonne que les rubriques
     gardent, si bien que les deux axes divergeaient. Le dessin se reduit
     pour tenir dans la colonne au lieu de la deborder. */
  .cover-icon img { width: 2.2rem; height: 2.2rem; }
}

/* Separator */
.cover-separator {
  border: none;
  border-top: 1px solid #606060;
  margin: 0.8rem 0 0.8rem calc(2.4rem + 1px + 1.1rem);
}


/* TOC title */
.cover-toc-title {
  font-family: var(--font-cover);
  font-size: 0.82rem;
  font-weight: bold;
  color: #606060;
  margin: 0 0 0.7rem;
  padding-left: 1rem;
}

/* Sections — v1.77. Le numero tient sa colonne, separee du texte par un
   filet discret ; il se centre sur la hauteur de la rubrique. Le titre et
   les documents partagent le meme bord gauche. Les couleurs
   d'intercalaire restent au papier : le site n'en porte aucune. */
.cover-sections { display: flex; flex-direction: column; }
.cover-section {
  display: flex;
  align-items: stretch;
  padding: 0.75rem 0.5rem 0.75rem 0;
}
.cover-section.last { border-bottom: none; }

.cover-num {
  /* v1.89 — Colonne resserree : elle tenait 3.4rem pour un numero de
     deux chiffres, et repoussait tout le texte. */
  flex: 0 0 2.4rem;
  display: flex;
  align-items: center;
  /* v1.87 — Le numero se centre dans sa colonne, comme l'illustration.
     Cale a gauche, il ne pouvait pas partager l'axe de l'image. */
  justify-content: center;
  font-family: var(--font-cover);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  color: var(--cover-num-color);
  border-right: 1px solid var(--cover-num-color);
}
.cover-bloc {
  flex: 1 1 auto;
  padding-left: 1.1rem;
}
.cover-title {
  font-family: var(--font-cover);
  font-size: 0.94rem;
  color: #333333;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* Document links */
.cover-docs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cover-doc-link,
.cover-doc-name {
  font-family: var(--font-cover);
  font-size: 0.78rem;
  color: #606060;
  font-style: italic;
  text-decoration: none;
  line-height: 1.4;
}
.cover-doc-link { color: var(--glossary-term-color); }
.cover-doc-link:hover {
  color: var(--heading-color);
}

/* ── Ancres — compensation navbar sticky ── */
[id] {
  scroll-margin-top: calc(var(--nav-h) + 12px);
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .page-layout { flex-direction: column; }
  .toc { position: static; flex: none; width: 100%; border-left: none; border-bottom: 2px solid var(--table-alt-row-color); padding: 0.8rem 0; }
/* topnav responsive — navbar simplifiée, rien à masquer */
  .cover-page { margin: 0.5rem; }

  /* v1.20 — Mobile overflow fix */

  /* Headings : block layout + hanging indent désactivé sur écran étroit. */
  .doc-h1, .doc-h2, .doc-h3 {
    display: block;
    padding-left: 0;
    margin-left: 0;
  }
  .doc-h1 .h-num, .doc-h2 .h-num, .doc-h3 .h-num {
    display: inline-block;
    margin-right: 0.5em;
  }
  .doc-h1 .h-text, .doc-h2 .h-text, .doc-h3 .h-text {
    display: inline;
    overflow-wrap: break-word;
  }

  /* Tables : indent supprimé, scroll horizontal confiné dans .table-wrap. */
  .table-l1, .table-l2, .table-l3 {
    padding-left: 0;
  }

  /* .doc-content : contient son overflow. min-width: 0 déjà global. */
  .doc-content {
    max-width: 100%;
    overflow-x: hidden;
  }
  .doc-content .table-wrap {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* ── Glossaire HTML ── */
.gloss-letter-header {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 2em 0 0.6em;
  padding-bottom: 0.35em;
  border-bottom: 3px solid var(--accent-color);
}
.gloss-letter {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--heading-color);
}
.gloss-entry { margin: 1.1em 0 0 1.8em; }
.gloss-term {
  font-size: 0.95rem;
  font-weight: bold;
  font-style: italic;
  color: var(--glossary-term-color);
  margin: 0 0 0.25em;
}
.gloss-aliases {
  font-weight: normal;
  font-style: italic;
  color: var(--discreet-text-color);
  font-size: 0.88em;
}
.gloss-def {
  font-size: 0.88rem;
  color: var(--body-text-color);
  line-height: 1.55;
  margin: 0 0 0.5em;
}

/* ── Page historique — v1.17 ── */
.history-content {
  max-width: 820px;
  margin: 2rem auto;
  padding: 0 1.2rem;
}
.history-h1 {
  font-family: var(--font-cover);
  color: var(--heading-color);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1.4rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent-color);
}
.history-scope {
  /* Note de perimetre, sous le titre et avant la table. Elle repond a
     la question que le lecteur se pose devant une liste incomplete :
     pourquoi tel document, mis a jour hier, n'y figure pas. Corps
     reduit et couleur attenuee — c'est un avertissement de lecture,
     pas du contenu. */
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--discreet-text-color);
  margin: 0 0 1.4rem 0;
  max-width: 60ch;
}
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  font-family: var(--font-body);
  table-layout: fixed;
}
.history-table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--heading-color);
  padding: 0.5rem 0.8rem;
  border-bottom: 1.5px solid var(--heading-color);
  background: transparent;
}
.history-table tbody td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--table-alt-row-color);
  vertical-align: baseline;
}
.history-table th.history-date,
.history-table td.history-date {
  width: 130px;
  font-variant-numeric: tabular-nums;
  color: var(--discreet-text-color);
  white-space: nowrap;
}
.history-table td.history-doc a {
  color: var(--heading-color);
  text-decoration: none;
  font-weight: 500;
}
.history-table td.history-doc a:hover {
  color: var(--url-color);
}
.history-table tbody tr:hover td {
  background: var(--table-alt-row-color);
}

/* ── Registry rendering.toc.hidden = true (v1.30) ── */
.toc { display: none; }