/* Fibre Herd — arbre pedigree de la fiche animal (pages/troupeau/animal.php,
   impression ?print=pedigree, mockups/animal.html).
   Reprend les codes de la démo « Huit volets, une fiche » (visite-fiche) :
   cartes blanches arrondies, nom en Georgia, sous-titre gris, liaisons vert clair,
   fond crème. Liste imbriquée <ul>/<li> : 1 animal → 2 parents → 4 → 8.
   Bureau : arbre horizontal pleine largeur. Tablette : défilement horizontal.
   Téléphone (<= 640px) : arbre vertical indenté. Impression : horizontal, lignes visibles. */
.fh-ped {
  --ped-gap: 2.4rem;
  --ped-line: #b9c9a6;
  --ped-line-w: 2px;
  --ped-ink: #1c1915;
  --ped-sub: #5f6455;
  --ped-card-line: #e6e2d8;
  margin: .75rem 0 1rem;
  padding: 1rem 1.1rem .9rem;
  background: #f7f6f1;
  border: 1px solid var(--ped-card-line);
  border-radius: 14px;
}
.fh-ped-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: .15rem;
}
.fh-ped-scroll:focus-visible { outline: 3px solid #6A9440; outline-offset: 3px; border-radius: 8px; }
.fh-ped-inner { min-width: 780px; }
.fh-ped-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--ped-gap);
  margin: 0 0 .55rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ped-sub);
}
.fh-ped-tree,
.fh-ped-kids { list-style: none; margin: 0; padding: 0; }
.fh-ped-node { position: relative; display: flex; align-items: center; margin: 0; }
.fh-ped-node > .fh-ped-card { flex: 1 1 0; min-width: 0; }
.fh-ped-g0 > .fh-ped-kids { flex: 3 1 0; }
.fh-ped-g1 > .fh-ped-kids { flex: 2 1 0; }
.fh-ped-g2 > .fh-ped-kids { flex: 1 1 0; }
/* Colonnes de même largeur (alignées sur les intitulés) quand les unités de conteneur existent */
@supports (width: 1cqw) {
  .fh-ped-inner { container-type: inline-size; }
  .fh-ped-node > .fh-ped-card { flex: 0 0 calc((100cqw - 3 * var(--ped-gap)) / 4); }
  .fh-ped-g0 > .fh-ped-kids,
  .fh-ped-g1 > .fh-ped-kids,
  .fh-ped-g2 > .fh-ped-kids { flex: 1 1 auto; min-width: 0; }
}
.fh-ped-kids {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: var(--ped-gap);
}
/* trait parent → colonne verticale */
.fh-ped-kids::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: calc(var(--ped-gap) / 2);
  border-top: var(--ped-line-w) solid var(--ped-line);
  transform: translateY(-50%);
}
.fh-ped-kids > .fh-ped-node { padding: .32rem 0; }
.fh-ped-g3 { padding: .2rem 0 !important; }
/* colonne verticale (deux moitiés) + trait vers la carte enfant */
.fh-ped-kids > .fh-ped-node::before,
.fh-ped-kids > .fh-ped-node::after {
  content: "";
  position: absolute;
  left: calc(var(--ped-gap) / -2);
}
.fh-ped-kids > .fh-ped-node::before {
  top: 50%;
  width: calc(var(--ped-gap) / 2);
  border-top: var(--ped-line-w) solid var(--ped-line);
  transform: translateY(-50%);
}
.fh-ped-kids > .fh-ped-node::after {
  border-left: var(--ped-line-w) solid var(--ped-line);
  margin-left: calc(var(--ped-line-w) / -2);
}
.fh-ped-kids > .fh-ped-node:first-child::after { top: calc(50% - var(--ped-line-w) / 2); bottom: 0; }
.fh-ped-kids > .fh-ped-node:last-child::after { top: 0; bottom: calc(50% - var(--ped-line-w) / 2); }

