/* ============================================================
   ARCHI&CO — Design System v2.0
   Fichier : archico-design.css
   À placer dans : /gestion/data/css/
   À importer dans index.tpl APRÈS les CSS existants :
   <link rel="stylesheet" href="data/css/archico-design.css">
   ============================================================ */

/* --- Reset ciblé -------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }

/* --- Variables --------------------------------------------- */
:root {
  --sidebar-bg:      #1E2530;
  --sidebar-width:   210px;
  --accent:          #3B6FD4;
  --accent-hover:    #2d5ab8;
  --accent-light:    #E6F1FB;
  --bg-page:         #F2F4F7;
  --bg-card:         #FFFFFF;
  --bg-secondary:    #F8F9FB;
  --text-primary:    #1A1D23;
  --text-secondary:  #6B7280;
  --text-muted:      #9CA3AF;
  --border:          rgba(0,0,0,0.08);
  --border-strong:   rgba(0,0,0,0.14);
  --radius-sm:       6px;
  --radius-md:       8px;
  --radius-lg:       12px;
  --shadow-sm:       0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:       0 4px 12px rgba(0,0,0,0.08);
  --font-ui:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:       'DM Mono', 'Fira Mono', 'Courier New', monospace;
  --green:           #639922;
  --green-light:     #EAF3DE;
  --amber:           #EF9F27;
  --amber-light:     #FAEEDA;
  --red:             #E24B4A;
  --red-light:       #FCEBEB;
}

/* --- Google Fonts ------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=DM+Mono:wght@400;500&display=swap');

/* --- Body & layout de base --------------------------------- */
body {
  font-family: var(--font-ui) !important;
  background: var(--bg-page) !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Masquer le fond texturé/filigrane existant */
body::before { display: none !important; }

/* ============================================================
   SIDEBAR — remplace le menu horizontal en haut
   ============================================================ */

/* Conteneur principal : on pousse le contenu à droite */
#main.container_12 {
  display: flex !important;
  min-height: 100vh !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--bg-page) !important;
}

/* --- Sidebar elle-même ------------------------------------- */
#header {
  width: var(--sidebar-width) !important;
  min-height: 100vh !important;
  background: var(--sidebar-bg) !important;
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 100 !important;
  padding: 0 !important;
  box-shadow: 2px 0 8px rgba(0,0,0,0.15) !important;
  border: none !important;
}

/* Logo -- "MA BOITE M.O." format carré (icône + texte déjà intégré au
   dessin, dessiné par l'architecte -- voir template/header.tpl :
   <a id="logo"><img ...></a>, fichier data/images/logo_maboite_mo_icone.svg,
   non modifié). NB : l'id "logo" est réutilisé par l'écran de connexion
   (voir #loginbox #logo plus bas) -- on scope donc bien ces règles à
   "#header #logo" (la sidebar) pour ne pas déborder sur ce 2e contexte, qui
   a besoin d'une taille et d'un habillage différents. */
#header #logo {
  display: block !important;
  padding: 24px 12px 16px !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  background: none !important;
  /* Neutralise l'ancienne règle #logo de data/css/style.css (width:182px,
     height:55px, background:url(logo2.png), text-indent:-9999px -- l'astuce
     "texte caché hors écran" de l'ancien logo en image de fond). */
  width: auto !important;
  height: auto !important;
  text-indent: 0 !important;
}

/* Le texte ("MA BOITE M.O.") fait maintenant partie du dessin lui-même,
   plus besoin de légende générée en CSS en dessous (voir l'ancien
   #header #logo::after, supprimé). Largeur agrandie pour bien remplir la
   sidebar (210px de large, moins le padding gauche/droite de 12px chacun
   -> 186px de zone utile). */
