/* Charte commune avec l'appli (maquette du 2026-11-10) : indigo de suivi.6694.ma, une couleur par état. */
   :root {
     color-scheme: light dark;
     --principale: #1a237e; --principale-texte: #ffffff; --selection: #e8eaf6;
     --fond: #f5f6fa; --surface: #ffffff; --texte: #1b1c22; --texte-2: #5c6070; --trait: #e2e4ec; --trait-leger: #eef0f5;
     --succes: #2e7d32; --encours: #b45309; --info: #0b5cad; --danger: #c62828;
     --annule-fond: #eceef3; --annule-trait: #c9cdd8; --annule-barre: #8a90a2; --annule-texte: #4a4e5c;
     --rayon: 12px; --rayon-petit: 8px;
     /* Compatibilité des anciens noms. */
     --accent: var(--principale); --erreur: var(--danger); --fond-carte: var(--surface);
   }
   /* Thème : celui du système, sauf choix contraire de ce navigateur (Paramètres, attribut data-theme). */
   @media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) { 
       --principale: #9fa8da; --principale-texte: #10143a; --selection: #262b52;
       --fond: #121318; --surface: #1c1d24; --texte: #e6e7ee; --texte-2: #a3a7b6; --trait: #30323d; --trait-leger: #262832;
       --succes: #81c784; --encours: #ffb74d; --info: #90caf9; --danger: #ef9a9a;
       --annule-fond: #23252e; --annule-trait: #3a3d4a; --annule-barre: #7d8396; --annule-texte: #b9bcc8;
} }
   :root[data-theme="sombre"] { color-scheme: dark; 
       --principale: #9fa8da; --principale-texte: #10143a; --selection: #262b52;
       --fond: #121318; --surface: #1c1d24; --texte: #e6e7ee; --texte-2: #a3a7b6; --trait: #30323d; --trait-leger: #262832;
       --succes: #81c784; --encours: #ffb74d; --info: #90caf9; --danger: #ef9a9a;
       --annule-fond: #23252e; --annule-trait: #3a3d4a; --annule-barre: #7d8396; --annule-texte: #b9bcc8;
}
   :root[data-theme="clair"] { color-scheme: light; }
   * { box-sizing: border-box; }
   body { margin: 0; font-family: Roboto, "Segoe UI", system-ui, sans-serif; font-size: 14px; line-height: 1.45; background: var(--fond); color: var(--texte); }
   a { color: var(--principale); }
   h1 { font-size: 24px; font-weight: 500; margin: 0 0 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
   h2 { font-size: 16px; font-weight: 500; margin: 0 0 .75rem; }

   /* En-tête : bandeau indigo, pilule « 6694 », navigation, compte. */
   header.barre-haut { background: #1a237e; color: #fff; }
   header.barre-haut .interieur { max-width: 77.5rem; margin: 0 auto; padding: 0 1.5rem; min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; }
   header.barre-haut .marque { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; font-size: 16px; font-weight: 500; }
   header.barre-haut .pilule { border: 2px solid #fff; border-radius: 999px; padding: 0 .6rem; font-weight: 700; font-size: 17px; letter-spacing: 1px; }
   header.barre-haut nav { display: flex; flex-wrap: wrap; gap: .25rem; flex-grow: 1; }
   header.barre-haut nav a { color: #fff; text-decoration: none; padding: .5rem .9rem; border-radius: var(--rayon-petit); opacity: .85; }
   header.barre-haut nav a:hover { opacity: 1; background: #ffffff1a; }
   header.barre-haut nav a[aria-current="page"] { opacity: 1; background: #ffffff29; font-weight: 500; }
   header.barre-haut .compte { display: flex; align-items: center; gap: .75rem; font-size: 13px; }
   header.barre-haut .compte span { opacity: .85; }
   header.barre-haut button.discret { color: #fff; font-weight: 500; }

   main { max-width: 77.5rem; margin: 0 auto; padding: 2rem 1.5rem 3rem; }
   main > p, main > form, main > div, main > section, main > table, main > dl { margin-bottom: 1.25rem; }

   /* Cartes et tuiles */
   .carte, section.carte { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.25rem; margin: 0 0 1.25rem; }
   .etroite { max-width: 24rem; margin: 4rem auto; }
   .etroite-gauche { max-width: 28rem; }
   .mot-de-passe-provisoire { font: 600 1.5rem/1.4 ui-monospace, monospace; letter-spacing: .05em; user-select: all; }
   .deux-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem; }
   .tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
   .tuile { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .25rem; }
   .tuile .libelle { color: var(--texte-2); font-size: 13px; }
   .tuile .valeur { font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }
   .tuile .valeur.info { color: var(--info); } .tuile .valeur.danger { color: var(--danger); }
   dl.chiffres { display: grid; grid-template-columns: max-content max-content; gap: .4rem 2rem; margin: 0; }
   dl.chiffres dt { color: var(--texte-2); }
   dl.chiffres dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
   .message { background: var(--surface); border: 1px solid var(--trait); border-left: 4px solid var(--principale); border-radius: var(--rayon-petit); padding: .75rem 1rem; }

   /* Formulaires et boutons : un seul bouton plein par écran, contour pour le secondaire, rouge pour pénaliser. */
   label { display: block; margin: .75rem 0; color: var(--texte-2); font-size: 13px; }
   input, select, textarea { display: block; width: 100%; padding: .55rem .75rem; margin-top: .3rem; font: inherit; font-size: 14px; color: var(--texte);
     background: var(--surface); border: 1px solid var(--annule-trait); border-radius: var(--rayon-petit); }
   input:focus, select:focus, textarea:focus { outline: 2px solid var(--principale); outline-offset: 0; border-color: transparent; }
   label.choix { display: flex; gap: .5rem; align-items: baseline; color: var(--texte); font-size: 14px; }
   label.choix input { width: auto; display: inline; }
   button, a.bouton { font: inherit; font-weight: 500; min-height: 40px; padding: .5rem 1.1rem; border: 0; border-radius: var(--rayon-petit);
     background: var(--principale); color: var(--principale-texte); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
   button:disabled { background: var(--trait); color: var(--texte-2); cursor: default; }
   button.discret { background: none; color: var(--principale); min-height: 32px; padding: .25rem .5rem; }
   button.contour, a.bouton.contour { background: var(--surface); color: var(--principale); border: 1px solid var(--principale); }
   button.secondaire { background: var(--surface); color: var(--danger); border: 1px solid var(--danger); min-height: 32px; padding: .25rem .8rem; }
   form.en-ligne { display: inline; margin: 0; }
   form.refus { display: flex; gap: .5rem; }
   form.refus input { margin: 0; min-width: 10rem; }
   form.piece, form.actions { display: flex; gap: .5rem; align-items: center; margin: 0 0 .25rem; white-space: nowrap; }
   form.piece button, form.actions button { min-height: 32px; padding: .25rem .8rem; }
   form.piece button:not(.discret) { background: var(--surface); color: var(--principale); border: 1px solid var(--principale); }

   /* Tableaux : sur une carte blanche, en-têtes discrets, chiffres alignés à droite. */
   table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); margin: 0 0 1.25rem; overflow: hidden; }
   th { text-align: left; padding: .75rem .9rem; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--texte-2); background: var(--fond); border-bottom: 1px solid var(--trait); }
   td { text-align: left; padding: .85rem .9rem; border-bottom: 1px solid var(--trait-leger); vertical-align: top; }
   tbody:last-child tr:last-child td { border-bottom: none; }
   .nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
   td.nombre { font-weight: 500; }
   tr:target td { background: var(--selection); }

   /* Opération annulée par le chauffeur et son annulation : un bloc encadré, gris, lu comme une seule opération
      (décision 55). Gris et non rouge : une annulation n'est pas une faute, rien n'est à faire. */
   tbody.paire-annulee td { background: var(--annule-fond); border-bottom: none; }
   tbody.paire-annulee tr:first-child td { border-top: 1px solid var(--annule-trait); }
   tbody.paire-annulee tr:last-child td { border-bottom: 1px solid var(--annule-trait); }
   tbody.paire-annulee td:first-child { box-shadow: inset 4px 0 0 var(--annule-barre); }
   tr.annulee td.nombre { text-decoration: line-through; color: var(--texte-2); font-weight: 400; }
   tr.annulation td { font-style: italic; padding-top: .2rem; }
   tr.annulation td:nth-child(2) { padding-left: 1.75rem; }
   tr.effet td { padding-top: 0; font-size: 13px; color: var(--annule-texte); }

   /* États : une couleur, un sens (vert fait, orange en cours, bleu à valider, rouge problème, gris annulé). */
   .pastille { display: inline-block; padding: .1rem .65rem; border-radius: 999px; border: 1px solid currentColor; color: var(--texte-2); font-size: 12px; font-weight: 400; line-height: 1.6; white-space: nowrap; margin-left: .25rem; }
   .pastille.succes { color: var(--succes); }
   .pastille.encours { color: var(--encours); }
   .pastille.attention { color: var(--info); }
   .pastille.alerte { color: var(--danger); }
   .pastille.annulee { border-color: transparent; background: var(--annule-fond); color: var(--annule-texte); }
   tbody.paire-annulee .pastille.annulee { background: var(--surface); }
   h1 .pastille { font-size: 13px; }
   .discret { color: var(--texte-2); font-size: 13px; }
   .erreur, .negatif { color: var(--danger); }
   p.alerte { color: var(--danger); font-weight: 500; }
   h2 .lien-titre { font-size: 13px; font-weight: 400; margin-left: 1rem; }
   p.non-imprime { display: flex; gap: 1rem; align-items: center; }

   img.signature { max-width: 100%; width: 24rem; background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon-petit); }
   table.journal td.case { font-size: 1.3em; text-align: center; }
   dd.reference { font-family: ui-monospace, monospace; }
   .signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
   .signatures div { border-top: 1px solid currentColor; padding-top: .5rem; min-height: 4rem; }

   /* Sur papier : la feuille seule, en noir sur blanc. */
   @media print {
     header, .non-imprime { display: none !important; }
     body, main, .feuille, table, th, td { background: #fff !important; color: #000 !important; }
     main { max-width: none; padding: 0; }
     table { border: none; border-radius: 0; }
     table.journal th, table.journal td { border-bottom: 1px solid #000; }
   }

   /* La fenêtre prend la taille de la photo, au plus 90 % de l'écran ; le zoom se fait dedans, sans l'agrandir. */
   dialog.visionneuse { max-width: 90vw; max-height: 90vh; padding: 0; border: 0; border-radius: var(--rayon); overflow: hidden; display: none; background: var(--surface); color: var(--texte); }
   dialog.visionneuse[open] { display: flex; flex-direction: column; }
   dialog.visionneuse::backdrop { background: #000a; }
   dialog.visionneuse .barre { display: flex; gap: .5rem; align-items: center; padding: .5rem; border-bottom: 1px solid var(--trait); }
   dialog.visionneuse .barre .aide { flex: 1; }
   dialog.visionneuse .cadre { overflow: hidden; background: #111; display: flex; justify-content: center; cursor: grab; touch-action: none; }
   dialog.visionneuse .cadre.glisse { cursor: grabbing; }
   dialog.visionneuse img { display: block; max-width: 90vw; max-height: calc(90vh - 3.5rem); transform-origin: center; user-select: none; }
   nav.ariane { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: 13px; color: var(--texte-2); margin-bottom: 1rem; }
   nav.ariane a { text-decoration: none; font-weight: 500; }
   nav.ariane a:hover { text-decoration: underline; }
   /* Titre de section avec ses boutons à droite (Journal, Imprimer les pièces). */
   .titre-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.75rem 0 .75rem; }
   .titre-actions h2 { margin: 0 auto 0 0; }
   .titre-actions a.bouton { min-height: 36px; padding: .35rem .9rem; }
   /* L'ajustement conclut la période : dernière ligne, à part, en italique (décision 54). */
   tbody.ajustement td { background: var(--selection); border-top: 2px solid var(--annule-trait); font-style: italic; }
   /* Planche des photos de tickets : deux par ligne à l'écran, chacune entière sur papier. */
   .planche { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.25rem; }
   .planche figure { margin: 0; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .75rem; break-inside: avoid; }
   .planche img { display: block; width: 100%; max-height: 28rem; object-fit: contain; background: #fff; border-radius: var(--rayon-petit); }
   .planche figcaption { margin-top: .5rem; font-size: 13px; }
   @media print {
     .planche { grid-template-columns: 1fr 1fr; gap: 6mm; }
     .planche figure { border: 1px solid #000; border-radius: 0; }
     .planche img { max-height: 110mm; }
   }
   .pilule-connexion { border: 2px solid var(--principale); color: var(--principale); border-radius: 999px; padding: 0 .6rem; font-weight: 700; letter-spacing: 1px; }
   .etroite button[type="submit"] { width: 100%; margin-top: .5rem; }