/* Bandeau de couverture propre à la consultation web */
.web-cover {
  margin: 0 0 2rem;
  overflow: hidden;
  border-radius: 0.35rem;
  background: #eef4f1;
}

.web-cover p {
  margin: 0;
}

.web-cover img {
  display: block;
  width: 100%;
  height: clamp(260px, 42vw, 430px);
  object-fit: cover;
  object-position: center 56%;
}

/* Personnalisation du glossaire pour un affichage discret */
.glossary-term {
    border-bottom: 1px dotted #808080 !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: help;
}

.glossary-term:hover {
    border-bottom: 1px dotted #333333 !important;
    background-color: #f0f0f0;
}

/* =========================================================
   Niveaux de lecture
   ========================================================= */

.niveau {
  display: inline;
  white-space: nowrap;
}

.niveau::before {
  content: "●";
  display: inline-block;
  margin-right: 0.42em;
  font-size: 0.78em;
  line-height: 1;
  vertical-align: 0.06em;
}

.niveau.essentiel::before {
  color: #76B7A2;
}

.niveau.recommande::before {
  color: #D4A72C;
}

.niveau.approfondissement::before {
  color: #16345F;
}

#TOC .niveau::before,
.sidebar nav[role="doc-toc"] .niveau::before,
nav[role="doc-toc"] .niveau::before {
  display: inline-block;
}

/* =========================================================
   Glossaire HTML discret
   ========================================================= */

.glossary {
  appearance: none;
  -webkit-appearance: none;
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: help;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.glossary:hover,
.glossary:focus {
  background: transparent;
  color: inherit;
  text-decoration-thickness: 1.5px;
}

.glossary .def {
  display: none;
}

/* =========================================================
   Tableaux : respiration et délimitations
   ========================================================= */

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1rem 0 1.25rem;
}

thead th {
  border-bottom: 1.5px solid #9fb9ad;
  background: #f6faf8;
}

th,
td {
  padding: 0.48rem 0.62rem;
  vertical-align: top;
  border-bottom: 1px solid #d7e5de;
}

tbody tr:nth-child(even) {
  background: #fbfdfc;
}

tbody tr:last-child td {
  border-bottom-color: #bfd2c8;
}

/* Titres non H3 : classes partagées par les QMD 1.1 à 1.4.
   La hiérarchie visuelle est indépendante de la table des matières. */
.component-title {
  --component-accent: #247c78;
  --component-background: #eef4f1;
  display: block;
  margin: 1.6rem 0 .75rem;
  padding: .65rem .85rem;
  border-left: 4px solid var(--component-accent);
  border-radius: 0 .25rem .25rem 0;
  background: var(--component-background);
  color: #16345f;
  font-family: var(--bs-font-sans-serif, sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
  break-after: avoid;
}

.component-title.component-level.essentiel {
  --component-accent: #76b7a2;
  --component-background: #eef7f3;
}

.component-title.component-level.recommande {
  --component-accent: #d4a72c;
  --component-background: #fbf6e7;
}

.component-title.component-level.approfondissement {
  --component-accent: #16345f;
  --component-background: #eef4fa;
}

.component-title.component-autotest {
  --component-accent: #247c78;
  --component-background: #e7f3f1;
}

.component-title.component-subtitle {
  margin-top: 1.15rem;
  padding: .35rem 0 .35rem .7rem;
  background: transparent;
  font-size: 1.1rem;
}

.component-title.situation-esr {
  --component-accent: #4f9a94;
  --component-background: #edf6f5;
}

.pedagogical-table {
  margin: 1rem 0 1.25rem;
}

.chapter-autotest,
.final-autoposition {
  break-before: page;
  break-after: page;
  page-break-before: always;
  page-break-after: always;
}

.tp-checklist.callout-tip,
.chapter-autotest .callout-tip {
  --bs-callout-border-left-color: #4f9a64;
}

.charte-insa {
  margin: 1rem 0;
}

.charte-insa.callout-note {
  --bs-callout-border-left-color: #247c78;
}