#header #logo img {
  display: block !important;
  width: 184px !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* Logo de l'écran de connexion (template/connexion.tpl : <img id="logo">
   directement, pas de lien) -- version horizontale complète (icône + texte),
   dessinée par l'architecte, fond transparent (texte/icône blanc + touche
   teal). Contrairement à la sidebar ou au bandeau du tableau de bord,
   #loginbox lui-même n'a PAS de fond sombre (seul #loginform, la carte du
   formulaire un peu plus bas, en a un -- voir data/css/style.css) : sans
   habillage, ce logo blanc deviendrait illisible sur le fond clair de la
   page. On lui ajoute donc ici un encart bleu marine (padding + coins
   arrondis) pour qu'il reste lisible quel que soit le contexte. */
#loginbox #logo {
  display: block !important;
  width: 240px !important;
  height: auto !important;
  margin: 0 auto 18px !important;
  text-indent: 0 !important;
  background: #082E61 !important;
  padding: 16px 20px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

/* Suppression de l'ancienne div grid autour du logo */
#header .grid_3 {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* --- Menu navigation --------------------------------------- */
#nav {
  padding: 12px 8px !important;
  flex: 1 !important;
}

#nav ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#nav ul li {
  margin-bottom: 2px !important;
}

#nav ul li a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 10px !important;
  border-radius: var(--radius-sm) !important;
  color: rgba(255,255,255,0.45) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s !important;
  background: none !important;
  border: none !important;
}

#nav ul li a:hover,
#nav ul li.active a,
#nav ul li a.active {
  background: rgba(91,145,229,0.15) !important;
  color: #7AAFF0 !important;
}

/* Séparateurs de sections dans le menu */
#nav .nav-section {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.2) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 16px 10px 6px !important;
  display: block !important;
}

/* Ancien menu horizontal — on le transforme */
#menu {
  padding: 12px 8px !important;
  flex: 1 !important;
  background: none !important;
  border: none !important;
}

#menu ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

#menu ul li {
  margin-bottom: 2px !important;
  border: none !important;
  background: none !important;
  float: none !important;
}

#menu ul li a,
#menu a {
  display: flex !important;
  align-items: center !important;
  padding: 9px 10px !important;
  border-radius: var(--radius-sm) !important;
  color: rgba(255,255,255,0.45) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
  text-shadow: none !important;
  transition: background 0.15s, color 0.15s !important;
  /* Quand une icône émoji + un libellé court passent à la ligne (icône seule
     sur la 1ère ligne), une ligne trop serrée fait déborder visuellement le
     glyphe de l'icône sur le début du mot en dessous (ex : le "C" de
     "Chantiers" disparaît derrière l'icône). Une hauteur de ligne plus
     généreuse évite ce chevauchement. */
  line-height: 1.5 !important;
}

#menu ul li a:hover,
#menu ul li.active a,
#menu ul li.selected a {
  background: rgba(91,145,229,0.15) !important;
  color: #7AAFF0 !important;
}

/* Sous-menu (rubriques) */
#menu ul ul {
  padding-left: 12px !important;
  margin-top: 2px !important;
}

#menu ul ul li a {
  font-size: 12px !important;
  padding: 7px 10px !important;
  color: rgba(255,255,255,0.35) !important;
}

#menu ul ul li a:hover {
  color: rgba(255,255,255,0.65) !important;
  background: rgba(255,255,255,0.05) !important;
}

/* ============================================================
   USERBAR (profil utilisateur) en bas de sidebar
   ============================================================ */
#userbar {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 12px 16px !important;
  background: none !important;
  position: relative !important;
}

#profile {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

#profileinfo {
  flex: 1 !important;
  min-width: 0 !important;
}

#username {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.75) !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#subline {
  font-size: 11px !important;
  color: rgba(255,255,255,0.3) !important;
  display: block !important;
}

.profilebutton {
  display: inline-block !important;
  font-size: 11px !important;
  padding: 4px 8px !important;
  margin-top: 6px !important;
  margin-right: 4px !important;
  border-radius: var(--radius-sm) !important;
  border: 0.5px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.5) !important;
  text-decoration: none !important;
  background: none !important;
  transition: background 0.15s, color 0.15s !important;
}

