/*
 * Styles of the site, taken from the Claude Design canvas (version 52, night blue #14253E).
 * Design tokens are the custom properties of .yzy below.
 */



body { margin: 0; background: #14253E; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Fond bleu nuit YZYflow #14253E (demande d'Emmanuel, version 29), titres en YZY Light #3BC3C7, jamais en fond */
.yzy {
  --font-sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-hero: "Stick No Bills", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: .625rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 64px;
  --bg: #14253E;
  --bg-2: oklch(31% .057 258);
  --bg-3: oklch(35.5% .062 258);
  --bg-deep: #14253E;
  --title: #3BC3C7;
  --text: oklch(97% .006 230);
  --text-2: oklch(83% .016 240);
  --text-3: oklch(71% .02 245);
  --line: oklch(100% 0 0 / .1);
  --line-2: oklch(100% 0 0 / .22);
  --btn: oklch(98% .004 230);
  --btn-hover: oklch(89% .012 230);
  --btn-text: #14253E;
  --error: oklch(75% .14 25);
  --ok: oklch(82% .15 135);
  --shadow: oklch(5% .02 258 / .7);
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
  color-scheme: dark;
  interpolate-size: allow-keywords;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Base */
:where(.yzy) *, :where(.yzy) *::before, :where(.yzy) *::after { box-sizing: border-box; }
:where(.yzy) img { display: block; max-width: 100%; height: auto; }
:where(.yzy) :where(h1, h2, h3, p, figure, dl, dd, ul) { margin: 0; padding: 0; }
:where(.yzy) ul { list-style: none; }
:where(.yzy) a { color: inherit; text-underline-offset: .22em; }
.yzy :focus-visible { outline: 2px solid var(--title); outline-offset: 3px; }
.yzy ::selection { background: oklch(40% .07 255); color: var(--text); }
.yzy section[id] { scroll-margin-top: var(--nav-h); }
.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: calc(var(--radius) - 2px); background: var(--btn); color: var(--btn-text); font-weight: 600; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }
.nowrap { white-space: nowrap; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-16 { width: 16px; height: 16px; }
.ic-24 { width: 24px; height: 24px; }
.ic-28 { width: 28px; height: 28px; }

/* Typographie : Stick No Bills pour les grands titres (38px minimum), Open Sans pour tout le reste */
.h2 { font-family: var(--font-hero); font-weight: 500; font-size: clamp(2.6rem, 5.4vw, 4.75rem); line-height: .95; letter-spacing: -.005em; color: var(--title); text-wrap: balance; }
.lead { margin-top: 22px; max-width: 40ch; font-size: clamp(1.1875rem, 1.7vw, 1.5rem); font-weight: 600; line-height: 1.42; letter-spacing: -.012em; color: var(--text-2); text-wrap: pretty; }
.sec { padding-block: clamp(112px, 14vw, 192px); }

/* Boutons : réponse immédiate à l'appui */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: calc(var(--radius) - 2px); font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .45s var(--ease), background-color .25s ease, color .25s ease, border-color .25s ease; }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn-light { background: var(--btn); color: var(--btn-text); }
.btn-light:hover { background: var(--btn-hover); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { border-color: oklch(100% 0 0 / .45); }
.btn-sm { height: 38px; padding: 0 16px; font-size: .9375rem; }
.link { display: inline-flex; align-items: center; gap: 4px; padding-block: 12px; font-weight: 600; color: var(--text); text-decoration: none; transition: color .25s ease; }
.link .ic { transition: transform .45s var(--ease); }
.link:hover { color: var(--title); }
.link:hover .ic { transform: translateX(3px); }
.link:active { transform: scale(.97); }

/* Navigation : matière translucide, sans filet dur */
.nav { position: sticky; top: 0; z-index: 60; height: var(--nav-h); color: var(--text); background: rgb(20 37 62 / .74); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); }
.nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none; background: linear-gradient(rgb(20 37 62 / .5), rgb(20 37 62 / 0)); }
.nav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo { display: block; flex: none; }
.nav-logo img { width: 126px; height: 40px; }
.nav-links { display: flex; align-items: center; gap: 36px; font-size: .9375rem; font-weight: 600; color: var(--text-2); }
.nav-links a { padding: 10px 0; text-decoration: none; transition: color .25s ease; }
.nav-links a:hover { color: var(--text); }
.nav-end { display: flex; align-items: center; gap: 18px; }
.lang { display: flex; align-items: center; gap: 2px; font-size: .8125rem; font-weight: 600; color: var(--text-2); }
.lang a, .lang-cur { display: inline-grid; place-items: center; min-width: 32px; height: 32px; text-decoration: none; }
.lang a:hover { color: var(--text); }
.lang-cur { color: var(--text); box-shadow: inset 0 -2px 0 currentColor; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary:active { transform: scale(.94); }
.menu-panel { position: absolute; right: 0; top: 54px; min-width: 240px; display: grid; gap: 2px; padding: 8px; border: 1px solid var(--line-2); border-radius: calc(var(--radius) + 6px); background: var(--bg-2); color: var(--text); box-shadow: 0 30px 60px -24px var(--shadow); transform-origin: top right; }
.menu-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: calc(var(--radius) - 2px); font-weight: 600; text-decoration: none; }
.menu-panel a:hover { background: var(--bg-3); }
.menu-lang { display: flex; align-items: center; gap: 4px; margin-top: 6px; padding: 8px 6px 2px; border-top: 1px solid var(--line); font-size: .875rem; font-weight: 600; }
.menu-lang a, .menu-lang .lang-cur { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; }

/* Héros */
.hero { position: relative; margin-top: calc(var(--nav-h) * -1); }
.hero-stage { position: relative; overflow: clip; isolation: isolate; padding: calc(var(--nav-h) + clamp(48px, 9vh, 104px)) 0 clamp(64px, 9vh, 104px); }
.hero-light { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(64% 58% at 50% 80%, oklch(35% .075 250 / .9), oklch(35% .075 250 / 0) 72%); -webkit-mask-image: linear-gradient(#000 62%, transparent 98%); mask-image: linear-gradient(#000 62%, transparent 98%); }
.hero-copy { position: relative; z-index: 3; display: grid; justify-items: center; gap: 26px; text-align: center; }
.news { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 10px; padding: 8px 18px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-2); font-size: .875rem; font-weight: 600; line-height: 1.4; text-decoration: none; transition: border-color .25s ease, color .25s ease, transform .45s var(--ease); }
.news:hover { color: var(--text); border-color: oklch(100% 0 0 / .42); }
.news:active { transform: scale(.98); }
.news-tag { color: var(--text); font-weight: 700; }
.news .ic { display: inline-block; vertical-align: -3px; transition: transform .45s var(--ease); }
.news:hover .ic { transform: translateX(3px); }
.hero-title { display: grid; justify-items: center; gap: 12px; font-family: var(--font-hero); font-weight: 700; }
.h1-l1 { display: block; font-size: clamp(3.2rem, 7.4vw, 7rem); line-height: .92; letter-spacing: -.012em; color: var(--title); text-wrap: balance; }
.hw { display: inline-block; }
.h1-l2 { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .5em; row-gap: 2px; }
.rot-pre { font-family: var(--font-sans); font-size: clamp(1.0625rem, 1.5vw, 1.375rem); font-weight: 600; letter-spacing: -.01em; color: var(--text-2); }
.rot-static { font-size: clamp(2.4rem, 3.4vw, 3.25rem); line-height: 1.05; color: var(--text); text-wrap: balance; }
.rot-anim { display: none; font-size: clamp(2.6rem, 4.4vw, 4rem); line-height: 1.12; color: var(--text); }
.rot-w { grid-area: 1 / 1; white-space: nowrap; }
.hero-sub { max-width: 54ch; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 30px; margin-top: 2px; }
.scr { position: relative; z-index: 0; width: min(1240px, 100%); margin: clamp(40px, 7vh, 88px) auto 0; }
.scr-frame { position: relative; }
.scr-view { position: relative; aspect-ratio: 1792 / 1008; }
.scr-view img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 50px 60px var(--shadow)); }
.scr-hls { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.scr-hl { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.scr-hl .hl-dim { fill: rgb(4 10 18 / .5); fill-rule: evenodd; }
.scr-hl .hl-card { fill: rgb(59 195 199 / .1); stroke: var(--title); stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 0 12px rgb(59 195 199 / .6)); }
.scr figcaption { position: absolute; left: 0; right: 0; bottom: calc(93% + 10px); font-size: .875rem; font-weight: 600; letter-spacing: .01em; color: var(--text-2); text-align: center; white-space: nowrap; }
.devs { position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 2.4vw, 36px); margin-top: calc(min(980px, 100vw - 2 * var(--gutter)) * -.2); }
.dev { --w: clamp(112px, 14.5vw, 216px); position: relative; width: var(--w); margin: 0; display: grid; justify-items: center; gap: 16px; }
.dev img { width: 100%; filter: drop-shadow(0 0 1px oklch(100% 0 0 / .5)) drop-shadow(0 40px 44px var(--shadow)); }
.dev figcaption { font-size: .875rem; font-weight: 600; letter-spacing: .01em; color: var(--text-2); white-space: nowrap; }
.motion-toggle { position: absolute; right: var(--gutter); bottom: 28px; z-index: 6; display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-2); border-radius: 999px; background: rgb(20 37 62 / .55); color: var(--text); cursor: pointer; transition: border-color .25s ease, transform .45s var(--ease); }
.motion-toggle:hover { border-color: oklch(100% 0 0 / .45); }
.motion-toggle:active { transform: scale(.94); transition-duration: .1s; }

/* Références */
.refs { padding-block: clamp(80px, 10vw, 128px) clamp(24px, 4vw, 48px); }
.refs-title { font-size: .9375rem; font-weight: 600; color: var(--text-3); text-align: center; }
.marquee { margin-top: 32px; overflow-x: auto; scrollbar-width: none; }
.marquee::-webkit-scrollbar { display: none; }
.marquee-track { display: flex; width: max-content; padding-inline: var(--gutter); }
.marquee-track img { width: auto; max-width: none; height: 52px; filter: brightness(0) invert(1); opacity: .58; }
.marquee-track .marquee-copy { display: none; }

/* Solutions : un chapitre par module */
.sol { padding-top: clamp(112px, 14vw, 192px); }
.sol-head { display: grid; justify-items: center; text-align: center; }
.sol-head .lead { margin-inline: auto; }
.mods { position: relative; margin-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(112px, 14vw, 192px); }
.mods-stage { display: grid; gap: clamp(88px, 11vw, 150px); }
.mod { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.mod-copy { display: grid; justify-items: start; gap: 18px; }
.mod-ic { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--line-2); border-radius: calc(var(--radius) + 4px); color: var(--text); }
.mod-name { font-family: var(--font-hero); font-weight: 700; font-size: clamp(2.8rem, 5.2vw, 4.75rem); line-height: .95; color: var(--title); }
.mod-desc { max-width: 24ch; font-size: clamp(1.25rem, 2.1vw, 1.875rem); font-weight: 600; line-height: 1.32; letter-spacing: -.016em; color: var(--text); text-wrap: pretty; }
.mod-media { margin: 0; display: grid; place-items: center; }
.mod-media img { width: auto; height: auto; max-width: 100%; max-height: min(64vh, 600px); filter: drop-shadow(0 0 1px oklch(100% 0 0 / .5)) drop-shadow(0 48px 60px var(--shadow)); }
.m-4 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.m-4 .mod-media img { width: min(100%, 720px); max-height: none; }
.steps, .mods-mark { display: none; }

/* Expertise */
.xp { padding-top: clamp(112px, 14vw, 192px); }
.xp-stage { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; display: grid; gap: clamp(40px, 5vw, 64px); }
.xp-title { order: -1; }
.xp-frame { margin: 0; overflow: hidden; border-radius: 20px; }
.xp-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 45%; }
.xp-veil { display: none; }
.xp-body { padding-block: clamp(96px, 12vw, 168px) clamp(112px, 14vw, 192px); }
.stmt { max-width: 30ch; font-size: clamp(1.75rem, 3.7vw, 3.25rem); font-weight: 700; line-height: 1.18; letter-spacing: -.022em; color: var(--text); text-wrap: pretty; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 32px; margin-top: clamp(80px, 10vw, 136px); }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line); }
.stat dt { font-size: 1rem; font-weight: 600; color: var(--text-2); }
.num { display: flex; align-items: baseline; gap: .12em; font-family: var(--font-hero); font-weight: 700; font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; color: var(--title); }
.num-box { display: inline-grid; }
.num-val, .num-anim { grid-area: 1 / 1; }
.num-anim { display: none; }
.num-suf { font-size: .78em; }
.n1 { --na: 3; --nb: 6; counter-reset: na var(--na) nb var(--nb); }
.n1::after { content: counter(na) "," counter(nb); }
.n2 { --na: 769; counter-reset: na var(--na); }
.n2::after { content: counter(na); }
.n3 { --na: 14; counter-reset: na var(--na); }
.n3::after { content: counter(na); }
.n4 { --na: 943; counter-reset: na var(--na); }
.n4::after { content: counter(na); }
.n5 { --na: 86; --nb: 7; counter-reset: na var(--na) nb var(--nb); }
.n5::after { content: counter(na) "," counter(nb); }

