@charset "UTF-8";
/* ==========================================================================
   beeMob TAD — documents.css
   Documents imprimables (écran + impression) : confirmation / e-billet
   imprimable, feuille de route conducteur, cartes d'itinéraire.
   Contrat : docs/ARCHITECTURE.md §6 (documents.css) + markup §9.7.
   Classes historiques conservées (sauvegarde assets/tad.css, section
   « Printable confirmation and route sheets ») : .confirmation-doc,
   .confirmation-actions, div.route-line (grille Départ / Destination).

   Principes :
   - Une feuille (.doc, .route-doc, .confirmation-doc) reste « papier » blanche
     même en thème sombre, posée sur le fond sombre : les tokens sémantiques
     y sont ramenés à leurs valeurs claires (primitives de tokens.css). Les
     composants imbriqués (.badge, .line-badge, .journey…) suivent donc tout
     seuls la version claire.
   - Les cartes (.osm-map, .gtfs-map) restent claires dans les deux thèmes
     (tuiles OpenStreetMap claires) : palette locale --_map-* (primitives).
   - Animation du tracé (.route-line[data-draw]) et « pop » des marqueurs :
     components.css / motion.css. Ici : apparence uniquement, et en impression
     tracé complet + marqueurs visibles, aucune animation.
   - Variables privées préfixées « --_ ». Aucune couleur en dur hors masques.
   - Les règles responsives sont limitées à « screen » : la largeur utile d'une
     page A4 (~703px) ne doit pas déclencher les dispositions mobiles.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Coquille « document » et barre d'actions
   -------------------------------------------------------------------------- */

body.shell-doc {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--bg);
  background-image: radial-gradient(1000px 480px at 50% -220px, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%);
  background-repeat: no-repeat;
  color: var(--text);
}

/* Décalage des barres collantes selon la coquille (privé). */
body.shell-client {
  --_doc-sticky-top: var(--header-h);
}

body.shell-manager {
  --_doc-sticky-top: 64px;
}

.print-wrap {
  width: min(100% - 2 * var(--sp-4), 210mm);
  margin-inline: auto;
  padding-block: var(--sp-8) var(--sp-16);
}

.doc-actions,
.confirmation-actions {
  position: sticky;
  top: calc(var(--_doc-sticky-top, 0px) + var(--sp-3));
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: color-mix(in srgb, var(--surface) 84%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--shadow-sm);
}

/* Premier élément (souvent « Retour ») à gauche, actions à droite. */
.doc-actions > :first-child:not(:only-child),
.confirmation-actions > :first-child:not(:only-child) {
  margin-right: auto;
}

/* Bascule de thème éventuelle dans la barre d'un document autonome :
   .theme-toggle est défini dans components.css §03 (chargé par toutes les
   coquilles, y compris « doc »). */


/* --------------------------------------------------------------------------
   2. Feuille A4 (.doc) — « papier » dans les deux thèmes
   -------------------------------------------------------------------------- */