.profilebutton:hover {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.8) !important;
}

/* Avatar initiales */
#profile::before {
  content: "FJ";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}

/* ============================================================
   CONTENU PRINCIPAL — décalé de la largeur de la sidebar
   ============================================================ */
#content,
#contenu,
.content,
.grid_12,
.grid_9,
.grid_8 {
  margin-left: var(--sidebar-width) !important;
  padding: 0 !important;
  width: calc(100% - var(--sidebar-width)) !important;
  float: none !important;
}

/* Topbar de page */
#pagetitle,
.page-header,
h1.page-title {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 24px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Zone de contenu */
#wrapper,
.wrapper,
#page-content {
  padding: 20px 24px !important;
  background: var(--bg-page) !important;
}

/* ============================================================
   TABLEAUX
   ============================================================ */
.dataTables_wrapper,
table.dataTable,
table {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
}

/* NB (Intervenants / Entreprises, BET, etc. — mobile) : le "table { width:
   100% !important }" ci-dessus s'appliquait aussi au <table> INTÉRIEUR géré
   par DataTables (.dataTables_scrollBody table), alors que celui-ci reçoit
   déjà sa propre largeur en pixels posée directement par DataTables en JS
   (ex. style="width: 1834px;") -- une largeur calculée pour que TOUTES les
   colonnes restent lisibles, plus large que l'écran sur mobile exprès, pour
   pouvoir défiler horizontalement (voir plus bas .dataTables_scrollBody).
   En forçant width:100% par-dessus, on écrasait cette largeur voulue par
   celle (étroite) du conteneur : le tableau ne débordait alors plus jamais
   d'assez pour qu'un défilement soit nécessaire OU possible, et la colonne
   Accès (ou toute autre colonne à droite) devenait inaccessible -- sans
   aucun moyen de la faire défiler jusqu'à l'écran, exactement comme pour la
   barre d'onglets #menuOngletsIntervenant plus haut. On exclut donc ici les
   <table> qui ont déjà une largeur posée en ligne (signe qu'ils sont gérés
   par DataTables) de cette règle générique. */
.dataTables_wrapper,
table.dataTable,
table:not([style*="width"]) {
  width: 100% !important;
}

table.dataTable,
.table,
table {
  border-collapse: collapse !important;
  background: var(--bg-card) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

table th,
table.dataTable thead th {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-secondary) !important;
  text-align: left !important;
  white-space: nowrap !important;
}

table td,
table.dataTable tbody td {
  padding: 10px 14px !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: middle !important;
  background: var(--bg-card) !important;
}

table.dataTable tbody tr:last-child td,
table tr:last-child td {
  border-bottom: none !important;
}

table.dataTable tbody tr:hover td,
table tbody tr:hover td {
  background: var(--bg-secondary) !important;
}

/* Montants en monospace */
td.montant,
td.amount,
td[class*="montant"],
td[class*="prix"] {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  text-align: right !important;
}

/* ============================================================
   FORMULAIRES
   ============================================================ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="number"],
select,
textarea {
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-md) !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  outline: none !important;
  box-shadow: none !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(59,111,212,0.12) !important;
}

input[type="date"] {
  font-family: var(--font-mono) !important;
}

label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  margin-bottom: 5px !important;
}

/* ============================================================
   BOUTONS
   ============================================================ */