/* Services */
.svc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
.svc-aside { align-self: stretch; }
.svc-sticky { position: sticky; top: calc(var(--nav-h) + 6vh); }
.svc-photo { margin: clamp(32px, 4vw, 48px) 0 0; overflow: hidden; border-radius: 20px; }
.svc-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 60%; }
.svc-item { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 22px; align-items: start; padding-block: clamp(36px, 6vh, 64px); border-top: 1px solid var(--line); }
.svc-item:first-child { padding-top: 6px; border-top: 0; }
.svc-ic { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-2); border-radius: calc(var(--radius) + 4px); color: var(--text); }
.svc-item h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); font-weight: 700; line-height: 1.3; letter-spacing: -.012em; color: var(--text); }
.svc-item p { margin-top: 8px; max-width: 52ch; font-size: 1.0625rem; color: var(--text-2); }

/* Vision */
.vis { padding-block: clamp(112px, 14vw, 192px); }
.vis-stage { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.vals { display: grid; margin-top: clamp(48px, 6vw, 80px); }
.val { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 16px 48px; align-items: baseline; padding-block: clamp(28px, 3.4vw, 44px); border-top: 1px solid var(--line); }
.val-word { font-family: var(--font-hero); font-weight: 700; font-size: clamp(2.8rem, 7vw, 6rem); line-height: .95; color: var(--title); }
.val p { max-width: 44ch; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.6; color: var(--text-2); }
.vis-dots { display: none; }

/* Notre regard sur le cashless : la proposition de loi en carte document */
.press { padding-block: clamp(112px, 14vw, 192px) 0; }
.press-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.press-text { margin-top: 18px; max-width: 54ch; font-size: 1.0625rem; color: var(--text-2); text-wrap: pretty; }
.press-fig { display: grid; gap: 8px; margin-top: clamp(32px, 4vw, 48px); padding-top: 22px; border-top: 1px solid var(--line); }
.press-cap { max-width: 44ch; font-size: 1rem; font-weight: 600; color: var(--text-2); }
.press-links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 28px; }
.ext .ic { transition: transform .45s var(--ease); }
.ext:hover .ic { transform: translate(2px, -2px); }
.doc-card { display: grid; align-content: space-between; gap: 40px; min-height: 380px; padding: clamp(28px, 3vw, 40px); border: 1px solid var(--line-2); border-radius: 20px; background: var(--bg-2); color: var(--text); text-decoration: none; box-shadow: inset 0 1px 0 oklch(100% 0 0 / .08), 0 60px 120px -60px var(--shadow); transition: transform .6s var(--ease), border-color .3s ease; }
.doc-card:hover { transform: translateY(-6px); border-color: oklch(100% 0 0 / .42); }
.doc-card:active { transform: translateY(-2px) scale(.985); transition-duration: .1s; }
.doc-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.doc-ic { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--line-2); border-radius: calc(var(--radius) + 4px); color: var(--text); }
.doc-kicker { font-size: .875rem; font-weight: 600; color: var(--text-3); text-align: right; }
.doc-body { display: grid; gap: 14px; }
.doc-title { font-family: var(--font-hero); font-weight: 700; font-size: clamp(2.8rem, 4.4vw, 4rem); line-height: .95; color: var(--title); }
.doc-ref { font-size: 1.0625rem; font-weight: 600; letter-spacing: .02em; color: var(--text-2); }
.doc-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.doc-cta .ic { transition: transform .45s var(--ease); }
.doc-card:hover .doc-cta .ic { transform: translate(2px, -2px); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq-head { position: sticky; top: calc(var(--nav-h) + 6vh); }
.faq-list { display: grid; gap: 12px; }
.qa { border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: var(--bg-2); transition: border-color .3s ease, background-color .3s ease; }
.qa:hover { border-color: var(--line-2); }
.qa[open] { border-color: var(--line-2); background: var(--bg-3); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 20px 24px; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; cursor: pointer; border-radius: inherit; transition: transform .45s var(--ease); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:active { transform: scale(.992); transition-duration: .1s; }
.qa summary .ic { color: var(--text-2); transition: transform .5s var(--ease); }
.qa[open] summary .ic { transform: rotate(180deg); }
.qa-a { display: grid; gap: 14px; max-width: 68ch; padding: 0 24px 24px; color: var(--text-2); }

/* Contact */
.cta-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
.cta-info { display: grid; gap: 20px; margin-top: 44px; }
.cta-info li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; }
.cta-ic { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-2); border-radius: calc(var(--radius) + 4px); color: var(--text); }
.cta-info strong { display: block; font-size: .8125rem; font-weight: 700; color: var(--text-3); }
.cta-info a { font-weight: 600; color: var(--text); text-decoration: none; transition: color .25s ease; }
.cta-info a:hover { color: var(--title); text-decoration: underline; }
.form-card { padding: clamp(28px, 3.4vw, 44px); border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); box-shadow: 0 60px 120px -60px var(--shadow); }
.form { display: grid; gap: 20px; }
.f-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-size: .875rem; font-weight: 600; color: var(--text-2); }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: calc(var(--radius) - 2px); background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; transition: border-color .2s ease, box-shadow .2s ease; }
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--title); box-shadow: 0 0 0 3px oklch(74.82% .1131 197.92 / .28); }
.field input[aria-invalid="true"] { border-color: var(--error); }
.f-err { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 600; color: var(--error); }
.f-submit { justify-self: start; margin-top: 6px; }
.f-ok { display: grid; justify-items: start; gap: 14px; padding-block: 24px; }
.f-ok-ic { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid oklch(82% .15 135 / .5); border-radius: 999px; color: var(--ok); }
.f-ok h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--text); }
.f-ok p { color: var(--text-2); }

/* Pied de page */
.ftr { padding-block: clamp(80px, 10vw, 128px) 36px; background: var(--bg-deep); }
.ftr-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 40px; }
.ftr-brand img { width: 151px; height: 48px; }
.ftr-base { margin-top: 32px; font-family: var(--font-hero); font-weight: 700; font-size: clamp(2.4rem, 4.4vw, 3.75rem); line-height: 1; color: var(--text); }
.ftr-base .accent { color: var(--title); }
.ftr-col { display: grid; align-content: start; gap: 10px; font-size: .9375rem; color: var(--text-2); }
.ftr-h { margin-bottom: 6px; font-size: .875rem; font-weight: 700; color: var(--text); }
.ftr-col a { text-decoration: none; }
.ftr-col a:hover { color: var(--text); text-decoration: underline; }
.ftr address { display: grid; gap: 10px; font-style: normal; }
.ftr-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: clamp(56px, 7vw, 88px); padding-top: 24px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--text-3); }
.ftr-legal nav { display: flex; flex-wrap: wrap; gap: 20px; }
.ftr-legal a { text-decoration: none; }
.ftr-legal a:hover { color: var(--text); text-decoration: underline; }

