/* Page de présentation de l'arbre en ligne (/arbre-genealogique) */
.pa-hero { padding: calc(var(--nav-height, 70px) + var(--space-12)) 0 var(--space-12);
  background: radial-gradient(1200px 500px at 85% 20%, var(--clr-primary-light), transparent 60%), var(--clr-bg); }
.pa-hero__interieur { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.pa-eyebrow { display: inline-block; font-size: var(--text-sm); font-weight: 600; color: var(--clr-primary); background: var(--clr-primary-light);
  padding: 4px 12px; border-radius: var(--radius-full); margin-bottom: var(--space-4); }
.pa-titre { font-family: var(--font-serif); font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.1; margin: 0 0 var(--space-4); color: var(--clr-text); }
.pa-titre em { color: var(--clr-primary); font-style: italic; }
.pa-sous-titre { font-size: var(--text-lg); color: var(--clr-text-secondary); max-width: 560px; margin: 0 0 var(--space-6); line-height: 1.6; }
.pa-boutons { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-8); }
.pa-recherche { background: var(--clr-bg-elevated); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); max-width: 620px; }
.pa-recherche__titre { display: block; font-weight: 700; margin-bottom: var(--space-3); color: var(--clr-text); }
.pa-recherche__champs { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-2); }
.pa-recherche__chiffres { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--clr-text-secondary); }

.pa-hero__visuel { display: flex; justify-content: center; }
.pa-arbre { position: relative; display: flex; flex-direction: column; align-items: center; gap: 34px; padding: var(--space-6);
  background: var(--clr-bg-elevated); border: 1px solid var(--clr-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.pa-arbre__ligne { display: flex; gap: 10px; position: relative; }
.pa-arbre__ligne--2 { gap: 150px; }
.pa-arbre__ligne::after { content: ''; position: absolute; left: 25%; right: 25%; bottom: -18px; border-top: 1.5px solid var(--clr-text-muted); }
.pa-arbre__ligne--3::after { display: none; }
.pa-case { display: flex; gap: 6px; align-items: center; width: 118px; padding: 5px 6px; background: var(--clr-bg);
  border: 1px solid var(--clr-border-strong); border-left: 4px solid #3D6FB0; border-radius: var(--radius-sm); font-size: 11px; line-height: 1.2; }
.pa-case--F { border-left-color: #C0508A; }
.pa-case--focus { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); width: 140px; }
.pa-case__photo { width: 24px; height: 30px; flex-shrink: 0; border-radius: 3px; background: var(--clr-bg-secondary); }
.pa-case__texte { display: flex; flex-direction: column; min-width: 0; }
.pa-case__texte span, .pa-case__texte strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-case__texte small { opacity: .75; }
.pa-bulle { position: absolute; font-size: var(--text-xs); font-weight: 600; background: var(--clr-bg-elevated); border: 1px solid var(--clr-border);
  border-radius: var(--radius-full); padding: 4px 10px; box-shadow: var(--shadow-md); white-space: nowrap; }
.pa-bulle--1 { right: -18px; top: 46%; }
.pa-bulle--2 { left: -26px; bottom: 22%; }
.pa-bulle--3 { right: 10%; bottom: -14px; }

.pa-section { padding: var(--space-16) 0; }
.pa-atouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.pa-atout { background: var(--clr-bg-elevated); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.pa-atout__icone { font-size: 1.8rem; }
.pa-atout h3 { font-size: var(--text-lg); margin: var(--space-2) 0; color: var(--clr-text); }
.pa-atout p { margin: 0; color: var(--clr-text-secondary); font-size: var(--text-sm); line-height: 1.6; }

.pa-etapes-section { padding: var(--space-16) 0; background: var(--clr-bg-secondary); }
.pa-etapes { counter-reset: etape; list-style: none; padding: 0; margin: 0 auto var(--space-8); max-width: 760px; display: grid; gap: var(--space-4); }
.pa-etapes li { counter-increment: etape; position: relative; padding: var(--space-4) var(--space-4) var(--space-4) 64px; background: var(--clr-bg-elevated);
  border: 1px solid var(--clr-border); border-radius: var(--radius-lg); color: var(--clr-text-secondary); }
.pa-etapes li::before { content: counter(etape); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
  border-radius: 50%; background: var(--clr-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.pa-etapes strong { color: var(--clr-text); }
.pa-centre { text-align: center; display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

.pa-faq { max-width: 820px; }
.pa-faq details { background: var(--clr-bg-elevated); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); }
.pa-faq summary { font-weight: 700; cursor: pointer; color: var(--clr-text); }
.pa-faq p { margin: var(--space-3) 0 0; color: var(--clr-text-secondary); line-height: 1.6; }

@media (max-width: 1024px) {
  .pa-hero__interieur { grid-template-columns: 1fr; }
  .pa-hero__visuel { display: none; }
  .pa-atouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pa-atouts { grid-template-columns: 1fr; }
  .pa-recherche__champs { grid-template-columns: 1fr; }
}
[data-theme="dark"] .pa-case--focus, [data-theme="dark"] .pa-etapes li::before { color: var(--clr-text-inverse); }