input[type="submit"],
button,
.button,
.btn,
a.btn {
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 7px 14px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background 0.15s, border-color 0.15s !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

input[type="submit"],
button[type="submit"],
.btn-primary,
.button-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.btn-primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

button:hover,
.btn:hover {
  background: var(--bg-secondary) !important;
}

/* Petits boutons action (icônes) dans les tableaux */
.action-btn,
a.edit,
a.delete,
a[href*="modifier"],
a[href*="supprimer"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: background 0.15s !important;
}

a.delete,
a[href*="supprimer"] {
  color: var(--red) !important;
  border-color: rgba(226,75,74,0.2) !important;
}

/* ============================================================
   CARTES / PANELS
   ============================================================ */
.box,
.panel,
.widget,
.card,
.dataTables_wrapper {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

.box-header,
.panel-heading,
.widget-title,
h2.section-title {
  padding: 11px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  background: var(--bg-secondary) !important;
  margin: 0 !important;
}

/* ============================================================
   ONGLETS
   ============================================================ */
.ui-tabs,
.tabs {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.ui-tabs-nav,
.nav-tabs {
  display: flex !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-card) !important;
  padding: 0 16px !important;
  margin: 0 !important;
  list-style: none !important;
}

.ui-tabs-nav li,
.nav-tabs li {
  margin-bottom: -1px !important;
  background: none !important;
  border: none !important;
  float: none !important;
}

.ui-tabs-nav li a,
.nav-tabs li a {
  display: block !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
  border-bottom: 2px solid transparent !important;
  background: none !important;
  border-radius: 0 !important;
  transition: color 0.15s !important;
}

.ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs-nav li.ui-state-active a,
.nav-tabs li.active a {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  font-weight: 500 !important;
  background: none !important;
}

.ui-tabs-panel,
.tab-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  padding: 20px !important;
}

/* ============================================================
   BADGES / STATUTS
   ============================================================ */
.badge,
.status,
.label,
span[class*="status"],
span[class*="etat"] {
  display: inline-block !important;
  font-size: 11px !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
  font-family: var(--font-ui) !important;
}

.badge-success, .status-actif, .etat-livre  { background: var(--green-light) !important; color: var(--green) !important; }
.badge-warning, .status-attente             { background: var(--amber-light) !important; color: #854F0B !important; }
.badge-danger,  .status-retard              { background: var(--red-light) !important;   color: #A32D2D !important; }
.badge-info,    .status-encours             { background: var(--accent-light) !important; color: #185FA5 !important; }

/* ============================================================
   PAGE DE CONNEXION
   ============================================================ */
body.login,
body[class*="login"],
.login-page {
  background: #F2F4F7 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
}

#login-form,
.login-form,
form#loginform {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 32px !important;
  width: 340px !important;
  max-width: 90vw !important;
}

/* ============================================================
   UTILITAIRES
   ============================================================ */
.mono, .montant, .prix, .amount {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
}

.text-muted { color: var(--text-secondary) !important; }
.text-small { font-size: 11px !important; }

/* Pagination DataTables */
.dataTables_paginate .paginate_button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  cursor: pointer !important;
  background: var(--bg-card) !important;
  margin: 0 2px !important;
  text-decoration: none !important;
}

.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button:hover {
  background: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

/* Info DataTables */
.dataTables_info {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  padding: 10px 0 !important;
}

/* Filtre DataTables */
.dataTables_filter input {
  width: auto !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
}

/* Sélecteur "Afficher [10] éléments" — le <select> hérite de la règle
   générique "select { width:100% !important }" des formulaires, ce qui le
   forçait à occuper toute la largeur du bloc et faisait passer "Afficher"
   / le menu / "éléments" sur 3 lignes empilées. On le remet en ligne. */
.dataTables_length {
  display: flex !important;
  align-items: center !important;
}

.dataTables_length label {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  margin-bottom: 0 !important;
  gap: 6px;
}

.dataTables_length select {
  width: auto !important;
  min-width: 60px !important;
  padding: 4px 8px !important;
  display: inline-block !important;
}

/* Suppression des anciens styles visuels indésirables
   (l'ancien thème jQuery UI "admincp" appliquait un fond bleu-nuit
   #363e49 sur .ui-state-default — DataTables ajoute cette classe à
   .dataTables_scrollHead, ce qui créait une bande sombre au-dessus
   de l'en-tête des tableaux). On neutralise aussi background-color,
   pas seulement background-image, sinon la couleur de fond de
   l'ancien thème reste visible. */
.ui-widget-content,
.ui-state-default,
.ui-widget-header {
  background-image: none !important;
  background-color: transparent !important;
  text-shadow: none !important;
}

/* Restaure le fond des en-têtes d'accordéon (lots ACT/AMT), perdu par la
   règle ci-dessus : sans fond, leur texte blanc devient illisible
   (blanc sur blanc) quand un lot est replié. */
.ui-accordion-header {
  background-color: #363e49 !important;
}

/* Restaure le fond des cellules du calendrier (datepicker jQuery UI), perdu
   par la même règle que pour l'accordéon ci-dessus : sans fond, les
   chiffres des jours en texte blanc deviennent illisibles (blanc sur
   blanc). Scopé au calendrier uniquement pour ne pas toucher aux onglets
   .ui-state-default ailleurs sur le site. */
.ui-datepicker-calendar td a.ui-state-default {
  background-color: #363e49 !important;
}

/* La bande d'en-tête défilable de DataTables hérite de .ui-state-default :
   on force un fond transparent (le style du <th> à l'intérieur gère déjà
   sa propre couleur de fond). On ne touche pas à sa hauteur, gérée en JS
   par DataTables pour rester synchronisée avec le défilement horizontal. */
.dataTables_scrollHead,
.dataTables_scrollHeadInner {
  background: none !important;
}

/* Fond filigrane texte répété — suppression */
body > div::before,
#main::before {
  display: none !important;
  content: none !important;
}
#body {
  margin-left: 210px;
  padding-left: 30px !important;
  padding-right: 16px !important;
  width: calc(100% - 210px) !important;
  max-width: calc(100% - 210px) !important;
  box-sizing: border-box !important;
}

.block.big {
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
}

.block.big .titlebar {
  font-size: 36px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-align: center !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 30px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #2d3748 !important;
  width: 100% !important;
  line-height: 1.2 !important;
  min-height: 90px !important;
}

.action.edit, .action.delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 16px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.action.edit::before { content: "✏️"; }
.action.delete::before { content: "🗑️"; }
.action.edit { background-color: #3B6FD4; color: white; }
.action.delete { background-color: #e74c3c; color: white; }

#menu ul li a, #menu a {
  /* Cette règle écrasait la précédente (18px / 14px 16px) et rendait
     l'intitulé "Chantiers" (icône + texte) trop large pour tenir dans la
     largeur fixe de la sidebar (210px) : le texte débordait ou se coupait
     au mauvais endroit. On revient à une taille cohérente avec le reste
     du menu (13px / 9px 10px), qui tient confortablement. */
  font-size: 13px !important;
  padding: 9px 10px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  gap: 12px !important;
  /* Le lien "Chantiers" pointe parfois vers une URL contenant le mot
     "modifier" (ex : index.php?page=chantier_modifier&modifier_chantier=526,
     quand on reste positionné sur un chantier). Il se fait alors capter par
     la règle ".action-btn, a.edit, a.delete, a[href*='modifier'],
     a[href*='supprimer']" plus haut dans ce fichier (pensée pour les petites
     icônes 28x28 des tableaux), qui le réduit à 28x28px et fait déborder son
     texte hors de la pastille bleue. On reprend ici explicitement les
     dimensions et l'affichage pour que les liens du menu ne soient jamais
     réduits à la taille d'un bouton d'action de tableau. */
  display: flex !important;
  width: auto !important;
  height: auto !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

#menu ul li.selected a {
  color: #ffffff !important;
  background: #3B6FD4 !important;
  font-weight: 600 !important;
}

#menu ul li a:hover {
  color: #ffffff !important;
  background: rgba(91,145,229,0.3) !important;
}

#menu .nav-section-label { display: none !important; }

.ui-tabs-nav {
  padding: 0 20px !important;
  gap: 6px !important;
  display: flex !important;
}

.ui-tabs-nav li a {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 14px 22px !important;
  color: #6B7280 !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  border-bottom: none !important;
  border-radius: 8px 8px 0 0 !important;
  background: #F2F4F7 !important;
  margin-right: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ui-tabs-nav li.ui-tabs-selected a,
.ui-tabs-nav li.ui-state-active a {
  background: #FFFFFF !important;
  color: #3B6FD4 !important;
  border-bottom-color: #FFFFFF !important;
  font-weight: 600 !important;
}

.ui-tabs-nav li a:hover {
  background: #E8ECF2 !important;
  color: #3B6FD4 !important;
}

/* ============================================================
   TEINTES PAR PHASE (Général / APD / PRO / DCE / ACT-AMT)
   ------------------------------------------------------------
   L'onglet actif de la barre principale #menuOnglets prend une
   couleur pastel propre à sa phase (au lieu du blanc générique
   ci-dessus), et cette même teinte se retrouve en fond du
   panneau de contenu ainsi que, pour DCE et ACT/AMT, sur la
   sous-barre d'onglets imbriquée (#menuOngletsDCE / #menuOngletsACT)
   — l'idée est de repérer d'un coup d'œil dans quelle phase du
   dossier on se trouve, y compris en scrollant dans le contenu.
   ============================================================ */

/* --- Général (#tabs-1) — gris neutre --- */
#menuOnglets li.ui-tabs-selected:has(> a[href="#tabs-1"]) > a,
#menuOnglets li.ui-state-active:has(> a[href="#tabs-1"]) > a {
  background: #F3F4F6 !important;
  color: #4B5563 !important;
  border-bottom-color: #F3F4F6 !important;
}
#tabs-1.ui-tabs-panel { background: #F3F4F6 !important; }

/* --- APD (#tabs-apd) — ambre --- */
#menuOnglets li.ui-tabs-selected:has(> a[href="#tabs-apd"]) > a,
#menuOnglets li.ui-state-active:has(> a[href="#tabs-apd"]) > a {
  background: #FCF3E3 !important;
  color: #92650F !important;
  border-bottom-color: #FCF3E3 !important;
}
#tabs-apd.ui-tabs-panel { background: #FCF3E3 !important; }

