/* ═══════════════════════════════════════════════════════════════════════════
   SPINEBACK — Styles du site public
   ═══════════════════════════════════════════════════════════════════════════ */

@import url("tokens.css") ;

@view-transition { navigation: auto ; }
::view-transition-old(root) { animation: sb-vt-out 260ms var(--sb-ease-in-out) both ; }
::view-transition-new(root) { animation: sb-vt-in 520ms var(--sb-ease-out) both ; }
@keyframes sb-vt-out { to { opacity: 0 ; transform: translateY(-12px) ; } }
@keyframes sb-vt-in { from { opacity: 0 ; transform: translateY(18px) ; } }

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box ; }
html { -webkit-text-size-adjust: 100% ; scroll-behavior: smooth ; scroll-padding-top: 96px ; }
body {
	margin: 0 ; min-height: 100dvh ; display: flex ; flex-direction: column ;
	font-family: var(--sb-font-sans) ; font-size: var(--sb-fs-md) ; line-height: var(--sb-lh-body) ;
	color: var(--sb-ink) ; background: var(--sb-paper) ;
	-webkit-font-smoothing: antialiased ; text-rendering: optimizeLegibility ; font-feature-settings: "ss01" ;
}
body.is-locked { overflow: hidden ; }
img, video, svg { display: block ; max-width: 100% ; }
a { color: inherit ; }
button { font: inherit ; color: inherit ; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0 ; }
::selection { background: var(--sb-primary) ; color: #fff ; }
:focus-visible { outline: 2px solid var(--sb-sky) ; outline-offset: 3px ; border-radius: 4px ; }
.sr-only { position: absolute !important ; width: 1px ; height: 1px ; padding: 0 ; margin: -1px ; overflow: hidden ; clip: rect(0 0 0 0) ; white-space: nowrap ; border: 0 ; }
.skip-link { position: fixed ; left: 1rem ; top: -4rem ; z-index: 2000 ; padding: .75rem 1.25rem ; border-radius: var(--sb-radius-pill) ; background: var(--sb-ink) ; color: #fff ; text-decoration: none ; transition: top var(--sb-dur) var(--sb-ease-out) ; }
.skip-link:focus { top: 1rem ; }

main { flex: 1 ; }
.container { width: var(--sb-container) ; margin-inline: auto ; }
.container-wide { width: var(--sb-container-wide) ; margin-inline: auto ; }

/* ── Typographie ─────────────────────────────────────────────────────── */
.eyebrow {
	display: inline-flex ; align-items: center ; gap: .6rem ; margin-bottom: 1.25rem ;
	font-size: var(--sb-fs-xs) ; font-weight: 700 ; letter-spacing: .16em ; text-transform: uppercase ; color: var(--sb-primary) ;
}
.eyebrow::before { content: "" ; width: 1.75rem ; height: 1.5px ; background: currentColor ; border-radius: 2px ; transform-origin: left ; }
[data-theme="dark"] .eyebrow, [data-theme="accent"] .eyebrow { color: #A9B6F5 ; }
.align-center .eyebrow::after { content: "" ; width: 1.75rem ; height: 1.5px ; background: currentColor ; border-radius: 2px ; }

.h1, .h2, .h3 { font-weight: 500 ; letter-spacing: -0.025em ; text-wrap: balance ; }
.h1 { font-size: var(--sb-fs-4xl) ; line-height: 1.02 ; font-weight: 400 ; letter-spacing: -0.035em ; }
.h2 { font-size: var(--sb-fs-3xl) ; line-height: var(--sb-lh-tight) ; }
.h3 { font-size: var(--sb-fs-xl) ; line-height: var(--sb-lh-snug) ; font-weight: 600 ; letter-spacing: -0.015em ; }
.h1 strong, .h2 strong { font-weight: 700 ; background: var(--sb-gradient-sky) ; -webkit-background-clip: text ; background-clip: text ; color: transparent ; }
[data-theme="dark"] .h1 strong, [data-theme="dark"] .h2 strong, [data-theme="accent"] .h1 strong, [data-theme="accent"] .h2 strong { background: linear-gradient(135deg, #9FD3FF, #B7C2FF) ; -webkit-background-clip: text ; background-clip: text ; }
.lead { font-family: var(--sb-font-serif) ; font-size: var(--sb-fs-xl) ; line-height: 1.5 ; color: var(--sb-ink-2) ; font-weight: 400 ; text-wrap: pretty ; }
.lead p + p { margin-top: .8em ; }
.lead strong { color: var(--sb-ink) ; font-weight: 600 ; }

.prose { font-size: var(--sb-fs-lg) ; color: var(--sb-ink-2) ; text-wrap: pretty ; }
.prose > * + * { margin-top: 1em ; }
.prose h3 { font-size: var(--sb-fs-xl) ; color: var(--sb-ink) ; font-weight: 600 ; letter-spacing: -.015em ; line-height: 1.3 ; margin-top: 1.8em ; }
.prose h4 { font-size: var(--sb-fs-lg) ; color: var(--sb-ink) ; font-weight: 700 ; margin-top: 1.5em ; }
.prose h3 + *, .prose h4 + * { margin-top: .5em ; }
.prose strong { color: var(--sb-ink) ; font-weight: 650 ; }
.prose em { font-family: var(--sb-font-serif) ; font-size: 1.04em ; }
.prose ul, .prose ol { padding-left: 1.25em ; }
.prose li + li { margin-top: .45em ; }
.prose ul li::marker { color: var(--sb-primary) ; }
.prose a { color: var(--sb-primary) ; text-decoration-thickness: 1px ; text-underline-offset: 3px ; }
.prose blockquote { padding: .25em 0 .25em 1.25em ; border-left: 2px solid var(--sb-orange) ; font-family: var(--sb-font-serif) ; font-style: italic ; font-size: 1.1em ; color: var(--sb-ink) ; }
[data-theme="dark"] .prose, [data-theme="accent"] .prose, [data-theme="dark"] .lead, [data-theme="accent"] .lead { color: rgb(255 255 255 / .78) ; }
[data-theme="dark"] .prose strong, [data-theme="accent"] .prose strong, [data-theme="dark"] .prose h3, [data-theme="accent"] .prose h3, [data-theme="dark"] .lead strong, [data-theme="accent"] .lead strong { color: #fff ; }
[data-theme="dark"] .prose a, [data-theme="accent"] .prose a { color: #A9C9FF ; }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.btn {
	--b-bg: var(--sb-ink) ; --b-fg: #fff ; --b-bd: transparent ;
	position: relative ; isolation: isolate ; overflow: hidden ;
	display: inline-flex ; align-items: center ; gap: .6rem ; padding: .9rem 1.5rem ; border-radius: var(--sb-radius-pill) ;
	border: 1px solid var(--b-bd) ; background: var(--b-bg) ; color: var(--b-fg) ;
	font-size: var(--sb-fs-sm) ; font-weight: 650 ; letter-spacing: .01em ; text-decoration: none ; cursor: pointer ; white-space: nowrap ;
	transition: transform var(--sb-dur) var(--sb-ease-out), box-shadow var(--sb-dur) var(--sb-ease-out), background-color var(--sb-dur-fast), color var(--sb-dur-fast) ;
}
.btn::before { content: "" ; position: absolute ; inset: 0 ; z-index: -1 ; background: var(--sb-gradient-sky) ; opacity: 0 ; transition: opacity var(--sb-dur) var(--sb-ease-out) ; }
.btn:hover { transform: translateY(-2px) ; box-shadow: var(--sb-shadow) ; }
.btn:hover::before { opacity: 1 ; }
.btn:active { transform: translateY(0) scale(.98) ; }
.btn .sb-icon { width: 1.1em ; height: 1.1em ; transition: transform var(--sb-dur) var(--sb-ease-out) ; }
.btn:hover .sb-icon { transform: translateX(3px) ; }
.btn-primary { --b-bg: var(--sb-primary) ; }
.btn-secondary { --b-bg: transparent ; --b-fg: var(--sb-ink) ; --b-bd: var(--sb-line-2) ; }
.btn-secondary:hover { --b-fg: #fff ; --b-bd: transparent ; }
.btn-ghost { --b-bg: transparent ; --b-fg: var(--sb-primary) ; padding-inline: .25rem ; }
.btn-ghost::before { display: none ; }
.btn-ghost:hover { box-shadow: none ; transform: none ; }
[data-theme="dark"] .btn-primary, [data-theme="accent"] .btn-primary { --b-bg: #fff ; --b-fg: var(--sb-ink) ; }
[data-theme="dark"] .btn-primary:hover, [data-theme="accent"] .btn-primary:hover { --b-fg: #fff ; }
[data-theme="dark"] .btn-secondary, [data-theme="accent"] .btn-secondary { --b-fg: #fff ; --b-bd: rgb(255 255 255 / .35) ; }
[data-theme="dark"] .btn-ghost, [data-theme="accent"] .btn-ghost { --b-fg: #fff ; }
.btn-row { display: flex ; flex-wrap: wrap ; gap: .75rem 1rem ; align-items: center ; margin-top: 2.25rem ; }
.link-more { display: inline-flex ; align-items: center ; gap: .4rem ; margin-top: 1.25rem ; font-weight: 650 ; font-size: var(--sb-fs-sm) ; color: var(--sb-primary) ; text-decoration: none ; }
.link-more .sb-icon { width: 1rem ; height: 1rem ; transition: transform var(--sb-dur) var(--sb-ease-out) ; }
.link-more:hover .sb-icon { transform: translateX(4px) ; }
[data-theme="dark"] .link-more, [data-theme="accent"] .link-more { color: #B7C2FF ; }

/* ── Révélations au défilement ───────────────────────────────────────── */
[data-reveal] { opacity: 0 ; transform: translateY(28px) ; filter: blur(6px) ; transition: opacity 900ms var(--sb-ease-out), transform 1100ms var(--sb-ease-out), filter 900ms var(--sb-ease-out) ; transition-delay: calc(var(--i, 0) * var(--sb-stagger)) ; }
[data-reveal="fade"] { transform: none ; }
[data-reveal="scale"] { transform: scale(.94) ; }
[data-reveal="left"] { transform: translateX(-32px) ; }
[data-reveal="right"] { transform: translateX(32px) ; }
[data-reveal].is-in { opacity: 1 ; transform: none ; filter: none ; }
.no-js [data-reveal], html.sb-instant [data-reveal] { opacity: 1 ; transform: none ; filter: none ; transition: none ; }

/* ── Sections ────────────────────────────────────────────────────────── */
.sb-section { position: relative ; padding-block: var(--sb-section-y) ; }
.sb-section[data-theme="soft"] { background: var(--sb-paper-2) ; }
.sb-section[data-theme="cream"] { background: var(--sb-cream) ; }
.sb-section[data-theme="dark"] { background: var(--sb-primary-deep) ; color: #fff ; }
.sb-section[data-theme="accent"] { background: var(--sb-gradient) ; color: #fff ; }
.sb-section[data-theme="dark"]::before, .sb-section[data-theme="accent"]::before {
	content: "" ; position: absolute ; inset: 0 ; pointer-events: none ; opacity: .5 ;
	background: radial-gradient(60% 50% at 85% 10%, rgb(31 143 229 / .28), transparent 70%), radial-gradient(50% 50% at 5% 100%, rgb(192 63 207 / .14), transparent 70%) ;
}
.sb-section > * { position: relative ; }
.sb-section + .sb-section[data-theme="light"]:not(:first-child) { padding-top: calc(var(--sb-section-y) * .55) ; }
.sb-section[data-theme="light"] + .sb-section[data-theme="light"] { padding-top: 0 ; }
.sec-head { max-width: 52rem ; margin-bottom: clamp(2.5rem, 5vw, 4.5rem) ; }
.sec-head .lead { margin-top: 1.4rem ; }
.align-center .sec-head, .sec-head.align-center { margin-inline: auto ; text-align: center ; }
.sec-head:last-child { margin-bottom: 0 ; }

/* ── Header ──────────────────────────────────────────────────────────── */
sb-header { display: block ; position: fixed ; inset: 0 0 auto ; z-index: 1000 ; }
.hdr { position: relative ; }
.hdr::before { content: "" ; position: absolute ; inset: 0 ; z-index: -1 ; background: rgb(255 255 255 / .72) ; backdrop-filter: saturate(1.6) blur(18px) ; -webkit-backdrop-filter: saturate(1.6) blur(18px) ; opacity: 0 ; transition: opacity 500ms var(--sb-ease-out), box-shadow 500ms var(--sb-ease-out) ; border-bottom: 1px solid rgb(13 19 48 / .06) ; will-change: opacity ; }
.is-scrolled .hdr::before { box-shadow: 0 8px 24px -16px rgb(13 19 48 / .25) ; }
.is-scrolled .hdr::before, .hdr.is-open::before { opacity: 1 ; }
.hdr-inner { width: var(--sb-container-wide) ; margin-inline: auto ; height: 76px ; display: flex ; align-items: center ; gap: 2rem ; transition: height 500ms var(--sb-ease-out) ; }
.is-scrolled .hdr-inner { height: 64px ; }
.hdr-logo { display: flex ; align-items: center ; flex: none ; }
.hdr-logo img { height: 50px ; width: auto ; transform-origin: left center ; transition: filter var(--sb-dur), transform 500ms var(--sb-ease-out) ; }
.is-scrolled .hdr-logo img { transform: scale(.88) ; }
.on-dark:not(.is-scrolled) .hdr-logo img { filter: invert(1) brightness(2) ; }
.hdr-nav { position: relative ; display: flex ; align-items: center ; gap: .25rem ; margin-inline: auto ; }
.hdr-nav a { position: relative ; z-index: 1 ; padding: .55rem .95rem ; border-radius: var(--sb-radius-pill) ; font-size: var(--sb-fs-sm) ; font-weight: 600 ; color: var(--sb-ink-2) ; text-decoration: none ; white-space: nowrap ; transition: color var(--sb-dur-fast) ; }
.hdr-nav a:hover, .hdr-nav a[aria-current="page"] { color: var(--sb-ink) ; }
.hdr-pill { position: absolute ; z-index: 0 ; top: 50% ; height: 2.25rem ; translate: 0 -50% ; border-radius: var(--sb-radius-pill) ; background: rgb(77 94 164 / .1) ; opacity: 0 ; transition: left 450ms var(--sb-ease-out), width 450ms var(--sb-ease-out), opacity var(--sb-dur) ; pointer-events: none ; }
.on-dark:not(.is-scrolled) .hdr-nav a { color: rgb(255 255 255 / .78) ; }
.on-dark:not(.is-scrolled) .hdr-nav a:hover, .on-dark:not(.is-scrolled) .hdr-nav a[aria-current="page"] { color: #fff ; }
.on-dark:not(.is-scrolled) .hdr-pill { background: rgb(255 255 255 / .14) ; }
.hdr-tools { display: flex ; align-items: center ; gap: .9rem ; flex: none ; }
.hdr-cta { padding: .7rem 1.2rem ; }
.on-dark:not(.is-scrolled) .hdr-cta { --b-bg: #fff ; --b-fg: var(--sb-ink) ; }
.hdr-progress { position: absolute ; left: 0 ; bottom: 0 ; height: 2px ; width: 100% ; transform-origin: 0 50% ; transform: scaleX(var(--p, 0)) ; background: var(--sb-gradient-sky) ; }
@supports (animation-timeline: scroll()) {
	.hdr-progress { animation: sb-progress linear both ; animation-timeline: scroll(root) ; }
	@keyframes sb-progress { from { transform: scaleX(0) ; } to { transform: scaleX(1) ; } }
}

.lang { position: relative ; display: inline-grid ; grid-template-columns: 1fr 1fr ; padding: 3px ; border-radius: var(--sb-radius-pill) ; background: rgb(13 19 48 / .06) ; }
.lang button { position: relative ; z-index: 1 ; min-width: 2.4rem ; padding: .35rem .6rem ; border: 0 ; border-radius: var(--sb-radius-pill) ; background: none ; cursor: pointer ; font-size: var(--sb-fs-xs) ; font-weight: 750 ; letter-spacing: .06em ; color: var(--sb-ink-3) ; transition: color var(--sb-dur-fast) ; }
.lang button[aria-pressed="true"] { color: var(--sb-ink) ; }
.lang::after { content: "" ; position: absolute ; top: 3px ; bottom: 3px ; left: 3px ; width: calc(50% - 3px) ; border-radius: var(--sb-radius-pill) ; background: #fff ; box-shadow: var(--sb-shadow-sm) ; transition: transform 450ms var(--sb-ease-spring) ; }
.lang[data-lang="en"]::after { transform: translateX(100%) ; }
.on-dark:not(.is-scrolled) .lang, .ftr .lang { background: rgb(255 255 255 / .12) ; }
.on-dark:not(.is-scrolled) .lang button, .ftr .lang button { color: rgb(255 255 255 / .6) ; }
.on-dark:not(.is-scrolled) .lang button[aria-pressed="true"], .ftr .lang button[aria-pressed="true"] { color: var(--sb-ink) ; }

.hdr-burger { display: none ; width: 44px ; height: 44px ; border: 0 ; border-radius: 50% ; background: rgb(13 19 48 / .06) ; cursor: pointer ; place-items: center ; }
.hdr-burger span { position: absolute ; width: 18px ; height: 1.75px ; border-radius: 2px ; background: currentColor ; transition: transform var(--sb-dur) var(--sb-ease-out), opacity var(--sb-dur-fast) ; }
.hdr-burger span:nth-child(1) { transform: translateY(-5px) ; }
.hdr-burger span:nth-child(3) { transform: translateY(5px) ; }
.is-open .hdr-burger span:nth-child(1) { transform: rotate(45deg) ; }
.is-open .hdr-burger span:nth-child(2) { opacity: 0 ; }
.is-open .hdr-burger span:nth-child(3) { transform: rotate(-45deg) ; }
.on-dark:not(.is-scrolled) .hdr:not(.is-open) .hdr-burger { background: rgb(255 255 255 / .14) ; color: #fff ; }

.hdr-panel { position: fixed ; inset: 76px 0 0 ; z-index: -1 ; display: flex ; flex-direction: column ; padding: 2rem clamp(1.25rem, 6vw, 3rem) calc(2rem + env(safe-area-inset-bottom)) ; background: rgb(255 255 255 / .96) ; backdrop-filter: blur(20px) ; -webkit-backdrop-filter: blur(20px) ; clip-path: inset(0 0 100% 0) ; visibility: hidden ; transition: clip-path 600ms var(--sb-ease-out), visibility 0s 600ms ; overflow-y: auto ; }
.is-open .hdr-panel { clip-path: inset(0) ; visibility: visible ; transition: clip-path 600ms var(--sb-ease-out) ; }
.hdr-panel nav { display: flex ; flex-direction: column ; }
.hdr-panel nav a { display: flex ; align-items: center ; justify-content: space-between ; padding: 1rem 0 ; border-bottom: 1px solid var(--sb-line) ; font-size: var(--sb-fs-2xl) ; font-weight: 450 ; letter-spacing: -.02em ; text-decoration: none ; color: var(--sb-ink) ; opacity: 0 ; transform: translateY(18px) ; transition: opacity 500ms var(--sb-ease-out), transform 600ms var(--sb-ease-out) ; transition-delay: calc(120ms + var(--i) * 55ms) ; }
.hdr-panel nav a[aria-current="page"] { color: var(--sb-primary) ; }
.hdr-panel nav a .sb-icon { width: 1.25rem ; color: var(--sb-ink-3) ; }
.is-open .hdr-panel nav a { opacity: 1 ; transform: none ; }
.hdr-panel-foot { margin-top: auto ; padding-top: 2rem ; display: flex ; gap: 1rem ; align-items: center ; justify-content: space-between ; flex-wrap: wrap ; }

@media (max-width: 1140px) {
	.hdr-nav, .hdr-tools .hdr-cta, .hdr-tools .lang { display: none ; }
	.hdr-burger { display: grid ; }
	.hdr-tools { margin-left: auto ; }
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.ftr { position: relative ; overflow: hidden ; background: var(--sb-ink) ; color: rgb(255 255 255 / .7) ; padding: clamp(4rem, 8vw, 7rem) 0 2rem ; font-size: var(--sb-fs-sm) ; }
.ftr-curve { position: absolute ; right: -6% ; top: -14% ; width: min(620px, 60vw) ; opacity: .35 ; pointer-events: none ; }
.ftr-top { display: grid ; grid-template-columns: 1.5fr repeat(3, 1fr) ; gap: 3rem ; }
.ftr-brand img { height: 104px ; width: auto ; }
.ftr-tagline { margin-top: 1.5rem ; max-width: 22rem ; font-family: var(--sb-font-serif) ; font-style: italic ; font-size: var(--sb-fs-xl) ; line-height: 1.35 ; color: #fff ; }
.ftr h2 { margin-bottom: 1rem ; font-size: var(--sb-fs-xs) ; letter-spacing: .16em ; text-transform: uppercase ; color: rgb(255 255 255 / .45) ; font-weight: 700 ; }
.ftr ul { list-style: none ; padding: 0 ; display: grid ; gap: .6rem ; }
.ftr a { text-decoration: none ; color: rgb(255 255 255 / .82) ; transition: color var(--sb-dur-fast) ; }
.ftr a:hover { color: #fff ; }
.ftr-contact a { display: inline-flex ; align-items: center ; gap: .55rem ; }
.ftr-contact .sb-icon { width: 1rem ; height: 1rem ; color: #8FA0F0 ; }
.ftr-bottom { display: flex ; flex-wrap: wrap ; gap: 1rem 2rem ; align-items: center ; justify-content: space-between ; margin-top: clamp(3rem, 6vw, 5rem) ; padding-top: 1.75rem ; border-top: 1px solid rgb(255 255 255 / .1) ; color: rgb(255 255 255 / .5) ; }
.ftr-bottom nav { display: flex ; gap: 1.5rem ; flex-wrap: wrap ; }
.ftr-motto { font-size: var(--sb-fs-xs) ; letter-spacing: .2em ; text-transform: uppercase ; }
@media (max-width: 900px) { .ftr-top { grid-template-columns: 1fr 1fr ; } .ftr-brand { grid-column: 1 / -1 ; } }
@media (max-width: 520px) { .ftr-top { grid-template-columns: 1fr ; } }

/* ── Intro (logo 3D) ─────────────────────────────────────────────────── */
.intro { position: fixed ; inset: 0 ; z-index: 3000 ; display: grid ; place-items: center ; background: var(--sb-gradient) ; color: #fff ; transition: opacity 700ms var(--sb-ease-out), visibility 0s 700ms ; }
.intro.is-out { opacity: 0 ; visibility: hidden ; }
.intro-inner { display: grid ; place-items: center ; gap: 1.25rem ; }
.intro model-viewer { width: min(44vmin, 360px) ; height: min(44vmin, 360px) ; --poster-color: transparent ; --progress-bar-color: transparent ; }
.intro-tag { font-family: var(--sb-font-serif) ; font-style: italic ; font-size: var(--sb-fs-lg) ; opacity: 0 ; transform: translateY(8px) ; animation: sb-fade-up 900ms 300ms var(--sb-ease-out) forwards ; }
.intro-bar { width: 120px ; height: 2px ; border-radius: 2px ; background: rgb(255 255 255 / .2) ; overflow: hidden ; }
.intro-bar::after { content: "" ; display: block ; height: 100% ; width: 40% ; background: #fff ; animation: sb-load 1.2s var(--sb-ease-in-out) infinite ; }
@keyframes sb-load { from { transform: translateX(-100%) ; } to { transform: translateX(250%) ; } }
@keyframes sb-fade-up { to { opacity: 1 ; transform: none ; } }

/* ── Hero ────────────────────────────────────────────────────────────── */
.sec-hero { padding-top: calc(76px + clamp(3rem, 6vw, 6rem)) ; overflow: hidden ; }
.sec-hero[data-theme="light"] { background: radial-gradient(70% 60% at 90% 0%, rgb(31 143 229 / .09), transparent 70%), radial-gradient(50% 45% at 0% 55%, rgb(77 94 164 / .07), transparent 70%), var(--sb-paper) ; }
.hero-grid { display: grid ; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) ; gap: clamp(2rem, 5vw, 5rem) ; align-items: center ; }
.hero-sub { margin-top: 1.75rem ; max-width: 36rem ; }
.hero-badges { display: flex ; flex-wrap: wrap ; gap: .6rem ; margin-top: 2.5rem ; list-style: none ; padding: 0 ; }
.hero-badges li { display: inline-flex ; align-items: center ; gap: .5rem ; padding: .5rem .9rem .5rem .6rem ; border-radius: var(--sb-radius-pill) ; background: rgb(255 255 255 / .7) ; border: 1px solid var(--sb-line) ; font-size: var(--sb-fs-sm) ; font-weight: 600 ; color: var(--sb-ink-2) ; box-shadow: var(--sb-shadow-sm) ; }
.hero-badges .sb-icon { width: 1.1rem ; height: 1.1rem ; color: var(--sb-primary) ; }
[data-theme="dark"] .hero-badges li, [data-theme="accent"] .hero-badges li { background: rgb(255 255 255 / .08) ; border-color: rgb(255 255 255 / .14) ; color: rgb(255 255 255 / .85) ; }
[data-theme="dark"] .hero-badges .sb-icon, [data-theme="accent"] .hero-badges .sb-icon { color: #9FD3FF ; }
.hero-media { position: relative ; }
.hero-media::before { content: "" ; position: absolute ; inset: 8% 6% ; border-radius: 50% ; background: radial-gradient(circle, rgb(31 143 229 / .22), transparent 65%) ; filter: blur(30px) ; z-index: -1 ; animation: sb-breathe 8s ease-in-out infinite ; }
@keyframes sb-breathe { 50% { transform: scale(1.08) ; opacity: .75 ; } }
.hero-media .media { border-radius: var(--sb-radius-lg) ; }
.hero-media .media-graph { background: transparent ; box-shadow: none ; }

.sec-hero.v-centered .hero-grid { grid-template-columns: 1fr ; text-align: center ; justify-items: center ; }
.sec-hero.v-centered .hero-sub { margin-inline: auto ; }
.sec-hero.v-centered .btn-row, .sec-hero.v-centered .hero-badges { justify-content: center ; }
.sec-hero.v-centered .hero-media { width: min(100%, 1100px) ; margin-top: 2rem ; }

.sec-hero.v-immersive { min-height: min(100svh, 980px) ; display: flex ; align-items: flex-end ; padding-bottom: clamp(3rem, 7vw, 6rem) ; color: #fff ; background: var(--sb-ink) ; }
.sec-hero.v-immersive .hero-bg { position: absolute ; inset: 0 ; }
.sec-hero.v-immersive .hero-bg video, .sec-hero.v-immersive .hero-bg img { width: 100% ; height: 100% ; object-fit: cover ; }
.sec-hero.v-immersive .hero-bg::after { content: "" ; position: absolute ; inset: 0 ; background: linear-gradient(180deg, rgb(13 19 48 / .55), rgb(13 19 48 / .2) 40%, rgb(13 19 48 / .85)) ; }
.sec-hero.v-immersive .hero-grid { grid-template-columns: minmax(0, 52rem) ; }
.sec-hero.v-immersive .lead { color: rgb(255 255 255 / .85) ; }
.scroll-cue { position: absolute ; left: 50% ; bottom: 1.5rem ; width: 22px ; height: 36px ; margin-left: -11px ; border: 1.5px solid currentColor ; border-radius: 12px ; opacity: .5 ; }
.scroll-cue::after { content: "" ; position: absolute ; left: 50% ; top: 7px ; width: 3px ; height: 7px ; margin-left: -1.5px ; border-radius: 2px ; background: currentColor ; animation: sb-cue 1.8s var(--sb-ease-in-out) infinite ; }
@keyframes sb-cue { 0% { opacity: 0 ; transform: translateY(-3px) ; } 40% { opacity: 1 ; } 100% { opacity: 0 ; transform: translateY(10px) ; } }

.hero-title .w { display: inline-block ; opacity: 0 ; transform: translateY(.45em) rotate(2deg) ; filter: blur(8px) ; animation: sb-word 1000ms var(--sb-ease-out) forwards ; animation-delay: calc(150ms + var(--w) * 70ms) ; }
@keyframes sb-word { to { opacity: 1 ; transform: none ; filter: none ; } }
.hero-title .w.g { font-weight: 700 ; background: var(--sb-gradient-sky) ; -webkit-background-clip: text ; background-clip: text ; color: transparent ; padding-bottom: .06em ; }
[data-theme="dark"] .hero-title .w.g, [data-theme="accent"] .hero-title .w.g, .v-immersive .hero-title .w.g { background-image: linear-gradient(135deg, #9FD3FF, #B7C2FF) ; }

@media (max-width: 960px) {
	.hero-grid { grid-template-columns: 1fr ; }
	.hero-media { max-width: 560px ; margin-inline: auto ; width: 100% ; }
}

/* ── Statement ───────────────────────────────────────────────────────── */
.sec-statement .statement { max-width: 62rem ; margin-inline: auto ; text-align: center ; font-size: var(--sb-fs-3xl) ; line-height: 1.12 ; letter-spacing: -.03em ; font-weight: 450 ; text-wrap: balance ; }
.statement .w { opacity: .14 ; transition: opacity 500ms var(--sb-ease-out), color 500ms ; }
.statement .w.is-lit { opacity: 1 ; }
.statement .w.hl { color: var(--sb-primary) ; font-weight: 650 ; }
[data-theme="dark"] .statement .w.hl, [data-theme="accent"] .statement .w.hl { color: #9FD3FF ; }
.sec-statement .eyebrow { display: flex ; justify-content: center ; }
.sec-statement .eyebrow::after { content: "" ; width: 1.75rem ; height: 1.5px ; background: currentColor ; }

/* ── Split ───────────────────────────────────────────────────────────── */
.split { display: grid ; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) ; gap: clamp(2.5rem, 6vw, 6rem) ; align-items: center ; }
.split.media-left .split-media { order: -1 ; }
.split-text .prose { margin-top: 1.5rem ; }
.split-text .h2 + .prose { margin-top: 1.75rem ; }
.points { list-style: none ; padding: 0 ; margin-top: 2rem ; display: grid ; gap: 1.1rem ; }
.points li { display: grid ; grid-template-columns: auto 1fr ; gap: 1rem ; align-items: start ; }
.points .ico { margin-top: .1rem ; }
.points strong { display: block ; font-weight: 650 ; color: var(--sb-ink) ; line-height: 1.35 ; }
.points p { color: var(--sb-ink-2) ; margin-top: .2rem ; font-size: var(--sb-fs-md) ; }
[data-theme="dark"] .points strong, [data-theme="accent"] .points strong { color: #fff ; }
[data-theme="dark"] .points p, [data-theme="accent"] .points p { color: rgb(255 255 255 / .72) ; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr ; } .split.media-left .split-media { order: 0 ; } }

/* Pastille d'icône (inspirée du livret) */
.ico { display: grid ; place-items: center ; flex: none ; width: 2.9rem ; height: 2.9rem ; border-radius: 50% ; background: var(--sb-cream) ; color: var(--sb-orange) ; box-shadow: 0 6px 14px -6px rgb(13 19 48 / .25), inset 0 0 0 1px rgb(255 255 255 / .6) ; }
.ico .sb-icon { width: 1.35rem ; height: 1.35rem ; }
.ico.blue { background: var(--sb-sky-soft) ; color: var(--sb-sky) ; }
[data-theme="dark"] .ico, [data-theme="accent"] .ico { background: rgb(255 255 255 / .1) ; color: #FFB27A ; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12) ; }

/* ── Médias ──────────────────────────────────────────────────────────── */
.media { position: relative ; overflow: hidden ; border-radius: var(--sb-radius-lg) ; background: var(--sb-paper-2) ; box-shadow: var(--sb-shadow-lg) ; isolation: isolate ; }
.media img, .media video { width: 100% ; height: auto ; }
.media video { aspect-ratio: auto ; background: #000 ; }
.media-graph { background: var(--sb-paper) ; box-shadow: var(--sb-shadow) ; padding: clamp(.75rem, 2vw, 1.5rem) ; overflow: visible ; }
[data-theme="soft"] .media-graph, [data-theme="cream"] .media-graph { background: #fff ; }
[data-theme="dark"] .media-graph, [data-theme="accent"] .media-graph { background: rgb(255 255 255 / .04) ; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1) ; }
.media-plain { background: none ; box-shadow: none ; padding: 0 ; }
.media figcaption, .fig-caption { margin-top: .9rem ; font-size: var(--sb-fs-sm) ; color: var(--sb-ink-3) ; text-align: center ; font-family: var(--sb-font-serif) ; font-style: italic ; }
.media-wrap figcaption { margin-top: 1rem ; }
.media .vid-toggle { position: absolute ; right: 1rem ; bottom: 1rem ; z-index: 2 ; width: 42px ; height: 42px ; border: 0 ; border-radius: 50% ; display: grid ; place-items: center ; background: rgb(13 19 48 / .55) ; backdrop-filter: blur(8px) ; color: #fff ; cursor: pointer ; opacity: 0 ; transition: opacity var(--sb-dur), transform var(--sb-dur) var(--sb-ease-out) ; }
.media:hover .vid-toggle, .media .vid-toggle:focus-visible, .media .vid-toggle.is-paused { opacity: 1 ; }
.media .vid-toggle:hover { transform: scale(1.08) ; }
.media .vid-toggle .sb-icon { width: 16px ; height: 16px ; }
.media-img img { transition: transform 1.6s var(--sb-ease-out) ; }
.media-img:hover img { transform: scale(1.03) ; }
.sec-media .media-wrap.size-normal { width: min(100%, 860px) ; margin-inline: auto ; }
.sec-media .media-wrap.size-full .media { border-radius: 0 ; box-shadow: none ; }
.sec-media:has(.size-full) { padding-block: 0 ; }

/* ── Graph section ───────────────────────────────────────────────────── */
.graph-wrap { margin-inline: auto ; }
.graph-wrap.size-normal { width: min(100%, 880px) ; }
.graph-wrap.size-wide { width: 100% ; }
sb-graph { display: block ; width: 100% ; }

/* ── Features ────────────────────────────────────────────────────────── */
.grid { display: grid ; gap: clamp(1rem, 2vw, 1.5rem) ; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) ; }
@media (max-width: 1024px) { .grid { --cols: 2 !important ; } }
@media (max-width: 620px) { .grid { --cols: 1 !important ; } }
.feat { position: relative ; display: flex ; flex-direction: column ; gap: 1rem ; padding: clamp(1.5rem, 2.5vw, 2.1rem) ; border-radius: var(--sb-radius-lg) ; background: var(--sb-paper) ; border: 1px solid var(--sb-line) ; text-decoration: none ; color: inherit ; transition: transform 500ms var(--sb-ease-out), box-shadow 500ms var(--sb-ease-out), border-color var(--sb-dur) ; overflow: hidden ; isolation: isolate ; }
.feat::before { content: "" ; position: absolute ; inset: 0 ; z-index: -1 ; opacity: 0 ; transition: opacity var(--sb-dur) ; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgb(31 143 229 / .1), transparent 65%) ; }
.feat:hover { transform: translateY(-4px) ; box-shadow: var(--sb-shadow) ; border-color: transparent ; }
.feat:hover::before { opacity: 1 ; }
.feat .h3 { font-size: var(--sb-fs-lg) ; }
.feat .txt { color: var(--sb-ink-2) ; font-size: var(--sb-fs-md) ; }
.feat .txt ul { padding-left: 1.1em ; margin-top: .4em ; }
.feat .txt li + li { margin-top: .3em ; }
.feat .txt li::marker { color: var(--sb-primary) ; }
.feat .txt p + p, .feat .txt p + ul { margin-top: .5em ; }
.feat .go { margin-top: auto ; display: inline-flex ; align-items: center ; gap: .4rem ; font-size: var(--sb-fs-sm) ; font-weight: 650 ; color: var(--sb-primary) ; }
.feat .go .sb-icon { width: 1rem ; transition: transform var(--sb-dur) var(--sb-ease-out) ; }
.feat:hover .go .sb-icon { transform: translateX(4px) ; }
.sb-section[data-theme="soft"] .feat, .sb-section[data-theme="cream"] .feat { border-color: transparent ; box-shadow: var(--sb-shadow-sm) ; }
[data-theme="dark"] .feat, [data-theme="accent"] .feat { background: rgb(255 255 255 / .05) ; border-color: rgb(255 255 255 / .1) ; }
[data-theme="dark"] .feat .txt, [data-theme="accent"] .feat .txt { color: rgb(255 255 255 / .72) ; }
[data-theme="dark"] .feat .go, [data-theme="accent"] .feat .go { color: #B7C2FF ; }
.style-plain .feat { background: none ; border: 0 ; padding: 0 ; box-shadow: none !important ; transform: none !important ; }
.style-plain .feat::before { display: none ; }
.style-plain.grid { gap: 2.5rem clamp(1.5rem, 4vw, 3.5rem) ; }
.style-numbered .feat .num { font-size: var(--sb-fs-3xl) ; font-weight: 300 ; line-height: 1 ; letter-spacing: -.04em ; color: var(--sb-orange) ; font-variant-numeric: tabular-nums ; }

/* ── Steps (parcours sticky) ─────────────────────────────────────────── */
.steps { display: grid ; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) ; gap: clamp(2rem, 6vw, 6rem) ; align-items: start ; }
.steps-list { list-style: none ; padding: 0 ; counter-reset: st ; }
.step { position: relative ; display: grid ; grid-template-columns: 3.25rem 1fr ; gap: 1.25rem ; padding: 1.4rem 0 ; cursor: pointer ; }
.step + .step { border-top: 1px solid var(--sb-line) ; }
.step-num { display: grid ; place-items: center ; width: 3.25rem ; height: 3.25rem ; border-radius: 50% ; background: var(--sb-cream) ; color: var(--sb-orange) ; font-size: 1.35rem ; font-weight: 700 ; box-shadow: 0 8px 18px -8px rgb(13 19 48 / .3) ; transition: transform 500ms var(--sb-ease-spring), background-color var(--sb-dur), color var(--sb-dur) ; }
.step .h3 { font-size: var(--sb-fs-lg) ; transition: color var(--sb-dur) ; padding-top: .65rem ; color: var(--sb-ink-3) ; }
.step .step-body { display: grid ; grid-template-rows: 0fr ; transition: grid-template-rows 600ms var(--sb-ease-out), opacity var(--sb-dur) ; opacity: 0 ; }
.step .step-body > div { overflow: hidden ; }
.step .step-body .prose { padding-top: .6rem ; font-size: var(--sb-fs-md) ; }
.step.is-active .step-num { background: var(--sb-orange) ; color: #fff ; transform: scale(1.06) ; }
.step.is-active .h3 { color: var(--sb-ink) ; }
.step.is-active .step-body { grid-template-rows: 1fr ; opacity: 1 ; }
.step-bar { position: absolute ; left: 1.625rem ; top: calc(1.4rem + 3.25rem + .3rem) ; bottom: .3rem ; width: 2px ; margin-left: -1px ; border-radius: 2px ; background: var(--sb-line) ; overflow: hidden ; opacity: 0 ; }
.step.is-active .step-bar { opacity: 1 ; }
.step.is-active .step-bar::after { content: "" ; position: absolute ; inset: 0 ; background: var(--sb-orange) ; transform-origin: top ; animation: sb-stepbar var(--step-dur, 7s) linear forwards ; }
.steps.is-paused .step.is-active .step-bar::after { animation-play-state: paused ; }
@keyframes sb-stepbar { from { transform: scaleY(0) ; } to { transform: scaleY(1) ; } }
.steps-stage { position: sticky ; top: 110px ; }
.steps-stage .stage { position: relative ; display: grid ; }
.steps-stage .stage > * { grid-area: 1 / 1 ; opacity: 0 ; visibility: hidden ; transform: translateY(16px) scale(.98) ; transition: opacity 600ms var(--sb-ease-out), transform 800ms var(--sb-ease-out), visibility 0s 600ms ; }
.steps-stage .stage > .is-active { opacity: 1 ; visibility: visible ; transform: none ; transition: opacity 600ms var(--sb-ease-out), transform 800ms var(--sb-ease-out) ; }
.step-media-inline { display: none ; margin-top: 1rem ; }
[data-theme="dark"] .step .h3, [data-theme="accent"] .step .h3 { color: rgb(255 255 255 / .5) ; }
[data-theme="dark"] .step.is-active .h3, [data-theme="accent"] .step.is-active .h3 { color: #fff ; }
[data-theme="dark"] .step + .step, [data-theme="accent"] .step + .step { border-color: rgb(255 255 255 / .12) ; }
@media (max-width: 900px) {
	.steps { grid-template-columns: 1fr ; }
	.steps-stage { display: none ; }
	.step-media-inline { display: block ; }
}

/* ── Tabs ────────────────────────────────────────────────────────────── */
.tabs-bar { position: relative ; display: flex ; gap: .25rem ; padding: .35rem ; margin-bottom: clamp(2rem, 4vw, 3rem) ; border-radius: var(--sb-radius-pill) ; background: var(--sb-paper-2) ; overflow-x: auto ; scrollbar-width: none ; width: max-content ; max-width: 100% ; }
.tabs-bar::-webkit-scrollbar { display: none ; }
.sb-section[data-theme="soft"] .tabs-bar { background: #fff ; }
.tabs-bar button { position: relative ; z-index: 1 ; flex: none ; display: inline-flex ; align-items: center ; gap: .5rem ; padding: .7rem 1.15rem ; border: 0 ; border-radius: var(--sb-radius-pill) ; background: none ; cursor: pointer ; font-size: var(--sb-fs-sm) ; font-weight: 650 ; color: var(--sb-ink-2) ; white-space: nowrap ; transition: color var(--sb-dur) ; }
.tabs-bar button .sb-icon { width: 1.1rem ; height: 1.1rem ; }
.tabs-bar button[aria-selected="true"] { color: #fff ; }
.tabs-ind { position: absolute ; z-index: 0 ; top: .35rem ; bottom: .35rem ; left: 0 ; border-radius: var(--sb-radius-pill) ; background: var(--sb-ink) ; box-shadow: var(--sb-shadow-sm) ; transition: transform 550ms var(--sb-ease-out), width 550ms var(--sb-ease-out) ; }
[data-theme="dark"] .tabs-bar, [data-theme="accent"] .tabs-bar { background: rgb(255 255 255 / .08) ; }
[data-theme="dark"] .tabs-bar button, [data-theme="accent"] .tabs-bar button { color: rgb(255 255 255 / .7) ; }
[data-theme="dark"] .tabs-bar button[aria-selected="true"], [data-theme="accent"] .tabs-bar button[aria-selected="true"] { color: var(--sb-ink) ; }
[data-theme="dark"] .tabs-ind, [data-theme="accent"] .tabs-ind { background: #fff ; }
.tab-panel { display: grid ; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) ; gap: clamp(2rem, 5vw, 5rem) ; align-items: center ; }
.tab-panel:not(:has(.tab-media)) { grid-template-columns: minmax(0, 48rem) ; }
.tab-panel[hidden] { display: none ; }
.tab-panel.is-entering .tab-text > * { animation: sb-tab-in 700ms var(--sb-ease-out) both ; }
.tab-panel.is-entering .tab-text > *:nth-child(2) { animation-delay: 60ms ; }
.tab-panel.is-entering .tab-text > *:nth-child(3) { animation-delay: 120ms ; }
.tab-panel.is-entering .tab-media { animation: sb-tab-in 900ms 80ms var(--sb-ease-out) both ; }
@keyframes sb-tab-in { from { opacity: 0 ; transform: translateY(16px) ; } }
.tab-text .h3 { font-size: var(--sb-fs-2xl) ; font-weight: 500 ; letter-spacing: -.025em ; }
.tab-text .prose { margin-top: 1.25rem ; }
.tab-text .prose ul { list-style: none ; padding: 0 ; }
.tab-text .prose ul li { position: relative ; padding-left: 1.6rem ; }
.tab-text .prose ul li::before { content: "" ; position: absolute ; left: 0 ; top: .55em ; width: .55rem ; height: .55rem ; border-radius: 50% ; border: 2px solid var(--sb-primary) ; }
@media (max-width: 900px) { .tab-panel { grid-template-columns: 1fr ; } }

/* ── Stats ───────────────────────────────────────────────────────────── */
.stats { display: grid ; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) ; gap: 1px ; border-radius: var(--sb-radius-lg) ; overflow: hidden ; background: var(--sb-line) ; border: 1px solid var(--sb-line) ; }
.stat { padding: clamp(1.75rem, 3vw, 2.5rem) ; background: var(--sb-paper) ; }
.stat-val { display: flex ; align-items: baseline ; gap: .15em ; font-size: var(--sb-fs-4xl) ; font-weight: 300 ; letter-spacing: -.045em ; line-height: 1 ; font-variant-numeric: tabular-nums ; color: var(--sb-ink) ; }
.stat-val .fix { font-size: .42em ; font-weight: 600 ; letter-spacing: -.01em ; color: var(--sb-primary) ; }
.stat-lbl { margin-top: .9rem ; color: var(--sb-ink-2) ; font-size: var(--sb-fs-sm) ; font-weight: 550 ; max-width: 16rem ; }
[data-theme="dark"] .stats, [data-theme="accent"] .stats { background: rgb(255 255 255 / .1) ; border-color: rgb(255 255 255 / .1) ; }
[data-theme="dark"] .stat, [data-theme="accent"] .stat { background: transparent ; }
[data-theme="dark"] .stat-val, [data-theme="accent"] .stat-val { color: #fff ; }
[data-theme="dark"] .stat-val .fix, [data-theme="accent"] .stat-val .fix { color: #9FD3FF ; }
[data-theme="dark"] .stat-lbl, [data-theme="accent"] .stat-lbl { color: rgb(255 255 255 / .7) ; }

/* ── Quotes ──────────────────────────────────────────────────────────── */
.quotes { display: grid ; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) ; gap: clamp(1rem, 2vw, 1.5rem) ; }
.qcard { position: relative ; display: flex ; flex-direction: column ; padding: clamp(1.75rem, 3vw, 2.5rem) ; border-radius: var(--sb-radius-lg) ; background: var(--sb-paper) ; border: 1px solid var(--sb-line) ; transition: transform 500ms var(--sb-ease-out), box-shadow 500ms ; }
.qcard:hover { transform: translateY(-4px) ; box-shadow: var(--sb-shadow) ; }
.qcard .tag { align-self: flex-start ; margin-bottom: 1.5rem ; padding: .3rem .75rem ; border-radius: var(--sb-radius-pill) ; background: var(--sb-sky-soft) ; color: var(--sb-sky) ; font-size: var(--sb-fs-xs) ; font-weight: 700 ; letter-spacing: .04em ; }
.qcard .glyph { position: absolute ; right: 1.5rem ; top: 1.25rem ; width: 2.75rem ; height: 2.75rem ; color: var(--sb-primary-soft) ; }
.qcard blockquote { font-family: var(--sb-font-serif) ; font-style: italic ; font-size: var(--sb-fs-xl) ; line-height: 1.4 ; color: var(--sb-ink) ; text-wrap: pretty ; }
.qcard figcaption { margin-top: auto ; padding-top: 1.75rem ; display: flex ; align-items: center ; gap: .85rem ; }
.qcard .avatar { display: grid ; place-items: center ; width: 2.75rem ; height: 2.75rem ; border-radius: 50% ; background: var(--sb-gradient) ; color: #fff ; font-weight: 700 ; font-size: var(--sb-fs-sm) ; flex: none ; }
.qcard .who strong { display: block ; font-weight: 700 ; }
.qcard .who span { font-size: var(--sb-fs-sm) ; color: var(--sb-ink-3) ; }
.sb-section[data-theme="soft"] .qcard, .sb-section[data-theme="cream"] .qcard { border-color: transparent ; }
[data-theme="dark"] .qcard, [data-theme="accent"] .qcard { background: rgb(255 255 255 / .05) ; border-color: rgb(255 255 255 / .1) ; }
[data-theme="dark"] .qcard blockquote, [data-theme="accent"] .qcard blockquote { color: #fff ; }
[data-theme="dark"] .qcard .glyph, [data-theme="accent"] .qcard .glyph { color: rgb(255 255 255 / .1) ; }
[data-theme="dark"] .qcard .who span, [data-theme="accent"] .qcard .who span { color: rgb(255 255 255 / .6) ; }

/* ── Cards ───────────────────────────────────────────────────────────── */
.filters { display: flex ; flex-wrap: wrap ; gap: .5rem ; margin-bottom: 2rem ; }
.chip { display: inline-flex ; align-items: center ; gap: .5rem ; padding: .55rem 1rem ; border-radius: var(--sb-radius-pill) ; border: 1px solid var(--sb-line-2) ; background: transparent ; cursor: pointer ; font-size: var(--sb-fs-sm) ; font-weight: 650 ; color: var(--sb-ink-2) ; transition: all var(--sb-dur) var(--sb-ease-out) ; }
.chip[aria-pressed="true"] { background: var(--sb-ink) ; border-color: var(--sb-ink) ; color: #fff ; }
.chip .dot { width: .55rem ; height: .55rem ; border-radius: 50% ; background: var(--dot, var(--sb-ink-3)) ; }
.cards { display: grid ; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)) ; gap: clamp(1rem, 2vw, 1.5rem) ; }
.card { position: relative ; display: flex ; flex-direction: column ; border-radius: var(--sb-radius-lg) ; background: var(--sb-paper) ; border: 1px solid var(--sb-line) ; overflow: hidden ; color: inherit ; text-decoration: none ; transition: transform 500ms var(--sb-ease-out), box-shadow 500ms, opacity 400ms, scale 400ms ; }
a.card:hover, .card:hover { transform: translateY(-4px) ; box-shadow: var(--sb-shadow) ; }
.card.is-filtered { display: none ; }
.card-img { aspect-ratio: 16 / 9 ; background: var(--sb-paper-2) ; overflow: hidden ; }
.card-img img { width: 100% ; height: 100% ; object-fit: cover ; transition: transform 1.2s var(--sb-ease-out) ; }
.card:hover .card-img img { transform: scale(1.04) ; }
.card-body { display: flex ; flex-direction: column ; gap: .75rem ; flex: 1 ; padding: clamp(1.4rem, 2.5vw, 1.9rem) ; }
.card-top { display: flex ; align-items: center ; gap: .75rem ; justify-content: space-between ; flex-wrap: wrap ; }
.card .tag { padding: .3rem .7rem ; border-radius: var(--sb-radius-pill) ; background: var(--sb-sky-soft) ; color: #1270B8 ; font-size: var(--sb-fs-xs) ; font-weight: 700 ; }
.card .org { font-size: var(--sb-fs-xs) ; font-weight: 750 ; letter-spacing: .1em ; text-transform: uppercase ; color: var(--sb-ink-3) ; }
.card .h3 { font-size: var(--sb-fs-lg) ; line-height: 1.35 ; }
.card .txt { color: var(--sb-ink-2) ; font-size: var(--sb-fs-md) ; }
.card .meta { margin-top: auto ; padding-top: .5rem ; display: flex ; justify-content: space-between ; align-items: center ; gap: 1rem ; font-size: var(--sb-fs-sm) ; color: var(--sb-ink-3) ; }
.status { display: inline-flex ; align-items: center ; gap: .45rem ; font-size: var(--sb-fs-xs) ; font-weight: 700 ; white-space: nowrap ; color: var(--sb-ink-2) ; }
.status::before { content: "" ; width: .6rem ; height: .6rem ; border-radius: 50% ; background: var(--dot) ; box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot) 18%, transparent) ; }
.st-done { --dot: var(--sb-done) ; } .st-ongoing { --dot: var(--sb-ongoing) ; } .st-planned { --dot: var(--sb-planned) ; }
.st-ongoing::before { animation: sb-ping 2s ease-in-out infinite ; }
@keyframes sb-ping { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--dot) 0%, transparent) ; } }
.sb-section[data-theme="soft"] .card, .sb-section[data-theme="cream"] .card { border-color: transparent ; box-shadow: var(--sb-shadow-sm) ; }
[data-theme="dark"] .card, [data-theme="accent"] .card { background: rgb(255 255 255 / .05) ; border-color: rgb(255 255 255 / .1) ; }
[data-theme="dark"] .card .txt, [data-theme="accent"] .card .txt { color: rgb(255 255 255 / .72) ; }

/* ── Galerie ─────────────────────────────────────────────────────────── */
.gallery { display: grid ; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) ; gap: clamp(1rem, 2vw, 1.5rem) ; align-items: start ; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq { max-width: 52rem ; margin-inline: auto ; border-top: 1px solid var(--sb-line) ; }
.faq details { border-bottom: 1px solid var(--sb-line) ; }
.faq summary { display: flex ; align-items: center ; justify-content: space-between ; gap: 1.5rem ; padding: 1.5rem 0 ; cursor: pointer ; list-style: none ; font-size: var(--sb-fs-lg) ; font-weight: 600 ; }
.faq summary::-webkit-details-marker { display: none ; }
.faq summary .pm { position: relative ; flex: none ; width: 2rem ; height: 2rem ; border-radius: 50% ; border: 1px solid var(--sb-line-2) ; transition: transform 500ms var(--sb-ease-out), background-color var(--sb-dur) ; }
.faq summary .pm::before, .faq summary .pm::after { content: "" ; position: absolute ; left: 50% ; top: 50% ; width: 10px ; height: 1.5px ; margin: -.75px 0 0 -5px ; background: currentColor ; border-radius: 2px ; transition: transform 500ms var(--sb-ease-out) ; }
.faq summary .pm::after { transform: rotate(90deg) ; }
.faq details[open] summary .pm { transform: rotate(180deg) ; background: var(--sb-ink) ; color: #fff ; border-color: var(--sb-ink) ; }
.faq details[open] summary .pm::after { transform: rotate(0) ; }
.faq .ans { overflow: hidden ; }
.faq .ans .prose { padding-bottom: 1.5rem ; font-size: var(--sb-fs-md) ; }

/* ── Logos (bandeau) ─────────────────────────────────────────────────── */
.marquee { position: relative ; overflow: hidden ; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) ; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) ; }
.marquee-track { display: flex ; gap: 1rem ; width: max-content ; animation: sb-marquee var(--dur, 40s) linear infinite ; }
.marquee:hover .marquee-track { animation-play-state: paused ; }
@keyframes sb-marquee { to { transform: translateX(calc(-50% - .5rem)) ; } }
.logo-item { flex: none ; display: flex ; align-items: center ; gap: .9rem ; padding: 1.1rem 1.5rem ; border-radius: var(--sb-radius) ; background: var(--sb-paper) ; border: 1px solid var(--sb-line) ; }
.logo-item img { height: 36px ; width: auto ; }
.logo-item strong { display: block ; font-weight: 700 ; white-space: nowrap ; }
.logo-item span { display: block ; font-size: var(--sb-fs-xs) ; color: var(--sb-ink-3) ; white-space: nowrap ; }
.logo-mark { display: grid ; place-items: center ; width: 2.5rem ; height: 2.5rem ; border-radius: 12px ; background: var(--sb-primary-soft) ; color: var(--sb-primary) ; font-weight: 800 ; font-size: var(--sb-fs-sm) ; flex: none ; }
[data-theme="dark"] .logo-item, [data-theme="accent"] .logo-item { background: rgb(255 255 255 / .06) ; border-color: rgb(255 255 255 / .1) ; }

/* ── CTA ─────────────────────────────────────────────────────────────── */
.cta-box { position: relative ; overflow: hidden ; isolation: isolate ; padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 6vw, 6rem) ; border-radius: clamp(24px, 3vw, 40px) ; background: var(--sb-gradient) ; color: #fff ; text-align: center ; }
.cta-box::before { content: "" ; position: absolute ; inset: -40% ; z-index: -1 ; background: conic-gradient(from 0deg at 50% 50%, rgb(31 143 229 / .0), rgb(31 143 229 / .35), rgb(192 63 207 / .2), rgb(31 143 229 / 0) 60%) ; animation: sb-spin 18s linear infinite ; filter: blur(40px) ; }
@keyframes sb-spin { to { transform: rotate(1turn) ; } }
.cta-box .h2 { max-width: 46rem ; margin-inline: auto ; }
.cta-box p:not(.eyebrow) { max-width: 38rem ; margin: 1.25rem auto 0 ; color: rgb(255 255 255 / .8) ; font-size: var(--sb-fs-lg) ; }
.cta-box .btn-row { justify-content: center ; }
.cta-box .btn-primary { --b-bg: #fff ; --b-fg: var(--sb-ink) ; }
.cta-box .btn-primary:hover { --b-fg: #fff ; }
.cta-box .btn-secondary { --b-fg: #fff ; --b-bd: rgb(255 255 255 / .35) ; }
.cta-box .eyebrow { color: #B7C2FF ; }
.cta-curve { position: absolute ; inset: auto -5% -30% auto ; width: 50% ; z-index: -1 ; opacity: .35 ; }
.sb-section[data-theme="dark"] .cta-box, .sb-section[data-theme="accent"] .cta-box { background: rgb(255 255 255 / .06) ; }

/* ── Rich / légal ────────────────────────────────────────────────────── */
.rich { display: grid ; grid-template-columns: 15rem minmax(0, 46rem) ; gap: clamp(2rem, 6vw, 6rem) ; justify-content: center ; }
.rich:not(:has(.toc)) { grid-template-columns: minmax(0, 46rem) ; }
.toc { position: sticky ; top: 110px ; align-self: start ; font-size: var(--sb-fs-sm) ; }
.toc p { font-size: var(--sb-fs-xs) ; font-weight: 750 ; letter-spacing: .14em ; text-transform: uppercase ; color: var(--sb-ink-3) ; margin-bottom: .75rem ; }
.toc ol { list-style: none ; padding: 0 ; border-left: 1px solid var(--sb-line) ; }
.toc a { display: block ; padding: .4rem 0 .4rem 1rem ; margin-left: -1px ; border-left: 2px solid transparent ; color: var(--sb-ink-2) ; text-decoration: none ; transition: color var(--sb-dur-fast), border-color var(--sb-dur) ; }
.toc a.is-active { color: var(--sb-ink) ; border-color: var(--sb-primary) ; font-weight: 650 ; }
.rich .prose { font-size: var(--sb-fs-md) ; }
.rich .prose h3 { scroll-margin-top: 110px ; }
@media (max-width: 860px) { .rich { grid-template-columns: 1fr ; } .toc { position: static ; } }

/* ── Contact ─────────────────────────────────────────────────────────── */
.contact { display: grid ; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) ; gap: clamp(2rem, 6vw, 6rem) ; align-items: start ; }
.contact-info { list-style: none ; padding: 0 ; margin-top: 2.25rem ; display: grid ; gap: 1rem ; }
.contact-info a { display: inline-flex ; align-items: center ; gap: .9rem ; text-decoration: none ; font-weight: 650 ; font-size: var(--sb-fs-lg) ; }
.contact-info a:hover { color: var(--sb-primary) ; }
.contact-info small { display: block ; font-weight: 500 ; font-size: var(--sb-fs-sm) ; color: var(--sb-ink-3) ; }
[data-theme="dark"] .contact-info small, [data-theme="accent"] .contact-info small { color: rgb(255 255 255 / .55) ; }
.contact-text { margin-top: 1.25rem ; color: var(--sb-ink-2) ; font-size: var(--sb-fs-lg) ; }
[data-theme="dark"] .contact-text, [data-theme="accent"] .contact-text { color: rgb(255 255 255 / .75) ; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr ; } }

sb-contact { display: block ; }
.form-card { padding: clamp(1.5rem, 3vw, 2.5rem) ; border-radius: var(--sb-radius-lg) ; background: var(--sb-paper) ; box-shadow: var(--sb-shadow-lg) ; color: var(--sb-ink) ; }
.form-card .tabs-bar { margin-bottom: 1.75rem ; background: var(--sb-paper-2) ; }
.form-card .tabs-bar button { color: var(--sb-ink-2) ; }
.form-card .tabs-bar button[aria-selected="true"] { color: #fff ; }
.form-card .tabs-ind { background: var(--sb-ink) ; }
.fld { position: relative ; margin-bottom: 1rem ; }
.fld input, .fld textarea, .fld select { width: 100% ; padding: 1.5rem 1rem .6rem ; border: 1px solid var(--sb-line-2) ; border-radius: 12px ; background: var(--sb-paper) ; font: inherit ; font-size: var(--sb-fs-md) ; color: var(--sb-ink) ; transition: border-color var(--sb-dur-fast), box-shadow var(--sb-dur) ; appearance: none ; }
.fld textarea { min-height: 9rem ; resize: vertical ; }
.fld label { position: absolute ; left: 1rem ; top: 1.05rem ; font-size: var(--sb-fs-md) ; color: var(--sb-ink-3) ; pointer-events: none ; transform-origin: left top ; transition: transform var(--sb-dur) var(--sb-ease-out), color var(--sb-dur-fast) ; }
.fld input:focus, .fld textarea:focus, .fld select:focus { outline: none ; border-color: var(--sb-primary) ; box-shadow: 0 0 0 4px rgb(77 94 164 / .14) ; }
.fld input:focus + label, .fld input:not(:placeholder-shown) + label, .fld textarea:focus + label, .fld textarea:not(:placeholder-shown) + label, .fld select + label { transform: translateY(-.62rem) scale(.78) ; color: var(--sb-primary) ; }
.fld .err { display: block ; min-height: 0 ; font-size: var(--sb-fs-xs) ; color: var(--sb-alert) ; margin-top: .3rem ; }
.fld.has-err input, .fld.has-err textarea { border-color: var(--sb-alert) ; }
.fld-row { display: grid ; grid-template-columns: 1fr 1fr ; gap: 1rem ; }
@media (max-width: 520px) { .fld-row { grid-template-columns: 1fr ; } }
.radio-group { display: flex ; flex-wrap: wrap ; gap: .5rem ; margin: .25rem 0 1rem ; border: 0 ; padding: 0 ; }
.radio-group legend { width: 100% ; margin-bottom: .6rem ; font-size: var(--sb-fs-sm) ; color: var(--sb-ink-2) ; font-weight: 600 ; }
.radio-group label { position: relative ; }
.radio-group input { position: absolute ; opacity: 0 ; }
.radio-group span { display: inline-block ; padding: .6rem 1rem ; border-radius: var(--sb-radius-pill) ; border: 1px solid var(--sb-line-2) ; cursor: pointer ; font-size: var(--sb-fs-sm) ; font-weight: 600 ; transition: all var(--sb-dur-fast) ; }
.radio-group input:checked + span { background: var(--sb-primary) ; border-color: var(--sb-primary) ; color: #fff ; }
.radio-group input:focus-visible + span { outline: 2px solid var(--sb-sky) ; outline-offset: 2px ; }
.hp { position: absolute !important ; left: -9999px !important ; width: 1px ; height: 1px ; overflow: hidden ; }
.form-foot { display: flex ; flex-wrap: wrap ; gap: 1rem ; align-items: center ; justify-content: space-between ; margin-top: 1.25rem ; }
.form-note { font-size: var(--sb-fs-xs) ; color: var(--sb-ink-3) ; max-width: 22rem ; }
.form-note a { color: var(--sb-primary) ; }
.form-status { margin-top: 1rem ; padding: 0 1rem ; border-radius: 12px ; font-size: var(--sb-fs-sm) ; font-weight: 600 ; display: grid ; grid-template-rows: 0fr ; transition: grid-template-rows var(--sb-dur) var(--sb-ease-out), padding var(--sb-dur) ; }
.form-status > span { overflow: hidden ; }
.form-status.is-shown { grid-template-rows: 1fr ; padding: .9rem 1rem ; }
.form-status.ok { background: #E7F6EF ; color: #11704A ; }
.form-status.ko { background: #FDECEC ; color: #B42328 ; }
.btn.is-loading { pointer-events: none ; }
.btn.is-loading::after { content: "" ; width: 1rem ; height: 1rem ; border-radius: 50% ; border: 2px solid currentColor ; border-right-color: transparent ; animation: sb-spin .7s linear infinite ; }
.form-done { display: flex ; flex-direction: column ; align-items: center ; justify-content: center ; text-align: center ; padding: 2rem 1rem ; }
.form-done .done-msg { margin-top: .5rem ; color: var(--sb-ink-2) ; max-width: 26rem ; }
.form-done .btn { margin-top: 1.5rem ; }
/* Panneaux superposés : hauteur constante, fondu entre onglets */
.form-stack { display: grid ; }
.form-pane { grid-area: 1 / 1 ; opacity: 0 ; visibility: hidden ; transform: translateY(8px) ; transition: opacity 380ms var(--sb-ease-out), transform 500ms var(--sb-ease-out), visibility 0s 380ms ; }
.form-pane.is-active { opacity: 1 ; visibility: visible ; transform: none ; transition: opacity 380ms 60ms var(--sb-ease-out), transform 500ms 60ms var(--sb-ease-out) ; }
.form-pane .form-foot { margin-top: auto ; padding-top: 1.25rem ; }
form.form-pane { display: flex ; flex-direction: column ; }
.form-done .ok-mark { width: 4rem ; height: 4rem ; margin: 0 auto 1.25rem ; color: var(--sb-done) ; }
.form-done .ok-mark circle { stroke-dasharray: 160 ; stroke-dashoffset: 160 ; }
.form-done .ok-mark path { stroke-dasharray: 40 ; stroke-dashoffset: 40 ; }
.form-done.is-active .ok-mark circle { animation: sb-draw 800ms 150ms var(--sb-ease-out) forwards ; }
.form-done.is-active .ok-mark path { animation: sb-draw 500ms 650ms var(--sb-ease-out) forwards ; }
@keyframes sb-draw { to { stroke-dashoffset: 0 ; } }

/* ── Actualités ──────────────────────────────────────────────────────── */
sb-news { display: block ; }
.news-date { display: inline-flex ; align-items: center ; gap: .45rem ; font-size: var(--sb-fs-xs) ; font-weight: 750 ; letter-spacing: .08em ; text-transform: uppercase ; color: var(--sb-primary) ; }
.news-date .sb-icon { width: .95rem ; height: .95rem ; }
.news-place { display: inline-flex ; align-items: center ; gap: .35rem ; }
.news-place .sb-icon { width: .9rem ; height: .9rem ; }
.card-img.contain img { object-fit: contain ; padding: 1.25rem ; background: #fff ; }

/* ── Page 404 ────────────────────────────────────────────────────────── */
.e404 { min-height: 70vh ; display: grid ; place-items: center ; text-align: center ; padding: 8rem 1.5rem 4rem ; }
.e404 .big { font-size: clamp(6rem, 20vw, 14rem) ; font-weight: 200 ; letter-spacing: -.06em ; line-height: 1 ; background: var(--sb-gradient-sky) ; -webkit-background-clip: text ; background-clip: text ; color: transparent ; }

/* ── Mouvement réduit ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 1ms !important ; animation-iteration-count: 1 !important ; transition-duration: 1ms !important ; scroll-behavior: auto !important ; }
	[data-reveal] { opacity: 1 ; transform: none ; filter: none ; }
	.hero-title .w { opacity: 1 ; transform: none ; filter: none ; animation: none ; }
	.statement .w { opacity: 1 ; }
	.marquee-track { animation: none ; flex-wrap: wrap ; width: auto ; }
	.marquee { mask-image: none ; -webkit-mask-image: none ; }
}

@media print {
	sb-header, .ftr, .intro, .hdr-progress { display: none !important ; }
	[data-reveal] { opacity: 1 !important ; transform: none !important ; filter: none !important ; }
}

/* Première section sans hero : laisse la place à l'en-tête */
sb-page > .sb-section:first-child:not(.sec-hero) { padding-top: calc(76px + var(--sb-section-y) * .75) ; }
.split:not(:has(.media-wrap)) { grid-template-columns: minmax(0, 52rem) ; }
.ftr > .container-wide { position: relative ; z-index: 1 ; }
.cta-box .eyebrow { justify-content: center ; }
.cta-box .eyebrow::after { content: "" ; width: 1.75rem ; height: 1.5px ; background: currentColor ; }
.hero-media .media-img img, .split-media .media-img img, .tab-media .media-img img { max-height: min(76vh, 720px) ; object-fit: cover ; width: 100% ; }
.style-plain .feat { overflow: visible ; }
/* Sections consécutives de même fond : pas de double espacement */
.sb-section[data-theme="soft"] + .sb-section[data-theme="soft"],
.sb-section[data-theme="cream"] + .sb-section[data-theme="cream"],
.sb-section[data-theme="dark"] + .sb-section[data-theme="dark"] { padding-top: 0 ; }
.sb-section[data-theme="dark"] + .sb-section[data-theme="dark"]::before { display: none ; }
/* Exposants (1er…) dans les grands titres : n'altèrent pas l'interlignage */
.h1 sup, .h2 sup, .h3 sup, .statement sup { font-size: .5em ; line-height: 0 ; vertical-align: .85em ; letter-spacing: 0 ; margin-left: .02em ; }
@media (max-width: 520px) { .ftr-brand img { height: 84px ; } }

/* Menu mobile sous l'en-tête compact */
.is-scrolled .hdr-panel { inset: 64px 0 0 ; }

/* Changement de langue : la nouvelle langue se révèle en cercle depuis le bouton */
html.sb-lang-vt::view-transition-group(root) { animation-duration: 700ms ; }
html.sb-lang-vt::view-transition-old(root) { animation: sb-lang-out 700ms var(--sb-ease-in-out) both ; }
html.sb-lang-vt::view-transition-new(root) { animation: sb-lang-in 700ms var(--sb-ease-out) both ; }
@keyframes sb-lang-in { from { clip-path: circle(0 at var(--lx, 50%) var(--ly, 0)) ; } to { clip-path: circle(150vmax at var(--lx, 50%) var(--ly, 0)) ; } }
@keyframes sb-lang-out { to { opacity: .55 ; filter: blur(3px) ; } }
.cb-note { display: flex ; gap: 1rem ; align-items: flex-start ; margin-top: .75rem ; padding: 1.1rem 1.25rem ; border-radius: 14px ; background: var(--sb-sky-soft) ; color: var(--sb-ink-2) ; font-size: var(--sb-fs-sm) ; line-height: 1.55 ; }
.cb-note .sb-icon { flex: none ; width: 1.4rem ; height: 1.4rem ; margin-top: .1rem ; color: var(--sb-sky) ; }
.cb-note strong { display: block ; margin-bottom: .2rem ; color: var(--sb-ink) ; font-weight: 700 ; }

/* Burger : les 3 traits centrés dans le cercle */
.hdr-burger { position: relative ; }
.hdr-burger span { left: 50% ; top: 50% ; margin: -.875px 0 0 -9px ; }

/* Étapes : le conteneur de dépliage laisse respirer l'ombre et les coins arrondis des médias */
.step .step-body > div { padding: 0 1.25rem 1.75rem ; margin: 0 -1.25rem -1.75rem ; }
.step:not(.is-active) .step-body > div { visibility: hidden ; }
/* Images responsives : les dimensions intrinsèques n'imposent pas la taille affichée */
.media img, .card-img img, .logo-item img { height: auto ; }
.card-img img { height: 100% ; }
.logo-item img { width: auto ; height: 36px ; }
.media video[width] { width: 100% ; height: auto ; }
.sec-hero.v-immersive .hero-bg picture { display: contents ; }