:root {
    --encre: #17212b;
    --discret: #68737d;
    --trait: #dbe2e6;
    --trait-leger: #edf0f1;
    --fond: #f5f7f5;
    --carte: #ffffff;
    --accent: #087f8c;
    --accent-fonce: #066a75;
    --accent-doux: #dff2f0;
    --alerte: #b86b00;
    --alerte-doux: #fdf0dc;
    --danger: #b42318;
    --danger-doux: #fde8e8;
    --info: #1e429f;
    --info-doux: #e1effe;
    --vert: #1b7a3a;
    --vert-doux: #e2f5e7;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--encre);
    background: var(--fond);
    font-family: "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
}

a {
    color: var(--accent);
}

/* En-tête commun */

.entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    background: var(--encre);
    color: #fff;
}

.entete-gauche {
    display: flex;
    align-items: center;
    gap: 28px;
}

.entete .logo {
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
}

.navigation {
    display: flex;
    gap: 18px;
}

.navigation a {
    color: #c7d0d6;
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}

.navigation a.actif,
.navigation a:hover {
    color: #fff;
    border-bottom-color: var(--accent);
}

/* Menu du profil (en-tête) */

.menu-profil {
    position: relative;
}

.menu-profil summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 4px 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
}

.menu-profil summary::-webkit-details-marker {
    display: none;
}

.menu-profil summary:hover,
.menu-profil[open] summary,
.menu-profil.actif summary {
    border-color: #3a4753;
    background: #222e39;
}

.menu-profil summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
}

.menu-profil .identite {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.menu-profil .identite span {
    color: #c7d0d6;
    font-size: .8rem;
}

.menu-profil .chevron {
    color: #c7d0d6;
    font-size: .8rem;
    transition: transform .15s;
}

.menu-profil[open] .chevron {
    transform: rotate(180deg);
}

.menu-profil-panneau {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 10;
    min-width: 230px;
    padding: 6px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    background: var(--carte);
    box-shadow: 0 10px 30px rgba(23, 33, 43, .18);
}

.menu-profil-panneau a {
    display: block;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--encre);
    text-decoration: none;
}

.menu-profil-panneau a:hover,
.menu-profil-panneau a:focus-visible {
    background: var(--fond);
    outline: none;
}

.menu-profil-panneau a.actif {
    color: var(--accent);
    font-weight: 600;
}

.menu-profil-panneau a.deconnexion {
    color: var(--danger);
}

.menu-profil-panneau hr {
    margin: 6px 0;
    border: none;
    border-top: 1px solid var(--trait-leger);
}

/* Mise en page */

.contenu {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

.titre-page {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 28px;
}

.surtitre {
    color: var(--accent);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

h1 {
    margin: 8px 0 0;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
    line-height: 1.05;
    letter-spacing: -.03em;
}

h2 {
    margin: 0;
    font-size: 1.25rem;
}

.intro {
    max-width: 450px;
    margin: 0;
    color: var(--discret);
    line-height: 1.55;
}

.fil-ariane {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    color: var(--discret);
    font-size: .9rem;
}

.fil-ariane a {
    text-decoration: none;
}

.fil-ariane span + span::before,
.fil-ariane a + span::before,
.fil-ariane a + a::before {
    content: "/";
    margin-right: 8px;
    color: var(--trait);
}

/* Indicateurs */

.indicateurs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.indicateur {
    padding: 18px 20px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    background: var(--carte);
}

.indicateur strong {
    display: block;
    font-size: 1.8rem;
    line-height: 1;
}

.indicateur span {
    display: block;
    margin-top: 8px;
    color: var(--discret);
    font-size: .86rem;
}

/* Cartes et tableaux */

.carte {
    margin-bottom: 18px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    background: var(--carte);
    overflow-x: auto;
}

.carte-entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--trait);
}

.carte-corps {
    padding: 20px 24px;
}

.secondaire {
    color: var(--discret);
    font-size: .85rem;
}

.tableau {
    width: 100%;
    border-collapse: collapse;
}