/* --- PRO (#tabs-pro) — violet --- */
#menuOnglets li.ui-tabs-selected:has(> a[href="#tabs-pro"]) > a,
#menuOnglets li.ui-state-active:has(> a[href="#tabs-pro"]) > a {
  background: #F1EBFB !important;
  color: #6631B8 !important;
  border-bottom-color: #F1EBFB !important;
}
#tabs-pro.ui-tabs-panel { background: #F1EBFB !important; }

/* --- DCE (#tabs-dce) — bleu, propagé à la sous-barre #menuOngletsDCE --- */
#menuOnglets li.ui-tabs-selected:has(> a[href="#tabs-dce"]) > a,
#menuOnglets li.ui-state-active:has(> a[href="#tabs-dce"]) > a {
  background: var(--accent-light) !important;
  color: #185FA5 !important;
  border-bottom-color: var(--accent-light) !important;
}
#tabs-dce.ui-tabs-panel { background: var(--accent-light) !important; }
#menuOngletsDCE { background: var(--accent-light) !important; }

/* --- ACT / AMT (#tabs-act) — vert, propagé à la sous-barre #menuOngletsACT --- */
#menuOnglets li.ui-tabs-selected:has(> a[href="#tabs-act"]) > a,
#menuOnglets li.ui-state-active:has(> a[href="#tabs-act"]) > a {
  background: #E7F5EC !important;
  color: #1F7A42 !important;
  border-bottom-color: #E7F5EC !important;
}
#tabs-act.ui-tabs-panel { background: #E7F5EC !important; }
#menuOngletsACT { background: #E7F5EC !important; }

