/* Composition vitrine : réutilise les rôles de couleur et de typographie V5.
   Les cartes reprennent le catalogue clair de la vidéo, sans moteur de rendu. */
.fonctionnalites-v5{background:var(--uv-card);color:var(--uv-text)}
.fn-hero{position:relative;padding:clamp(8.5rem,13vw,11rem) 0 2.5rem;overflow:hidden;background:var(--uv-card)}
.fn-hero::before{content:"";position:absolute;inset:-30% 0 auto;height:44rem;background:radial-gradient(50% 55% at 50% 30%,color-mix(in oklch,var(--uv-hue) 22%,transparent),transparent 70%);pointer-events:none}
.fn-hero .shell{position:relative}
.fn-hero h1{font-size:clamp(2.4rem,5vw,4rem);font-weight:600;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.fn-hero .v5-head{margin-bottom:0}
.fn-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.8rem}
.fn-explore{padding:1.5rem 0 clamp(4.5rem,8vw,7rem);background:var(--uv-card)}
.fn-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.3rem;padding:.4rem;border:1px solid var(--uv-line-strong);border-radius:1.15rem;background:var(--uv-card)}
.fn-tabs button{display:flex;align-items:center;gap:.65rem;min-height:5.25rem;min-width:0;padding:.65rem .75rem;border:1px solid transparent;border-radius:.8rem;background:transparent;color:var(--uv-muted);text-align:left;font:inherit;font-size:.875rem;font-weight:500;line-height:1.4;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.fn-tabs img{width:2.75rem;height:2.75rem;object-fit:contain;flex:none;opacity:.6;transition:opacity .2s,transform .25s}
.fn-tabs button[aria-selected="true"]{border-color:var(--uv-line-strong);background:var(--uv-ground);color:var(--uv-text)}
.fn-tabs button[aria-selected="true"] img,.fn-tabs button:hover img{opacity:1;transform:translateY(-2px)}
.fn-tabs button:hover{color:var(--uv-text);background:var(--uv-ground)}
.fn-tabs button:focus-visible,.fn-panel:focus-visible{outline:2px solid var(--uv-text);outline-offset:3px}
.fn-panel[hidden],.fn-integration-group[hidden]{display:none}
.fn-panel{animation:fn-panel-in .35s ease-out}
.fn-overview{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;align-items:center;min-height:23rem;padding:2rem 3rem}
.fn-overview .eyebrow{color:var(--uv-muted)}
.fn-overview h2{max-width:33rem;font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.08;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.fn-overview p:not(.eyebrow){margin-top:1.2rem;max-width:30rem;color:var(--uv-muted);line-height:1.65}
.fn-overview>img{width:100%;max-width:23rem;height:auto;justify-self:center}
.fn-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.fn-feature{padding:1.5rem;border:1px solid var(--uv-line);border-radius:1rem;background:var(--uv-card)}
.fn-feature-index{display:block;margin-bottom:1.3rem;font-size:.75rem;color:var(--uv-muted);font-variant-numeric:tabular-nums}
.fn-feature h3{font-size:1.0625rem;letter-spacing:-.015em;font-weight:600;color:var(--uv-text)}
.fn-feature p{margin-top:.6rem;color:var(--uv-muted);font-size:.9375rem;line-height:1.6}
.fn-integrations{padding:0 clamp(.5rem,1.2vw,1rem);background:var(--uv-card);scroll-margin-top:6rem}
.fn-sheet{border-radius:clamp(1.4rem,3vw,2.2rem);padding:clamp(4rem,8vw,7rem) 0 5rem;background:var(--surface-sunken);color:var(--text)}
.fn-integrations .v5-head .eyebrow{color:var(--text-muted)}
.fn-integration-filters{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin:-.5rem 0 3.5rem}
.fn-integration-filters button{min-height:2.75rem;padding:.65rem 1rem;border:1px solid var(--line);border-radius:2rem;background:transparent;color:var(--text-muted);font:inherit;font-size:.8125rem;cursor:pointer;transition:background .2s,color .2s}
.fn-integration-filters button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--surface-raised)}
.fn-integration-filters button:hover{border-color:var(--text)}
.fn-integration-filters button:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.fn-integration-group{margin:0 0 3rem;animation:fn-panel-in .35s ease-out}
.fn-integration-group h3{margin:0 0 1.1rem;font-size:1.0625rem;font-weight:600;letter-spacing:-.015em}
.fn-tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.fn-tool{display:flex;align-items:center;gap:.85rem;min-height:6rem;min-width:0;padding:1.2rem 1.1rem;border:1px solid var(--line-subtle);border-radius:.85rem;background:var(--surface-raised);box-shadow:0 2px 12px color-mix(in oklch,var(--text) 3%,transparent);transition:opacity .55s ease,translate .6s cubic-bezier(.2,.7,.2,1),filter .55s ease,transform .25s,box-shadow .25s;transition-delay:calc(var(--order)*65ms),calc(var(--order)*65ms),calc(var(--order)*65ms),0ms,0ms}
.fn-tool:hover{transform:perspective(600px) rotateX(3deg) translateY(-3px);box-shadow:0 8px 20px color-mix(in oklch,var(--text) 9%,transparent)}
.fn-mark{display:grid;place-items:center;width:2rem;height:2rem;flex:none}
.fn-mark svg,.fn-mark img{width:2rem;height:2rem;object-fit:contain}
.fn-tool h4{font-size:.875rem;font-weight:600;letter-spacing:-.012em;color:var(--text)}
.fn-tool p{margin-top:.25rem;font-size:.75rem;line-height:1.4;color:var(--text-muted)}
.fn-reveal{opacity:0;translate:0 18px;filter:blur(3px)}
.fn-reveal.is-visible{opacity:1;translate:0 0;filter:blur(0)}
.fn-catalog-note{max-width:42rem;margin:2rem auto 0;text-align:center;font-size:.8125rem;line-height:1.7;color:var(--text-muted)}
.fn-integration-end{text-align:center;padding:3.5rem 0 0}
.fn-integration-end>span{font-size:1.5rem;font-weight:600;letter-spacing:-.025em}
.fn-integration-end>p{margin:.6rem 0 1.5rem;color:var(--text-muted);font-size:.9375rem}
@keyframes fn-panel-in{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1100px){.fn-tabs{display:flex;overflow-x:auto}.fn-tabs button{flex:1 0 11rem}.fn-overview{padding-inline:1.5rem}}
@media(max-width:800px){.fn-features{grid-template-columns:repeat(2,minmax(0,1fr))}.fn-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fn-overview{gap:1rem;padding-inline:.5rem;min-height:20rem}.fn-overview>img{max-width:17rem}}
@media(max-width:540px){.fn-hero{padding-top:8rem}.fn-tabs button{flex-basis:10.5rem;min-height:4.75rem}.fn-overview{grid-template-columns:1fr;padding:2.25rem 0 1.5rem;gap:.5rem}.fn-overview>img{max-width:15rem;grid-row:1}.fn-features{grid-template-columns:1fr}.fn-feature{padding:1.25rem}.fn-feature-index{margin-bottom:.6rem}.fn-tool-grid{grid-template-columns:1fr}.fn-tool{min-height:5rem}.fn-integration-filters{justify-content:flex-start;margin-bottom:2.5rem}.fn-actions{flex-direction:column;align-items:stretch}.fn-hero h1{font-size:2.4rem}.fn-integration-group{margin-bottom:2.5rem}.fn-catalog-note{text-align:left}}
@media(prefers-reduced-motion:reduce){.fn-panel,.fn-integration-group{animation:none}.fn-tabs button,.fn-tabs img,.fn-integration-filters button,.fn-tool{transition:none}.fn-tool:hover{transform:none}.fn-reveal{opacity:1;translate:none;filter:none}}

.fn-hero.v5-dark .v5-head .eyebrow{color:var(--uv-muted)}
/* Sans compteur, conserver les deux colonnes du pied de page sur téléphone. */
@media(max-width:640px){.fonctionnalites-v5 .fx-main:not(:has(.fx-counter)){grid-template-columns:repeat(2,minmax(0,1fr))}.fonctionnalites-v5 .fx-main nav{min-width:0}.fonctionnalites-v5 .fx-main nav a{overflow-wrap:anywhere}}
.fonctionnalites-v5{overflow-x:clip}
@media(max-width:360px){.fonctionnalites-v5 .topbar-in{gap:.35rem}.fonctionnalites-v5 .nav-trial{padding-inline:.6rem;font-size:.6875rem}.fonctionnalites-v5 .menu-toggle{padding-inline:.6rem}}
@media(max-width:640px){.fonctionnalites-v5 .topbar .menu-toggle,.fonctionnalites-v5 .topbar .nav-trial,.fonctionnalites-v5 .topbar .brand{min-height:44px}}