#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;
  }
  /* Bloc « note » : même style visuel rouge que .anomaly-block, mais sans
     titre d'anomalie et sans icône sur la carte du nœud. Pour mettre en
     valeur une information contextuelle (ex. branche parallèle Drainville). */
  .note-block {
    background: #ffebee;
    padding: 10px 12px;
    border-left: 3px solid #c62828;
    border-radius: 4px;
    color: #4a1010;
  }
  .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;
  }

  /* Encadré ROUGE — constat critique signalé (champ optionnel « flag ») */
  .incident-flag {
    font-size: 13.5px;
    line-height: 1.45;
    color: #8a1c1c;
    background: #fdecec;
    border: 1px solid #e6a3a3;
    border-left: 4px solid #c62828;
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0 0 10px 0;
    font-weight: 500;
  }
  .incident-flag::before {
    content: "⚠ ";
    font-weight: 700;
    color: #c62828;
  }
  body.dark .incident-flag {
    color: #ffb3b3;
    background: rgba(198, 40, 40, 0.16);
    border-color: rgba(229, 115, 115, 0.55);
    border-left-color: #ef5350;
  }
  body.dark .incident-flag::before { color: #ef5350; }

  .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;
  }

  /* Sous-titre de la modale d'accueil (« du ministère des Transports et de
     la Mobilité durable » / « of the Ministry of Transport… ») : MÊME FORMAT
     que « Organigramme complet » — même taille (22 px) et même graisse (le h1
     est en gras par défaut, donc on n'impose PAS de font-weight et le span
     hérite du gras 700) ; la couleur est aussi héritée du h1. Forcé sur une
     seule ligne : on lui rend toute la largeur de la modale (~586 px) via des
     marges négatives qui annulent le retrait de 36 px du h1 (réservé au bouton
     X, en haut). À 22 px : FR ≈ 581 px, EN ≈ 574 px (mesure conservatrice ;
     la police système réelle est plus étroite). */
  #intro-content h1 .intro-title-sub {
    display: block;
    font-size: 22px;
    white-space: nowrap;
    margin-top: 3px;
    margin-left: -36px;
    margin-right: -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 #infras-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;
  }

/* ============================================================ */
/*  Section « Infras » — état des structures du réseau routier  */
/* ============================================================ */
.btn-infra-icon { font-size: 12px; }

#infras-modal {
  display: none;
  position: fixed; inset: 0;
  background: var(--bg-modal-overlay);
  z-index: 3000;
  justify-content: center; align-items: center;
}
#infras-modal.visible { display: flex; }
#infras-modal.hidden  { display: none; }

#infras-content {
  position: relative;
  background: var(--bg-modal);
  width: 95%; max-width: 1320px; max-height: 92vh;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Bouton ✕ en haut à droite — exactement le même style que
   #incidents-dismiss / #intro-dismiss (taille, position, survol). */
#infras-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;
}
#infras-dismiss:hover {
  background: rgba(0,0,0,0.08);
  color: var(--text-default);
}
#infras-scroll { overflow-y: auto; padding: 26px 30px 34px; }
#infras-title {
  margin: 0 40px 4px 0; font-size: 23px; color: var(--text-accent);
  display: flex; align-items: center; gap: 9px;
}
.infras-intro { color: var(--text-muted); font-size: 13.5px; margin: 6px 0 18px; line-height: 1.5; }
.infras-section { margin: 22px 0 0; }
.infras-section > h2 {
  font-size: 15px; color: var(--text-accent);
  border-bottom: 2px solid var(--border-modal-divider);
  padding-bottom: 5px; margin: 0 0 12px;
}

/* couleurs des feux (cohérentes avec les états des nœuds) */
:root { --feu-vert:#2e7d32; --feu-jaune:#f9a825; --feu-rouge:#c2185b; --feu-inconnu:#bdbdbd; }
.feu-ico { height: 22px; width: auto; vertical-align: middle; image-rendering: -webkit-optimize-contrast; }
.feu-ico.sm { height: 17px; }

/* légende */
.infras-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 4px 0 8px; }
.infras-legend .lg { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-default); }
.infras-legend .lg b { font-weight: 700; }
.infras-legend .lg small { color: var(--text-muted); }