.data-table td:first-child {
  min-width: 200px !important;
}

/* La règle ci-dessus visait les tableaux dont la 1ère colonne contient du
   texte (ex : le nom du lot dans le tableau "Entreprises associées" d'un
   chantier). Mais la plupart des tableaux (Lots, Clients, Intervenants...)
   ont une simple case à cocher dans leur 1ère colonne : ce 1er <td> se
   retrouvait alors forcé à 200px de large pour rien, ce qui resserrait
   toutes les colonnes suivantes (ex : "Tâche" dans la page Lots, qui semblait
   coupée/hors cadre). On annule ce min-width quand la 1ère colonne ne contient
   qu'une case à cocher. */
.data-table td:first-child:has(input[type="checkbox"]) {
  min-width: 30px !important;
  width: 30px !important;
}

/* La règle ci-dessous ne visait à l'origine que la barre d'onglets
   principale (#menuOnglets : Général/APD/PRO/DCE/ACT/DET). Mais DCE, ACT,
   DET ont chacun leur PROPRE sous-barre d'onglets imbriquée (#menuOngletsDCE :
   Métré/DPGF BIS/CCTP/DPGF/Échéancier/Lots, etc.), de même que la page
   Intervenants (#menuOngletsIntervenant : Maître d'ouvrage/Architecte-MO/
   Bureaux d'études/Entreprises) -- ces barres ne matchaient que la règle
   générique ".ui-tabs-nav { display:flex }" plus bas dans ce fichier —
   sans overflow-x ni white-space, un flex-wrap:nowrap par défaut la fait
   déborder sans aucun moyen de la faire défiler sur petit écran (mobile),
   rendant certains onglets tout simplement inaccessibles au toucher. On
   étend donc la même règle à ces quatre barres. */
