/*
  Feuille de style d'eq-web, aux couleurs de l'application d'origine.

  Toutes les couleurs sont des « variables » (--nom) définies une seule fois ci-dessous.
  Le mode sombre se contente de les redéfinir :
    - data-theme="dark" sur <html>  : sombre choisi par l'utilisateur ;
    - data-theme="light"            : clair choisi par l'utilisateur ;
    - sans data-theme (« Auto »)    : on suit le réglage de l'ordinateur (prefers-color-scheme).
*/
:root {
  color-scheme: light;
  --marine: #1F3A5F;
  --bandeau: #1F3A5F;
  --bleu: #2E75B6;
  --lien: #2E75B6;
  --rouge: #C0392B;
  --vert: #2E7D32;
  --texte: #1d2733;
  --gris: #6b7280;
  --bord: #d8dde4;
  --ligne: #edf0f4;
  --fond: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f0f3f7;
  --fond-dossier: #eaf0f7;
  --desactive: #eef0f3;
  --titre: #1F3A5F;
  --ok-fond: #e7f3e8;  --ok-bord: #b7dcb9;
  --err-fond: #fbeaea; --err-bord: #eab4b0;
  --st-fond: #eceff3;  --st-texte: #3d4757;
  --st-planifie-fond: #e3eefb;  --st-planifie: #1f5f9f;
  --st-execution-fond: #e5f4e6; --st-execution: #2E7D32;
  --st-pause-fond: #fdf1dc;     --st-pause: #9a6400;
  --st-termine-fond: #e9e9ef;   --st-termine: #4b4b63;
  --st-annule-fond: #fbe9e7;    --st-annule: #C0392B;
}

/* Palette sombre (utilisée par les deux blocs qui suivent) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bandeau: #14253b;
  --bleu: #3d8bd4;
  --lien: #7db7ee;
  --rouge: #ef6b5e;
  --vert: #6cc070;
  --texte: #e3e8ef;
  --gris: #9aa5b4;
  --bord: #34404f;
  --ligne: #26303c;
  --fond: #11161d;
  --surface: #1a212b;
  --surface-2: #222b37;
  --fond-dossier: #1f2a39;
  --desactive: #252d38;
  --titre: #a9c8ec;
  --ok-fond: #17301b;  --ok-bord: #2e5c34;
  --err-fond: #3a1c1a; --err-bord: #6b302b;
  --st-fond: #2a3340;  --st-texte: #c8d0db;
  --st-planifie-fond: #1b3352;  --st-planifie: #8cc0f2;
  --st-execution-fond: #1b3a20; --st-execution: #8ad48e;
  --st-pause-fond: #3d2f12;     --st-pause: #f0c46b;
  --st-termine-fond: #2c2c3a;   --st-termine: #b9b9d0;
  --st-annule-fond: #3e1d1a;    --st-annule: #f19489;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bandeau: #14253b;
    --bleu: #3d8bd4;
    --lien: #7db7ee;
    --rouge: #ef6b5e;
    --vert: #6cc070;
    --texte: #e3e8ef;
    --gris: #9aa5b4;
    --bord: #34404f;
    --ligne: #26303c;
    --fond: #11161d;
    --surface: #1a212b;
    --surface-2: #222b37;
    --fond-dossier: #1f2a39;
    --desactive: #252d38;
    --titre: #a9c8ec;
    --ok-fond: #17301b;  --ok-bord: #2e5c34;
    --err-fond: #3a1c1a; --err-bord: #6b302b;
    --st-fond: #2a3340;  --st-texte: #c8d0db;
    --st-planifie-fond: #1b3352;  --st-planifie: #8cc0f2;
    --st-execution-fond: #1b3a20; --st-execution: #8ad48e;
    --st-pause-fond: #3d2f12;     --st-pause: #f0c46b;
    --st-termine-fond: #2c2c3a;   --st-termine: #b9b9d0;
    --st-annule-fond: #3e1d1a;    --st-annule: #f19489;
  }
}

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, "Segoe UI", sans-serif; font-size: 15px; color: var(--texte); background: var(--fond); }
a { color: var(--lien); }

/* Bandeau du haut */
.bandeau { background: var(--bandeau); color: #fff; display: flex; align-items: center; gap: 1.5rem;
           padding: 0 1rem; min-height: 3.2rem; flex-wrap: wrap; }
