/* Tragga : feuille de style unique de l'appli (téléphone) et de l'espace web (bureau).
   Thème sombre par défaut (palette Velkora), thème clair au choix et toujours à l'impression.
   La couleur ne sert qu'au sens Pro / Privé, toujours doublée du texte PRO / PRIVÉ. */

/* Inter 4.1 (Rasmus Andersson, licence SIL OFL), auto-hébergée : aucun appel à un tiers. Vérifiée le 04/10/2026,
   SHA-256 693b77d4…429a8e3, identique sur github.com/rsms/inter et rsms.me (voir docs/analyse-securite-tiers.md). */
@font-face { font-family: Inter; src: url("../polices/inter/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --fond: #0a0d14; --fond-doux: #121824; --surface: #151b28; --encre: #e6ebf3; --texte: #b9c2d0; --discret: #8a96aa; --filet: #232b3a;
  --pro: #6b93e0; --pro-pale: rgba(107, 147, 224, 0.16); --prive: #e8645e; --prive-pale: rgba(232, 100, 94, 0.15);
  --ok: #4fbf85; --ok-pale: rgba(79, 191, 133, 0.14); --alerte: #e6a23c; --alerte-pale: rgba(230, 162, 60, 0.14);
  --bouton-fond: #e6ebf3; --bouton-texte: #0a0d14; --voile: rgba(0, 0, 0, 0.62); --violet: #8b6cf5; --champ: #737f95;
  /* Mise en page validée le 21/10/2026 : fond de page, blocs posés dessus, en-têtes de tableau, survol, filet léger entre les lignes. */
  --page: #0a0d14; --bloc: #121824; --tete: #171e2c; --survol: #1a2232; --filet-doux: #1f2737;
  --rayon: 6px;
  --police: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}
:root[data-theme="clair"] {
  color-scheme: light;
  --fond: #fff; --fond-doux: #f3f5f8; --surface: #fff; --encre: #0a0d14; --texte: #3c4556; --discret: #646d7f; --filet: #dde1e8;
  --pro: #2b57a6; --pro-pale: #e9eff9; --prive: #b9342c; --prive-pale: #f9eceb;
  --ok: #1f6b45; --ok-pale: #e6f2eb; --alerte: #9a5b00; --alerte-pale: #fdf4e3;
  --bouton-fond: #0a0d14; --bouton-texte: #fff; --voile: rgba(10, 13, 20, 0.42); --violet: #3a1c91; --champ: #8a93a3;
  --page: #eef0f3; --bloc: #fff; --tete: #f6f7f9; --survol: #f3f5f8; --filet-doux: #eaedf1;
}
@media print {
  :root, :root[data-theme="clair"] {
    color-scheme: light;
    --fond: #fff; --fond-doux: #f3f5f8; --surface: #fff; --encre: #0a0d14; --texte: #3c4556; --discret: #646d7f; --filet: #dde1e8;
    --pro: #2b57a6; --pro-pale: #e9eff9; --prive: #b9342c; --prive-pale: #f9eceb; --ok: #1f6b45; --ok-pale: #e6f2eb; --alerte: #9a5b00; --alerte-pale: #fdf4e3;
    --page: #fff; --bloc: #fff; --tete: #f6f7f9; --survol: #fff; --filet-doux: #eaedf1;
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
/* Zones sûres (barre d'état, encoche, barre de navigation) : la plus grande des deux mesures, celle de la WebView (env) et celle que Capacitor
   injecte (--safe-area-inset-*, retours de Vincent du 15/10 sur Android 16). Zéro dans un navigateur d'ordinateur. */
:root {
  --zone-haut: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --zone-bas: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  --zone-gauche: max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px));
  --zone-droite: max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px));
}
/* Tout écran commence sous la barre d'état et finit au-dessus de la barre de navigation ; la barre d'onglets du conducteur, collée en bas,
   garde elle-même la zone du bas. */
#app { padding: var(--zone-haut) var(--zone-droite) var(--zone-bas) var(--zone-gauche); }
#app:has(.tel-nav) { padding-bottom: 0; }
body { font-family: var(--police); color: var(--texte); background: var(--page); font-size: 15px; line-height: 1.45; }
h1, h2, h3 { color: var(--encre); letter-spacing: -0.01em; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.chiffre { font-variant-numeric: tabular-nums; }
.discret { color: var(--discret); }
.cache { display: none !important; }

.bandeau-demo { position: sticky; top: 0; z-index: 30; background: var(--fond-doux); border-bottom: 1px solid var(--filet); color: var(--texte); font-size: 12px; text-align: center; padding: 5px 12px; }
.bandeau-demo button { background: none; border: 0; color: var(--encre); font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; margin-left: 6px; }
.bandeau-version { position: sticky; top: 0; z-index: 31; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; background: var(--encre); color: var(--page); font-size: 13.5px; font-weight: 600; padding: 8px 16px; text-align: center; }
.bandeau-version button { background: var(--page); color: var(--encre); border: 0; border-radius: var(--rayon); font: inherit; padding: 5px 12px; cursor: pointer; }
.visuel-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1:focus { outline: none; }

/* Étiquettes de mode : couleur + texte, jamais la couleur seule. */
.mode { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.mode::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mode.pro { color: var(--pro); background: var(--pro-pale); }
.mode.prive { color: var(--prive); background: var(--prive-pale); }
.mode.grand { font-size: 13px; padding: 4px 11px; }

/* Étiquettes d'état : un ou deux mots, une forme et une couleur. Familles : ok (rien à faire), attente (quelqu'un
   d'autre doit agir, gris), action (le lecteur doit agir), bloquant (empêche la validation ou le calcul), info.
   L'orange ne sert qu'à ce qui demande d'agir ou bloque. Contraste AA vérifié dans les deux thèmes. */
.etiquette { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid transparent; border-radius: 4px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; vertical-align: 0.1em; }
.etiquette::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.etiquette.ok { color: var(--ok); background: var(--ok-pale); }
.etiquette.ok::before { width: 4px; height: 8px; border-radius: 0; background: none; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.etiquette.attente { color: var(--texte); background: var(--tete); border-color: var(--filet); }
.etiquette.attente::before { background: none; border: 1.5px solid currentColor; }
.etiquette.action { color: var(--alerte); background: var(--alerte-pale); }
.etiquette.bloquant { color: var(--alerte); background: var(--alerte-pale); border-color: currentColor; font-weight: 700; }
.etiquette.bloquant::before { border-radius: 1px; }
.etiquette.info { color: var(--texte); border-color: var(--filet); font-weight: 500; }
.etiquette.info::before { content: none; }
.etiquette + .etiquette { margin-left: 6px; }
@media print { .etiquette { background: none; border-color: currentColor; } }

/* Plaque : un objet physique, donc les mêmes couleurs dans les deux thèmes. */
.plaque { display: inline-block; padding: 0 5px; border: 1px solid #15171c; border-radius: 3px; background: #ecc94b; color: #15171c; font-size: 0.85em; font-weight: 700; letter-spacing: 0.04em; line-height: 1.45; white-space: nowrap; font-variant-numeric: tabular-nums; vertical-align: 0.05em; }

/* ---------- Boutons et champs ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--bouton-fond); border-radius: var(--rayon); background: var(--bouton-fond); color: var(--bouton-texte); font-size: 14px; font-weight: 600; text-decoration: none; }
.bouton.secondaire { background: var(--bloc); color: var(--encre); border-color: var(--filet); }
.bouton.secondaire:hover { border-color: var(--encre); }
.bouton:disabled { opacity: 0.35; cursor: not-allowed; }
.bouton.plein { width: 100%; min-height: 44px; }
.bouton.petit { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.bouton.danger { border-color: var(--prive); color: var(--prive); }
.bouton:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.lien { background: none; border: 0; color: var(--encre); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.champ { min-height: 40px; padding: 7px 11px; border: 1px solid var(--champ); border-radius: var(--rayon); background: var(--bloc); color: var(--encre); font-size: 14px; }
.champ:focus { outline: 2px solid var(--encre); outline-offset: -1px; border-color: transparent; }
.barre-outils { display: flex; flex-wrap: wrap; gap: 8px; }
.actions-ligne { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.note { font-size: 13px; color: var(--discret); margin-top: 14px; }
.mention { font-size: 12.5px; color: var(--discret); margin-top: 10px; }
.chargement { padding: 40px 20px; text-align: center; color: var(--discret); }

/* Logo et symbole : couleurs du thème. */
.logo-texte { fill: var(--encre); }
.logo-bleu { fill: var(--pro); } .logo-rouge { fill: var(--prive); }
.logo-queue-bleue { fill: none; stroke: var(--pro); } .logo-queue-rouge { fill: none; stroke: var(--prive); }

/* ---------- Mise en page validée le 21/10/2026 (docs/maquettes/lisibilite) ----------
   1. une section = un bloc posé sur le fond gris, filet épais en tête (orange pour « À traiter »), titre + compteur + actions sur une ligne ;
   2. les tableaux gardent leurs colonnes sur ordinateur et deviennent des fiches empilées sous 720 px ;
   3. les explications sont repliées (details.aide) ou tiennent sur une ligne. */
.section { margin: 0 0 24px; background: var(--bloc); border: 1px solid var(--filet); border-top: 3px solid var(--encre); min-width: 0; }
.section.a-traiter { border-top-color: var(--alerte); }
.section-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 20px; border-bottom: 1px solid var(--filet); }
.section-tete h2 { font-size: 17px; line-height: 1.25; }
.section-tete h3 { font-size: 15px; line-height: 1.25; }
.section-corps + .section-tete, .tableau-defile + .section-tete { border-top: 1px solid var(--filet); }
.compteur { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--encre); color: var(--bloc); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.a-traiter .compteur { background: var(--alerte); color: var(--bloc); }
.section-tete .precision { font-size: 13px; color: var(--discret); }
.section-tete .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 0 auto; }
.section-corps { padding: 16px 20px; }
.section-corps > :first-child { margin-top: 0; }
.section-pied { padding: 10px 20px 12px; border-top: 1px solid var(--filet-doux); font-size: 13px; color: var(--discret); }
.section-pied > .mention:first-child { margin-top: 0; }
.section > .mention, .section > .erreur, .section > .erreur-feuille { margin: 12px 20px; }
.section > .barre-outils { padding: 12px 20px; }
.section-titre { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--discret); margin: 22px 0 6px; }

/* Aide repliée : une ligne, dépliée à la demande. */
.aide { font-size: 13px; color: var(--discret); }
.aide + .aide { margin-top: 2px; }
.aide summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; font-weight: 600; color: var(--discret); list-style: none; }
.aide summary::-webkit-details-marker { display: none; }
.aide summary::before { content: "+"; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1px solid var(--filet); border-radius: 50%; font-size: 13px; line-height: 1; }
.aide[open] summary::before { content: "−"; }
.aide > p, .aide > dl, .aide > div { margin: 6px 0 6px 24px; max-width: 760px; }
.legende { display: grid; gap: 6px; }
.legende div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; align-items: baseline; }