.tableau th,
.tableau td {
    padding: 13px 24px;
    text-align: left;
    border-bottom: 1px solid var(--trait-leger);
}

.tableau th {
    color: var(--discret);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tableau tr:last-child td {
    border-bottom: 0;
}

.reference {
    font-weight: 700;
    white-space: nowrap;
}

.vide {
    margin: 0;
    padding: 20px 24px;
    color: var(--discret);
}

.details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 32px;
    margin: 0;
}

.details dt {
    color: var(--discret);
}

.details dd {
    margin: 0;
    font-weight: 600;
}

/* Badges d'état */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.badge-ok { color: var(--accent); background: var(--accent-doux); }
.badge-vert { color: var(--vert); background: var(--vert-doux); }
.badge-alerte { color: var(--alerte); background: var(--alerte-doux); }
.badge-danger { color: var(--danger); background: var(--danger-doux); }
.badge-info { color: var(--info); background: var(--info-doux); }
.badge-neutre { color: var(--discret); background: var(--trait-leger); }

/* Messages */

.message {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 6px;
}

.message.succes {
    background: var(--accent-doux);
    color: var(--accent-fonce);
}

.message.erreur {
    background: var(--danger-doux);
    color: var(--danger);
}

.message.info {
    background: var(--info-doux);
    color: var(--info);
}

/* Connexion */

.page-connexion {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.carte-connexion {
    width: 100%;
    max-width: 360px;
    margin: 0 16px;
    padding: 32px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    background: var(--carte);
}

.carte-connexion h1 {
    margin: 8px 0 20px;
    font-size: 1.8rem;
}

.carte-connexion form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.carte-connexion .bouton {
    margin-top: 12px;
}

@media (max-width: 760px) {
    .contenu { padding: 24px 16px 40px; }
    .entete, .entete-gauche, .titre-page, .carte-entete { align-items: flex-start; flex-direction: column; }
    .menu-profil-panneau { left: 0; right: auto; }
    .indicateurs { grid-template-columns: repeat(2, 1fr); }
    .tableau { min-width: 640px; }
}

/* Formulaires */

.formulaire {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 640px;
}

.formulaire label,
.carte-connexion label {
    font-weight: 600;
}

.formulaire textarea,
.formulaire select,
.carte-connexion input {
    padding: 10px;
    border: 1px solid var(--trait);
    border-radius: 6px;
    background: var(--carte);
    color: var(--encre);
    font: inherit;
}

.formulaire textarea {
    resize: vertical;
}

.formulaire textarea:focus-visible,
.formulaire select:focus-visible,
.carte-connexion input:focus-visible {
    border-color: var(--accent);
    outline: 2px solid var(--accent-doux);
}

.formulaire .champ-invalide {
    border-color: var(--danger);
    background: var(--danger-doux);
}

.erreur-champ {
    margin: 0;
    color: var(--danger);
    font-size: .9rem;
}

.actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
}

/* Boutons : même rendu qu'ils soient un lien ou un <button> */