/* Navigation : la matière apparaît au défilement (couleur et flou, pas de mouvement) */
@supports (animation-timeline: scroll()) {
  .yzy.anim .nav { animation: nav-mat linear both; animation-timeline: scroll(); animation-range: 0 140px; }
  .yzy.anim .nav::after { animation: fade-in linear both; animation-timeline: scroll(); animation-range: 0 140px; }
}
@media (prefers-reduced-transparency: reduce) {
  .yzy .nav { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
}
@media (prefers-contrast: more) {
  .yzy { --line: oklch(100% 0 0 / .35); --line-2: oklch(100% 0 0 / .55); --text-2: oklch(92% .01 240); --text-3: oklch(85% .014 245); }
}

/* Images clés */
@keyframes fade-in { from { opacity: 0; } }
@keyframes nav-mat { from { background-color: rgb(20 37 62 / 0); -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(32px); filter: blur(8px); } }
@keyframes word-in { from { opacity: 0; transform: translateY(.45em); filter: blur(12px); } }
@keyframes rot-w {
  0% { opacity: 0; transform: translateY(55%); filter: blur(6px); }
  4% { opacity: 1; transform: none; filter: blur(0); }
  22% { opacity: 1; transform: none; filter: blur(0); }
  26% { opacity: 0; transform: translateY(-55%); filter: blur(6px); }
  100% { opacity: 0; transform: translateY(-55%); filter: blur(6px); }
}
@keyframes dev-in { from { opacity: 0; transform: translateY(18vh) scale(.96); } }
@keyframes dev-focus {
  0% { transform: translateY(0); filter: brightness(.6) saturate(.85); }
  4% { transform: translateY(-18px); filter: brightness(1) saturate(1); }
  22% { transform: translateY(-18px); filter: brightness(1) saturate(1); }
  27% { transform: translateY(0); filter: brightness(.6) saturate(.85); }
  100% { transform: translateY(0); filter: brightness(.6) saturate(.85); }
}
@keyframes dev-z { 0% { z-index: 1; } 1% { z-index: 5; } 24% { z-index: 5; } 25% { z-index: 1; } 100% { z-index: 1; } }
@keyframes dev-spread {
  from { transform: translate(calc(var(--w) * var(--k) * .3), 0) rotate(calc(var(--k) * 6deg)) scale(.92); }
  to { transform: translate(calc(var(--step) * var(--k)), var(--y1)) rotate(0deg) scale(1); }
}
@keyframes hero-out { to { opacity: 0; transform: translateY(-9vh) scale(.94); filter: blur(10px); } }
@keyframes scr-in { from { opacity: 0; transform: translateY(12vh) scale(.97); filter: blur(8px); } }
@keyframes scr-up {
  from { transform: translateY(0) perspective(1400px) rotateX(18deg) scale(.9); }
  to { transform: translateY(var(--s-dy)) perspective(1400px) rotateX(0deg) scale(1); }
}
@keyframes scr-hl {
  0% { opacity: 0; transform: scale(1.08); }
  4% { opacity: 1; transform: scale(1); }
  22% { opacity: 1; transform: scale(1); }
  27% { opacity: 0; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(1.08); }
}
@keyframes light-up { from { opacity: .5; } }
@keyframes cap-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.94); filter: blur(6px); } }
@keyframes qa-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes rv { from { opacity: 0; transform: translateY(44px); filter: blur(6px); } }
@keyframes rv-mat { from { opacity: 0; transform: translateY(56px) scale(.95); filter: blur(14px); } }
@keyframes w-lit { from { opacity: .16; } }
@keyframes count { from { --na: 0; --nb: 0; } }
@keyframes tx-first { 0%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-40px); } }
@keyframes tx-mid { 0% { opacity: 0; transform: translateY(40px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-40px); } }
@keyframes tx-last { 0% { opacity: 0; transform: translateY(40px); } 15%, 100% { opacity: 1; transform: none; } }
@keyframes md-first { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes md-mid { 0% { opacity: 0; } 23.1%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes md-out { 0% { opacity: 0; transform: none; } 25%, 83.3% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6vh) scale(.9); } }
@keyframes md-last { 0% { opacity: 0; transform: translateY(10vh) scale(.94); } 28.6%, 100% { opacity: 1; transform: none; } }
@keyframes st-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes st-lit { 0% { color: var(--text-3); } 8%, 92% { color: var(--text); } 100% { color: var(--text-3); } }
@keyframes xp-open { from { clip-path: inset(16vh 20vw round 28px); } to { clip-path: inset(0 0 round 0); } }
@keyframes xp-zoom { from { transform: scale(1.2); } to { transform: scale(1); } }
@keyframes title-in { from { opacity: 0; transform: translateY(6vh); filter: blur(12px); } }
@keyframes spot { 0% { opacity: .28; } 30%, 66% { opacity: 1; } 100% { opacity: .28; } }
@keyframes svc-zoom { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes vw-first { 0%, 66.7% { opacity: 1; transform: none; filter: blur(0); } 100% { opacity: 0; transform: scale(.9); filter: blur(14px); } }
@keyframes vw-mid { 0% { opacity: 0; transform: scale(1.12); filter: blur(14px); } 28.6%, 71.4% { opacity: 1; transform: none; filter: blur(0); } 100% { opacity: 0; transform: scale(.9); filter: blur(14px); } }
@keyframes vw-last { 0% { opacity: 0; transform: scale(1.12); filter: blur(14px); } 33.3%, 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes dot-lit { 0% { opacity: .2; } 15%, 85% { opacity: 1; } 100% { opacity: .2; } }

/* Mouvement autonome : seulement sans préférence de mouvement réduit et avec le réglage Animations actif */
@media (prefers-reduced-motion: no-preference) {
  .yzy.anim .in { animation: rise-in 1.1s var(--ease) both; }
  .yzy.anim .hw { animation: word-in 1.2s var(--ease) both; }
  .yzy.anim .d1 { animation-delay: .05s; }
  .yzy.anim .d2 { animation-delay: .14s; }
  .yzy.anim .d3 { animation-delay: .22s; }
  .yzy.anim .d4 { animation-delay: .3s; }
  .yzy.anim .d5 { animation-delay: .46s; }
  .yzy.anim .d6 { animation-delay: .58s; }
  .yzy.anim .d7 { animation-delay: .7s; }
  .yzy.anim .rot-static { display: none; }
  .yzy.anim .rot-anim { display: inline-grid; justify-items: center; }
  .yzy.anim .rot-w { opacity: 0; animation: rot-w 9.6s var(--ease) infinite both; }
  .yzy.anim .rw-1 { animation-delay: 2.4s; }
  .yzy.anim .rw-2 { animation-delay: 4.8s; }
  .yzy.anim .rw-3 { animation-delay: 7.2s; }
  .yzy.anim .dev-rise { animation: dev-in 1.4s var(--ease) both; }
  .yzy.anim .dev-0 .dev-rise { animation-delay: .3s; }
  .yzy.anim .dev-1 .dev-rise { animation-delay: .4s; }
  .yzy.anim .dev-2 .dev-rise { animation-delay: .5s; }
  .yzy.anim .dev-3 .dev-rise { animation-delay: .6s; }
  .yzy.anim .dev-focus { animation: dev-focus 9.6s var(--ease) infinite both; }
  .yzy.anim .dev-1 .dev-focus { animation-delay: 2.4s; }
  .yzy.anim .dev-2 .dev-focus { animation-delay: 4.8s; }
  .yzy.anim .dev-3 .dev-focus { animation-delay: 7.2s; }
  .yzy.anim .scr-rise { animation: scr-in 1.4s var(--ease) .15s both; }
  .yzy.anim .scr-hl { animation: scr-hl 9.6s var(--ease) infinite both; }
  .yzy.anim .hl-0 { animation-delay: 2.4s; }
  .yzy.anim .hl-1 { animation-delay: 4.8s; }
  .yzy.anim .hl-2 { animation-delay: 7.2s; }
  .yzy.anim .motion-toggle { display: inline-flex; }
  .yzy.anim .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .yzy.anim .marquee-track { padding-inline: 0; animation: marquee 60s linear infinite; }
  .yzy.anim .marquee-track .marquee-copy { display: block; }
  .yzy.anim .marquee:hover .marquee-track { animation-play-state: paused; }
  .yzy.anim.is-paused .rot-w, .yzy.anim.is-paused .hs-ph, .yzy.anim.is-paused .hs-lb, .yzy.anim.is-paused .hs-tabs li, .yzy.anim.is-paused .hs-tabs li::after, .yzy.anim.is-paused .marquee-track { animation-play-state: paused; }
  .yzy.anim .menu[open] .menu-panel { animation: pop-in .35s var(--ease); }
  .yzy.anim .qa::details-content { block-size: 0; overflow-y: clip; transition: block-size .55s var(--ease), content-visibility .55s allow-discrete; }
  .yzy.anim .qa[open]::details-content { block-size: auto; }
  .yzy.anim .qa[open] .qa-a { animation: qa-in .5s var(--ease); }

  /* Récit piloté par le défilement : chaque séquence suit le doigt, s'inverse et s'interrompt à tout instant */
  @supports (animation-timeline: view()) {
    .yzy.anim .reveal { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% cover 18%; }
    .yzy.anim .reveal-mat { animation: rv-mat linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }


    /* Solutions : un appareil fixe, l'écran change, le texte suit */
    .yzy.anim .mods { height: 480vh; margin-top: clamp(24px, 4vw, 56px); padding-bottom: 0; view-timeline-name: --mods; }
    .yzy.anim .mods-stage { position: sticky; top: 0; height: 100vh; display: block; overflow: clip; }
    .yzy.anim .mod { position: absolute; top: var(--nav-h); bottom: 92px; left: 0; right: 0; }
    .yzy.anim .mod-media img { max-height: min(66vh, 620px); }
    .yzy.anim .mods-mark { display: block; position: absolute; left: 0; width: 1px; height: 1px; }
    .yzy.anim .mk-0 { top: 38vh; }
    .yzy.anim .mk-1 { top: 114vh; }
    .yzy.anim .mk-2 { top: 190vh; }
    .yzy.anim .mk-3 { top: 266vh; }
    .yzy.anim .mk-4 { top: 342vh; }
    .yzy.anim .m-0 .mod-copy { animation: tx-first linear both; animation-timeline: --mods; animation-range: contain 0% contain 20%; }
    .yzy.anim .m-1 .mod-copy { animation: tx-mid linear both; animation-timeline: --mods; animation-range: contain 20% contain 40%; }
    .yzy.anim .m-2 .mod-copy { animation: tx-mid linear both; animation-timeline: --mods; animation-range: contain 40% contain 60%; }
    .yzy.anim .m-3 .mod-copy { animation: tx-mid linear both; animation-timeline: --mods; animation-range: contain 60% contain 80%; }
    .yzy.anim .m-4 .mod-copy { animation: tx-last linear both; animation-timeline: --mods; animation-range: contain 80% contain 100%; }
    .yzy.anim .m-0 .mod-media { animation: md-first linear both; animation-timeline: --mods; animation-range: contain 0% contain 23%; }
    .yzy.anim .m-1 .mod-media { animation: md-mid linear both; animation-timeline: --mods; animation-range: contain 17% contain 43%; }
    .yzy.anim .m-2 .mod-media { animation: md-mid linear both; animation-timeline: --mods; animation-range: contain 37% contain 63%; }
    .yzy.anim .m-3 .mod-media { animation: md-out linear both; animation-timeline: --mods; animation-range: contain 57% contain 81%; }
    .yzy.anim .m-4 .mod-media { animation: md-last linear both; animation-timeline: --mods; animation-range: contain 79% contain 100%; }
    .yzy.anim .steps { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 4; display: flex; justify-content: center; gap: clamp(10px, 2vw, 28px); }
    .yzy.anim .st { display: grid; gap: 10px; width: clamp(60px, 9vw, 120px); padding: 8px 0; font-size: .875rem; font-weight: 600; color: var(--text-3); text-decoration: none; }
    .yzy.anim .st:hover .st-label { text-decoration: underline; }
    .yzy.anim .bar { display: block; height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
    .yzy.anim .fill { display: block; height: 100%; background: var(--text); transform-origin: 0 50%; }
    .yzy.anim .st-0 { animation: st-lit linear both; animation-timeline: --mods; animation-range: contain 0% contain 20%; }
    .yzy.anim .st-1 { animation: st-lit linear both; animation-timeline: --mods; animation-range: contain 20% contain 40%; }
    .yzy.anim .st-2 { animation: st-lit linear both; animation-timeline: --mods; animation-range: contain 40% contain 60%; }
    .yzy.anim .st-3 { animation: st-lit linear both; animation-timeline: --mods; animation-range: contain 60% contain 80%; }
    .yzy.anim .st-4 { animation: st-lit linear both; animation-timeline: --mods; animation-range: contain 80% contain 100%; }
    .yzy.anim .f-0 { animation: st-fill linear both; animation-timeline: --mods; animation-range: contain 0% contain 20%; }
    .yzy.anim .f-1 { animation: st-fill linear both; animation-timeline: --mods; animation-range: contain 20% contain 40%; }
    .yzy.anim .f-2 { animation: st-fill linear both; animation-timeline: --mods; animation-range: contain 40% contain 60%; }
    .yzy.anim .f-3 { animation: st-fill linear both; animation-timeline: --mods; animation-range: contain 60% contain 80%; }
    .yzy.anim .f-4 { animation: st-fill linear both; animation-timeline: --mods; animation-range: contain 80% contain 100%; }

    /* Expertise : la photo s'ouvre en plein cadre, puis le texte s'allume mot à mot */
    .yzy.anim .xp { padding-top: 0; }
    .yzy.anim .xp-pin { height: 220vh; view-timeline-name: --xp; }
    .yzy.anim .xp-stage { position: sticky; top: 0; height: 100vh; width: auto; margin: 0; display: block; overflow: clip; }
    .yzy.anim .xp-frame { position: absolute; inset: 0; border-radius: 0; animation: xp-open linear both; animation-timeline: --xp; animation-range: contain 0% contain 55%; }
    .yzy.anim .xp-img { height: 100%; aspect-ratio: auto; animation: xp-zoom linear both; animation-timeline: --xp; animation-range: contain 0% contain 100%; }
    .yzy.anim .xp-veil { display: block; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgb(20 37 62 / .94) 0%, rgb(20 37 62 / .6) 42%, rgb(20 37 62 / .18) 100%); animation: fade-in linear both; animation-timeline: --xp; animation-range: contain 35% contain 62%; }
    .yzy.anim .xp-title { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 13vh; text-align: center; animation: title-in linear both; animation-timeline: --xp; animation-range: contain 48% contain 76%; }
    .yzy.anim .stmt { view-timeline-name: --stmt; }
    .yzy.anim .stmt .w { animation: w-lit linear both; animation-timeline: --stmt; }
    .yzy.anim .stmt .w:nth-child(1) { animation-range: cover 20.0% cover 26.0%; }
    .yzy.anim .stmt .w:nth-child(2) { animation-range: cover 21.2% cover 27.2%; }
    .yzy.anim .stmt .w:nth-child(3) { animation-range: cover 22.3% cover 28.3%; }
    .yzy.anim .stmt .w:nth-child(4) { animation-range: cover 23.5% cover 29.5%; }
    .yzy.anim .stmt .w:nth-child(5) { animation-range: cover 24.6% cover 30.6%; }
    .yzy.anim .stmt .w:nth-child(6) { animation-range: cover 25.8% cover 31.8%; }
    .yzy.anim .stmt .w:nth-child(7) { animation-range: cover 27.0% cover 33.0%; }
    .yzy.anim .stmt .w:nth-child(8) { animation-range: cover 28.1% cover 34.1%; }
    .yzy.anim .stmt .w:nth-child(9) { animation-range: cover 29.3% cover 35.3%; }
    .yzy.anim .stmt .w:nth-child(10) { animation-range: cover 30.5% cover 36.5%; }
    .yzy.anim .stmt .w:nth-child(11) { animation-range: cover 31.6% cover 37.6%; }
    .yzy.anim .stmt .w:nth-child(12) { animation-range: cover 32.8% cover 38.8%; }
    .yzy.anim .stmt .w:nth-child(13) { animation-range: cover 33.9% cover 39.9%; }
    .yzy.anim .stmt .w:nth-child(14) { animation-range: cover 35.1% cover 41.1%; }
    .yzy.anim .stmt .w:nth-child(15) { animation-range: cover 36.3% cover 42.3%; }
    .yzy.anim .stmt .w:nth-child(16) { animation-range: cover 37.4% cover 43.4%; }
    .yzy.anim .stmt .w:nth-child(17) { animation-range: cover 38.6% cover 44.6%; }
    .yzy.anim .stmt .w:nth-child(18) { animation-range: cover 39.7% cover 45.7%; }
    .yzy.anim .stmt .w:nth-child(19) { animation-range: cover 40.9% cover 46.9%; }
    .yzy.anim .stmt .w:nth-child(20) { animation-range: cover 42.1% cover 48.1%; }
    .yzy.anim .stmt .w:nth-child(21) { animation-range: cover 43.2% cover 49.2%; }
    .yzy.anim .stmt .w:nth-child(22) { animation-range: cover 44.4% cover 50.4%; }
    .yzy.anim .stmt .w:nth-child(23) { animation-range: cover 45.5% cover 51.5%; }
    .yzy.anim .stmt .w:nth-child(24) { animation-range: cover 46.7% cover 52.7%; }
    .yzy.anim .stmt .w:nth-child(25) { animation-range: cover 47.9% cover 53.9%; }
    .yzy.anim .stmt .w:nth-child(26) { animation-range: cover 49.0% cover 55.0%; }
    .yzy.anim .stmt .w:nth-child(27) { animation-range: cover 50.2% cover 56.2%; }
    .yzy.anim .stmt .w:nth-child(28) { animation-range: cover 51.4% cover 57.4%; }
    .yzy.anim .stmt .w:nth-child(29) { animation-range: cover 52.5% cover 58.5%; }
    .yzy.anim .stmt .w:nth-child(30) { animation-range: cover 53.7% cover 59.7%; }
    .yzy.anim .stmt .w:nth-child(31) { animation-range: cover 54.8% cover 60.8%; }
    .yzy.anim .num-anim { display: block; animation: count linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .yzy.anim .num-val { color: transparent; }

    /* Services : chaque ligne s'éclaire au centre de l'écran */
    .yzy.anim .svc { view-timeline-name: --svc; }
    .yzy.anim .svc-photo img { animation: svc-zoom linear both; animation-timeline: --svc; animation-range: cover 0% cover 100%; }
    .yzy.anim .svc-item { animation: spot linear both; animation-timeline: view(); animation-range: cover 12% cover 88%; }

    /* Vision : trois mots, un seul à la fois */
    .yzy.anim .vis { padding: 0; }
    .yzy.anim .vis-pin { height: 320vh; view-timeline-name: --vis; }
    .yzy.anim .vis-stage { position: sticky; top: 0; height: 100vh; width: auto; margin: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; padding: calc(var(--nav-h) + 6vh) var(--gutter) 6vh; overflow: clip; }
    .yzy.anim .vis-title { font-size: clamp(2.4rem, 3.4vw, 3rem); text-align: center; }
    .yzy.anim .vals { width: 100%; margin: 0; display: grid; place-items: center; }
    .yzy.anim .val { grid-area: 1 / 1; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 28px; padding: 0; border: 0; text-align: center; }
    .yzy.anim .val-word { font-size: clamp(2.8rem, 13vw, 11rem); }
    .yzy.anim .val p { max-width: 34ch; font-size: clamp(1.125rem, 1.7vw, 1.5rem); font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
    .yzy.anim .v-0 { animation: vw-first linear both; animation-timeline: --vis; animation-range: contain 0% contain 40%; }
    .yzy.anim .v-1 { animation: vw-mid linear both; animation-timeline: --vis; animation-range: contain 26.7% contain 73.3%; }
    .yzy.anim .v-2 { animation: vw-last linear both; animation-timeline: --vis; animation-range: contain 60% contain 100%; }
    .yzy.anim .vis-dots { display: flex; gap: 10px; }
    .yzy.anim .vd { display: block; width: 28px; height: 3px; border-radius: 3px; background: var(--text); opacity: .2; }
    .yzy.anim .vd-0 { animation: dot-lit linear both; animation-timeline: --vis; animation-range: contain 0% contain 33.3%; }
    .yzy.anim .vd-1 { animation: dot-lit linear both; animation-timeline: --vis; animation-range: contain 33.3% contain 66.7%; }
    .yzy.anim .vd-2 { animation: dot-lit linear both; animation-timeline: --vis; animation-range: contain 66.7% contain 100%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  @supports (animation-timeline: view()) {
    .yzy.anim .reveal, .yzy.anim .reveal-mat { animation: fade-in linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; }
  }
}

/* Responsive : le terrain se vit sur mobile */
@media (max-width: 1024px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid, .faq-grid, .cta-grid, .press-grid { grid-template-columns: minmax(0, 1fr); }
  .doc-card { min-height: 300px; }
  .svc-sticky, .faq-head { position: static; }
  .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-brand { grid-column: 1 / -1; }
}
/* Héros : un module à la fois. L'ordinateur reste fixe, un téléphone et sa phrase changent toutes les 4 s (cycle de 16 s) */
.hs { position: relative; z-index: 1; width: min(940px, 100% - 2 * var(--gutter)); margin: clamp(28px, 5vh, 56px) auto 0; }
.hs-scene { position: relative; aspect-ratio: 16 / 8.2; }
.hs-laptop { position: absolute; left: 42%; top: -6%; width: 88%; max-width: none; height: auto; transform: translateX(-50%); filter: drop-shadow(0 40px 50px var(--shadow)); }
.hs-ph { position: absolute; right: 1%; bottom: -8%; width: 21%; opacity: 0; filter: drop-shadow(0 30px 30px rgb(0 0 0 / .45)); }
.hs-ph img { display: block; width: 100%; height: auto; }
.hs-lbs { position: absolute; left: 0; bottom: 10%; width: 30%; }
.hs-lb { position: absolute; left: 0; bottom: 0; display: grid; gap: 6px; text-align: left; opacity: 0; }
.hs-lb b { font-family: var(--font-hero); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1; color: var(--text); }
.hs-lb em { font-style: normal; color: var(--title); }
.hs-lb span { font-size: clamp(.85rem, 1.1vw, 1rem); line-height: 1.4; color: var(--text-2); }
.hs-ph.hs-0, .hs-lb.hs-0 { opacity: 1; }
.hs-tabs { display: flex; justify-content: center; gap: clamp(14px, 3vw, 36px); margin: clamp(18px, 3vh, 28px) 0 0; padding: 0; list-style: none; }
.hs-tabs li { position: relative; padding: 6px 2px 8px; font-size: .85rem; font-weight: 600; color: var(--text-2); }
.hs-tabs li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-top: 2px solid oklch(100% 0 0 / .14); border-radius: 2px; }
.hs-tabs li.hs-0 { color: var(--text); }
.hs-tabs a { color: inherit; text-decoration: none; }
.hs-tabs a:hover, .hs-tabs a:focus-visible { color: var(--text); }
.yzy.anim .hs-tabs li.hs-4, .yzy.anim .hs-tabs li.hs-4::after { animation: none; }
@keyframes hs-show { 0% { opacity: 0; transform: translateY(10%) rotate(2deg); } 4%, 22% { opacity: 1; transform: none; } 26%, 100% { opacity: 0; transform: translateY(-3%); } }
@keyframes hs-text { 0% { opacity: 0; transform: translateY(10px); } 4%, 22% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: none; } }
@keyframes hs-tab { 0%, 24% { color: var(--text); } 25%, 100% { color: var(--text-2); } }
@keyframes hs-bar { 0% { border-top-color: var(--title); transform: scaleX(0); } 24.9% { border-top-color: var(--title); transform: scaleX(1); } 25%, 100% { border-top-color: oklch(100% 0 0 / .14); transform: scaleX(1); } }
.yzy.anim .hs-ph, .yzy.anim .hs-lb { opacity: 0; }
.yzy.anim .hs-ph { animation: hs-show 16s var(--ease) infinite both; }
.yzy.anim .hs-lb { animation: hs-text 16s var(--ease) infinite both; }
.yzy.anim .hs-tabs li { animation: hs-tab 16s linear infinite both; }
.yzy.anim .hs-tabs li::after { transform-origin: left; animation: hs-bar 16s linear infinite both; }
.yzy.anim .hs-1, .yzy.anim .hs-tabs .hs-1::after { animation-delay: -12s; }
.yzy.anim .hs-2, .yzy.anim .hs-tabs .hs-2::after { animation-delay: -8s; }
.yzy.anim .hs-3, .yzy.anim .hs-tabs .hs-3::after { animation-delay: -4s; }
@media (max-width: 760px) {
  .hs-scene { aspect-ratio: 16 / 13; }
  .hs-laptop { left: 50%; top: 0; width: 100%; }
  .hs-ph { width: 33%; right: 0; bottom: -4%; }
  .hs-lbs { bottom: 2%; width: 58%; }
  .hs-tabs { gap: 14px; }
}
@media (max-width: 900px) {
  .nav-links, .lang { display: none; }
  .menu { display: block; }
  .nav-end { gap: 8px; }
}
@media (max-width: 760px) {
  .dev { --w: 20vw; }
  .devs { gap: 2.5vw; }
  .mod { grid-template-columns: minmax(0, 1fr); }
  .mod-media { order: -1; }
  .mod-media img { max-height: 46vh; }
  .val { grid-template-columns: minmax(0, 1fr); }
  .marquee-track img { height: 42px; }
  .dev figcaption { display: none; }
  .hero-sub { font-size: 1rem; }
  .yzy.anim .hero-copy { gap: 22px; }
  .scr figcaption { display: none; }
  .yzy.anim .mod { grid-template-rows: minmax(0, 1fr) auto; align-content: center; gap: 22px; bottom: 84px; }
  .yzy.anim .mod-media { align-self: end; }
  .yzy.anim .mod-media img { max-height: min(40vh, 340px); }
  .yzy.anim .m-4 .mod-media img { width: 100%; }
  .yzy.anim .mod-copy { align-self: start; gap: 12px; }
  .yzy.anim .mod-ic { display: none; }
  .yzy.anim .steps { gap: 8px; bottom: 18px; }
  .yzy.anim .st { width: 17vw; font-size: .8125rem; }
  .yzy.anim .xp-title { bottom: 10vh; }
}
@media (max-width: 560px) {
  .f-row { grid-template-columns: minmax(0, 1fr); }
  .stats { gap: 36px 20px; }
  .hero-cta .link { display: none; }
}

/* ===== Site multipage ===== */
.yzy { --mark: oklch(83% .16 80); --mark-ink: oklch(22% .04 80); }

/* Navigation avec menus déroulants */
.nav-links { gap: clamp(14px, 1.6vw, 26px); }
.nav-links .is-current { color: var(--text); box-shadow: inset 0 -2px 0 currentColor; }
.dd { position: relative; }
.dd summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; cursor: pointer; transition: color .25s ease; }
.dd summary::-webkit-details-marker { display: none; }
.dd summary:hover, .dd[open] summary, .dd.is-current summary { color: var(--text); }
.dd summary .ic { transition: transform .45s var(--ease); }
.dd[open] summary .ic { transform: rotate(180deg); }
.dd-panel { position: absolute; left: -18px; top: 48px; z-index: 70; min-width: 330px; display: grid; gap: 2px; padding: 8px; border: 1px solid var(--line-2); border-radius: calc(var(--radius) + 6px); background: var(--bg-2); box-shadow: 0 30px 60px -24px var(--shadow); transform-origin: top left; }
.dd-panel a { display: grid; gap: 2px; padding: 10px 14px; border-radius: calc(var(--radius) - 2px); color: var(--text); text-decoration: none; }
.dd-panel a:hover, .dd-panel a.is-current { background: var(--bg-3); }
.dd-panel strong { font-size: .9375rem; font-weight: 700; }
.dd-panel small { font-size: .8125rem; font-weight: 400; line-height: 1.4; color: var(--text-3); }
.menu-panel { max-height: calc(100vh - 88px); overflow-y: auto; min-width: 280px; }
.menu-group { padding: 12px 14px 4px; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }

.dd.mega { position: static; }
/* Méga menus à icônes */
.mega-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 70; padding: clamp(24px, 2.8vw, 34px) 0 clamp(26px, 3vw, 38px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-2); background: var(--bg-2); box-shadow: 0 40px 80px -30px var(--shadow), 0 0 0 100vmax oklch(5% .02 258 / .42); clip-path: inset(0 -100vmax -100vmax -100vmax); }
.mega-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(24px, 3vw, 44px); align-items: stretch; }
.mega-label { margin: 0 0 10px 12px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.mega-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.mega-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; padding: 12px; border: 1px solid transparent; border-radius: 16px; color: var(--text); text-decoration: none; transition: background-color .25s ease, border-color .25s ease; }
.mega-item:hover, .mega-item.is-current { border-color: var(--line); background: var(--bg-3); }
.mega-item:active { transform: scale(.99); }
.mega-ico { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid oklch(100% 0 0 / .14); border-radius: 14px; background: linear-gradient(155deg, oklch(36% .065 255), oklch(21% .04 258) 78%); color: var(--text); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .14), 0 10px 22px -12px oklch(5% .02 258 / .9); transition: transform .5s var(--ease), border-color .25s ease, box-shadow .5s var(--ease); }
.mega-ico .ic { width: 22px; height: 22px; stroke-width: 1.75; }
.mega-item:hover .mega-ico { transform: translateY(-2px); border-color: oklch(100% 0 0 / .32); box-shadow: inset 0 1px 0 oklch(100% 0 0 / .2), 0 14px 26px -12px oklch(5% .02 258 / .95); }
.mega-txt { display: grid; gap: 2px; }
.mega-txt strong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .9688rem; font-weight: 700; line-height: 1.3; }
.mega-txt small { font-size: .8125rem; line-height: 1.45; color: var(--text-3); }
.mega-soon { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .625rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.mega-aside { display: grid; align-content: start; justify-items: start; gap: 14px; padding: clamp(22px, 2.4vw, 30px); border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(120% 90% at 100% 0%, oklch(30% .055 255 / .85), oklch(22.5% .04 258 / 0) 62%), var(--bg-3); }
.mega-aside .mega-cta-t { font-family: var(--font-hero); font-weight: 700; font-size: 2.5rem; line-height: .95; color: var(--title); }
.mega-aside p { font-size: .875rem; line-height: 1.55; color: var(--text-2); }
.mega-aside .btn { height: 42px; margin-top: 4px; padding: 0 20px; }
.mega-links { display: grid; gap: 0; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); justify-self: stretch; }
.mega-links .link { padding-block: 7px; font-size: .875rem; }
.nav-links .mega-panel .mega-item { padding: 12px; color: var(--text); }
.nav-links .mega-panel .mega-item.is-current { box-shadow: none; }
.nav-links .mega-panel .btn { padding: 0 20px; color: var(--btn-text); }
.nav-links .mega-panel .mega-links .link { padding: 7px 0; color: var(--text); }
.nav-links .mega-panel .mega-links .link:hover { color: var(--title); }
/* Méga menu clair : panneau blanc, textes bleu nuit, pictogrammes sur pastille bleu nuit, encadré gris bleuté */
.mega-panel.light { background: var(--bg-2); border-bottom: 0; box-shadow: 0 40px 80px -30px oklch(21% .035 258 / .45), 0 0 0 100vmax oklch(13% .03 258 / .32); }
.mega-panel.light .mega-ico { border-color: transparent; color: oklch(98% .004 230); box-shadow: 0 10px 22px -12px oklch(21% .035 258 / .5); }
.mega-panel.light .mega-item:hover .mega-ico { border-color: transparent; box-shadow: 0 14px 26px -12px oklch(21% .035 258 / .55); }
.mega-panel.light .mega-aside { background: radial-gradient(120% 90% at 100% 0%, oklch(91% .035 222 / .9), oklch(94.6% .011 240 / 0) 62%), var(--bg-3); }
.nav-links .mega-panel.light .mega-links .link:hover { color: var(--text-2); }
.menu-panel small { margin-left: 6px; font-size: .6875rem; font-weight: 700; color: var(--text-3); }

