/* apps/web/src/impression.css — LA FEUILLE IMPRIMÉE (T112, Hassan, 11.10.2026).
   Chargée avec `media="print"` : rien ici ne touche l'écran.

   ══════════════════════════════════════════════════════════════════════════════════════
   Hassan, 11.10.2026 : *« ça donne des pages vides ou avec très peu de contenu ; réduire la taille,
   moins de graphisme ; que ça tienne sur 4-5 pages ; reprendre les informations de base ; très
   professionnel, montrable à un client et gardable dans un dossier ; hyper propre, très grande
   société. »*

   Avant (25.09 → 10.10.2026) : on imprimait l'ÉCRAN, toutes rubriques dépliées. 14 à 20 pages A4
   au banc, des jauges et des barres dessinées, des blocs entiers poussés à la page suivante.

   Maintenant : `impression.ts` compose, au moment d'imprimer, un document sobre (`#impression`) à
   partir de ce que l'écran affiche — mêmes chiffres, même langue — et cette feuille n'imprime QUE
   lui. Le reste de la page (en-tête, résumé, détail, boutons, ascenseur, pied) disparaît.

   La mise en page : A4, une colonne pour le haut (la voiture, les deux prix, les problèmes et les
   jauges en version simple), puis les rubriques en tableaux compacts, deux par rangée quand elles
   sont courtes. Rien ne se coupe au milieu d'une ligne (`break-inside: avoid` sur chaque ligne de
   tableau et chaque couple), un titre ne reste jamais seul en bas de page, aucun saut de page forcé
   (donc aucune page blanche). Le pied de chaque page : « ConsultAuto · Hassan Tairov · Pully ·
   consultauto.ch » et le numéro de page.
   ══════════════════════════════════════════════════════════════════════════════════════ */

