#modal .modal-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-modal-divider);
  }

  #modal .modal-section {
    margin: 12px 0;
    font-size: 13px;
    line-height: 1.6;
  }

  #modal .modal-section strong {
    color: var(--text-accent);
    display: block;
    margin-bottom: 2px;
  }

  #modal .source-note {
    margin-top: 16px;
    padding: 10px 12px;
    background: var(--bg-modal-source);
    border-left: 3px solid var(--border-modal-source);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
  }

  .data-quality {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 6px;
  }

  .dq-verified { background: #c8e6c9; color: #1b5e20; }
  .dq-partial { background: #fff3e0; color: #e65100; }
  .dq-approximate { background: #fce4ec; color: #880e4f; }
  .dq-structural { background: #e1f5fe; color: #01579b; }
  body.dark .dq-verified { background: #1b3a1f; color: #a5d6a7; }
  body.dark .dq-partial { background: #4a3a14; color: #ffd180; }
  body.dark .dq-approximate { background: #45172e; color: #f8bbd0; }
  body.dark .dq-structural { background: #0d2c40; color: #81d4fa; }

  /* Bloc d'anomalie dans la modale (s'adapte au dark mode) */
  .anomaly-block {
    background: #ffebee;
    padding: 10px 12px;
    border-left: 3px solid #c62828;
    border-radius: 4px;
    color: #4a1010;
  }
  .anomaly-block .anomaly-title {
    color: #c62828;
    display: block;
    margin-bottom: 4px;
  }
  .modal-section.subentities {
    border-top: 1px solid var(--border-modal-divider);
  }
  .more-children {
    margin-top: 4px;
    font-style: italic;
    color: var(--text-muted);
  }

  /* Indicateur d'anomalie — pastille rouge dépassant en haut-gauche du nœud.
     z-index élevé pour rester au-dessus de la silhouette ::after et du
     reste du contenu. */
  #intro-modal {
    display: none; /* caché par défaut — affiché après acceptation de l'AVIS */
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 3000;
    justify-content: center;
    align-items: center;
  }
  #intro-modal.visible {
    display: flex;
  }
  #intro-modal.hidden { display: none; }

  /* === Modale Incidents === */
  #incidents-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 3000;
    justify-content: center;
    align-items: center;
  }
  #incidents-modal.visible { display: flex; }

  #incidents-content {
    background: var(--bg-modal);
    color: var(--text-default);
    border-radius: 12px;
    overflow: hidden;
    max-width: 800px;
    width: 92%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    position: relative;
  }

  #incidents-scroll {
    overflow-y: auto;
    padding: 32px 36px 24px;
    line-height: 1.55;
    flex: 1 1 auto;
    min-height: 0; /* permet au flex item de rétrécir et active correctement overflow-y dans Firefox */
  }

  /* Titre de la modale Incidents — taille intermédiaire, ⚠ en rouge */
  #incidents-title {
    color: var(--text-accent);
    font-size: 20px;
    margin-bottom: 8px;
    text-align: center;
    font-weight: 600;
    /* Espace pour ne pas être caché par le bouton ✕ */
    padding-right: 36px;
    padding-left: 36px;
  }
  .incidents-warning-icon {
    color: #d32f2f;        /* rouge — le ⚠ se distingue du titre */
  }
  body.dark .incidents-warning-icon {
    color: #ef5350;        /* rouge un peu plus clair en mode nuit */
  }

  /* Bouton ✕ en haut à droite du modal Incidents — même style que #intro-dismiss */
  #incidents-dismiss {
    position: absolute;
    top: 10px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--text-muted, #888);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    z-index: 10;
    transition: background 0.15s, color 0.15s;
  }
  #incidents-dismiss:hover {
    background: rgba(0,0,0,0.08);
    color: var(--text-default);
  }

  .incident-item {
    padding: 14px 0;
    border-bottom: 1px dashed var(--border-modal-divider);
  }
  .incident-item:last-child { border-bottom: none; }

  .incident-date {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 4px;
  }
  body.dark .incident-date { color: #aaa; }

  .incident-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-default);
  }

  .incident-summary {
    font-size: 14px;
    color: var(--text-default);
    margin-bottom: 8px;
  }

  .incident-sources {
    font-size: 12px;
  }
  .incident-sources a {
    color: #1976d2;
    text-decoration: none;
    margin-right: 12px;
    display: inline-block;
  }
  body.dark .incident-sources a { color: #64b5f6; }
  .incident-sources a:hover { text-decoration: underline; }

  /* Mise en évidence quand un incident matche la recherche */
  #intro-content {
    background: var(--bg-modal);
    color: var(--text-default);
    border-radius: 12px;
    /* overflow:hidden pour que les coins arrondis s'appliquent correctement
       dans Firefox (qui ne clip pas les enfants sans ce flag). */
    overflow: hidden;
    max-width: 650px;
    width: 90%;
    max-height: 85vh;
    /* Le scroll est sur le wrapper interne pour que le bouton X reste fixe */
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    position: relative;
  }

  /* Bouton ✕ en haut à droite du modal */
  #intro-dismiss {
    position: absolute;
    top: 10px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--text-muted, #888);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    z-index: 10;
    transition: background 0.15s, color 0.15s;
  }
  #intro-dismiss:hover {
    background: rgba(0,0,0,0.08);
    color: var(--text-default);
  }
  #intro-scroll {
    overflow-y: auto;
    padding: 28px 32px;
    flex: 1 1 auto;
    min-height: 0; /* permet au flex item de rétrécir et active correctement overflow-y */
  }

  #intro-content h1 {
    color: var(--text-accent);
    font-size: 22px;
    margin-bottom: 8px;
    text-align: center;
    /* Espace pour ne pas être caché par le bouton X */
    padding-right: 36px;
    padding-left: 36px;
  }

  #intro-content h2 {
    color: var(--text-accent);
    font-size: 15px;
    margin: 16px 0 6px 0;
  }

  #intro-content p {
    font-size: 13px;
    line-height: 1.6;
    margin: 6px 0;
    color: var(--text-default);
  }

  #intro-content ul {
    font-size: 13px;
    margin: 6px 0 6px 20px;
    line-height: 1.6;
  }

  #intro-content .warning-box {
    background: #fff3e0;
    border-left: 4px solid #f57c00;
    padding: 12px 14px;
    margin: 14px 0;
    font-size: 12px;
    border-radius: 4px;
    color: #5d3a00;
  }
  .intro-accordion-header {
    cursor: pointer;
    user-select: none;
    font-size: 15px;
    color: var(--text-accent);
    margin: 0;
    padding: 6px 0;
    border-top: 1px solid var(--border-modal-divider);
  }
  .intro-accordion-header:hover { opacity: 0.8; }
  .intro-divider {
    border: none;
    border-top: 1px solid var(--border-modal-divider);
    margin: 18px 0;
  }

  /* Vidéos YouTube — liens dans intro */
  .intro-video-block { margin: 10px 0; }
  .intro-video-block h3 {
    font-size: 14px;
    margin: 0;
    font-weight: 600;
  }
  .intro-video-block h3 a {
    color: var(--text-accent);
    text-decoration: none;
  }
  .intro-video-block h3 a:hover {
    text-decoration: underline;
    opacity: 0.85;
  }

  /* Bloc livre / ebook — couleurs explicites compatibles dark mode */
  .intro-book-block {
    margin: 14px 0 18px 0;
    padding: 12px 14px;
    background: rgba(108, 92, 231, 0.08);
    border-left: 3px solid var(--text-accent);
    border-radius: 4px;
    color: var(--text-default);
  }
  .intro-book-block .book-title {
    font-style: italic;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 14px;
    color: var(--text-default);
  }
  .intro-book-block .book-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
  }
  .intro-book-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
  }
  .intro-book-links a {
    display: inline-block;
    padding: 5px 12px;
    background: var(--bg-header);
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 12px;
    transition: opacity 0.15s;
  }
  .intro-book-links a:hover { opacity: 0.85; }

  /* Note sur les ressources externes (sortie du bloc livre car elle couvre
     aussi les 2 vidéos YouTube au-dessus) */
  .intro-external-resources-note {
    font-size: 11px;
    line-height: 1.7;
    color: var(--text-muted, #888);
    margin: 4px 0 14px 0;
    padding: 0 4px;
    font-style: italic;
  }

  /* Accordéon générique pour info de nœud (modal) */
  .modal-accordion {
    margin-top: 10px;
    border-top: 1px solid var(--border-modal-divider, #e0e0e0);
  }
  .modal-accordion-header {
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-accent, #6c5ce7);
    padding: 8px 0;
    margin: 0;
  }
  .modal-accordion-header:hover { opacity: 0.8; }
  #intro-close {
    background: var(--bg-header);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 16px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  #intro-close:hover { background: var(--bg-header-btn-hover); }

  /* ============================================================
     MODALE AVIS DE NON-RESPONSABILITÉ — affichée AVANT toute autre UI
     ============================================================ */
  #disclaimer-modal {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 4000; /* au-dessus de tout */
    justify-content: center;
    align-items: center;
  }
  #disclaimer-modal.hidden { display: none; }
  #disclaimer-modal.read-only-mode .disclaimer-actions {
    display: none;
  }
  #disclaimer-modal.read-only-mode #disclaimer-readonly-close {
    display: flex;
  }

  #disclaimer-content {
    background: var(--bg-modal);
    color: var(--text-default);
    border-radius: 12px;
    /* overflow:hidden pour que les coins arrondis s'appliquent correctement
       dans Firefox (qui ne clip pas les enfants sans ce flag).
       Le scroll est sur le wrapper interne pour que les boutons restent fixes. */
    overflow: hidden;
    max-width: 720px;
    width: 92%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    position: relative;
    border: 2px solid var(--text-accent);
  }

  #disclaimer-readonly-close {
    display: none;
    position: absolute;
    top: 10px;
    right: 14px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    z-index: 10;
    align-items: center;
    justify-content: center;
  }
  #disclaimer-readonly-close:hover {
    background: rgba(0,0,0,0.08);
    color: var(--text-default);
  }
  #disclaimer-scroll {
    overflow-y: auto;
    padding: 28px 32px 20px 32px;
    flex: 1 1 auto;
    min-height: 0; /* permet au flex item de rétrécir et active correctement overflow-y */
  }

  #disclaimer-content h1 {
    color: var(--text-accent);
    font-size: 19px;
    margin: 0 0 18px 0;
    text-align: center;
    padding: 0 30px;
  }

  #disclaimer-content h2 {
    color: var(--text-accent);
    font-size: 13px;
    margin: 14px 0 4px 0;
  }

  #disclaimer-content p {
    font-size: 12.5px;
    line-height: 1.55;
    margin: 4px 0 8px 0;
    color: var(--text-default);
  }

  #disclaimer-content .brand-mark {
    font-weight: 700;
    color: var(--text-accent);
  }

  #disclaimer-content .final-acknowledgement {
    margin-top: 16px;
    padding: 10px 14px;
    background: var(--bg-modal-source);
    border-left: 3px solid var(--text-accent);
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-default);
    text-align: center;
  }

  .disclaimer-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    padding: 14px 24px 22px 24px;
    border-top: 1px solid var(--border-modal-divider);
    background: var(--bg-page);
    flex-wrap: wrap;
    flex-shrink: 0; /* garantit que la barre d'action reste visible */
  }
  .disclaimer-btn {
    border: none;
    padding: 11px 28px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: opacity 0.15s, transform 0.1s;
    min-width: 150px;
  }
  .disclaimer-btn-accept {
    background: #2e7d32;
    color: white;
  }
  .disclaimer-btn-accept:hover { background: #1b5e20; transform: translateY(-1px); }
  .disclaimer-btn-refuse {
    background: #c2185b;
    color: white;
  }
  .disclaimer-btn-refuse:hover { background: #88134a; transform: translateY(-1px); }
  body.dark .disclaimer-btn-accept { background: #43a047; }
  body.dark .disclaimer-btn-accept:hover { background: #2e7d32; }
  body.dark .disclaimer-btn-refuse { background: #d81b60; }
  body.dark .disclaimer-btn-refuse:hover { background: #ad1457; }

  /* ============================================================
     BOUTONS DU HEADER — icônes colorées
     ============================================================ */

  /* Triangle d'avertissement rouge dans le bouton "Incidents" */
  #btn-incidents .btn-warning-icon {
    color: #ff4d4f;
    font-weight: bold;
    margin-right: 2px;
    /* Léger contour pour que le rouge ressorte sur le fond bleu foncé du bouton */
    text-shadow: 0 0 1px rgba(0,0,0,0.4);
  }
  body.dark #btn-incidents .btn-warning-icon {
    color: #ff6b6e;
  }
  /* Quand le bouton est en surbrillance (has-matches), le fond devient jaune ;
     on assombrit légèrement le triangle pour qu'il reste visible. */
  #btn-incidents.has-matches .btn-warning-icon {
    color: #c62828;
    text-shadow: none;
  }

  /* Icône d'horloge dans le bouton "Attente" — bleu clair pour faire écho
     à l'icône bleue de la modale, et pour se distinguer du triangle rouge
     du bouton "Incidents" voisin. */
  #btn-wait-times .btn-clock-icon {
    color: #4fc3f7;
    margin-right: 2px;
    font-size: 13px;
    line-height: 1;
    text-shadow: 0 0 1px rgba(0,0,0,0.4);
  }
  body.dark #btn-wait-times .btn-clock-icon {
    color: #81d4fa;
  }

  /* ============================================================
     MODALE TEMPS D'ATTENTE — calquée sur la modale Incidents
     (même structure : overlay plein écran, contenu centré, scroll
     interne, bouton ✕ identique en haut-droite)
     ============================================================ */
  #wait-times-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 3000;
    justify-content: center;
    align-items: center;
  }
  #wait-times-modal.visible { display: flex; }

  #wait-times-content {
    background: var(--bg-modal);
    color: var(--text-default);
    border-radius: 12px;
    overflow: hidden;
    /* Élargi pour accommoder le slider 3-panneaux avec contenu lisible */
    max-width: 1320px;
    width: 95%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    position: relative;
  }

  #wait-times-scroll {
    overflow-y: auto;
    padding: 32px 36px 24px;
    line-height: 1.55;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Titre — exactement le même style que #incidents-title */
  #wait-times-title {
    color: var(--text-accent);
    font-size: 20px;
    margin-bottom: 8px;
    text-align: center;
    font-weight: 600;
    padding-right: 36px;
    padding-left: 36px;
  }
  .wait-times-clock-icon {
    color: #1976d2;       /* bleu pour différencier du ⚠ rouge */
  }
  body.dark .wait-times-clock-icon {
    color: #64b5f6;
  }

  /* Bouton ✕ en haut à droite — exactement la même règle que #incidents-dismiss
     pour assurer la cohérence visuelle entre les deux modales */
  #wait-times-dismiss {
    position: absolute;
    top: 10px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--text-muted, #888);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    z-index: 10;
    transition: background 0.15s, color 0.15s;
  }
  #wait-times-dismiss:hover {
    background: rgba(0,0,0,0.08);
    color: var(--text-default);
  }

  /* Boîte de résumé provincial en haut */
  #wait-times-summary-box {
    background: var(--bg-modal-source);
    border-left: 3px solid var(--text-accent);
    padding: 12px 14px;
    margin: 14px 0 18px 0;
    border-radius: 4px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-default);
  }
  #wait-times-summary-box strong {
    display: block;
    color: var(--text-accent);
    margin-bottom: 6px;
    font-size: 13px;
  }
  #wait-times-summary-rows {
    /* Le nombre de colonnes est piloté par --wt-summary-cols, posé en
       inline-style par le JS (06b-wait-times.js) en fonction du nombre
       d'années à afficher. Avec 4 lignes, 16 années → 4 colonnes. */
    display: grid;
    grid-template-columns: repeat(var(--wt-summary-cols, 4), minmax(0, 1fr));
    gap: 4px 18px;
    font-size: 12px;
  }
  #wait-times-summary-rows .wt-summary-row {
    /* Cellule "année : valeur" — alignée pour que toutes les valeurs
       partent du même point quel que soit le rendu de l'année. */
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 0;
    border-bottom: 1px dotted var(--border-modal-divider);
    padding: 2px 0;
  }
  #wait-times-summary-rows .wt-summary-year {
    color: var(--text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  #wait-times-summary-rows .wt-summary-sep {
    color: var(--text-muted);
    margin: 0 6px;
    font-weight: 600;
  }
  #wait-times-summary-rows .wt-summary-value {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }

  /* Astérisque indiquant une estimation. Apparait juste après la
     valeur (sans espace) en plus discret, et donne un tooltip natif
     "Estimation" via l'attribut title. Cursor help pour signaler
     l'aide contextuelle. */
  .wt-summary-est,
  #wait-times-summary-rows .wt-summary-est {
    color: var(--text-muted, #888);
    font-weight: 600;
    margin-left: 2px;
    font-size: 0.9em;
    cursor: help;
  }

  /* Légende discrète sous la grille (apparaît seulement s'il y a au
     moins une estimation dans le résumé). Le grid-column: 1/-1 fait
     traverser la légende sur toutes les colonnes du grid parent. */
  .wt-summary-legend,
  #wait-times-summary-rows .wt-summary-legend {
    grid-column: 1 / -1;
    font-size: 10.5px;
    color: var(--text-muted, #888);
    font-style: italic;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dotted var(--border-modal-divider);
    line-height: 1.4;
  }

  /* Élément "région" — visuellement aligné sur .incident-item */
  .wt-region {
    padding: 14px 0;
    border-bottom: 1px dashed var(--border-modal-divider);
  }
  .wt-region:last-of-type { border-bottom: none; }

  /* Message affiché quand TOUTES les années sont à n/d pour une région
     (ex. Nord-du-Québec pour chirurgie/médecin, Centre-du-Québec pour
     chirurgie). Plus lisible qu'une grille de 16 "non disponible". */
  .wt-years-unavailable {
    margin: 8px 0 4px 0;
    padding: 8px 12px;
    background: var(--bg-modal-source, rgba(0,0,0,0.04));
    border-left: 3px solid var(--text-muted, #888);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-muted, #888);
    font-style: italic;
    line-height: 1.45;
  }

  .wt-region-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-default);
  }
  .wt-region-id {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 12px;
    margin-left: 6px;
  }

  .wt-region-note {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.5;
  }

  .wt-region-note em { font-style: italic; }

  .wt-years-table {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 10px;
    row-gap: 2px;
    font-size: 12.5px;
    line-height: 1.5;
    margin: 6px 0 8px 0;
  }
  .wt-year-label {
    color: var(--text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .wt-year-value {
    color: var(--text-default);
  }
  .wt-year-value .wt-hours {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .wt-year-value .wt-hours.wt-hours-bad {
    color: #c62828;
  }
  .wt-year-value .wt-hours.wt-hours-good {
    color: #2e7d32;
  }
  body.dark .wt-year-value .wt-hours.wt-hours-bad { color: #ef5350; }
  body.dark .wt-year-value .wt-hours.wt-hours-good { color: #81c784; }

  .wt-peaks {
    background: rgba(255, 152, 0, 0.08);
    border-left: 3px solid #f57c00;
    padding: 8px 10px;
    margin-top: 8px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-default);
  }
  body.dark .wt-peaks {
    background: rgba(255, 167, 38, 0.10);
    border-left-color: #ffa726;
  }
  .wt-peaks strong {
    color: #e65100;
    display: block;
    margin-bottom: 2px;
  }
  body.dark .wt-peaks strong { color: #ffb74d; }

  .wt-quiet {
    background: rgba(46, 125, 50, 0.08);
    border-left: 3px solid #43a047;
    padding: 8px 10px;
    margin-top: 6px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-default);
  }
  body.dark .wt-quiet {
    background: rgba(102, 187, 106, 0.10);
    border-left-color: #66bb6a;
  }
  .wt-quiet strong {
    color: #2e7d32;
    display: block;
    margin-bottom: 2px;
  }
  body.dark .wt-quiet strong { color: #a5d6a7; }

  /* ===========================================================
     PANNEAU MÉDECIN DE FAMILLE — MODE INSTANTANÉ
     =========================================================== */

  /* Conteneur du résumé provincial : remplace .wt-summary-rows */
  .wt-doctor-snapshot-summary {
    margin-top: 8px;
  }

  /* Bandeau des 4 KPIs en haut du panneau */
  .wt-doc-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin: 4px 0 12px 0;
  }
  .wt-doc-kpi {
    background: var(--bg-modal-source, rgba(0,0,0,0.04));
    border-radius: 6px;
    padding: 10px 12px;
    text-align: center;
    border-left: 3px solid #2e7d32;
  }
  .wt-doc-kpi-warn { border-left-color: #ef6c00; }
  .wt-doc-kpi-bad  { border-left-color: #c62828; }

  .wt-doc-kpi-val {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-default);
    line-height: 1.1;
  }
  .wt-doc-kpi-lbl {
    font-size: 11px;
    color: var(--text-muted, #888);
    margin-top: 4px;
    line-height: 1.3;
  }

  .wt-doc-asof {
    font-size: 11px;
    color: var(--text-muted, #888);
    text-align: right;
    font-style: italic;
    margin-bottom: 14px;
  }

  /* Bloc historique VGQ — graphique en barres horizontales */
  .wt-doc-historical {
    margin: 12px 0;
    padding: 10px 12px;
    background: var(--bg-modal-source, rgba(0,0,0,0.03));
    border-left: 3px solid #6a1b9a;
    border-radius: 4px;
  }
  .wt-doc-historical-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-default);
    margin-bottom: 6px;
  }
  .wt-doc-hist-row {
    display: grid;
    grid-template-columns: 100px 1fr 80px;
    align-items: center;
    gap: 8px;
    margin: 3px 0;
    font-size: 12px;
  }
  .wt-doc-hist-label { color: var(--text-muted, #888); }
  .wt-doc-hist-bar-wrap {
    background: rgba(0,0,0,0.06);
    border-radius: 3px;
    height: 14px;
    overflow: hidden;
  }
  body.dark .wt-doc-hist-bar-wrap { background: rgba(255,255,255,0.08); }
  .wt-doc-hist-bar {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ef6c00, #c62828);
    border-radius: 3px;
  }
  .wt-doc-hist-val {
    text-align: right;
    color: var(--text-default);
    font-weight: 600;
  }
  .wt-doc-historical-note {
    font-size: 10px;
    font-style: italic;
    color: var(--text-muted, #888);
    margin-top: 6px;
  }

  /* Cartes régionales */
  .wt-doctor-snapshot-list {
    margin-top: 6px;
  }
  .wt-doc-region {
    padding: 12px 0;
    border-bottom: 1px dashed var(--border-modal-divider);
  }
  .wt-doc-region:last-of-type { border-bottom: none; }

  .wt-doc-region-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-default);
    margin-bottom: 8px;
  }

  .wt-doc-region-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px 14px;
    margin-bottom: 6px;
  }
  .wt-doc-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    border-bottom: 1px dotted rgba(0,0,0,0.07);
    font-size: 12px;
  }
  body.dark .wt-doc-stat { border-bottom-color: rgba(255,255,255,0.08); }
  .wt-doc-stat-lbl {
    color: var(--text-muted, #888);
  }
  .wt-doc-stat-val {
    font-weight: 600;
    color: var(--text-default);
  }

  .wt-doc-region-note {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-muted, #777);
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.03);
    border-radius: 4px;
    border-left: 2px solid #2e7d32;
  }
  body.dark .wt-doc-region-note { background: rgba(255,255,255,0.03); }

  /* Avertissement sur le chiffre "inscrites" (loi 11 / loi 15 Dubé) */
  .wt-doc-warning {
    margin: 12px 0;
    padding: 10px 12px;
    background: rgba(239, 108, 0, 0.08);
    border-left: 3px solid #ef6c00;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-default);
  }
  body.dark .wt-doc-warning { background: rgba(239, 108, 0, 0.12); }
  .wt-doc-warning strong { color: #ef6c00; }
  body.dark .wt-doc-warning strong { color: #ffa726; }

  /* ===========================================================
     GRAPHIQUE PROVINCIAL D'ÉVOLUTION GAMF 2021-2026 (RAMQ)
     =========================================================== */
  .wt-doc-history-chart {
    margin: 14px 0;
    padding: 10px 12px;
    background: var(--bg-modal-source, rgba(0,0,0,0.03));
    border-left: 3px solid #1565c0;
    border-radius: 4px;
  }
  .wt-doc-history-chart-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-default);
    margin-bottom: 4px;
  }
  .wt-doc-history-chart-legend {
    font-size: 11px;
    color: var(--text-muted, #888);
    margin-bottom: 6px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .wt-doc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .wt-doc-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
  }
  .wt-doc-legend-attente { background: #ef6c00; }
  .wt-doc-legend-pec     { background: #2e7d32; }

  /* SVG du graphique principal */
  .wt-doc-hist-chart-svg {
    width: 100%;
    height: auto;
    display: block;
  }
  .wt-doc-chart-grid {
    stroke: rgba(0,0,0,0.08);
    stroke-width: 1;
    stroke-dasharray: 2,3;
  }
  body.dark .wt-doc-chart-grid { stroke: rgba(255,255,255,0.10); }

  .wt-doc-chart-axis-text {
    font-size: 10px;
    fill: var(--text-muted, #888);
    font-family: inherit;
  }
  .wt-doc-chart-bar-attente {
    fill: #ef6c00;
    fill-opacity: 0.75;
    cursor: pointer;
  }
  .wt-doc-chart-bar-attente:hover { fill-opacity: 1; }
  .wt-doc-chart-line-pec {
    stroke: #2e7d32;
    stroke-width: 2;
    fill: none;
  }
  .wt-doc-chart-point-pec {
    fill: #2e7d32;
    stroke: var(--bg-modal, #fff);
    stroke-width: 1.5;
  }
  body.dark .wt-doc-chart-point-pec { stroke: #1e1e1e; }

  /* ===========================================================
     SPARKLINE DANS CHAQUE CARTE RÉGIONALE
     =========================================================== */
  .wt-doc-spark-block {
    margin: 8px 0 4px 0;
    padding: 6px 10px;
    background: rgba(0,0,0,0.025);
    border-radius: 4px;
    border-left: 2px solid #1565c0;
  }
  body.dark .wt-doc-spark-block { background: rgba(255,255,255,0.025); }

  .wt-doc-spark-aggregated {
    font-size: 11px;
    color: var(--text-muted, #888);
    line-height: 1.5;
  }

  .wt-doc-spark-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    margin-bottom: 4px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .wt-doc-spark-title {
    color: var(--text-muted, #888);
    font-weight: 500;
  }
  .wt-doc-spark-var {
    font-weight: 600;
    font-size: 11px;
  }
  .wt-doc-spark-svg {
    height: 36px;
    width: 100%;
    overflow: hidden;
  }
  .wt-doc-sparkline {
    width: 100%;
    height: 36px;
    display: block;
  }
  .wt-doc-sparkline-area {
    fill: #ef6c00;
    fill-opacity: 0.18;
  }
  .wt-doc-sparkline-line {
    stroke: #ef6c00;
    stroke-width: 1.6;
    stroke-linejoin: round;
    stroke-linecap: round;
  }
  .wt-doc-sparkline-dot-first {
    fill: #888;
  }
  .wt-doc-sparkline-dot-last {
    fill: #ef6c00;
    stroke: var(--bg-modal, #fff);
    stroke-width: 1;
  }
  body.dark .wt-doc-sparkline-dot-last { stroke: #1e1e1e; }
  .wt-doc-spark-endpoints {
    display: flex;
    justify-content: space-between;
    font-size: 9.5px;
    color: var(--text-muted, #888);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
  }

  /* Sous-établissements (Rive-Sud de Montréal) */
  .wt-sub-list {
    margin: 6px 0 8px 14px;
    padding-left: 12px;
    border-left: 2px solid var(--border-modal-divider);
  }
  .wt-sub-list .wt-region-name {
    font-size: 14px;
    margin-top: 8px;
  }
  .wt-sub-list .wt-region:first-child { padding-top: 4px; }

  /* Liens dans l'accordéon Sources — sans cette règle, ils héritent du bleu
     foncé par défaut du navigateur, qui est illisible sur le fond sombre
     en mode nuit. Mode clair : bleu standard ; mode nuit : bleu plus clair. */
  #wait-times-sources-body a {
    color: #1976d2;
    text-decoration: none;
    word-break: break-word;
  }
  #wait-times-sources-body a:hover { text-decoration: underline; }
  body.dark #wait-times-sources-body a { color: #64b5f6; }
  body.dark #wait-times-sources-body a:hover { color: #90caf9; }

  /* ============================================================
     SLIDER À 2 POIGNÉES — STRUCTURE 3 PANNEAUX
     ============================================================
     Wrap : flex container avec 3 panneaux + 2 poignées de drag.
     Largeurs pilotées par 2 variables CSS posées par le JS :
       --wt-split-1  → position % de la 1re poignée (largeur P1)
       --wt-split-2  → position % de la 2e poignée
     Largeurs :
       P1 = split-1
       P2 = split-2 - split-1
       P3 = 100 - split-2
     ============================================================ */
  #wait-times-slider-wrap {
    --wt-split-1: 33%;
    --wt-split-2: 66%;
    display: flex;
    position: relative;
    width: 100%;
    /* Hauteur fixe pour permettre le scroll interne de chaque panneau. */
    height: 62vh;
    min-height: 380px;
    background: var(--bg-modal);
    border: 1px solid var(--border-modal-divider);
    border-radius: 8px;
    overflow: hidden;
    margin: 12px 0 18px 0;
  }

  /* Chaque panneau — défilement vertical interne indépendant */
  .wt-panel {
    flex: 0 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-modal);
    transition: none; /* pas de transition pendant le drag */
  }
  #wait-times-panel-er {
    width: var(--wt-split-1);
  }
  #wait-times-panel-surgery {
    width: calc(var(--wt-split-2) - var(--wt-split-1));
  }
  #wait-times-panel-doctor {
    width: calc(100% - var(--wt-split-2));
  }

  /* Header coloré au sommet de chaque panneau pour l'identifier */
  .wt-panel-header {
    flex: 0 0 auto;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border-modal-divider);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wt-panel-icon {
    font-size: 18px;
    line-height: 1;
  }
  .wt-panel-title {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wt-panel-header-er {
    background: rgba(25, 118, 210, 0.08);
    color: #1565c0;
  }
  .wt-panel-header-surgery {
    background: rgba(156, 39, 176, 0.08);
    color: #6a1b9a;
  }
  .wt-panel-header-doctor {
    background: rgba(46, 125, 50, 0.08);
    color: #2e7d32;
  }
  body.dark .wt-panel-header-er      { background: rgba(100, 181, 246, 0.10); color: #90caf9; }
  body.dark .wt-panel-header-surgery { background: rgba(206, 147, 216, 0.10); color: #ce93d8; }
  body.dark .wt-panel-header-doctor  { background: rgba(165, 214, 167, 0.10); color: #a5d6a7; }

  /* Corps du panneau : défilement vertical interne */
  .wt-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 14px 16px 14px;
    min-height: 0;
  }
  .wt-panel-subtitle {
    font-size: 11.5px;
    color: var(--text-muted, #888);
    line-height: 1.55;
    margin: 0 0 12px 0;
  }
  .wt-panel-subtitle strong { color: var(--text-accent); }

  /* Les sous-éléments des panneaux 2 et 3 reprennent les mêmes styles
     que ceux du panneau 1 — on aliase via classes génériques. */
  .wt-summary-box {
    background: var(--bg-modal-source);
    border-left: 3px solid var(--text-accent);
    padding: 10px 12px;
    margin: 0 0 14px 0;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-default);
  }
  .wt-summary-box strong {
    display: block;
    color: var(--text-accent);
    margin-bottom: 6px;
    font-size: 12.5px;
  }
  .wt-summary-rows {
    display: grid;
    /* Dans les panneaux, on contraint à 2 colonnes pour économiser la
       largeur — sinon le contenu déborde quand le panneau est étroit. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px 12px;
    font-size: 11.5px;
  }
  .wt-summary-rows .wt-summary-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 0;
    border-bottom: 1px dotted var(--border-modal-divider);
    padding: 2px 0;
  }
  .wt-summary-rows .wt-summary-year {
    color: var(--text-muted);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .wt-summary-rows .wt-summary-sep {
    color: var(--text-muted);
    margin: 0 6px;
    font-weight: 600;
  }
  .wt-summary-rows .wt-summary-value {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
  }
  .wt-summary-rows .wt-summary-value.wt-hours-good { color: #2e7d32; }
  .wt-summary-rows .wt-summary-value.wt-hours-bad  { color: #c62828; }
  body.dark .wt-summary-rows .wt-summary-value.wt-hours-good { color: #81c784; }
  body.dark .wt-summary-rows .wt-summary-value.wt-hours-bad  { color: #ef5350; }

  /* Le panneau Urgences (panneau 1) garde son ancien id #wait-times-summary-rows
     qui suit les mêmes règles que .wt-summary-rows. On les harmonise : */
  #wait-times-summary-rows {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    font-size: 11.5px !important;
    gap: 3px 12px !important;
  }
  #wait-times-summary-box {
    margin: 0 0 14px 0;
    padding: 10px 12px;
    font-size: 12px;
  }

  /* POIGNÉES verticales entre les panneaux.
     Largeur 10px (un peu plus que 8px) pour faciliter la saisie.
     Le grip central est plus visible quand le panneau adjacent est fermé. */
  .wt-handle {
    flex: 0 0 10px;
    width: 10px;
    cursor: ew-resize;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,0.10) 30%,
      rgba(0,0,0,0.22) 50%,
      rgba(0,0,0,0.10) 70%,
      transparent 100%
    );
    position: relative;
    transition: background 0.15s;
    user-select: none;
    touch-action: none;
    z-index: 5;
    /* Permettre au grip central de "déborder" légèrement, utile quand
       les deux poignées se touchent (panneau central fermé). */
  }
  .wt-handle:hover,
  body.wt-slider-dragging .wt-handle {
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(25, 118, 210, 0.18) 30%,
      rgba(25, 118, 210, 0.38) 50%,
      rgba(25, 118, 210, 0.18) 70%,
      transparent 100%
    );
  }
  body.dark .wt-handle {
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(255,255,255,0.10) 30%,
      rgba(255,255,255,0.24) 50%,
      rgba(255,255,255,0.10) 70%,
      transparent 100%
    );
  }
  body.dark .wt-handle:hover,
  body.dark.wt-slider-dragging .wt-handle {
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(100, 181, 246, 0.22) 30%,
      rgba(100, 181, 246, 0.42) 50%,
      rgba(100, 181, 246, 0.22) 70%,
      transparent 100%
    );
  }
  /* Petit "grip" centré verticalement avec deux chevrons.
     Quand deux poignées se touchent (panneau adjacent fermé), les deux
     grips se placent côte à côte — c'est lisible et reste saisissable. */
  .wt-handle-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 46px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #1976d2;
    font-size: 9px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);
    pointer-events: none;
  }
  .wt-handle:hover .wt-handle-grip,
  body.wt-slider-dragging .wt-handle .wt-handle-grip {
    color: #0d47a1;
    border-color: rgba(0,0,0,0.30);
    box-shadow: 0 3px 10px rgba(25,118,210,0.30);
  }
  body.dark .wt-handle-grip {
    background: rgba(45, 49, 56, 0.96);
    border-color: rgba(255,255,255,0.22);
    color: #64b5f6;
  }
  body.dark .wt-handle:hover .wt-handle-grip,
  body.dark.wt-slider-dragging .wt-handle .wt-handle-grip {
    color: #90caf9;
    border-color: rgba(255,255,255,0.40);
  }
  .wt-handle-grip span {
    line-height: 1;
    transform: scaleX(0.9);
  }

  /* Pendant le drag : pas de sélection de texte, curseur partout */
  body.wt-slider-dragging {
    cursor: ew-resize !important;
    user-select: none !important;
  }
  body.wt-slider-dragging * {
    cursor: ew-resize !important;
    user-select: none !important;
  }

  /* Adaptation mobile (très petite largeur) :
     - on garde le slider, mais on réduit la hauteur et on rétrécit les fonts.
     Une largeur < 720 px n'est pas idéale pour 3 panneaux : on suggère
     visuellement d'ouvrir un panneau à la fois en glissant. */
  @media (max-width: 720px) {
    #wait-times-slider-wrap {
      height: 58vh;
      min-height: 320px;
    }
    .wt-panel-header {
      padding: 8px 10px;
      font-size: 12px;
    }
    .wt-panel-body {
      padding: 10px 10px 14px 10px;
    }
    .wt-panel-subtitle { font-size: 10.5px; }
    .wt-summary-rows,
    #wait-times-summary-rows {
      grid-template-columns: 1fr !important;
      font-size: 11px !important;
    }
    .wt-region-name { font-size: 13.5px; }
    .wt-region-note { font-size: 11.5px; }
    .wt-years-table {
      grid-template-columns: 56px 1fr;
      font-size: 11.5px;
    }
  }

  /* ============================================================
     BOUTON RECOMMANDATIONS — icône ampoule jaune
     ============================================================ */

  /* Icône ampoule dans le bouton "Recommandations" — jaune doré pour
     évoquer l'idée et se distinguer du triangle rouge (Incidents) et
     de l'horloge bleue (Attente). */
  #btn-recommendations .btn-bulb-icon {
    color: #ffd54f;
    margin-right: 2px;
    font-size: 13px;
    line-height: 1;
    text-shadow: 0 0 1px rgba(0,0,0,0.4);
  }
  body.dark #btn-recommendations .btn-bulb-icon {
    color: #ffe082;
  }

  /* ============================================================
     MODALE RECOMMANDATIONS — calquée sur la modale Temps d'attente
     (même structure : overlay plein écran, contenu centré, scroll
     interne, bouton ✕ identique en haut-droite)
     ============================================================ */
  #recommendations-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 3000;
    justify-content: center;
    align-items: center;
  }
  #recommendations-modal.visible { display: flex; }

  #recommendations-content {
    background: var(--bg-modal);
    color: var(--text-default);
    border-radius: 12px;
    overflow: hidden;
    max-width: 800px;
    width: 92%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    position: relative;
  }

  #recommendations-scroll {
    overflow-y: auto;
    padding: 32px 36px 24px;
    line-height: 1.55;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Titre — exactement le même style que #wait-times-title */
  #recommendations-title {
    color: var(--text-accent);
    font-size: 20px;
    margin-bottom: 8px;
    text-align: center;
    font-weight: 600;
    padding-right: 36px;
    padding-left: 36px;
  }
  .recommendations-bulb-icon {
    color: #f9a825;       /* doré pour différencier du ⏱ bleu et du ⚠ rouge */
  }
  body.dark .recommendations-bulb-icon {
    color: #ffd54f;
  }

  /* Bouton ✕ en haut à droite — exactement la même règle que les
     autres modales pour assurer la cohérence visuelle */
  #recommendations-dismiss {
    position: absolute;
    top: 10px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--text-muted, #888);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    z-index: 10;
    transition: background 0.15s, color 0.15s;
  }
  #recommendations-dismiss:hover {
    background: rgba(0,0,0,0.08);
    color: var(--text-default);
  }

  /* Hover du bouton ✕ en mode sombre — fond clair au lieu de foncé,
     car rgba(0,0,0,0.08) est invisible/indésirable sur un fond déjà sombre */
  body.dark #incidents-dismiss:hover,
  body.dark #intro-dismiss:hover,
  body.dark #wait-times-dismiss:hover,
  body.dark #recommendations-dismiss:hover,
  body.dark #disclaimer-readonly-close:hover {
    background: rgba(255,255,255,0.12);
    color: var(--text-default);
  }

  /* Sections thématiques de la liste de recommandations */
  .reco-theme {
    margin-top: 22px;
    padding-bottom: 6px;
  }
  .reco-theme-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-accent);
    margin: 0 0 4px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-modal-divider);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .reco-theme-title .reco-theme-icon {
    font-size: 18px;
    line-height: 1;
  }
  .reco-theme-blurb {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 10px 0;
    font-style: italic;
  }

  /* Item individuel de recommandation */
  .reco-item {
    padding: 12px 0;
    border-bottom: 1px dashed var(--border-modal-divider);
  }
  .reco-item:last-child { border-bottom: none; }

  .reco-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
  }
  .reco-year {
    font-weight: 600;
    color: var(--text-accent);
    background: var(--bg-modal-source);
    padding: 2px 8px;
    border-radius: 12px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
  }
  .reco-author {
    font-weight: 600;
    color: var(--text-default);
  }
  .reco-affiliation {
    color: var(--text-muted);
    font-style: italic;
    font-size: 11.5px;
  }

  .reco-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-default);
    margin: 0;
  }
  .reco-text strong {
    color: var(--text-accent);
  }

  /* Liens à l'intérieur de la modale Recommandations (sources) — mêmes
     règles que pour wait-times pour conserver la lisibilité en mode nuit */
  #recommendations-sources-body a {
    color: #1976d2;
    text-decoration: none;
    word-break: break-word;
  }
  #recommendations-sources-body a:hover { text-decoration: underline; }
  body.dark #recommendations-sources-body a { color: #64b5f6; }
  body.dark #recommendations-sources-body a:hover { color: #90caf9; }

  /* ============================================================
     BLOCAGE MOBILE — l'organigramme est trop dense pour les petits écrans
     ============================================================ */

  /* Lien cliquable à l'intérieur d'une anomalie documentée
     (ex. lien vers l'article de presse sur un cas de vétusté). */
  .anomaly-block .anomaly-link {
    color: #b3401a;
    text-decoration: underline;
    word-break: break-word;
  }
  .anomaly-block .anomaly-link:hover {
    color: #8a2f12;
  }
  body.dark .anomaly-block .anomaly-link {
    color: #ff9d6f;
  }
  body.dark .anomaly-block .anomaly-link:hover {
    color: #ffb892;
  }