/* Résumé chiffré du mois. */
.chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chiffres > div { min-width: 0; padding: 2px 18px; border-left: 1px solid var(--filet); }
.chiffres > div:first-child { padding-left: 0; border-left: 0; }
.chiffres .valeur { display: block; font-size: clamp(20px, 2.1vw, 26px); font-weight: 700; color: var(--encre); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.chiffres .valeur small { font-size: 15px; font-weight: 600; color: var(--discret); }
.chiffres .valeur .etiquette { font-size: 13px; letter-spacing: 0; white-space: normal; }
.chiffres .nom { display: block; font-size: 13px; color: var(--texte); }
.chiffres .note { display: block; margin: 0; font-size: 12.5px; color: var(--discret); }

/* Barre d'avancement des carnets : une case par conducteur, dans l'ordre validé, à décider, en attente, incomplet. */
.avancement { display: flex; gap: 3px; margin: 8px 0 6px; max-width: 220px; }
.avancement i { flex: 1; height: 8px; border-radius: 1px; background: var(--filet); }
.avancement i.ok { background: var(--ok); }
.avancement i.action { background: var(--alerte); }
.avancement i.attente { background: var(--discret); opacity: 0.45; }
.avancement i.bloquant { background: none; border: 1.5px solid var(--alerte); }

/* À traiter : étiquette | qui et quoi | actions ; le détail long reste replié. */
.taches { list-style: none; }
.tache { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 6px 18px; align-items: start; padding: 14px 20px; border-bottom: 1px solid var(--filet-doux); }
.tache:last-child { border-bottom: 0; }
.tache > .etiquette { justify-self: start; }
.tache .qui { color: var(--encre); font-weight: 600; }
.tache .qui .vehicule { font-weight: 400; color: var(--discret); }
.tache .resume { display: block; color: var(--texte); font-size: 14px; margin-top: 2px; }
.tache .aide { margin-top: 4px; }
.tache .aide summary { min-height: 28px; }
.tache .message-decision { display: block; margin-top: 8px; font-size: 13px; color: var(--discret); }
.tache .message-decision input { display: block; width: 100%; max-width: 460px; margin-top: 4px; }
.tache .erreur { color: var(--alerte); font-weight: 600; font-size: 13px; margin-top: 4px; }
.tache .barre-outils { justify-content: flex-end; }
.tache .formulaire { max-width: 520px; }
.texte-signalement { white-space: pre-wrap; margin: 6px 0 0; }

/* ---------- Tableaux : principes du portail Jactal (en-tête gris en petites capitales, survol, groupes, état, action au bout) ----------
   Une cellule = une donnée (ligne 2 éventuelle en gris). La colonne d'état (.groupe) est séparée des chiffres par un filet. */
.tableau-defile { overflow-x: auto; position: relative; }   /* relative : les textes pour lecteur d'écran (position absolue) restent dans la zone qui défile */
table.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th { padding: 9px 14px; background: var(--tete); border-bottom: 1px solid var(--filet); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--discret); white-space: nowrap; }
.tableau td { padding: 11px 14px; border-bottom: 1px solid var(--filet-doux); vertical-align: top; }
.tableau th:first-child, .tableau td:first-child { padding-left: 20px; }
.tableau th:last-child, .tableau td:last-child { padding-right: 20px; }
.tableau tbody tr:hover > td { background: var(--survol); }
.tableau .l1, .tableau .l2 { display: block; }
.tableau .l1 { color: var(--encre); }
.tableau .l1.discret { color: var(--discret); }
.tableau .l2 { margin-top: 2px; font-size: 12.5px; color: var(--discret); }
.tableau tbody th[scope="row"] { background: none; font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--encre); border-bottom-color: var(--filet-doux); }
.tableau .groupe { border-left: 1px solid var(--filet-doux); }
.tableau td.nombre, .tableau th.nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tableau td b { color: var(--encre); }
.tableau td.titre a, .tableau td.titre b { font-weight: 600; color: var(--encre); }
.tableau a { font-weight: 600; text-underline-offset: 3px; text-decoration-color: var(--discret); }
.tableau td.action { text-align: right; white-space: nowrap; vertical-align: middle; }
.tableau td.cellule-actions { text-align: right; min-width: 210px; }
.tableau td.cellule-actions select { border: 1px solid var(--champ); border-radius: var(--rayon); padding: 6px 8px; background: var(--bloc); color: inherit; max-width: 200px; }
.tableau td.cellule-actions select, .tableau td.cellule-actions .bouton { margin: 3px 0 3px 6px; vertical-align: middle; }
.tableau th[scope="rowgroup"] { padding: 16px 20px 6px; background: var(--bloc); border-bottom: 1px solid var(--filet); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--encre); }
.tableau th[scope="rowgroup"] span { margin-left: 10px; font-weight: 500; color: var(--discret); font-variant-numeric: tabular-nums; }
.tableau tfoot th, .tableau tfoot td { padding-top: 12px; padding-bottom: 12px; background: var(--tete); border-top: 2px solid var(--filet); border-bottom: 0; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--encre); }
.tableau tr[hidden] { display: none !important; }
.ouvrir { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; border: 1px solid var(--filet); border-radius: var(--rayon); font-size: 13px; font-weight: 600; text-decoration: none; color: var(--encre); background: var(--bloc); }
.ouvrir:hover { border-color: var(--encre); }
.ouvrir::after { content: "›"; font-size: 16px; line-height: 1; }
.tableau th[aria-sort] { padding-top: 2px; padding-bottom: 2px; }
.tableau th .tri { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.tableau th.nombre .tri { justify-content: flex-end; width: 100%; }
.tableau th .tri:hover, .tableau th[aria-sort="ascending"] .tri, .tableau th[aria-sort="descending"] .tri { color: var(--encre); }
.tableau th .tri-sens::after { content: "↕"; font-size: 11px; opacity: 0.45; }
.tableau th[aria-sort="ascending"] .tri-sens::after { content: "↑"; opacity: 1; }
.tableau th[aria-sort="descending"] .tri-sens::after { content: "↓"; opacity: 1; }
.tableau .bouton.compact { min-height: 36px; padding: 0 12px; font-size: 13px; }
/* Badges de la plaque rattachés à un véhicule : un numéro par ligne avec « Retirer », puis le champ pour en rattacher un. */
.tableau td.cellule-badges { min-width: 200px; }
.badges-vehicule { list-style: none; margin: 0 0 6px; padding: 0; }
.badges-vehicule li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.badges-vehicule .chiffre { white-space: nowrap; }
.badges-vehicule .cotes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ajout-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.ajout-badge select { border: 1px solid var(--champ); border-radius: var(--rayon); padding: 6px 8px; background: var(--bloc); color: inherit; max-width: 100%; }

/* Barre d'outils au-dessus d'un tableau (composants/filtres.js) : recherche, filtres, compte, export, sur une ligne. */
.outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 20px; border-bottom: 1px solid var(--filet); }
.outils .champ.recherche { flex: 1 1 220px; max-width: 320px; }
.outils .champ { max-width: 100%; }
.outils .compte { font-size: 13px; color: var(--discret); font-variant-numeric: tabular-nums; }
.outils .pousser { margin-left: auto; }
.filtres-avis { flex: 1 1 100%; margin: 0; font-size: 12.5px; color: var(--discret); }
.outils .erreur { flex: 1 1 100%; color: var(--alerte); font-weight: 600; font-size: 13px; margin: 0; }
.filtres-vide { padding: 12px 20px; font-size: 14px; }
.segments { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--filet); border-radius: var(--rayon); overflow: hidden; }
.segments a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--discret); background: var(--bloc); }
.segments a + a { border-left: 1px solid var(--filet); }
.segments a[aria-current="page"] { background: var(--encre); color: var(--bloc); }
/* Onglets des écrans de configuration (commun.js, onglets) : forme du portail Jactal, soulignés, une section à la fois. La barre défile seule
   sur téléphone, la page ne déborde jamais ; l'onglet actif porte le trait épais et l'encre du thème. */