/* Fondateurs et équipe */
.fd-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.fd-copy { display: grid; gap: 22px; }
.fd-copy .lead { margin-top: 0; }
.fd-text { max-width: 52ch; font-size: 1.0625rem; line-height: 1.7; color: var(--text-2); }
.fd-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.fd { display: grid; align-content: start; gap: 8px; }
.fd-photo { margin: 0 0 10px; overflow: hidden; border-radius: 20px; }
.fd-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%; transition: transform 1.1s var(--ease); }
.fd:hover .fd-photo img { transform: scale(1.03); }
.fd .fd-name { font-family: var(--font-hero); font-weight: 700; font-size: clamp(2.4rem, 3vw, 2.9rem); line-height: .95; color: var(--title); }
.fd .fd-name span { display: block; }
.fd .fd-role { font-size: .9375rem; font-weight: 700; color: var(--text); }
.fd .fd-bio { font-size: .9688rem; line-height: 1.6; color: var(--text-2); }
.team-wide { margin: clamp(32px, 4vw, 56px) 0 0; overflow: hidden; border-radius: 22px; }
.team-wide img { width: 100%; aspect-ratio: 2.2 / 1; object-fit: cover; object-position: 50% 40%; }
.svc-photo.team img { aspect-ratio: 3 / 2; object-position: 50% 45%; }

