.familyDoorPage { background: var(--paper); color: var(--ink); }
.familyDoorHero { padding: 50px 0 74px; border-bottom: 1px solid var(--line); background: var(--white); }
.familyDoorBreadcrumb { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 50px; color: var(--muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.familyDoorBreadcrumb a:hover { color: var(--accent); }
.familyDoorHeroGrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 86px; align-items: end; }
.familyDoorKicker, .familyDoorHeading > p, .familyDoorCard > span, .familyDoorEmpty > span { color: var(--accent); font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.familyDoorHero h1 { max-width: 820px; margin: 16px 0 24px; font-size: clamp(45px, 6.6vw, 78px); line-height: .98; letter-spacing: -.06em; }
.familyDoorLead { max-width: 67ch; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.72; }
.familyDoorStatus { padding: 24px; border-top: 5px solid var(--signal); background: var(--ink); color: #fff; }
.familyDoorStatus > span { color: var(--signal); font-family: var(--font-mono); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.familyDoorStatus strong { display: block; margin: 26px 0 14px; font-size: 25px; line-height: 1.15; }
.familyDoorStatus p { margin: 0; color: #c5cad3; font-size: 12px; line-height: 1.7; }
.familyDoorDirectory { padding-block: 105px; }
.familyDoorHeading { display: grid; grid-template-columns: 170px minmax(0, 760px); gap: 40px; margin-bottom: 50px; }
.familyDoorHeading h2 { margin: 0 0 16px; font-size: clamp(35px, 5vw, 54px); line-height: 1.03; letter-spacing: -.05em; }
.familyDoorHeading div > p { max-width: 65ch; margin: 0; color: var(--muted); line-height: 1.7; }
.familyDoorGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.familyDoorCard { min-height: 255px; display: flex; flex-direction: column; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
a.familyDoorCard { transition: background .2s ease, color .2s ease; }
a.familyDoorCard:hover { background: var(--accent); color: #fff; }
.familyDoorCard h3 { max-width: 19ch; margin: 46px 0 15px; font-size: 26px; line-height: 1.1; letter-spacing: -.04em; }
.familyDoorCard p { max-width: 58ch; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
a.familyDoorCard:hover p, a.familyDoorCard:hover > span { color: #fff; }
.familyDoorCard b { margin-top: auto; padding-top: 23px; font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
.familyDoorEmpty { max-width: 760px; padding: 28px; border-left: 5px solid var(--accent); background: var(--white); }
.familyDoorEmpty p { margin: 14px 0 0; font-size: 17px; line-height: 1.7; }
.familyDoorMethod { padding-block: 102px; background: var(--ink); color: #fff; }
.familyDoorHeading.inverse > p { color: var(--signal); }
.familyDoorHeading.inverse h2 { max-width: 680px; }
.familyDoorPrinciples { margin: 0; padding: 0; border-top: 1px solid #374052; list-style: none; }
.familyDoorPrinciples li { display: grid; grid-template-columns: 100px minmax(0, 1fr); padding: 27px 0; border-bottom: 1px solid #374052; }
.familyDoorPrinciples li > span { color: var(--signal); font-family: var(--font-mono); font-size: 10px; font-weight: 800; }
.familyDoorPrinciples strong { font-size: 21px; }
.familyDoorPrinciples p { max-width: 68ch; margin: 8px 0 0; color: #bdc4cf; font-size: 13px; line-height: 1.65; }
@media (max-width: 780px) {
  .familyDoorHeroGrid, .familyDoorHeading { grid-template-columns: 1fr; gap: 34px; }
  .familyDoorGrid { grid-template-columns: 1fr; }
  .familyDoorDirectory, .familyDoorMethod { padding-block: 76px; }
}
@media (max-width: 520px) {
  .familyDoorHero { padding: 36px 0 56px; }
  .familyDoorBreadcrumb { margin-bottom: 36px; }
  .familyDoorHero h1 { font-size: 44px; }
  .familyDoorPage[lang]:not([lang="fr"]) .familyDoorHero h1 { hyphens: auto; overflow-wrap: anywhere; }
  /*
   * « hyphens: auto » reste sans effet : le moteur de rendu ne dispose pas de
   * dictionnaire de césure allemand, et « Planungsentscheidung » mesure 392 px
   * pour 327 px disponibles à 44 px. « overflow-wrap: anywhere » évitait le
   * débordement mais coupait au milieu du mot, sans trait d'union. Le corps
   * réduit fait tenir le composé sur sa ligne ; c'est déjà le remède appliqué
   * aux autres héros allemands dans « globals.css », dont ce gabarit était la
   * seule exception. Les sept autres portes de famille allemandes tiennent
   * largement à cette taille.
   */
  .familyDoorPage[lang="de"] .familyDoorHero h1 { font-size: clamp(33px, 9vw, 54px); }
  .familyDoorPrinciples li { grid-template-columns: 46px minmax(0, 1fr); }
}