@media print {
  @page {
    size: A4;
    margin: 13mm 14mm 15mm;
    @bottom-left {
      content: "ConsultAuto · Hassan Tairov · Pully · consultauto.ch";
      font-family: 'Playfair', Georgia, 'Times New Roman', serif; font-size: 7.5pt; color: #5A6B82; vertical-align: top; padding-top: 3mm;
    }
    @bottom-right {
      content: counter(page) " / " counter(pages);
      font-family: 'Playfair', Georgia, 'Times New Roman', serif; font-size: 7.5pt; color: #5A6B82; vertical-align: top; padding-top: 3mm;
    }
  }

  html, body { background: #fff !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; }

  /* ── Tout le reste disparaît : seul le document part à l'imprimante ── */
  body > :not(.impression) { display: none !important; }

  /* L'identifiant, et pas seulement la classe : `page.css` impose `[hidden] { display: none !important }` et,
     une fois le site construit, il est chargé APRÈS cette feuille ; à importance égale, il faut gagner par la
     spécificité (vu au banc sur la construction : une page blanche). */
  #impression.impression {
    display: block !important;
    font-family: var(--police, 'Playfair', Georgia, serif); font-size: 9pt; line-height: 1.38; color: #0F172A;
    font-variant-numeric: lining-nums tabular-nums;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    orphans: 2; widows: 2;
  }
  .impression * { box-sizing: border-box; }
  .impression p, .impression h1, .impression h2, .impression dl, .impression dd { margin: 0; }

  /* ── L'en-tête : le logo, la date ── */
  .imp-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 8mm; padding-bottom: 3mm; border-bottom: 1.2pt solid #D4AF37; margin-bottom: 4.5mm; }
  .imp-logo { display: block; height: 11mm; width: auto; }
  .imp-date { font-size: 7.5pt; letter-spacing: .14em; text-transform: uppercase; color: #5A6B82; }

  /* ── La voiture ── */
  .imp-vehicule { margin-bottom: 4mm; }
  .imp-vehicule h1 { font-family: var(--titre, 'Playfair', Georgia, serif); font-size: 20pt; font-weight: 600; line-height: 1.1; color: #0B2A4A; letter-spacing: -.01em; }
  .imp-gen { margin-top: 1mm !important; font-size: 10pt; color: #0B2A4A; }
  .imp-codes { margin-top: .8mm !important; font-size: 8pt; color: #5A6B82; }

  /* ── Les deux prix ── */
  .imp-deux-prix { margin-bottom: 4.5mm; break-inside: avoid; }
  .imp-prix-rangee { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 4mm; }
  .imp-prix { border: .75pt solid #E7E2D6; border-top: 2pt solid #0B2A4A; border-radius: 1.5mm; padding: 2.6mm 3.5mm 2.8mm; }
  .imp-prix-reprise { border-top-color: #D4AF37; }
  .imp-prix-lab { font-size: 7pt; letter-spacing: .14em; text-transform: uppercase; color: #5A6B82; font-weight: 600; }
  .imp-prix-n { margin-top: .6mm !important; font-family: var(--titre, 'Playfair', Georgia, serif); font-size: 19pt; font-weight: 600; line-height: 1.1; color: #0B2A4A; }
  .imp-prix-reprise .imp-prix-n { color: #8A6B12; }
  .imp-prix-sous { margin-top: .4mm !important; font-size: 8pt; color: #5A6B82; }
  .imp-deux-prix .imp-note { margin-top: 1.6mm !important; }

  /* ── Les problèmes majeurs et les jauges, en version simple ── */
  .imp-synthese { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 7mm; margin-bottom: 5mm; break-inside: avoid; }
  .imp-synthese > :only-child { grid-column: 1 / -1; }
  .imp-jauges { display: grid; gap: 3.5mm; align-content: start; }
  .imp-jauge-lab { font-size: 7pt; letter-spacing: .14em; text-transform: uppercase; color: #5A6B82; font-weight: 600; }
  .imp-jauge-n { margin-top: .4mm !important; font-size: 12pt; font-weight: 600; color: #0B2A4A; }
  .imp-jauge-n small { display: inline-block; margin-left: 2.5mm; font-size: 8.8pt; font-weight: 600; }
  .imp-jauge-n small::first-letter { text-transform: uppercase; }
  .imp-trait { display: block; position: relative; height: 1.3mm; margin-top: 1.2mm; background: #ECE8DE; border-radius: .65mm; overflow: hidden; }
  .imp-trait i { display: block; height: 100%; width: calc(var(--pos, 0) * 1%); background: #0B2A4A; border-radius: .65mm; }
  .imp-jauge-revente.n-vert i { background: #1D6F4B; } .imp-jauge-revente.n-vert small { color: #1D6F4B; }
  .imp-jauge-revente.n-orange i { background: #94580A; } .imp-jauge-revente.n-orange small { color: #94580A; }
  .imp-jauge-revente.n-rouge i { background: #B02A1F; } .imp-jauge-revente.n-rouge small { color: #B02A1F; }
  .imp-jauge-fiabilite i { background: linear-gradient(90deg, #0B2A4A, #D4AF37); }

  /* ── Les rubriques : deux par rangée quand elles sont courtes ── */
  .imp-rubriques { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5mm 7mm; align-items: start; }
  .imp-rub { border-top: .75pt solid #D9D2C1; padding-top: 2.2mm; min-width: 0; }
  .imp-large { grid-column: 1 / -1; }
  .imp-rub h2 { font-family: var(--police, 'Playfair', Georgia, serif); font-size: 7pt; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8A6B12; break-after: avoid; }
  .imp-num { color: #8A6B12; margin-right: 1.2mm; }
  .imp-phrase { margin: .6mm 0 1.8mm !important; font-family: var(--titre, 'Playfair', Georgia, serif); font-size: 12pt; font-weight: 600; line-height: 1.22; color: #0B2A4A; break-after: avoid; }
  .imp-phrase em { font-style: italic; color: #8A6B12; }
  .imp-phrase small { font-size: 6.5pt; letter-spacing: .14em; text-transform: uppercase; color: #5A6B82; margin-left: 1.5mm; font-style: normal; vertical-align: middle; }
  .imp-texte { margin: 1.2mm 0 !important; }
  .imp-texte b { color: #0B2A4A; }
  .imp-note { margin: 1mm 0 !important; font-size: 7.8pt; color: #5A6B82; }
  .imp-sous-titre { margin: 2.4mm 0 .6mm !important; font-size: 7pt; letter-spacing: .14em; text-transform: uppercase; color: #5A6B82; font-weight: 600; break-after: avoid; }

  /* Les tableaux : une ligne ne se coupe jamais, l'en-tête se répète en haut de page. */
  .imp-table { width: 100%; border-collapse: collapse; margin: 1.2mm 0; font-size: 8.4pt; }
  .imp-table thead { display: table-header-group; }
  .imp-table tr { break-inside: avoid; }
  .imp-table th { text-align: left; font-size: 6.6pt; letter-spacing: .1em; text-transform: uppercase; color: #5A6B82; font-weight: 600; padding: 0 2mm .8mm 0; border-bottom: .75pt solid #0B2A4A; }
  .imp-table td { padding: .85mm 2mm .85mm 0; border-bottom: .5pt solid #ECE8DE; vertical-align: top; }
  .imp-table .d { text-align: right; white-space: nowrap; }
  .imp-table th:last-child, .imp-table td:last-child { padding-right: 0; }
  .imp-pannes td:first-child { font-weight: 600; color: #0B2A4A; }
  /* Les tableaux de chiffres (statistiques, export, mouvements) : serrés à gauche, pas étirés sur toute la largeur. */
  .imp-chiffre { width: auto; min-width: 55%; }
  .imp-chiffre th, .imp-chiffre td { padding-right: 6mm; }
  .imp-pannes td:last-child { color: #3A4452; }
  .imp-pannes td.d { font-weight: 600; color: #0B2A4A; }
  .imp-annonces td:nth-child(4) { font-size: 7.4pt; color: #3A4452; }
  .imp-annonces td:last-child { font-weight: 600; color: #0B2A4A; }
  .imp-motos td:last-child { font-size: 7.4pt; color: #3A4452; }

  /* Les couples libellé · valeur : les chiffres d'une rubrique, la fiche, les cantons. */
  .imp-paires { display: grid; grid-template-columns: repeat(auto-fill, minmax(36mm, 1fr)); gap: 1.4mm 4mm; margin: 1.2mm 0; }
  .imp-paires > div { break-inside: avoid; min-width: 0; }
  .imp-paires dt { font-size: 6.6pt; letter-spacing: .1em; text-transform: uppercase; color: #5A6B82; font-weight: 600; }
  .imp-paires dd { font-size: 9.2pt; font-weight: 600; color: #0B2A4A; }
  .imp-chiffres dd { font-size: 11pt; }
  .imp-colonnes { grid-template-columns: repeat(auto-fill, minmax(38mm, 1fr)); gap: 0 5mm; }
  .imp-colonnes > div { display: flex; justify-content: space-between; gap: 2mm; border-bottom: .5pt solid #ECE8DE; padding: .6mm 0; }
  .imp-colonnes dt { font-size: 8.2pt; letter-spacing: 0; text-transform: none; color: #0F172A; font-weight: 400; }
  .imp-colonnes dd { font-size: 8.4pt; white-space: nowrap; }
  .imp-fiche { grid-template-columns: repeat(auto-fill, minmax(42mm, 1fr)); }
  .imp-fiche dd { font-size: 8.6pt; }
  .imp-lignes { grid-template-columns: minmax(0, 1fr); }
  .imp-lignes dd { font-size: 8.8pt; font-weight: 400; color: #0F172A; }
}

/* Hors impression, la feuille n'existe pas. */
.impression { display: none; }