/* Second niveau de lecture : fonctionnalités détaillées */
.fg-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.fg-head { position: sticky; top: calc(var(--nav-h) + 6vh); display: grid; gap: 18px; }
.fg-head .lead { margin-top: 0; }
.fg-meta { font-size: .875rem; font-weight: 700; letter-spacing: .02em; color: var(--text-3); }
.fg-list { display: grid; gap: 12px; }
.fg { border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); background: var(--bg-2); transition: border-color .3s ease; }
.fg[open] { border-color: var(--line-2); }
.fg summary { list-style: none; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 16px 20px; border-radius: inherit; cursor: pointer; }
.fg summary::-webkit-details-marker { display: none; }
.fg summary:active { transform: scale(.995); }
.fg-ic { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-2); border-radius: calc(var(--radius) + 2px); color: var(--text); }
.fg-t { display: grid; gap: 2px; }
.fg-t strong { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: var(--text); }
.fg-t small { font-size: .875rem; line-height: 1.45; color: var(--text-3); }
.fg-n { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--text-2); }
.fg-chev { display: grid; color: var(--text-2); transition: transform .5s var(--ease); }
.fg[open] .fg-chev { transform: rotate(180deg); }
.fg-body { padding: 0 20px 22px 84px; }
.fg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; padding-top: 18px; border-top: 1px solid var(--line); }
.fg-grid li { display: grid; align-content: start; gap: 4px; }
.fg-grid strong { font-size: .9375rem; font-weight: 700; line-height: 1.4; color: var(--text); }
.fg-grid span { font-size: .9375rem; line-height: 1.55; color: var(--text-2); }
.tbl-wrap.cmp { margin-top: clamp(32px, 4vw, 48px); }
.cmp .tbl td, .cmp .tbl th { padding: 16px 18px; }
.cmp .tbl tbody th { width: 24%; }
.cmp-note { margin-top: 18px; font-size: .9375rem; color: var(--text-3); text-wrap: pretty; }   /* toute la largeur du tableau (demande d'Emmanuel, version 36) */

/* Fil d'Ariane et titres de page */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .875rem; font-weight: 600; color: var(--text-3); }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); }
.kicker { font-size: .9375rem; font-weight: 700; letter-spacing: .02em; color: var(--text-2); }
.display-xl { font-family: var(--font-hero); font-weight: 700; font-size: clamp(3.4rem, 8vw, 7rem); line-height: .9; letter-spacing: -.01em; color: var(--title); }
.display-lg { max-width: 18ch; font-family: var(--font-hero); font-weight: 700; font-size: clamp(3rem, 6.2vw, 5.75rem); line-height: .92; letter-spacing: -.01em; color: var(--title); text-wrap: balance; }
.tagline { max-width: 24ch; font-size: clamp(1.375rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.22; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.intro { max-width: 60ch; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.65; color: var(--text-2); text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 28px; }
.shead { max-width: 820px; }
.shead.center { margin-inline: auto; text-align: center; }
.shead.center .lead, .shead.center .intro { margin-inline: auto; }
.shead .intro { margin-top: 18px; }
.sec-tight { padding-block: clamp(72px, 9vw, 120px); }

/* Héros produit */
.phero { position: relative; isolation: isolate; overflow: clip; margin-top: calc(var(--nav-h) * -1); padding: calc(var(--nav-h) + clamp(36px, 6vw, 88px)) 0 clamp(72px, 9vw, 128px); }
.phero-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(56% 64% at 76% 52%, oklch(35% .075 250 / .9), oklch(35% .075 250 / 0) 72%); }
.phero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.phero-copy { display: grid; justify-items: start; gap: 20px; }
.phero-media { position: relative; margin: 0; display: grid; place-items: center; }
.phero-media .device { width: auto; height: auto; max-width: 100%; max-height: min(70vh, 640px); filter: drop-shadow(0 0 1px oklch(100% 0 0 / .5)) drop-shadow(0 50px 70px var(--shadow)); }
.phero-media .wide { width: min(100%, 680px); height: auto; filter: drop-shadow(0 40px 60px var(--shadow)); }
.phero-media .shot { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; }

/* Héros secteur : photo plein cadre */
.shero { position: relative; isolation: isolate; overflow: clip; margin-top: calc(var(--nav-h) * -1); min-height: min(94vh, 880px); display: flex; align-items: flex-end; }
.shero-media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.shero-media img { width: 100%; height: 100%; object-fit: cover; }
.shero-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--bg) 0%, rgb(20 37 62 / .8) 34%, rgb(20 37 62 / .4) 68%, rgb(20 37 62 / .62) 100%); }
.shero-copy { display: grid; justify-items: start; gap: 20px; padding-block: calc(var(--nav-h) + 14vh) clamp(56px, 8vw, 104px); }

/* Héros simple */
.hhero { padding-block: clamp(56px, 8vw, 112px) clamp(24px, 4vw, 56px); }
.hhero .wrap { display: grid; justify-items: start; gap: 20px; }
/* Bandeaux de titre avec photo : plein cadre sous un voile, ou photo à droite */
.hhero.hhero-photo { position: relative; isolation: isolate; overflow: clip; margin-top: calc(var(--nav-h) * -1); min-height: min(70vh, 640px); display: flex; align-items: flex-end; padding-block: calc(var(--nav-h) + clamp(72px, 12vh, 140px)) clamp(48px, 6vw, 88px); }
.hhero-media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.hhero-media img { width: 100%; height: 100%; object-fit: cover; }
.hhero-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(20 37 62 / .92) 0%, rgb(20 37 62 / .76) 36%, rgb(20 37 62 / .3) 70%, rgb(20 37 62 / .16) 100%), linear-gradient(0deg, var(--bg) 0%, rgb(20 37 62 / 0) 34%), linear-gradient(180deg, rgb(20 37 62 / .62) 0%, rgb(20 37 62 / 0) 26%); }
.hhero-photo .intro { max-width: 58ch; }
.hhero-photo.dense .hhero-veil { background: linear-gradient(90deg, rgb(20 37 62 / .9) 0%, rgb(20 37 62 / .8) 55%, rgb(20 37 62 / .64) 100%), linear-gradient(0deg, var(--bg) 0%, rgb(20 37 62 / 0) 40%); }
.hhero.hhero-side { padding-block: clamp(40px, 6vw, 88px) clamp(40px, 5vw, 72px); }
.hhero-side .hhero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); justify-items: stretch; align-items: center; gap: clamp(32px, 6vw, 96px); }
.hhero-copy { display: grid; justify-items: start; gap: 20px; }
.hhero-figure { position: relative; margin: 0; overflow: hidden; border-radius: 22px; }
.hhero-figure img { width: 100%; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; }