.onglets { display: flex; gap: 2px; max-width: 100%; margin: 0 0 20px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; box-shadow: inset 0 -1px 0 var(--filet); }
.onglets a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-bottom: 3px solid transparent; border-radius: var(--rayon) var(--rayon) 0 0; font-size: 14px; font-weight: 600; color: var(--discret); text-decoration: none; white-space: nowrap; }
.onglets a:hover { color: var(--encre); background: var(--survol); }
.onglets a[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--encre); }
.onglets a:focus-visible { outline-offset: -2px; }
.onglets .compteur { min-width: 22px; height: 20px; padding: 0 7px; font-size: 11.5px; }
.onglets a[aria-selected="false"] .compteur:not(.a-traiter) { background: var(--tete); color: var(--texte); box-shadow: inset 0 0 0 1px var(--filet); }
.onglets .compteur.a-traiter { background: var(--alerte); color: var(--bloc); }
@media print { .onglets, .outils, .tableau th .tri-sens, .section-tete .actions, .bouton, .ouvrir, .tableau td.action, .tableau td.cellule-actions { display: none; } }

/* ---------- Trajets : groupés par semaine (repliable) puis par jour ---------- */
.semaine { border-bottom: 1px solid var(--filet); }
.semaine:last-of-type { border-bottom: 0; }
.semaine > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 20px; cursor: pointer; list-style: none; }
.semaine > summary::-webkit-details-marker { display: none; }
.semaine > summary::before { content: "›"; display: inline-block; width: 12px; color: var(--discret); font-weight: 700; transition: transform 0.15s; }
.semaine[open] > summary::before { transform: rotate(90deg); }
.semaine > summary b { color: var(--encre); font-size: 15px; }
.semaine > summary span { font-size: 13px; color: var(--discret); font-variant-numeric: tabular-nums; }
.trajets td { vertical-align: middle; }
.trajets tr.ligne-trajet > td:first-child { box-shadow: inset 3px 0 0 var(--prive); }
.trajets tr.ligne-trajet.pro > td:first-child { box-shadow: inset 3px 0 0 var(--pro); }
.trajets .heures { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--encre); }
.trajets .heures small { display: block; font-size: 12px; color: var(--discret); }
.trajets .lieux a { font-weight: 600; color: var(--encre); text-decoration: none; }
.trajets .lieux a:hover { text-decoration: underline; text-underline-offset: 3px; }
.trajets .lieux .l2 { font-weight: 400; }
.trajets .km { font-weight: 600; color: var(--encre); }
.trajets .source { font-size: 13px; }
.trajets tr.jour > th { padding: 16px 20px 6px; }
.trajets tr.jour:hover > th { background: var(--bloc); }

/* Bandeau d'état du carnet : une ligne, l'étiquette et ce qui manque. */
.etat-carnet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 18px; padding: 12px 16px; background: var(--bloc); border: 1px solid var(--filet); border-left: 4px solid var(--discret); font-size: 14px; }
.etat-carnet.action, .etat-carnet.bloquant { border-left-color: var(--alerte); }
.etat-carnet.ok { border-left-color: var(--ok); }
.etat-carnet b, .etat-carnet strong { color: var(--encre); }
.etat-carnet > span { flex: 1 1 320px; min-width: 0; }