.bouton {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 9px 16px;
    border: 1px solid var(--accent);
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.bouton:hover {
    border-color: var(--accent-fonce);
    background: var(--accent-fonce);
}

.bouton:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.bouton.secondaire {
    border-color: var(--trait);
    background: var(--carte);
    color: var(--encre);
}

.bouton.secondaire:hover {
    border-color: var(--trait);
    background: var(--trait-leger);
}

.page-erreur {
    text-align: center;
    padding-top: 48px;
}

.page-erreur h1 {
    font-size: 1.8rem;
}

.actions-erreur {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.titre-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.description-incident {
    white-space: pre-line;
    margin: 0;
}

.note-etoiles {
    margin: 0 0 8px;
    font-size: 1.5rem;
    color: var(--alerte);
    letter-spacing: 2px;
}

.date-evaluation {
    margin: 8px 0 0;
    color: var(--discret);
    font-size: .9rem;
}

/* F6 : édition en place de la description sur la page détail d'un incident */

[hidden] {
    display: none !important;
}

.formulaire.edition-incident {
    max-width: none;
}

.formulaire.edition-incident .actions {
    margin-top: 4px;
}

.compteur-caracteres {
    margin: 0;
    color: var(--discret);
    font-size: .85rem;
    text-align: right;
}

/* .vide porte déjà son propre espacement quand il est posé directement dans une carte */
.carte-corps .vide {
    padding: 0;
}

/* F10 : choix de la note par étoiles (boutons radio), affichage de la note dans l'historique */

.choix-note {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
}

.choix-note legend {
    width: 100%;
    margin-bottom: 4px;
    padding: 0;
}

.etoiles {
    display: inline-flex;
    flex-direction: row-reverse;
    border-radius: 6px;
}

.etoiles label {
    padding: 0 3px;
    font-size: 2rem;
    line-height: 1;
    color: #d1d5db;
    cursor: pointer;
    transition: color 0.1s;
}

.etoiles input:checked ~ label,
.etoiles label:hover,
.etoiles label:hover ~ label {
    color: #f59e0b;
}

.etoiles input:focus-visible + label {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
}

.etoiles.champ-invalide {
    outline: 1px solid #e02424;
    background: #fdf6f6;
}

.note-libelle {
    color: #6b7280;
    font-size: 0.95rem;
}

.note-etoiles-tableau {
    color: #f59e0b;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* F11 : tableau de bord.
   Couleurs des marques (graphiques, pastilles, jauges) validées pour le daltonisme et en vision normale ;
   les textes restent dans les couleurs d'encre, la couleur est toujours accompagnée d'un libellé. */

:root {
    --marque-rouge: #c8312f;
    --marque-orange: #f0a020;
    --marque-vert: #2a9d58;
    --marque-bleu: #4a7fe0;
    --marque-courbe: var(--accent);
    --grille: #edf0f1;
}

.niveau-ROUGE { --niveau: var(--marque-rouge); --niveau-doux: var(--danger-doux); }
.niveau-ORANGE { --niveau: var(--marque-orange); --niveau-doux: var(--alerte-doux); }
.niveau-VERT { --niveau: var(--marque-vert); --niveau-doux: var(--vert-doux); }
.niveau-AFFECTE { --niveau: var(--marque-bleu); --niveau-doux: var(--info-doux); }

.tdb .titre-page { align-items: flex-end; }

.tdb-maj {
    margin: 0;
    color: var(--discret);
    font-size: .85rem;
}

.tdb-pastille {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--niveau, var(--discret));
}

.tdb-carre {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--niveau);
}

/* 1. Filtres */

/* Pas de défilement horizontal ici (contrairement aux autres cartes) : le panneau d'aide doit pouvoir déborder. */
.tdb-filtres {
    margin-bottom: 20px;
    padding: 12px 16px;
    overflow: visible;
}

.tdb-filtres-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.tdb-recherche {
    display: flex;
    flex: 1 1 160px;
    min-width: 0;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid #cbd2d9;
    border-radius: 6px;
    background: #fff;
    color: var(--discret);
}

.tdb-recherche:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }

.tdb-recherche input {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 9px 0;
    border: none;
    outline: none;
    font: inherit;
}

.tdb-puces {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: none;
}

.tdb-puce {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--trait);
    border-radius: 999px;
    background: #fff;
    font-size: .9rem;
    cursor: pointer;
    user-select: none;
}

.tdb-puce input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tdb-puce:hover { border-color: var(--niveau); }
.tdb-puce:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

.tdb-puce:has(input:checked) {
    border-color: var(--niveau);
    background: var(--niveau-doux);
    font-weight: 600;
}

.tdb-puce-compte {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--trait-leger);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.tdb-aide { position: relative; }

.tdb-aide summary {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--trait);
    border-radius: 50%;
    color: var(--discret);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.tdb-aide summary::-webkit-details-marker { display: none; }