/* Cartes */
.fh-ped-card {
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  padding: .55rem .8rem .5rem;
  background: #fff;
  border: 1px solid var(--ped-card-line);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(60, 50, 30, .07);
  color: var(--ped-ink);
  text-decoration: none;
  line-height: 1.3;
}
.fh-ped-card__name {
  display: block;
  padding-right: .9rem;
  font-family: Georgia, "Noto Serif", "Times New Roman", serif;
  font-size: 1.04rem;
  color: var(--ped-ink);
  overflow-wrap: anywhere;
}
.fh-ped-card__sub {
  display: block;
  margin-top: .08rem;
  font-family: Inter, "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .76rem;
  color: var(--ped-sub);
}
.fh-ped-card--empty .fh-ped-card__sub,
.fh-ped-card--manual .fh-ped-card__sub { display: flex; align-items: baseline; gap: .5rem; }
.fh-ped-card__subtxt { min-width: 0; }
.fh-ped-card__flid { display: none; }
.fh-ped-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
a.fh-ped-card { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
a.fh-ped-card .fh-ped-card__name { color: #2f4a17; }
a.fh-ped-card::after {
  content: "›";
  position: absolute;
  top: .4rem;
  right: .6rem;
  font-size: 1rem;
  color: #8aa36d;
}
a.fh-ped-card:hover { border-color: var(--ped-line); box-shadow: 0 6px 20px rgba(60, 50, 30, .12); }
a.fh-ped-card:hover .fh-ped-card__name { text-decoration: underline; text-underline-offset: 2px; }
a.fh-ped-card:focus-visible { outline: 3px solid #6A9440; outline-offset: 2px; }
.fh-ped-card--root {
  border-left: 4px solid #6A9440;
  padding-left: .85rem;
}
.fh-ped-card--root .fh-ped-card__name { font-size: 1.22rem; font-weight: 600; }
.fh-ped-g3 > .fh-ped-card { padding: .4rem .7rem .38rem; border-radius: 12px; }
.fh-ped-g3 > .fh-ped-card .fh-ped-card__name { font-size: .97rem; }
.fh-ped-card--empty {
  background: rgba(255, 255, 255, .45);
  border: 1.5px dashed #c9c4b6;
  box-shadow: none;
}
.fh-ped-node .fh-ped-card--empty .fh-ped-card__name {
  padding-right: 0;
  font-family: Inter, "Noto Sans", system-ui, sans-serif;
  font-size: .86rem;
  font-style: italic;
  color: var(--ped-sub);
}
.fh-ped-add {
  margin-left: auto;
  font-family: Inter, "Noto Sans", system-ui, sans-serif;
  font-size: .76rem;
  font-weight: 700;
  color: #3f5f1f;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fh-ped-add:focus-visible { outline: 2px solid #6A9440; outline-offset: 2px; border-radius: 3px; }
.fh-ped-hint {
  margin: .5rem 0 0;
  font-size: .78rem;
  color: var(--ped-sub);
}
.fh-ped-hint::after { content: " →"; }
.fh-ped-hint[hidden] { display: none; }

/* Tablette : arbre resserré pour tenir en portrait (~768–1023px) ; en dessous, défilement horizontal */
@media screen and (min-width: 641px) and (max-width: 1023px) {
  .fh-ped { --ped-gap: 1.5rem; padding: .9rem .8rem .8rem; }
  .fh-ped-inner { min-width: 660px; }
  .fh-ped-card { padding: .5rem .65rem .45rem; }
  .fh-ped-card__name { font-size: .98rem; }
  .fh-ped-g3 > .fh-ped-card .fh-ped-card__name { font-size: .92rem; }
}

/* Bureau large : un peu plus d’air */
@media screen and (min-width: 1200px) {
  .fh-ped { --ped-gap: 2.8rem; }
}

/* Téléphone : arbre vertical indenté (lecture de haut en bas : animal, père et sa lignée, mère et sa lignée) */
@media screen and (max-width: 640px) {
  .fh-ped { --ped-gap: 1.05rem; padding: .8rem .7rem .7rem; }
  .fh-ped-scroll { overflow: visible; }
  .fh-ped-inner { min-width: 0; }
  .fh-ped-cols { display: none; }
  .fh-ped-node { display: block; }
  .fh-ped-node > .fh-ped-card { width: 100%; }
  .fh-ped-kids { display: block; padding-left: var(--ped-gap); margin-left: .55rem; }
  .fh-ped-kids::before { display: none; }
  .fh-ped-kids > .fh-ped-node,
  .fh-ped-g3 { padding: .4rem 0 0 !important; }
  .fh-ped-kids > .fh-ped-node::before {
    top: calc(.4rem + 1.15rem);
    width: calc(var(--ped-gap) - .1rem);
    left: calc(var(--ped-gap) * -1);
  }
  .fh-ped-kids > .fh-ped-node::after,
  .fh-ped-kids > .fh-ped-node:first-child::after {
    left: calc(var(--ped-gap) * -1);
    top: 0;
    bottom: 0;
  }
  .fh-ped-kids > .fh-ped-node:last-child::after { bottom: auto; height: calc(.4rem + 1.15rem); }
  .fh-ped-card { padding: .45rem .7rem .42rem; }
  .fh-ped-card--root .fh-ped-card__name { font-size: 1.12rem; }
  .fh-ped-card__name { font-size: 1rem; }
  .fh-ped-hint { display: none !important; }
}

/* Impression (fiche entière ou page ?print=pedigree) : toujours horizontal, lignes visibles, pas de liens d’action */
@media print {
  .fh-ped {
    --ped-line: #6A9440;
    --ped-line-w: 1.5px;
    --ped-gap: 1.6rem;
    margin: .3rem 0 .5rem;
    padding: 0;
    background: none;
    border: 0;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .fh-ped-scroll { overflow: visible; }
  .fh-ped-inner { min-width: 0; }
  .fh-ped-card { box-shadow: none; border-color: #b9b4a6; break-inside: avoid; }
  .fh-ped-card--root { border-left-color: #6A9440; }
  .fh-ped-card--empty { border-color: #b9b4a6; background: none; }
  a.fh-ped-card::after { content: none; }
  a.fh-ped-card .fh-ped-card__name { color: var(--ped-ink); text-decoration: none; }
  .fh-ped-card__flid {
    display: block;
    flex: 1 0 100%;
    font: 7.5pt/1.2 ui-monospace, Menlo, Consolas, monospace;
    color: #555;
  }
  .fh-ped-add, .fh-ped-hint { display: none !important; }
  .fh-ped-tree { break-inside: avoid; }
}

/* Fiche v2 : le volet est déjà une carte, on retire le cadre de l’ancien bloc pedigree */
.fh-v2-section > .fh-pedigree { margin: .6rem 0 0; padding: 0; background: none; border: 0; border-radius: 0; }

/* Page « Ancêtres hors élevage » (pages/troupeau/pedigree.php) : l'arbre en champs */
.fh-pedx-side { margin: 1rem 0; }
.fh-pedx-side > .fh-form-section { margin-top: 0; }
.fh-pedx-parent { margin: 0 0 .75rem; }
.fh-pedx-branch { margin: 0 0 1rem; }
.fh-pedx-slot {
  margin: 0;
  padding: .6rem .85rem .75rem;
  border: 1px solid #e6e2d8;
  border-radius: 14px;
  background: #fff;
  min-width: 0;
}
.fh-pedx-slot legend {
  padding: 0 .35rem;
  font-family: Georgia, "Noto Serif", serif;
  font-size: 1rem;
  color: #1c1915;
}
.fh-pedx-slot--ro { background: #f7f6f1; border-style: dashed; border-color: #c9c4b6; }
.fh-pedx-slot--ro p { margin: .2rem 0 0; }
.fh-pedx-from { font-size: .85rem; }
.fh-pedx-n3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin: .6rem 0 0 1.4rem;
  padding-left: 1rem;
  border-left: 2px solid #b9c9a6;
}
.fh-pedx-n3 .fh-pedx-slot legend { font-size: .95rem; }
.fh-pedx-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: .2rem .7rem;
}
.fh-pedx-grid label { margin-top: .2rem; font-size: .82rem; }
.fh-pedx-grid input, .fh-pedx-grid select { width: 100%; box-sizing: border-box; }
.fh-pedx-link { grid-column: 1 / -1; }
.fh-pedx-grid--mc { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.3fr); }
.fh-pedx-n3 .fh-pedx-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.fh-pedx-actions { margin-top: 1rem; }
@media (max-width: 1100px) {
  .fh-pedx-n3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fh-pedx-grid, .fh-pedx-grid--mc, .fh-pedx-n3 .fh-pedx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fh-pedx-name { grid-column: 1 / -1; }
  .fh-pedx-n3 { margin-left: .5rem; padding-left: .7rem; }
  .fh-pedx-slot { padding: .5rem .65rem .65rem; }
}

/* Pedigree lisible (pedi1) : sexe, n° de puce / registre, étiquette ancêtre / hors élevage, compteur.
   Un seul accent vert (#6A9440), le reste en gris chaud ; rien ne change hors de l’arbre. */
.fh-ped-sex {
  margin-left: .15rem;
  font-family: "Noto Sans", "DejaVu Sans", system-ui, sans-serif;
  font-size: .82em;
  color: #6A9440;
}
.fh-ped-card__id {
  display: block;
  margin-top: .18rem;
  font-family: Inter, "Noto Sans", system-ui, sans-serif;
  font-size: .72rem;
  line-height: 1.3;
  color: var(--ped-sub);
  overflow-wrap: anywhere;
}
/* pedi2 : « Puce … · Registre … » (arbre, en-tête de fiche, liste du troupeau). Chaque élément reste sur une ligne,
   le retour à la ligne se fait entre la puce et le registre. */
.fh-ids__item { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.fh-ids__l { letter-spacing: .01em; }
.fh-ids__v {
  font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: .95em;
  color: var(--ped-ink, #1c1915);
}
.fh-ids__sep { color: var(--ped-sub, #5f6455); }
.fh-animal-ids { margin: .35rem 0 0; font-size: .85rem; line-height: 1.4; color: #5f6455; }
.fh-mc-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: .35rem 0 0; font-size: .85rem; font-weight: 400; line-height: 1.35; }
.fh-mc-suggest .fh-btn { margin: 0; }
.fh-mc-warn { font-size: .82rem; }
.fh-ped-tag { font-style: italic; }
.fh-ped-count {
  margin: .55rem 0 0;
  font-size: .78rem;
  color: var(--ped-sub);
}
@media screen and (max-width: 640px) {
  .fh-ped-card__id { font-size: .74rem; }
}
@media print {
  .fh-ped-card__id { font-size: 7pt; }
  .fh-ped-sex { color: #1c1915; }
}