/* ---------- Fiche d'un trajet (employeur et conducteur) ---------- */
.resume-trajet { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 18px 20px; }
.resume-trajet .quand { font-size: 15px; color: var(--encre); font-weight: 600; }
.resume-trajet dl { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.resume-trajet dt { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--discret); }
.resume-trajet dd { font-size: 22px; font-weight: 700; color: var(--encre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.parcours { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.parcours.sans-carte { grid-template-columns: minmax(0, 1fr); }
.lieux-bloc { display: flex; flex-direction: column; border-right: 1px solid var(--filet); }
.parcours.sans-carte .lieux-bloc { border-right: 0; }
.lieu { padding: 18px 20px; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; }
.lieu + .lieu { border-top: 1px dashed var(--filet); }
.lieu .repere { grid-row: span 3; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 3px solid var(--pro); background: var(--bloc); }
.lieu.arrivee .repere { background: var(--pro); }
.lieu.prive .repere { border-color: var(--prive); }
.lieu.prive.arrivee .repere { background: var(--prive); }
.lieu .titre-lieu { display: flex; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--discret); }
.lieu .titre-lieu .heure { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--encre); font-variant-numeric: tabular-nums; }
.lieu .adresse { margin-top: 6px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--encre); overflow-wrap: anywhere; }
.lieu .adresse.discret { font-size: 15px; font-weight: 400; color: var(--discret); }
.lieu .localite { margin-top: 2px; font-size: 14px; color: var(--discret); }
/* Lieu proposé par l'appli (V36) : une mention discrète à côté du lieu, jamais un badge qui ferait preuve. */
.propose { font-size: 12px; font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--discret); white-space: nowrap; }
.lieu .adresse .propose { display: block; margin-top: 2px; }
.carte-bloc { padding: 16px 20px; min-width: 0; }
.carte-bloc > .mention { margin-top: 8px; }
.carte-bloc .encadre { margin-top: 0; }
/* Carte du départ et de l'arrivée (composants/carte.js, poserLieux) : fond OpenStreetMap hébergé par nous, deux points sans ligne. */
.carte { width: 100%; aspect-ratio: 340 / 190; min-height: 240px; border-radius: var(--rayon); overflow: hidden; background: var(--fond-doux); border: 1px solid var(--filet); }
.carte.cache { display: none; }
.carte .maplibregl-ctrl-attrib { font-size: 11px; }
/* Tracé d'un trajet Pro (dessin seul, sans fond de carte). */
.trace { width: 100%; height: auto; display: block; background: var(--fond-doux); border-radius: var(--rayon); }
.trace-ligne { fill: none; stroke: var(--pro); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.trace-depart { fill: var(--fond-doux); stroke: var(--pro); stroke-width: 2.5; }
.trace-arrivee { fill: var(--pro); }
.trace-etiquette { fill: var(--encre); font-size: 11.5px; font-weight: 600; }
.details-trajet { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.details-trajet dt, .details-trajet dd { padding: 12px 0; border-bottom: 1px solid var(--filet-doux); font-size: 14px; }
.details-trajet dt { padding-left: 20px; color: var(--discret); }
.details-trajet dd { padding-right: 20px; color: var(--encre); min-width: 0; }
.details-trajet dd small { display: block; font-size: 12.5px; color: var(--discret); }
.details-trajet dt:last-of-type, .details-trajet dd:last-of-type { border-bottom: 0; }
/* Historique en frise : chaque étape avec sa date, la dernière pleine. */
.historique { list-style: none; padding: 16px 20px 8px 36px; }
.historique li { position: relative; padding: 0 0 16px 18px; border-left: 2px solid var(--filet); font-size: 14px; color: var(--encre); }
.historique li:last-child { border-left-color: transparent; }
.historique li::before { content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bloc); border: 2px solid var(--discret); }
.historique li.dernier::before { background: var(--encre); border-color: var(--encre); }
.historique time { display: block; font-size: 12.5px; color: var(--discret); font-variant-numeric: tabular-nums; }
.historique .qui { color: var(--discret); }
.photo-releve { font-size: 14px; }
.photo-releve summary { display: inline-flex; align-items: center; min-height: 40px; cursor: pointer; font-weight: 600; color: var(--encre); text-underline-offset: 3px; text-decoration: underline; }
.photo-releve .photo-compteur { max-width: 420px; }
.photo-zone { margin: 8px 0; }
.photo-compteur { display: block; width: 100%; max-width: 560px; height: auto; border-radius: var(--rayon); border: 1px solid var(--filet); background: var(--fond-doux); }
.fiche dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.fiche dt, .fiche dd { padding: 11px 0; border-bottom: 1px solid var(--filet-doux); font-size: 14px; }
.fiche dt { color: var(--discret); }
.fiche dd { color: var(--encre); min-width: 0; }
.fiche dd small { display: block; color: var(--discret); font-size: 12.5px; }
.fiche dt:last-of-type, .fiche dd:last-of-type { border-bottom: 0; }
.encadre { padding: 12px 14px; border-radius: var(--rayon); background: var(--tete); font-size: 14px; margin-top: 14px; }
.encadre strong { color: var(--encre); }
.encadre p + p { margin-top: 6px; }
.encadre-ok strong { color: var(--ok); }
.encadre-erreur strong { color: var(--alerte); }
.confirmation { margin-top: 14px; padding: 12px; border-radius: var(--rayon); background: var(--alerte-pale); font-size: 14px; color: var(--encre); }
.confirmation .boutons { margin-top: 10px; }
.erreur { color: var(--alerte); font-weight: 600; font-size: 13px; }
.erreur-feuille { margin-top: 12px; color: var(--alerte); font-weight: 600; font-size: 14px; }
.erreur-champ { color: var(--alerte); font-weight: 600; font-size: 13px; margin-top: 4px; }

/* ---------- Accueil de la démo et choix des espaces ---------- */
.accueil { max-width: 880px; margin: 0 auto; padding: 56px 24px 64px; }
.accueil .logo { width: 180px; display: block; }
.accueil h1 { font-size: 30px; line-height: 1.15; margin: 36px 0 10px; max-width: 620px; }
.accueil > p { max-width: 620px; }
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.role { display: block; text-decoration: none; background: var(--bloc); border: 1px solid var(--filet); border-top: 3px solid var(--encre); padding: 20px; }
.role:hover { border-color: var(--encre); background: var(--survol); }
.role:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.role h2 { font-size: 17px; margin-bottom: 6px; }
.role p { font-size: 14px; }
.role .qui { display: block; margin-top: 16px; font-size: 13px; color: var(--discret); }
.role .titre { display: block; font-size: 17px; font-weight: 700; color: var(--encre); }
@media (max-width: 720px) { .roles { grid-template-columns: minmax(0, 1fr); } .accueil { padding: 32px 16px 48px; } .accueil h1 { font-size: 24px; } }

/* ---------- Appli conducteur (format téléphone) ---------- */
.tel { max-width: 430px; min-height: calc(100vh - 27px); margin: 0 auto; display: flex; flex-direction: column; background: var(--page); }
@media (min-width: 640px) { .tel { border-left: 1px solid var(--filet); border-right: 1px solid var(--filet); } }
.tel-entete { padding: 18px 16px 12px; display: flex; align-items: flex-start; gap: 12px; }
.tel-entete .retour { width: 44px; height: 44px; margin: -8px 0 0 -8px; color: var(--encre); border: 0; background: none; display: grid; place-items: center; border-radius: 50%; flex: none; }
.tel-entete .retour:focus-visible { outline: 2px solid var(--encre); }
.tel-entete h1 { font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.tel-entete .sous-titre { font-size: 13px; color: var(--discret); margin-top: 2px; }
.tel-entete .symbole { width: 30px; flex: none; margin-top: 4px; }
.tel-contenu { flex: 1; padding: 4px 10px 24px; min-width: 0; }
.tel-contenu > .note, .tel-contenu > p:not([class]) { margin-left: 6px; margin-right: 6px; }
.tel-contenu > .aide { margin: 0 6px 14px; }
.tel .section { margin-bottom: 14px; }
.tel .section-tete { padding: 12px 14px; }
.tel .section-corps { padding: 14px; }
.tel .section-pied { padding: 10px 14px 12px; }
.tel .section > .mention, .tel .section > .note { margin: 10px 14px; }
.tel-nav { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--filet); background: var(--bloc); padding-bottom: var(--zone-bas); }
.tel-nav a { text-align: center; padding: 10px 0 12px; font-size: 12px; font-weight: 600; color: var(--discret); text-decoration: none; }
.tel-nav a svg { display: block; margin: 0 auto 3px; }
.tel-nav a[aria-current="page"] { color: var(--encre); box-shadow: inset 0 3px 0 var(--encre); }
.tel .chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tel .chiffres > div { padding: 2px 10px; }
.tel .chiffres > div:first-child { padding-left: 0; }
.tel .chiffres .valeur { font-size: 18px; white-space: normal; }
.tel .chiffres .nom { font-size: 12px; }
.tel .mois { margin: 0 0 14px; width: 100%; }
.tel .mois b { flex: 1; justify-content: center; }
.tel .details-trajet { grid-template-columns: 112px minmax(0, 1fr); }
.tel .details-trajet dt { padding-left: 14px; }
.tel .details-trajet dd { padding-right: 14px; }
.tel .lieu { padding: 14px; }
.tel .lieu .adresse { font-size: 16px; }
.tel .carte-bloc { padding: 0 14px 14px; }
.tel .parcours { grid-template-columns: minmax(0, 1fr); }
.tel .lieux-bloc { border-right: 0; }
.tel .resume-trajet { padding: 14px; gap: 8px 20px; }
.tel .resume-trajet dd { font-size: 18px; }
.tel .historique { padding: 14px 14px 6px 28px; }
.tel .actions { padding: 0 6px; }

.etat-boitier { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 10px 14px; margin-bottom: 14px; background: var(--bloc); border: 1px solid var(--filet); }
.etat-boitier .point { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.etat-boitier small { display: block; margin-top: 2px; font-size: 12px; color: var(--discret); }
/* Rappels (À traiter) : une ligne par chose à faire, flèche au bout. */
.rappel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--filet-doux); text-decoration: none; color: var(--encre); font-weight: 600; font-size: 14px; }
.rappel:last-child { border-bottom: 0; }
.rappel:hover { background: var(--survol); }
.rappel.fin-de-mois { background: var(--alerte-pale); }
.rappel.fin-de-mois b { color: var(--encre); }
.liste-rappels { list-style: none; }
.liste-rappels li:last-child .rappel { border-bottom: 0; }
.rappel .designation { font-weight: 400; line-height: 1.5; }
.rappel .designation b { font-weight: 600; }