.tdb-aide-panneau {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 5;
    width: 300px;
    padding: 14px 16px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(23, 33, 43, .15);
    font-size: .88rem;
    transform: translateX(-50%);
}

.tdb-aide-panneau p { margin: 8px 0 0; }
.tdb-aide-panneau ul { margin: 8px 0 0; padding: 0; list-style: none; }
.tdb-aide-panneau li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.tdb-aide-panneau .tdb-pastille { vertical-align: middle; margin-right: 4px; }

.tdb-select select {
    max-width: 175px;
    padding: 9px 10px;
    border: 1px solid #cbd2d9;
    border-radius: 6px;
    background: #fff;
    font: inherit;
}

.tdb-filtres-actifs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--trait-leger);
    font-size: .88rem;
}

.tdb-etiquette {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 10px;
    border-radius: 999px;
    background: var(--accent-doux);
    color: var(--accent-fonce);
    text-decoration: none;
}

.tdb-etiquette span:last-child {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: .7rem;
}

.tdb-etiquette:hover span:last-child { background: rgba(8, 127, 140, .15); }

.tdb-effacer { color: var(--discret); }
.tdb-portee { margin-left: auto; }

/* 2. Indicateurs */

.tdb-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.tdb-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    background: var(--carte);
}

.tdb-kpi-libelle { color: var(--discret); font-size: .86rem; }

.tdb-kpi-valeur {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1;
}

.tdb-kpi-valeur small {
    color: var(--discret);
    font-size: 1.1rem;
    font-weight: 600;
}

.tdb-kpi-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--discret);
    font-size: .85rem;
}

.tdb-delta { color: var(--discret); font-size: .85rem; font-weight: 600; }
.tdb-delta.bon { color: #1b7a3a; }
.tdb-delta.mauvais { color: var(--danger); }

.tdb-jauge {
    display: flex;
    gap: 2px;
    height: 8px;
    border-radius: 999px;
    background: var(--trait-leger);
    overflow: hidden;
}

.tdb-jauge-panne { background: var(--marque-rouge); }
.tdb-jauge-maintenance { background: var(--marque-bleu); }

/* 3. Graphiques */

.tdb-graphes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.tdb-graphe {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 18px 20px;
}

.tdb-graphe header h2 { margin: 0; font-size: 1rem; }
.tdb-graphe header p { margin: 2px 0 0; font-size: .82rem; }

.tdb-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
    padding: 0;
    color: var(--discret);
    font-size: .8rem;
    list-style: none;
}

.tdb-legende li { display: inline-flex; align-items: center; gap: 6px; }

/* Histogramme : colonnes de 24 px max, bout arrondi, 2 px de séparation entre segments empilés. */
.tdb-colonnes {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
}

