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

  /* Liens de la section « Sources officielles » du message d'accueil —
     même rendu que les sources des Démissions : couleur lisible en mode
     nuit et sans soulignement (souligné seulement au survol). */
  #intro-sources-body a { color: #2c6fb0; text-decoration: none; }
  #intro-sources-body a:hover { text-decoration: underline; }
  body.dark #intro-sources-body a { color: #64b5f6; }
  .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 de porte dans le bouton « Démissions » */
  #btn-resign .btn-door-icon {
    margin-right: 2px;
    font-size: 13px;
    line-height: 1;
  }

  /* ============================================================
     MODALE DÉMISSIONS — calquée sur la modale Incidents
     (remplace l'ancienne modale Temps d'attente)
     Variables de couleur définies plus bas avec fallback.
     ============================================================ */
  :root {
    --resign-line-dep: #c0392b;
    --resign-line-res: #2c6fb0;
    --resign-grid: #e6e6e6;
    --resign-axis: #999;
    --resign-text: #555;
  }
  body.dark {
    --resign-line-dep: #e74c3c;
    --resign-line-res: #5dade2;
    --resign-grid: #3a3a3a;
    --resign-axis: #777;
    --resign-text: #bbb;
  }

  #resign-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000; /* aligné sur les autres modales de contenu (incidents, recommandations) pour couvrir et bloquer la barre d'outils */
    background: rgba(0, 0, 0, 0.7); /* même fond que #incidents-modal / #recommendations-modal (pas de backdrop-filter) */
    align-items: center;
    justify-content: center;
    /* Réserve l'espace de la barre de menu fixe (#header) en haut afin que
       la modale ne la recouvre jamais, quel que soit l'onglet affiché. */
    padding: 64px 16px 16px;
    box-sizing: border-box;
  }
  #resign-modal.visible { display: flex; }

  #resign-content {
    background: var(--bg, #fff);
    color: var(--text-default, #1a1a1a);
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
    width: min(860px, 94vw);
    /* Hauteur constante : la modale garde les mêmes proportions sur tous les
       onglets (le contenu défile à l'intérieur au lieu de faire grandir le
       cadre). Plafonnée pour rester dans la zone sous le menu. */
    height: 80vh;
    max-height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.dark #resign-content {
    background: #1e1e1e;
    color: #e8e8e8;
  }

  #resign-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 30px 34px 26px;
  }

  #resign-title {
    font-size: 21px;
    text-align: center;
    margin: 0 0 4px;
    line-height: 1.3;
  }
  .resign-door-icon { font-size: 20px; }

  /* Bouton ✕ — même style que #intro-dismiss (message d'accueil) */
  #resign-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;
  }
  #resign-dismiss:hover {
    background: rgba(0,0,0,0.08);
    color: var(--text-default);
  }
  body.dark #resign-dismiss { color: #aaa; }

  /* ---- Onglets ---- */
  #resign-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--resign-grid, #e6e6e6);
    margin: 18px 0 0;
  }
  .resign-tab {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: transparent;
    color: var(--text-muted, #888);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
  }
  .resign-tab:hover { color: var(--text-default, #333); }
  .resign-tab-active {
    color: #2c6fb0;
    border-bottom-color: #2c6fb0;
  }
  body.dark .resign-tab-active { color: #5dade2; border-bottom-color: #5dade2; }

  /* ---- Panneaux ---- */
  .resign-panel { display: none; padding-top: 18px; }
  .resign-panel-active { display: block; }

  .resign-panel-lead {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted, #777);
    margin: 0 0 16px;
  }
  .resign-caveat {
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text-muted, #888);
    background: rgba(192, 57, 43, 0.07);
    border-left: 3px solid #c0392b;
    padding: 8px 12px;
    margin: 16px 0 0;
    border-radius: 0 4px 4px 0;
  }
  body.dark .resign-caveat { background: rgba(231, 76, 60, 0.12); }

  .resign-h3 {
    font-size: 14px;
    margin: 0 0 10px;
    color: var(--text-default, #222);
  }

  /* ---- Tableaux ---- */
  .resign-table-scroll { overflow-x: auto; }
  .resign-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
  }
  .resign-table th {
    background: rgba(44, 111, 176, 0.09);
    color: var(--text-default, #222);
    font-weight: 600;
    text-align: left;
    padding: 7px 10px;
    border-bottom: 2px solid var(--resign-grid, #e6e6e6);
  }
  body.dark .resign-table th { background: rgba(93, 173, 226, 0.14); }
  .resign-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--resign-grid, #ededed);
  }
  .resign-table tr:hover td { background: rgba(0, 0, 0, 0.03); }
  body.dark .resign-table tr:hover td { background: rgba(255, 255, 255, 0.04); }

  .resign-year { font-weight: 600; white-space: nowrap; }
  .resign-val {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #2c6fb0;
  }
  body.dark .resign-val { color: #5dade2; }
  .resign-nd {
    color: var(--text-muted, #aaa);
    font-style: italic;
    cursor: help;
  }

  /* ---- Graphique ---- */
  #resign-chart-wrap { width: 100%; }
  .resign-svg {
    width: 100%;
    height: auto;
    display: block;
  }
  #resign-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--text-muted, #777);
  }
  .resign-legend-item { display: flex; align-items: center; gap: 6px; }
  .resign-legend-swatch {
    width: 14px;
    height: 4px;
    border-radius: 2px;
    display: inline-block;
  }
  .resign-legend-note {
    flex-basis: 100%;
    text-align: center;
    font-style: italic;
    color: var(--text-muted, #999);
  }

  /* ---- Onglet faits ---- */
  .resign-facts-list {
    margin: 0;
    padding-left: 20px;
  }
  .resign-facts-list li {
    font-size: 12.5px;
    line-height: 1.65;
    margin-bottom: 10px;
    color: #333;
  }
  body.dark .resign-facts-list li { color: #9a9a9a; }
  .resign-support-box {
    margin-top: 16px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted, #666);
  }
  body.dark .resign-support-box {
    background: rgba(255, 255, 255, 0.05);
    color: #aaa;
  }

  /* ---- Sources ---- */
  .resign-sources-ul {
    margin: 0;
    padding-left: 18px;
  }
  .resign-sources-ul li {
    font-size: 11.5px;
    line-height: 1.6;
    margin-bottom: 6px;
  }
  #resign-sources-list a { color: #2c6fb0; text-decoration: none; }
  #resign-sources-list a:hover { text-decoration: underline; }
  body.dark #resign-sources-list a { color: #64b5f6; }

  /* Badge [FR] sur les liens francophones en mode anglais */
  html[data-lang="en"] #resign-modal a.ext-fr::after {
    content: " [FR]";
    font-size: 9px;
    font-weight: 700;
    color: #c0392b;
    vertical-align: super;
  }

  #resign-sources-body a { color: #2c6fb0; }
  #resign-sources-body a:hover { text-decoration: underline; }
  body.dark #resign-sources-body a { color: #64b5f6; }

  @media (max-width: 600px) {
    #resign-scroll { padding: 22px 16px 20px; }
    #resign-title { font-size: 17px; }
    .resign-tab { font-size: 11.5px; padding: 8px 4px; }
    .resign-table { 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 #resign-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 #resign-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
     ============================================================ */

  /* ============================================================
     ONGLETS DE LA MODALE INCIDENTS
     (réutilise le style des onglets resign, préfixe « incidents »)
     ============================================================ */
  #incidents-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid #e6e6e6;
    margin: 18px 0 0;
  }
  .incidents-tab {
    flex: 1;
    padding: 10px 8px;
    border: none;
    background: transparent;
    color: var(--text-muted, #888);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
  }
  .incidents-tab:hover { color: var(--text-default, #333); }
  .incidents-tab-active {
    color: #2c6fb0;
    border-bottom-color: #2c6fb0;
  }
  body.dark #incidents-tabs { border-bottom-color: #3a3a3a; }
  body.dark .incidents-tab-active { color: #5dade2; border-bottom-color: #5dade2; }

  .incidents-panel { display: none; padding-top: 18px; }
  .incidents-panel-active { display: block; }

  /* ============================================================
     ONGLET INDICE DE DÉFAVORISATION
     ============================================================ */
  .defav-h3 {
    font-size: 15px;
    margin: 0 0 8px;
    color: var(--text-default, #222);
  }
  body.dark .defav-h3 { color: #e8e8e8; }

  /* ---- Bloc explicatif ---- */
  #defav-intro { margin-bottom: 18px; }
  .defav-what, .defav-why {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-default, #444);
    margin: 0 0 10px;
  }
  body.dark .defav-what, body.dark .defav-why { color: #c8c8c8; }
  .defav-why {
    background: rgba(44, 111, 176, 0.06);
    border-left: 3px solid #2c6fb0;
    padding: 9px 12px;
    border-radius: 0 6px 6px 0;
  }
  body.dark .defav-why { background: rgba(93, 173, 226, 0.10); }

  /* ---- Légende des 4 niveaux ---- */
  #defav-legend { margin-bottom: 18px; }
  .defav-legend-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted, #777);
    margin-bottom: 8px;
  }
  .defav-legend-grid {
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
  }
  .defav-legend-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.03);
    border-left: 4px solid #ccc;
  }
  body.dark .defav-legend-item { background: rgba(255, 255, 255, 0.04); }
  .defav-legend-0 { border-left-color: #2e9e5b; }
  .defav-legend-1 { border-left-color: #d4a017; }
  .defav-legend-2 { border-left-color: #e8731c; }
  .defav-legend-3 { border-left-color: #d32f2f; }
  .defav-legend-exc { border-left-color: #5b6b7a; }
  .defav-legend-emoji { font-size: 22px; line-height: 1; }
  .defav-legend-text { display: flex; flex-direction: column; }
  .defav-legend-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-default, #333);
  }
  body.dark .defav-legend-label { color: #e0e0e0; }
  .defav-legend-deciles {
    font-size: 11px;
    color: var(--text-muted, #888);
  }
  .defav-legend-note {
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--text-muted, #888);
    font-style: italic;
    margin: 10px 0 0;
  }

  /* ---- Faits saillants ---- */
  #defav-facts { margin-bottom: 18px; }
  .defav-facts-list {
    margin: 0;
    padding-left: 20px;
  }
  .defav-facts-list li {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-default, #444);
    margin-bottom: 7px;
  }
  body.dark .defav-facts-list li { color: #c8c8c8; }

  /* ---- Liste des écoles ---- */
  .defav-list-lead {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted, #777);
    margin: 0 0 12px;
  }
  .defav-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
  }
  .defav-filter-btn {
    padding: 6px 11px;
    border: 1px solid #ccc;
    border-radius: 14px;
    background: transparent;
    color: var(--text-muted, #777);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .defav-filter-btn:hover { border-color: #2c6fb0; color: #2c6fb0; }
  .defav-filter-active {
    background: #2c6fb0;
    border-color: #2c6fb0;
    color: #fff;
  }
  body.dark .defav-filter-btn { border-color: #444; }
  body.dark .defav-filter-active { background: #5dade2; border-color: #5dade2; color: #1a1a1a; }
  .defav-count {
    font-size: 11.5px;
    color: var(--text-muted, #888);
    margin-bottom: 6px;
  }
  .defav-table-scroll {
    overflow-x: auto;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #ededed;
    border-radius: 6px;
  }
  body.dark .defav-table-scroll { border-color: #3a3a3a; }
  .defav-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
  }
  .defav-table th {
    position: sticky;
    top: 0;
    background: #f0f4f8;
    color: var(--text-default, #222);
    font-weight: 600;
    text-align: left;
    padding: 7px 9px;
    border-bottom: 2px solid #e0e0e0;
    z-index: 1;
  }
  body.dark .defav-table th { background: #2a2f36; color: #e0e0e0; border-bottom-color: #444; }
  .defav-table td {
    padding: 6px 9px;
    border-bottom: 1px solid #ededed;
    color: var(--text-default, #444);
  }
  body.dark .defav-table td { border-bottom-color: #333; color: #c8c8c8; }
  .defav-table tr:hover td { background: rgba(44, 111, 176, 0.05); }
  body.dark .defav-table tr:hover td { background: rgba(93, 173, 226, 0.08); }
  .defav-cell-emoji {
    font-size: 17px;
    text-align: center;
    width: 38px;
  }
  .defav-cell-school { font-weight: 600; }
  .defav-cell-css { font-size: 11px; color: var(--text-muted, #888); }
  .defav-cell-decile {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
  }
  .defav-row-2 .defav-cell-decile { color: #e8731c; }
  .defav-row-3 .defav-cell-decile { color: #d32f2f; }
  body.dark .defav-row-2 .defav-cell-decile { color: #f4a259; }
  body.dark .defav-row-3 .defav-cell-decile { color: #ef5350; }

  /* ---- Accordéon Sources de l'onglet défav ---- */
  #defav-sources-accordion { margin-top: 16px; }
  #defav-sources-body {
    display: none;
    padding: 4px 0 0;
  }
  #defav-sources-body.open { display: block; }
  #defav-sources-toggle .arrow { transition: transform 0.15s; }
  .defav-sources-ul {
    margin: 0;
    padding-left: 20px;
  }
  .defav-sources-ul li {
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 6px;
  }
  #defav-sources-body a {
    color: #2c6fb0;
    text-decoration: none;
    word-break: break-word;
  }
  #defav-sources-body a:hover { text-decoration: underline; }
  body.dark #defav-sources-body a { color: #64b5f6; }

  /* ============================================================
     BLOC « INDICE DE DÉFAVORISATION » DANS LA MODALE D'UN NŒUD ÉCOLE
     ============================================================ */
  .defav-block {
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.03);
    border-left: 4px solid #ccc;
  }
  body.dark .defav-block { background: rgba(255, 255, 255, 0.04); }
  .defav-block-0 { border-left-color: #2e9e5b; }
  .defav-block-1 { border-left-color: #d4a017; }
  .defav-block-2 { border-left-color: #e8731c; }
  .defav-block-3 { border-left-color: #d32f2f; }
  .defav-title {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    color: var(--text-default, #222);
  }
  body.dark .defav-title { color: #e8e8e8; }
  .defav-title-emoji { font-size: 16px; }
  .defav-level-line {
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-default, #555);
  }
  body.dark .defav-level-line { color: #cfcfcf; }
  .defav-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin-bottom: 8px;
  }
  .defav-grid > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
  }
  .defav-k { color: var(--text-muted, #888); }
  .defav-v {
    font-weight: 600;
    color: var(--text-default, #333);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  body.dark .defav-v { color: #e0e0e0; }
  .defav-scale-note {
    font-size: 11px;
    font-style: italic;
    color: var(--text-muted, #999);
    line-height: 1.5;
    margin-bottom: 8px;
  }
  .defav-consequence {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-default, #444);
    background: rgba(255, 255, 255, 0.55);
    padding: 8px 10px;
    border-radius: 5px;
  }
  body.dark .defav-consequence {
    color: #d0d0d0;
    background: rgba(0, 0, 0, 0.25);
  }

  @media (max-width: 560px) {
    .defav-legend-grid { grid-auto-flow: row; grid-template-rows: none; }
    .incidents-tab { font-size: 11.5px; padding: 8px 4px; }
  }

  /* ---- Indice de défavorisation : couleurs de niveau (4 paliers) ---- */
  .defav-count-total { color: var(--text-muted, #999); font-weight: 400; }
  .defav-row-exc .defav-cell-decile { color: var(--text-muted, #888); }
  .defav-block-exc { border-left-color: #5b6b7a; }

  /* ---- Groupes de filtres (niveau + ordre, combinables) ---- */
  .defav-filter-group {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
  }
  .defav-filter-glabel {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted, #888);
    min-width: 56px;
  }

  /* ---- Démissions : bloc « Postes à pourvoir » (PDF tableau de bord) ---- */
  .resign-vac-box {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--border-default, #ddd);
    border-left: 4px solid #e8731c;
    border-radius: 8px;
    background: var(--bg-subtle, rgba(0,0,0,0.02));
  }
  .resign-vac-title { font-size: 14px; }
  .resign-vac-asof {
    font-size: 11.5px;
    color: var(--text-muted, #888);
    margin: 2px 0 12px;
  }
  .resign-vac-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    margin-bottom: 12px;
  }
  .resign-vac-table th,
  .resign-vac-table td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--border-default, #e3e3e3);
  }
  .resign-vac-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted, #888);
  }
  .resign-vac-num { text-align: right; font-variant-numeric: tabular-nums; }
  .resign-vac-total td {
    font-weight: 700;
    border-top: 2px solid var(--border-default, #ccc);
    border-bottom: none;
  }
  .resign-vac-sub {
    font-size: 12px;
    font-weight: 600;
    margin: 4px 0 6px;
  }
  .resign-vac-pro-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
  }
  .resign-vac-pro-list li {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dotted var(--border-default, #e3e3e3);
    font-size: 12.5px;
  }
  .resign-vac-pro-val {
    color: var(--text-muted, #777);
    font-variant-numeric: tabular-nums;
  }
  .resign-vac-note {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted, #888);
    margin: 0;
  }

  /* Indice de défavorisation : précision sur le découpage en paliers */
  .defav-classification {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted, #888);
    border-left: 3px solid var(--border-default, #ccc);
    padding-left: 10px;
    margin-top: 10px;
  }

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