/* Trajets du conducteur : une ligne par trajet, jour par jour, semaine par semaine. */
.liste-trajets { list-style: none; }
.liste-trajets li + li .trajet { border-top: 1px solid var(--filet-doux); }
a.trajet { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; column-gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; }
a.trajet:hover { background: var(--survol); }
a.trajet .barre { border-radius: 2px; background: var(--prive); }
a.trajet.pro .barre { background: var(--pro); }
a.trajet .heures, a.trajet .titre, a.trajet .detail { display: block; }
a.trajet .heures { font-size: 12px; color: var(--discret); }
a.trajet .titre { color: var(--encre); font-weight: 600; font-size: 15px; margin: 1px 0; overflow-wrap: anywhere; }
a.trajet .detail { font-size: 13px; }
a.trajet .detail .etiquette { margin-top: 3px; }
a.trajet .km { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; color: var(--encre); font-weight: 600; font-size: 15px; white-space: nowrap; }
.jour-titre { font-size: 13px; font-weight: 700; color: var(--encre); padding: 14px 14px 4px; border-bottom: 1px solid var(--filet-doux); }
.jour-titre span { margin-left: 8px; font-weight: 500; color: var(--discret); font-variant-numeric: tabular-nums; }
.tel .semaine > summary { padding: 12px 14px; }

.liste-ecarts { list-style: none; }
.ecart { padding: 14px; border-bottom: 1px solid var(--filet-doux); }
.ecart:last-child { border-bottom: 0; }
.ecart-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ecart p { margin-top: 6px; font-size: 14px; }
.ecart p.note { margin-top: 6px; font-size: 13px; }
.ecart small { display: block; color: var(--discret); font-size: 12.5px; }
.ecart .bouton { margin-top: 12px; }
.actions { display: grid; gap: 10px; margin-top: 4px; margin-bottom: 14px; }
.prive-titre { font-size: 17px; color: var(--encre); font-weight: 700; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Avant de valider : une ligne par contrôle. */
.controles { list-style: none; }
.controles li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--filet-doux); font-size: 14px; }
.controles li:last-child { border-bottom: 0; }
.controles li small { display: block; color: var(--discret); font-size: 12.5px; }
.controles .ok { color: var(--ok); font-weight: 700; }
.controles .lien { display: inline-block; padding: 10px 0; }
.controles .ko { color: var(--alerte); font-weight: 700; }
.valide { color: var(--ok); font-weight: 600; }