.tdb-colonne {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.tdb-colonne-zone {
    display: flex;
    height: 170px;
    border-bottom: 1px solid #c9d1d6;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding-top: 20px;
}

.tdb-colonne-valeur {
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tdb-colonne .tdb-segment {
    display: block;
    width: 24px;
    min-height: 3px;
    background: var(--niveau);
}

.tdb-colonne .tdb-segment:nth-child(2) { border-radius: 4px 4px 0 0; }

.tdb-colonne-libelle {
    margin-top: 6px;
    color: var(--discret);
    font-size: .76rem;
    white-space: nowrap;
}

.tdb-segment:hover,
.tdb-segment:focus-visible {
    filter: brightness(1.12);
    outline: none;
}

/* Barres par station */
.tdb-barres {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tdb-barre-ligne {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    gap: 10px;
    padding: 6px 6px;
    border-radius: 6px;
    color: var(--encre);
    font-size: .85rem;
    text-decoration: none;
}

.tdb-barre-ligne:hover, .tdb-barre-ligne.actif { background: var(--fond); }
.tdb-barre-ligne.actif .tdb-barre-nom { font-weight: 700; }

.tdb-barre-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tdb-barre-piste { display: flex; align-items: center; gap: 8px; }

.tdb-barre {
    display: flex;
    gap: 2px;
    height: 14px;
}

.tdb-barre .tdb-segment { height: 100%; background: var(--niveau); }
.tdb-barre .tdb-segment:last-child { border-radius: 0 4px 4px 0; }

.tdb-barre-valeur { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Courbe : SVG étiré sur la zone, traits à épaisseur fixe ; étiquettes et repères en HTML positionné. */
.tdb-courbe { outline: none; }
.tdb-courbe:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

.tdb-courbe-zone {
    position: relative;
    height: 170px;
    margin: 8px 28px 0 22px;
    cursor: crosshair;
}

.tdb-courbe-zone svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tdb-courbe-aire { fill: var(--marque-courbe); opacity: .1; }

.tdb-courbe-ligne {
    fill: none;
    stroke: var(--marque-courbe);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.tdb-graduation {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--grille);
}

.tdb-graduation span {
    position: absolute;
    left: -22px;
    top: -8px;
    color: var(--discret);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
}

.tdb-courbe-fin,
.tdb-reticule-point {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid var(--carte);
    border-radius: 50%;
    background: var(--marque-courbe);
    box-sizing: content-box;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.tdb-courbe-fin-valeur {
    position: absolute;
    right: -26px;
    font-size: .85rem;
    font-weight: 700;
    transform: translateY(-50%);
}

.tdb-reticule {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #9aa5ad;
    pointer-events: none;
}

.tdb-courbe-axe {
    display: flex;
    justify-content: space-between;
    margin: 6px 28px 0 22px;
    color: var(--discret);
    font-size: .76rem;
}

.tdb-infobulle {
    position: absolute;
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--encre);
    color: #fff;
    font-size: .8rem;
    pointer-events: none;
    white-space: nowrap;
}

.tdb-infobulle strong { font-size: 1rem; }
.tdb-infobulle span { color: #c7d0d6; }
.tdb-infobulle[hidden] { display: none; }

.tdb-donnees summary {
    color: var(--discret);
    font-size: .8rem;
    cursor: pointer;
}

.tdb-donnees .tableau { margin-top: 8px; font-size: .82rem; }
.tdb-donnees .tableau th, .tdb-donnees .tableau td { padding: 6px 8px; }

/* 4. Liste groupée par urgence */

.tdb-liste .carte-entete h2 .secondaire { font-weight: 400; }

.tdb-tri { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; }
.tdb-tri select { padding: 6px 8px; border: 1px solid #cbd2d9; border-radius: 6px; background: #fff; font: inherit; }

.tdb-groupe { border-bottom: 1px solid var(--trait); }
.tdb-groupe:last-of-type { border-bottom: none; }

.tdb-groupe summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: var(--fond);
    cursor: pointer;
    list-style: none;
}

.tdb-groupe summary::-webkit-details-marker { display: none; }

.tdb-groupe summary::after {
    margin-left: 8px;
    color: var(--discret);
    content: "▾";
    transition: transform .15s;
}

.tdb-groupe:not([open]) summary::after { transform: rotate(-90deg); }

.tdb-groupe-compte {
    margin-left: auto;
    padding: 1px 9px;
    border-radius: 999px;
    background: var(--carte);
    border: 1px solid var(--trait);
    font-size: .82rem;
    font-weight: 700;
}

.tdb-incidents { margin: 0; padding: 0; list-style: none; }

.tdb-incident {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 110px 220px 110px;
    align-items: center;
    gap: 20px;
    padding: 14px 24px;
    border-top: 1px solid var(--trait-leger);
    box-shadow: inset 4px 0 0 var(--niveau);
}

.tdb-incident-principal { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tdb-incident-titre { font-weight: 600; color: var(--encre); text-decoration: none; }
.tdb-incident-titre:hover { color: var(--accent); text-decoration: underline; }
.tdb-incident-meta { color: var(--discret); font-size: .84rem; }

.tdb-incident-age { display: flex; flex-direction: column; font-size: .84rem; }
.tdb-incident-age strong { font-size: 1rem; font-variant-numeric: tabular-nums; }

.tdb-incident-echeance { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; }

.tdb-progression {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--niveau-doux);
    overflow: hidden;
}

.tdb-progression span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--niveau);
}

.niveau-ROUGE .tdb-echeance-texte { color: var(--danger); font-weight: 600; }

.tdb-incident-action { text-align: right; }
.tdb-incident-action .bouton { padding: 7px 14px; font-size: .9rem; }

@media (max-width: 1000px) {
    .tdb-graphes { grid-template-columns: 1fr 1fr; }
    .tdb-graphes > :last-child { grid-column: 1 / -1; }
    .tdb-kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
    .tdb .titre-page { align-items: flex-start; }
    .tdb-select, .tdb-select select { flex: 1 1 140px; max-width: none; width: 100%; }
    .tdb-graphes { grid-template-columns: 1fr; }
    .tdb-portee { margin-left: 0; }
    .tdb-incident { grid-template-columns: 1fr auto; gap: 8px 16px; padding: 14px 16px; }
    .tdb-incident-principal { grid-column: 1 / -1; }
    .tdb-incident-echeance { grid-column: 1 / -1; grid-row: 3; }
    .tdb-incident-action { grid-row: 2; grid-column: 2; }
    .tdb-aide-panneau { left: auto; right: 0; transform: none; }
}

/* Lot alpha : carte du réseau.
   Le préfixe carto- évite toute confusion avec .carte, la carte d'interface utilisée sur tout le site. */

.carto {
    overflow: hidden;
}

.carto-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
    padding: 14px 24px;
    border-bottom: 1px solid var(--trait);
    font-size: .88rem;
    list-style: none;
}

.carto-legende li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.carto-legende-titre {
    font-weight: 600;
}

.carto-pastille {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--situation);
}

.situation-EN_PANNE { --situation: var(--danger); }
.situation-EN_MAINTENANCE { --situation: var(--alerte); }
.situation-FONCTIONNEL { --situation: var(--accent); }
.situation-AUCUNE { --situation: var(--discret); }

.carto-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    height: min(640px, 75vh);
}