#menuOnglets > ul.ui-tabs-nav,
#menuOngletsDCE > ul.ui-tabs-nav,
#menuOngletsACT > ul.ui-tabs-nav,
#menuOngletsDET > ul.ui-tabs-nav,
#menuOngletsIntervenant > ul.ui-tabs-nav {
    overflow-x: scroll !important;
    white-space: nowrap !important;
    display: block !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    scrollbar-width: auto !important;
    scrollbar-color: var(--accent) var(--bg-secondary) !important;
}

#menuOnglets > ul.ui-tabs-nav > li,
#menuOngletsDCE > ul.ui-tabs-nav > li,
#menuOngletsACT > ul.ui-tabs-nav > li,
#menuOngletsDET > ul.ui-tabs-nav > li,
#menuOngletsIntervenant > ul.ui-tabs-nav > li {
    display: inline-block !important;
    float: none !important;
}

#menuOnglets > ul.ui-tabs-nav::-webkit-scrollbar,
#menuOngletsDCE > ul.ui-tabs-nav::-webkit-scrollbar,
#menuOngletsACT > ul.ui-tabs-nav::-webkit-scrollbar,
#menuOngletsDET > ul.ui-tabs-nav::-webkit-scrollbar,
#menuOngletsIntervenant > ul.ui-tabs-nav::-webkit-scrollbar {
    height: 10px !important;
}

#menuOnglets > ul.ui-tabs-nav::-webkit-scrollbar-track,
#menuOngletsDCE > ul.ui-tabs-nav::-webkit-scrollbar-track,
#menuOngletsACT > ul.ui-tabs-nav::-webkit-scrollbar-track,
#menuOngletsDET > ul.ui-tabs-nav::-webkit-scrollbar-track,
#menuOngletsIntervenant > ul.ui-tabs-nav::-webkit-scrollbar-track {
    background: var(--bg-secondary) !important;
    border-radius: 6px !important;
}

