.fn-page{ --fn-filet: #b9c6a355; --fn-marge: max(6vw, 24px); }
.fn-intro{ padding: 160px var(--fn-marge) 72px; max-width: 1280px; margin: auto; }
.fn-intro h1{ font: 400 clamp(48px, 7vw, 104px)/1.02 var(--titre); letter-spacing: -.045em; margin: 0 0 28px; max-width: 14ch; }
.fn-precis{ font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; max-width: 58ch; margin: 0; opacity: .85; text-wrap: pretty; }
.fn-intro .fn-precis{ font-size: clamp(20px, 1.9vw, 26px); }
.fn-entree{ display: inline-block; margin-top: 28px; text-underline-offset: 5px; }
.fn-nav{ position: sticky; top: 70px; z-index: 10; background: var(--foret); display: flex; flex-wrap: wrap; gap: 0 22px; border-block: 1px solid var(--fn-filet); padding: 2px var(--fn-marge); }
.fn-nav a{ display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-decoration: none; border-bottom: 2px solid transparent; }
.fn-repere{ position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--sauge); opacity: 0; pointer-events: none; transition: transform 280ms cubic-bezier(.2, .7, .2, 1), width 280ms cubic-bezier(.2, .7, .2, 1), opacity 200ms; }
.fn-repere[data-pret]{ opacity: 1; }
@media (prefers-reduced-motion: reduce){.fn-repere{ transition: none; }
}
.fn-exemple{ max-width: 1000px; padding: 28px 24px; margin: auto; font-size: 13px; line-height: 1.6; color: var(--sauge); }
.fn-section{ padding: clamp(64px, 10vh, 112px) var(--fn-marge); scroll-margin-top: 150px; }
.fn-claire{ background: var(--ivoire); color: var(--foret); }
.fn-tete, .fn-interface{ max-width: 1280px; margin-inline: auto; min-width: 0; }
.fn-rep{ font-size: 14px; line-height: 1.4; margin: 0 0 16px; opacity: .8; }
.fn-tete h2{ font: 400 clamp(34px, 4.2vw, 64px)/1.06 var(--titre); letter-spacing: -.03em; margin: 0 0 24px; text-wrap: balance; }
.fn-roles{ font-size: 13px; margin: 20px 0 0; opacity: .7; }
.fn-liens{ display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 20px; }
.fn-liens a{ font-size: 15px; text-underline-offset: 4px; }
.fn-interface{ background: #fff; color: var(--foret); border: 1px solid var(--sauge); }
.fn-barre{ display: flex; justify-content: space-between; gap: 12px; background: var(--foret); color: var(--ivoire); padding: 14px 18px; font-size: 13px; line-height: 1.5; }
.fn-f-pleine .fn-tete{ margin-bottom: 48px; }
.fn-f-pleine .fn-tete h2{ font-size: clamp(40px, 5.4vw, 80px); max-width: none; }
.fn-f-pleine .fn-precis{ max-width: 64ch; }
.fn-f-trio .fn-tete{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: 48px; }
.fn-f-trio .fn-rep{ grid-column: 1 / -1; }
.fn-f-trio .fn-tete h2{ margin: 0; }
.fn-f-trio .fn-roles, .fn-f-trio .fn-liens{ grid-column: 2; margin-top: 12px; }
.fn-f-trio .fn-fiche dl{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.fn-f-trio .fn-fiche dl > div{ border-top: 1px solid var(--sauge); }
.fn-f-trio .fn-fiche dd{ font-size: 20px; }
.fn-f-gauche{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(32px, 5vw, 80px); align-items: center; max-width: none; }
.fn-f-gauche > *{ width: 100%; }
.fn-f-gauche .fn-tete{ margin: 0 0 0 auto; max-width: 560px; }
.fn-f-gauche .fn-interface{ margin: 0 auto 0 0; }
.fn-f-cadre{ display: grid; gap: 48px; }
.fn-f-cadre .fn-interface{ order: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); width: 100%; }
.fn-f-cadre .fn-barre{ grid-column: 1 / -1; }
.fn-f-cadre .fn-tete{ order: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 clamp(32px, 6vw, 96px); width: 100%; }
.fn-f-cadre .fn-rep{ grid-column: 1 / -1; }
.fn-f-cadre .fn-tete h2{ grid-row: 2 / 5; margin: 0; }
.fn-f-cadre .fn-tete > :not(.fn-rep):not(h2){ grid-column: 2; }
.fn-f-cadre .fn-precis{ margin-top: 0; }
.fn-f-rangee .fn-tete{ text-align: center; margin-bottom: 48px; }
.fn-f-rangee .fn-tete h2{ max-width: 18ch; margin-inline: auto; }
.fn-f-rangee .fn-precis{ margin-inline: auto; }
.fn-f-rangee .fn-liens{ justify-content: center; }
.fn-f-rangee .fn-fiche dl{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; }
.fn-f-rangee .fn-fiche dl > div{ border-top: 3px solid var(--foret); padding-top: 16px; }
.fn-f-rangee .fn-fiche dd{ font-size: 17px; }
.fn-f-miroir{ display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; max-width: none; }
.fn-f-miroir .fn-interface{ order: 1; width: 100%; margin: 0 0 0 auto; }
.fn-f-miroir .fn-tete{ order: 2; width: 100%; max-width: 460px; margin: 0 auto 0 0; }
.fn-f-miroir .fn-tete h2{ font-size: clamp(30px, 3.2vw, 48px); }
.fn-fiche{ padding: 24px; }
.fn-pied{ font-size: 13px; margin: 0 0 8px; opacity: .8; }
.fn-fiche h3{ font: 400 clamp(24px, 2.2vw, 32px)/1.2 var(--titre); margin: 0 0 20px; }
.fn-fiche dl{ margin: 0; }
.fn-fiche dl > div{ border-top: 1px solid var(--sauge); padding: 14px 0; }
.fn-fiche dt{ font-size: 13px; margin-bottom: 6px; opacity: .85; }
.fn-fiche dt span{ display: block; opacity: .9; font-size: 13px; margin-top: 2px; }
.fn-fiche dd{ margin: 0; font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.fn-outils{ display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; }
.fn-outils button, .fn-plan-bouton{ font: 500 14px var(--corps); min-height: 44px; padding: 10px 16px; border: 1px solid var(--foret); color: var(--foret); background: transparent; cursor: pointer; border-radius: 0; transition: background-color 150ms, color 150ms, transform 150ms cubic-bezier(.22, 1, .36, 1); }
.fn-outils button:active:not(:disabled), .fn-plan-bouton:active:not(:disabled){ transform: scale(.96); }
@media (prefers-reduced-motion: reduce){.fn-outils button, .fn-plan-bouton{ transition: none; }
.fn-outils button:active:not(:disabled), .fn-plan-bouton:active:not(:disabled){ transform: none; }
}
.fn-outils button[aria-pressed=true], .fn-plan-bouton[aria-pressed=true]{ color: var(--ivoire); background: var(--foret); }
.fn-plan{ position: relative; display: grid; align-content: start; background: var(--ivoire); min-height: 380px; }
.fn-plan-zone{ min-height: 340px; display: grid; }
.fn-plan-zone svg{ width: 100%; max-height: 420px; display: block; margin: auto; }
.fn-plan-bouton{ justify-self: start; margin: 0 16px 16px; }
.fn-plan .im-scene{ position: relative; overflow: hidden; background: var(--ivoire); color: var(--foret); height: 420px; min-height: 280px; }
.fn-plan .im-canvas{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.fn-plan .im-fallback{ position: absolute; inset: 0; display: grid; place-items: center; }
.fn-plan [data-vue="3d"] .im-fallback{ display: none; }
.fn-plan .im-label, .fn-plan .im-cote{ position: absolute; transform: translate(-50%, -50%); padding: 6px 9px; background: var(--ivoire); border: 1px solid var(--foret); font: 500 13px/1.4 var(--corps); white-space: nowrap; pointer-events: none; }
.fn-plan [hidden]{ display: none !important; }
.fn-carte-claude{ position: relative; height: 580px; min-width: 0; contain: layout paint style; --scene-ease: cubic-bezier(.2, .7, .2, 1); }
.fn-carte-claude .cm *{ transition: none !important; animation: none !important; }
.fn-carte-note{ font-size: 13px; line-height: 1.5; padding: 14px 18px; margin: 0; }
.fn-fin{ padding: 96px 24px 112px; text-align: center; max-width: 920px; margin: auto; }
.fn-fin h2{ font: 400 clamp(32px, 4.4vw, 56px)/1.1 var(--titre); letter-spacing: -.02em; text-wrap: balance; }
.fn-fin p{ font-size: 18px; line-height: 1.6; }
.fn-fin > a{ display: inline-block; margin: 20px 16px 0; }
.fn-page a:focus-visible, .fn-page button:focus-visible{ outline: 3px solid var(--sauge); outline-offset: 5px; }
.fn-claire a:focus-visible, .fn-claire button:focus-visible, .fn-interface button:focus-visible{ outline-color: var(--foret); }
@media (max-width: 1000px){.fn-f-trio .fn-tete, .fn-f-cadre .fn-tete{ grid-template-columns: 1fr; }
.fn-f-trio .fn-roles, .fn-f-trio .fn-liens, .fn-f-cadre .fn-tete > :not(.fn-rep):not(h2){ grid-column: 1; }
.fn-f-cadre .fn-tete h2{ grid-row: auto; margin-bottom: 20px; }
.fn-f-gauche, .fn-f-miroir{ grid-template-columns: 1fr; }
.fn-f-gauche .fn-tete, .fn-f-miroir .fn-tete{ max-width: none; margin: 0; }
.fn-f-miroir .fn-interface{ order: 2; }
.fn-f-miroir .fn-tete{ order: 1; }
.fn-f-cadre .fn-interface{ grid-template-columns: 1fr; }
.fn-f-trio .fn-fiche dl{ grid-template-columns: 1fr; }
.fn-f-rangee .fn-fiche dl{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.fn-carte-claude{ height: 620px; }
}
@media (max-width: 800px){.fn-intro{ padding-top: 112px; }
.fn-nav{ position: relative; top: auto; padding: 2px 24px; gap: 0 18px; }
.fn-section{ padding: 56px 24px; scroll-margin-top: 85px; }
.fn-fiche{ padding: 20px; }
.fn-plan .im-scene{ height: 320px; }
}
@media (max-width: 560px){.fn-f-rangee .fn-fiche dl{ grid-template-columns: 1fr; }
.fn-carte-claude{ height: 600px; }
}
@media (max-width: 528px){.fn-carte-claude{ height: auto; }
.fn-outils{ gap: 6px; padding: 12px; }
.fn-outils button{ font-size: 13px; padding: 9px 10px; }
}
.fn-liens a{ display: inline-block; padding-block: 6px; }