/* Vu dans la presse : vidéo de l'interview */
.pv-head { display: grid; gap: 12px; }
.pv-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: clamp(28px, 3.4vw, 48px); }
.pv-vid { position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 20px; background: #14253E; color: #fff; text-decoration: none; box-shadow: 0 40px 80px -40px var(--shadow); }
.pv-vid img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pv-vid::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(20 37 62 / .78) 0%, rgb(20 37 62 / 0) 44%); }
.pv-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: clamp(64px, 6.4vw, 88px); height: clamp(64px, 6.4vw, 88px); border-radius: 50%; background: #fff; color: #14253E; transform: translate(-50%, -50%); box-shadow: 0 14px 34px rgb(20 37 62 / .45); transition: transform .45s var(--ease); }
.pv-play .pv-play-ic { width: 38%; height: 38%; margin-left: 8%; fill: currentColor; stroke-width: 1.5; }
.pv-vid:hover img { transform: scale(1.03); }
.pv-vid:hover .pv-play { transform: translate(-50%, -50%) scale(1.08); }
.pv-vid:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.pv-cap { position: absolute; left: clamp(16px, 2vw, 24px); right: clamp(16px, 2vw, 24px); bottom: clamp(14px, 1.8vw, 20px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .9375rem; font-weight: 600; color: #fff; }
.pv-tag { padding: 4px 10px; border-radius: 999px; background: #fff; color: #14253E; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pv-copy { display: grid; gap: 18px; }
.pv-copy p { max-width: 52ch; font-size: 1.0625rem; line-height: 1.7; text-wrap: pretty; }
.pv-copy .pv-src { font-size: .9375rem; color: var(--text-2); }
.pv-copy a:not(.link) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pv-copy .more-row { margin-top: 4px; }

/* Matériel : terminaux mobiles et caisses fixes */
.sm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(28px, 3.4vw, 48px); }
.sm-card { display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: var(--bg-2); }
.sm-fig { display: grid; place-items: center; height: clamp(280px, 27vw, 380px); margin: 0 0 12px; border-radius: var(--radius); background: var(--bg-3); }
.sm-fig img { display: block; width: auto; height: clamp(240px, 23.2vw, 326px); max-width: 88%; object-fit: contain; filter: drop-shadow(0 20px 26px var(--shadow)); transition: transform .9s var(--ease); }
.sm-card:hover .sm-fig img { transform: translateY(-6px); }
.sm-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Partenaire réseau (page Réseau) : encadré blanc pour le logo */
.partner-card { display: grid; place-items: center; align-content: center; gap: 14px; min-height: clamp(240px, 26vw, 340px); padding: clamp(28px, 4vw, 56px); border: 1px solid var(--line); border-radius: 20px; background: #fff; color: #14253E; box-shadow: 0 30px 60px -30px var(--shadow); text-align: center; }
.partner-card img { display: block; width: min(60%, 250px); height: auto; border-radius: 14px; }
.partner-name { font-weight: 700; font-size: clamp(2.6rem, 4vw, 3.6rem); letter-spacing: -.02em; line-height: 1; }
.partner-sub { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: oklch(45% .028 252); }

/* Moyens de paiement acceptés (héros de YZY Pay et YZY Ticket) */
.paym { display: grid; gap: 10px; margin-top: 10px; }
.paym .paym-t { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.paym-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.paym-item { display: inline-flex; align-items: center; justify-content: center; height: 36px; min-width: 60px; padding: 0 12px; border-radius: 8px; background: #fff; color: #14253E; font-size: .8125rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.paym-item.paym-logo { height: 40px; min-width: 0; padding: 0 2px; }
.paym-item img { display: block; width: auto; height: 36px; }

/* Billets dans Apple Wallet et Google Wallet (page YZY Ticket) : encadré blanc, badges officiels (fond clair exigé par Apple et Google) */
.wal-card { display: grid; justify-items: center; align-content: center; gap: 26px; min-height: clamp(240px, 26vw, 340px); padding: clamp(28px, 4vw, 56px); border: 1px solid var(--line); border-radius: 20px; background: #fff; color: #14253E; box-shadow: 0 30px 60px -30px var(--shadow); text-align: center; }
.wal-list { display: grid; justify-items: start; gap: 16px; margin: 0; padding: 0; list-style: none; }
.wal-item { display: inline-flex; align-items: center; gap: 14px; }
.wal-item .ic { width: clamp(26px, 2.4vw, 32px); height: clamp(26px, 2.4vw, 32px); stroke-width: 1.75; }
.wal-name { font-weight: 700; font-size: clamp(1.75rem, 2.7vw, 2.5rem); letter-spacing: -.02em; line-height: 1; }
.wal-list.wal-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: clamp(20px, 3vw, 48px); }
.wal-logo { display: grid; justify-items: center; gap: 14px; }
.wal-logo img { display: block; width: clamp(84px, 9vw, 120px); height: auto; }
.wal-logo .wal-name { font-size: clamp(1.125rem, 1.6vw, 1.5rem); white-space: nowrap; }
.wal-sub { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: oklch(45% .028 252); }

/* Partenaires (accueil) : tuiles blanches, logo officiel (toile commune 480 x 216, voir logos_partenaires.py) ou nom */
.prt-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 40px); margin-top: clamp(36px, 4.4vw, 60px); }
.prt-group { display: grid; align-content: start; gap: 14px; }
.prt-h { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.prt-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.prt-item { display: grid; place-items: center; min-height: clamp(92px, 8.4vw, 116px); padding: 18px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: #14253E; text-align: center; box-shadow: 0 1px 2px oklch(21% .035 258 / .06); }
.prt-name { font-weight: 700; font-size: clamp(1rem, 1.35vw, 1.25rem); letter-spacing: -.01em; line-height: 1.1; text-wrap: balance; }
.prt-item.prt-logo { padding: 10px 12px; }
.prt-logo img { display: block; width: min(100%, 170px); height: auto; }
@media (max-width: 1024px) {
  .prt-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .prt-list { gap: 8px; }
  .prt-item { min-height: 80px; padding: 14px 8px; border-radius: 12px; }
  .prt-name { font-size: 1rem; }
  .prt-item.prt-logo { padding: 8px 6px; }
  .wal-logo img { width: 76px; }
}

/* Pied de page : « Made with love in Europe », cœur plein et drapeau européen */
.ftr-made { display: inline-flex; align-items: center; gap: 6px; }
.ftr-made .ftr-heart { width: 14px; height: 14px; fill: currentColor; color: oklch(66% .2 22); }
.ftr-made .eu-flag { display: block; width: 21px; height: 14px; margin-left: 2px; border-radius: 2px; }
.sm-grid.c2 .sm-fig { height: clamp(220px, 22vw, 320px); }
.sm-grid.c2 .sm-fig img { width: 88%; height: auto; max-height: 86%; }
.sm-card .sm-name { font-family: var(--font-hero); font-weight: 700; font-size: clamp(2.4rem, 2.8vw, 2.75rem); line-height: .95; color: var(--title); }
.sm-card .sm-role { font-weight: 700; color: var(--text); }
.sm-specs { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.sm-specs li { display: flex; gap: 10px; align-items: flex-start; font-size: .9688rem; line-height: 1.55; color: var(--text-2); }
.sm-specs li .ic { flex: none; margin-top: 4px; color: var(--text); }
.sm-src { margin-top: clamp(20px, 2.4vw, 28px); font-size: .875rem; color: var(--text-3); }
.sm-src a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.svc-more { margin-top: 10px; }

/* Réseau : vidéo en 3D et points clés */
.net-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.4vw, 64px); align-items: center; margin-top: clamp(28px, 3.4vw, 48px); }
.net-vid { margin: 0; overflow: hidden; border-radius: 20px; background: #14253E; box-shadow: 0 40px 80px -40px var(--shadow); }
.net-vid video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #14253E; }
.net-pts { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.net-pts li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.net-ic { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: calc(var(--radius) + 2px); color: var(--text); }
.net-tx { display: grid; gap: 2px; }
.net-tx strong { font-weight: 700; color: var(--text); }
.net-tx span { font-size: .9688rem; line-height: 1.55; color: var(--text-2); }

.nav-links .dd summary { white-space: nowrap; }

/* Page Réseau : héros à large vidéo, note de secours */
.phero.phero-wide .phero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.phero-media .net-vid { width: 100%; }
.net-note { max-width: 62ch; margin-top: clamp(24px, 3vw, 36px); font-size: 1.0625rem; line-height: 1.65; color: var(--text-2); }

/* Galerie de terrain */
.gal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 220px); grid-auto-flow: row dense; gap: clamp(10px, 1.2vw, 16px); margin-top: clamp(28px, 3vw, 44px); }
.gal figure { position: relative; margin: 0; overflow: hidden; border-radius: 16px; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.gal figure:hover img { transform: scale(1.04); }
.gal .g1 { grid-column: span 7; grid-row: span 2; }
.gal .g2, .gal .g3 { grid-column: span 5; }
.gal .g4, .gal .g5, .gal .g6 { grid-column: span 4; }

/* Cartes */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { display: grid; align-content: start; gap: 14px; padding: clamp(24px, 2.6vw, 32px); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: var(--bg-2); color: var(--text); text-decoration: none; transition: border-color .3s ease, transform .6s var(--ease); }
a.card:hover { border-color: oklch(100% 0 0 / .4); transform: translateY(-4px); }
a.card:active { transform: translateY(-1px) scale(.99); transition-duration: .1s; }
.card h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--text); }
.card p { color: var(--text-2); }
.card .more { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-weight: 600; color: var(--text); }
.card .more .ic { transition: transform .45s var(--ease); }
a.card:hover .more .ic { transform: translateX(3px); }
.ico { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-2); border-radius: calc(var(--radius) + 4px); color: var(--text); }
.tag-soon { justify-self: start; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--text-2); }

/* Cartes photo */
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.pcards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pcards.c4 .pcard { min-height: 440px; }
.pcards.c4 .pcard-title { font-size: clamp(2.4rem, 2.6vw, 2.6rem); }
.pcard { position: relative; isolation: isolate; display: block; overflow: hidden; min-height: 470px; border-radius: 20px; color: var(--text); text-decoration: none; transition: transform .6s var(--ease); }
.pcard img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.pcard-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(20 37 62 / .96) 0%, rgb(20 37 62 / .55) 46%, rgb(20 37 62 / .1) 100%); }
.pcard:hover img { transform: scale(1.06); }
.pcard:active { transform: scale(.99); transition-duration: .1s; }
.pcard-body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: start; gap: 10px; padding: clamp(24px, 2.6vw, 32px); }
.pcard-title { font-family: var(--font-hero); font-weight: 700; font-size: clamp(2.4rem, 3vw, 2.9rem); line-height: .95; color: var(--title); }
.pcard p { max-width: 34ch; color: var(--text-2); }
.pcard .more { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--text); }

/* Rangées texte et visuel */
.rows { display: grid; gap: clamp(88px, 11vw, 150px); margin-top: clamp(56px, 7vw, 96px); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.row.flip .row-media { order: -1; }
.row-copy { display: grid; justify-items: start; gap: 16px; }
.row-copy h3 { max-width: 20ch; font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 700; line-height: 1.12; letter-spacing: -.022em; color: var(--text); text-wrap: balance; }
.row-copy p { max-width: 48ch; font-size: 1.125rem; line-height: 1.62; color: var(--text-2); }
.row-copy .kicker { font-size: .9375rem; color: var(--text-2); }
.row-copy ul, .ticks { display: grid; gap: 10px; margin-top: 4px; }
.row-copy li, .ticks li { display: flex; gap: 10px; align-items: flex-start; color: var(--text); }
.row-copy li .ic, .ticks li .ic { margin-top: 3px; color: var(--text-2); }
.photo { position: relative; margin: 0; overflow: hidden; border-radius: 20px; }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo.tall img { aspect-ratio: 4 / 5; }
.devicebox { position: relative; margin: 0; display: grid; place-items: center; min-height: 420px; }
.devicebox img { width: auto; height: auto; max-width: 100%; max-height: 560px; filter: drop-shadow(0 0 1px oklch(100% 0 0 / .5)) drop-shadow(0 40px 60px var(--shadow)); }
.devicebox .wide { width: min(100%, 640px); max-height: none; }

/* Bandeau photo */
.pband { position: relative; isolation: isolate; overflow: clip; display: flex; align-items: flex-end; min-height: min(88vh, 820px); }
.pband-media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.pband-media img { width: 100%; height: 100%; object-fit: cover; }
.pband-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(20 37 62 / .55) 0%, rgb(20 37 62 / 0) 62%), linear-gradient(0deg, rgb(20 37 62 / .96) 0%, rgb(20 37 62 / .62) 50%, rgb(20 37 62 / .3) 100%); }
.pband-copy { display: grid; justify-items: start; gap: 20px; padding-block: clamp(56px, 8vw, 112px); }
.pband-quote { max-width: 17ch; font-family: var(--font-hero); font-weight: 700; font-size: clamp(2.6rem, 5.6vw, 5.25rem); line-height: .95; color: var(--title); text-wrap: balance; }
.pband-copy p { max-width: 52ch; font-size: 1.125rem; color: var(--text-2); }

/* Étapes avant, pendant, après */
.steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin-top: clamp(40px, 5vw, 64px); }
.step { display: grid; align-content: start; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.step-k { font-family: var(--font-hero); font-weight: 700; font-size: clamp(2.6rem, 3.6vw, 3.25rem); line-height: 1; color: var(--title); }
.step h3 { font-size: 1.25rem; font-weight: 700; color: var(--text); }
.step p { color: var(--text-2); }
.step .step-k { color: var(--title); }

/* Puces de liens */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text); font-weight: 600; text-decoration: none; transition: border-color .25s ease, transform .45s var(--ease); }
.chip-link:hover { border-color: oklch(100% 0 0 / .45); transform: translateY(-2px); }
.chip-link:active { transform: scale(.97); transition-duration: .1s; }
.stats.s3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Offres */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(48px, 6vw, 80px); align-items: stretch; }
.plan { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 18px; padding: clamp(28px, 3vw, 40px); border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); }
.plan.feat { border-color: oklch(100% 0 0 / .42); background: var(--bg-3); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-name { font-family: var(--font-hero); font-weight: 700; font-size: clamp(2.6rem, 3.4vw, 3.25rem); line-height: .95; color: var(--title); }
.plan-for { font-weight: 600; color: var(--text-2); }
.plan-price { font-size: 1.625rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--text); }
.plan-price small { display: block; margin-top: 4px; font-size: .875rem; font-weight: 600; color: var(--text-3); }
.plan ul { display: grid; align-content: start; gap: 12px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; color: var(--text); }
.plan li .ic { margin-top: 3px; color: var(--text-2); }
.plan-top .pill { position: absolute; top: 0; right: clamp(28px, 3vw, 40px); transform: translateY(-50%); background: var(--bg); }
.pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--text); white-space: nowrap; }

/* Frise */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.split .shead { position: sticky; top: calc(var(--nav-h) + 6vh); }
.split .tl { margin-top: 0; }
.tl { position: relative; display: grid; gap: clamp(36px, 5vw, 56px); margin-top: clamp(40px, 5vw, 64px); padding-left: 36px; view-timeline-name: --tl; }
.tl::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line-2); transform-origin: top; }
.tl-item { position: relative; display: grid; gap: 8px; }
.tl-item::before { content: ""; position: absolute; left: -36px; top: 12px; width: 16px; height: 16px; border: 2px solid var(--text); border-radius: 999px; background: var(--bg); }
.tl-date { font-family: var(--font-hero); font-weight: 700; font-size: clamp(2.4rem, 3.4vw, 3rem); line-height: 1; color: var(--title); }
.tl-item h3 { font-size: 1.25rem; font-weight: 700; color: var(--text); }
.tl-item p { max-width: 60ch; color: var(--text-2); }
.tl-item .tl-date { max-width: none; color: var(--title); }

