/* ══════════════════════════════════════════════════════════════════════
   rapport.css : styles additionnels, propres à "Vivre dignement" (2026)
   Ce fichier vient APRÈS style.css (le CSS maître, partagé, non modifié)
   et ne contient QUE ce qui n'existait pas dans le rapport précédent :
   tags Enjeux/Objectifs, tableaux natifs InDesign, citations, listes de
   préconisations (décimal / alpha / romain), encadrés Encart et À retenir.
   Modifiable librement sans toucher au CSS maître partagé entre rapports.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Couleurs manquantes du CSS maître (utilisées par a.note-ref, .tbl-cond) */
  --bleu-fonce: #3d6d89;
  --bleu-texte: #3d6d89;
  --bleu-pale:  #e4edf2;

  /* Palette rouge / vert propre à ce rapport : remplace les teintes du
     CSS maître. Le rouge devient #ad453e, le vert devient #3f5c83.
     Les autres nuances (pâle, foncé...) sont dérivées automatiquement
     de ces deux couleurs pour garder la même hiérarchie visuelle. */
  --rose-fonce: #ad453e;
  --rose:       #b75b55;
  --rose-pale:  #efdad8;
  --vert-moyen: #3f5c83;
  --vert-dense: #344b6b;
  --vert:       #5c7496;
  --vert-pale:  #dce2e9;
}

