/* Pédigré à imprimer (pedigree-print.php) : une feuille A4 paysage.
   À l'écran, la feuille est montrée comme un aperçu ; à l'impression, seule la feuille sort. */

@page { size: A4 landscape; margin: 12mm; }

:root {
  --ink: #1F1B17; --muted: #6E655C; --line: #D9D1C7; --accent: #B5532F; --head: #F7EDE6;
  --ok: #3E7A4F; --warn: #A86F12; --bad: #B23A2E; --wait: #7A7A7A;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", Arial, sans-serif;
  --serif: "Shippori Mincho", "Hiragino Mincho ProN", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
/* Téléphone : empêche le navigateur de grossir le texte tout seul (ça faisait déborder les cases). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.pp-page { background: #E9E4DE; color: var(--ink); font-family: var(--sans); -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* ---------------------------------------------------------------- barre d'options (écran seulement) */
.pp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 18px; background: #fff; border-bottom: 1px solid var(--line); font-size: .92rem; position: sticky; top: 0; z-index: 2; }
.pp-bar label { display: inline-flex; align-items: center; gap: 6px; }
.pp-bar select { font: inherit; padding: 3px 6px; }
.pp-back { color: var(--accent); text-decoration: none; font-weight: 700; margin-right: auto; }
.pp-print { font: inherit; font-weight: 700; color: #fff; background: var(--accent); border: 0; border-radius: 999px; padding: 8px 18px; cursor: pointer; }
.pp-print-2 { color: var(--accent); background: #fff; border: 1.5px solid var(--accent); }
.pp-print[disabled] { opacity: .6; cursor: wait; }
.pp-hint { flex-basis: 100%; color: var(--muted); font-size: .82rem; }

/* ---------------------------------------------------------------- la feuille */
.pp-stage { padding: 24px; overflow-x: auto; }
.pp-sheet { width: 297mm; height: 210mm; margin: 0 auto; padding: 8mm 9mm 6mm; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.18);
  display: flex; flex-direction: column; gap: 3mm; overflow: hidden; }

.pp-head { display: flex; align-items: center; gap: 6mm; border-bottom: .4mm solid var(--accent); padding-bottom: 2.5mm; }
.pp-logo { height: 13mm; width: auto; }
.pp-dog { flex: 1; min-width: 0; }
.pp-dog h1 { margin: 0; font-family: var(--serif); font-size: 17pt; line-height: 1.15; }
.pp-dog h1 .kj { font-size: 12pt; font-weight: 500; margin-left: 3mm; color: var(--muted); }
.pp-dog p { margin: .6mm 0 0; font-size: 8.5pt; color: var(--muted); }
.pp-dog .ttl { margin: 0; color: var(--accent); font-weight: 700; font-size: 8pt; }
.pp-coi { text-align: right; font-size: 8pt; color: var(--muted); line-height: 1.3; }
.pp-coi b { color: var(--ink); font-size: 11pt; }
.sx { font-weight: 400; color: var(--muted); font-size: .85em; }

.pp-tree { flex: 1; min-height: 0; display: grid; border: .3mm solid var(--line); border-radius: 2mm; overflow: hidden; }
.g3 .pp-tree { grid-template-columns: 1fr 1fr 1.25fr; }
.g4 .pp-tree { grid-template-columns: 1fr 1fr 1fr 1.3fr; }
.g5 .pp-tree { grid-template-columns: .9fr .9fr 1fr 1.1fr 1.35fr; }
.pp-h { background: var(--head); color: var(--accent); font-weight: 700; font-size: 7.5pt; padding: 1.2mm 2.5mm; border-right: .3mm solid var(--line); border-bottom: .3mm solid var(--line); }

/* Une case : sa hauteur est fixée par la grille ; le contenu est réglé selon la génération. */
.pp { min-height: 0; overflow: hidden; display: flex; align-items: center; gap: 2mm; padding: 1mm 2.5mm;
  border-right: .3mm solid var(--line); border-bottom: .3mm solid var(--line); }
.pp .tx { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pp .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.pp .ttl { color: var(--accent); font-weight: 700; font-size: 6.5pt; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pp .kj { font-family: var(--serif); color: var(--muted); }
.pp .rg, .pp .mt { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp .pic { flex: 0 0 auto; display: block; }
.pp .pic img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 1.2mm; }

/* Parents : photo au-dessus, au centre */
.pp.d1 { flex-direction: column; justify-content: center; text-align: center; gap: 1.5mm; }
.pp.d1 .tx { align-items: center; }
.pp.d1 .pic { height: 42mm; max-width: 100%; }
.pp.d1 .nm { font-size: 10.5pt; white-space: normal; }
.pp.d1 .kj { font-size: 9pt; }
.pp.d1 .rg, .pp.d1 .mt { font-size: 7.5pt; white-space: normal; }
/* Grands-parents : photo à gauche */
.pp.d2 .pic { height: 24mm; max-width: 32mm; }
.pp.d2 .nm { font-size: 9pt; white-space: normal; }
.pp.d2 .kj { font-size: 8pt; }
.pp.d2 .rg, .pp.d2 .mt { font-size: 7pt; }
/* Arrière-grands-parents */
.pp.d3 .pic { height: 14mm; max-width: 19mm; }
.pp.d3 .nm { font-size: 8pt; white-space: normal; }
.pp.d3 .kj { font-size: 7pt; }
.pp.d3 .rg, .pp.d3 .mt, .pp.d3 .ttl { font-size: 6.4pt; }
/* 4e génération : deux lignes */
.pp.d4 { padding-top: .4mm; padding-bottom: .4mm; gap: 1.5mm; }
.pp.d4 .pic { height: 7.5mm; max-width: 10mm; }
.pp.d4 .tx { line-height: 1.15; }
.pp.d4 .nm { font-size: 7pt; white-space: nowrap; }
.pp.d4 .rg { font-size: 5.8pt; }
.pp.d4 .health { display: none; }
/* 5e génération : une ligne */
.pp.d5 { padding-top: 0; padding-bottom: 0; }
.pp.d5 .tx { flex-direction: row; align-items: baseline; gap: 1.5mm; white-space: nowrap; }
.pp.d5 .nm { font-size: 6.2pt; flex: 0 1 auto; }
.pp.d5 .rg { font-size: 5.5pt; flex: 1 1 auto; }
.pp.d5 .sx { display: none; }

/* 3 générations : les cases sont plus hautes, tout est un peu plus grand */
.g3 .pp.d1 .pic { height: 50mm; }
.g3 .pp.d2 .pic { height: 28mm; max-width: 38mm; }
.g3 .pp.d3 .pic { height: 18mm; max-width: 24mm; }
.g3 .pp.d3 .nm { font-size: 9pt; white-space: normal; }
.g3 .pp.d3 .kj { font-size: 8pt; }
.g3 .pp.d3 .rg, .g3 .pp.d3 .mt { font-size: 7pt; }
/* 5 générations : les premières colonnes sont plus étroites */
.g5 .pp.d1 .pic { height: 36mm; }
.g5 .pp.d2 .pic { height: 20mm; max-width: 20mm; }
.g5 .pp.d3 .nm { font-size: 7.4pt; }
.g5 .pp.d3 .pic { height: 11mm; max-width: 15mm; }
.g5 .pp.d3 .kj { display: none; }

/* Santé */
.pp .health { display: flex; flex-wrap: wrap; gap: .8mm; margin-top: .6mm; }
.pp.d1 .health { justify-content: center; }
.pp .hb { font-size: 5.8pt; font-weight: 700; padding: .1mm 1.2mm; border-radius: 3mm; border: .25mm solid currentColor; white-space: nowrap; }
.hb-ok { color: var(--ok); } .hb-warn { color: var(--warn); } .hb-bad { color: var(--bad); } .hb-wait { color: var(--wait); }

.pp.empty { background: #FBF9F7; }

.pp-foot { display: flex; justify-content: space-between; font-size: 7pt; color: var(--muted); }

/* ---------------------------------------------------------------- petit écran : la feuille est réduite */
@media screen and (max-width: 1180px) { .pp-sheet { zoom: .75; } }
@media screen and (max-width: 860px)  { .pp-sheet { zoom: .5; } .pp-stage { padding: 12px; } }
@media screen and (max-width: 560px)  { .pp-sheet { zoom: .33; } }

/* ---------------------------------------------------------------- impression */
@media print {
  body.pp-page { background: #fff; }
  .pp-bar { display: none; }
  .pp-stage { padding: 0; overflow: visible; }
  /* La feuille prend la largeur imprimable et une hauteur qui tient dans une page A4 paysage,
     même avec les marges ajoutées par le téléphone (iPhone, Android) : une seule page. */
  html, body { height: auto; }
  .pp-sheet { zoom: 1 !important; box-shadow: none; margin: 0; width: 100%; height: 182mm; padding: 0;
    page-break-after: avoid; break-after: avoid; page-break-inside: avoid; break-inside: avoid; }
}