/* Article */
.article-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.toc-wrap { align-self: stretch; }
.toc { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 2px; }
.toc-title { margin-bottom: 10px; font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.toc a { display: block; padding: 8px 14px; border-left: 2px solid var(--line); font-size: .9375rem; color: var(--text-2); text-decoration: none; transition: color .25s ease, border-color .25s ease; }
.toc a:hover { color: var(--text); border-left-color: var(--text); }
.meta-line { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9375rem; font-weight: 600; color: var(--text-3); }
.prose { max-width: 70ch; }
.prose h2 { margin: clamp(56px, 7vw, 80px) 0 18px; font-family: var(--font-hero); font-weight: 500; font-size: clamp(2.4rem, 3.6vw, 3.25rem); line-height: 1; color: var(--title); scroll-margin-top: calc(var(--nav-h) + 24px); text-wrap: balance; }
.prose h3 { margin: 32px 0 10px; font-size: 1.375rem; font-weight: 700; line-height: 1.3; color: var(--text); }
.prose p { margin: 0 0 18px; font-size: 1.125rem; line-height: 1.75; color: var(--text-2); }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 1.3em; color: var(--text-2); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 8px; font-size: 1.0625rem; line-height: 1.7; }
.prose strong { color: var(--text); }
.prose a, .answer a, .sources a { color: var(--text); text-decoration: underline; }
.prose a:hover, .answer a:hover, .sources a:hover { color: var(--title); }
.answer { margin: 0 0 24px; padding: 22px 24px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-2); }
.answer p { margin: 0; font-size: 1.125rem; line-height: 1.7; color: var(--text); }
.tbl-wrap { margin: 8px 0 24px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 1rem; }
.tbl th, .tbl td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl th { font-size: .875rem; font-weight: 700; color: var(--text); background: var(--bg-2); }
.tbl td { line-height: 1.55; color: var(--text-2); }
.tbl tr:last-child td { border-bottom: 0; }
.sources { display: grid; gap: 10px; margin: 0 0 18px; padding-left: 1.3em; list-style: decimal; color: var(--text-2); }
.reading { display: none; position: fixed; left: 0; right: 0; top: var(--nav-h); z-index: 59; height: 2px; background: var(--text); transform-origin: 0 50%; }

/* FAQ par thème */
.faq-group + .faq-group { margin-top: clamp(48px, 6vw, 72px); }
.faq-group-title { margin-bottom: 18px; font-size: 1.25rem; font-weight: 700; color: var(--text); }

/* Formulaire de démo */
.field select { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: calc(var(--radius) - 2px); background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 1rem; }
.field select:focus { outline: none; border-color: var(--title); box-shadow: 0 0 0 3px oklch(74.82% .1131 197.92 / .28); }
.checkline { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; line-height: 1.5; color: var(--text-2); }
.checkline input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--btn); }
.checkline a { color: var(--text); }
.next-steps { display: grid; gap: 20px; margin-top: 40px; }
.next-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.ns-n { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 999px; font-weight: 700; color: var(--text); }
.next-steps strong { display: block; color: var(--text); }
.next-steps span span { color: var(--text-2); }

/* Appel à l'action final */
.ctab .wrap { display: grid; justify-items: center; text-align: center; }
.ctab .h2 { max-width: 15ch; }
.ctab .lead { margin-inline: auto; text-align: center; }
.ctab .cta-row { justify-content: center; margin-top: 34px; }

/* Accueil : liens vers les pages */
.mod-more { margin-top: 2px; }
.also { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; padding: 0 var(--gutter) clamp(48px, 6vw, 88px); color: var(--text-2); }

/* Sections claires : mêmes composants, jetons de couleur inversés. Titres en bleu nuit #14253E (le turquoise reste sur fond sombre) */
.light {
  --bg: oklch(97.2% .007 240);
  --bg-2: oklch(100% 0 0);
  --bg-3: oklch(94.6% .011 240);
  --title: #14253E;
  --text: oklch(21% .035 258);
  --text-2: oklch(37% .03 255);
  --text-3: oklch(45% .028 252);
  --line: oklch(21% .035 258 / .12);
  --line-2: oklch(21% .035 258 / .26);
  --btn: #14253E;
  --btn-hover: oklch(33% .055 258);
  --btn-text: oklch(98% .004 230);
  --error: oklch(52% .19 25);
  --ok: oklch(50% .13 145);
  --shadow: oklch(21% .035 258 / .2);
  --mark: oklch(70% .17 65);
  color-scheme: light;
  color: var(--text);
  background: var(--bg);
}
@media (prefers-contrast: more) {
  .light { --line: oklch(21% .035 258 / .38); --line-2: oklch(21% .035 258 / .6); --text-2: oklch(28% .03 255); --text-3: oklch(33% .028 252); }
  .hhero-veil, .shero-veil, .pband-veil { background-color: rgb(20 37 62 / .35); }
}
.light a.card:hover, .light .chip-link:hover, .light .btn-ghost:hover { border-color: var(--text-3); }
.light .plan.feat { border-color: var(--text); }
.light .card, .light .plan, .light .qa, .light .form-card, .light .answer { box-shadow: 0 1px 2px oklch(21% .035 258 / .06); }
.light .marquee-track img { filter: brightness(0); opacity: .5; }
.light .f-ok-ic { border-color: oklch(50% .13 145 / .5); }
.light .pcard { --text: oklch(97% .006 230); --text-2: oklch(83% .016 240); --title: #3BC3C7; }
.yzy .nav { background: rgb(20 37 62 / .9); }
.yzy .nav::after { opacity: .45; }

/* Rythme vertical : chaque bande de couleur garde ses marges, deux sections de même ton ne les doublent pas */
.sec { padding-block: clamp(88px, 10vw, 144px); }
.sec-tight { padding-block: clamp(64px, 7vw, 104px); }
.sec.light + .sec.light, .sec:not(.light) + .sec:not(.light) { padding-top: 0; }
.press + .refs, .vis.light + .sec.light { padding-top: 0; }
.phero + .sec:not(.light) { padding-top: 0; }
.xp-body { padding-bottom: clamp(88px, 10vw, 144px); }
.press { padding-block: clamp(88px, 10vw, 144px); }
.refs-in { padding-block: 0 clamp(88px, 10vw, 144px); }
.refs-in .refs-title { padding-top: 8px; }

/* Têtes de section sur deux colonnes en grand écran : titre à gauche, texte à droite */
@media (min-width: 1025px) {
  .shead:not(.center) { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 96px); align-items: end; }
  .shead:not(.center) .lead, .shead:not(.center) .intro { margin-top: 0; max-width: 46ch; }
  .shead:not(.center) .more-row, .shead:not(.center) .intro + .intro { grid-column: 2; }
  .shead:not(.center) .intro + .intro { margin-top: 16px; }
  .split .shead:not(.center) { display: block; }
  .split .shead:not(.center) .lead { margin-top: 22px; }
}
.also p { font-weight: 600; }
.more-row { margin-top: 28px; }
.svc-photo { position: relative; }
.shead + .stats { margin-top: clamp(40px, 5vw, 64px); }
.row-media .stats.s2, .row-media .stats.s3 { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 0; }
.row-media .stats .num { font-size: clamp(2.8rem, 4.6vw, 4.25rem); }


/* Compteurs supplémentaires */
.n6 { --na: 76; --nb: 15; counter-reset: na var(--na) nb var(--nb); }
.n6::after { content: counter(na) "," counter(nb); }

/* Repérage des ajouts (réglage « reperage ») */
.yzy.mark-on .tx-add { outline: 2px dashed var(--mark); outline-offset: 4px; border-radius: 3px; background-color: oklch(83% .16 80 / .08); }
.mark-legend { display: none; }
.yzy.mark-on .mark-legend { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; max-width: calc(100vw - 32px); padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--bg-2); color: var(--text); font-size: .8125rem; font-weight: 600; box-shadow: 0 20px 40px -20px var(--shadow); }
.ml-sw { display: inline-block; width: 22px; height: 14px; margin-right: 6px; vertical-align: -2px; border: 2px dashed var(--mark); border-radius: 3px; }
.ml-badge { display: inline-flex; align-items: center; height: 22px; margin-right: 6px; padding: 0 8px; border-radius: 999px; background: var(--mark); color: var(--mark-ink); font-size: .6875rem; font-weight: 700; }

/* Mouvement des pages intérieures */
@keyframes mega-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes mega-card-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes par-up { to { transform: translateY(-9vh); } }
@keyframes hero-zoom { to { transform: scale(1.12); } }
@keyframes copy-out { to { opacity: 0; transform: translateY(-6vh); } }
@keyframes band-zoom { from { transform: scale(1.16); } to { transform: scale(1); } }
@keyframes photo-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes vis-first { 0%, 85% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes vis-mid { 0% { visibility: hidden; } 15%, 85% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes vis-last { 0% { visibility: hidden; } 15%, 100% { visibility: visible; } }
@media (prefers-reduced-motion: no-preference) {
  .yzy.anim .dd[open] .dd-panel { animation: pop-in .35s var(--ease); }
  .yzy.anim .dd[open] .mega-panel { animation: mega-in .45s var(--ease); }
  .yzy.anim .fg::details-content { block-size: 0; overflow: clip; transition: block-size .55s var(--ease), content-visibility .55s allow-discrete; }
  .yzy.anim .fg[open]::details-content { block-size: auto; }
  .yzy.anim .fg[open] .fg-grid li { animation: mega-card-in .6s var(--ease) both; }
  .yzy.anim .fg[open] .fg-grid li:nth-child(2) { animation-delay: .04s; }
  .yzy.anim .fg[open] .fg-grid li:nth-child(3) { animation-delay: .08s; }
  .yzy.anim .fg[open] .fg-grid li:nth-child(4) { animation-delay: .12s; }
  .yzy.anim .fg[open] .fg-grid li:nth-child(5) { animation-delay: .16s; }
  .yzy.anim .fg[open] .fg-grid li:nth-child(6) { animation-delay: .2s; }
  .yzy.anim .fg[open] .fg-grid li:nth-child(7) { animation-delay: .24s; }
  .yzy.anim .fg[open] .fg-grid li:nth-child(8) { animation-delay: .28s; }
  .yzy.anim .dd[open] .mega-item, .yzy.anim .dd[open] .mega-aside { animation: mega-card-in .6s var(--ease) both; }
  .yzy.anim .dd[open] .mega-list .mega-item:nth-child(2) { animation-delay: 0.03s; }
  .yzy.anim .dd[open] .mega-list .mega-item:nth-child(3) { animation-delay: 0.06s; }
  .yzy.anim .dd[open] .mega-list .mega-item:nth-child(4) { animation-delay: 0.09s; }
  .yzy.anim .dd[open] .mega-list .mega-item:nth-child(5) { animation-delay: 0.12s; }
  .yzy.anim .dd[open] .mega-list .mega-item:nth-child(6) { animation-delay: 0.15s; }
  .yzy.anim .dd[open] .mega-list .mega-item:nth-child(7) { animation-delay: 0.18s; }
  .yzy.anim .dd[open] .mega-list .mega-item:nth-child(8) { animation-delay: 0.21s; }
  .yzy.anim .dd[open] .mega-aside { animation-delay: .12s; }
  .yzy.anim .rise { animation: dev-in 1.4s var(--ease) both; animation-delay: .35s; }
  @supports (animation-timeline: view()) {
    .yzy.anim .phero-media { animation: par-up linear both; animation-timeline: scroll(); animation-range: 0 100vh; }
    .yzy.anim .shero-media img, .yzy.anim .hhero-media img { animation: hero-zoom linear both; animation-timeline: scroll(); animation-range: 0 100vh; }
    .yzy.anim .shero-copy { animation: copy-out linear both; animation-timeline: scroll(); animation-range: 12vh 82vh; }
    .yzy.anim .pband-media img { animation: band-zoom linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .yzy.anim .photo img { animation: photo-zoom linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .yzy.anim .tl::before { animation: grow-y linear both; animation-timeline: --tl; animation-range: cover 5% cover 65%; }
    .yzy.anim .spot-item { animation: spot linear both; animation-timeline: view(); animation-range: cover 12% cover 88%; }
    .yzy.anim .reading { display: block; animation: st-fill linear both; animation-timeline: scroll(); }
    .yzy.anim .cards .reveal:nth-child(2), .yzy.anim .pcards .reveal:nth-child(2), .yzy.anim .plans .reveal:nth-child(2), .yzy.anim .steps3 .reveal:nth-child(2) { animation-range: entry 8% cover 24%; }
    .yzy.anim .cards .reveal:nth-child(3), .yzy.anim .pcards .reveal:nth-child(3), .yzy.anim .plans .reveal:nth-child(3), .yzy.anim .steps3 .reveal:nth-child(3) { animation-range: entry 16% cover 30%; }
    .yzy.anim .cards .reveal:nth-child(4) { animation-range: entry 24% cover 36%; }
    .yzy.anim .m-0 .mod-more { animation: vis-first linear both; animation-timeline: --mods; animation-range: contain 0% contain 20%; }
    .yzy.anim .m-1 .mod-more { animation: vis-mid linear both; animation-timeline: --mods; animation-range: contain 20% contain 40%; }
    .yzy.anim .m-2 .mod-more { animation: vis-mid linear both; animation-timeline: --mods; animation-range: contain 40% contain 60%; }
    .yzy.anim .m-3 .mod-more { animation: vis-mid linear both; animation-timeline: --mods; animation-range: contain 60% contain 80%; }
    .yzy.anim .m-4 .mod-more { animation: vis-last linear both; animation-timeline: --mods; animation-range: contain 80% contain 100%; }
  }
}

/* Méga menu : groupes, coordonnées et réseaux sociaux (tout le pied de page se retrouve dans le menu) */
.mega-group + .mega-group { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.mega-list.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-coords { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; margin: 0; padding: 6px 12px 0; list-style: none; }
.mega-coords li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; }
.mc-ic { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 11px; color: var(--text-2); }
.mega-coords strong { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.mega-coords.mc-stack { grid-template-columns: minmax(0, 1fr); gap: 10px; justify-self: stretch; margin-top: 2px; padding: 14px 0 0; border-top: 1px solid var(--line); }
.mega-social { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 16px; padding: 0 12px; font-size: .875rem; font-weight: 600; }
.nav-links .mega-panel .mega-coords a, .nav-links .mega-panel .mega-social a { padding: 2px 0; color: var(--text); font-size: .9375rem; }
.nav-links .mega-panel .mega-social a { font-size: .875rem; color: var(--text-2); }
.nav-links .mega-panel .mega-coords a:hover, .nav-links .mega-panel .mega-social a:hover { color: var(--title); }
.menu-panel a[aria-current="page"] { background: var(--bg-3); }
.menu-panel .menu-cta { justify-content: center; margin: 10px 6px 4px; padding: 0 20px; color: var(--btn-text); }
.menu-panel .menu-cta:hover { background: var(--btn-hover); }

/* Appel « Prendre rendez-vous » en milieu de page */
.rdv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 26px; margin-top: clamp(44px, 5.4vw, 72px); padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.8vw, 34px); border: 1px solid var(--line); border-radius: calc(var(--radius) + 8px); background: var(--bg-2); }
.rdv-ic { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid var(--line-2); border-radius: 15px; color: var(--text); }
.rdv-copy { display: grid; gap: 6px; }
.rdv-t { font-family: var(--font-hero); font-weight: 700; font-size: clamp(1.625rem, 2.3vw, 2.125rem); line-height: 1; color: var(--title); }
.rdv-x { max-width: 64ch; font-size: .9688rem; line-height: 1.55; color: var(--text-2); }
.rdv .btn { white-space: nowrap; }
.light .rdv { box-shadow: 0 1px 2px oklch(21% .035 258 / .06); }

/* Accueil : presse et proposition de loi en un seul bloc */
.press-law { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.press-sub { font-size: clamp(2rem, 3.4vw, 3.25rem); }

/* Offres : ce qui est compris dans toutes les formules */
.plans-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; max-width: 900px; margin: clamp(32px, 4vw, 48px) auto 0; padding: 20px 24px; border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); background: var(--bg-2); }
.plans-note .ic { margin-top: 2px; color: var(--text); }
.plans-note p { font-size: .9688rem; line-height: 1.55; color: var(--text-2); }
.plans-note p + p { margin-top: 6px; }
.plans-note strong { color: var(--text); }

/* Accueil : quatre valeurs dans la séquence animée */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .yzy.anim .vis-pin { height: 420vh; }
    .yzy.anim .v-0 { animation-range: contain 0% contain 30%; }
    .yzy.anim .v-1 { animation-range: contain 20% contain 55%; }
    .yzy.anim .v-2 { animation-name: vw-mid; animation-range: contain 45% contain 80%; }
    .yzy.anim .v-3 { animation: vw-last linear both; animation-timeline: --vis; animation-range: contain 70% contain 100%; }
    .yzy.anim .vd-0 { animation-range: contain 0% contain 25%; }
    .yzy.anim .vd-1 { animation-range: contain 25% contain 50%; }
    .yzy.anim .vd-2 { animation-range: contain 50% contain 75%; }
    .yzy.anim .vd-3 { animation: dot-lit linear both; animation-timeline: --vis; animation-range: contain 75% contain 100%; }
  }
}

