/* =====================================================================
   ULTRATMS — FEUILLE DE STYLE COMMUNE (train de nuit du 20/09/2026)

   Un seul endroit pour l'habillage des ecrans du bureau. Elle est chargee
   par tb_head.php, juste apres Bootstrap, sur TOUTES les pages.

   Elle ne change AUCUNE donnee ni aucune action : que de l'apparence.

   Trois familles reprises telles quelles (memes noms de classes) :
     .ec-*   ecrans-tableaux (Chauffeurs, Vehicules, Remorques)
             — copie de incl/tb_style_tableaux.php
     .ld-*   Lieux de dechargement — copie du <style> de tb_lieud.php
     .sc-*   Sites clients        — copie du <style> de tb_siteclient.php
   Ces trois pages gardent leur propre <style> : leur rendu ne bouge pas.
   Les largeurs de colonnes .c-* de Lieux et Sites clients restent dans
   leur page (elles portent le meme nom avec des valeurs differentes).

   Une famille nouvelle, .ut-*, pour les lots suivants :
     .ut-page    l'enveloppe d'un ecran
     .ut-titre   le bandeau de titre (couleur par ecran : --ut-couleur)
     .ut-barre   la barre de formulaire (dates, choix, boutons)
     .ut-btn     les boutons
     .ut-nav     le navigateur mois / annee (< annee >)
     .ut-table   un tableau de donnees propre (rapports)
     .ut-grille  la grille des 12 mois (charges annuelles, CNR)
   et une @media pour le telephone.

   Palette (celle des ecrans deja neufs) :
     bleu   #2C5F8D   texte #1F2A36 / #43566A   bordure #D8DEE6 / #B9C4D0
     fond   #F4F7FA   rouge #C0392B (totaux)    gris #6B7A8A
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. ECRANS-TABLEAUX (.ec-*) — copie de incl/tb_style_tableaux.php
   --------------------------------------------------------------------- */
.ec-wrap{width:97%;margin:0 auto 40px;background:#fff;border:1px solid #e3e6ea;border-radius:10px;
	box-shadow:0 1px 4px rgba(20,30,50,.07);padding:8px 18px 18px;overflow-x:auto}
