/* BGT – Bakassi Gestion Transport · feuille de style
   Couleur principale : bleu pétrole ; accent : orange (alertes, actions secondaires). */

:root {
  --marque: #0e5a6e;
  --marque-fonce: #0a3f4e;
  --marque-tres-fonce: #072e39;
  --marque-clair: #e4f1f4;
  --accent: #e08a1e;
  --accent-clair: #fdf1e2;
  --succes: #1f8a5b;
  --succes-clair: #e3f4ec;
  --alerte: #b86a00;
  --alerte-clair: #fdf0dc;
  --danger: #c0392b;
  --danger-clair: #fbe9e7;
  --fond: #f3f5f6;
  --carte: #ffffff;
  --texte: #1c2a30;
  --discret: #5d6b71;
  --bordure: #dde3e6;
  --ombre: 0 1px 2px rgba(10, 40, 50, 0.06), 0 2px 8px rgba(10, 40, 50, 0.05);
  --rayon: 10px;
  --menu-largeur: 248px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; font-size: 15px; background: var(--fond); color: var(--texte); line-height: 1.45; }
h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 18px; margin: 28px 0 12px; }
a { color: var(--marque); }
.icone { flex: none; vertical-align: middle; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.discret { color: var(--discret); }
.erreur { color: var(--danger); }

/* ---- Menu latéral ---------------------------------------------------- */
.menu { position: fixed; inset: 0 auto 0 0; width: var(--menu-largeur); display: flex; flex-direction: column; background: var(--marque-tres-fonce); color: #d6e6eb; padding: 16px 12px; z-index: 30; overflow-y: auto; }
.menu__marque { display: flex; align-items: center; gap: 10px; padding: 6px 8px 18px; color: #fff; text-decoration: none; }
.menu__sigle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: 0.04em; flex: none; }
.menu__nom { font-weight: 600; font-size: 14px; line-height: 1.2; }
.menu__liens { display: grid; gap: 2px; }
.menu__lien { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: #cfe1e7; text-decoration: none; font-size: 14.5px; }
.menu__lien:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.menu__lien--actif { background: var(--marque); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.menu__lien--bientot { opacity: 0.45; cursor: default; }
/* Premier niveau du menu (demande 115) : un lien direct (Tableau de bord, Ma société) a le style des groupes */
.menu__lien--niveau1 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.menu__lien--bientot:hover { background: none; color: #cfe1e7; }
.menu__lien small { margin-left: auto; font-size: 11px; }
.menu__lien--bas { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0; padding-top: 14px; }
.menu-bascule, .menu-voile { display: none; }

/* ---- Page et barre du haut ---------------------------------------------- */
.avec-menu .page { margin-left: var(--menu-largeur); min-height: 100vh; }
/* Bande de titre aux couleurs de BGT : société à gauche ; pastille d'environnement, menu BGT et compte à droite */
.haut { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 16px; min-height: 58px; padding: 0 28px; background: linear-gradient(90deg, var(--marque), var(--marque-fonce)); color: #fff; box-shadow: 0 1px 4px rgba(7, 46, 57, 0.25); }
.haut__burger { display: none; cursor: pointer; color: #fff; }
.haut__societe { display: flex; align-items: center; gap: 12px; min-width: 0; }
.haut__logo { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; background: #fff; color: var(--marque); font-weight: 800; font-size: 12px; overflow: hidden; }
.haut__logo img { max-width: 34px; max-height: 34px; object-fit: contain; }
.haut__raison { font-weight: 700; letter-spacing: 0.3px; line-height: 1.15; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.haut__raison small { display: block; font-weight: 400; font-size: 12px; letter-spacing: 0; text-transform: none; opacity: 0.8; }
.haut__droite { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.haut__environnement { font-size: 11px; font-weight: 700; letter-spacing: 0.4px; padding: 4px 10px; border-radius: 20px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); white-space: nowrap; }
.haut__rond { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; }
.haut__rond:hover, .haut__utilisateur:hover, .haut__deroulant[open] > summary { background: rgba(255, 255, 255, 0.24); }
.haut__utilisateur { display: flex; align-items: center; gap: 9px; padding: 4px 10px 4px 4px; border-radius: 24px; background: rgba(255, 255, 255, 0.12); color: #fff; }
.haut__nom { line-height: 1.1; font-size: 14px; font-weight: 600; }
.haut__nom small { display: block; font-size: 11px; font-weight: 400; opacity: 0.8; max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.haut__chevron { opacity: 0.8; }
.haut__liste { color: var(--texte); min-width: 280px; }
.haut__liste hr { border: 0; border-top: 1px solid var(--bordure); margin: 6px 0; }
.haut__liste form { margin: 0; }
.haut__entete-liste { padding: 8px 10px 10px; border-bottom: 1px solid var(--bordure); margin-bottom: 6px; display: grid; gap: 2px; }
.haut__entete-liste span { color: var(--discret); font-size: 13px; }
.haut__liste .icone { color: var(--marque); }
.haut__deconnexion { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 14px; color: var(--danger); cursor: pointer; text-align: left; }
.haut__deconnexion .icone { color: var(--danger); }
.haut__deconnexion:hover { background: var(--danger-clair); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; flex: none; }
.avatar--photo { object-fit: cover; background: #fff; }
.avatar--grand { width: 96px; height: 96px; font-size: 32px; }
.bouton-icone { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--bordure); border-radius: 8px; background: #fff; color: var(--discret); cursor: pointer; }
.bouton-icone:hover { color: var(--danger); border-color: var(--danger); }
.contenu { max-width: 1180px; margin: 0 auto; padding: 24px 28px 48px; }

@media (max-width: 900px) {
  .avec-menu .page { margin-left: 0; }
  .menu { transform: translateX(-100%); transition: transform 0.2s ease; }
  .menu-bascule:checked ~ .menu { transform: none; }
  .menu-bascule:checked ~ .menu-voile { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 25; }
  .haut { padding: 0 12px; gap: 10px; }
  .haut__burger { display: grid; }
  .haut__nom, .haut__chevron, .haut__raison small { display: none; }
  .haut__raison { font-size: 13px; }
  .haut__environnement { font-size: 9px; padding: 3px 7px; }
  .haut__utilisateur { padding: 2px; }
  .contenu { padding: 18px 16px 40px; }
}

/* ---- En-tête de page ---------------------------------------------------- */
.titre-page { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.titre-page__texte { display: flex; align-items: center; gap: 14px; }
.titre-page__icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--marque-clair); color: var(--marque); flex: none; }
.titre-page__icone--accent { background: var(--accent-clair); color: var(--accent); }
.titre-page p { margin: 0; color: var(--discret); }
.retour { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; text-decoration: none; font-size: 14px; }

/* ---- Boutons ------------------------------------------------------------ */
.bouton, .bouton--secondaire { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 8px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.bouton { border: 0; background: var(--marque); color: #fff; box-shadow: var(--ombre); }
.bouton:hover { background: var(--marque-fonce); }
.bouton--secondaire { border: 1px solid var(--bordure); background: #fff; color: var(--marque-fonce); }
.bouton--secondaire:hover { border-color: var(--marque); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Messages ----------------------------------------------------------- */
.message { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 16px; border-radius: var(--rayon); background: var(--succes-clair); color: var(--succes); font-weight: 500; }
.message--info { background: var(--marque-clair); color: var(--marque-fonce); }
.message--error { background: var(--danger-clair); color: var(--danger); }

/* ---- Cartes, tuiles, modules ------------------------------------------- */
.carte { background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 18px; box-shadow: var(--ombre); }
.carte h2 { margin: 0 0 12px; font-size: 16px; display: flex; align-items: center; gap: 8px; color: var(--marque-fonce); }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-bottom: 8px; }
.tuile { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); text-decoration: none; color: inherit; }
a.tuile:hover { border-color: var(--marque); }
.tuile__icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--marque-clair); color: var(--marque); flex: none; }
.tuile__icone--accent { background: var(--accent-clair); color: var(--accent); }
.tuile__icone--succes { background: var(--succes-clair); color: var(--succes); }
.tuile__icone--alerte { background: var(--alerte-clair); color: var(--alerte); }
.tuile__valeur { font-size: 26px; font-weight: 700; line-height: 1.1; }
.tuile__libelle { color: var(--discret); font-size: 13.5px; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.module { display: flex; gap: 14px; padding: 16px; background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); text-decoration: none; color: inherit; }
a.module:hover { border-color: var(--marque); }
.module h3 { margin: 0 0 4px; font-size: 15.5px; }
.module p { margin: 0 0 8px; color: var(--discret); font-size: 13.5px; }
.module--bientot { opacity: 0.65; box-shadow: none; }
.module__icone { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 10px; background: var(--marque-clair); color: var(--marque); }
.module--bientot .module__icone { background: #eef1f2; color: var(--discret); }
.pastille { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--marque-clair); color: var(--marque); font-size: 12px; font-weight: 600; }
.pastille--attente { background: #eef1f2; color: var(--discret); }

/* ---- Filtres et tableaux --------------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.recherche { position: relative; flex: 1 1 260px; max-width: 420px; }
.recherche .icone { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--discret); }
.recherche input { width: 100%; padding-left: 38px; }
.tableau-conteneur { overflow-x: auto; background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--bordure); white-space: nowrap; }
th { color: var(--discret); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; background: #f8fafa; }
tbody tr:hover { background: #f8fbfc; }
tr:last-child td { border-bottom: 0; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
/* Totaux (pied des tableaux) : toujours en gras et bien lisibles, dans tout BGT */
tfoot th { color: var(--texte); font-weight: 700; }
tfoot th.nombre { font-size: 15px; text-transform: none; letter-spacing: 0; }
.vehicule { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; }
.vehicule__icone { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--marque-clair); color: var(--marque); flex: none; }
.vehicule__icone--fuel { background: var(--accent-clair); color: var(--accent); }
.vide { padding: 32px; color: var(--discret); text-align: center; }
.vide .icone { display: block; margin: 0 auto 8px; color: #b7c3c8; }

/* ---- Statuts --------------------------------------------------------------- */
.statut { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #eef1f2; color: var(--discret); }
.statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.statut--DISPONIBLE { background: var(--succes-clair); color: var(--succes); }
.statut--EN_VOYAGE { background: var(--marque-clair); color: var(--marque); }
.statut--EN_MAINTENANCE, .statut--IMMOBILISE { background: var(--alerte-clair); color: var(--alerte); }
.statut--SORTI { background: #eef1f2; color: var(--discret); }

/* ---- Fiche ---------------------------------------------------------------- */
.fiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.fiche dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; font-size: 14px; }
.fiche dt { color: var(--discret); }
.fiche dd { margin: 0; font-weight: 500; }
.ensemble { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.ensemble .icone { color: var(--accent); }

/* ---- Formulaires ------------------------------------------------------------ */
input, select, textarea { padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 8px; font: inherit; background: #fff; color: var(--texte); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--marque-clair); border-color: var(--marque); }
.formulaire { max-width: 820px; display: grid; gap: 16px; }
fieldset { margin: 0; border: 1px solid var(--bordure); border-radius: var(--rayon); padding: 14px 18px 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; background: var(--carte); box-shadow: var(--ombre); }
legend { padding: 0 6px; font-weight: 700; color: var(--marque-fonce); }
.champ { display: grid; gap: 5px; align-content: start; }
.champ label { font-size: 13.5px; font-weight: 600; color: #34454c; }
.champ input, .champ select, .champ textarea { width: 100%; }
.champ:has(textarea) { grid-column: 1 / -1; }
.aide { color: var(--discret); font-size: 12.5px; }
.errorlist { margin: 0; padding: 0; list-style: none; color: var(--danger); font-size: 13px; font-weight: 500; }
.champ:has(.errorlist) input, .champ:has(.errorlist) select { border-color: var(--danger); }

/* ---- Connexion ----------------------------------------------------------- */
.sans-menu { background: linear-gradient(135deg, var(--marque-tres-fonce), var(--marque) 60%, #137089); min-height: 100vh; }
.connexion { display: grid; place-items: center; min-height: calc(100vh - 48px); }
.connexion__carte { width: min(400px, 100%); padding: 32px; background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); }
.connexion__marque { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.connexion__marque .menu__sigle { width: 48px; height: 48px; font-size: 16px; }
.connexion__marque strong { display: block; font-size: 17px; }
.connexion form { display: grid; gap: 10px; }
.connexion label { font-size: 13.5px; font-weight: 600; }
.connexion .bouton { justify-content: center; margin-top: 8px; padding: 12px; }

/* Import Excel */
.etapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 20px; }
.etape { display: flex; gap: 14px; margin: 0; }
.etape h2 { margin: 0 0 6px; }
.etape p { margin: 0 0 12px; font-size: 14px; }
.etape__numero { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; }
.ligne--erreur td { background: var(--danger-clair); }
.succes { display: inline-flex; align-items: center; gap: 6px; color: var(--succes); font-weight: 500; }
.confirmer { margin-top: 16px; }
.ligne--erreur .errorlist { white-space: normal; min-width: 280px; }

/* Personnel */
.initiales { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--marque-clair); color: var(--marque-fonce); font-size: 12.5px; font-weight: 700; }
.titre-page__initiales { font-size: 18px; font-weight: 700; color: var(--marque-fonce); border-radius: 50%; }
.etat { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.etat--A_JOUR { background: var(--succes-clair); color: var(--succes); }
.etat--BIENTOT { background: var(--alerte-clair); color: var(--alerte); }
.etat--EXPIRE { background: var(--danger-clair); color: var(--danger); }
.etat--ABSENT { background: #eef1f2; color: var(--discret); }
.etat--DEPASSE { background: var(--danger-clair); color: var(--danger); }
.etat--INCONNU { background: #eef1f2; color: var(--discret); }
.statut--ACTIF { background: var(--succes-clair); color: var(--succes); }
.statut--ABSENT { background: var(--alerte-clair); color: var(--alerte); }
.tuile__icone--danger { background: var(--danger-clair); color: var(--danger); }
.tuile__icone--neutre { background: #eef1f2; color: var(--discret); }
.case { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #34454c; }
.case-a-cocher { width: 36px; }
.case-a-cocher input, .case input { width: 17px; height: 17px; accent-color: var(--marque); }
.maj-groupee { margin-top: 18px; }
.formulaire-ligne { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; margin: 12px 0 16px; }
.etat--ok { background: var(--succes-clair); color: var(--succes); }
.etat--alerte { background: var(--alerte-clair); color: var(--alerte); }
.etat--danger { background: var(--danger-clair); color: var(--danger); }
.etat--neutre { background: #eef1f2; color: var(--discret); }
.apercu-numero { margin: 4px 0 0; font-size: 20px; font-weight: 700; color: var(--marque-fonce); letter-spacing: .5px; }
.champ ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.champ ul label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.champ ul input[type=radio] { width: 17px; height: 17px; accent-color: var(--marque); }
.champ input[type=radio], .champ input[type=checkbox] { width: 17px; height: 17px; margin: 0; accent-color: var(--marque); flex: none; }
.champ div:has(> div > label > input[type=radio]) { display: grid; gap: 8px; }
.champ div > label:has(> input[type=radio]) { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14px; color: var(--texte, #1d2b30); }
.numero-auto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 12px; border: 1px dashed var(--bordure); border-radius: 8px; background: #f7f9fa; }
.numero-auto strong { font-size: 16px; color: var(--marque-fonce); }
.numero-auto span { color: var(--discret); font-size: 13px; }
.lien { border: 0; background: none; padding: 0; color: var(--marque); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
td.resume { white-space: normal; min-width: 200px; }
.bouton--petit { padding: 5px 10px; font-size: 13px; }

/* Menu regroupé par module */
.menu__groupe { margin-top: 6px; }
.menu__titre { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; list-style: none; user-select: none; }
.menu__titre::-webkit-details-marker { display: none; }
.menu__titre:hover { background: rgba(255, 255, 255, 0.07); }
.menu__groupe--actif > .menu__titre { color: var(--accent); }
.menu__chevron { margin-left: auto; opacity: 0.7; transition: transform 0.15s ease; }
.menu__groupe:not([open]) .menu__chevron { transform: rotate(-90deg); }
.menu__sous-liens { display: grid; gap: 2px; margin: 2px 0 4px 18px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.menu__lien--sous { padding: 8px 10px; font-size: 14px; }

/* Cartes d'employé */
.photo-salarie { width: 54px; height: 72px; object-fit: cover; border-radius: 8px; box-shadow: var(--ombre); }
.mini-photo { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; flex: none; }
.apercu-image { max-width: 160px; max-height: 90px; margin-top: 8px; padding: 6px; border: 1px solid var(--bordure); border-radius: 8px; background: #fff; }
.champ--large { grid-column: 1 / -1; }
.verification { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.verification__carte { width: min(380px, 100%); background: #fff; border-radius: 16px; padding: 24px; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); }
.verification__societe { margin: 0 0 12px; font-weight: 700; color: var(--marque); letter-spacing: 0.03em; }
.verification__verdict { margin: 0; padding: 10px; border-radius: 10px; font-size: 20px; font-weight: 800; }
.verification__verdict--valide { background: var(--succes-clair); color: var(--succes); }
.verification__verdict--invalide { background: var(--danger-clair); color: var(--danger); }
.verification__motif { color: var(--danger); margin: 8px 0 0; }
.verification__photo { width: 120px; height: 160px; object-fit: cover; border-radius: 10px; margin: 16px auto 4px; display: block; }
.verification__nom { font-size: 18px; font-weight: 700; margin: 12px 0 8px; }
.verification dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; text-align: left; margin: 0 auto; width: fit-content; }
.verification dt { color: var(--discret); }
.verification dd { margin: 0; font-weight: 600; }
.verification__pied { margin: 18px 0 0; font-size: 12px; color: var(--discret); }

/* Clients */
.titre-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }
.titre-section h2 { margin: 0 0 10px; }
.contact { margin: 0 0 10px; font-size: 14px; }
.lien-discret { margin-left: 6px; font-size: 12.5px; color: var(--marque); }
.historique { margin-top: 10px; }
.historique summary { cursor: pointer; color: var(--marque); font-weight: 600; margin-bottom: 8px; }
.bouton--danger { background: var(--danger); }
.bouton--danger:hover { background: var(--danger); filter: brightness(.9); }
.simulation { margin: 4px 0 20px; }
.simulation .formulaire-ligne { align-items: end; margin-bottom: 8px; }
.message--alerte { background: var(--alerte-clair); color: var(--alerte); }
.ligne--alerte td { background: var(--alerte-clair); }
.avertissements { margin: 0; padding-left: 18px; color: var(--alerte); white-space: normal; min-width: 280px; }
.pastille--alerte { background: var(--alerte-clair); color: var(--alerte); }
input:disabled, select:disabled, textarea:disabled { background: #eef1f2; color: var(--discret); cursor: not-allowed; }
.menu-deroulant { position: relative; }
.menu-deroulant > summary { list-style: none; cursor: pointer; }
.menu-deroulant > summary::-webkit-details-marker { display: none; }
.menu-deroulant__liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 270px; background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 6px; display: grid; }
.menu-deroulant__liste a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; color: inherit; text-decoration: none; font-size: 14px; }
.menu-deroulant__liste a:hover { background: var(--marque-clair); color: var(--marque-fonce); }
/* Voyages */
.onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.onglet { padding: 7px 14px; border-radius: 999px; background: var(--carte); border: 1px solid var(--bordure); color: inherit; text-decoration: none; font-size: 14px; }
.onglet--actif { background: var(--marque); border-color: var(--marque); color: #fff; }
.onglet__nombre { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: rgba(0,0,0,.08); font-size: 12px; text-align: center; }
.onglet--actif .onglet__nombre { background: rgba(255,255,255,.25); }
.etat-voyage { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #eef1f2; color: var(--discret); }
.etat-voyage--PARTI, .etat-voyage--CHARGE { background: var(--marque-clair); color: var(--marque); }
.etat-voyage--LIVRE { background: var(--alerte-clair); color: var(--alerte); }
.etat-voyage--CLOTURE { background: var(--succes-clair); color: var(--succes); }
.etat-voyage--ANNULE { background: var(--danger-clair); color: var(--danger); }
.jalons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; counter-reset: jalon; }
.jalon { position: relative; padding: 10px 8px 10px 36px; border-radius: var(--rayon); background: var(--carte); border: 1px solid var(--bordure); font-size: 13.5px; color: var(--discret); counter-increment: jalon; }
.jalon::before { content: counter(jalon); position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: #eef1f2; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.jalon--fait { color: var(--succes); border-color: var(--succes-clair); }
.jalon--fait::before { content: "✓"; background: var(--succes-clair); }
.jalon--courant { color: var(--marque-fonce); border-color: var(--marque); font-weight: 600; }
.jalon--courant::before { background: var(--marque); color: #fff; }
.etape-suivante { margin-bottom: 16px; border-left: 4px solid var(--accent); }
.controles { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 4px; }
.controle { display: flex; gap: 8px; align-items: flex-start; padding: 6px 10px; border-radius: 6px; font-size: 14px; }
.controle__puce { flex: none; margin-top: 2px; }
.controle--ok { color: var(--succes); }
.controle--ok strong { color: inherit; }
.controle--alerte { background: var(--alerte-clair); color: var(--alerte); }
.controle--bloquant { background: var(--danger-clair); color: var(--danger); }
.pastille--danger { background: var(--danger-clair); color: var(--danger); }
.danger { color: var(--danger); }
.recette { font-size: 20px; margin: 0 0 6px; }
.formulaire-depart .champ { max-width: 640px; margin-bottom: 10px; }
@media (max-width: 720px) { .jalons { grid-template-columns: 1fr 1fr; } }
/* Bons d'enlèvement */
.saisie-bon { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.35fr); gap: 18px; align-items: start; margin-bottom: 18px; }
.apercu-bon { position: sticky; top: 12px; }
.apercu-bon__image img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--bordure); }
.apercu-bon__image embed { width: 100%; height: 70vh; border: 1px solid var(--bordure); border-radius: 6px; }
.saisie-bon .formulaire { display: grid; gap: 14px; }
.fiche-bon { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 0; font-size: 15px; }
.fiche-bon dt { color: var(--discret); }
.etat-bon { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #eef1f2; color: var(--discret); }
.etat-bon--EN_ATTENTE { background: var(--alerte-clair); color: var(--alerte); }
.etat-bon--EN_VOYAGE { background: var(--marque-clair); color: var(--marque); }
.etat-bon--UTILISE { background: var(--succes-clair); color: var(--succes); }
.etat-bon--EXPIRE, .etat-bon--ANNULE { background: var(--danger-clair); color: var(--danger); }
@media (max-width: 900px) { .saisie-bon { grid-template-columns: 1fr; } .apercu-bon { position: static; } }
.resume-bon { margin-bottom: 16px; }

/* Bon lu sur la photo : champs pré-remplis, à vérifier */
.lecture-bon { margin-top: 10px; font-size: .9rem; }
.champ--lu input, .champ--lu select { border-color: var(--alerte); background: var(--alerte-clair); }
.champ__lu { display: block; margin-top: 4px; font-size: .8rem; font-weight: 600; color: var(--alerte); }
.conseils-photo { margin: 4px 0 12px; font-size: .85rem; color: var(--discret); }
.conseils-photo summary { cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.conseils-photo ul { margin: 8px 0 0; padding-left: 20px; }
.conseils-photo li { margin-bottom: 4px; }

/* Bons jaunes */
.etat-jaune { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #eef1f2; color: var(--discret); }
.etat-jaune--A_REMETTRE, .etat-jaune--ATTENDU { background: var(--alerte-clair); color: var(--alerte); }
.etat-jaune--RETARD { background: var(--danger-clair); color: var(--danger); }
.etat-jaune--RETOURNE { background: var(--succes-clair); color: var(--succes); }
.ligne--retard td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.jaunes-photo { margin-bottom: 16px; }
.jaunes-photo h2 { margin-top: 0; }
.jaunes-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.jaunes-actions fieldset { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bon-jaune { margin-top: 16px; } .bon-jaune h2 { display: flex; align-items: center; gap: 8px; margin-top: 0; } .bon-jaune .actions { align-items: flex-end; flex-wrap: wrap; }

/* Frais de route */
.frais { margin-top: 16px; }
.frais__titre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.frais__titre h2 { margin: 0; }
.tableau-frais td.nombre, .tableau-frais th.nombre, .nombre { text-align: right; white-space: nowrap; }
.tableau-frais tfoot th { border-top: 2px solid var(--bordure); }
.pieces { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.piece { padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.piece--annulee { opacity: .65; text-decoration: line-through; }
.piece--annulee .pastille { text-decoration: none; }
.piece--nouvelle { border-color: var(--succes); background: var(--succes-clair); }
.annuler-piece summary { cursor: pointer; color: var(--discret); font-size: 13px; }
.annuler-piece form { margin-top: 6px; }
.lignes-rubriques { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.axes-grille { margin-bottom: 16px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .axes-grille p { margin: 0; flex: 1 1 320px; }

/* Pièces du salarié */
.pieces-a-charger [data-lecture-etats] .message { margin: 4px 0; }
.pieces-salarie { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.piece-salarie { margin: 0; padding: 10px; }
.piece-salarie img { display: block; width: 100%; height: 130px; object-fit: contain; background: #fff; border-radius: 6px; }
.piece-salarie figcaption { margin-top: 6px; font-size: .9rem; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
details.pieces-a-charger { margin-bottom: 16px; }
details.pieces-a-charger > summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
details.pieces-a-charger[open] > summary { margin-bottom: 8px; }
.pieces-a-charger__champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 18px; }
.tuile--alerte { border-color: var(--alerte); }
.tuile--danger { border-color: var(--danger, #c0392b); }
.message--warning { background: var(--alerte-clair); color: var(--alerte); }

/* Clôture du voyage */
.controle-cloture { list-style: none; padding: 0; margin: 8px 0 12px; display: grid; gap: 6px; }
.controle-cloture__point { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.controle-cloture__point--ok { color: var(--succes); }
.controle-cloture__point--ok strong, .controle-cloture__point--sans_objet { color: var(--texte, inherit); }
.controle-cloture__point--alerte { color: var(--alerte); }
.controle-cloture__point--bloquant { color: var(--danger); }
.controle-cloture__point--sans_objet { opacity: .7; }

/* Zones repliables : une petite flèche, comme dans le menu, indique si la zone est ouverte ou fermée */
details:not(.menu__groupe):not(.menu-deroulant) > summary { list-style: none; cursor: pointer; }
details:not(.menu__groupe):not(.menu-deroulant) > summary::-webkit-details-marker { display: none; }
details:not(.menu__groupe):not(.menu-deroulant) > summary::after {
  content: ""; display: inline-block; flex: none; width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px;
  background: currentColor; opacity: .75; transform: rotate(-90deg); transition: transform .15s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
details[open]:not(.menu__groupe):not(.menu-deroulant) > summary::after { transform: none; }
details.pieces-a-charger:not(.menu__groupe):not(.menu-deroulant) > summary::after { margin-left: auto; width: 20px; height: 20px; }
details.pieces-a-charger > summary:hover { color: var(--marque); }

/* Factures clients : originaux à joindre */
.liste-originaux { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.liste-originaux li { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.grille-deux { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0 18px; }
.grille-deux h2 { font-size: 16px; }
.ligne--choisie td { background: var(--alerte-clair); }
.disponibilite { margin-bottom: 18px; }
.barre-dispo { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: #eef1f2; margin: 6px 0 10px; }
.barre-dispo__part { display: block; height: 100%; }
.barre-dispo--VOYAGE { background: var(--succes); }
.barre-dispo--ATTENTE_JAUNE { background: #e9b949; }
.barre-dispo--ATTENTE_BON { background: #d9822b; }
.barre-dispo--ATTENTE_DEPART { background: #6c9bd2; }
.barre-dispo--IMMOBILISE { background: var(--danger); }
.barre-dispo--LIBRE { background: #c9d0d4; }
.legende-dispo { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; padding: 0; margin: 0 0 10px; font-size: 14px; }
.pastille-couleur { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.formulaire-inline { display: inline-flex; gap: 6px; align-items: center; }
.schema-pneus { display: inline-flex; flex-direction: column; gap: 14px; padding: 14px 22px; margin: 4px 0 14px; border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--carte); }
.schema-pneus__avant { text-align: center; font-size: 12px; color: var(--discret); text-transform: uppercase; letter-spacing: .05em; }
.schema-pneus__essieu { display: flex; align-items: center; justify-content: center; gap: 4px; }
.schema-pneus__axe { min-width: 90px; text-align: center; font-size: 12px; color: var(--discret); border-top: 3px solid #c9d0d4; padding-top: 2px; margin: 0 6px; }
.pneu-place { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 34px; border: 2px dashed #c9d0d4; border-radius: 6px; font-size: 11px; color: var(--discret); text-decoration: none; }
a.pneu-place:hover { border-color: var(--marque); color: var(--marque); }
.pneu-place--monte { border: 2px solid #3b4a54; background: #3b4a54; color: #fff; font-weight: 600; }
a.pneu-place--monte:hover { background: var(--marque-fonce); border-color: var(--marque-fonce); color: #fff; }
.pneu-place--vieux { background: var(--danger); border-color: var(--danger); }
.pneu-place--cale { visibility: hidden; }

/* Voyages à facturer : 6 colonnes regroupées, sans défilement ; empilées sur téléphone */
.formulaire--large { max-width: 1120px; }
.tableau-a-facturer th, .tableau-a-facturer td { padding: 10px 12px; }
.tableau-a-facturer td { vertical-align: top; white-space: normal; }
.tableau-a-facturer td.nombre { white-space: nowrap; }
.tableau-a-facturer td .discret { font-size: .85em; }
@media (max-width: 720px) {
  .tableau-a-facturer, .tableau-a-facturer tbody, .tableau-a-facturer tfoot { display: block; width: 100%; }
  .tableau-a-facturer thead { display: none; }
  .tableau-a-facturer tbody tr { display: block; padding: .6rem 12px; border-bottom: 1px solid var(--bordure); }
  .tableau-a-facturer tbody td, .tableau-a-facturer tbody td.nombre { display: block; border: 0; padding: .15rem 0; text-align: left; white-space: normal; }
  .tableau-a-facturer tbody td[data-libelle]::before { content: attr(data-libelle); display: block; color: var(--discret); font-size: .8em; }
  .tableau-a-facturer tfoot tr { display: flex; justify-content: space-between; gap: 8px; }
  .tableau-a-facturer tfoot th { white-space: normal; }
  .tableau-a-facturer tfoot th:empty { display: none; }
}

/* Paiement : manquant retenu, saisi dans le tableau des factures */
.champ-montant-court { width: 8.5rem; text-align: right; }
.sans-coupure { white-space: nowrap; }
.champ--grise { opacity: .55; }
/* Registre des pièces : petite correction de date repliée sous la date */
.corriger-date summary { font-size: 12px; color: var(--discret); cursor: pointer; }
.corriger-date form { display: grid; gap: 6px; margin-top: 6px; min-width: 12rem; }
/* Dépenses · vue d'ensemble */
.filtres--periode { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin-bottom: 16px; }
.raccourcis { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.raccourcis .pastille { text-decoration: none; }
.pastille--active { background: var(--marque); color: #fff; }
.evolution { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 14px 18px; margin: 18px 0; }
.evolution h2 { margin-top: 0; }
.evolution__legende { font-size: 13px; color: var(--discret); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.barre-cle { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.barre-cle--depense, .barre--depense { background: var(--accent); }
.barre-cle--encaisse, .barre--encaisse { background: var(--marque); }
.evolution__ligne { display: grid; grid-template-columns: 6.5rem 1fr; gap: 10px; align-items: center; padding: 4px 0; }
.evolution__libelle { font-size: 13px; color: var(--discret); }
.evolution__barres { display: grid; grid-template-columns: 1fr 7rem; gap: 2px 8px; align-items: center; }
.barre { height: 10px; border-radius: 3px; min-width: 2px; }
.evolution__valeur { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
/* Mois et année d'un salaire : deux listes côte à côte */
.champ:has(> select.choix-mois) { grid-template-columns: 1fr 1fr; column-gap: 8px; }
.champ:has(> select.choix-mois) > :not(select) { grid-column: 1 / -1; }
/* Menus de la bande de titre : à propos, nouveautés, mes droits */
.a-propos { max-width: 760px; }
.a-propos__marque { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.a-propos__marque .menu__sigle { width: 64px; height: 64px; font-size: 20px; border-radius: 14px; }
.a-propos__marque h1 { margin: 0 0 4px; }
.a-propos__marque p { margin: 0; }
.a-propos__infos { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0 0 16px; }
.a-propos__infos dt { color: var(--discret); }
.a-propos__infos dd { margin: 0; font-weight: 500; }
.nouveautes { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 900px; }
.nouveautes li { display: grid; grid-template-columns: 52px max-content 1fr; align-items: baseline; gap: 12px; padding: 12px 16px; }
.nouveautes p { margin: 0; }
.nouveautes__version { font-weight: 700; color: var(--marque); }
td.droit { text-align: center; }
.droit--oui { color: var(--succes); font-weight: 700; }
@media (max-width: 720px) {
  .nouveautes li { grid-template-columns: 1fr; gap: 4px; }
  .a-propos__infos { grid-template-columns: 1fr; gap: 2px; }
  .a-propos__infos dd { margin-bottom: 8px; }
}
.tableau-droits { table-layout: fixed; }
.tableau-droits th:first-child { width: 30%; }
.tableau-droits th:nth-child(n+2):nth-child(-n+5) { width: 11%; text-align: center; }
/* Cloche des alertes */
.haut__cloche { position: relative; }
.haut__pastille { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--marque); }
.haut__pastille--grave { background: var(--danger); }
.haut__liste--alertes { min-width: 340px; max-width: 380px; max-height: 70vh; overflow-y: auto; }
.alerte-ligne { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 6px; color: inherit; text-decoration: none; font-size: 14px; line-height: 1.35; }
.alerte-ligne:hover { background: var(--marque-clair); }
.alerte-point { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; }
.alerte-point--danger { background: var(--danger); }
.alerte-point--alerte { background: var(--accent); }
.alertes-liste { padding: 6px; display: grid; max-width: 900px; }
.alertes-liste .alerte-ligne { align-items: center; }
.alertes-liste .alerte-point { margin-top: 0; }
.alerte-fleche { margin-left: auto; transform: rotate(180deg); color: var(--discret); flex: none; }
@media (max-width: 720px) { .haut__liste--alertes { position: fixed; left: 8px; right: 8px; top: 62px; min-width: 0; max-width: none; } }
.photos-sorte { font-size: 15px; margin: 14px 0 8px; color: var(--marque-fonce); }
/* Tableau de bord : santé de la société */
.sante__titre { margin: 8px 0 12px; }
.tuile--chiffre .tuile__valeur { font-size: 22px; }
.tuile__compare { font-size: 12px; color: var(--discret); }
.sante__graphique { margin: 14px 0 22px; }
.sante__entete { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.sante__entete h3 { margin: 0; font-size: 15px; color: var(--marque-fonce); }
.legende { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; font-size: 13px; color: var(--discret); }
.legende li { display: flex; align-items: center; gap: 6px; }
.legende__marque { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.sante__svg { width: 100%; height: auto; display: block; margin-top: 10px; }
.sante__grille { stroke: var(--bordure); stroke-width: 1; }
.sante__base { stroke: #9aa7ad; stroke-width: 1; }
.sante__axe { font-size: 11px; fill: var(--discret); }
.sante__barre:hover { opacity: 0.8; }
.sante__chiffres { margin-top: 10px; }
.sante__chiffres summary { font-size: 14px; color: var(--marque); }
.sante__defile { overflow-x: auto; }
@media (max-width: 720px) { .sante__svg { min-width: 560px; } }
.pastille--succes { background: var(--succes-clair); color: var(--succes); }
.trimestre-cnss { margin-bottom: 14px; }
.trimestre-cnss .actions { margin-top: 10px; }
.tableau-serre th, .tableau-serre td { padding-left: 8px; padding-right: 8px; }
/* Accueil : tuiles regroupées par thème */
.groupe-tuiles { margin-bottom: 6px; }
.groupe-tuiles__titre { display: flex; align-items: center; gap: 8px; margin: 14px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--marque-fonce); }
.groupe-tuiles__titre .icone { color: var(--accent); }
.modules-repliables { margin-top: 24px; }
.modules-repliables > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.modules-repliables > summary h2 { display: inline; margin: 0; font-size: 18px; }
.modules-repliables[open] > summary { margin-bottom: 12px; }
.groupe-tuiles .tuiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* Grille de prix d'un client : tableau des trajets sur toute la largeur du cadre */
.pleine-largeur { grid-column: 1 / -1; }
.tableau-saisie { width: 100%; }
.tableau-saisie td { padding: 6px 8px; }
.tableau-saisie input { width: 100%; min-width: 0; }
.tableau-saisie td.nombre input { text-align: right; }
.tableau-saisie .erreur { display: block; color: var(--danger, #b42318); font-size: 13px; white-space: normal; }
/* Champs regroupés dans une zone repliable d'un fieldset (ex. : changer le trajet d'un voyage) */
.grille-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 18px; margin-top: 12px; }
/* Menu Transport : intertitre d'une activité (Hydrocarbures, Marchandises) */
/* Intertitres des menus (demande 113) : plus visibles, en couleur d'accent, avec un filet */
.menu__intertitre { display: flex; align-items: center; gap: 8px; margin: 12px 2px 4px; padding: 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #f2b35e; }
.menu__intertitre::after { content: ""; flex: 1; height: 1px; background: rgba(242, 179, 94, 0.35); }
/* Choix de l'unité d'une grille de client (litre / tonne) */
.choix-unite { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.bouton--choisi { background: var(--marque); color: #fff; border-color: var(--marque); }
/* Devis (demande 106) : un bloc par trajet */
.trajet-devis { border-top: 1px solid var(--trait, #dbe3e6); padding-top: 10px; }
.trajet-devis:first-of-type { border-top: 0; padding-top: 0; }
.trajet-devis__titre { font-weight: 600; margin: 0; }
.trajet-devis .formulaire-ligne { margin: 8px 0 4px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
/* Guide d'utilisation (demande 110) */
.guide-sommaire__chapitre { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: inherit; }
.guide-sommaire__chapitre:hover { border-color: var(--marque); }
.guide { max-width: 900px; line-height: 1.6; }
.guide h2 { margin-top: 26px; scroll-margin-top: 80px; }
.guide h2:first-child { margin-top: 0; }
.guide h2:target { color: var(--accent); }
.guide li { margin-bottom: 6px; }
.guide-suite { display: flex; justify-content: space-between; gap: 12px; max-width: 900px; margin: 16px 0; }
.guide-table ol { margin: 8px 0 0; columns: 2; }
.guide__titre-chapitre { font-size: 22px; margin: 0 0 12px; }
@media print {
  .menu, .menu-voile, .haut, .retour, .actions, .guide-suite, .messages { display: none !important; }
  body, main { background: #fff !important; }
  .guide, .carte { box-shadow: none !important; border: 0 !important; max-width: none; }
  .guide--chapitre { break-before: page; }
  .guide a { color: inherit; text-decoration: none; }
}
.guide__capture { margin: 14px 0 18px; }
.guide__capture img { display: block; max-width: 100%; height: auto; border: 1px solid #d9e2e5; border-radius: 8px; box-shadow: 0 2px 8px rgba(7, 46, 57, .08); }
.guide__capture figcaption { font-size: 13px; color: #5f7177; margin-top: 6px; }
@media print { .guide__capture { break-inside: avoid; } .guide__capture img { box-shadow: none; } }
/* Administration (demande 116) */
.bouton-lien { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: underline; }
.tableau-droits { table-layout: fixed; min-width: 960px; }
.tableau-droits th:first-child { width: 22%; }
.tableau-droits th:last-child { width: 9%; }
.tableau-droits th:not(:first-child) { white-space: nowrap; text-align: center; font-size: 10.5px; letter-spacing: 0.02em; }
.ligne--inactive td { opacity: 0.55; }
.mot-de-passe-provisoire code { font-size: 16px; font-weight: 700; padding: 2px 8px; background: #fff; border-radius: 4px; letter-spacing: 0.04em; }
.tableau-droits td.droit { text-align: center; font-size: 13px; }
.droit--COMPLET { color: var(--succes); font-weight: 700; }
.droit--LECTURE { color: var(--marque); }
.droit--PARTIEL { color: var(--alerte); }
.droit--AUCUN { color: #9aa9ae; }
.recherche--journal { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.recherche--journal select, .recherche--journal input[type="date"] { max-width: 220px; }
.journal__changements { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.pagination { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 16px 0; }

/* ---- Espace associés (demande 118) ------------------------------------------ */
.associes__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.associes__periode select { min-width: 200px; }
.associes__titre { margin: 26px 0 12px; font-size: 18px; color: var(--marque-fonce); }
.associes__note { margin: -8px 0 14px; font-size: 13.5px; }
.associes__tableau { margin: 12px 0 8px; }
.associes__risques ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.associes__risques li { line-height: 1.5; }
.associes__aucun { display: flex; gap: 8px; align-items: center; color: var(--succes); }
.variation { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; background: #eef1f2; color: var(--discret); }
.variation--bon { background: var(--succes-clair); color: var(--succes); }
.variation--mauvais { background: var(--danger-clair); color: var(--danger); }
.ligne--danger td { background: var(--danger-clair); }
@media (max-width: 640px) {
  .associes__actions, .associes__periode, .associes__periode select { width: 100%; }
  .associes__actions .bouton { justify-content: center; width: 100%; }
}
.tableau-droits td:first-child { white-space: normal; }

/* ---- Double vérification (demande 120) -------------------------------------- */
.connexion__carte--large { width: min(560px, 100%); }
.double-verification { max-width: 720px; }
.double-verification__etapes { padding-left: 20px; display: grid; gap: 12px; }
.double-verification__qr { margin: 10px 0 6px; }
.double-verification__qr svg { width: 200px; height: 200px; background: #fff; border: 1px solid var(--bordure); border-radius: 8px; }
.double-verification__cle { font-size: 14px; letter-spacing: 0.5px; word-break: break-all; }
.double-verification__confirmer, .double-verification__action { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0; }
.double-verification__confirmer label, .double-verification__action label { flex-basis: 100%; font-weight: 600; }
.champ-code { max-width: 180px; font-size: 20px; letter-spacing: 3px; text-align: center; }
.double-verification__etat { display: flex; align-items: center; gap: 8px; }
.double-verification__etat--active { color: var(--succes); }
.double-verification__aide { margin-top: 14px; font-size: 13px; }
.codes-secours { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.codes-secours code { display: block; padding: 8px 10px; border: 1px dashed var(--bordure); border-radius: 8px; font-size: 16px; text-align: center; letter-spacing: 1px; }
@media print { .codes-secours code { border-color: #000; } }
.tableau-lecture td { vertical-align: top; }
.tableau-lecture__aide { font-size: 12.5px; color: var(--discret); white-space: normal; }
.tableau-lecture td:first-child { white-space: normal; min-width: 240px; }
.tableau-lecture__valeur { font-weight: 700; }
.tableau-lecture__moins td:first-child > a, .tableau-lecture__moins td:first-child { color: inherit; }
.tableau-lecture__sous-total td { background: var(--marque-clair); font-weight: 600; }
.tableau-lecture__total td { background: var(--marque-clair); border-top: 2px solid var(--marque); font-weight: 700; font-size: 15px; }
.tableau-lecture__total.tableau-lecture__negatif td { background: var(--danger-clair); border-top-color: var(--danger); }
.associes__argent { margin-top: 14px; }
.associes__familles { margin-top: 14px; }
.associes__familles summary { cursor: pointer; font-weight: 600; color: var(--marque-fonce); }
.associes__familles table { margin-top: 10px; width: 100%; }
.tableau-lecture__aide { font-weight: 400; font-size: 12.5px; }