/* Responsive des pages intérieures */
@media (max-width: 1200px) {
  .nav-links, .lang { display: none; }
  .menu { display: block; }
}
@media (max-width: 1024px) {
  .phero-grid, .article-grid, .row { grid-template-columns: minmax(0, 1fr); }
  .phero.phero-wide .phero-grid { grid-template-columns: minmax(0, 1fr); }
  .row.flip .row-media { order: 0; }
  .cards, .cards.c4, .pcards, .pcards.c4, .plans, .steps3, .stats.s3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toc { position: static; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .fg-wrap { grid-template-columns: minmax(0, 1fr); }
  .fd-grid { grid-template-columns: minmax(0, 1fr); }
  .hhero-side .hhero-grid { grid-template-columns: minmax(0, 1fr); }
  .pv-grid { grid-template-columns: minmax(0, 1fr); }
  .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .net-grid { grid-template-columns: minmax(0, 1fr); }
  .hhero-figure { max-width: 620px; }
  .team-wide img { aspect-ratio: 3 / 2; }
  .fg-head { position: static; }
  .split .shead { position: static; }
  .phero-media .device { max-height: 520px; }
}
@media (max-width: 680px) {
  .rdv { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .cards, .cards.c2, .cards.c4, .pcards, .pcards.c4, .plans, .steps3 { grid-template-columns: minmax(0, 1fr); }
  .pcard, .pcards.c4 .pcard { min-height: 340px; }
  .pcards.c4 .pcard-title { font-size: 2.4rem; }
  .shero { min-height: 82vh; }
  .devicebox { min-height: 0; }
  .devicebox img { max-height: 440px; }
  .fg summary { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; }
  .fg-ic { width: 40px; height: 40px; }
  .fg-n { display: none; }
  .fg-body { padding: 0 16px 18px; }
  .fg-grid { grid-template-columns: minmax(0, 1fr); }
  .fd-people { grid-template-columns: minmax(0, 1fr); }
  .sm-grid, .sm-grid.c2 { grid-template-columns: minmax(0, 1fr); }
  .sm-fig { height: 300px; }
  .sm-fig img { height: 258px; }
  .hhero.hhero-photo { min-height: 74vh; }
  .hhero-figure img { aspect-ratio: 3 / 2; }
  .hhero-veil { background: linear-gradient(0deg, var(--bg) 0%, rgb(20 37 62 / .84) 42%, rgb(20 37 62 / .5) 100%); }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; }
  .gal .g1 { grid-column: span 2; grid-row: span 2; }
  .gal .g2, .gal .g3, .gal .g4, .gal .g5 { grid-column: span 1; grid-row: span 1; }
  .gal .g6 { grid-column: span 2; }
  .fd .fd-name span { display: inline; }
  .fd-photo img { aspect-ratio: 1 / 1; object-position: 50% 24%; }
  .cmp .tbl td, .cmp .tbl th { padding: 12px; font-size: .875rem; }
}
/* Pages reprises de l'ancien site : confidentialité, mentions légales, CGV, communiqué de presse */
.lg-tocm { display: none; }
.toc.lg-toc { max-height: calc(100vh - var(--nav-h) - 64px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.prose.lg h2 { margin: 52px 0 14px; font-family: var(--font-sans); font-weight: 700; font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.3; color: var(--text); text-wrap: balance; }
.prose.lg h2:first-child { margin-top: 0; }
.prose.lg p, .prose.lg li { font-size: 1.0625rem; line-height: 1.7; }
.lg-art-n { display: block; margin-bottom: 6px; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; color: var(--title); }
.prose.lg .lg-cl { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); column-gap: .5em; margin-bottom: 12px; }
.prose.lg .lg-cl.lv3 { margin-left: 1.6em; grid-template-columns: 5.2em minmax(0, 1fr); }
.lg-n { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.lg-pdf { margin-top: 28px; }
.lg-pdf .btn { display: inline-flex; align-items: center; gap: 10px; }
.hhero .display-lg.lg-h1-long { max-width: none; font-size: clamp(2.1rem, 3.1vw, 2.75rem); line-height: 1.05; }   /* titre long sur toute la largeur (version 37) */
.prose .cp-hl { padding: 4px 0 4px 18px; border-left: 3px solid var(--title); font-weight: 600; color: var(--text); }
.stats.cp-stats { margin: 28px 0 36px; gap: 28px 24px; }
.cp-stats .num { font-size: clamp(2.4rem, 4vw, 3.5rem); }
.cp-quote { margin: 28px 0 32px; }
.cp-quote blockquote { margin: 0; padding-left: 22px; border-left: 3px solid var(--title); }
.prose .cp-quote blockquote p { margin: 0; font-size: 1.1875rem; line-height: 1.65; color: var(--text); }
.cp-quote figcaption { margin-top: 12px; padding-left: 25px; font-size: .9375rem; font-weight: 600; color: var(--text-2); }
@media (max-width: 1024px) {
  .lg-tocw { display: none; }
  .lg-tocm { display: block; margin: 0 0 36px; border: 1px solid var(--line-2); border-radius: 14px; }
  .lg-tocm summary { padding: 14px 18px; font-weight: 700; color: var(--text); cursor: pointer; }
  .lg-tocm[open] summary { border-bottom: 1px solid var(--line); }
  .lg-tocm-nav { display: grid; gap: 2px; padding: 10px 10px 14px; }
  .lg-tocm-nav a { padding: 8px; font-size: .9375rem; color: var(--text-2); text-decoration: none; }
}
@media (max-width: 560px) {
  .prose.lg .lg-cl, .prose.lg .lg-cl.lv3 { grid-template-columns: minmax(0, 1fr); }
  .prose.lg .lg-cl.lv3 { margin-left: 1em; }
  .stats.cp-stats { grid-template-columns: minmax(0, 1fr); }
}
/* Offres : rangées alignées d'une carte à l'autre (noms de longueurs différentes) et offre complémentaire Billetterie en pleine largeur */
.plans { grid-auto-rows: auto; }
.plan { grid-row: span 5; grid-template-rows: subgrid; }
.plan-add { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px clamp(24px, 4vw, 56px); margin-top: 20px; padding: clamp(28px, 3vw, 40px); border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); }
.pa-copy { display: grid; justify-items: start; gap: 12px; }
.pa-copy .more-row { margin-top: 2px; }
.plan-add .plan-price { text-align: right; }
@media (max-width: 760px) {
  .plan-add { grid-template-columns: minmax(0, 1fr); }
  .plan-add .plan-price { text-align: left; }
}

.ftr-desc { margin-top: 18px; max-width: 34ch; font-size: .9375rem; color: var(--text-2); }
.ftr-h2 { margin-top: 18px; }
.nc-short, .nc-tiny { display: none; }
@media (max-width: 560px) { .nc-long { display: none; } .nc-short { display: inline; } }
@media (max-width: 370px) { .nc-short { display: none; } .nc-tiny { display: inline; } }



[data-show][hidden] { display: none !important; }

/* ---- Additions for the Symfony integration ---- */

/* Contact form: honeypot field, invisible to humans and screen readers */
.yzy .f-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.yzy .f-err ul { margin: 0; padding: 0; list-style: none; }
.yzy .form[aria-busy="true"] .f-submit { opacity: .6; pointer-events: none; }

/* Language switcher: language with no version of the current page */
.yzy .lang .lang-off { opacity: .4; }

/* Cookie banner of Google Tag Manager (consent_controller.js) and its "Cookies" button in the footer */
.yzy .consent { position: fixed; z-index: 95; inset: auto 16px 16px; max-width: 560px; margin-inline: auto; padding: 20px 22px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--bg-2); color: var(--text-2); box-shadow: 0 18px 48px var(--shadow); font-size: .875rem; line-height: 1.55; }
.yzy .consent[hidden], .yzy .ftr-cookies[hidden] { display: none; }
.yzy .consent p { margin: 0 0 16px; }
.yzy .consent a { color: var(--text); }
.yzy .consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.yzy .consent-actions .btn { flex: 1 1 110px; height: 44px; }
.yzy .consent .btn-light:active { background: color-mix(in oklch, var(--btn), black 30%); }
.yzy .consent .btn-ghost:active { background: var(--bg-3); }
.yzy .consent { transition: opacity .22s ease, transform .22s var(--ease); }
.yzy .consent.is-closing { opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: reduce) { .yzy .consent { transition: none; } }
.yzy .ftr-cookies { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.yzy .ftr-cookies:hover { color: var(--text); text-decoration: underline; }

/* Product pages: the kicker is part of the <h1> (keyword + brand), same layout as the .phero-copy grid */
.yzy .phero-h1 { display: grid; justify-items: start; gap: 20px; font-size: 1rem; line-height: inherit; }

/* Cross-document View Transitions: a short cross-fade between two pages of the site (browsers without support
   change page as before). Not for visitors who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}