.doc,
.confirmation-doc,
.route-doc {
  /* Tokens sémantiques ramenés aux valeurs CLAIRES de tokens.css (papier).
     Les tokens étant résolus sur :root, on les redéfinit ici explicitement
     (mêmes primitives que la colonne « clair » de tokens.css §6). */
  --bg: var(--slate-50);
  --surface: var(--slate-0);
  --surface-2: var(--slate-50);
  --surface-3: var(--slate-100);
  --surface-inverse: var(--slate-900);
  --text: var(--slate-900);
  --text-muted: var(--slate-600);
  --text-subtle: var(--slate-550);
  --text-inverse: var(--slate-0);
  --border: var(--slate-200);
  --border-strong: var(--slate-450);
  --primary: var(--teal-600);
  --primary-hover: var(--teal-700);
  --primary-active: var(--teal-800);
  --primary-soft: var(--teal-50);
  --primary-soft-text: var(--teal-700);
  --on-primary: var(--slate-0);
  --accent: var(--green-500);
  --accent-hover: var(--green-600);
  --accent-soft: var(--green-50);
  --accent-soft-text: var(--green-700);
  --on-accent: var(--slate-950);
  --success: var(--green-700);
  --success-soft: var(--green-50);
  --success-text: var(--green-700);
  --warning: var(--amber-500);
  --warning-soft: var(--amber-50);
  --warning-text: var(--amber-700);
  --danger: var(--red-600);
  --danger-soft: var(--red-50);
  --danger-text: var(--red-700);
  --info: var(--blue-600);
  --info-soft: var(--blue-50);
  --info-text: var(--blue-700);
  --focus-ring: var(--teal-600);

  color-scheme: light;
  position: relative;
  width: 100%;
  max-width: 210mm;
  margin-inline: auto;
  padding: clamp(var(--sp-5), 4vw, 14mm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  /* Filet de marque en haut de la feuille (suit l'arrondi). */
  background:
    linear-gradient(90deg, var(--primary), var(--accent)) center top / 100% 5px no-repeat,
    var(--surface);
  box-shadow: var(--shadow-xl);
  color: var(--text);
  line-height: var(--lh-normal);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.route-doc {
  margin-bottom: var(--sp-6);
}

.doc a:not(.btn),
.confirmation-doc a:not(.btn),
.route-doc a:not(.btn) {
  color: var(--primary);
}

/* Libellés (petites capitales muettes) — markup historique <span> + <strong>. */
.doc-ref > span:first-of-type:not(.badge):not(.line-badge),
.doc-card > span:first-of-type:not(.badge):not(.line-badge),
.doc-table > div > span:first-of-type:not(.badge):not(.line-badge),
.doc-section > div.route-line > div > span:first-of-type:not(.badge):not(.line-badge),
.route-itinerary > div > span:first-of-type:not(.badge):not(.line-badge),
.route-passenger > div > span:first-of-type:not(.badge):not(.line-badge),
.km-box > span:first-of-type,
.distance-pill > span:first-of-type,
.route-signature > span {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* En-tête de document ------------------------------------------------------ */

.doc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.doc-header img {
  display: block;
  width: auto;
  max-width: none;
  height: 42px;
}

.doc-header p {
  margin: var(--sp-2) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.doc-ref {
  flex-shrink: 0;
  text-align: right;
}

.doc-ref strong {
  display: block;
  margin-top: var(--sp-1);
  color: var(--text);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* Titre ------------------------------------------------------------------- */

.doc-title,
.route-doc-title {
  padding: var(--sp-6) 0 var(--sp-5);
}

.doc-title :is(h1, h2),
.route-doc-title :is(h1, h2) {
  margin: var(--sp-3) 0 var(--sp-2);
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 2.5vw + .75rem, 2.375rem);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.doc-title > :is(h1, h2):first-child,
.route-doc-title > :is(h1, h2):first-child {
  margin-top: 0;
}

.doc-title p,
.route-doc-title p {
  max-width: 62ch;
  margin: 0;
  color: var(--text-muted);
}

/* Cartes chiffrées (date, horaire, ligne…) -------------------------------- */

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.doc-card {
  min-width: 0;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface-2);
}

.doc-card strong {
  display: block;
  margin-top: 6px;
  color: var(--primary);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.doc-card small {
  display: block;
  margin-top: var(--sp-1);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* Sections ---------------------------------------------------------------- */

.doc-section {
  margin-top: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface-2);
}

.doc-section > :is(h2, h3):first-child {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.doc-section > :is(h2, h3) > .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.doc-section p {
  margin: 0 0 var(--sp-2);
}

.doc-section p:last-child {
  margin-bottom: 0;
}

/* Grilles clé / valeur (div) — et grille historique Départ / Destination. */
.doc-table:not(table),
.doc-section > div.route-line {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.doc-table:not(table) > div,
.doc-section > div.route-line > div,
.route-itinerary > div,
.route-passenger > div {
  min-width: 0;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
}

.doc-table:not(table) strong,
.doc-section > div.route-line strong,
.route-itinerary strong,
.route-passenger strong {
  display: block;
  margin-top: var(--sp-1);
  color: var(--text);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

/* Variante tableau réel : <table class="doc-table">. */
table.doc-table {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  border-collapse: separate;
  border-spacing: 0;
  background-color: var(--surface);
  font-size: var(--fs-sm);
}

table.doc-table th {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  background-color: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

table.doc-table td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}

table.doc-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Pied de document --------------------------------------------------------- */

.doc-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}

.doc-footer p {
  margin: 0;
}


/* --------------------------------------------------------------------------
   3. Feuille de route conducteur
   -------------------------------------------------------------------------- */

.route-course {
  margin-top: var(--sp-5);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  break-inside: avoid;
  page-break-inside: avoid;
}

/* En-tête teinté (économe en encre) avec repère teal à gauche. */
.route-course-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background-color: var(--primary-soft);
  box-shadow: inset 4px 0 0 var(--primary);
}

.route-course-head > div:first-child {
  min-width: 0;
}

.route-course-head .eyebrow {
  color: var(--primary-soft-text);
}

.route-course-head :is(h2, h3) {
  margin: var(--sp-1) 0;
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.route-course-head p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.km-box {
  flex: 0 0 auto;
  min-width: 112px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface);
  text-align: center;
}

.km-box strong {
  display: block;
  margin-top: var(--sp-1);
  color: var(--text);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

.route-map-print {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--border);
  background-color: var(--surface-2);
}

.route-itinerary {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, .5fr) minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-4);
  background-color: var(--surface-2);
}

.route-passenger {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, .5fr) minmax(0, 1.4fr);
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-top: 1px solid var(--border);
  break-inside: avoid;
  page-break-inside: avoid;
}

.route-passenger small {
  display: block;
  margin-top: var(--sp-1);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

/* Zone de signature : libellé en haut, ligne d'écriture en bas. */
.route-signature {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
  border-top: 1px dashed var(--border-strong);
  background-color: var(--surface);
  break-inside: avoid;
  page-break-inside: avoid;
}

.route-signature > span {
  min-height: 56px;
  border-bottom: 1.5px solid var(--border-strong);
}


/* --------------------------------------------------------------------------
   4. Cartes d'itinéraire (OSM + repli SVG GTFS)
   -------------------------------------------------------------------------- */

.osm-map,
.gtfs-map {
  /* Palette de carte : claire dans les deux thèmes (fond OSM clair). */
  --_map-line: var(--teal-600);
  --_map-start: var(--green-500);
  --_map-end: var(--red-600);
  --_map-halo: var(--slate-0);
  --_map-ink: var(--slate-900);
  --_map-ground: var(--slate-100);
  --_map-paper: var(--teal-50);
  --_map-paper-edge: var(--teal-100);
  --_map-shadow: color-mix(in srgb, var(--slate-950) 35%, transparent);
}

/* Carte OSM : tuiles (img 256px positionnées en px) + tracé SVG 760×300.
   Les deux couches gardent leurs 760×300px natifs et sont mises à l'échelle
   ensemble (unités de conteneur), pour rester parfaitement superposées quelle
   que soit la largeur. Repli : couches centrées et rognées (toujours alignées). */
.osm-map {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 760 / 300;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--_map-ground);
  box-shadow: var(--shadow-xs);
}

.osm-map > .osm-tiles,
.osm-map > .osm-route {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 760px;
  max-width: none;
  height: 300px;
  margin: 0;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
}

@supports (scale: tan(atan2(1cqw, 1px))) {
  .osm-map > .osm-tiles,
  .osm-map > .osm-route {
    transform: translate(-50%, -50%) scale(tan(atan2(100cqw, 760px)));
  }
}

.osm-tiles {
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.osm-tiles img {
  position: absolute;
  display: block;
  width: 256px;
  max-width: none;
  height: 256px;
  max-height: none;
  margin: 0;
  border: 0;
}

.osm-route {
  display: block;
  overflow: visible;
}

/* Repli SVG sans tuiles (coordonnées projetées simplement). */
.gtfs-map {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.gtfs-map rect {
  fill: var(--_map-paper);
  stroke: var(--_map-paper-edge);
}

/* Tracé : épais, teal, halo blanc + ombre portée. */
.osm-route polyline,
.osm-route .route-line,
.gtfs-map polyline,
.gtfs-map .route-line {
  fill: none;
  stroke: var(--_map-line);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 1px var(--_map-halo))
    drop-shadow(0 0 1.5px var(--_map-halo))
    drop-shadow(0 2px 3px var(--_map-shadow));
}

/* Marqueurs : départ vert, arrivée rouge, contour blanc. */
.osm-route circle,
.gtfs-map circle {
  stroke: var(--_map-halo);
  stroke-width: 4;
  filter: drop-shadow(0 1px 2px var(--_map-shadow));
}

.osm-route :is(.map-marker-start, .map-start),
.gtfs-map :is(.map-marker-start, .map-start) {
  fill: var(--_map-start);
}

.osm-route :is(.map-marker-end, .map-end),
.gtfs-map :is(.map-marker-end, .map-end) {
  fill: var(--_map-end);
}

/* Étiquettes « Départ » / « Arrivée » détourées de blanc. */
.osm-route text,
.gtfs-map text {
  fill: var(--_map-ink);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-black);
  paint-order: stroke;
  stroke: var(--_map-halo);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.osm-credit {
  position: absolute;
  right: 8px;
  bottom: 6px;
  z-index: 1;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--_map-halo) 86%, transparent);
  color: var(--slate-700);
  font-size: calc(var(--fs-xs) * .85);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

/* Lien « contributeurs OpenStreetMap » (config.php) : même encre que le crédit
   (spécificité 0,3,1 : l'emporte sur « .doc a:not(.btn) »). */
.osm-map .osm-credit a:not(.btn) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 2px;
}

.osm-map .osm-credit a:not(.btn):hover {
  text-decoration-color: currentColor;
}

.map-empty {
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  min-height: 140px;
  padding: var(--sp-6);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background-color: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
}

.map-empty .icon {
  width: 28px;
  height: 28px;
  color: var(--text-subtle);
}

.distance-pill {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: var(--radius-pill);
  background-color: var(--primary-soft);
  color: var(--text);
}

.distance-pill > .icon {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

.distance-pill strong {
  color: var(--primary-soft-text);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   5. Écran étroit (écran uniquement — jamais en impression)
   -------------------------------------------------------------------------- */

@media screen and (max-width: 759.98px) {
  .print-wrap {
    padding-block: var(--sp-5) var(--sp-12);
  }

  .doc,
  .confirmation-doc,
  .route-doc {
    border-radius: var(--radius-sm);
  }

  .doc-header,
  .route-course-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
  }

  .doc-ref {
    text-align: left;
  }

  .km-box {
    align-self: flex-start;
    text-align: left;
  }

  .doc-table:not(table),
  .doc-section > div.route-line,
  .route-itinerary,
  .route-signature {
    grid-template-columns: minmax(0, 1fr);
  }

  .route-passenger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .doc-section {
    padding: var(--sp-4);
  }

  .doc-footer {
    flex-direction: column;
  }

  table.doc-table {
    display: block;
    overflow-x: auto;
  }
}

@media screen and (max-width: 479.98px) {
  .route-passenger {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-actions > *,
  .confirmation-actions > * {
    flex: 1 1 auto;
  }

  .doc-actions > :first-child:not(:only-child),
  .confirmation-actions > :first-child:not(:only-child) {
    margin-right: 0;
  }
}


/* --------------------------------------------------------------------------
   6. Impression (A4, marges 12 mm)
   -------------------------------------------------------------------------- */

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  /* Le thème clair est imposé à l'impression par tokens.css (§12). */

  html,
  body,
  body.shell-client,
  body.shell-manager,
  body.shell-doc,
  body.shell-auth {
    min-height: 0 !important;
    background: var(--slate-0) !important;
    color: var(--text);
  }

  body {
    display: block !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Interface masquée. */
  .no-print,
  .skip-link,
  .site-header,
  .site-footer,
  .notice-banner,
  .hero-bg,
  .sidebar,
  .sidebar-backdrop,
  .topbar,
  .toast-region,
  .btn,
  .doc-actions,
  .confirmation-actions,
  .app-alert {
    display: none !important;
  }

  /* Coquilles réduites à un flux simple. */
  .app,
  .app-main {
    display: block !important;
    min-height: 0 !important;
  }

  .site-main,
  .app-content,
  .print-wrap {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .layout-split {
    display: block !important;
  }

  .layout-aside {
    position: static !important;
  }

  /* La feuille occupe la page. */
  .doc,
  .confirmation-doc,
  .route-doc {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .route-doc + .route-doc {
    break-before: page;
    page-break-before: always;
  }

  .doc-header {
    padding-top: 0;
    border-bottom: 2px solid var(--primary);
  }

  .osm-map,
  .doc-card {
    box-shadow: none;
  }

  /* Pas de coupure au milieu d'un bloc. */
  .doc-card,
  .doc-section,
  .route-course,
  .route-course-head,
  .route-passenger,
  .route-signature,
  .route-map-print,
  .osm-map,
  .gtfs-map,
  .map-empty,
  .km-box,
  table.doc-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  h1,
  h2,
  h3,
  h4,
  .route-course-head,
  .doc-title,
  .route-doc-title {
    break-after: avoid;
    page-break-after: avoid;
  }

  p,
  li {
    orphans: 3;
    widows: 3;
  }

  table.doc-table thead {
    display: table-header-group;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  /* Aucune animation, aucun état intermédiaire. */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  [data-reveal],
  [data-reveal-stagger] > *,
  .motion-page {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Tracé de carte complet et marqueurs visibles. */
  .route-line,
  [data-draw] {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }

  .map-marker,
  .map-start,
  .map-end,
  .map-marker-start,
  .map-marker-end,
  .osm-route text,
  .gtfs-map text {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* Coche de succès (e-billet) entièrement dessinée. */
  .success-mark-circle,
  .success-mark-check {
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }

  /* Donut : segments à leur valeur finale (formule du contrat §9.6). */
  .donut-seg {
    stroke-dasharray: var(--seg-len) 100 !important;
  }
}