/* ── Filets séparateurs entre interventions ──────────────────────────── */
.article-body hr {
  margin: 2rem 0;
  border: none;
  border-top: 1px solid var(--gris-clair);
}
body.dark .article-body hr { border-top-color: #2a2a3a; }
.intervention-liste { border-left: none; padding-left: 0; }

/* Le sélecteur générique a:link du CSS maître (spécificité 0,1,1) l'emporte
   sur .btn-web (0,1,0) et rend le texte des boutons ACCUEIL / RETOUR
   illisible (texte rose sur fond rose). Correctif ciblé, plus spécifique,
   volontairement limité au mode clair : en mode sombre, body.dark redéfinit
   --blanc en couleur de fond sombre (#1e1e2e, réutilisée ailleurs pour les
   surfaces), donc var(--blanc) n'y vaut plus "blanc" ; le CSS maître gère
   déjà correctement .btn-action.btn-web en mode sombre (texte #e8a0aa) et
   ne doit pas être écrasé ici. */
body:not(.dark) a.btn-action.btn-web,
body:not(.dark) a.btn-action.btn-web:link,
body:not(.dark) a.btn-action.btn-web:visited { color: #FFFFFF !important; }
body:not(.dark) a.btn-action.btn-web:hover { color: #FFFFFF !important; }

/* Même correctif que ci-dessus, appliqué au bouton PDF (fond rose-fonce
   depuis le CSS maître, texte blanc attendu, illisible sinon). */
body:not(.dark) a.btn-action.btn-pdf,
body:not(.dark) a.btn-action.btn-pdf:link,
body:not(.dark) a.btn-action.btn-pdf:visited { color: #FFFFFF !important; }
body:not(.dark) a.btn-action.btn-pdf:hover { color: #FFFFFF !important; }

/* ── Tags Enjeux / Objectifs ─────────────────────────────────────────── */
.tag-box {
  display: inline-block;
  margin: .3rem .4rem .3rem 0;
  padding: .35rem .85rem;
  border-radius: 20px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.3;
}
/* Enjeu N : bandeau pleine largeur, à la manière du document source */
.tag-enjeux {
  display: block;
  border-radius: 8px;
  padding: 1rem 1.4rem;
  margin: 0 0 1.1rem;
  font-family: var(--font-titre);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.35;
  background: var(--bleu-pale);
  color: var(--bleu-fonce);
  border: none;
}
body.dark .tag-enjeux { background: #10222c; color: #8ec4de; }

/* Objectif N.N : titre hiérarchique (numéro en bleu, intitulé en rose),
   souligné d'un filet, comme dans le document source. N'est plus une
   pastille : c'est un titre à part entière. */
.preco-objectif {
  margin: 1.5rem 0 .8rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--gris-clair);
  font-family: var(--font-titre);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}
.preco-objectif-num { color: var(--vert-dense, var(--vert-moyen)); }
.preco-objectif-titre { color: var(--rose-fonce); }
body.dark .preco-objectif { border-color: #2a2a3a; }
body.dark .preco-objectif-num { color: #95accc; }
body.dark .preco-objectif-titre { color: #e5bab7; }

/* ── Encadrés additionnels : Encart / À retenir ──────────────────────── */
.encart { background: var(--bleu-pale); border-color: var(--bleu-fonce) !important; }
.a-retenir { background: #fdf6e3; border-color: #c9a227 !important; }
body.dark .encadre.encart { background: #0d1a22 !important; border-color: #2c5468 !important; }
body.dark .encadre.encart .encadre-titre { color: #8ec4de !important; }
body.dark .encadre.encart .encadre-texte,
body.dark .encadre.encart p { color: #b8d4e2 !important; }
body.dark .encadre.a-retenir { background: #221c0a !important; border-color: #8a6d1a !important; }
body.dark .encadre.a-retenir .encadre-titre { color: #e8c96a !important; }
body.dark .encadre.a-retenir .encadre-texte,
body.dark .encadre.a-retenir p { color: #d8c48c !important; }

/* ── Citations ────────────────────────────────────────────────────────── */
.citation {
  margin: 1.75rem 0;
  padding: .75rem 1.25rem .75rem 1.5rem;
  border-left: 4px solid var(--bleu-fonce);
  background: #e0f1f4;
  font-family: var(--font-titre);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.55;
  color: #3ba6c1;
}
/* Le texte source porte déjà ses propres guillemets « » : pas de guillemets typographiques ajoutés par-dessus */
body.dark .citation { background: #1c2d3d; color: #a8c8e8; border-color: #5a8fc0; }

/* ── Listes de préconisations (numérotation propre, imbriquée) ─────────
   Chaque style InDesign de préconisation devient un compteur CSS distinct
   pour préserver la hiérarchie 1. / 1) / A/ / a) / i. / ii telle quelle. */
ol.liste { list-style: none; counter-reset: preco-decimal preco-paren preco-alpha preco-romain preco-alphamin preco-romainmin2 preco-sub; }
.preco-item { position: relative; padding-left: .3rem; }
.preco-decimal { counter-increment: preco-decimal; }
.preco-decimal::before { content: counter(preco-decimal) ". "; font-weight: 700; color: var(--rose-fonce); }
.preco-decimal-paren { counter-increment: preco-paren; }
.preco-decimal-paren::before { content: counter(preco-paren) ") "; font-weight: 700; color: var(--rose-fonce); }
.preco-alpha-maj { counter-increment: preco-alpha; }
.preco-alpha-maj::before { content: counter(preco-alpha, upper-alpha) "/ "; font-weight: 700; color: var(--vert-moyen); }
/* Preco Liste a) : la lettre "a)" est déjà tapée dans le texte source
   (InDesign), pas de numérotation CSS ici pour éviter un doublon. */
.preco-alpha-min { margin-left: 1.875rem; }
.preco-romain-min { counter-increment: preco-romain; margin-left: 1.25rem; }
.preco-romain-min::before { content: counter(preco-romain, lower-roman) ". "; font-weight: 600; color: var(--gris-texte); }
.preco-romain-min2 { counter-increment: preco-romainmin2; margin-left: 2.5rem; }
.preco-romain-min2::before { content: counter(preco-romainmin2, lower-roman) ". "; font-weight: 600; color: var(--gris-texte); }
.preco-sub { counter-increment: preco-sub; margin-left: 1.25rem; font-size: .95em; }
.preco-sub::before { content: "– "; color: var(--gris-texte); }
body.dark .preco-decimal::before,
body.dark .preco-decimal-paren::before { color: #e0aca8; }
body.dark .preco-alpha-maj::before,
body.dark .preco-alpha-min::before { color: #8da6c8; }

/* ── Sous-titres numérotés de préconisation ("1 | ...", "1) ...") ───────
   Volontairement sans fond ni bordure : ce ne sont pas des encadrés, juste
   des titres hiérarchiques au sein d'une liste de préconisations.
   "N | ..." (h4) reste un vrai sous-titre, en gras. "N) ..." (h5) est en
   revanche le texte même d'une préconisation : seul le repère "N)" est mis
   en avant (gras, couleur), le reste du texte garde le poids du corps de
   texte courant, pour éviter un excès de gras à l'écran. */
.preco-heading {
  margin: 1.75rem 0 .6rem;
  font-family: var(--font-titre);
  line-height: 1.3;
}
h4.preco-heading {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--bleu-fonce);
}
h5.preco-heading.niveau4 {
  margin-top: 1.25rem;
  margin-left: 1.25rem;
  font-size: 1rem;
  font-weight: 400;
  font-family: var(--font-corps);
  color: var(--gris-texte);
}
h5.preco-heading.niveau4 .preco-num {
  font-weight: 800;
  color: var(--rose-fonce);
}
body.dark h4.preco-heading { color: #8ec4de; }
body.dark h5.preco-heading.niveau4 { color: #c0c0cc; }
body.dark h5.preco-heading.niveau4 .preco-num { color: #e5bab7; }

/* ── Tableaux natifs InDesign ─────────────────────────────────────────── */
.table-wrap {
  margin: 1.75rem 0;
  overflow-x: auto;
  border: 1px solid var(--gris-clair);
  border-radius: 6px;
  -webkit-overflow-scrolling: touch;
}
.table-wrap--wide { box-shadow: inset -12px 0 10px -12px rgba(0,0,0,.08); }
.tableau-natif {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: .84rem;
  line-height: 1.45;
}
.tableau-natif th, .tableau-natif td {
  padding: .55rem .75rem;
  border: 1px solid var(--gris-clair);
  text-align: left;
  vertical-align: top;
}
.tableau-natif th:not(:first-child), .tableau-natif td:not(:first-child) {
  text-align: center;
  vertical-align: middle;
}
.tableau-natif thead th {
  background: #425e81;
  color: var(--blanc);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .01em;
  text-transform: none;
  white-space: normal;
  line-height: 1.25;
}
.tableau-natif tbody tr:nth-child(odd) { background: var(--blanc); }
.tableau-natif tbody tr:nth-child(even) { background: var(--bleu-pale); }
.tableau-natif tbody tr:hover { background: var(--gris-clair); }
body.dark .table-wrap { border-color: var(--dk-table-border); }
body.dark .tableau-natif th, body.dark .tableau-natif td { border-color: var(--dk-table-border); }
body.dark .tableau-natif thead th { background: #2a3d54; color: #cfe0f2; }
body.dark .tableau-natif tbody tr:nth-child(even) { background: var(--dk-table-even); }
body.dark .tableau-natif tbody tr:nth-child(odd) { background: var(--dk-table-odd); }
body.dark .tableau-natif tbody tr:hover { background: #24314a; }

/* Tableaux "personnes" (listes de noms + descriptif) : colonne des noms étroite, colonne descriptive large et au fer à gauche */
.tableau-natif.tableau-personnes td:first-child,
.tableau-natif.tableau-personnes th:first-child {
  width: 22%;
}
.tableau-natif.tableau-personnes td:not(:first-child),
.tableau-natif.tableau-personnes th:not(:first-child) {
  text-align: left;
}

/* Tableaux "enjeux" (grilles de lecture avec colonnes de conditions/axes détaillés) :
   colonne de gauche (l’enjeu) étroite et centrée comme les autres tableaux, colonnes
   de droite au fer à gauche et alignées en haut pour accueillir des listes à puces */
.tableau-natif.tableau-enjeux td:not(:first-child),
.tableau-natif.tableau-enjeux th:not(:first-child) {
  text-align: left;
  vertical-align: top;
}
.tableau-natif td ul.liste-puce {
  margin: 0;
  padding-left: 1.1em;
  text-align: left;
}
.tableau-natif td ul.liste-puce li {
  margin: 0 0 .35em;
}
.tableau-natif td ul.liste-puce li:last-child { margin-bottom: 0; }
.tableau-natif td ul.liste-puce li::marker { color: var(--bleu-texte); }
.tableau-natif td p.corps-cellule { margin: 0 0 .35em; }
.tableau-natif td p.corps-cellule:last-child { margin-bottom: 0; }

/* Tableau équipe (Annexe 6) : cellules de laboratoire fusionnées (rowspan) centrées en hauteur */
.tableau-natif.tableau-equipe td:first-child {
  vertical-align: middle;
}
/* La colonne Nom, Prénom perd sa place de 1re cellule sur les lignes sans laboratoire répété (fusion) :
   on la recentre explicitement pour ne pas hériter du style de la colonne de gauche */
.tableau-natif.tableau-equipe td.col-nom {
  text-align: center;
  vertical-align: middle;
}

/* ── Compléments de mise en page (styles rares, filet de sécurité) ─────── */
/* Demande explicite : aucun texte en deux colonnes sur le site, quelle
   que soit la page. On neutralise donc la classe plutôt que de la
   retirer du HTML (elle reste présente dans le balisage source). */
.corps-2col { column-count: 1; column-gap: 0; }
.corps.alinea-tiret { padding-left: 1.2rem; text-indent: -1.2rem; }
.lettrine-petite::first-letter { font-size: 2rem; }
.avant-propos-texte { font-size: 1.02rem; line-height: 1.75; }
.avant-propos-nom { font-family: var(--font-titre); font-weight: 700; color: var(--rose-fonce); margin-top: 1.5rem; }
.avant-propos-fonction { font-size: .85rem; color: var(--gris-texte); font-style: italic; }
.abreviation-lettre { font-family: var(--font-titre); font-size: 1.1rem; color: var(--rose-fonce); margin: 1.25rem 0 .4rem; }
.abreviation-texte { font-size: .92rem; margin-bottom: .3rem; }
.titre-souligne { text-decoration: underline; text-underline-offset: 6px; }
.titre-gras { font-weight: 800; }
/* "Chapeau" : phrase d'amorce avant un paragraphe, pas un vrai titre hiérarchique */
h4.niveau-4.titre-gras {
  font-family: var(--font-corps);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--vert-moyen);
  text-decoration: none;
  line-height: 1.5;
  margin: 1.1rem 0 .4rem;
}
body.dark h4.niveau-4.titre-gras { color: #8fb8dc; }
.corps-gras { font-weight: 700; }
.encadre-item, .exemple-item { list-style: disc; margin-left: 1.5rem; }

/* ── Encadrés numérotés (ex. Encadré 1, Encadré 2 de l'introduction) ────
   Fond rouge très léger, pour les distinguer du texte courant sans
   reprendre le code visuel des encadrés Encart / À retenir. */
.encadre.encadre-numerote { background: var(--rose-pale); border-color: var(--rose-fonce) !important; }
.encadre.encadre-numerote .encadre-titre { color: var(--rose-fonce); }
body.dark .encadre.encadre-numerote { background: #2e1211 !important; border-color: #421a18 !important; }
body.dark .encadre.encadre-numerote .encadre-titre { color: #e5bab7 !important; }
body.dark .encadre.encadre-numerote .encadre-texte,
body.dark .encadre.encadre-numerote p,
body.dark .encadre.encadre-numerote li { color: #e0aca8 !important; }

/* ════════════════════════════════════════════════════════════════════
   Surcharge ciblée du CSS maître (style.css) : le maître code encore en
   dur, dans plusieurs sélecteurs, les teintes historiques rose/vert au
   lieu d'utiliser les variables --rose-fonce/--vert-moyen. Cette section
   reproduit ces mêmes sélecteurs avec les nouvelles teintes du rapport,
   sans modifier le fichier partagé entre tous les rapports. Générée à
   partir d'une analyse automatique des couleurs codées en dur.
   ════════════════════════════════════════════════════════════════════ */
body.dark {
  --dk-header: #1e0c0b;
  --dk-footer: #1e0c0b;
  --dk-actif-bg: #2e1211;
  --dk-actif-d1-bg: #2e1211;
  --dk-actif-d1-text: #e8c2c0;
  --dk-linkedin: #752f2a;
  --dk-facebook: #582320;

  /* Le CSS maître donne aux lignes paires/impaires des tableaux (odd/even)
     et à leur bordure des teintes quasi identiques au fond de page en mode
     sombre (#101020 et #16162a contre un fond #111118) : les tableaux
     deviennent illisibles, notamment dans les annexes. On les remplace par
     des teintes nettement visibles, dérivées de la palette du rapport. */
  --dk-table-odd: #1a2332;
  --dk-table-even: #141b28;
  --dk-table-border: #2c405c;
}

/* -- mode clair -- */
.badge-fiche { background:#5d81b1;color:#ffffff; }
.badge-annexe { background:#3a5579;color:#ffffff; }
.chapeau { border-left-color: var(--vert-dense); background:#f5f7fa; }
a:link { color: #c15851; }
.preconisation { background:#faf2f1; }
.exemple { background:#eef2f7; }
.exergue { background:#e9eef5; }
.tbl-sub-header { background:#faf2f1; }
.nav-item.depth-1 > .nav-item-header .nav-item-link { color:#c15851; }
.nav-item.depth-1 > .nav-item-header .nav-item-link:hover { color:#963c36; }
.nav-item.depth-1 > .nav-item-header .nav-toggle { color:#c15851; }
.nav-anchor a { color:#4c6f9e !important; }
.nav-anchor a:hover { color:#385173 !important; }
.nav-toggle-anchor { color:#c15851; }
.nav-item.depth-1 > .nav-item-header { background:#fdf9f8; }
.nav-item.depth-1 > .nav-item-header:hover { background:#f9efef; }
.nav-item.depth-2 > .nav-item-header { background:#f8fafc; }
.nav-item.depth-2 > .nav-item-header:hover { background:#edf1f7; }
.nav-item.depth-2 > .nav-item-header .nav-item-link:hover { color:#42618a; }
.nav-item.depth-0 { border-bottom-color: #e4eaf2; }
.nav-anchors { background:#f2f5f9; }
.nav-item.active > .nav-item-header { background:#faf2f1; }
.search-results li a:hover { background:#faf2f1; }
#notes-drawer-header { background:#faf2f1; }
a.note-ref::after { background:#321412; color:#f3dfdd; }
a.note-ref::before { border-top-color:#321412; }
.share-btn.facebook:hover { background:#85352f; }
tr.Tableau-simple td, td.Tableau-simple { border-bottom-color:#ced9e8; background:#edf1f6; }
tr.Tableau-simple:nth-child(even) td.Tableau-simple { background:#dfe6f0; }
.encadre.exemple .encadre-titre { color:#273951 !important; }

/* -- mode sombre -- */
body.dark .nav-item.depth-0 > .nav-item-header:hover .nav-item-link { color:#eac8c6 !important; }
body.dark .nav-item.depth-0.active > .nav-item-header .nav-item-link { color:#eac8c6 !important; }
body.dark .nav-item.depth-1 > .nav-item-header .nav-item-link,
body.dark .nav-item.depth-1 > .nav-item-header .nav-item-link-active { color:#d79591 !important; }
body.dark .nav-item.depth-2 > .nav-item-header .nav-item-link { color:#839ec3 !important; }
body.dark .nav-sub-item a:hover { color:#db9e99 !important; background:#1a1025 !important; }
body.dark .nav-sub-item.active a { color:#e8c2c0 !important; background:#1e1028 !important; }
body.dark .nav-anchor::before { color:#2e4360 !important; }
body.dark .nav-anchor a { color:#6083b2 !important; }
body.dark .nav-anchor a:hover { color:#9fb4d1 !important; }
body.dark .nav-anchor.active > a { color:#c5d2e3 !important; }
body.dark .nav-item.open > .nav-item-header > .nav-toggle { color:#8da6c8; }
/* !important nécessaire : chaque page du rapport embarque sa propre
   règle body.dark .article-title dans un <style> inline (après ce
   fichier dans le <head>), qui sinon l'emporterait. */
body.dark .article-title { color:#eac8c6 !important; }
body.dark .index-title { color:#eac8c6; }
body.dark .niveau-2 { color:#e5bab7; border-color:#371614; }
body.dark .niveau-3 { color:#8da6c8; }
body.dark .annexe-titre { color:#e5bab7; border-color:#371614; }
body.dark .article-badge { background:#2e1211; color:#e0aca8; }
body.dark .btn-action.btn-web { background:#2e1211 !important; color:#e0aca8 !important; border-color:#421a18 !important; }
body.dark .encadre.exemple { background:#0c121a !important; border-color:#2f4461 !important; }
body.dark .encadre.exemple .encadre-titre { color:#819dc2 !important; }
body.dark .encadre.exemple .encadre-texte,
body.dark .encadre.exemple p,
body.dark .encadre.exemple i { color:#9ab0ce !important; }
body.dark .encadre.preconisation-ceser { background:#230e0d !important; border-color:#7d322d !important; }
body.dark .encadre.preconisation .encadre-titre,
body.dark .encadre.preconisation-ceser .encadre-titre { color:#e0aca8 !important; }
body.dark .encadre.preconisation .encadre-texte,
body.dark .encadre.preconisation p { color:#dea6a2 !important; }
body.dark .tbl-header { background:#3e1916 !important; }
body.dark .tbl-header a { color:#f0d7d5 !important; }
body.dark .tbl-sub-header a { color:#e6bdba !important; }
body.dark .notes-toggle-btn:hover { color:#db9e99; }
body.dark a.note-ref { color:#e0aca8; }
body.dark a.note-ref:hover { color:#8da6c8; }
body.dark .partager-sticky .share-btn.linkedin { background:#752f2a; }
body.dark .partager-sticky .share-btn.facebook { background:#582320; }