/* ==============================
 * 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 {
  --navy:          #003399;
  --accent-orange: #D95319;
  --cover-accent:  #DC5F02;
  --dark-text:     #333333;
  --white:         #FFFFFF;
  --light-gray:    #F2F2F2;
  --mid-gray:      #999999;
  --tip-gray:      #FF6600;
  --glossary-teal: #008080;
  --hass-color:    #7952B3;
  --varname-color: #2E7D32;
  --url-color:     #1565C0;

  /* 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; }
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--dark-text);
  background: #fff;
}
a { color: var(--glossary-teal); }
a:hover { text-decoration: underline; }

/* ── Navbar ── */
.topnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cover-accent);
  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 1.2rem;
}
.topnav-home {
  position: relative;
  z-index: 1;
  font-size: 1.1rem;
  color: #fff !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;
}
.topnav-spacer {
  display: inline-block;
  width: 0.8rem;
  flex-shrink: 0;
}
.topnav-history {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  color: #fff !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: #fff !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: #fff !important;
  text-decoration: none;
  line-height: 1;
  opacity: 0.90;
  transition: opacity 0.15s;
}
.topnav-download:hover { opacity: 1; }
.topnav-doctitle {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-cover);
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.01em;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 3rem;
  text-decoration-color: var(--glossary-teal);
  text-underline-offset: 3px;
}
/* .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(--light-gray);
  padding-left: 0.8rem;
}
.toc-title {
  font-size: 0.72rem;
  font-weight: bold;
  color: var(--mid-gray);
  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(--dark-text);
  text-decoration: none;
  display: block;
  padding: 1px 0;
  line-height: 1.4;
}
.toc li a:hover { color: var(--navy); text-decoration: underline; }
.toc-l1 a { font-weight: bold; color: var(--navy); }
.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(--navy);
  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(--navy); 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(--dark-text); }
.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-gray);
  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-teal);
  margin: 0.4rem 0;
  line-height: 1.5;
}
.note-label {
  flex-shrink: 0;
  font-weight: bold;
  font-style: normal;
  color: var(--glossary-teal);
  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(--varname-color);
}

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

/* ── 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-color);
}

/* ── Blocs code YAML / rawBlock — 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; }

/* ── 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-teal);
  white-space: nowrap;
}
.meta-name {
  font-style: italic;
  color: var(--mid-gray);
}
.meta-table tr.alt-row td { background: var(--light-gray); }

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

/* ── 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(--navy);
  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); }
.pic-img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.pic-legend {
  font-size: var(--size-note);
  font-style: italic;
  color: var(--mid-gray);
  text-align: center;
  margin-top: 0.4rem;
  line-height: 1.4;
  display: block;
}

/* ── Cellule image tableau — imgCell — 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);
}
th {
  background: var(--navy);
  color: var(--white);
  font-weight: bold;
  text-align: left;
  padding: 5px 8px;
  border: 1px solid #BBBBBB;
  font-size: var(--size-table);
}
td {
  padding: 5px 8px;
  border: 1px solid #BBBBBB;
  vertical-align: top;
  text-align: left;
  line-height: 1.45;
}
tr.alt-row td { background: var(--light-gray); }

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

/* ── Structure ── */
.bridge-para { margin: 0; padding: 0; height: 0.1rem; }
.release-para { margin: 0.5rem 0; }

/* ── Footer ── */
.doc-footer {
  border-top: 2px solid var(--accent-orange);
  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(--navy); }
.footer-compiled { color: var(--accent-orange); 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: 1rem;
}

/* Quote block */
.cover-quote {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin: 0 0 0.9rem;
  padding-left: 1rem;
}
.cover-quote-bar {
  flex: 0 0 4px;
  background: #DC5F02;
  align-self: stretch;
  border-radius: 2px;
  min-height: 1.2em;
}
.cover-quote-text {
  font-family: var(--font-cover);
  font-size: 0.80rem;
  color: #606060;
  line-height: 1.55;
  flex: 1;
}

/* Separator */
.cover-separator {
  border: none;
  border-top: 1px solid #606060;
  margin: 0.8rem 0;
}

/* 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 */
.cover-sections { display: flex; flex-direction: column; }
.cover-section {
  padding: 0.55rem 0.5rem 0.55rem 1rem;
  border-bottom: 1px solid #DC5F02;
}
.cover-section.last { border-bottom: none; }

.cover-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.cover-sq {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 2px;
  flex: 0 0 14px;
}
.cover-num {
  font-family: var(--font-cover);
  font-size: 0.88rem;
  font-weight: bold;
  min-width: 1.8em;
}
.cover-title {
  font-family: var(--font-cover);
  font-size: 0.88rem;
  color: #333333;
  font-weight: 500;
}

/* Document links */
.cover-docs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: calc(14px + 0.5rem + 1.8em + 0.5rem);
}
.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-teal); }
.cover-doc-link:hover {
  text-decoration: underline;
  color: var(--navy);
}

/* ── 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(--light-gray); 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-orange);
}
.gloss-letter {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--navy);
}
.gloss-entry { margin: 1.1em 0 0 1.8em; }
.gloss-term {
  font-size: 0.95rem;
  font-weight: bold;
  font-style: italic;
  color: var(--glossary-teal);
  margin: 0 0 0.25em;
}
.gloss-aliases {
  font-weight: normal;
  font-style: italic;
  color: var(--mid-gray);
  font-size: 0.88em;
}
.gloss-def {
  font-size: 0.88rem;
  color: var(--dark-text);
  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(--navy);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1.4rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent-orange);
}
.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(--navy);
  padding: 0.5rem 0.8rem;
  border-bottom: 1.5px solid var(--navy);
  background: transparent;
}
.history-table tbody td {
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--light-gray);
  vertical-align: baseline;
}
.history-table th.history-date,
.history-table td.history-date {
  width: 130px;
  font-variant-numeric: tabular-nums;
  color: var(--mid-gray);
  white-space: nowrap;
}
.history-table td.history-doc a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 500;
}
.history-table td.history-doc a:hover {
  text-decoration: underline;
  color: var(--url-color);
}
.history-table tbody tr:hover td {
  background: var(--light-gray);
}