/* Feuilles de saisie : fermées uniquement par leurs boutons (jamais par l'arrière-plan). */
.voile { position: fixed; inset: 0; padding-top: var(--zone-haut); background: var(--voile); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.feuille { width: 100%; max-width: 430px; background: var(--bloc); border: 1px solid var(--filet); border-top: 3px solid var(--encre); border-radius: 12px 12px 0 0; padding: 20px 20px calc(20px + var(--zone-bas)); max-height: calc(92vh - var(--zone-haut)); overflow: auto; }
.feuille h2 { font-size: 19px; }
.feuille .rappel-trajet { font-size: 13px; color: var(--discret); margin: 4px 0 14px; line-height: 1.5; }
.feuille .rappel-trajet b { color: var(--encre); }
.feuille label { display: block; font-size: 13px; font-weight: 600; color: var(--encre); margin: 12px 0 6px; }
.feuille input, .feuille textarea { width: 100%; border: 1px solid var(--champ); border-radius: var(--rayon); padding: 11px 12px; background: var(--fond); }
.feuille textarea { min-height: 92px; resize: vertical; }
.feuille input:focus, .feuille textarea:focus { outline: 2px solid var(--encre); outline-offset: -1px; border-color: transparent; }
.feuille fieldset.mois-ecart { border: 0; padding: 0; margin: 14px 0 0; }
.feuille .mois-ecart legend { font-size: 13px; font-weight: 700; color: var(--encre); padding: 0; }
.feuille input[readonly] { background: var(--fond-doux); color: var(--discret); }
.feuille label.case { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-weight: 500; }
.feuille input[type="checkbox"] { flex: none; width: 22px; height: 22px; padding: 0; margin: 0; accent-color: var(--encre); }
.feuille input[type="radio"] { flex: none; width: 20px; height: 20px; padding: 0; margin: 0; accent-color: var(--encre); }
.feuille .total-ecart { min-height: 1.4em; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--discret); }
.suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.suggestions button { border: 1px solid var(--champ); background: transparent; border-radius: 999px; padding: 6px 14px; font-size: 13px; min-height: 44px; }
.feuille .boutons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.choix-signalement { border: 0; padding: 0; margin: 8px 0 4px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
@media (min-width: 640px) { .voile { align-items: center; } .feuille { border-radius: 12px; } }

/* ---------- Espace web (employeur, fiduciaire, Velkora) : menu à gauche, contenu à droite ---------- */
.bureau { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 27px); background: var(--page); }
.bureau-menu { display: flex; flex-direction: column; gap: 2px; padding: 22px 14px; background: var(--bloc); border-right: 1px solid var(--filet); }
.bureau-menu .logo { width: 96px; margin: 0 0 20px 8px; }
.bureau-menu .societe { margin: 0 0 14px 8px; font-size: 12px; color: var(--discret); }
.bureau-menu .societe b { display: block; font-size: 14px; color: var(--encre); }
.bureau-menu a { display: flex; align-items: center; min-height: 40px; padding: 6px 10px; border-radius: var(--rayon); font-size: 14px; font-weight: 600; text-decoration: none; color: var(--texte); }
.bureau-menu a:hover { background: var(--survol); }
.bureau-menu a[aria-current="page"] { background: var(--tete); color: var(--encre); box-shadow: inset 3px 0 0 var(--encre); }
.bureau-menu .bas { margin-top: auto; padding: 14px 8px 0; font-size: 12px; color: var(--discret); }
.bureau-contenu { padding: 26px 36px 56px; max-width: 1240px; min-width: 0; }
/* En-tête de page : fil ou retour, titre, mois. Rien d'autre. */
.page-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 22px; }
.page-entete > * { min-width: 0; max-width: 100%; }
.page-entete h1 { font-size: 26px; line-height: 1.2; overflow-wrap: anywhere; }
.page-entete .sous-titre { margin-top: 4px; font-size: 14px; color: var(--discret); }
.page-entete .barre-outils { align-items: center; }
.page-entete .signaler { align-self: flex-start; }
.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 13px; color: var(--discret); }
.fil a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; color: var(--discret); text-decoration: none; }
.fil a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fil b { color: var(--encre); font-weight: 600; }
.retour-tableau { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin: 0 0 2px -4px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--discret); }
.retour-tableau:hover { color: var(--encre); }
.retour-tableau svg { width: 18px; height: 18px; }
/* Choix du mois : précédent, mois affiché, suivant. */
.mois { display: inline-flex; align-items: stretch; max-width: 100%; border: 1px solid var(--filet); border-radius: var(--rayon); background: var(--bloc); }
.mois a, .mois > span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; font-size: 14px; text-decoration: none; white-space: nowrap; }
.mois a { color: var(--discret); font-weight: 600; }
.mois a:hover { color: var(--encre); background: var(--survol); }
.mois b { display: inline-flex; align-items: center; padding: 0 14px; color: var(--encre); font-weight: 700; border-left: 1px solid var(--filet); border-right: 1px solid var(--filet); white-space: nowrap; }
.mois .inactif { color: var(--filet); }
.formulaire.etroit { max-width: 440px; }
.fiche-bureau { max-width: 640px; }

/* Graphiques (statistiques) : SVG maison, couleurs par classes du thème. Chaque graphique est une section. */
.graphiques { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 0 24px; }
.graphique-bloc { margin: 0 0 24px; padding: 14px 20px 12px; background: var(--bloc); border: 1px solid var(--filet); border-top: 3px solid var(--encre); break-inside: avoid; min-width: 0; }
.graphique-bloc figcaption h2 { font-size: 17px; margin-bottom: 2px; }
.graphique-bloc figcaption p { font-size: 13px; color: var(--discret); margin-bottom: 8px; }
.graphique { display: block; width: 100%; height: auto; }
.graphique-defile { overflow-x: auto; position: relative; }
.graphique text { fill: var(--texte); font-size: 12px; font-variant-numeric: tabular-nums; }
.graphique .g-axe, .graphique .g-vide { fill: var(--discret); }
.graphique .g-total { fill: var(--encre); font-weight: 600; }
.graphique .g-grille { stroke: var(--filet); }
.graphique .g-zero { stroke: var(--discret); }
.graphique rect { stroke: var(--bloc); stroke-width: 1.5; }
.graphique .g-pro { fill: var(--pro); }
.graphique .g-prive { fill: var(--prive); }
.graphique .g-neutre { fill: var(--texte); }
.graphique .g-provisoire { fill: var(--bloc); stroke: var(--texte); stroke-width: 1.5; stroke-dasharray: 4 3; }
.graphique-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--discret); margin: 2px 0 6px; }
.graphique-legende span { display: inline-flex; align-items: center; gap: 6px; }
.graphique-legende i { width: 12px; height: 12px; border-radius: 2px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.graphique-legende i.g-pro { background: var(--pro); }
.graphique-legende i.g-prive { background: var(--prive); }
.graphique-legende i.g-neutre { background: var(--texte); }
.graphique-legende i.g-provisoire { border: 1.5px dashed var(--texte); }
.donnees { margin-top: 6px; font-size: 13px; }
.donnees summary { cursor: pointer; width: fit-content; color: var(--discret); text-decoration: underline; text-underline-offset: 3px; }
.donnees .tableau { margin-top: 8px; font-size: 13px; }
.donnees .tableau th:first-child, .donnees .tableau td:first-child { padding-left: 0; }
@media print { .donnees { display: none; } }
/* Grille des états de carnet (statistiques) : la colonne des noms reste visible pendant le défilement. */
.grille-etats th:first-child, .grille-etats td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bloc); box-shadow: 1px 0 0 var(--filet); }
.grille-etats thead th:first-child { background: var(--tete); }

/* ---------- Écran moyen : menu en bandeau qui défile ---------- */
@media (max-width: 960px) {
  .bureau { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .bureau-menu { flex-direction: row; align-items: center; gap: 2px; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--filet); overflow-x: auto; scrollbar-width: none; }
  .bureau-menu .logo { width: 76px; margin: 0 12px 0 0; flex: none; }
  .bureau-menu .societe, .bureau-menu .bas { display: none; }
  .bureau-menu a { flex: none; white-space: nowrap; }
  .bureau-menu a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--encre); }
  .bureau-contenu { padding: 22px 20px 48px; }
  .bureau .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .bureau .chiffres > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .parcours { grid-template-columns: minmax(0, 1fr); }
  .lieux-bloc { border-right: 0; border-bottom: 1px solid var(--filet); }
  .parcours.sans-carte .lieux-bloc { border-bottom: 0; }
  .graphiques { grid-template-columns: minmax(0, 1fr); }
  .graphique { min-width: 480px; }
}
/* Entre téléphone et grand écran : le tableau des trajets se resserre au lieu de déborder. */
@media (max-width: 1100px) {
  .trajets td.action, .trajets thead th:last-child { display: none; }
  .tableau th, .tableau td { padding-left: 10px; padding-right: 10px; }
}

/* ---------- Tableaux lus comme des fiches empilées (classe « empile », posée par composants/tableaux.js) : sous 720 px, et dès que les
   colonnes ne tiennent plus dans la place disponible (fenêtre réduite, tablette, menu latéral). Jamais de colonne coupée. ---------- */