#menuOnglets > ul.ui-tabs-nav::-webkit-scrollbar-thumb,
#menuOngletsDCE > ul.ui-tabs-nav::-webkit-scrollbar-thumb,
#menuOngletsACT > ul.ui-tabs-nav::-webkit-scrollbar-thumb,
#menuOngletsDET > ul.ui-tabs-nav::-webkit-scrollbar-thumb,
#menuOngletsIntervenant > ul.ui-tabs-nav::-webkit-scrollbar-thumb {
    background: var(--accent) !important;
    border-radius: 6px !important;
    border: 2px solid var(--bg-secondary) !important;
}
#devis .dataTables_filter {
    display: none !important;
}
.data-table th:last-child,
.data-table td:last-child {
    width: 80px !important;
    white-space: nowrap;
}

/* La règle ci-dessus vise la colonne "Actions" (icônes éditer/supprimer),
   qui doit rester étroite et sur une seule ligne — le cas de la plupart des
   tableaux (Lots, Clients, Intervenants...). Mais certains tableaux n'ont
   PAS de colonne Actions en dernière position : leur dernière colonne est un
   véritable champ de contenu texte, que la contrainte 80px + nowrap coupait
   visuellement : "Tâche du lot" dans l'onglet DCE ▸ Lots (#tabs-2, tronqué
   en "Tâche d...") et "N° Lot" dans l'onglet ACT ▸ Entreprises (#tabs-3). On
   annule la contrainte pour ces deux tableaux précis (largeur automatique,
   retour à la ligne normal). NB : cette règle était restée incomplète
   (accolade jamais fermée, fin de fichier coupée) — d'où son absence d'effet
   jusqu'ici. */
#tabs-2 .data-table th:last-child,
#tabs-2 .data-table td:last-child,
#tabs-3 .data-table th:last-child,
#tabs-3 .data-table td:last-child {
    width: auto !important;
    white-space: normal !important;
}

/* ============================================================
   DÉFILEMENT HORIZONTAL DES TABLEAUX (mobile / tablette)
   ============================================================
   Tous les <table class="data-table"> sont déjà initialisés par le plugin
   DataTables avec l'option "sScrollX: 100%" (voir data/js/js.js), qui gère
   lui-même le défilement horizontal via un conteneur .dataTables_scrollBody
   quand le tableau est plus large que l'écran — cas fréquent sur téléphone
   ou tablette (tableaux Lots, Devis, Entreprises...). On ne touche pas à ce
   mécanisme (l'envelopper une seconde fois casse le calcul de largeur de
   DataTables), on se contente de rendre sa scrollbar native bien visible
   (curseur épais et coloré) plutôt que la fine barre auto-masquée par
   défaut, pour qu'on la remarque et qu'on puisse la saisir facilement au
   doigt comme à la souris.

   NB (Intervenants / mobile) : DataTables pose lui-même overflow-x:auto sur
   .dataTables_scrollBody, ce qui ne déclenche le défilement QUE si le
   navigateur considère le tableau comme "plus large que le conteneur" au
   moment de son calcul interne. Comme pour la barre d'onglets
   #menuOngletsIntervenant (voir plus bas), on force ici overflow-x:scroll
   (et non "auto") pour garantir que le défilement tactile reste toujours
   possible/perceptible, même dans les cas limites où ce calcul serait
   approximatif. */
.dataTables_scrollBody {
  overflow-x: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  scrollbar-width: auto !important;
  scrollbar-color: var(--accent) var(--bg-secondary) !important;
}

.dataTables_scrollBody::-webkit-scrollbar {
  height: 12px !important;
}

.dataTables_scrollBody::-webkit-scrollbar-track {
  background: var(--bg-secondary) !important;
  border-radius: 6px !important;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb {
  background: var(--accent) !important;
  border-radius: 6px !important;
  border: 2px solid var(--bg-secondary) !important;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
  background: var(--accent-hover) !important;
}