@page { size: A4 portrait; margin: 10mm; }
* { box-sizing: border-box; }
body { margin: 0; background: #e9efef; color: #1d2b2d; font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif; }
.barre { position: sticky; top: 0; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px 16px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.08); z-index: 2; }
.barre a { color: #1f8f8c; font-weight: 700; text-decoration: none; }
.barre button { font: inherit; font-weight: 800; border: 0; border-radius: 999px; padding: 10px 20px; background: #1f8f8c; color: #fff; cursor: pointer; }

#pages { padding: 16px; overflow-x: auto; }
.page { width: 210mm; min-height: 297mm; margin: 0 auto 16px; padding: 10mm; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.12); display: flex; flex-direction: column; gap: 3mm; }
.page header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 0.4mm solid #9aa; padding-bottom: 2mm; }
.page .marque { margin: 0; font-size: 8pt; letter-spacing: .12em; text-transform: uppercase; color: #555; font-weight: 700; }
.page h1 { margin: 0; font-size: 17pt; }
.page .prenom { margin: 0; font-size: 11pt; }
.page .consigne { margin: 0; font-size: 11pt; }
.page footer { margin-top: auto; font-size: 7.5pt; color: #666; text-align: center; }
.rangee { display: block; }

.lignes .l-base { stroke: #555; stroke-width: 0.35mm; vector-effect: non-scaling-stroke; }
.lignes .l-x { stroke: #888; stroke-width: 0.25mm; stroke-dasharray: 1.2mm 1mm; vector-effect: non-scaling-stroke; }
.lignes .l-fine { stroke: #bbb; stroke-width: 0.2mm; vector-effect: non-scaling-stroke; }
.plein { fill: none; stroke: #444; stroke-linecap: round; stroke-linejoin: round; }
.cache { fill: none; stroke: none; }
.fleche { fill: none; stroke: #fff; stroke-width: 0.45mm; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.pointilles { fill: none; stroke: #8a8a8a; stroke-linecap: round; stroke-linejoin: round; }
.depart { fill: #3a3a3a; }
.num { fill: #fff; font-weight: 800; text-anchor: middle; font-family: inherit; }

@media print {
  body { background: #fff; }
  .barre { display: none; }
  #pages { padding: 0; }
  .page { width: auto; min-height: 0; height: 276mm; margin: 0; padding: 0; box-shadow: none; break-after: page; }
  .page:last-child { break-after: auto; }
}