/* isolation : les couches de Leaflet (z-index élevés) restent sous le menu du profil. */
.carto-plan {
    position: relative;
    isolation: isolate;
    min-height: 0;
    background: var(--trait-leger);
    font: inherit;
}

.carto-panneau {
    min-height: 0;
    padding: 20px 24px;
    border-left: 1px solid var(--trait);
    overflow-y: auto;
}

.carto-panneau ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#carto-liste h2 {
    margin-bottom: 8px;
}

.carto-panneau .vide {
    padding: 8px 0;
}

.carto-station {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 -10px;
    padding: 12px 10px;
    border-bottom: 1px solid var(--trait-leger);
    border-radius: 6px;
    color: var(--encre);
    text-decoration: none;
}

.carto-station small {
    display: block;
}

.carto-station:hover,
.carto-equipement:hover {
    background: var(--trait-leger);
}

.carto-retour {
    display: inline-block;
    margin-bottom: 14px;
    font-size: .88rem;
    text-decoration: none;
}

.carto-fiche h2:focus {
    outline: none;
}

.carto-fiche > p.secondaire {
    margin: 8px 0 0;
}

.carto-equipements {
    margin-top: 16px !important;
    border-top: 1px solid var(--trait-leger);
}

.carto-equipements > li {
    padding: 8px 0;
    border-bottom: 1px solid var(--trait-leger);
}

.carto-equipement {
    display: grid;
    gap: 4px;
    margin: 0 -10px;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--encre);
    text-decoration: none;
}

.carto-equipement-ligne {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 6px 10px;
}

.carto-incidents {
    display: grid;
    gap: 8px;
    margin: 4px 0 8px 10px !important;
    padding-left: 12px !important;
    border-left: 2px solid var(--trait);
    font-size: .88rem;
}

.carto-incidents li {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 10px;
}

.carto-incidents a {
    overflow-wrap: anywhere;
}