.ec-barre{width:97%;margin:14px auto 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ec-barre .ec-droite{margin-left:auto}
.ec-table{width:100%!important;border-collapse:separate;border-spacing:0;font-size:13px;font-family:'Segoe UI',arial,sans-serif}
.ec-table thead th{background:#f6f8fa;color:#44506a;font-weight:700;text-transform:uppercase;
	font-size:11px;letter-spacing:.4px;padding:11px 12px;border-bottom:2px solid #dde3ea;
	border-top:1px solid #eef1f5;white-space:nowrap}
.ec-table tbody td{padding:9px 12px;border-bottom:1px solid #edf0f4;vertical-align:middle;color:#2d3748}
.ec-table tbody tr:nth-child(even) td{background:#fbfcfe}
.ec-table tbody tr:hover td{background:#f1f6fc}
.ec-table td.ec-nom{font-weight:700;color:#1a202c;white-space:nowrap}
.ec-table td.ec-pre{font-weight:600;color:#2d3748;white-space:nowrap}
.ec-table td.ec-tel{white-space:nowrap;color:#4a5568}
.ec-table td.ec-num{text-align:center;color:#4a5568}
.ec-table td.ec-ctr{font-weight:700;white-space:nowrap}
.ec-table td.ec-ctr-cdi{color:#2b6cb0}
.ec-table td.ec-ctr-int{color:#c05621}
.ec-badge{display:inline-block;min-width:44px;text-align:center;padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700}
.ec-badge-oui{background:#def7ec;color:#03543f}
.ec-badge-non{background:#eef1f4;color:#8a94a6}
.ec-table td.ec-actions{white-space:nowrap;text-align:right}
.ec-table td.ec-actions .btn, .ec-table td.ec-actions a.btn{margin-left:4px}
/* Les reglages DataTables de la feuille d'origine sont globaux dans les
   trois pages qui l'incluent. Ici on les limite aux enveloppes .ec-wrap
   et .ut-page pour ne toucher aucun autre ecran. */
.ec-wrap .dataTables_filter, .ut-page .dataTables_filter{margin:8px 0}
.ec-wrap .dataTables_filter input, .ut-page .dataTables_filter input{border:1px solid #d9dee5;border-radius:6px;padding:5px 10px;margin-left:6px}
.ec-wrap .dataTables_length select, .ut-page .dataTables_length select{border:1px solid #d9dee5;border-radius:6px;padding:3px 6px}


/* ---------------------------------------------------------------------
   2. LIEUX DE DECHARGEMENT (.ld-*) — copie du <style> de tb_lieud.php
   --------------------------------------------------------------------- */
.ld-barre{background:#fff;border:1px solid #D8DEE6;border-radius:6px;padding:10px 12px;margin:0 0 10px}
.ld-ligne1{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ld-champ{flex:1 1 380px;min-width:240px;padding:9px 12px;border:1px solid #B9C4D0;border-radius:5px;font-size:14px;color:#1F2A36}
.ld-champ:focus{outline:2px solid #2C5F8D;border-color:#2C5F8D}
.ld-compte{color:#43566A;font-size:13px;white-space:nowrap}
.ld-compte b{color:#16202B;font-size:15px}
.ld-filtres{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-top:9px}
.ld-puce{border:1px solid #C6D0DA;background:#fff;color:#43566A;padding:5px 11px;border-radius:4px;
	font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.ld-puce span{font-weight:400;color:#8A98A6;margin-left:5px;font-variant-numeric:tabular-nums}
.ld-puce:hover{background:#F4F7FA}
.ld-puce[aria-pressed="true"]{background:#2C5F8D;border-color:#2C5F8D;color:#fff}
.ld-puce[aria-pressed="true"] span{color:#CBDCEB}
.ld-puce.travail{border-style:dashed}
.ld-sep{width:1px;align-self:stretch;background:#DDE3EA;margin:0 3px}
.ld-cadre{background:#fff;border:1px solid #D8DEE6;border-radius:6px;overflow:auto;max-height:calc(100vh - 250px)}
#ld-table{width:100%;border-collapse:collapse;table-layout:fixed;margin:0;font-size:13.5px;color:#243140}
#ld-table th{position:sticky;top:0;z-index:2;background:#fff;color:#6B7A8A;font-size:11px;text-transform:uppercase;
	letter-spacing:.07em;font-weight:600;text-align:left;padding:10px;border-bottom:1px solid #C6D0DA;
	white-space:nowrap;cursor:pointer;user-select:none}
#ld-table th:hover{color:#2C5F8D}
#ld-table th .fl{color:#B9C4D0;font-size:9px;margin-left:3px}
#ld-table td{padding:7px 10px;border-bottom:1px solid #EDF0F4;vertical-align:middle;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ld-table tr:hover td{background:#F7FAFD}
.ld-expl{font-weight:700;color:#2C5F8D}
.ld-expl.vide{font-weight:400;color:#B4BEC6}
.ld-nom{font-weight:700;color:#1B2733}
.ld-gris{color:#5A6B7B}
.ld-oui{color:#2a6e4a;font-weight:700;font-size:12px}
.ld-non{color:#B4BEC6}
.ld-num{text-align:right;color:#8A98A6;font-variant-numeric:tabular-nums}
.ld-act{text-align:right;white-space:nowrap}
.ld-vide td{padding:26px;text-align:center;color:#7B8B9A}


/* ---------------------------------------------------------------------
   3. SITES CLIENTS (.sc-*) — copie du <style> de tb_siteclient.php
   --------------------------------------------------------------------- */
.sc-barre{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#fff;border:1px solid #D8DEE6;border-radius:6px;padding:10px 12px;margin:0 0 10px}
.sc-champ{flex:1 1 320px;min-width:220px;padding:8px 11px;border:1px solid #B9C4D0;border-radius:5px;font-size:14px;color:#1F2A36}
.sc-champ:focus{outline:2px solid #2C5F8D;border-color:#2C5F8D}
.sc-puce{border:1px solid #C6D0DA;background:#fff;color:#43566A;padding:6px 12px;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.sc-puce:hover{background:#F4F7FA}
.sc-puce[aria-pressed="true"]{background:#2C5F8D;border-color:#2C5F8D;color:#fff}
.sc-cadre{background:#fff;border:1px solid #D8DEE6;border-radius:6px;overflow:auto;max-height:calc(100vh - 220px)}
#sc-table{width:100%;border-collapse:collapse;table-layout:fixed;margin:0;font-size:13.5px;color:#243140}
#sc-table th{position:sticky;top:0;z-index:2;background:#fff;color:#6B7A8A;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
	font-weight:600;text-align:left;padding:10px;border-bottom:1px solid #C6D0DA;white-space:nowrap}
#sc-table td{padding:7px 10px;border-bottom:1px solid #EDF0F4;vertical-align:middle;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sc-table tr.sc-site td:first-child{padding-left:30px;font-weight:600;color:#1B2733}
#sc-table tr.sc-site td{color:#5A6B7B;font-weight:400}
#sc-table tr.sc-site:hover td{background:#F7FAFD}
#sc-table tr.sc-groupe td{background:#F4F7FA;border-top:1px solid #D8DEE6;border-bottom:1px solid #E4E9EF;cursor:pointer;padding:9px 10px}
#sc-table tr.sc-groupe:hover td{background:#EAF0F6}
#sc-table tr.sc-groupe td:first-child{font-weight:700;font-size:14px;color:#16202B;letter-spacing:.01em}
.sc-gfleche{display:inline-block;width:14px;color:#8494A4;font-size:9px}
tr.sc-groupe.ouvert .sc-gfleche{transform:rotate(90deg)}
.sc-cpt{color:#6B7A8A;font-size:12.5px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.sc-etat{display:inline-block;padding:2px 8px;border-radius:3px;font-size:11.5px;font-weight:600;white-space:nowrap}
.sc-etat.verrou{background:#F4EDE3;color:#7A4E24}
.sc-etat.libre{background:#E7F1EB;color:#26674A}
.sc-etat.dormant{background:#EEF0F3;color:#6B7A8A}
.sc-num{text-align:right;color:#8A98A6;font-variant-numeric:tabular-nums}
.sc-act{text-align:right;white-space:nowrap}
.sc-vide td{padding:26px;text-align:center;color:#7B8B9A}


/* ---------------------------------------------------------------------
   4. LE SOCLE NEUF (.ut-*)
   --------------------------------------------------------------------- */

/* 4.1 L'enveloppe d'un ecran */
.ut-page{width:97%;margin:0 auto 40px;color:#1F2A36;font-family:'Segoe UI',arial,sans-serif}

/* 4.2 Le bandeau de titre. La couleur de l'ecran se donne en variable :
       <div class="ut-titre" style="--ut-couleur:rgb(120,141,176)"> */
.ut-titre{--ut-couleur:#2C5F8D;display:flex;align-items:center;gap:12px;margin:14px 0 12px;padding:10px 14px;
	background:#fff;border:1px solid #D8DEE6;border-left:6px solid var(--ut-couleur);border-radius:6px}
.ut-titre h2{margin:0;font-size:18px;font-weight:700;color:#1F2A36;letter-spacing:.01em}
.ut-titre .ut-sur{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ut-couleur)}
.ut-titre .ut-droite{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ut-titre .ut-accent{color:#C0392B}

/* 4.3 Le sous-titre d'un rapport (la periode affichee) */
.ut-soustitre{margin:0 0 12px;padding:8px 14px;font-size:15px;color:#C0392B;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ut-soustitre u{text-decoration:none;border-bottom:2px solid #F0C4BE;padding-bottom:1px}

/* 4.4 La barre de formulaire */
.ut-barre{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:flex-end;background:#fff;border:1px solid #D8DEE6;
	border-radius:6px;padding:10px 14px;margin:0 0 12px}
.ut-barre .ut-groupe{display:flex;flex-direction:column;gap:4px}
.ut-barre label{margin:0;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#6B7A8A}
.ut-champ{padding:7px 10px;border:1px solid #B9C4D0;border-radius:5px;font-size:14px;color:#1F2A36;background:#fff;min-height:36px}
.ut-champ:focus{outline:2px solid #2C5F8D;border-color:#2C5F8D}
select.ut-champ{min-width:200px}
.ut-barre .ut-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto}

/* 4.5 Les boutons */
.ut-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 16px;min-height:36px;
	border:1px solid #B9C4D0;border-radius:5px;background:#fff;color:#1F2A36;font-size:14px;font-weight:600;
	cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1.2}
.ut-btn:hover{background:#F4F7FA;text-decoration:none;color:#1F2A36}
.ut-btn:focus{outline:2px solid #2C5F8D;outline-offset:1px}
.ut-btn-principal{background:#2C5F8D;border-color:#2C5F8D;color:#fff}
.ut-btn-principal:hover{background:#244E75;border-color:#244E75;color:#fff}
.ut-btn-second{background:#fff;color:#2C5F8D;border-color:#2C5F8D}
.ut-btn-second:hover{background:#EAF0F6;color:#2C5F8D}
.ut-btn-discret{border-color:transparent;background:transparent;color:#43566A}
.ut-btn-discret:hover{background:#F4F7FA}
.ut-btn[disabled]{opacity:.5;cursor:default}

/* 4.6 Le navigateur mois / annee : [<]  [ 2026 ]  [o]  [>] */
.ut-nav{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #D8DEE6;border-radius:6px;padding:6px 8px}
.ut-nav .ut-nav-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid #C6D0DA;
	border-radius:5px;background:#fff;color:#2C5F8D;cursor:pointer;font-size:13px;padding:0}
.ut-nav .ut-nav-btn:hover{background:#EAF0F6}
.ut-nav .ut-nav-btn:focus{outline:2px solid #2C5F8D;outline-offset:1px}
.ut-nav .ut-nav-valeur{width:110px;height:34px;text-align:center;font-size:15px;font-weight:700;color:#1F2A36;
	border:1px solid #B9C4D0;border-radius:5px;padding:0 6px;font-variant-numeric:tabular-nums}
.ut-nav .ut-nav-valeur:focus{outline:2px solid #2C5F8D;border-color:#2C5F8D}
.ut-nav .ut-nav-valeur[type="month"]{width:170px}
.ut-nav .ut-nav-valeur[type="date"]{width:170px}
.ut-nav-centre{display:flex;justify-content:center;margin:0 0 14px}

/* 4.7 Le tableau de donnees (rapports). Les cellules gardent leurs
       couleurs de ligne de total (style en ligne) : on ne les ecrase pas.
       Les regles sont prefixees par .ut-page pour passer devant celles de
       DataTables, chargees apres cette feuille. */
.ut-cadre{background:#fff;border:1px solid #D8DEE6;border-radius:6px;overflow-x:auto;padding:0}
.ut-page .dataTables_wrapper{padding:6px 12px 8px}
.ut-page table.ut-table{width:100%!important;border-collapse:separate;border-spacing:0;font-size:13px;color:#243140;margin:0}
.ut-page table.ut-table thead th{background:#F6F8FA;color:#44506A;font-weight:700;text-transform:uppercase;
	font-size:11px;letter-spacing:.04em;padding:10px 12px;border-bottom:2px solid #DDE3EA;text-align:left;white-space:nowrap;vertical-align:middle}
.ut-page table.ut-table tfoot th{background:#F6F8FA;color:#6B7A8A;font-weight:600;font-size:11px;text-transform:uppercase;
	padding:8px 12px;border-top:2px solid #DDE3EA;text-align:left}
.ut-page table.ut-table tbody td{padding:8px 12px;border-bottom:1px solid #EDF0F4;vertical-align:middle}
.ut-page table.ut-table tbody tr:hover td{background:#F7FAFD}
.ut-page table.ut-table tbody tr:hover td[style*="background-color"]{filter:brightness(.97)}
.ut-page table.ut-table td.ut-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ut-page table.ut-table input[type="text"]{border:1px solid #B9C4D0;border-radius:4px;padding:3px 6px;font-size:12px}
/* Groupes de colonnes teintes (TIPP : trimestres) */
.ut-page table.ut-table th.ut-col-a, .ut-page table.ut-table td.ut-col-a{background:#F7EAE8}
.ut-page table.ut-table th.ut-col-b, .ut-page table.ut-table td.ut-col-b{background:#F7F7F7}
.ut-page table.ut-table th.ut-col-c, .ut-page table.ut-table td.ut-col-c{background:#ECEEF1}
/* Lignes de total et de sous-total, si une page prefere une classe au style en ligne */
.ut-page table.ut-table tr.ut-total td{font-weight:700;background:#C0392B;color:#fff}
.ut-page table.ut-table tr.ut-soustotal td{font-weight:700;background:#5A5A5A;color:#fff}
/* Bandeau d'information dans une cellule (geoloc indisponible...) */
.ut-info{margin:8px auto;padding:12px;border:1px solid #f0ad4e;background:#fcf8e3;color:#8a6d3b;text-align:left;border-radius:5px}
/* Boutons DataTables (copier, Excel, CSV, colonnes) alignes avec le reste */
.ut-page .dt-buttons{margin:8px 0}
.ut-page .dt-buttons .btn, .ut-page .dt-buttons .dt-button{border:1px solid #B9C4D0;border-radius:5px;background:#fff;color:#1F2A36;
	font-size:13px;padding:5px 12px;margin-right:6px;box-shadow:none;background-image:none}
.ut-page .dt-buttons .btn:hover, .ut-page .dt-buttons .dt-button:hover{background:#F4F7FA;background-image:none}
.ut-page .dataTables_wrapper .dataTables_info{color:#6B7A8A;font-size:12px;padding:8px 0}
.ut-page .dataTables_wrapper .dataTables_paginate{padding:8px 0}

/* 4.8 La grille des 12 mois (charges annuelles, CNR) */
.ut-grille-cadre{background:#fff;border:1px solid #D8DEE6;border-radius:6px;overflow:auto;max-height:calc(100vh - 230px)}
.ut-grille{border-collapse:separate;border-spacing:0;font-size:12px;color:#243140;margin:0;min-width:100%}
.ut-grille thead th{position:sticky;top:0;z-index:3;background:#F6F8FA;color:#44506A;font-weight:700;text-align:center;
	font-size:12px;padding:9px 8px;border-bottom:2px solid #DDE3EA;border-right:1px solid #EDF0F4;white-space:nowrap}
.ut-grille thead th.ut-mois-actuel{color:#2C5F8D;background:#EAF0F6}
.ut-grille tbody td{padding:5px 6px;border-bottom:1px solid #EDF0F4;border-right:1px solid #EDF0F4;vertical-align:middle}
.ut-grille td.ut-outil{width:44px;text-align:center;padding:4px;position:sticky;left:0;z-index:2;background:#fff}
.ut-grille td.ut-ligne-nom{position:sticky;left:44px;z-index:2;background:#fff;font-weight:700;font-size:13px;color:#1B2733;
	white-space:nowrap;padding:6px 12px;border-right:2px solid #DDE3EA}
.ut-grille tr.ut-pair td{background:#F7FAFD}
.ut-grille tr.ut-pair td.ut-outil, .ut-grille tr.ut-pair td.ut-ligne-nom{background:#F7FAFD}
.ut-grille tr:hover td{background:#EEF4FA}
.ut-grille tr:hover td.ut-outil, .ut-grille tr:hover td.ut-ligne-nom{background:#EEF4FA}
/* Le contenu d'une cellule : une ou plusieurs paires « libelle : valeur unite » */
.ut-cellule{display:grid;grid-template-columns:auto auto auto;column-gap:5px;row-gap:3px;align-items:center;white-space:nowrap}
.ut-cellule .ut-lib{color:#5A6B7B;font-size:11px;text-align:right}
.ut-cellule .ut-unite{color:#8A98A6;font-size:11px}
.ut-cellule input[type="text"]{width:5.5em;font-size:12px;text-align:center;border:1px solid #C6D0DA;border-radius:4px;padding:3px 4px;
	font-variant-numeric:tabular-nums;background:#fff}
.ut-cellule input[type="text"]:focus{outline:2px solid #2C5F8D;border-color:#2C5F8D}
.ut-cellule .ut-mention{grid-column:1 / span 3;text-align:center;color:#8A98A6;font-style:italic;font-size:11px}
.ut-cellule .ut-valeur-calcul{min-width:5.5em;text-align:center;border:1px solid #8CB7D8;border-radius:4px;padding:3px 4px;background:#EAF4FB;color:#184E77;font-weight:700}
.ut-cellule .ut-source-calcul{grid-column:1 / span 3;text-align:center;color:#2C5F8D;font-size:10px;white-space:normal}
/* Le bouton « copier janvier sur l'annee » */
.ut-grille .ut-copie{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;
	border:1px solid #C6D0DA;border-radius:5px;background:#fff;color:#2C5F8D;cursor:pointer}
.ut-grille .ut-copie:hover{background:#EAF0F6}
/* Lignes speciales : elles gardent leur sens, la couleur dit lequel */
.ut-grille tr.ut-plancher td{background:#FBEFD9}
.ut-grille tr.ut-plancher td.ut-outil, .ut-grille tr.ut-plancher td.ut-ligne-nom{background:#FBEFD9;color:#7A4E24}
.ut-grille tr.ut-taux td{background:#F9E3E1}
.ut-grille tr.ut-taux td.ut-outil, .ut-grille tr.ut-taux td.ut-ligne-nom{background:#F9E3E1;color:#8A3B36}
.ut-grille tr.ut-indice td{background:#EFE2DE}
.ut-grille tr.ut-indice td.ut-outil, .ut-grille tr.ut-indice td.ut-ligne-nom{background:#EFE2DE;color:#5A3A33}
.ut-grille tr.ut-atelier td{background:#E4EDF7}
.ut-grille tr.ut-atelier td.ut-outil, .ut-grille tr.ut-atelier td.ut-ligne-nom{background:#E4EDF7;color:#2C5F8D}
.ut-grille tr.ut-separateur td{height:14px;padding:0;background:#fff;border:0}
.ut-grille th.ut-total-annuel,.ut-grille td.ut-total-annuel{position:sticky;right:0;z-index:2;background:#F2F6FA;font-variant-numeric:tabular-nums;white-space:nowrap;border-left:2px solid #D7E0E9}
.ut-grille thead th.ut-total-annuel{z-index:4}
.ut-grille tr.ut-total-charge td{background:#E2F0E4;font-weight:700;border-top:2px solid #71B66A}
.ut-grille tr.ut-total-charge td.ut-ligne-nom{background:#E2F0E4;color:#245C2B}
.ut-grille tr.ut-ligne-detail td{padding:8px 12px;background:#FAFBFC;border-right:0}
.ut-grille tr.ut-detail-section td{background:#EEF3F7;border-top:2px solid #D4DEE7}
.ut-grille tr.ut-detail-alerte td{background:#FFF7E8}
.ut-groupe-charge{display:flex;align-items:baseline;gap:12px;color:#243140}
.ut-groupe-charge span{font-size:12px;color:#667789;font-weight:400}
.ut-vide-charge{color:#667789;font-style:italic}
.ut-details-charge summary{cursor:pointer;color:#2C5F8D;font-weight:700;padding:2px 0}
.ut-details-charge-scroll{overflow:auto;max-height:260px;margin-top:8px;border:1px solid #D8E0E7;background:#fff}
.ut-details-charge table{width:100%;border-collapse:collapse;font-size:12px}
.ut-details-charge th,.ut-details-charge td{padding:6px 8px!important;border-bottom:1px solid #E5EAF0!important;text-align:left;white-space:nowrap}
.ut-details-charge th{position:sticky;top:0;background:#F4F7FA;color:#44506A}
/* Texte d'aide au-dessus d'une grille (CNR) */
.ut-aide{background:#fff;border:1px solid #D8DEE6;border-radius:6px;padding:10px 14px;margin:0 0 12px;font-size:13px;color:#43566A;line-height:1.5}
.ut-aide b{color:#1F2A36}
.ut-aide i{color:#2C5F8D}

/* 4.9 Onglets Bootstrap dans un ecran .ut-page */
.ut-page .nav-tabs{margin:0 0 12px;border-bottom:1px solid #D8DEE6}
.ut-page .nav-tabs > li > a{color:#43566A;font-weight:600;border-radius:5px 5px 0 0}
.ut-page .nav-tabs > li.active > a{color:#2C5F8D;border-color:#D8DEE6 #D8DEE6 transparent}


/* 4.10 Maintenance periodique (tb_maintenance) et Evenements chauffeurs
        (tb_maintenance2) — train de nuit, lot 5.
        Rien ne change dans les formulaires : les <input type="image"> restent
        des <input type="image"> (le navigateur envoie nom.x / nom.y comme
        avant). On les habille en bouton : un <span class="ut-btn ut-btn-img">
        porte le texte, l'image (un pixel transparent) est etiree dessus. */
.ut-maint-enveloppe{color:#1F2A36}
.ut-btn-img{position:relative;overflow:hidden}
.ut-btn-img input[type="image"]{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;cursor:pointer;
	margin:0;padding:0;border:0;background:transparent}
.ut-btn-img:focus-within{outline:2px solid #2C5F8D;outline-offset:1px}
.ut-btn-mini{min-height:26px;padding:2px 9px;font-size:12px;font-weight:600;gap:4px}
.ut-btn-danger{color:#C0392B;border-color:#E6B8B3}
.ut-btn-danger:hover{background:#FBEDEB;color:#C0392B}
.ut-btn .glyphicon{font-size:12px;top:1px}
/* Les accordeons : un titre-bouton qui garde l'icone plus/moins (le JS de
   bascule affiche_parametre() lit toujours son id et change son src). */
.ut-accordeon{background:#fff;border:1px solid #D8DEE6;border-radius:6px;margin:0 0 10px}
.ut-accordeon-titre{display:flex;align-items:center;gap:10px;width:100%;padding:9px 14px;border:0;border-radius:6px;
	background:transparent;text-align:left;font-size:15px;font-weight:700;color:#1F2A36;cursor:pointer;line-height:1.3}
.ut-accordeon-titre:hover{background:#F4F7FA}
.ut-accordeon-titre:focus{outline:2px solid #2C5F8D;outline-offset:-2px}
.ut-accordeon-titre img{width:14px;height:14px;flex:0 0 14px}
.ut-accordeon-titre.ut-fixe{cursor:default}
.ut-accordeon-titre.ut-fixe:hover{background:transparent}
.ut-accordeon-corps{padding:6px 14px 14px 38px;border-top:1px solid #EDF0F4}
/* Un formulaire presente en tableau (libelle a gauche, champ a droite) */
.ut-form-table{border-collapse:collapse;max-width:100%}
.ut-form-table td{padding:4px 8px;vertical-align:middle;font-size:13px;color:#1F2A36}
.ut-form-table td.ut-form-titre{padding:14px 0 6px;font-size:14px;font-weight:700;color:#2C5F8D}
.ut-form-table td.ut-form-titre u{text-decoration:none;border-bottom:2px solid #CBDCEB;padding-bottom:1px}
.ut-form-table td.ut-form-lib{color:#43566A;white-space:nowrap;padding-left:0}
.ut-form-table .ut-champ{min-height:32px;padding:5px 9px;font-size:13px}
.ut-form-table textarea.ut-champ{height:32px;resize:none;line-height:20px;overflow:hidden}
.ut-form-table .ut-large{width:60em;max-width:100%}
.ut-form-table .ut-moyen{width:15em;max-width:100%}
.ut-form-table select.ut-champ{min-width:0}
.ut-form-table .ut-btn{margin:4px 0 2px}
.ut-form-table tr.ut-espace{height:14px}
/* Une ligne de recherche (historique) */
.ut-ligne-champs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.ut-ligne-champs label{margin:0;font-size:13px;color:#43566A;font-weight:600}
/* La legende des couleurs */
.ut-legende{border-collapse:separate;border-spacing:0 4px}
.ut-legende td{padding:2px 18px 2px 8px;font-size:13px;color:#1F2A36;white-space:nowrap}
.ut-legende td.ut-pastille{width:3em;min-width:3em;height:1.4em;padding:0;border:1px solid #B9C4D0;border-radius:4px}
/* Le rapport des echeances imminentes / echues (rempli par le navigateur) */
.ut-page table.ut-rapport tbody td, .ut-page table.ut-rapport td{padding:4px 12px;border-bottom:1px solid #EDF0F4;font-size:13px}
.ut-page table.ut-rapport tr.ut-rapport-groupe td{padding-top:12px;font-weight:700;color:#2C5F8D;border-bottom:1px solid #DDE3EA}
.ut-page table.ut-rapport tr.ut-rapport-groupe td u{text-decoration:none}
.ut-page table.ut-rapport td.ut-rapport-retrait{padding-left:32px}
/* La grille : une seule table, en-tete colle en haut, colonne des noms collee a gauche */
.ut-maint-cadre{background:#fff;border:1px solid #D8DEE6;border-radius:6px;overflow:auto;max-height:calc(100vh - 200px);margin:0 0 12px}
table.ut-maint-grille{border-collapse:separate;border-spacing:0;min-width:100%;font-size:13px;color:#243140;margin:0}
.ut-maint-grille thead{position:sticky;top:0;z-index:3}
.ut-maint-grille thead th{background:#F6F8FA;color:#1F2A36;text-align:center;vertical-align:middle;padding:8px 10px;
	border-bottom:1px solid #DDE3EA;border-right:1px solid #EDF0F4;font-weight:400;white-space:nowrap}
.ut-maint-grille thead tr:first-child th{border-bottom:0;padding-bottom:4px}
.ut-maint-grille thead tr:last-child th{border-bottom:2px solid #DDE3EA;padding-top:2px}
.ut-maint-grille th.ut-maint-coin{position:sticky;left:0;z-index:4;background:#F6F8FA;border-right:2px solid #DDE3EA;min-width:13em}
.ut-maint-controle{display:flex;flex-direction:column;align-items:center;gap:5px;font-weight:700;font-size:14px;line-height:1.25;white-space:normal;min-width:9em}
.ut-maint-outils{display:inline-flex;align-items:center;gap:6px}
.ut-maint-preavis{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#43566A;white-space:nowrap}
.ut-maint-preavis input[type="text"]{width:4em;text-align:center;font-size:12px;border:1px solid #C6D0DA;border-radius:4px;padding:3px 4px;
	background:#fff;font-variant-numeric:tabular-nums}
.ut-maint-preavis input[type="text"][disabled]{background:#EEF1F4;color:#6B7A8A}
.ut-maint-grille tbody td{padding:5px 8px;border-bottom:1px solid #EDF0F4;border-right:1px solid #EDF0F4;vertical-align:middle;text-align:center}
.ut-maint-grille tbody tr:hover td{background:#F7FAFD}
.ut-maint-grille td.ut-maint-nom{position:sticky;left:0;z-index:2;background:#fff;text-align:left;white-space:nowrap;
	font-size:14px;padding:5px 12px;border-right:2px solid #DDE3EA}
.ut-maint-grille tbody tr:hover td.ut-maint-nom{background:#F7FAFD}
.ut-maint-grille td.ut-maint-nom b{font-weight:700}
.ut-maint-grille td.ut-maint-nom i{font-style:normal;font-size:12px;color:#6B7A8A;margin-left:6px}
.ut-maint-grille td.ut-maint-nom.ut-remorque b{color:rgb(82,115,173)}
.ut-maint-cell{display:inline-flex;align-items:center;gap:6px}
.ut-maint-cell input[type="text"]{width:8em;text-align:center;font-weight:700;font-size:13px;border:1px solid #C6D0DA;border-radius:4px;
	padding:4px 4px;font-variant-numeric:tabular-nums}
.ut-maint-cell input[type="text"]:focus{outline:2px solid #2C5F8D;border-color:#2C5F8D}
.ut-maint-cell input[type="text"][disabled]{opacity:.85}
.ut-maint-cell img.ut-doc{width:18px;height:18px;cursor:pointer;flex:0 0 18px}
/* La modale des documents */
.ut-depot{border:2px dashed rgb(91,192,222);border-radius:6px;width:100%;height:100px;text-align:center;padding-top:22px;color:#2C5F8D}
.ut-depot b{font-size:11px}
#tab_doc{font-size:13px;width:100%}
#tab_doc td{padding:4px 6px;border-bottom:1px solid #EDF0F4}
#tab_doc img{cursor:pointer}


/* ---------------------------------------------------------------------
   5. TELEPHONE
   --------------------------------------------------------------------- */
@media (max-width: 768px){
	.ut-page{width:auto;margin:0 8px 30px}
	.ut-titre{flex-wrap:wrap;padding:8px 10px;gap:8px}
	.ut-titre h2{font-size:16px}
	.ut-titre .ut-droite{margin-left:0;width:100%}
	.ut-barre{flex-direction:column;align-items:stretch;gap:8px}
	.ut-barre .ut-groupe{width:100%}
	.ut-barre .ut-champ, .ut-barre select.ut-champ{width:100%;min-width:0}
	.ut-barre .ut-actions{margin-left:0;width:100%}
	.ut-barre .ut-actions .ut-btn{flex:1 1 auto}
	.ut-nav{width:100%;justify-content:center}
	.ut-soustitre{font-size:14px;padding:6px 8px}
	.ut-cadre{border-radius:0;margin:0 -8px}
	.ut-table{font-size:12px}
	.ut-table thead th, .ut-table tbody td{padding:7px 8px}
	.ut-grille-cadre{max-height:none;border-radius:0;margin:0 -8px}
	.ut-grille td.ut-ligne-nom{font-size:12px;padding:5px 8px}
	.ec-wrap{width:auto;margin:0 8px 30px;padding:6px 8px 12px}
	.ec-barre{width:auto;margin:10px 8px}
	.ut-maint-cadre{max-height:none;border-radius:0;margin:0 -8px 12px}
	.ut-accordeon-corps{padding-left:14px}
	.ut-form-table .ut-large, .ut-form-table .ut-moyen{width:100%}
	.ut-form-table, .ut-form-table tbody, .ut-form-table tr, .ut-form-table td{display:block;width:100%}
	.ut-form-table tr.ut-espace{height:8px}
	.ut-form-table td{padding:3px 0}
	.ut-form-table td.ut-form-lib{white-space:normal;padding:8px 0 2px}
	.ut-form-table td.ut-form-titre{padding:12px 0 4px}
	.ut-form-table .ut-btn{width:100%}
	.ut-ligne-champs .ut-champ{flex:1 1 160px;min-width:0}
	.ut-legende{border-spacing:0 6px}
	.ut-legende tr{display:flex;flex-wrap:wrap;gap:4px 0}
}