.bandeau .marque { font-weight: 700; font-size: 1.1rem; color: #fff; text-decoration: none;
                   display: inline-flex; align-items: center; gap: .55rem; }
.bandeau .marque img { display: block; border-radius: 7px; }
.bandeau nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.bandeau nav a { color: #c9d6e6; text-decoration: none; padding: .9rem .8rem; border-bottom: 3px solid transparent; }
.bandeau nav a.actif, .bandeau nav a:hover { color: #fff; border-bottom-color: #7fb2e5; }
.bandeau .compte { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
.bandeau .role { background: rgba(255,255,255,.15); padding: .15rem .5rem; border-radius: 1rem; }
.bandeau button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.bandeau .theme { padding: .3rem .6rem; font-size: .85rem; }

main { padding: 1.2rem 1rem 3rem; max-width: 1500px; margin: 0 auto; }
main.etroit { max-width: 46rem; }
h1 { font-size: 1.45rem; margin: 0 0 1rem; color: var(--titre); }
h2 { font-size: 1.1rem; color: var(--titre); margin: 1.6rem 0 .6rem; }

/* Boutons */
button, .bouton { display: inline-block; cursor: pointer; font: inherit; padding: .45rem .9rem; border-radius: 6px;
                  border: 1px solid var(--bord); background: var(--surface); color: var(--texte); text-decoration: none; }
.bouton.principal, button.principal { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.bouton.danger, button.danger { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.bouton.discret { border-color: transparent; background: transparent; color: var(--lien); }
.bouton.discret.depassement { color: var(--rouge); }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* Messages */
.message { padding: .7rem 1rem; border-radius: 6px; margin-bottom: 1rem; background: var(--ok-fond); border: 1px solid var(--ok-bord); }
.message.error { background: var(--err-fond); border-color: var(--err-bord); }
.aide { color: var(--gris); font-size: .9rem; }
.encadre { background: var(--surface); border: 1px solid var(--bord); border-radius: 8px; padding: 1rem 1.2rem; }

/* Filtres */
.filtres { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: .8rem; }
.filtres label { display: flex; flex-direction: column; font-size: .8rem; color: var(--gris); gap: .2rem; }
.filtres select, .filtres input[type=search], .filtres input[type=date] {
  font: inherit; padding: .4rem; border: 1px solid var(--bord); border-radius: 6px; background: var(--surface); color: var(--texte); }
.filtres input[type=search] { min-width: 16rem; }
.filtres .case { flex-direction: row; align-items: center; gap: .35rem; font-size: .9rem; color: inherit; padding-bottom: .5rem; }
.entete-liste { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.entete-liste h1 { margin: 0; }
.sous-onglets { display: flex; gap: .3rem; border-bottom: 1px solid var(--bord); margin-bottom: 1rem; }
.sous-onglets a { padding: .5rem .9rem; text-decoration: none; color: var(--gris); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.sous-onglets a.actif { color: var(--texte); border-bottom-color: var(--bleu); font-weight: 600; }
.pagination { margin-top: 1rem; justify-content: center; }

/* Tableaux */
.tableau { overflow-x: auto; background: var(--surface); border: 1px solid var(--bord); border-radius: 8px; }
table.donnees { border-collapse: collapse; width: 100%; font-size: .9rem; }
table.donnees th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font-weight: 600; padding: .55rem .5rem;
                   border-bottom: 1px solid var(--bord); white-space: nowrap; }
table.donnees th a { color: inherit; text-decoration: none; }
table.donnees th a.trie { color: var(--lien); }
table.donnees td { padding: .45rem .5rem; border-bottom: 1px solid var(--ligne); vertical-align: top; }
table.donnees .nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.donnees .date { white-space: nowrap; }
tr.dossier td { background: var(--fond-dossier); font-weight: 600; }
tr.dossier td.normal { font-weight: 400; }
tr.tache td:nth-child(3) { padding-left: 1.4rem; }
tr.total td { font-weight: 700; background: var(--surface-2); }
.plier { border: none; background: none; padding: 0 .3rem; font-size: .9rem; color: var(--gris); }
.depassement { color: var(--rouge); font-weight: 700; }
.pastille { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; }
.vide { color: var(--gris); }
.ancien { color: var(--gris); text-decoration: line-through; }

/* Statuts et actions du journal */
.statut { display: inline-block; padding: .1rem .5rem; border-radius: 1rem; font-size: .8rem; font-weight: 500;
          background: var(--st-fond); color: var(--st-texte); white-space: nowrap; }
.statut-planifie, .action-modification { background: var(--st-planifie-fond); color: var(--st-planifie); }
.statut-execution, .action-creation, .action-restauration { background: var(--st-execution-fond); color: var(--st-execution); }
.statut-pause, .action-corbeille { background: var(--st-pause-fond); color: var(--st-pause); }
.statut-termine { background: var(--st-termine-fond); color: var(--st-termine); }
.statut-annule, .action-purge, .action-suppression { background: var(--st-annule-fond); color: var(--st-annule); }

/* Fiches */
.grille-infos { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .8rem 1.5rem; margin: 0; }
.grille-infos dt { font-size: .8rem; color: var(--gris); }
.grille-infos dd { margin: .1rem 0 0; }

/* Formulaires */
form.formulaire .champ { margin-bottom: 1rem; }
form.formulaire label { display: block; font-weight: 600; margin-bottom: .3rem; }
form.formulaire input[type=text], form.formulaire input[type=date], form.formulaire input[type=number],
form.formulaire input[type=password], form.formulaire input[type=email], form.formulaire select, form.formulaire textarea {
  width: 100%; font: inherit; padding: .45rem; border: 1px solid var(--bord); border-radius: 6px;
  background: var(--surface); color: var(--texte); }
form.formulaire input:disabled, form.formulaire select:disabled { background: var(--desactive); color: var(--gris); }
form.formulaire .colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 1rem; }
form.formulaire fieldset { border: 1px solid var(--bord); border-radius: 8px; padding: .8rem 1rem .2rem; margin: 0 0 1rem; background: var(--surface); }
form.formulaire legend { font-weight: 700; color: var(--titre); padding: 0 .3rem; }
.erreur, .errorlist { color: var(--rouge); font-size: .9rem; }
.errorlist { list-style: none; padding: 0; margin: .3rem 0 0; }
.suggestion { font-size: .85rem; margin-top: .3rem; }

/* Listes de recherche (Tom Select) dans le thème courant */
.ts-wrapper .ts-control, .ts-wrapper.single .ts-control, .ts-dropdown {
  background: var(--surface); color: var(--texte); border-color: var(--bord); }
.ts-wrapper .ts-control input { color: var(--texte); }
.ts-wrapper.multi .ts-control > div { background: var(--surface-2); color: var(--texte); border-color: var(--bord); }
.ts-dropdown .option, .ts-dropdown .no-results { color: var(--texte); }
.ts-dropdown .active { background: var(--fond-dossier); color: var(--texte); }
.ts-wrapper .ts-control input::placeholder { color: var(--gris); }

/* Connexion */
.carte-connexion { max-width: 24rem; margin: 3rem auto; }

/* Schéma du réseau (static/js/schema.js) */
.schema { position: relative; }
.schema-barre { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-bottom: .4rem; }
.schema-barre label { display: flex; align-items: center; gap: .3rem; font-size: .9rem; }
.schema-info { min-height: 1.3rem; margin-bottom: .4rem; }
.schema-svg { width: 100%; height: 70vh; min-height: 360px; background: var(--surface); border: 1px solid var(--bord);
              border-radius: 8px; touch-action: none; cursor: grab; user-select: none; display: block; }
.schema-svg.ajout { cursor: crosshair; }
.schema-svg .ligne { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.schema-svg .troncon { stroke: transparent; stroke-width: 12; stroke-linecap: round; cursor: pointer; }
.schema-svg .troncon:hover { stroke: var(--bleu); opacity: .35; }
.schema-svg .troncon.choisi { stroke: var(--bleu); opacity: .75; stroke-width: 9; }
.schema-svg .noeud { fill: var(--surface); stroke: var(--texte); stroke-width: 2; cursor: pointer; }
.schema-svg .noeud.type-arret { stroke-width: 1.5; }
.schema-svg .noeud.type-sous_station { fill: #F0AD4E; stroke: #8a5a00; }
.schema-svg .noeud.type-tunnel { fill: var(--gris); }
.schema-svg .noeud:hover { stroke: var(--bleu); stroke-width: 3; }
.schema-svg .noeud.choisi { fill: var(--bleu); stroke: var(--bleu); }
.schema-svg .noeud.premier { stroke: var(--rouge); stroke-width: 3.5; }
.schema-svg .noeud.deplace { stroke: var(--rouge); stroke-dasharray: 3 2; }
.schema-svg .nom { font-size: 11px; fill: var(--texte); paint-order: stroke; stroke: var(--surface); stroke-width: 3px;
                   stroke-linejoin: round; pointer-events: none; }
.schema-panneau { position: absolute; top: 4.5rem; right: 1rem; display: flex; flex-direction: column; gap: .4rem;
                  width: 17rem; z-index: 5; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.schema-panneau input, .schema-panneau select { font: inherit; padding: .4rem; border: 1px solid var(--bord);
                  border-radius: 6px; background: var(--surface); color: var(--texte); }

/* Fenêtre « Choisir sur le schéma » */
.modale { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; display: flex; align-items: center;
          justify-content: center; padding: 1rem; }
.modale[hidden] { display: none; }
.modale-boite { background: var(--fond); border-radius: 10px; padding: 1rem; width: min(1200px, 100%);
                max-height: 100%; overflow: auto; }
.modale-boite .schema-svg { height: 62vh; }

/* Gantt (dossiers/_gantt_svg.html) */
.gantt { overflow: auto; max-height: 75vh; }
.gantt-svg { display: block; }
.gantt-svg .fond { fill: var(--surface); }
.gantt-svg .entete { fill: var(--surface-2); }
.gantt-svg .grille { stroke: var(--ligne); }
.gantt-svg .texte { fill: var(--texte); }
.gantt-svg .gris { fill: var(--gris); }
.gantt-svg .dossier { fill: var(--titre); }
.gantt-svg .aujourdhui { stroke: var(--rouge); }
.gantt-svg a rect:hover { opacity: .75; }
.services-gantt { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; }
.schema-svg .nom-ss { font-weight: 700; fill: #8a5a00; }
:root[data-theme="dark"] .schema-svg .nom-ss { fill: #f0c46b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .schema-svg .nom-ss { fill: #f0c46b; } }
.logo-connexion img { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto 1rem; }

/* ---- Smartphones et petites tablettes ------------------------------------------------ */
.menu-mobile { display: none; }
.bandeau-menu { display: contents; }  /* sur grand écran : aucun effet, le bandeau reste sur une ligne */

@media (max-width: 760px) {
  body { font-size: 15px; }
  main { padding: 1rem 16px 2.5rem; }
  h1 { font-size: 1.25rem; }

  /* Bandeau : la marque et le bouton ☰, le reste se déplie en dessous */
  .bandeau { padding: .4rem 16px; gap: .5rem; justify-content: space-between; }
  .menu-mobile { display: inline-block; padding: .4rem .8rem; }
  .bandeau-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .6rem;
                  padding: .3rem 0 .8rem; }
  .bandeau.menu-ouvert .bandeau-menu { display: flex; }
  .bandeau nav { flex-direction: column; gap: 0; }
  .bandeau nav a { padding: .7rem .6rem; border-bottom: none; border-left: 3px solid transparent; }
  .bandeau nav a.actif, .bandeau nav a:hover { border-left-color: #7fb2e5; background: rgba(255,255,255,.06); }
  .bandeau .compte { flex-wrap: wrap; }
  .bandeau .theme { align-self: flex-start; }

  /* Saisie : champs pleine largeur, police 16 px (évite le zoom automatique sur iPhone) */
  input, select, textarea, .ts-control, .ts-control input { font-size: 16px !important; }
  .filtres { gap: .5rem; }
  .filtres label { flex: 1 1 100%; }
  .filtres select, .filtres input[type=search], .filtres input[type=date] { width: 100%; }
  .filtres input[type=search] { min-width: 0; }
  .filtres .case { flex-basis: auto; }
  button, .bouton { min-height: 40px; }
  .entete-liste { align-items: flex-start; }
  .entete-liste .actions { width: 100%; }

  /* Tableaux : défilement horizontal dans leur cadre, texte un peu plus petit */
  table.donnees { font-size: .82rem; }
  table.donnees th, table.donnees td { padding: .4rem .35rem; }
  .grille-infos { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }

  /* Schéma et fenêtre de choix : plein écran */
  .schema-svg { height: 62vh; min-height: 300px; }
  .schema-panneau { position: static; width: auto; margin-top: .5rem; }
  .modale { padding: 0; }
  .modale-boite { border-radius: 0; height: 100%; padding: .8rem; }
  .modale-boite .schema-svg { height: 60vh; }
  .carte-connexion { margin: 1.5rem auto; }
}