/* Tableau lu comme des fiches : l'en-tête disparaît, chaque valeur retrouve son libellé au-dessus. */
.fiches.empile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fiches.empile, .fiches.empile tbody, .fiches.empile tfoot { display: block; }
.fiches.empile tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 14px 16px; border-bottom: 1px solid var(--filet); }
.fiches.empile td, .fiches.empile tbody th[scope="row"] { display: block; padding: 0 !important; border: 0; text-align: left !important; white-space: normal; min-width: 0; }
.fiches.empile td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--discret); }
.fiches.empile td:empty { display: none; }
.fiches.empile td { overflow-wrap: anywhere; }
.fiches.empile td.nombre { white-space: normal; }
.fiches.empile td.titre, .fiches.empile td.groupe, .fiches.empile td.action, .fiches.empile td.cellule-actions, .fiches.empile td.cellule-badges, .fiches.empile td.large, .fiches.empile td[colspan], .fiches.empile tbody th[scope="row"] { grid-column: 1 / -1; }
.fiches.empile td.titre { font-size: 15.5px; }
.fiches.empile td.groupe { border-left: 0; }
.fiches.empile td.cellule-actions { min-width: 0; }
.fiches.empile td.cellule-actions select, .fiches.empile td.cellule-actions .bouton { margin: 3px 6px 3px 0; }
.fiches.empile td.action .ouvrir { width: 100%; justify-content: center; min-height: 40px; }
.fiches.empile tbody tr:hover > td { background: none; }
.fiches.empile tbody th[scope="rowgroup"] { display: block; padding: 14px 16px 6px; }
.fiches.empile tbody th[scope="rowgroup"] span { display: block; margin: 2px 0 0; }
.fiches.empile tr:has(> th[scope="rowgroup"]) { display: block; padding: 0; border-bottom: 0; }
.fiches.empile tfoot tr { background: var(--tete); border-top: 2px solid var(--filet); }
.fiches.empile tfoot th, .fiches.empile tfoot td { display: block; padding: 0; border: 0; background: none; text-align: left; }
.fiches.empile tfoot th { grid-column: span 2; }

/* Trajet en fiche : heures, mode et km sur la première ligne, puis lieux, motif, source et état. */
.trajets.empile tr.ligne-trajet { grid-template-columns: minmax(0, 1fr) auto minmax(3.5em, auto); gap: 4px 10px; grid-template-areas: "heures mode km" "lieux lieux lieux" "motif motif motif" "source source source" "etat etat etat"; padding: 12px 16px 12px 19px; box-shadow: inset 3px 0 0 var(--prive); }
.trajets.empile tr.ligne-trajet.pro { box-shadow: inset 3px 0 0 var(--pro); }
.trajets.empile tr.ligne-trajet > td:first-child, .trajets.empile tr.ligne-trajet.pro > td:first-child { box-shadow: none; }
.trajets.empile td.heures { grid-area: heures; }
.trajets.empile td.mode-cellule { grid-area: mode; align-self: center; }
.trajets.empile td.km { grid-area: km; align-self: center; text-align: right !important; }
.trajets.empile td.lieux { grid-area: lieux; }
.trajets.empile td.motif { grid-area: motif; }
.trajets.empile td.source { grid-area: source; font-size: 12.5px; color: var(--discret); align-self: center; }
.trajets.empile td.groupe { grid-area: etat; }
.trajets.empile td.groupe::before, .trajets.empile td.source::before, .trajets.empile td.motif::before, .trajets.empile td.km::before { content: none; }
.trajets.empile td.action { display: none; }