/* Fond de carte atténué : seuls les marqueurs restent en couleur. */
.carto-plan .leaflet-tile-pane {
    filter: saturate(.3) brightness(1.04);
}

/* Marqueurs : Leaflet pose les couleurs en attributs SVG, le CSS les remplace par celles de la situation. */
.carto-marqueur {
    fill: var(--situation);
    fill-opacity: .9;
    stroke: #fff;
    stroke-width: 2.5;
}

.carto-marqueur.selectionne {
    stroke: var(--encre);
    stroke-width: 3;
}

.carto-etiquette {
    padding: 2px 7px;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(23, 33, 43, .3);
    color: var(--encre);
    font-weight: 600;
}

.carto-etiquette::before {
    display: none;
}

@media (max-width: 760px) {
    .carto-grille {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .carto-plan {
        height: 360px;
    }

    .carto-panneau {
        border-top: 1px solid var(--trait);
        border-left: 0;
    }
}

/* Gestion des comptes */

.indicateurs-3 { grid-template-columns: repeat(3, 1fr); }

.formulaire-compte {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    max-width: 760px;
}

.formulaire-compte .champ {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.formulaire-compte .champ .secondaire { margin: 0; }
.formulaire-compte .actions { grid-column: 1 / -1; margin-top: 0; }

.formulaire-compte input,
.ligne-edition input,
.ligne-edition select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--trait);
    border-radius: 6px;
    background: var(--carte);
    color: var(--encre);
    font: inherit;
}

.formulaire-compte input:focus-visible,
.ligne-edition input:focus-visible,
.ligne-edition select:focus-visible {
    border-color: var(--accent);
    outline: 2px solid var(--accent-doux);
}

.formulaire-compte .champ-invalide,
.ligne-edition .champ-invalide {
    border-color: var(--danger);
    background: var(--danger-doux);
}

.tableau-comptes th,
.tableau-comptes td { padding: 12px 12px; vertical-align: middle; }
.tableau-comptes th:first-child,
.tableau-comptes td:first-child { padding-left: 24px; }
.tableau-comptes th:last-child,
.tableau-comptes td:last-child { padding-right: 24px; }
.tableau-comptes .nombre { text-align: right; }
.tableau-comptes .nombre { font-variant-numeric: tabular-nums; }

.compte-identite {
    display: flex;
    align-items: center;
    gap: 12px;
}

.compte-identite .avatar { flex: none; }

.compte-vous {
    margin-left: 6px;
    white-space: nowrap;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--trait-leger);
    color: var(--discret);
    font-size: .75rem;
    font-weight: 600;
}

.droit {
    display: inline-block;
    margin: 2px 4px 2px 0;
    padding: 2px 8px;
    border: 1px solid var(--trait);
    border-radius: 6px;
    font-size: .8rem;
    white-space: nowrap;
}

.actions-ligne {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 0;
}

.bouton-petit { padding: 6px 12px; font-size: .85rem; }

.bouton.bouton-danger { border-color: var(--danger-doux); color: var(--danger); }
.bouton.bouton-danger:hover { border-color: var(--danger); background: var(--danger-doux); }

.ligne-edition { background: var(--fond); }
.ligne-edition td { vertical-align: top; }
.ligne-edition input + label,
.ligne-edition .erreur-champ + label { margin-top: 8px; }
.ligne-edition input + .sr-only + input,
.ligne-edition .erreur-champ + .sr-only + input { margin-top: 8px; }
.ligne-edition label:not(.sr-only) {
    display: block;
    margin-bottom: 6px;
    font-size: .85rem;
    font-weight: 600;
}

.tableau-droits td:not(:first-child),
.tableau-droits th:not(:first-child) { width: 18%; text-align: center; }
.droit-oui { color: var(--accent); font-weight: 800; }
.droit-non { color: var(--trait); }
.note-droits { margin: 0; padding: 14px 24px 18px; }

@media (max-width: 760px) {
    .indicateurs-3 { grid-template-columns: 1fr; }
    .formulaire-compte { grid-template-columns: 1fr; }
}