/* grande barre empilée */
.feu-bar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.feu-bar .seg { height: 100%; }
.feu-bar .seg.v { background: var(--feu-vert); }
.feu-bar .seg.j { background: var(--feu-jaune); }
.feu-bar .seg.r { background: var(--feu-rouge); }
.feu-bar .seg.i { background: var(--feu-inconnu); }
.feu-bar-caption { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-top: 5px; }

/* encadré « chiffres officiels » */
.infras-official {
  background: var(--bg-modal-source);
  border-left: 4px solid var(--text-accent);
  padding: 12px 15px; border-radius: 0 8px 8px 0;
  font-size: 12.5px; color: var(--text-default); line-height: 1.55; margin-top: 12px;
}
.infras-official b { color: var(--text-accent); }

/* cartes de stats rapides */
.infras-kpis { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 6px; }
.infras-kpi { flex: 1 1 150px; background: var(--bg-panel); border: 1px solid var(--border-panel);
  border-radius: 8px; padding: 11px 13px; }
.infras-kpi .v { font-size: 22px; font-weight: 700; color: var(--text-accent); }
.infras-kpi .l { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* lignes famille/région avec mini-barre */
.infras-rows { display: grid; gap: 7px; }
.infras-row { display: grid; grid-template-columns: 150px 1fr 92px; align-items: center; gap: 12px; font-size: 12.5px; }
.infras-row .nm { color: var(--text-default); }
.infras-row .nm small { color: var(--text-muted); }
.infras-row .pct { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.infras-row .pct b { color: var(--feu-rouge); }
.infras-minibar { display: flex; height: 15px; border-radius: 4px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.infras-minibar .seg.v { background: var(--feu-vert); }
.infras-minibar .seg.j { background: var(--feu-jaune); }
.infras-minibar .seg.r { background: var(--feu-rouge); }
.infras-minibar .seg.i { background: var(--feu-inconnu); }

/* explorateur : filtres + tableau */
.infras-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 11px; }
.infras-filters input, .infras-filters select {
  font-size: 13px; padding: 7px 9px; border: 1px solid var(--border-panel);
  border-radius: 6px; background: var(--bg-panel); color: var(--text-default);
}
.infras-filters input { flex: 1 1 220px; }
.infras-count { font-size: 12px; color: var(--text-muted); margin-bottom: 7px; }
.infras-table-wrap { max-height: 430px; overflow-y: auto; border: 1px solid var(--border-panel); border-radius: 8px; }
table.infras-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.infras-table thead th {
  position: sticky; top: 0; background: var(--bg-header); color: #fff;
  text-align: left; padding: 8px 10px; font-weight: 600; font-size: 11.5px; z-index: 1;
}
table.infras-table td { padding: 6px 10px; border-top: 1px solid var(--border-modal-divider); color: var(--text-default); }
table.infras-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.018); }
table.infras-table td.feu-cell { text-align: center; width: 34px; }
table.infras-table td.an { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.infras-source { margin-top: 20px; font-size: 11px; color: var(--text-muted); line-height: 1.5; border-top: 1px solid var(--border-modal-divider); padding-top: 10px; }

/* Infras — en-têtes triables + colonne carte (GPS) */
table.infras-table thead th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
table.infras-table thead th.sortable:hover { background: var(--bg-header-btn-hover); }
table.infras-table thead th .sort-arrow { font-size: 9px; opacity: 0.95; margin-left: 2px; }
table.infras-table thead th.gps-head { text-align: center; width: 46px; }
table.infras-table td.gps-cell { text-align: center; width: 46px; color: var(--text-muted); }
table.infras-table td.gps-cell a { color: var(--text-accent); display: inline-flex; align-items: center; justify-content: center; padding: 2px; border-radius: 5px; }
table.infras-table td.gps-cell a:hover { color: #fff; background: var(--bg-header-btn); }

/* Infras — icônes légères (fond CSS) pour le tableau (milliers de lignes) */
.feu-ico-bg { display:inline-block; width:11px; height:22px; background-size:contain; background-repeat:no-repeat; background-position:center; vertical-align:middle; }
.feu-ico-bg.feu-vert  { background-image:url(../assets/feu-vert.png); }
.feu-ico-bg.feu-jaune { background-image:url(../assets/feu-jaune.png); }
.feu-ico-bg.feu-rouge { background-image:url(../assets/feu-rouge.png); }
.feu-ico-bg.feu-inconnu { width:auto; height:auto; color:var(--feu-inconnu); }
.gps-link { display:inline-block; width:20px; height:20px; cursor:pointer; background-color:var(--text-accent);
  -webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTEyIDJDOC4xMyAyIDUgNS4xMyA1IDljMCA1LjI1IDcgMTMgNyAxM3M3LTcuNzUgNy0xM2MwLTMuODctMy4xMy03LTctN3ptMCA5LjVhMi41IDIuNSAwIDEgMSAwLTUgMi41IDIuNSAwIDAgMSAwIDV6Jy8+PC9zdmc+") center / 15px 15px no-repeat;
  mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTEyIDJDOC4xMyAyIDUgNS4xMyA1IDljMCA1LjI1IDcgMTMgNyAxM3M3LTcuNzUgNy0xM2MwLTMuODctMy4xMy03LTctN3ptMCA5LjVhMi41IDIuNSAwIDEgMSAwLTUgMi41IDIuNSAwIDAgMSAwIDV6Jy8+PC9zdmc+") center / 15px 15px no-repeat; }
.gps-link:hover { background-color:var(--bg-header-btn-hover); }

/* Infras — slider 3 panneaux (réutilise le CSS .wt-panel/.wt-handle hérité) */
#infras-slider-wrap {
  --wt-split-1: 33%;
  --wt-split-2: 66%;
  display: flex; position: relative; width: 100%;
  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;
}
#infras-panel-1 { width: var(--wt-split-1); }
#infras-panel-2 { width: calc(var(--wt-split-2) - var(--wt-split-1)); }
#infras-panel-3 { width: calc(100% - var(--wt-split-2)); }
@media (max-width: 720px) {
  #infras-slider-wrap { height: 58vh; min-height: 320px; }
}
/* En-tête de panneau — teinte « chantiers » (3e panneau) si besoin */
.wt-panel-header-chantiers { background: rgba(194, 24, 91, 0.08); color: #ad1457; }
body.dark .wt-panel-header-chantiers { background: rgba(244, 143, 177, 0.12); color: #f48fb1; }
/* Dans le slider, la table de l'explorateur prend toute la hauteur du panneau */
#infras-panel-2 .infras-table-wrap { max-height: none; flex: 1 1 auto; border: none; border-radius: 0; }
#infras-panel-2 .wt-panel-body { display: flex; flex-direction: column; }
/* Cartes de chantiers (panneau 3) */
.chantier-card { border: 1px solid var(--border-panel); border-radius: 8px; padding: 12px 13px; margin-bottom: 12px; background: var(--bg-panel); }
.chantier-card h3 { margin: 0 0 4px; font-size: 14px; color: var(--text-accent); display: flex; align-items: center; gap: 7px; }
.chantier-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.chantier-card dl { margin: 0; font-size: 12px; line-height: 1.5; }
.chantier-card dt { font-weight: 700; color: var(--text-default); margin-top: 6px; }
.chantier-card dd { margin: 0 0 0 0; color: var(--text-default); }
.chantier-card .cout { font-size: 15px; font-weight: 700; color: var(--feu-rouge); }
.chantier-reports { list-style: none; padding-left: 0; margin: 4px 0 0; }
.chantier-reports li { padding: 2px 0 2px 16px; position: relative; font-size: 11.5px; color: var(--text-default); }
.chantier-reports li::before { content: "↪"; position: absolute; left: 0; color: var(--feu-jaune); font-weight: 700; }
.chantier-src { font-size: 10.5px; color: var(--text-muted); margin-top: 7px; }

/* Infras — chantiers suspendus (grisâtre) */
.chantier-group-title { font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin: 14px 0 10px; padding-top: 10px; border-top: 1px dashed var(--border-modal-divider); }
.chantier-card.suspendu { opacity: 0.78; background: var(--bg-modal-source); border-style: dashed; filter: grayscale(0.35); }
.chantier-card.suspendu h3 { color: var(--text-muted); }
.chantier-card.suspendu .cout { color: var(--text-muted); font-weight: 600; }
.susp-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .2px; color: #fff; background: #9e9e9e; border-radius: 4px; padding: 2px 8px; margin-bottom: 7px; text-transform: uppercase; }