/* ---------- Téléphone ---------- */
@media (max-width: 720px) {
  .bureau-contenu { padding: 18px 16px 40px; }
  .page-entete h1 { font-size: 22px; }
  .page-entete > .barre-outils, .page-entete > .mois, .page-entete .mois { width: 100%; }
  .page-entete .mois b { flex: 1; justify-content: center; }
  .page-entete .barre-outils .bouton { flex: 1 1 auto; }
  .section-tete { padding: 12px 16px; }
  .section-tete .actions { margin-left: 0; width: 100%; }
  .section-tete .actions .bouton { flex: 1 1 auto; }
  .section-corps, .section-pied { padding-left: 16px; padding-right: 16px; }
  .section > .mention, .section > .erreur, .section > .erreur-feuille { margin-left: 16px; margin-right: 16px; }
  .section > .barre-outils { padding: 12px 16px; }
  .chiffres .valeur { font-size: 21px; }
  .bureau .chiffres > div { padding: 0 12px; }
  .bureau .chiffres > div:nth-child(odd) { padding-left: 0; }
  .legende div { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  .tache { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
  .tache .barre-outils { justify-content: stretch; }
  .tache .barre-outils .bouton { flex: 1; }

  .outils { padding: 12px 16px; }
  .outils .champ.recherche { flex-basis: 100%; max-width: none; }
  .outils select.champ { flex: 1 1 140px; }
  .outils .pousser { margin-left: 0; flex: 1 1 100%; }
  .segments { width: 100%; }
  .segments a { flex: 1; justify-content: center; }
  .onglets { margin-bottom: 16px; }
  .onglets a { min-height: 44px; padding: 0 12px; font-size: 13.5px; }

  .semaine > summary { padding: 12px 16px; }

  .resume-trajet { padding: 16px; }
  .resume-trajet dd { font-size: 19px; }
  .lieu { padding: 16px; }
  .lieu .adresse { font-size: 17px; }
  .carte-bloc { padding: 14px 16px; }
  .details-trajet, .tel .details-trajet, .fiche dl { grid-template-columns: minmax(0, 1fr); }
  .details-trajet dt { padding: 12px 16px 0; border-bottom: 0; }
  .details-trajet dd { padding: 2px 16px 12px; }
  .tel .details-trajet dt { padding: 12px 14px 0; }
  .tel .details-trajet dd { padding: 2px 14px 12px; }
  .fiche dt { padding-bottom: 0; border-bottom: 0; }
  .fiche dd { padding-top: 2px; }
  .historique { padding: 14px 16px 6px 28px; }
  .etat-carnet { padding: 12px 14px; }
}

/* Mode capture (outils/captures.ps1) : écran de téléphone de 390 px dans une fenêtre plus large. */
html.capture [data-bascule-theme] { display: none; }
html.capture-tel body { width: 390px; }
html.capture-tel .tel { border: 0; }
html.capture-tel .voile { right: auto; width: 390px; }
@media print {
  body { background: #fff; }
  .bandeau-demo, .bureau-menu, .barre-outils, .tel-nav, .mois, .retour-tableau { display: none; }
  .bureau { display: block; }
  .section { break-inside: avoid; }
  /* Carnet mensuel : seul le document part à l'impression. */
  body:has(.document) .page-entete, body:has(.document) .fil, body:has(.document) [data-bascule-theme], body:has(.document) .signaler { display: none; }
  .document { border: 0; padding: 0; max-width: none; }
  .document section { break-inside: avoid; }
}
/* Carnet mensuel à imprimer (ecrans/document.js) : sobre, lisible sur papier blanc. */
.document { max-width: 820px; border: 1px solid var(--filet); border-top: 3px solid var(--encre); padding: 32px 36px; background: var(--bloc); }
.document h2 { font-size: 22px; margin: 4px 0 14px; }
.document h3 { font-size: 15px; margin: 26px 0 8px; display: flex; gap: 10px; align-items: baseline; }
.document h3 small { font-size: 12.5px; font-weight: 400; color: var(--discret); }
.document .tableau th:first-child, .document .tableau td:first-child { padding-left: 0; }
.document .tableau th { background: none; }
.document-surtitre { font-size: 13px; color: var(--discret); text-transform: uppercase; letter-spacing: 0.06em; }
.document-identite { display: grid; grid-template-columns: 150px 1fr; gap: 6px 16px; font-size: 14px; }
.document-identite dt { color: var(--discret); }
.document-note { margin-top: 14px; font-size: 13px; color: var(--discret); border-top: 1px solid var(--filet); padding-top: 10px; }
.document-totaux { max-width: 520px; }
.document-totaux td.retrait { padding-left: 18px; color: var(--discret); }
.document-pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 30px; padding-top: 10px; border-top: 1px solid var(--filet); font-size: 12px; color: var(--discret); }
@media (max-width: 640px) { .document { padding: 20px 16px; } .document-identite { grid-template-columns: 1fr; } .document-identite dd { margin-bottom: 6px; } .document .tableau-defile, .document > section { overflow-x: auto; } }

/* ---------- Appli réelle : connexion, compte, journal (jamais dans la démo) ---------- */
html[data-api="http"] .tel, html[data-api="http"] .bureau { min-height: calc(100vh - var(--zone-haut) - var(--zone-bas)); }
html[data-api="http"] #app:has(.tel-nav) .tel { min-height: calc(100vh - var(--zone-haut)); }
/* Porte (connexion, compte, choix d'un employeur) : un seul bloc posé sur le fond. */
.porte { max-width: 440px; margin: 40px auto 48px; padding: 32px 28px 36px; background: var(--bloc); border: 1px solid var(--filet); border-top: 3px solid var(--encre); }
.porte .logo { width: 120px; display: block; margin-bottom: 30px; }
.porte h1 { font-size: 24px; line-height: 1.2; margin-bottom: 14px; }
.porte > p, .formulaire > p { font-size: 15px; margin-bottom: 12px; }
.porte .roles { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; }
.porte .role { border-top-width: 1px; }
.porte button.role { width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
.porte .liens { margin-top: 22px; font-size: 14px; }
.porte .liens a:not(.bouton) { color: var(--encre); font-weight: 600; text-underline-offset: 3px; }
.porte .actions { margin-top: 20px; }
@media (max-width: 480px) { .porte { margin: 16px 10px 32px; padding: 24px 18px 28px; } }
.formulaire { margin-top: 8px; display: grid; }
.formulaire label { font-size: 13px; font-weight: 600; color: var(--encre); margin: 14px 0 6px; }
.formulaire input:not([type="checkbox"]):not([type="radio"]), .formulaire select, .formulaire textarea { width: 100%; border: 1px solid var(--champ); border-radius: var(--rayon); padding: 11px 12px; background: var(--fond); color: var(--encre); }
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: 2px solid var(--encre); outline-offset: -1px; border-color: transparent; }
.formulaire input[inputmode="numeric"] { font-size: 22px; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.formulaire .case { display: flex; align-items: center; gap: 10px; font-weight: 500; min-height: 44px; margin: 10px 0 0; }
.formulaire .case input { width: 20px; height: 20px; accent-color: var(--pro); }
.formulaire .bouton { margin-top: 18px; min-height: 44px; }
.formulaire .bouton + .bouton { margin-top: 10px; }
.formulaire .ok { color: var(--ok); font-weight: 600; font-size: 14px; margin-top: 12px; }
.formulaire .erreur { color: var(--alerte); font-weight: 600; font-size: 13px; margin-top: 8px; }
.formulaire .barre-outils { margin-top: 14px; }
.formulaire .barre-outils .bouton { margin-top: 0; }
.total-commande { margin-top: 8px; min-height: 1.4em; font-size: 14px; color: var(--encre); }
.activation { display: grid; justify-items: start; gap: 10px; margin: 6px 0 4px; }
.activation .qr { width: 196px; height: 196px; background: #fff; padding: 10px; border-radius: var(--rayon); }
.activation .secret code { font-size: 15px; letter-spacing: 0.06em; color: var(--encre); user-select: all; }
.tel-compte { margin-left: auto; align-self: center; font-size: 13px; font-weight: 600; color: var(--discret); text-decoration: none; padding: 10px 0 10px 10px; }
.tel-compte:focus-visible { outline: 2px solid var(--encre); }
.journal { list-style: none; }
.journal li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--filet-doux); font-size: 14px; color: var(--encre); }
.journal li:last-child { border-bottom: 0; }
.journal small { display: block; font-size: 12px; color: var(--discret); }

/* Écrans du boîtier (appli, en sommeil) */
.formulaire-appli label, .formulaire-appli legend { display: block; font-size: 13px; font-weight: 600; color: var(--encre); margin: 16px 0 6px; padding: 0; }
.formulaire-appli fieldset { border: 0; padding: 0; margin: 0; }
.formulaire-appli input:not([type="radio"]):not([type="checkbox"]) { width: 100%; border: 1px solid var(--champ); border-radius: var(--rayon); padding: 11px 12px; background: var(--fond); color: var(--encre); }
.formulaire-appli .bouton { margin-top: 18px; }
.formulaire-appli label.case, .case-reglage { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; margin: 8px 0; min-height: 44px; }
.formulaire-appli input[type="radio"], .case-reglage input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--encre); }
.case-reglage { margin-top: 12px; font-size: 14px; }
.case-reglage small { display: block; color: var(--discret); font-size: 12.5px; margin-top: 2px; }

/* ---------- Photo du compteur (appli) : feuille plein écran ---------- */
html.photo-ouverte { overflow: hidden; }
.photo-feuille { position: fixed; inset: 0; z-index: 60; background: var(--fond); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--zone-haut) 0 var(--zone-bas); }
.photo-corps { max-width: 430px; margin: 0 auto; padding: 16px 16px 28px; }
.photo-corps h1 { font-size: 20px; margin: 8px 0 12px; }
.photo-corps h1:focus { outline: none; }
.photo-consigne { font-size: 16px; color: var(--encre); margin: 0 0 12px; }
.photo-gabarit { display: block; width: 100%; max-width: 320px; margin: 8px auto 12px; color: var(--encre); }
.photo-autres p { font-size: 13px; color: var(--discret); margin: 4px 0; }
.photo-scene { position: relative; margin: 8px auto 12px; overflow: hidden; touch-action: none; line-height: 0; border-radius: var(--rayon); }
.photo-image { display: block; width: 100%; height: auto; }
.photo-cadre { position: absolute; box-sizing: border-box; border: 2px solid #fff; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55); touch-action: none; cursor: move; border-radius: 4px; }
.photo-cadre:focus-visible { outline: 3px solid var(--pro); outline-offset: 2px; }
.photo-curseur { width: 100%; margin: 6px 0 14px; accent-color: var(--encre); }
.photo-apercu { margin: 8px 0 14px; line-height: 0; }
.photo-apercu canvas { width: 100%; height: auto; border-radius: var(--rayon); border: 1px solid var(--filet); }
.photo-bloc { margin-top: 16px; }
.photo-miniature { display: block; max-width: 100%; height: auto; border-radius: var(--rayon); border: 1px solid var(--filet); margin: 8px 0; }
.formulaire-appli .photo-bloc { margin-top: 22px; }

/* Bouton « Signaler » des phases d'essai : petit, discret, en haut de l'écran à côté de « Compte ». */
.signaler { flex: none; align-self: center; font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--filet); background: var(--bloc); color: var(--discret); cursor: pointer; }
.tel-entete .signaler { margin-left: auto; }
.tel-entete .signaler + .tel-compte { margin-left: 4px; }
.porte > .signaler, .accueil > .signaler { float: right; }
.signaler:hover, .signaler:focus-visible { opacity: 1; color: var(--encre); }
@media print { .signaler { display: none; } }

/* Compte de la société suspendu ou clos (0023) : bandeau en tête des écrans de tous les membres. */
.bandeau-compte { margin: 0 0 20px; padding: 12px 14px; border: 1px solid var(--alerte); border-left-width: 4px; background: var(--alerte-pale); color: var(--encre); font-size: 14px; }
.tel-contenu .bandeau-compte { margin: 4px 0 14px; }