/* Pulsion Studio : accueil en version expérience, v2 (déroulé : docs/experience-accueil.md)
   Base graphique renouvelée : bleu, blanc, bleu nuit ; alternance de sections sombres et claires.
   Feuille autonome : n'utilise pas pulsion.css. Anime surtout transform et opacity. */

@property --cut { syntax: "<percentage>"; inherits: true; initial-value: 100%; }

/* ---------- Jetons ---------- */
:root {
  --night: #050416;
  --night-2: #0b0a2a;
  --blue: #005bf5;
  --blue-bright: #3d7bff;
  --sky: #c5d6f9;
  --paper: #f4f6fc;
  --white: #ffffff;
  --ink: #0a0a23;

  --font-sans: var(--font-body);
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-title: "Syne", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --title-weight: 600;
  --title-track: -0.035em;
  --accent-grad: linear-gradient(100deg, #3d7bff 0%, #7aa2ff 55%, #c5d6f9 100%);

  --gutter: clamp(16px, 4vw, 56px);
  --container: 1240px;
  --panel-gap: clamp(8px, 1vw, 14px);
  --radius-panel: clamp(24px, 3vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
html[data-fonts="chivo"] { --font-title: "Chivo", system-ui, sans-serif; --title-weight: 700; --title-track: -0.04em; }
html[data-fonts="chivo-inter"] { --font-title: "Chivo", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --title-weight: 700; --title-track: -0.04em; }
html[data-fonts="outfit"] { --font-title: "Outfit", system-ui, sans-serif; --title-weight: 500; --title-track: -0.04em; }
[data-mode="dark"] { --bg: var(--night); --fg: var(--white); --muted: rgba(197, 214, 249, .78); --line: rgba(255, 255, 255, .12); --card: rgba(255, 255, 255, .04); --card-strong: rgba(255, 255, 255, .07); }
[data-mode="light"] { --bg: var(--paper); --fg: var(--ink); --muted: #4d5577; --line: rgba(10, 10, 35, .1); --card: var(--white); --card-strong: var(--white); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--white);
  font: 400 1rem/1.55 var(--font-sans); letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 3px; border-radius: 6px; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 99px; background: var(--blue); color: #fff; }
.skip-link:focus { top: 16px; }
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Typographie ---------- */
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.display, .title, .subtitle, .need-title, .story-item h3, .ma-title { font-family: var(--font-title); }
.display {
  font-size: clamp(2.3rem, .9rem + 4.6vw, 5.4rem); font-weight: var(--title-weight);
  line-height: 1.04; letter-spacing: var(--title-track); text-wrap: balance;
  padding-bottom: .1em;
}
.display .line { display: block; }
.title { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.7rem); font-weight: var(--title-weight); line-height: 1.06; letter-spacing: var(--title-track); padding-bottom: .08em; text-wrap: balance; color: var(--fg); }
/* Mot mis en avant : dégradé bleu ; en Urbanist, italique Instrument Serif */
.accent { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
/* Sur fond clair, le dégradé s'arrête sur #3d7bff (3,55:1 sur le fond) : #6f9bff descendait à 2,49:1, sous le minimum de 3:1 des grands textes */
[data-mode="light"] .accent { --accent-grad: linear-gradient(100deg, #005bf5 0%, #3d7bff 100%); }
/* Titres sur fond sombre : léger fondu vers le bas, comme dans la maquette Figma */
[data-mode="dark"] :is(.display, .title) { background: linear-gradient(180deg, #fff 58%, rgba(255, 255, 255, .62)); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-mode="dark"] :is(.display, .title) .accent { -webkit-background-clip: text; background-clip: text; }
.subtitle { font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; color: var(--fg); }
.lead { max-width: 620px; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--muted); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-bright); box-shadow: 0 0 0 4px rgba(61, 123, 255, .2); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; border-radius: 99px; border: 1px solid var(--blue);
  background: var(--blue); color: #fff; text-decoration: none;
  font-size: .95rem; font-weight: 500; letter-spacing: 0; white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgba(0, 91, 245, .7);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s ease;
}
.btn:hover { background: #1166ff; transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(0, 91, 245, .85); }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--fg); box-shadow: none; }
.btn--ghost:hover { background: var(--card-strong); box-shadow: none; }
.btn--small { min-height: 40px; padding: 0 18px; font-size: .875rem; box-shadow: none; }
.arrow { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease); }
a:hover > .arrow { transform: translateX(4px); }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; text-decoration: none; color: var(--fg); border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ---------- Ambiance : grain, lueurs ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.glow { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(10px); }
.panel--light { overflow: hidden; isolation: isolate; }
.panel--light::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 55% at 100% 0%, rgba(0, 91, 245, .13), transparent 70%),
    radial-gradient(38% 50% at 0% 100%, rgba(61, 123, 255, .1), transparent 70%),
    radial-gradient(rgba(10, 10, 35, .07) 1px, transparent 1.2px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .55));
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .55));
}
.panel[data-mode="dark"]:not(.hero):not(.demo)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 60% at 85% 10%, rgba(0, 79, 247, .16), transparent 70%), radial-gradient(35% 50% at 10% 90%, rgba(0, 79, 247, .1), transparent 70%);
}
.panel > .container { position: relative; z-index: 1; }

/* ---------- Profondeur des cartes ---------- */
[data-mode="dark"] { --card-fill: radial-gradient(120% 100% at 100% 0%, rgba(0, 79, 247, .2), rgba(0, 79, 247, .03) 70%), linear-gradient(#0a0928, #0a0928); --card-edge: linear-gradient(140deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .04) 38%, rgba(255, 255, 255, .03) 62%, rgba(61, 123, 255, .55)); --card-shadow: 0 30px 70px -35px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); }
[data-mode="light"] { --card-fill: radial-gradient(120% 100% at 100% 0%, rgba(0, 91, 245, .07), rgba(255, 255, 255, 0) 60%), linear-gradient(#fff, #fff); --card-edge: linear-gradient(140deg, rgba(0, 91, 245, .35), rgba(10, 10, 35, .06) 40%, rgba(10, 10, 35, .05) 65%, rgba(0, 91, 245, .25)); --card-shadow: 0 24px 60px -32px rgba(10, 30, 90, .35); }
.depth, .story-item, .review, .stage-caption, .mega {
  border: 1px solid transparent !important;
  background: var(--card-fill) padding-box, var(--card-edge) border-box !important;
  box-shadow: var(--card-shadow);
}

/* ---------- Panneaux (sections) ---------- */
.panel { position: relative; background: var(--bg); color: var(--fg); padding-block: clamp(80px, 9vw, 130px); }
.panel--light, .panel--float { margin-inline: var(--panel-gap); border-radius: var(--radius-panel); }
#besoins { box-shadow: 0 -30px 120px -40px rgba(0, 91, 245, .35); }
.panel + .panel { margin-top: var(--panel-gap); }
.section-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-intro--center { align-items: center; text-align: center; }

/* ---------- Barre de navigation flottante ---------- */
.topbar {
  position: fixed; z-index: 40; top: 14px; left: 50%; transform: translateX(-50%);
  width: min(1180px, calc(100% - 2 * var(--panel-gap) - 8px));
  display: flex; align-items: center; gap: 28px;
  padding: 7px 7px 7px 20px; border-radius: 99px;
  background: rgba(5, 4, 22, .62); border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--white); transition: background-color .5s ease, border-color .5s ease, color .5s ease;
}
.topbar[data-mode="light"] { background: rgba(255, 255, 255, .78); border-color: rgba(10, 10, 35, .08); color: var(--ink); }
.logo { flex: none; display: block; }
.logo img { width: 64px; height: auto; transition: filter .5s ease; }
.topbar[data-mode="light"] .logo img { filter: brightness(0); }
.topnav { display: flex; align-items: center; gap: 2px; flex: 1; }
.topnav > a, .topnav-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 0; border-radius: 99px; background: none; cursor: pointer; font-size: .9rem; font-weight: 500; letter-spacing: 0; text-decoration: none; transition: background-color .3s ease; }
.topnav > a:hover, .topnav-trigger:hover, .has-menu.is-open .topnav-trigger { background: rgba(127, 140, 190, .16); }
.chev { width: 10px; height: 6px; transition: transform .3s var(--ease); }
.has-menu.is-open .chev { transform: rotate(180deg); }
.has-menu { position: relative; }
.mega {
  position: absolute; top: calc(100% + 14px); left: -12px; width: 560px; padding: 10px; border-radius: 22px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s ease, transform .3s var(--ease), visibility 0s linear .3s;
}
.topbar[data-mode="dark"] .mega, .topbar[data-mode="light"] .mega { color: inherit; }
.has-menu.is-open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s var(--ease), visibility 0s; }
.mega a { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; text-decoration: none; transition: background-color .25s ease; }
.mega a:hover, .mega a:focus-visible { background: rgba(61, 123, 255, .14); }
.mega b { font-family: var(--font-title); font-weight: 500; font-size: .95rem; }
.mega span { font-size: .8rem; color: var(--muted); }
.topnav .topnav-cta { display: none; }
.topbar-cta { margin-left: auto; }
.nav-toggle { display: none; }

/* ---------- Héros ---------- */
.hero { overflow: hidden; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-block: 140px 48px; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; --px: 0; --py: 0; }
.rays { position: absolute; inset: 0; opacity: .9; transform: translate3d(calc(var(--px) * -24px), calc(var(--py) * -12px), 0); transition: transform .6s var(--ease); animation: breathe 7s ease-in-out infinite alternate; }
.rays span {
  position: absolute; top: -380px; left: 50%; height: 980px; transform-origin: top center;
  transform: translateX(var(--x)) rotate(25.32deg); width: var(--w); filter: blur(var(--b));
  background: linear-gradient(180deg, rgba(0, 79, 247, var(--a)), rgba(0, 79, 247, 0));
}
.hero-grid { position: absolute; top: 34%; left: 50%; width: 2200px; max-width: none; transform: translateX(-50%); opacity: .72; }
.aurora { position: absolute; left: 50%; bottom: -24%; width: 1300px; height: 620px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(0, 79, 247, .3), rgba(0, 79, 247, 0)); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(5, 4, 22, 0), var(--night) 85%); }
@keyframes breathe { from { opacity: .7; } to { opacity: .95; } }
@supports (animation-timeline: scroll()) {
  .hero-grid { animation: grid-away linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  @keyframes grid-away { to { transform: translateX(-50%) translateY(-140px) scale(1.15); opacity: .15; } }
}
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.hero .display { max-width: 1180px; }
.hero-lead { max-width: 640px; color: var(--muted); font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); }
.hero .actions { justify-content: center; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); filter: blur(8px); } }
.hero .eyebrow { animation: rise .9s var(--ease) .05s both; }
.hero .display .line:nth-child(1) { animation: rise 1.1s var(--ease) .12s both; }
.hero .display .line:nth-child(2) { animation: rise 1.1s var(--ease) .24s both; }
.hero-lead { animation: rise 1s var(--ease) .42s both; }
.hero .actions { animation: rise 1s var(--ease) .55s both; }

.logos { display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: clamp(56px, 9vh, 110px); }
.logos-title { font-size: .85rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.marquee-list { display: flex; align-items: center; gap: 72px; padding-right: 72px; opacity: .85; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.client-logo { flex: none; }
.client-logo--mask { background: var(--white); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.client-logo--flip { transform: scaleY(-1); }
.empower-logo { position: relative; width: 146px; height: 38px; }
.empower-logo img:last-child { position: absolute; left: 40.4px; top: 30.7px; width: 71.6px; }

/* ---------- Apparitions ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .9s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Aiguillage : liste des besoins ---------- */
.needs-list { border-top: 1px solid var(--line); }
.need-row {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 64px minmax(0, 1.2fr) minmax(0, 1fr) auto 44px; align-items: center; gap: 24px;
  padding: 30px 8px; border-bottom: 1px solid var(--line); text-decoration: none;
  transition: color .35s ease, padding .45s var(--ease);
}
.need-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 20px; background: var(--blue);
  transform: scaleY(.6); opacity: 0; transition: transform .45s var(--ease), opacity .3s ease;
}
.need-row:hover, .need-row:focus-visible { color: #fff; padding-inline: 24px; }
.need-row:hover::before, .need-row:focus-visible::before { transform: none; opacity: 1; }
.need-num { font-family: var(--font-serif); font-style: italic; font-size: 1.6rem; color: var(--blue); transition: color .35s ease; }
.need-title { font-size: clamp(1.35rem, 1.1rem + 1vw, 2.1rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.need-desc { color: var(--muted); transition: color .35s ease; }
.need-price { font-size: .95rem; font-weight: 500; white-space: nowrap; }
.need-arrow { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); transition: background-color .35s ease, border-color .35s ease, transform .45s var(--ease); }
.need-row:hover .need-num, .need-row:hover .need-desc, .need-row:focus-visible .need-num, .need-row:focus-visible .need-desc { color: rgba(255, 255, 255, .85); }
.need-row:hover .need-arrow, .need-row:focus-visible .need-arrow { background: #fff; color: var(--blue); border-color: #fff; transform: rotate(-45deg); }
body.hide-prices .price { display: none; }

/* ---------- Démonstration ---------- */
.demo { isolation: isolate; background: transparent !important; transition: color .6s ease; padding-block: clamp(60px, 7vw, 100px); }
.demo-bg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.demo-bg span { position: absolute; inset: 0; transition: opacity .7s ease; will-change: opacity; }
.demo-bg .bg-light { background: radial-gradient(40% 45% at 78% 45%, rgba(0, 91, 245, .14), transparent 70%), radial-gradient(rgba(10, 10, 35, .07) 1px, transparent 1.2px) 0 0 / 22px 22px, var(--paper); }
.demo-bg .bg-dark { opacity: 0; background: radial-gradient(42% 50% at 78% 45%, rgba(0, 79, 247, .28), transparent 70%), radial-gradient(30% 40% at 5% 95%, rgba(0, 79, 247, .14), transparent 70%), linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 100% 64px, var(--night); }
.demo[data-mode="dark"] .demo-bg .bg-dark { opacity: 1; }
.demo-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 72px); }
.demo-text { grid-column: 1; grid-row: 1; padding-bottom: 18vh; }
.demo-stage { overflow-anchor: none; grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: 56px; }
.stage-inner { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.stage-caption { display: none; }

.step { min-height: 44vh; display: flex; flex-direction: column; justify-content: center; }
.step-card { display: flex; flex-direction: column; gap: 14px; max-width: 460px; opacity: .22; transition: opacity .5s ease; }
.step.is-active .step-card { opacity: 1; }
.chapter .step:first-child { min-height: 50vh; }
.step-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.step-points li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 99px; font-size: .82rem; font-weight: 500; letter-spacing: 0; color: var(--fg); background: var(--card-strong); border: 1px solid var(--line); }
.step-points li::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 100% no-repeat; }
.step-points--offers li::before { display: none; }
.step-points--offers li { padding-left: 12px; }
.step-card p { color: var(--muted); }
.step-tag { display: inline-flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 500; color: var(--blue-bright); letter-spacing: 0; }
.demo[data-mode="light"] .step-tag { color: var(--blue); }
.step-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 6px; }
.step-links .price { font-size: .9rem; color: var(--muted); }

.stage-progress { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--card-strong); border: 1px solid var(--line); transition: background-color .6s ease, border-color .6s ease; }
.stage-progress span { padding: 6px 13px; border-radius: 99px; font-size: .78rem; font-weight: 500; letter-spacing: 0; color: var(--muted); transition: background-color .3s ease, color .3s ease; }
.stage-progress span.is-current { background: var(--blue); color: #fff; }

.device {
  --dev-h: min(58vh, 520px);
  position: relative; display: flex; flex-direction: column;
  width: min(100%, calc(var(--dev-h) * 1.55)); height: var(--dev-h);
  border-radius: 18px; overflow: hidden;
  border: 1px solid transparent; background: linear-gradient(var(--night-2), var(--night-2)) padding-box, linear-gradient(150deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .05) 40%, rgba(61, 123, 255, .6)) border-box;
  box-shadow: 0 50px 120px -40px rgba(0, 91, 245, .55), 0 0 0 6px rgba(255, 255, 255, .03);
  transition: width .8s var(--ease), border-radius .8s ease;
}
.demo[data-mode="light"] .device { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(150deg, rgba(0, 91, 245, .35), rgba(10, 10, 35, .06) 45%, rgba(0, 91, 245, .3)) border-box; box-shadow: 0 40px 100px -40px rgba(10, 20, 80, .4), 0 0 0 6px rgba(0, 91, 245, .04); }
.device-bar { flex: none; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.device-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); transition: opacity .4s; }
.device-url { flex: 1; max-width: 220px; margin-left: 12px; padding: 4px 12px; border-radius: 20px; background: var(--card-strong); color: var(--muted); font-size: 11px; letter-spacing: 0; text-align: center; white-space: nowrap; overflow: hidden; transition: opacity .4s; }
.demo[data-mode="light"] .device-url { background: var(--paper); }
.demo[data-scene="site"][data-step="4"] .device { width: calc(var(--dev-h) * .5); border-radius: 36px; }
.demo[data-scene="site"][data-step="4"] .device-bar i, .demo[data-scene="site"][data-step="4"] .device-url { opacity: 0; }

.screen { position: relative; flex: 1; min-height: 0; overflow: hidden; container: screen / size; }
.scene { will-change: opacity; position: absolute; inset: 0; overflow: hidden; font-size: clamp(8px, 2.05cqw, 15px); line-height: 1.35; letter-spacing: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
@container screen (max-width: 440px) { .scene { font-size: clamp(9px, 3.8cqw, 14px); } }
.demo[data-scene="site"] .scene--site, .demo[data-scene="app"] .scene--app, .demo[data-scene="ops"] .scene--ops, .demo[data-scene="audit"] .scene--audit { opacity: 1; visibility: visible; transition: opacity .6s ease .15s, visibility 0s; }

.stage-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; min-height: 44px; }
.stage-note { font-size: .75rem; color: var(--muted); }
.ctrl { display: none; align-items: center; gap: 8px; font-size: .82rem; letter-spacing: 0; }
.ctrl > span { color: var(--muted); }
.demo[data-scene="site"] .ctrl[data-ctrl="site"], .demo[data-scene="app"] .ctrl[data-ctrl="app"] { display: flex; }
.ctrl button { cursor: pointer; padding: 8px 14px; border-radius: 99px; background: var(--card-strong); border: 1px solid var(--line); color: var(--fg); transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.ctrl button:hover { border-color: var(--blue); }
.ctrl button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.ctrl .swatch { width: 28px; height: 28px; padding: 0; background: var(--sw) !important; border-color: var(--sw) !important; }
.ctrl .swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg); }
.ctrl input[type="range"] { width: 160px; accent-color: var(--blue); }
/* Styles du site d'exemple : pastilles qui invitent à essayer, jusqu'au premier clic */
.ctrl > .ctrl-invite { margin-right: 4px; color: var(--fg); font-weight: 600; }
.ctrl .style-pick { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; }
.style-pick i { position: relative; width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px rgba(127, 140, 190, .4); transition: transform .3s var(--ease); }
.style-pick:hover i { transform: scale(1.12); }
.ctrl--styles:not(.is-tried) .style-pick[aria-pressed="false"] i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--b); opacity: 0; animation: invite 2.6s ease-out 5; }
.ctrl--styles:not(.is-tried) .style-pick:nth-of-type(3) i::after { animation-delay: 1.3s; }
@keyframes invite { 0% { transform: scale(.75); opacity: .9; } 70%, 100% { transform: scale(1.4); opacity: 0; } }

/* ----- Scène 1 : site d'exemple ----- */
.scene--site { --sbg: #0e1033; --sfg: #fff; --mut: #9fb0dd; --acc: #4d8dff; --acc2: #8f6bff; --scard: rgba(255, 255, 255, .06); --title-font: var(--font-serif);
  background: var(--sbg); color: var(--sfg); transition: opacity .6s ease, visibility 0s linear .6s, background-color .6s ease, color .6s ease; }
.scene--site[data-theme="sable"] { --sbg: #f4ece1; --sfg: #2b2118; --mut: #7a6a58; --acc: #c4643b; --acc2: #e8b07a; --scard: #fffaf3; }
.scene--site[data-theme="menthe"] { --sbg: #e9f6f0; --sfg: #0f2e25; --mut: #4f7366; --acc: #12a079; --acc2: #7fd8b9; --scard: #fff; --title-font: var(--font-sans); }
.ms { height: 100%; display: flex; flex-direction: column; gap: 1.4em; padding: 1.2em 1.8em; }
.ms-nav { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.ms-logo { font-family: var(--title-font); font-style: italic; font-weight: 600; font-size: 1.35em; }
.ms-links { display: flex; gap: 1.2em; }
.ms-links .has-sub::after { content: ""; display: inline-block; width: .32em; height: .32em; margin: 0 0 .22em .4em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; opacity: .7; }
.ms-actions { display: flex; align-items: center; gap: .6em; }
.ms-burger { display: none; width: 2.1em; height: 2.1em; place-items: center; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--sfg) 22%, transparent); transition: border-color .6s ease; }
.ms-burger i, .ms-burger i::before, .ms-burger i::after { display: block; width: .9em; height: 1.5px; border-radius: 1px; background: var(--sfg); transition: background-color .6s ease; }
.ms-burger i { position: relative; }
.ms-burger i::before, .ms-burger i::after { content: ""; position: absolute; left: 0; }
.ms-burger i::before { top: -.3em; } .ms-burger i::after { top: .3em; }
.ms-links i { font-style: normal; font-size: .85em; color: var(--mut); }
.ms-btn { align-self: flex-start; padding: .55em 1.1em; border-radius: 99px; background: var(--acc); color: #fff; font-size: .8em; white-space: nowrap; }
.ms-hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 1.5em; }
.ms-hero-text { display: flex; flex-direction: column; gap: .7em; }
.ms-kicker { align-self: flex-start; display: inline-flex; align-items: center; gap: .5em; padding: .32em .8em; border-radius: 99px; font-size: .62em; letter-spacing: .03em; color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--acc) 28%, transparent); }
.ms-kicker::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.ms-title { font-family: var(--title-font); font-size: 2.8em; font-weight: 500; line-height: 1; }
.ms-title em { font-style: italic; color: var(--acc); }
.ms-sub { max-width: 22em; font-size: .9em; color: var(--mut); }
.ms-visual { position: relative; height: 100%; min-height: 8em; border-radius: .8em; }
.ms-blob { position: absolute; inset: 8% 10%; border-radius: 42% 58% 55% 45% / 48% 40% 60% 52%; background: radial-gradient(circle at 30% 30%, var(--acc2), var(--acc)); animation: blob 9s ease-in-out infinite; transition: opacity .6s ease; }
.ms-blob--2 { inset: 38% 2% 4% 42%; opacity: .55; background: var(--acc2); animation-duration: 11s; animation-direction: reverse; }
@keyframes blob { 50% { transform: rotate(18deg) scale(1.06) translate(3%, -2%); } }
.ms-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9em; }
.ms-card { display: flex; flex-direction: column; gap: .45em; padding: .9em; border-radius: .9em; background: var(--scard); box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .08); }
.ms-card b { font-size: .9em; font-weight: 600; }
.ms-card i { height: .45em; border-radius: 1em; background: currentColor; opacity: .12; }
.ms-card i + i { width: 60%; }
.ms-logo, .ms-links i, .ms-kicker, .ms-kicker::before, .ms-title, .ms-title em, .ms-sub, .ms-btn, .ms-card b, .ms-card, .ms-visual { transition: color .6s ease, background-color .6s ease, outline-color .6s ease; }
@container screen (max-width: 440px) {
  .ms { padding: 1em 1.1em; gap: 1em; }
  .ms-links { display: none; }
  .ms-hero { grid-template-columns: 1fr; align-content: start; }
  .ms-visual { order: -1; min-height: 7em; height: 7em; }
  .ms-title { font-size: 2.3em; }
  .ms-burger { display: grid; }
  /* L'illustration prend la hauteur libre : pas de vide sous les cours */
  .ms-hero { display: flex; flex-direction: column; align-items: stretch; }
  .ms-visual { flex: 1; height: auto; }
  .ms-cards { grid-template-columns: 1fr; gap: .5em; }
  .ms-card { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); align-items: center; gap: .45em .9em; padding: .8em .9em; }
  .ms-card b { grid-row: span 2; }
  .ms-card i + i { width: 60%; }
}
.seo-panel { position: absolute; left: 30%; right: 1em; bottom: 1em; display: grid; grid-template-columns: 1.25fr 1fr; gap: 1em; padding: 1em 1.2em; border-radius: .9em; background: #0a0a1f; color: #dfe6ff; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 1.2em 3em rgba(0, 0, 0, .35); font-size: .8em; opacity: 0; transform: translateY(120%); transition: transform .8s var(--ease), opacity .5s ease; }
.seo-code { margin: 0; overflow: hidden; white-space: pre; font: .85em/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.c-k { color: #7aa7ff; } .c-a { color: #c5d6f9; } .c-s { color: #9be7c4; }
.seo-checks { display: flex; flex-direction: column; justify-content: center; gap: .55em; }
.seo-checks li { position: relative; padding-left: 1.7em; opacity: .3; transition: opacity .4s ease; }
.seo-checks li::before { content: ""; position: absolute; left: 0; top: .1em; width: 1.2em; height: 1.2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2312a079'/%3E%3Cpath d='M4.6 8.3l2.3 2.3 4.5-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.demo[data-scene="site"][data-step="5"] .seo-panel { opacity: 1; transform: none; }
.demo[data-scene="site"][data-step="5"] .seo-checks li { opacity: 1; }
.demo[data-scene="site"][data-step="5"] .seo-checks li::before { transform: scale(1); }
.seo-checks li:nth-child(1), .seo-checks li:nth-child(1)::before { transition-delay: .5s; }
.seo-checks li:nth-child(2), .seo-checks li:nth-child(2)::before { transition-delay: .8s; }
.seo-checks li:nth-child(3), .seo-checks li:nth-child(3)::before { transition-delay: 1.1s; }
.seo-checks li:nth-child(4), .seo-checks li:nth-child(4)::before { transition-delay: 1.4s; }
@container screen (max-width: 440px) { .seo-panel { left: 1em; grid-template-columns: 1fr; } .seo-code { display: none; } }
@container screen (max-height: 340px) {
  .ms { gap: .8em; padding-block: .9em; }
  .ms-hero { overflow: hidden; }
  .ms-visual { min-height: 4.5em; height: 4.5em; }
  .ms-cards { display: none; }
}
/* Téléphone : écran étroit et peu haut, les trois cours restent visibles */
@container screen (max-width: 440px) and (max-height: 340px) {
  .ms { gap: .6em; }
  .ms-hero { gap: .6em; }
  .ms-hero-text { gap: .45em; }
  .ms-visual { flex: none; min-height: 2.6em; height: 2.6em; }
  .ms-title { font-size: 1.9em; }
  .ms-cards { display: grid; gap: .35em; }
  .ms-card { padding: .45em .75em; row-gap: 0; }
  .ms-card b { grid-row: auto; }
  .ms-card i + i { display: none; }
}

/* ----- Scène 2 : application d'exemple ----- */
.scene--app {
  --app: #4d8dff; --abg: #0b0d22; --afg: #e8edff; --amut: #9aa6cc; --apanel: rgba(255, 255, 255, .05); --aline: rgba(255, 255, 255, .08);
  background: var(--abg); color: var(--afg);
  transition: opacity .6s ease, visibility 0s linear .6s, background-color .5s ease, color .5s ease;
}
.scene--app[data-ui="light"] { --abg: #f5f7fc; --afg: #12142e; --amut: #5d6585; --apanel: #fff; --aline: rgba(10, 10, 35, .08); }
.scene--app[data-accent="orange"] { --app: #ff8a3d; }
.scene--app[data-accent="framboise"] { --app: #f0508c; }
.ma { position: relative; height: 100%; display: grid; grid-template-columns: 3.4em minmax(0, 1fr); }
.ma-side { display: flex; flex-direction: column; align-items: center; gap: 1.1em; padding: 1.1em 0; border-right: 1px solid var(--aline); }
.ma-logo { width: 1.6em; height: 1.6em; border-radius: .5em; background: var(--app); transition: background-color .5s ease; }
.ma-side i { width: 1.1em; height: 1.1em; border-radius: .35em; background: var(--aline); }
.ma-side i.is-on { background: var(--app); }
.ma-ico { display: inline-grid; place-items: center; padding: .35em .55em !important; }
.ma-ico svg { width: 1.15em; height: 1.15em; }
.ma-mode { width: 2.3em; height: 2.3em; padding: 0 !important; border-radius: 50%; border: 1px solid var(--aline); background: var(--apanel); color: var(--afg); cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.ma-mode:hover { color: var(--app); }
.ma-mode .ico-moon, .scene--app[data-ui="light"] .ma-mode .ico-sun { display: none; }
.scene--app[data-ui="light"] .ma-mode .ico-moon { display: block; }
.ma-main { position: relative; min-width: 0; }
.ma-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; }
.ma-title { font-size: 1.15em; font-weight: 600; margin-right: auto; }
.ma-seg { display: flex; gap: .2em; padding: .22em; border-radius: .7em; background: var(--apanel); border: 1px solid var(--aline); }
.ma-seg button { cursor: pointer; font-size: .76em; padding: .4em .8em; border: 0; border-radius: .5em; background: none; color: var(--amut); transition: background-color .3s ease, color .3s ease; }
.ma-seg button[aria-pressed="true"] { background: var(--app); color: #fff; }
.ma-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7em; }
.ma-tile { cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: .25em; padding: .75em .9em; border-radius: .8em; background: var(--apanel); border: 1px solid var(--aline); color: var(--afg); transition: border-color .3s ease, box-shadow .3s ease, background-color .5s ease; }
.ma-tile small { font-size: .72em; color: var(--amut); }
.ma-tile b { font-size: 1.4em; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ma-tile[aria-pressed="true"] { border-color: var(--app); box-shadow: inset 0 -.2em 0 var(--app); }
.ma-chart { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .4em; padding: .8em .9em .5em; border-radius: .8em; background: var(--apanel); border: 1px solid var(--aline); color: var(--app); transition: background-color .5s ease; }
.ma-plot { position: relative; flex: 1; min-height: 0; touch-action: pan-y; }
.ma-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ma-gridlines line { stroke: var(--aline); stroke-width: .6; }
.ma-line { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.4, 0, .2, 1), opacity .4s ease; }
.ma-area { opacity: 0; transition: opacity .6s ease .4s; }
.ma-bars rect { fill: currentColor; transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .6s var(--ease), opacity .2s ease; }
.ma-plot.is-hover .ma-bars rect:not(.is-active) { opacity: .35; }
.demo[data-scene="app"]:not([data-step="1"]) .ma-line { stroke-dashoffset: 0; }
.demo[data-scene="app"]:not([data-step="1"]) .ma-area { opacity: 1; }
.scene--app[data-chart="bar"] .ma-line, .scene--app[data-chart="bar"] .ma-area { opacity: 0 !important; transition-delay: 0s; }
.ma-point { position: absolute; width: .7em; height: .7em; margin: -.35em 0 0 -.35em; border-radius: 50%; background: var(--app); border: 2px solid var(--apanel); box-shadow: 0 0 0 .35em color-mix(in srgb, var(--app) 22%, transparent); opacity: 0; pointer-events: none; transition: opacity .15s ease, left .18s var(--ease), top .18s var(--ease); }
.ma-tip { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; gap: .1em; margin-top: -1em; padding: .4em .7em; border-radius: .6em; background: var(--apanel); border: 1px solid var(--aline); box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .18); color: var(--afg); font-size: .72em; line-height: 1.2; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease, left .18s var(--ease), top .18s var(--ease); }
.ma-tip small { font-size: .85em; color: var(--amut); }
.ma-tip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ma-tip.is-below { margin-top: 1em; }
.ma-plot.is-hover :is(.ma-point, .ma-tip) { opacity: 1; }
.scene--app[data-chart="bar"] .ma-point { display: none; }
.ma-x { display: flex; justify-content: space-between; font-size: .66em; color: var(--amut); }
.scene--app[data-chart="bar"] .ma-x { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.demo[data-scene="app"][data-step="1"] :is(.ma-tile, .ma-chart) { border-style: dashed; border-color: var(--amut); background: transparent; box-shadow: none; }
.demo[data-scene="app"][data-step="1"] .ma-tile b { color: transparent; }
.term-panel { position: absolute; right: 1em; bottom: 1em; width: 52%; padding: 1em 1.1em; border-radius: .9em; background: #05060f; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 1.2em 3em rgba(0, 0, 0, .45); font: .78em/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #c9d3f5; opacity: 0; transform: translateY(120%); transition: transform .8s var(--ease), opacity .5s ease; }
.term-title { margin-bottom: .6em; color: #fff; font-family: var(--font-sans); font-weight: 600; }
.term-panel li { position: relative; padding-left: 1.5em; }
.term-panel li::before { content: ""; position: absolute; left: .2em; top: .5em; width: .6em; height: .6em; border-radius: 50%; background: #f5b400; transition: background-color .4s ease; }
.demo[data-scene="app"][data-step="4"] .term-panel { opacity: 1; transform: none; }
.demo[data-scene="app"][data-step="4"] .term-panel li::before { background: #2fc79a; }
.term-panel li:nth-child(1)::before { transition-delay: 1s; } .term-panel li:nth-child(2)::before { transition-delay: 1.5s; } .term-panel li:nth-child(3)::before { transition-delay: 2s; } .term-panel li:nth-child(4)::before { transition-delay: 2.5s; } .term-panel li:nth-child(5)::before { transition-delay: 3s; }
@container screen (max-width: 440px) {
  .ma { grid-template-columns: 2.7em minmax(0, 1fr); }
  .ma-nav { width: 1.9em !important; height: 1.9em !important; }
  .ma-search { display: none; }
  .ma-title { width: 100%; }
  .ma-tiles { gap: .4em; }
  .ma-tile { padding: .55em .6em; } .ma-tile b { font-size: 1.1em; }
  .term-panel { left: 1em; width: auto; }
}

/* (outil interne : voir plus bas) */

/* ----- Scène 4 : audit, comparaison avant / après ----- */
/* Chaque domaine a sa page ; l'après se dévoile de gauche à droite, comme le curseur sous l'écran. */
.scene--audit { display: flex; flex-direction: column; background: #eef1f8; color: #1a1d33; }
.mu-tabs { position: relative; z-index: 6; flex: none; display: flex; gap: .3em; padding: .55em .9em; background: #e3e7f2; border-bottom: 1px solid rgba(10, 10, 35, .07); overflow-x: auto; scrollbar-width: none; }
.mu-tabs button { position: relative; flex: none; padding: .4em .8em .4em 1.6em; border: 0; border-radius: 99px; background: none; color: #4d5577; font-size: .72em; font-weight: 600; cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.mu-tabs button::before { content: ""; position: absolute; left: .7em; top: 50%; width: .5em; height: .5em; margin-top: -.25em; border-radius: 50%; background: #f5b400; transition: background-color .4s ease; }
.mu-tabs button[aria-pressed="true"] { background: #fff; color: #1a1d33; box-shadow: 0 .15em .5em rgba(20, 30, 80, .1); }
.mu-tabs button.is-done::before, .scene--audit[data-phase="upkeep"] .mu-tabs button::before { background: #12a079; }
.mu { --cut: 0%; position: relative; flex: 1; min-height: 0; transition: --cut .9s var(--ease); }
.mu.is-dragging { transition: none; }
.scene--audit[data-phase="sweep"] .mu { transition-duration: 1.6s; transition-timing-function: cubic-bezier(.45, 0, .25, 1); }
.scene--audit[data-phase="compare"] .mu { cursor: ew-resize; }
.mu { touch-action: pan-y; }
.mu-layer { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.mu-layer--apres { clip-path: inset(0 calc(100% - var(--cut)) 0 0); }

/* Pages d'exemple */
.mp { position: absolute; inset: 0; display: none; flex-direction: column; gap: .9em; padding: 1.1em 1.4em; background: #eef1f8; }
.scene--audit[data-audit="seo"] .mp--seo, .scene--audit[data-audit="rgpd"] .mp--rgpd, .scene--audit[data-audit="a11y"] .mp--a11y, .scene--audit[data-audit="perf"] .mp--perf { display: flex; }
.mp code { font: 600 .58em/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0; padding: .2em .5em; border-radius: .35em; white-space: nowrap; }
.mu-layer--avant .mp code { background: #fdebd0; color: #8a4300; }
.mu-layer--apres .mp code { background: #d8f3e8; color: #0b6b4f; }
.mp-nav { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.mp-nav b { font-size: .8em; font-weight: 700; }
.mp-nav span { display: flex; gap: 1.2em; }
.mp-nav i { font-style: normal; font-size: .64em; color: #4d5577; }

/* SEO : résultat de recherche et contenu de la page */
.serp { position: relative; flex: none; align-self: flex-start; width: min(100%, 32em); display: flex; flex-direction: column; gap: .2em; padding: .7em .95em; border-radius: .7em; background: #fff; border: 1px solid #e0e5f0; box-shadow: 0 .3em 1.2em rgba(20, 30, 80, .08); }
.serp-url { font-size: .62em; color: #4d5577; }
.serp-title { position: relative; width: fit-content; font-size: .98em; font-weight: 500; color: #2a4fd1; }
.serp-desc { font-size: .68em; color: #4d5577; }
.serp-rich { font-size: .64em; color: #e7a300; letter-spacing: .05em; } .serp-rich span { color: #4d5577; letter-spacing: 0; }
.mp-page { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .8em; padding: .8em 1em; border-radius: .7em; background: #fff; box-shadow: 0 .3em 1.2em rgba(20, 30, 80, .08); }
.mp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; gap: 1.1em; }
.mp-col { display: flex; flex-direction: column; justify-content: center; gap: .55em; }
.mp-tagged { position: relative; width: fit-content; display: flex; align-items: flex-start; gap: .45em; }
.mp-tagged code { margin-top: .35em; }
.mp-h { font-size: 1.3em; font-weight: 700; line-height: 1.12; }
.mp-l { height: .5em; border-radius: 1em; background: #e3e7f2; }
.mp-l--s { width: 60%; }
.mp-link { position: relative; width: fit-content; font-size: .72em; color: #2a4fd1; text-decoration: underline; text-underline-offset: .15em; }
.mp-photo { position: relative; min-height: 5em; border-radius: .6em; background: #efe9e1 url(../assets/demo/cuisine.svg) center / cover no-repeat; }
.mp-photo code { position: absolute; left: .5em; bottom: .5em; }

/* RGPD : formulaire de devis et bandeau cookies */
.fm { position: relative; display: flex; flex-direction: column; gap: .65em; padding: .9em 1.1em; border-radius: .7em; background: #fff; box-shadow: 0 .3em 1.2em rgba(20, 30, 80, .08); }
.fm-title { font-size: .95em; font-weight: 700; }
.fm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55em .8em; }
.fm-field { position: relative; display: flex; flex-direction: column; gap: .2em; min-width: 0; }
.fm-field small { font-size: .6em; color: #4d5577; }
.fm-field i { font-style: normal; font-size: .7em; padding: .45em .6em; border: 1px solid #d5dbea; border-radius: .4em; background: #fafbfe; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-check { position: relative; width: fit-content; padding-left: 1.75em; font-size: .68em; }
.fm-check::before { content: ""; position: absolute; left: 0; top: 50%; width: 1.15em; height: 1.15em; margin-top: -.6em; border-radius: .25em; border: 1.5px solid #8a90ad; background: #fff; }
.fm-check.is-on::before { border-color: #2a4fd1; background: #2a4fd1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l2.9 2.9 5.9-6.2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 85% no-repeat; }
.fm-foot { position: relative; display: flex; align-items: center; gap: .9em; }
.fm-send { flex: none; padding: .45em 1.3em; border-radius: 99px; background: #1a1d33; color: #fff; font-size: .7em; font-weight: 600; }
.fm-info { font-size: .58em; line-height: 1.35; color: #4d5577; } .fm-info u { color: #2a4fd1; }
/* Bandeau cookies en carte, en bas à gauche */
.ck { position: absolute; left: 1.3em; bottom: 1em; width: 19em; display: flex; flex-direction: column; gap: .5em; padding: .9em 1em; border-radius: .8em; background: #fff; color: #1a1d33; font-size: .66em; box-shadow: 0 .8em 2.2em rgba(10, 15, 40, .22); }
.ck-title { font-size: 1.15em; font-weight: 700; }
.ck-text { color: #4d5577; line-height: 1.4; }
.ck-actions { display: flex; gap: .45em; }
.ck-btn { flex: 1 1 0; padding: .55em .4em; border-radius: .45em; background: #eef1f8; text-align: center; font-weight: 600; }
.ck-btn--main { background: #1a1d33; color: #fff; }

/* Accessibilité : une rangée de réalisations */
.mp--a11y { background: #fff; gap: .8em; }
.ax-head { display: flex; flex-direction: column; gap: .3em; }
.ax-h { font-size: 1.05em; font-weight: 700; }
.ax-sub { position: relative; width: fit-content; font-size: .72em; color: #b9bdca; }
.ax-cards { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
.ax-card { position: relative; display: flex; flex-direction: column; gap: .3em; min-width: 0; }
.ax-img { position: relative; flex: 1; min-height: 4.4em; border-radius: .55em; background: #efe9e1 url(../assets/demo/cuisine.svg) center / cover no-repeat; }
.ax-img--2 { background-image: url(../assets/demo/escalier.svg); }
.ax-img--3 { background-image: url(../assets/demo/bibliotheque.svg); }
.ax-img code { position: absolute; left: .5em; top: .5em; }
.ax-card b { font-size: .72em; }
.ax-card small { position: relative; width: fit-content; font-size: .48em; color: #c3c7d2; }
.ax-fav { position: absolute; top: .45em; right: .45em; width: 1.8em; height: 1.8em; border-radius: 50%; background: rgba(255, 255, 255, .9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 13.2S2.5 9.9 2.5 6.1A2.8 2.8 0 0 1 8 5a2.8 2.8 0 0 1 5.5 1.1C13.5 9.9 8 13.2 8 13.2z' fill='none' stroke='%231a1d33' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / 58% no-repeat; }
.ax-btn { align-self: flex-start; padding: .5em 1.2em; border-radius: 99px; background: #9fbaf0; color: #fff; font-size: .68em; font-weight: 600; }
.mu-layer--apres .ax-sub { font-size: .78em; color: #4a5068; }
.mu-layer--apres .ax-card small { font-size: .64em; color: #4a5068; }
.mu-layer--apres .ax-card:first-child .ax-fav { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1f5fd6; }
.mu-layer--apres .ax-btn { background: #1f5fd6; }
.ax-label { position: absolute; right: 0; top: calc(100% + .55em); padding: .3em .6em; border-radius: .35em; background: #1a1d33; color: #fff; font-size: clamp(7px, 1.3cqw, 10px); font-style: normal; white-space: nowrap; }

/* Performance : rapport de type PageSpeed, contenu resserré au centre */
.mp--perf { background: #fff; align-items: center; }
.psi { width: 100%; max-width: 36em; display: flex; flex-direction: column; gap: .8em; }
.pf-head { display: flex; align-items: baseline; gap: .8em; font-size: .62em; color: #4d5577; }
.pf-head b { font-size: 1.55em; color: #1a1d33; }
.pf-legend { margin-left: auto; display: flex; gap: 1em; }
.pf-legend i { --c: #0c9e6e; position: relative; padding-left: 1.1em; font-style: normal; }
.pf-legend i::before, .pf-m::before, .pf-diag li::before { content: ""; position: absolute; left: 0; width: .6em; height: .6em; border-radius: 50%; background: var(--c); }
.pf-legend i::before { top: .3em; }
.pf-legend .is-mid, .pf-m.is-mid, .pf-diag .is-mid { --c: #e08600; }
.pf-legend .is-bad, .pf-m.is-bad, .pf-diag .is-bad { --c: #d93a3a; }
:is(.pf-legend, .pf-m, .pf-diag) .is-mid::before, .pf-m.is-mid::before { border-radius: .1em; }
:is(.pf-legend, .pf-diag) .is-bad::before, .pf-m.is-bad::before { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pf { display: flex; align-items: center; gap: 1.5em; padding-bottom: .8em; border-bottom: 1px solid #e6e9f2; }
.pf-gauge { --c: #0c9e6e; position: relative; flex: none; width: 5.6em; height: 5.6em; display: grid; place-items: center; color: var(--c); }
.mu-layer--avant .pf-gauge { --c: #d93a3a; }
.pf-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.pf-gauge circle { fill: none; stroke: currentColor; stroke-width: 3.4; opacity: .16; }
.pf-gauge circle.pf-arc { opacity: 1; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--score)); animation: gauge 1.4s var(--ease) both; }
@keyframes gauge { from { stroke-dashoffset: 100; } }
.pf-gauge b { font-size: 1.65em; font-weight: 700; }
.pf-metrics { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em 1.2em; }
.pf-m { --c: #0c9e6e; position: relative; display: flex; flex-direction: column; gap: .1em; padding-left: 1.05em; }
.pf-m::before { top: .3em; width: .55em; height: .55em; }
.pf-m small { font-size: .6em; color: #4d5577; }
.pf-m b { font-size: 1.1em; font-weight: 700; color: var(--c); }
.pf-film { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45em; padding-bottom: 1em; }
.pf-f { position: relative; height: 3.8em; border-radius: .3em; border: 1px solid #e0e5f0; background: #fafbfe; }
.pf-f--nav, .pf-f--text, .pf-f--full { background-repeat: no-repeat; }
.pf-f--nav { background-image: linear-gradient(#1a1d33, #1a1d33); background-size: 100% .5em; }
.pf-f--text { background-image: linear-gradient(#1a1d33, #1a1d33), linear-gradient(#c5cbdc, #c5cbdc), linear-gradient(#e3e7f2, #e3e7f2); background-size: 100% .5em, 55% .35em, 40% .3em; background-position: 0 0, .4em 1.1em, .4em 1.7em; }
.pf-f--full { background-image: linear-gradient(#1a1d33, #1a1d33), linear-gradient(#c5cbdc, #c5cbdc), linear-gradient(#e3e7f2, #e3e7f2), url(../assets/demo/cuisine.svg); background-size: 100% .5em, 55% .35em, 40% .3em, calc(100% - .8em) 1.2em; background-position: 0 0, .4em 1.1em, .4em 1.7em, .4em 2.3em; }
.pf-f small { position: absolute; left: 0; right: 0; top: calc(100% + .3em); text-align: center; font-size: .56em; color: #4d5577; }
.pf-label { font-size: .58em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #4d5577; }
.pf-diag { display: flex; flex-direction: column; margin-top: -.4em; }
.pf-diag li { --c: #0c9e6e; position: relative; display: flex; justify-content: space-between; gap: 1em; padding: .5em .2em .5em 1.4em; border-bottom: 1px solid #eef0f5; font-size: .62em; }
.pf-diag li::before { top: .75em; }
.pf-diag span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-diag b { flex: none; color: var(--c); font-weight: 600; }

/* Pastilles de l'audit, accrochées à l'élément qu'elles signalent */
.mf {
  position: absolute; z-index: 3; right: -.6em; top: 0; translate: 0 -70%;
  display: inline-flex; align-items: center; gap: .45em; padding: .3em .75em .3em .35em;
  border-radius: 99px; background: #fff; border: 1px solid; box-shadow: 0 .3em 1em rgba(20, 30, 80, .16);
  font: normal 600 clamp(7px, 1.45cqw, 11px)/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.mf::before { content: ""; flex: none; width: 1.3em; height: 1.3em; background: center / contain no-repeat; }
.mu-layer--avant .mf { color: #8a4300; border-color: #f5b400; opacity: 0; transform: scale(.8); transition: opacity .4s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.mu-layer--avant .mf::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23f5b400'/%3E%3Crect x='7.1' y='3.6' width='1.8' height='5.6' rx='.9' fill='white'/%3E%3Ccircle cx='8' cy='11.7' r='1.05' fill='white'/%3E%3C/svg%3E"); }
.mu-layer--apres .mf { color: #0b6b4f; border-color: #12a079; }
.mu-layer--apres .mf::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2312a079'/%3E%3Cpath d='M4.6 8.3l2.3 2.3 4.5-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.scene--audit:not([data-phase="ready"]) .mu-layer--avant .mf { opacity: 1; transform: none; }
.scene--audit[data-phase="ready"] .mu-layer--avant .mf { transition: none; }
.scene--audit[data-phase="scan"] .mu-layer--avant .mf { transition-delay: var(--d, 0s); }
/* Placements particuliers */
.serp-title .mf, .mp-link .mf, .fm-check .mf, .ax-sub .mf, .ax-card small .mf { right: auto; left: 100%; top: 50%; translate: .5em -50%; }
.mu-layer--apres .serp-title .mf { left: auto; right: -.6em; top: 0; translate: 0 -95%; }
/* Au-dessus du titre, dans l'espace libre : la pastille ne couvre jamais le texte */
.mp-tagged .mf { right: auto; left: 0; top: auto; bottom: calc(100% + .4em); translate: none; }
.mp-photo .mf { right: .5em; top: .5em; translate: none; }
.ax-img .mf { right: auto; left: .5em; top: auto; bottom: .5em; translate: none; }
.ax-fav .mf { top: auto; bottom: -.4em; right: 2.2em; translate: 0 0; }
.fm-field .mf { top: auto; bottom: .3em; right: .35em; translate: none; }
.fm-foot .mf { right: auto; left: 7.5em; top: 50%; translate: 0 -50%; }
.mu-layer--apres .fm-field .mf { top: auto; bottom: .3em; right: .35em; translate: none; }
.fm-foot .mf { left: auto; right: -.6em; top: 0; translate: 0 -80%; }
.ck .mf { top: 0; right: .6em; translate: 0 -95%; }

.mu-tag { position: absolute; top: .9em; padding: .25em .7em; border-radius: 99px; font-size: .68em; font-weight: 600; z-index: 4; opacity: 0; transition: opacity .4s ease; }
.scene--audit:is([data-phase="sweep"], [data-phase="compare"]) .mu-tag { opacity: 1; }
.mu-tag--apres { left: .9em; background: #12a079; color: #fff; }
.mu-tag--avant { right: .9em; background: #1a1d33; color: #fff; }
.mu-handle { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 0; z-index: 5; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.mu-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--blue); }
.mu-handle span { position: absolute; top: 50%; left: 0; width: 2.4em; height: 2.4em; margin: -1.2em 0 0 -1.2em; border-radius: 50%; background: var(--blue); box-shadow: 0 .3em 1em rgba(0, 91, 245, .5); display: grid; place-items: center; }
.mu-handle span::before { content: "‹ ›"; color: #fff; font-size: .9em; font-weight: 700; letter-spacing: .1em; }
.scene--audit:is([data-phase="sweep"], [data-phase="compare"]) .mu-handle { opacity: 1; }
.mu-scan { position: absolute; left: 0; right: 0; top: 0; height: 3em; background: linear-gradient(180deg, rgba(0, 91, 245, 0), rgba(0, 91, 245, .22)); border-bottom: 2px solid rgba(0, 91, 245, .7); opacity: 0; transition: opacity .4s ease; z-index: 2; pointer-events: none; }
.scene--audit[data-phase="scan"] .mu-scan { opacity: 1; animation: scan 1.8s linear both; }
@keyframes scan { from { transform: translateY(-3em); } to { transform: translateY(100cqh); } }
.mu-status { position: absolute; z-index: 5; right: 1.2em; top: 1.2em; width: 45%; display: flex; flex-direction: column; gap: .6em; padding: .9em 1em; border-radius: .9em; background: #fff; box-shadow: 0 1em 2.5em rgba(20, 30, 80, .16); font-size: .78em; opacity: 0; transform: translateX(115%); transition: transform .8s var(--ease), opacity .5s ease; }
.mu-status li { position: relative; padding-left: 1.4em; }
.mu-status li::before, .mu-status li::after { content: ""; position: absolute; left: .15em; top: .45em; width: .6em; height: .6em; border-radius: 50%; background: #12a079; }
.mu-status li::after { animation: pulse 2s ease-out 3; }
.mu-status li:nth-child(2)::after { animation-delay: .5s; } .mu-status li:nth-child(3)::after { animation-delay: 1s; } .mu-status li:nth-child(4)::after { animation-delay: 1.5s; }
@keyframes pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
.scene--audit[data-phase="upkeep"] .mu-status { opacity: 1; transform: none; }
@container screen (max-width: 440px) {
  .mf { font-size: clamp(7px, 2.5cqw, 10px); }
  .mu-status { left: 1.2em; width: auto; }
  .mp { padding: .8em .9em; gap: .6em; }
  .mp-nav span, .serp-desc, .mp-l--s, .fm-info, .ck-text, .ck-title, .pf-head, .pf-diag li:nth-child(n + 3), .ax-card:nth-child(3), .fm-field:nth-child(3) { display: none; }
  .ck { left: .9em; right: .9em; bottom: .7em; width: auto; padding: .6em .7em; }
  .fm-check { max-width: 58%; }
  .fm-field .mf { top: auto; bottom: .3em; right: auto; left: 100%; translate: .7em 0; }
  .fm-check .mf { top: 0; translate: .5em -15%; }
  .ax-sub { max-width: 55%; }
  .pf-film { gap: .3em; }
  .pf-f { height: 3em; }
  .mp-h { font-size: 1.05em; }
  .ax-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-img { height: 4.4em; }
  .pf { gap: 1em; }
  .pf-gauge { width: 4.6em; height: 4.6em; }
  .pf-gauge b { font-size: 1.35em; }
  .pf-metrics { gap: .5em .8em; }
  .pf-m b { font-size: 1em; }
}
@container screen (max-height: 340px) {
  .serp-rich, .mp--rgpd .mp-nav, .ax-btn { display: none; }
  .fm { padding: .7em .9em; gap: .5em; }
}

/* ---------- Récit ---------- */
.story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.story-item { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.story-item .serif { font-size: 2.6rem; line-height: 1; color: var(--blue); }
.story-item h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.story-item p { color: var(--muted); }

/* ---------- Réalisations ---------- */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 48px; }
.work { display: flex; flex-direction: column; gap: 20px; text-decoration: none; }
.work-media { aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); }
.work-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.work:has(> a):hover .work-media img { transform: scale(1.04); }
.work-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.tag { padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line); font-size: .8rem; color: var(--muted); }
.person { display: flex; align-items: center; gap: 12px; }
.person img, .person .initials { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.person .initials { display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 600; }
.person-name { font-weight: 600; line-height: 1.3; }
.person-role { font-size: .85rem; color: var(--muted); }

/* ---------- Avis ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.review { display: flex; flex-direction: column; gap: 20px; padding: 30px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.review blockquote { display: flex; flex-direction: column; gap: 10px; }
.review blockquote p:first-child { font-family: var(--font-serif); font-style: italic; font-size: 1.45rem; line-height: 1.2; letter-spacing: -0.01em; }
.review blockquote p + p { color: var(--muted); font-size: .95rem; }
.stars { color: var(--blue); letter-spacing: 2px; font-size: .95rem; }

/* ---------- Appel final ---------- */
.cta { overflow: hidden; isolation: isolate; text-align: center; }
.cta::before { content: ""; position: absolute; inset: auto 0 -40% 0; height: 90%; z-index: -1; background: radial-gradient(closest-side, rgba(0, 91, 245, .5), transparent); }
.cta .display { font-size: clamp(2.6rem, 1.2rem + 5.5vw, 6rem); margin-bottom: 24px; }
.cta .lead { margin: 0 auto 36px; }
.cta .actions { justify-content: center; }

/* ---------- Pied de page ---------- */
.site-footer { padding-block: 64px 40px; font-size: .9rem; color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px; }
.footer-grid h2 { margin-bottom: 14px; font-size: .9rem; font-weight: 600; color: var(--white); }
.footer-grid li + li { margin-top: 8px; }
.footer-grid a { text-decoration: none; }
.footer-grid a:hover { color: var(--white); }
.footer-brand p { margin-top: 14px; max-width: 320px; }
.footer-bottom { margin-top: 48px; opacity: .7; }

/* ---------- Outils de maquette (à retirer du site final) ---------- */
.mockup-panel { position: fixed; left: 16px; bottom: 16px; z-index: 50; padding: 10px 14px; border-radius: 12px; background: rgba(5, 4, 22, .92); border: 1px dashed #f5b400; color: #fff; font-size: .8125rem; letter-spacing: 0; }
.mockup-panel summary { color: #f5b400; font-weight: 600; cursor: pointer; }
.mockup-panel details[open] summary { margin-bottom: 8px; }
.mockup-panel label { display: flex; align-items: center; gap: 8px; cursor: pointer; padding-block: 2px; }
.font-pick { flex-wrap: wrap; }
.font-pick select { font: inherit; padding: 4px 6px; border-radius: 6px; background: #111033; color: #fff; border: 1px solid rgba(255, 255, 255, .2); }
body.show-provisional [data-provisoire] { outline: 1px dashed #f5b400; outline-offset: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .need-row { grid-template-columns: 48px minmax(0, 1fr) auto 44px; }
  .need-desc { display: none; }
  .reviews { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .topbar { padding-left: 18px; }
  .topbar > .btn { display: none; }
  .nav-toggle { margin-left: auto; }
  .topnav { flex: none; }
  .topnav .has-menu { display: contents; }
  .topnav .topnav-trigger { display: none; }
  .topnav .mega { position: static; width: auto; display: flex; flex-direction: column; opacity: 1; visibility: visible; transform: none; padding: 0; border: 0 !important; background: none !important; box-shadow: none; }
  .topnav .mega span { display: none; }
  .nav-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(127, 140, 190, .18); cursor: pointer; }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; }
  .nav-toggle span::before { position: absolute; top: -5px; } .nav-toggle span::after { position: absolute; top: 5px; }
  .topnav { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px; border-radius: 22px; background: var(--night); border: 1px solid rgba(255, 255, 255, .1); color: var(--white); }
  .topnav.is-open { display: flex; }
  .topnav a { padding: 12px 16px; font-size: 1rem; }
  .topnav .mega a { padding: 12px 16px; }
  .topnav .mega b { font-family: var(--font-body); font-weight: 500; font-size: 1rem; }
  .topnav .topnav-cta { display: flex; align-items: center; gap: 10px; color: var(--sky); }

  .story-grid, .work-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }

  /* Démonstration : écran plein, texte en cartes qui glissent par-dessus */
  .demo { padding-block: 0; }
  .demo-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-inline: 0; }
  .demo-stage, .demo-text { grid-column: 1; grid-row: 1; }
  .demo-stage { z-index: 1; height: 100svh; align-items: flex-start; padding: 76px var(--gutter) 0; }
  .stage-inner { gap: 10px; }
  .stage-progress a { padding: 6px 10px; font-size: .72rem; }
  .device { --dev-h: min(44svh, 540px); width: 100%; border-radius: 14px; flex: none; }
  .device-bar { height: 26px; }
  .demo[data-scene="site"][data-step="4"] .device { width: calc(var(--dev-h) * .55); border-radius: 28px; }
  .stage-controls { min-height: 36px; gap: 8px 10px; }
  .ctrl button { padding: 6px 12px; }
  .ctrl input[type="range"] { width: 130px; }
  .demo-stage { padding-bottom: 14px; }
  .stage-inner { height: 100%; }
  .demo-text { z-index: 0; pointer-events: none; padding: 50svh var(--gutter) 30svh; }
  .step, .chapter .step:first-child { min-height: 62svh; }
  .step .step-card, .step.is-active .step-card { opacity: 0; }
  .stage-caption {
    display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 2px;
    padding: 18px 20px; border-radius: 22px; background: var(--card-strong); border: 1px solid var(--line);
    transition: opacity .35s ease, transform .35s var(--ease), background-color .8s ease, border-color .8s ease;
  }
  .stage-caption.is-out { opacity: 0; transform: translateY(10px); }
  .stage-caption .title { font-size: 1.6rem; }
  .stage-caption .subtitle { font-size: 1.25rem; }
  .stage-caption p { color: var(--muted); font-size: .95rem; line-height: 1.5; }
  .stage-caption .step-points li { font-size: .74rem; padding-block: 5px; }
  .stage-caption .step-points--offers { display: none; }
  .stage-caption .step-tag { font-size: .8rem; }
}
@media (max-width: 560px) {
  .device { --dev-h: min(36svh, 340px); }
  .ctrl--styles { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .ctrl > .ctrl-invite { width: 100%; margin: 0; text-align: center; font-size: .78rem; }
  .ctrl .style-pick { gap: 6px; padding: 4px 11px 4px 4px; }
  .style-pick i { width: 20px; height: 20px; }
  .stage-caption { padding: 14px 16px; gap: 6px; }
  .stage-caption .subtitle { font-size: 1.12rem; }
  .stage-caption .title { font-size: 1.4rem; }
  .stage-caption p { font-size: .88rem; line-height: 1.45; }
  .stage-progress span { padding: 5px 9px; font-size: .7rem; }
  .need-row { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 14px; padding-block: 22px; }
  .need-price { display: none; }
  .need-arrow { width: 36px; height: 36px; }
  .reviews { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .work-meta { flex-wrap: wrap; }
  .marquee-list { gap: 44px; padding-right: 44px; }
  .btn { white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero .display .line, .hero-lead, .hero .actions, .rays, .hero-grid, .ms-blob, .mu-scan, .style-pick i::after, .mo-typing i, .mu-status li::after, .marquee-track { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .device, .scene, .seo-panel, .term-panel, .mo-card, .mo-chat, .mu-status, .mu, .step-card, .demo, .demo-bg span { transition-duration: .01s !important; transition-delay: 0s !important; }
  .demo[data-scene="ops"][data-step="3"] .mo-typing { animation: none; }
  .demo[data-scene="ops"][data-step="3"] .mo-a { animation: none; opacity: 1; }
}

/* =====================================================================
   v4 : chapitres collants, barre d'adresse, wireframe propre, charte,
   écrans de l'application, espace de travail interne, audit par domaine,
   galerie de réalisations
   ===================================================================== */

/* ---------- Titres de chapitre collants ---------- */
.chapter + .chapter { margin-top: 10vh; }
.chapter-head {
  position: sticky; top: 84px; z-index: 3;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 0 26px; margin-bottom: 2vh;
  background: linear-gradient(180deg, var(--bg) 72%, color-mix(in srgb, var(--bg) 0%, transparent));
  transition: background-color .6s ease;
}
.chapter-head .title { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem); }
.figure { font-family: var(--font-title); font-weight: var(--title-weight); font-size: 2.4rem; line-height: 1; letter-spacing: var(--title-track); background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-mode="light"] .figure { --accent-grad: linear-gradient(100deg, #005bf5, #3d7bff); }

/* ---------- Barre d'adresse de l'écran ---------- */
.device-bar { position: relative; justify-content: center; height: 36px; padding: 0 12px; }
.device-dots { position: absolute; left: 14px; top: 50%; translate: 0 -50%; display: flex; gap: 6px; }
.device-url {
  flex: none !important; max-width: 58% !important; margin: 0 !important; height: 22px; padding: 0 14px !important;
  display: inline-flex !important; align-items: center; gap: 6px; border-radius: 8px !important;
}
.device-url svg { width: 10px; height: 10px; flex: none; opacity: .65; }
.device-url-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: opacity .25s ease; }

/* ---------- Site d'exemple : thèmes, apparition, wireframe, charte ---------- */
.scene--site { --r: .9em; --font-label: "Serif italique"; }
.scene--site[data-theme="sable"] { --r: .3em; --font-label: "Serif italique"; }
.scene--site[data-theme="menthe"] { --r: 1.4em; --font-label: "Sans serif"; }
.ms-card { border-radius: var(--r); transition: border-radius .6s var(--ease), background-color .6s ease, color .6s ease; }
.ms > * { transition: opacity .6s ease, transform .7s var(--ease); }
.ms > :nth-child(2) { transition-delay: .12s; }
.ms > :nth-child(3) { transition-delay: .24s; }
.demo[data-scene="site"][data-step="1"] .ms > * { opacity: 0; transform: translateY(1em); transition-delay: 0s; }

.ms-wire {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: 1.5em;
  padding: 1.6em 1.8em 1.2em; background: #eef0f6; color: #7a82a3;
  opacity: 0; pointer-events: none; transition: opacity .55s ease;
}
.demo[data-scene="site"][data-step="1"] .ms-wire { opacity: 1; }
.ms-wire i, .ms-wire span { display: block; }
.ms-wire em { position: absolute; left: .1em; top: -1.7em; font-style: normal; font-size: .6em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.w-nav, .w-text, .w-img, .w-cards > span { position: relative; border: 1px dashed #aab1c8; border-radius: .6em; }
.w-nav { display: flex; align-items: center; justify-content: space-between; height: 2.6em; padding: 0 .9em; }
.w-logo { width: 4.2em; height: 1em; border-radius: .3em; background: #c5cbdc; }
.w-links { display: flex !important; gap: .9em; }
.w-links i { width: 2.8em; height: .5em; border-radius: 1em; background: #d3d8e5; }
.w-btn { width: 4.6em; height: 1.5em; border-radius: 1em; background: #b7bfd3; }
.w-hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.4em; }
.w-text { display: flex; flex-direction: column; justify-content: center; gap: .65em; padding: 1em 1.1em; }
.w-kicker { width: 32%; height: .5em; border-radius: 1em; background: #b7bfd3; }
.w-h1 { width: 90%; height: 1.45em; border-radius: .35em; background: #c5cbdc; }
.w-h1--short { width: 62%; }
.w-p { width: 78%; height: .55em; border-radius: 1em; background: #d3d8e5; }
.w-cta { width: 7.5em; height: 1.8em; border-radius: 1em; background: #b7bfd3; margin-top: .3em; }
.w-img {
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), #c5cbdc calc(50% - 1px), #c5cbdc calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to top left, transparent calc(50% - 1px), #c5cbdc calc(50% - 1px), #c5cbdc calc(50% + 1px), transparent calc(50% + 1px)),
    #e3e6ef;
}
.w-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9em; }
.w-cards > span { display: flex !important; flex-direction: column; gap: .5em; padding: .9em; }
.w-cards i { height: .55em; border-radius: 1em; background: #d3d8e5; }
.w-cards i:first-of-type { width: 45%; height: .75em; background: #c5cbdc; }
@container screen (max-width: 440px) {
  .ms-wire { padding: 1.4em 1.1em 1em; gap: 1.3em; }
  .w-links { display: none !important; }
  .w-hero { grid-template-columns: 1fr; grid-template-rows: 6em auto; }
  .w-img { order: -1; }
  .w-cards { grid-template-columns: 1fr; }
  .w-cards > span:nth-child(n + 2) { display: none !important; }
}
@container screen (max-height: 340px) { .w-cards { display: none; } .w-hero { grid-template-rows: none; } }

.ms-guide {
  position: absolute; right: 1.2em; bottom: 1.2em; z-index: 3; width: 13.5em;
  display: flex; flex-direction: column; gap: .75em; padding: 1em 1.1em;
  border-radius: 1em; background: rgba(255, 255, 255, .97); color: #1a1d33;
  box-shadow: 0 1em 2.5em rgba(10, 20, 60, .28); font-size: 1.05em;
  opacity: 0; transform: translateY(1em) scale(.97); transition: opacity .5s ease, transform .6s var(--ease);
}
.demo[data-scene="site"][data-step="3"] .ms-guide { opacity: 1; transform: none; }
.ms-guide.is-pulse { animation: guidePulse .5s var(--ease); }
@keyframes guidePulse { 40% { transform: scale(1.04); } }
.g-title { font-size: .68em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8a90ad; }
.g-swatches { display: flex; gap: .4em; }
.g-swatches i { width: 1.6em; height: 1.6em; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: background-color .6s ease; }
.g-c1 { background: var(--sbg); } .g-c2 { background: var(--acc); } .g-c3 { background: var(--acc2); } .g-c4 { background: var(--sfg); }
.g-type { display: flex; align-items: baseline; gap: .6em; }
.g-aa { font-family: var(--title-font); font-style: italic; font-size: 2em; line-height: 1; }
.scene--site[data-theme="menthe"] .g-aa { font-style: normal; font-weight: 600; }
.g-font::after { content: var(--font-label); font-size: .78em; color: #4d5577; }
.g-row { display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.g-btn { padding: .45em .9em; border-radius: calc(var(--r) * 1.2); background: var(--acc); color: #fff; font-size: .8em; font-weight: 600; transition: background-color .6s ease, border-radius .6s var(--ease); }
.g-radius { width: 2em; height: 2em; border-top: 2px solid var(--acc); border-left: 2px solid var(--acc); border-radius: var(--r) 0 0 0; transition: border-radius .6s var(--ease), border-color .6s ease; }
@container screen (max-width: 440px) { .ms-guide { left: 1em; right: 1em; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; } .g-title { width: 100%; } }

/* ---------- Application d'exemple : écrans ---------- */
.ma-side { gap: .5em; padding: .9em 0; }
.ma-nav { width: 2.2em; height: 2.2em; display: grid; place-items: center; border: 0; border-radius: .6em; background: none; color: var(--amut); cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.ma-nav svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ma-nav:hover { color: var(--afg); }
.ma-nav.is-on { background: var(--app); color: #fff; }
.ma-logo { margin-bottom: .4em; }
.ma-screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: .9em; padding: 1em 1.3em;
  opacity: 0; visibility: hidden; transform: translateY(.6em);
  transition: opacity .35s ease, transform .5s var(--ease), visibility 0s linear .35s;
}
.scene--app[data-screen="dash"] .ma-screen--dash,
.scene--app[data-screen="clients"] .ma-screen--clients,
.scene--app[data-screen="settings"] .ma-screen--settings { opacity: 1; visibility: inherit; transform: none; transition: opacity .35s ease, transform .5s var(--ease), visibility 0s; }
.ma-search { padding: .4em .8em; min-width: 9em; border-radius: .6em; border: 1px solid var(--aline); color: var(--amut); font-size: .74em; }
.ma-add { padding: .45em .85em; border-radius: .6em; background: var(--app); color: #fff; font-size: .74em; font-weight: 600; white-space: nowrap; }
.ma-table { flex: 1; min-height: 0; overflow: hidden; border-radius: .8em; border: 1px solid var(--aline); background: var(--apanel); }
.ma-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: .6em; padding: .55em .9em; border-bottom: 1px solid var(--aline); font-size: .78em; }
.ma-row--head { color: var(--amut); font-size: .66em; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.ma-who { display: flex; align-items: center; gap: .55em; min-width: 0; white-space: nowrap; overflow: hidden; }
.ma-av { flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font-size: .72em; font-weight: 700; color: #fff; background: var(--app); }
.ma-pill { justify-self: start; padding: .2em .65em; border-radius: 99px; font-size: .88em; background: var(--aline); white-space: nowrap; }
.ma-pill--ok { background: rgba(20, 179, 134, .18); color: #14b386; }
.ma-pill--trial { background: rgba(245, 180, 0, .18); color: #c98f00; }
.ma-row.is-new { animation: rowIn .7s var(--ease) both; background: color-mix(in srgb, var(--app) 16%, transparent); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-.7em); } }
.ma-settings { display: flex; flex-direction: column; gap: .5em; }
.ma-settings li { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .75em 1em; border-radius: .8em; background: var(--apanel); border: 1px solid var(--aline); font-size: .85em; }
.switch { position: relative; flex: none; width: 2.7em; height: 1.55em; border-radius: 99px; border: 0; background: var(--aline); cursor: pointer; transition: background-color .3s ease; }
.switch::after { content: ""; position: absolute; top: .22em; left: .22em; width: 1.1em; height: 1.1em; border-radius: 50%; background: #fff; box-shadow: 0 .1em .3em rgba(0, 0, 0, .3); transition: transform .3s var(--ease); }
.switch[aria-checked="true"] { background: var(--app); }
.switch[aria-checked="true"]::after { transform: translateX(1.15em); }
.ma-notif { position: absolute; right: 1em; top: 1em; z-index: 4; padding: .6em .9em; border-radius: .7em; background: var(--afg); color: var(--abg); font-size: .74em; font-weight: 600; opacity: 0; transform: translateY(-.6em); transition: opacity .5s ease, transform .5s var(--ease); pointer-events: none; }
.ma-notif.is-shown { opacity: 1; transform: none; }

/* ---------- Outil interne : espace de travail ---------- */
.scene--ops { background: #f6f7fb; color: #1a1d33; }
.mo { position: relative; height: 100%; display: grid; grid-template-columns: 9.6em minmax(0, 1fr); }
.mo-side { display: flex; flex-direction: column; gap: .2em; padding: 1em .6em; background: #eceff7; border-right: 1px solid rgba(10, 10, 35, .06); }
.mo-brand { display: flex; align-items: center; gap: .5em; padding: .1em .5em .8em; font-size: .85em; font-weight: 700; }
.mo-brand i { width: 1.3em; height: 1.3em; border-radius: .4em; background: linear-gradient(135deg, var(--blue), #7aa2ff); }
.mo-nav { display: flex; align-items: center; gap: .5em; padding: .5em .55em; border: 0; border-radius: .55em; background: none; color: #4d5577; font-size: .76em; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .25s ease, color .25s ease, box-shadow .25s ease; }
.mo-nav:hover { background: rgba(0, 91, 245, .08); }
.mo-nav.is-on { background: #fff; color: #1a1d33; box-shadow: 0 .15em .5em rgba(20, 30, 80, .1); }
.mo-ico { width: 1.3em; text-align: center; color: var(--blue); }
.mo-main { position: relative; min-width: 0; }
.mo-view { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .8em; padding: 1.1em 1.2em; opacity: 0; visibility: hidden; transform: translateY(.5em); transition: opacity .35s ease, transform .5s var(--ease), visibility 0s linear .35s; }
.scene--ops[data-view="board"] .mo-view--board, .scene--ops[data-view="flow"] .mo-view--flow, .scene--ops[data-view="planning"] .mo-view--planning, .scene--ops[data-view="finances"] .mo-view--finances, .scene--ops[data-view="mails"] .mo-view--mails { opacity: 1; visibility: inherit; transform: none; transition: opacity .35s ease, transform .5s var(--ease), visibility 0s; }
.mo-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6em; }
.mo-cols span { padding: .4em .6em; border-radius: .5em; background: #eceef6; color: #5a6185; font-size: .72em; font-weight: 600; }
.mo-board { position: relative; flex: 1; }
.mo-card {
  --col: 0; position: absolute; left: 0; top: calc(var(--row) * 3.3em); width: calc((100% - 1.8em) / 4); height: 2.8em;
  display: flex; flex-direction: column; gap: .35em; padding: .5em .65em; text-align: left; cursor: pointer;
  border: 0; border-radius: .6em; background: #fff; color: #1a1d33; box-shadow: 0 .2em .8em rgba(20, 30, 80, .08);
  transform: translate(var(--sx), var(--sy)) rotate(var(--sr));
  transition: transform .9s var(--ease), box-shadow .4s ease;
}
.mo-card:hover { box-shadow: 0 0 0 .12em var(--blue), 0 .2em .8em rgba(20, 30, 80, .08); }
.mo-card b { font-size: .72em; }
.mo-card i { width: 70%; height: .35em; border-radius: 1em; background: #e3e6f0; }
.mo-card::before { content: attr(data-src); position: absolute; left: .2em; top: -1.5em; font-size: .6em; color: #8a90ad; transition: opacity .4s ease; }
.mo-card[data-col="3"] { box-shadow: inset .25em 0 0 #12a079, 0 .2em .8em rgba(20, 30, 80, .08); }
.demo[data-scene="ops"] .mo-card { transform: translateX(calc(var(--col) * (100% + .6em))); transition-delay: calc(.35s + var(--i) * .12s); }
.demo[data-scene="ops"]:not([data-step="1"]) .mo-card, .demo[data-scene="ops"] .mo-card.is-touched { transition-delay: 0s; }
.demo[data-scene="ops"] .mo-card::before { opacity: 0; transition-delay: calc(.35s + var(--i) * .12s); }
.mo-hint { position: absolute; left: 1.2em; bottom: 1em; font-size: .68em; color: #8a90ad; transition: opacity .4s ease; }
.mo-view-title { font-size: .68em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a90ad; }
.mo-flow { display: flex; flex-direction: column; gap: .55em; }
.mo-flow li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .8em; padding: .6em .9em .6em 2.5em; border-radius: .7em; background: #fff; box-shadow: 0 .2em .8em rgba(20, 30, 80, .06); font-size: .78em; opacity: .5; }
.mo-flow li::before { content: ""; position: absolute; left: .85em; top: 50%; width: .95em; height: .95em; margin-top: -.475em; border-radius: 50%; border: 2px solid #c9cfdf; background: #fff; }
.mo-flow li:not(:last-child)::after { content: ""; position: absolute; left: 1.3em; top: calc(50% + .55em); width: 2px; height: calc(100% - .5em); background: #d5d9e6; }
.mo-flow li span { color: #8a90ad; font-size: .85em; white-space: nowrap; }
.scene--ops[data-view="flow"] .mo-flow li { animation: flowRow .7s ease calc(.5s + var(--k) * .8s) both; }
.scene--ops[data-view="flow"] .mo-flow li::before { animation: flowDot .7s ease calc(.5s + var(--k) * .8s) both; }
/* Une seule passe : chaque étape s'allume à son tour et reste allumée */
@keyframes flowRow { from { opacity: .5; } to { opacity: 1; } }
@keyframes flowDot { from { background: #fff; border-color: #c9cfdf; } to { background: var(--blue); border-color: var(--blue); } }
.mo-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4em; font-size: .68em; font-weight: 700; color: #8a90ad; text-align: center; }
.mo-cal { position: relative; flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: .4em; }
.mo-cal::before { content: ""; position: absolute; inset: 0; background: linear-gradient(#e3e6f0 1px, transparent 1px) 0 0 / 100% 20%; pointer-events: none; }
.mo-ev { position: relative; grid-column: var(--c); grid-row: var(--r) / span var(--h); padding: .45em .55em; border-radius: .5em; background: rgba(0, 91, 245, .12); border-left: .22em solid var(--blue); font-size: .64em; font-weight: 600; line-height: 1.25; opacity: 0; transform: translateY(.6em) scale(.96); overflow: hidden; }
.mo-ev em { display: block; margin-top: .2em; font-style: normal; font-weight: 500; color: var(--blue); }
.mo-ev--auto { background: rgba(20, 179, 134, .13); border-left-color: #12a079; }
.mo-ev--auto em { color: #0b6b4f; }
.scene--ops[data-view="planning"] .mo-ev { animation: evIn .5s var(--ease) calc(.15s + var(--d) * .15s) forwards; }
@keyframes evIn { to { opacity: 1; transform: none; } }
.mo-fin-chart { flex: 1; min-height: 4em; display: flex; align-items: flex-end; gap: .6em; padding: .8em; border-radius: .8em; background: #fff; box-shadow: 0 .2em .8em rgba(20, 30, 80, .06); }
.mo-fin-chart i { flex: 1; height: calc(var(--v) * 100%); border-radius: .35em .35em .15em .15em; background: linear-gradient(180deg, #3d7bff, #005bf5); transform-origin: bottom; transform: scaleY(0); }
.scene--ops[data-view="finances"] .mo-fin-chart i { animation: barUp .7s var(--ease) forwards; }
.mo-fin-chart i:nth-child(2) { animation-delay: .08s !important; } .mo-fin-chart i:nth-child(3) { animation-delay: .16s !important; } .mo-fin-chart i:nth-child(4) { animation-delay: .24s !important; } .mo-fin-chart i:nth-child(5) { animation-delay: .32s !important; } .mo-fin-chart i:nth-child(6) { animation-delay: .4s !important; }
@keyframes barUp { to { transform: none; } }
.mo-invoices, .mo-inbox { display: flex; flex-direction: column; gap: .4em; }
.mo-invoices li { display: flex; align-items: center; justify-content: space-between; gap: .6em; padding: .55em .8em; border-radius: .6em; background: #fff; font-size: .74em; }
.mo-invoices b, .mo-inbox em { padding: .15em .6em; border-radius: 99px; font-size: .88em; font-style: normal; font-weight: 600; white-space: nowrap; }
.ok, .t-fact { background: rgba(20, 179, 134, .15); color: #0b6b4f; }
.wait, .t-devis { background: rgba(0, 91, 245, .1); color: var(--blue); }
.late, .t-supp { background: rgba(245, 180, 0, .2); color: #8a4a00; }
.t-plan { background: rgba(139, 107, 255, .15); color: #5b3fd0; }
.mo-inbox li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; align-items: center; gap: .6em; padding: .6em .8em; border-radius: .6em; background: #fff; font-size: .72em; }
.mo-inbox span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #4d5577; }
.mo-inbox em { opacity: 0; transform: scale(.8); }
.scene--ops[data-view="mails"] .mo-inbox em { animation: tagIn .4s var(--ease) forwards; }
.mo-inbox li:nth-child(1) em { animation-delay: .3s !important; } .mo-inbox li:nth-child(2) em { animation-delay: .55s !important; } .mo-inbox li:nth-child(3) em { animation-delay: .8s !important; } .mo-inbox li:nth-child(4) em { animation-delay: 1.05s !important; }
@keyframes tagIn { to { opacity: 1; transform: none; } }
.mo-draft { margin-top: auto; padding: .6em .8em; border-radius: .6em; border: 1px dashed var(--blue); background: rgba(0, 91, 245, .05); color: var(--blue); font-size: .7em; }
.mo-toast { position: absolute; right: 1.2em; bottom: 1.2em; z-index: 4; padding: .6em .9em; border-radius: .6em; background: #1a1d33; color: #fff; font-size: .74em; opacity: 0; transform: translateY(.4em); transition: opacity .5s ease, transform .5s var(--ease); pointer-events: none; }
.mo-toast.is-shown { opacity: 1; transform: none; }
.mo-chat { position: absolute; right: 1.2em; bottom: 1.2em; z-index: 5; width: 52%; display: grid; grid-template-areas: "q" "a"; gap: .5em; padding: .9em; border-radius: .9em; background: #fff; box-shadow: 0 1em 2.5em rgba(20, 30, 80, .2); opacity: 0; transform: translateY(115%); transition: transform .8s var(--ease), opacity .5s ease; }
.mo-q { grid-area: q; justify-self: end; max-width: 90%; padding: .5em .8em; border-radius: .8em .8em .2em .8em; background: var(--blue); color: #fff; font-size: .76em; }
.mo-typing, .mo-a { grid-area: a; justify-self: start; }
.mo-typing { display: flex; gap: .25em; padding: .7em .8em; border-radius: .8em; background: #eceef6; opacity: 0; }
.mo-typing i { width: .4em; height: .4em; border-radius: 50%; background: #8a90ad; animation: dot 1s ease-in-out infinite; }
.mo-typing i:nth-child(2) { animation-delay: .15s; } .mo-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-.25em); } }
.mo-a { padding: .5em .8em; border-radius: .8em .8em .8em .2em; background: #eceef6; font-size: .76em; opacity: 0; }
.demo[data-scene="ops"][data-step="4"] .mo-chat { opacity: 1; transform: none; }
.demo[data-scene="ops"][data-step="4"] .mo-hint { opacity: 0; }
.demo[data-scene="ops"][data-step="4"] .mo-typing { animation: typing 1.4s ease .7s both; }
.demo[data-scene="ops"][data-step="4"] .mo-a { animation: answer .5s ease 2.1s both; }
@keyframes typing { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes answer { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } }
.demo[data-scene="ops"][data-step="4"] .mo-card:is(:nth-child(2), :nth-child(4)) { box-shadow: 0 0 0 .18em #f5b400, 0 .2em .8em rgba(20, 30, 80, .08); transition-delay: 0s, 2.3s; }
@container screen (max-width: 440px) {
  .mo { grid-template-columns: 2.8em minmax(0, 1fr); }
  .mo-side { padding: .8em .35em; align-items: center; }
  .mo-brand { font-size: 0; padding: 0 0 .6em; }
  .mo-brand i { width: 1.4rem; height: 1.4rem; }
  .mo-nav { font-size: 0; justify-content: center; padding: .45em; }
  .mo-nav .mo-ico { font-size: clamp(10px, 3.6cqw, 14px); width: auto; }
  .mo-cols span { font-size: .6em; padding: .4em .35em; }
  .mo-card { padding: .45em .4em; } .mo-card b { font-size: .6em; }
  .mo-chat { left: 1em; width: auto; }
  .mo-flow li span { display: none; }
}

/* ---------- Récit ---------- */
.story-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(32px, 5vw, 72px); margin-bottom: clamp(40px, 5vw, 64px); }
.story-intro .section-intro { margin-bottom: 0; }
.story-visual { margin: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(10, 30, 90, .5); transform: rotate(-1.5deg); }
.story-visual img { width: 100%; height: auto; }

/* ---------- Réalisations : galerie défilante ---------- */
.works { overflow: hidden; }
.works-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.works-nav { display: flex; gap: 10px; margin-bottom: clamp(40px, 5vw, 64px); }
.round-btn { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--card-strong); color: var(--fg); cursor: pointer; transition: background-color .3s ease, border-color .3s ease; }
.round-btn svg { width: 18px; height: 18px; }
.round-btn:hover { border-color: var(--blue); background: rgba(0, 91, 245, .18); }
.works-track { position: relative; z-index: 1; display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); padding: 4px max(var(--gutter), calc((100vw - var(--container)) / 2)) 48px; scrollbar-width: none; }
.works-track::-webkit-scrollbar { display: none; }
.works-track .work { flex: 0 0 clamp(280px, 36vw, 500px); scroll-snap-align: start; }
.works-track .work :is(a, .work-card) { display: flex; flex-direction: column; gap: 18px; text-decoration: none; }
.works-track .work-media { aspect-ratio: 960 / 640; border-radius: 22px; border: 0; overflow: hidden; background: #0a0928; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.works-track .work-media img { width: 100%; height: auto; transform-origin: top center; transition: transform .8s var(--ease); }
.works-track .work a:hover .work-media img { transform: scale(1.03); }
.work-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.work-name { font-family: var(--font-title); font-weight: var(--title-weight); font-size: 1.2rem; letter-spacing: -0.01em; }
.work-date { font-size: .85rem; color: var(--muted); }

/* ---------- Écran étroit : légende avec le chapitre ---------- */
.cap-chapter { font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--blue-bright); }
.demo[data-mode="light"] .cap-chapter { color: var(--blue); }
@media (max-width: 900px) {
  .chapter-head { position: static; height: 0; padding: 0; margin: 0; overflow: hidden; opacity: 0; }
  .story-intro { grid-template-columns: 1fr; }
  .story-visual { transform: none; }
  .works-head { align-items: flex-start; flex-direction: column; gap: 0; }
  .works-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scene--ops .mo-flow li, .scene--ops .mo-flow li::before, .mo-ev, .mo-fin-chart i, .mo-inbox em, .ma-row.is-new { animation: none !important; opacity: 1 !important; transform: none !important; }
  .ms > *, .ms-wire, .ms-guide, .ma-screen, .mo-view { transition-duration: .01s !important; transition-delay: 0s !important; }
}


/* =====================================================================
   v5 : en-tête façon barre d'application, visuels du récit et de l'appel
   ===================================================================== */

/* ---------- En-tête : logo dans son cadre, barre d'application à droite ---------- */
.topbar {
  top: var(--panel-gap); left: var(--panel-gap); right: var(--panel-gap); width: auto; transform: none;
  display: flex; align-items: stretch; justify-content: space-between; gap: 12px;
  padding: 0; border: 0; border-radius: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar[data-mode="light"] { background: none; }
.brand-tile {
  flex: none; display: grid; place-items: center; width: 96px; height: 60px; border-radius: 14px;
  background: radial-gradient(120% 120% at 100% 0%, rgba(0, 79, 247, .35), transparent 60%), var(--night);
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .7);
}
.brand-tile img { width: 64px; height: auto; }
.appbar-main {
  position: static; display: flex; align-items: center; gap: 4px; height: 60px; padding: 0 8px;
  border-radius: 14px; color: var(--white);
  background: rgba(8, 7, 32, .74); border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .6);
  transition: background-color .5s ease, border-color .5s ease, color .5s ease, box-shadow .5s ease;
}
.topbar[data-mode="light"] .appbar-main { background: rgba(255, 255, 255, .88); border-color: rgba(10, 10, 35, .08); color: var(--ink); box-shadow: 0 14px 34px -20px rgba(10, 30, 90, .4); }
.topnav { flex: none; gap: 2px; }
.topnav > a, .topnav-trigger { gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: .88rem; }
.nav-ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .72; }
.topnav > a:hover .nav-ico, .topnav-trigger:hover .nav-ico { opacity: 1; color: var(--blue-bright); }
.appbar-cta { margin-left: 6px; min-height: 44px; border-radius: 10px; gap: 8px; }
.appbar-cta .nav-ico { opacity: 1; }
.mega { top: calc(100% + 14px); left: 0; border-radius: 16px; }
.chapter-head { top: calc(var(--panel-gap) + 72px); }

/* ---------- Récit : photo et visuel flottant ---------- */
.story-visual { position: relative; transform: none; overflow: visible; box-shadow: none; border-radius: 0; }
.story-photo { width: 100%; height: auto; border-radius: 24px; box-shadow: 0 40px 80px -40px rgba(10, 30, 90, .55); }
.story-visual .story-float { position: absolute; left: -9%; bottom: -12%; width: 52%; height: auto; border-radius: 16px; box-shadow: 0 30px 60px -24px rgba(10, 20, 60, .55); transform: rotate(-3deg); }

/* ---------- Appel final : visuel visio ---------- */
.cta { text-align: left; }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.cta .display { font-size: clamp(2.4rem, 1rem + 4.2vw, 4.8rem); }
.cta .lead { margin: 0 0 32px; }
.cta .actions { justify-content: flex-start; }
.cta-visual { margin: 0; }
.cta-visual img { width: 100%; height: auto; border-radius: 22px; box-shadow: 0 50px 100px -40px rgba(0, 91, 245, .55); }

@media (max-width: 900px) {
  .brand-tile { width: 80px; height: 54px; border-radius: 12px; }
  .brand-tile img { width: 56px; }
  .appbar-main { height: 54px; padding: 0 6px; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topbar:not([data-mode="light"]) .appbar-main { background: rgba(8, 7, 32, .92); }
  .topnav { width: auto; max-height: calc(100svh - 90px); overflow-y: auto; }
  .topnav { align-items: stretch; }
  .topnav > a, .topnav .mega a { white-space: nowrap; justify-content: flex-start; text-align: left; }
  .topnav .mega { align-items: stretch; }
  .appbar-cta { display: none; }
  .nav-toggle { margin-left: 0; border-radius: 10px; }
  .topnav { top: calc(100% + 8px); left: 0; right: 0; border-radius: 16px; }
  .topnav > a, .topnav .mega a { gap: 10px; }
  .chapter-head { top: auto; }
  .cta-grid { grid-template-columns: 1fr; }
  .story-visual .story-float { left: auto; right: -2%; bottom: -10%; width: 46%; }
  .story-visual { margin-bottom: 24px; }
}
/* Petits écrans : la carte des outils, plus haute que la photo, recouvrait le texte → elle passe dans le flux, sous la photo */
@media (max-width: 560px) {
  .story-visual .story-float { position: relative; left: auto; right: auto; bottom: auto; width: 88%; margin: -32px 2% 0 auto; }
}

/* =====================================================================
   v6 : logo libre, menu calé à gauche, deux actions à droite,
   fondu flouté en haut de page, étapes passées masquées
   ===================================================================== */

/* ---------- Fondu flouté sous l'en-tête ---------- */
.top-fade { position: fixed; top: 0; left: 0; right: 0; height: 132px; z-index: 39; pointer-events: none; }
.top-fade span { position: absolute; inset: 0; }
.top-fade span:nth-child(1) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); }
.top-fade span:nth-child(2) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(#000 25%, transparent 72%); mask-image: linear-gradient(#000 25%, transparent 72%); }
.top-fade span:nth-child(3) { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); -webkit-mask-image: linear-gradient(#000, transparent 48%); mask-image: linear-gradient(#000, transparent 48%); }
.top-fade::before, .top-fade::after { content: ""; position: absolute; inset: 0; transition: opacity .5s ease; }
.top-fade::before { background: linear-gradient(rgba(5, 4, 22, .92), rgba(5, 4, 22, .55) 45%, rgba(5, 4, 22, 0)); }
.top-fade::after { opacity: 0; background: linear-gradient(rgba(244, 246, 252, .95), rgba(244, 246, 252, .6) 45%, rgba(244, 246, 252, 0)); }
.top-fade[data-mode="light"]::before { opacity: 0; }
.top-fade[data-mode="light"]::after { opacity: 1; }

/* ---------- En-tête ---------- */
.topbar {
  top: calc(var(--panel-gap) * 2); left: calc(var(--panel-gap) * 2); right: calc(var(--panel-gap) * 2);
  align-items: center; gap: clamp(14px, 2vw, 28px);
}
.brand { flex: none; display: block; color: var(--white); transition: color .5s ease; }
.brand-logo { display: block; width: clamp(92px, 8vw, 118px); height: auto; }
.topbar[data-mode="light"] .brand { color: var(--night); }
.appbar-main { margin-right: auto; height: 50px; padding: 0 6px; border-radius: 12px; }
.topnav > a, .topnav-trigger { padding: 9px 12px; border-radius: 8px; }
.topnav > a[aria-current="page"] { background: rgba(127, 140, 190, .16); }
.appbar-actions { display: flex; align-items: center; gap: 8px; }
.appbar-actions .btn { min-height: 50px; border-radius: 12px; gap: 8px; padding: 0 18px; }
.appbar-actions .nav-ico { opacity: 1; }
.btn--bar {
  background: rgba(8, 7, 32, .74); border-color: rgba(255, 255, 255, .12); color: var(--white); box-shadow: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn--bar:hover { background: rgba(20, 18, 60, .85); box-shadow: none; }
.topbar[data-mode="light"] .btn--bar { background: rgba(255, 255, 255, .88); border-color: rgba(10, 10, 35, .1); color: var(--ink); }
.chapter-head { top: calc(var(--panel-gap) * 2 + 70px); }

/* ---------- Démonstration : plus de masque derrière le titre, étapes passées masquées ---------- */
.chapter-head { background: none !important; }
.step.is-past .step-card { opacity: 0; }

/* ---------- Récit : carte des outils ---------- */
.stack-card {
  display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px !important;
  border: 1px solid transparent; background: var(--card-fill) padding-box, var(--card-edge) border-box;
  box-shadow: 0 30px 60px -24px rgba(10, 20, 60, .5) !important;
}
.stack-title { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.stack-card ul { display: flex; flex-wrap: wrap; gap: 6px; }
.stack-card li { padding: 6px 11px; border-radius: 99px; background: var(--paper); border: 1px solid var(--line); font-size: .78rem; font-weight: 600; letter-spacing: 0; }

@media (max-width: 1100px) {
  .appbar-actions .btn--bar { display: none; }
  .topnav > a, .topnav-trigger { padding: 9px 9px; }
}
@media (max-width: 900px) {
  .topbar { top: var(--panel-gap); left: var(--panel-gap); right: var(--panel-gap); }
  .appbar-main { margin-left: auto; margin-right: 0; height: 48px; }
  .appbar-actions { display: none; }
  .brand-logo { width: 86px; }
  .top-fade { height: 96px; }
  .top-fade span:nth-child(2), .top-fade span:nth-child(3) { display: none; }
  .top-fade span:nth-child(1) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .topnav > a[aria-current="page"] { background: none; }
}

/* ---------- v7 : en-tête resserré, menu un peu plus lisible ---------- */
.topbar {
  top: calc(var(--panel-gap) * 1.5);
  left: 50%; right: auto; transform: translateX(-50%);
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
}
.brand, .appbar-main, .btn--bar { transition-duration: .2s; }
.topnav > a, .topnav-trigger { font-size: .97rem; }
.appbar-actions .btn { font-size: .97rem; }
.mega b { font-size: 1rem; } .mega span { font-size: .85rem; }
.chapter-head { top: calc(var(--panel-gap) * 1.5 + 70px); }
@media (max-width: 900px) {
  .topbar { top: var(--panel-gap); left: var(--panel-gap); right: var(--panel-gap); transform: none; width: auto; }
}

/* =====================================================================
   v8 : le contenu (et lui seul) se floute en approchant du haut,
   logo bleu électrique sur fond clair, chapitres en cadres
   ===================================================================== */

/* ---------- Fondu du contenu sous l'en-tête : les fonds restent nets ---------- */
@supports (animation-timeline: view()) {
  .hero-inner, .logos, .section-intro > *, .need-row, .story-visual, .story-item, .works-head, .works-track,
  .review, .cta-text > *, .cta-visual, .footer-grid > *, .footer-bottom {
    animation: fade-top linear none;
    animation-timeline: view();
    animation-range: exit -130px exit 35%;
  }
  @keyframes fade-top {
    from { opacity: 1; filter: blur(0); }
    to { opacity: 0; filter: blur(7px); }
  }
}

/* ---------- Logo : blanc sur fond sombre, bleu électrique sur fond clair ---------- */
.topbar[data-mode="light"] .brand { color: var(--blue); }

/* ---------- Démonstration : chaque chapitre est un cadre, son en-tête reste accroché ---------- */
@media (min-width: 901px) {
  .demo .chapter {
    --chap-bg: #ffffff;
    position: relative; padding: 0 30px 30px; border-radius: 24px;
    border: 1px solid transparent;
    background: linear-gradient(var(--chap-bg), var(--chap-bg)) padding-box, var(--card-edge) border-box;
    box-shadow: var(--card-shadow);
  }
  .demo[data-mode="dark"] .chapter { --chap-bg: #0b0a2a; }
  .demo .chapter + .chapter { margin-top: 14vh; }
  .demo .chapter-head {
    top: calc(var(--panel-gap) * 1.5 + 74px);
    margin: 0 -30px; padding: 26px 30px 16px; border-radius: 23px 23px 0 0;
    background: var(--chap-bg) !important;
  }
  .demo .chapter-head::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 36px; pointer-events: none;
    background: linear-gradient(var(--chap-bg), color-mix(in srgb, var(--chap-bg) 0%, transparent));
  }
  .demo .chapter-head .title { font-size: clamp(1.7rem, 1.1rem + 1.8vw, 2.6rem); }
  .demo .step { min-height: 40vh; }
  .demo .chapter .step:first-child { min-height: 44vh; }
  .demo .step-card { max-width: none; }
}
@supports (animation-timeline: view()) {
  @media (min-width: 901px) {
    .demo .chapter {
      animation: fade-card linear none;
      animation-timeline: view();
      animation-range: exit calc(100% - 300px) exit calc(100% - 90px);
    }
    @keyframes fade-card { from { opacity: 1; } to { opacity: 0; } }
  }
}

/* =====================================================================
   v9 : mosaïque de carrés en dégradé (héros et coins de sections)
   ===================================================================== */
.hero-grid { display: none; }
.hero-mosaic { position: absolute; inset: 0; width: 100%; height: 100%; transform: translate3d(calc(var(--px) * 10px), calc(var(--py) * 6px), 0); transition: transform .8s var(--ease); }
/* Reflet lent qui ne s'allume que sur les carrés (le masque est la mosaïque elle-même) */
.mosaic-shine { position: absolute; inset: 0; overflow: hidden; -webkit-mask: var(--mosaic-hero-mask) center / 100% 100% no-repeat; mask: var(--mosaic-hero-mask) center / 100% 100% no-repeat; }
.mosaic-shine span { position: absolute; top: -20%; left: -40%; width: 45%; height: 140%; background: radial-gradient(closest-side, rgba(150, 185, 255, .55), rgba(150, 185, 255, 0)); animation: shine 16s ease-in-out infinite; will-change: transform; }
@keyframes shine { 0% { transform: translateX(0); } 50% { transform: translateX(260%); } 100% { transform: translateX(0); } }
.rays { opacity: .65; }

/* Touches de mosaïque dans un coin des sections */
.mosaic::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: min(560px, 70%); height: 400px;
  background: var(--mosaic-light) top right / 100% 100% no-repeat;
}
.mosaic--dark::after { background-image: var(--mosaic-dark); }
.mosaic--tr::after { top: 0; right: 0; border-top-right-radius: inherit; }
.mosaic--bl::after { bottom: 0; left: 0; transform: scale(-1, -1); border-top-right-radius: inherit; }
.cta.mosaic::after { z-index: -1; }
/* Sections claires : plus de trame de points, des lueurs seulement (la mosaïque prend le relais) */
.panel--light::before { background: radial-gradient(42% 55% at 100% 0%, rgba(0, 91, 245, .12), transparent 70%), radial-gradient(38% 50% at 0% 100%, rgba(61, 123, 255, .1), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .mosaic-shine span { animation: none; opacity: 0; } }
/* En-tête aligné sur le contenu aussi sur tablette et mobile */
@media (max-width: 900px) {
  .topbar { top: calc(var(--panel-gap) * 2); left: calc(var(--gutter) + var(--panel-gap)); right: calc(var(--gutter) + var(--panel-gap)); }
}
/* Bouton menu mobile : un seul cadre, barres asymétriques */
@media (max-width: 900px) {
  .appbar-main { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0; height: auto; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .topbar .nav-toggle {
    width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; cursor: pointer;
    background: rgba(8, 7, 32, .8); border: 1px solid rgba(255, 255, 255, .12); color: var(--white);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
  }
  .topbar[data-mode="light"] .nav-toggle { background: rgba(255, 255, 255, .9); border-color: rgba(10, 10, 35, .1); color: var(--ink); }
  .topbar .nav-toggle span {
    position: relative; display: block; width: 20px; height: 2px;
    background: linear-gradient(currentColor, currentColor) right center / 12px 2px no-repeat;
    border-radius: 2px; transition: background-size .25s ease;
  }
  .topbar .nav-toggle span::before, .topbar .nav-toggle span::after {
    content: ""; position: absolute; left: 0; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .3s var(--ease), top .3s var(--ease), width .3s var(--ease);
  }
  .topbar .nav-toggle span::before { top: -6px; width: 20px; }
  .topbar .nav-toggle span::after { top: 6px; width: 15px; }
  .topbar .nav-toggle[aria-expanded="true"] span { background-size: 0 2px; }
  .topbar .nav-toggle[aria-expanded="true"] span::before { top: 0; width: 20px; transform: rotate(45deg); }
  .topbar .nav-toggle[aria-expanded="true"] span::after { top: 0; width: 20px; transform: rotate(-45deg); }
}

/* ---------- v10 : mosaïque plate et discrète, carrés qui respirent ---------- */
.mosaic-shine { display: none; }
.mosaic-glow { position: absolute; inset: 0; pointer-events: none; transform: translate3d(calc(var(--px) * 10px), calc(var(--py) * 6px), 0); transition: transform .8s var(--ease); }
.mosaic-glow i {
  position: absolute; border-radius: 4px; opacity: 0;
  background: linear-gradient(135deg, rgba(90, 145, 255, .32), rgba(61, 123, 255, .12));
  animation: cell-breathe var(--dur) ease-in-out var(--delay) infinite;
}
@keyframes cell-breathe { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mosaic-glow i { animation: none; } }

/* ---------- Bouton menu : barres alignées à droite ---------- */
@media (max-width: 900px) {
  .topbar .nav-toggle span { background-position: right center; background-size: 13px 2px; }
  .topbar .nav-toggle span::before, .topbar .nav-toggle span::after { left: auto; right: 0; }
  .topbar .nav-toggle span::before { width: 20px; }
  .topbar .nav-toggle span::after { width: 16px; }
  .topbar .nav-toggle[aria-expanded="true"] span::before, .topbar .nav-toggle[aria-expanded="true"] span::after { width: 20px; }
}

/* =====================================================================
   v11 : allègement, fondu réparé, chapitres en cadres fixes
   ===================================================================== */

/* ---------- Allègement ---------- */
body::after { content: none; }                                   /* plus de grain plein écran */
.rays { animation: none; opacity: .6; }
.scene { will-change: auto; }
.appbar-main, .btn--bar, .topbar .nav-toggle { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.topbar:not([data-mode="light"]) .appbar-main, .topbar:not([data-mode="light"]) .btn--bar { background: rgba(10, 9, 34, .94); }
.topbar[data-mode="light"] .appbar-main, .topbar[data-mode="light"] .btn--bar { background: rgba(255, 255, 255, .97); }
.topbar:not([data-mode="light"]) .nav-toggle { background: rgba(10, 9, 34, .94) !important; }
/* Animations en pause hors de l'écran */
.hero.is-offscreen *, .demo.is-idle * { animation-play-state: paused !important; }

/* ---------- Fondu du contenu sous l'en-tête ----------
   overflow: hidden faisait de chaque section une zone de défilement à part,
   ce qui empêchait le fondu de suivre le scroll : on découpe avec clip à la place. */
.panel--light, .works, .hero, .cta { overflow: clip; }
@supports (animation-timeline: view()) {
  @keyframes fade-top { from { opacity: 1; } to { opacity: 0; } }
  .hero-inner, .logos, .section-intro > *, .need-row, .story-visual, .story-item, .works-head, .works-track,
  .review, .cta-text > *, .cta-visual, .footer-grid > *, .footer-bottom {
    animation-timeline: view(block);
    animation-range: exit -150px exit 30%;
  }
}

/* ---------- Démonstration : cadre fixé sous l'en-tête, étapes qui défilent dedans ---------- */
@media (min-width: 901px) {
  .demo .chapter {
    --box-top: calc(var(--panel-gap) * 1.5 + 76px);
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; animation: none !important;
  }
  .demo .chapter + .chapter { margin-top: 0; }
  .chapter-box {
    position: sticky; top: var(--box-top); height: calc(100vh - var(--box-top) - 36px);
    display: flex; flex-direction: column; overflow: hidden;
    border-radius: 24px; border: 1px solid transparent;
    background: linear-gradient(var(--chap-bg), var(--chap-bg)) padding-box, var(--card-edge) border-box;
    box-shadow: var(--card-shadow);
  }
  .demo .chapter-head { position: relative; top: auto; flex: none; margin: 0; padding: 26px 30px 12px; border-radius: 0; z-index: 2; }
  .chapter-scroll { flex: 1; padding: 6px 30px 30px; will-change: transform; }
  .demo .step { min-height: 34vh; }
  .demo .chapter .step:first-child { min-height: 30vh; }
  .demo .step-card { max-width: 520px; }
  .demo-text { padding-bottom: 6vh; }
}
@media (max-width: 900px) {
  .chapter-box, .chapter-scroll { display: contents; }
}

/* =====================================================================
   v12 : mosaïque régulière, fondu sans réapparition, bord des cadres
   ===================================================================== */
.mosaic-glow i { animation-duration: 8s; animation-timing-function: ease-in-out; background: linear-gradient(135deg, rgba(90, 145, 255, .22), rgba(61, 123, 255, .08)); }

/* Un bloc effacé sous l'en-tête le reste jusqu'à ce qu'il redescende */
@supports (animation-timeline: view()) {
  .hero-inner, .logos, .section-intro > *, .need-row, .story-visual, .story-item, .works-head, .works-track,
  .review, .cta-text > *, .cta-visual, .footer-grid > *, .footer-bottom { animation-fill-mode: forwards; }
}

@media (min-width: 901px) {
  /* Chaque cadre garde la couleur de son chapitre, quel que soit le fond du moment */
  .demo .chapter[data-mode="light"] { --chap-bg: #ffffff; }
  .demo .chapter[data-mode="dark"] { --chap-bg: #0b0a2a; }
  .demo .chapter { color: var(--fg); }
  /* Bord haut rogné en douceur quand le cadre remonte vers l'en-tête */
  .chapter-box {
    -webkit-mask-image: linear-gradient(to bottom, transparent var(--edge-cut, 0px), #000 calc(var(--edge-cut, 0px) + 70px));
    mask-image: linear-gradient(to bottom, transparent var(--edge-cut, 0px), #000 calc(var(--edge-cut, 0px) + 70px));
  }
  .chapter-box:not([style*="--edge-cut"]) { -webkit-mask-image: none; mask-image: none; }
  /* Étapes : pleinement lisibles, elles ne disparaissent qu'en haut, sous le titre du chapitre */
  .demo .step .step-card, .demo .step.is-past .step-card { opacity: 1; }
  .demo .chapter-head::after { height: 64px; }
}

/* =====================================================================
   v13 : mosaïque vivante, héros qui s'efface ligne par ligne,
   transitions entre sections sans bord fantôme
   ===================================================================== */

/* ---------- Mosaïque : chaque carré a sa propre intensité et son propre rythme ---------- */
.mosaic-glow i {
  background: linear-gradient(135deg, rgba(120, 165, 255, .6), rgba(61, 123, 255, .22));
  animation: cell-glow var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes cell-glow { 0%, 100% { opacity: 0; } 45% { opacity: var(--peak, .5); } }
@media (prefers-reduced-motion: reduce) { .mosaic-glow i { animation: none; } }

/* ---------- Héros : plus de calque sombre en bas (il laissait deviner une ligne).
   Les éléments décoratifs s'estompent eux-mêmes vers le bas. ---------- */
.hero::after { content: none; }
.hero-bg { -webkit-mask-image: linear-gradient(#000 50%, rgba(0, 0, 0, .55) 75%, transparent 100%); mask-image: linear-gradient(#000 50%, rgba(0, 0, 0, .55) 75%, transparent 100%); }

/* ---------- Héros : effacement élément par élément en approchant de l'en-tête ---------- */
@supports (animation-timeline: view()) {
  .hero-inner { animation: none !important; }
  .hero .eyebrow { animation: rise .9s var(--ease) .05s both, fade-top linear forwards; }
  .hero .display .line:nth-child(1) { animation: rise 1.1s var(--ease) .12s both, fade-top linear forwards; }
  .hero .display .line:nth-child(2) { animation: rise 1.1s var(--ease) .24s both, fade-top linear forwards; }
  .hero-lead { animation: rise 1s var(--ease) .42s both, fade-top linear forwards; }
  .hero .actions { animation: rise 1s var(--ease) .55s both, fade-top linear forwards; }
  .hero .eyebrow, .hero .display .line:nth-child(n), .hero-lead, .hero .actions {
    animation-timeline: auto, view(block);
    animation-range: normal, exit -150px exit 40%;
  }
}

/* ---------- Sections sombres : lueurs et mosaïques s'estompent avant les bords,
   pour fondre avec le fond voisin au lieu de laisser une ligne ---------- */
.panel[data-mode="dark"]:not(.hero):not(.demo)::before {
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
.mosaic--dark::after {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%), linear-gradient(to left, transparent, #000 25%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to bottom, transparent, #000 30%), linear-gradient(to left, transparent, #000 25%);
}
/* Appel final : la lueur reste au centre et ne touche plus le bas, pour se fondre dans le pied de page */
.cta::before { inset: 8% 0 auto 0; height: 84%; background: radial-gradient(50% 50% at 50% 55%, rgba(0, 91, 245, .38), transparent); }
.cta { padding-bottom: clamp(100px, 11vw, 160px); }
.cta.mosaic--bl::after { bottom: auto; top: 0; left: auto; right: 0; transform: none; }

/* ---------- v14 : plus d'effet à la souris, titre du héros qui s'efface vraiment ---------- */
.rays, .hero-mosaic, .mosaic-glow { transform: none !important; transition: none !important; will-change: auto; }
.hero-bg { -webkit-mask-image: linear-gradient(#000 45%, rgba(0, 0, 0, .8) 60%, rgba(0, 0, 0, .45) 78%, rgba(0, 0, 0, .15) 90%, transparent); mask-image: linear-gradient(#000 45%, rgba(0, 0, 0, .8) 60%, rgba(0, 0, 0, .45) 78%, rgba(0, 0, 0, .15) 90%, transparent); }
/* Le dégradé du titre était peint par le bloc entier : rendre une ligne transparente n'avait aucun effet.
   Chaque ligne porte maintenant son propre dégradé. */
.hero .display { background: none !important; color: var(--white); -webkit-background-clip: border-box; background-clip: border-box; }
.hero .display .line { background: linear-gradient(180deg, #fff 58%, rgba(255, 255, 255, .7)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .display .line .accent { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; }

/* ---------- v15 : fond du héros peint dans une seule image (plus aucune couture entre calques) ---------- */
.hero-bg { background: #050416 center / 100% 100% no-repeat; -webkit-mask-image: none !important; mask-image: none !important; }
.hero .rays, .hero .aurora, .hero-mosaic { display: none !important; }

/* ---------- v16 : la ligne du héros venait du groupe de boutons ----------
   Il prenait toute la largeur, son apparition utilisait un flou et le bouton porte une lueur :
   le navigateur peignait tout ce rectangle à part, et son bord bas se voyait.
   Apparition sans flou, et groupe réduit à la largeur de ses boutons. */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
.hero .actions { width: fit-content; margin-inline: auto; }

/* ---------- v17 : vues internes des démos ----------
   Les écrans de l'application et les vues de la démo Interne se déclaraient « visibles »
   eux-mêmes : ils passaient outre le masquage de leur démo, et la vue tableau de la démo
   Interne, invisible, captait les clics posés sur l'application. Ils héritent désormais
   de leur démo (visibility: inherit, lignes des écrans et des vues). */

/* Notification « Nouvel abonné » en bas à droite : en haut, elle cachait la période et la bascule clair / sombre. */
.ma-notif { top: auto; bottom: 1em; transform: translateY(.6em); }
.ma-notif.is-shown { transform: none; }

/* ---------- Héros : le fond reste en place ; le texte, puis la section suivante, passent dessus ----------
   Le fond est fixé à l'écran et le héros le découpe (clip-path) : il n'apparaît que dans le héros. */
.hero { clip-path: inset(0); }
.hero-bg { position: fixed; inset: 0; }
/* Le fond fixe se fond dans la couleur de la page avant la fin du héros : aucune lisière au-dessus de la section suivante.
   Le dégradé vit dans le fond fixe lui-même et suit le bas du héros (déplacement calculé au défilement) :
   fond et dégradé sont découpés au même pixel, sans la ligne d'un pixel qu'un calque du héros laissait passer. */
.hero::after { content: none; }
.hero-fade {
  --fade: 360px; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--fade) + 100vh); pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 4, 22, 0) 0, rgba(5, 4, 22, .1) calc(var(--fade) * .18), rgba(5, 4, 22, .32) calc(var(--fade) * .38), rgba(5, 4, 22, .62) calc(var(--fade) * .6), rgba(5, 4, 22, .88) calc(var(--fade) * .8), #050416 calc(var(--fade) * .96));
  transform: translate3d(0, 100vh, 0);
  /* Pas de will-change : un calque à part serait découpé un pixel plus haut que le fond, d'où une ligne claire */
}

/* ---------- Effacement sous l'en-tête, plus franc ----------
   Les éléments courts ont disparu quand leur haut atteint le bas de l'en-tête (≈ 80 px) :
   rien ne se devine derrière ni autour de la barre de menu. Les blocs hauts gardent un fondu proportionnel. */
@supports (animation-timeline: view()) {
  .logos, .section-intro > *, .need-row, .works-head, .cta-text > *, .footer-bottom { animation-range: exit -200px exit -80px; }
  .hero .eyebrow, .hero .display .line:nth-child(n), .hero-lead, .hero .actions { animation-range: normal, exit -200px exit -80px; }
  .story-visual, .story-item, .works-track, .review, .cta-visual, .footer-grid > * { animation-range: exit -220px exit 15%; }
}
/* Démonstration : la première étape commence sous le dégradé du titre de chapitre, jamais à moitié masquée */
@media (min-width: 901px) {
  .demo .chapter-head::after { height: 40px; }
  .chapter-scroll { padding-top: 44px; }
}
/* Démo Interne : quand l'assistant occupe le bas de l'écran, la notification passe en haut, au-dessus de tout */
.demo[data-scene="ops"][data-step="4"] .mo-toast { top: 1.2em; bottom: auto; z-index: 6; transform: translateY(-.6em); }
.demo[data-scene="ops"][data-step="4"] .mo-toast.is-shown { transform: none; }
/* ---------- Barre de menu : un seul espacement ----------
   Le même écart (6 px) sépare le cadre de ses entrées, en haut, en bas et sur les côtés, et les entrées entre elles.
   La page active n'a plus de fond : seule son icône passe en bleu. Le fond n'apparaît qu'au survol. */
@media (min-width: 901px) {
  .appbar-main { --nav-gap: 6px; height: auto; padding: var(--nav-gap); gap: var(--nav-gap); }
  .topnav { gap: var(--nav-gap); }
  .topnav > a, .topnav-trigger { height: 36px; padding: 0 12px; }
}
.topnav > a[aria-current="page"] { background: none; }
.topnav > a[aria-current="page"]:hover { background: rgba(127, 140, 190, .16); }
.topnav > a[aria-current="page"] .nav-ico { opacity: 1; color: var(--blue-bright); }

/* ---------- Démonstration sur téléphone ---------- */
@media (max-width: 560px) {
  /* Écran un peu plus haut : moins de vide sous le texte, plus d'air pour les maquettes */
  .device { --dev-h: min(40svh, 360px); }
}
/* Démo Produit : la notification ne passe pas sur le panneau « Reprise de l'application » */
.demo[data-scene="app"][data-step="4"] .ma-notif { opacity: 0 !important; }
/* Téléphone (écran étroit et peu haut) : fil de fer lisible, accroche du site d'exemple complète */
@container screen (max-width: 440px) and (max-height: 340px) {
  .ms-wire { gap: .9em; padding-top: 1.3em; }
  .w-hero { grid-template-rows: 2.4em auto; gap: .9em; }
  .w-text { gap: .45em; padding: .7em .9em; }
  .w-h1 { height: 1.1em; }
  .ms { gap: .5em; padding-block: .7em; }
  .ms-visual { min-height: 1.8em; height: 1.8em; }
  .ms-hero-text { gap: .35em; }
  .ms-title { font-size: 1.75em; }
}
/* Audit sur téléphone : les étiquettes encadrent la poignée et la suivent, au lieu de couvrir le haut des pages */
@container screen (max-width: 440px) {
  .mu-tag { top: 50%; translate: 0 -50%; font-size: .6em; }
  .mu-tag--apres { left: auto; right: calc(100% - var(--cut) + 2.4em); }
  .mu-tag--avant { right: auto; left: calc(var(--cut) + 2.4em); }
}
/* Petits téléphones (écran peu haut) : les puces récapitulatives laissent la place au texte de l'étape */
@media (max-width: 560px) and (max-height: 720px) {
  .stage-caption .step-points { display: none; }
  .ctrl > .ctrl-invite { display: none; }
}

/* Paragraphes : retour à la ligne équilibré, sans mot isolé en fin de bloc */
.hero-lead, .lead, .step-card p, .stage-caption p, .story-item p, .cta-text p { text-wrap: pretty; }
.hero .display, .title, .subtitle { text-wrap: balance; }

/* « Vous voulez… » : la description passe sous le titre, sur tous les écrans.
   (À côté du titre, elle ne s'alignait pas d'une ligne à l'autre : chaque ligne est une grille, et les prix n'ont pas la même largeur.) */
.need-row { grid-template-columns: 64px minmax(0, 1fr) auto 44px; grid-template-areas: "num title price arrow" "num desc price arrow"; row-gap: 8px; }
.need-num { grid-area: num; } .need-title { grid-area: title; } .need-price { grid-area: price; } .need-arrow { grid-area: arrow; }
.need-desc { grid-area: desc; display: block; font-size: 1rem; }
@media (max-width: 1100px) {
  .need-row { grid-template-columns: 48px minmax(0, 1fr) auto 44px; row-gap: 6px; }
  .need-desc { font-size: .92rem; }
}
@media (max-width: 560px) {
  /* Trois colonnes, comme les trois zones : la règle à 1 100 px (quatre colonnes) l'emportait et laissait un vide à droite */
  .need-row { grid-template-columns: 36px minmax(0, 1fr) 36px; grid-template-areas: "num title arrow" "num desc arrow"; }
  .need-desc { font-size: .86rem; }
}
/* « Vous voulez… » : au survol, le contenu glisse (transform) au lieu d'élargir les marges ;
   la largeur du texte ne change pas, donc aucune description ne passe sur deux lignes */
.need-row:hover, .need-row:focus-visible { padding-inline: 8px; }
.need-num, .need-title, .need-desc, .need-price { transition: transform .45s var(--ease), color .35s ease; }
.need-row:hover :is(.need-num, .need-title, .need-desc), .need-row:focus-visible :is(.need-num, .need-title, .need-desc) { transform: translateX(16px); }
.need-row:hover .need-price, .need-row:focus-visible .need-price { transform: translateX(-16px); }
.need-row:hover .need-arrow, .need-row:focus-visible .need-arrow { transform: translateX(-16px) rotate(-45deg); }
/* Menu burger : seulement les pages principales, comme sur ordinateur.
   Les quatre besoins restent rangés sous « Solutions », qui se déplie au toucher. */
@media (max-width: 900px) {
  .topnav .has-menu { display: block; }
  .topnav .topnav-trigger { display: flex; width: 100%; justify-content: flex-start; gap: 10px; padding: 9px; font-size: .97rem; color: inherit; }
  .topnav .topnav-trigger .chev { margin-left: auto; width: 10px; transition: transform .3s var(--ease); }
  .topnav .has-menu.is-open .topnav-trigger .chev { transform: rotate(180deg); }
  .topnav .mega { display: none; padding: 0 0 6px 26px; }
  .topnav .has-menu.is-open .mega { display: flex; }
  .topnav .mega a { padding: 10px 16px; }
  .topnav .mega b { font-size: .95rem; }
}
/* Texte réservé aux lecteurs d'écran (ex. « nouvel onglet ») */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Titres en dégradé (background-clip: text) : le dégradé s'arrête au bord de la boîte,
   donc tout jambage qui dépasse (g, p, q, y, j) était coupé net. On allonge la boîte vers le bas
   et on rend la place par une marge négative : la mise en page ne bouge pas. */
.hero .display .line { padding-bottom: .2em; margin-bottom: -.2em; }
.display { padding-bottom: .22em; margin-bottom: -.12em; }
.title { padding-bottom: .22em; margin-bottom: -.14em; }
/* Même chose vers le haut pour les accents des capitales (Ê, É, À) : la boîte monte, la marge la rend */
.title, .display { padding-top: .14em; margin-top: -.14em; }
.cta .display { margin-bottom: calc(24px - .12em); }

/* =====================================================================
   v14 : masque sous l'en-tête (js/voile.js), pied de page en panneau
   ===================================================================== */

/* ---------- Masque unique sous l'en-tête : remplace l'effacement élément par élément ---------- */
@supports (animation-timeline: view()) {
  .hero-inner, .logos, .section-intro > *, .need-row, .story-visual, .story-item, .works-head, .works-track,
  .review, .cta-text > *, .cta-visual, .footer-grid > *, .footer-bottom { animation: none; }
  .hero .eyebrow, .hero .display .line:nth-child(n), .hero-lead, .hero .actions { animation-name: rise, none; }
}
/* Retour de Loïs du 27 octobre : le fondu part du même endroit (4 px au-dessus du bas de la barre)
   mais s'étale sur 116 px au lieu de 40, avec une courbe qui accélère puis ralentit (pas de bord net sur les grands visuels).
   --voile-fondu doit rester égal à FONDU dans js/voile.js. */
:root { --voile-fondu: 116px; }
.is-voile {
  --v0: calc(var(--coupe) - 4px);
  --voile: linear-gradient(to bottom,
    transparent var(--v0),
    rgba(0, 0, 0, .03) calc(var(--v0) + var(--voile-fondu) * .1),
    rgba(0, 0, 0, .1) calc(var(--v0) + var(--voile-fondu) * .2),
    rgba(0, 0, 0, .22) calc(var(--v0) + var(--voile-fondu) * .3),
    rgba(0, 0, 0, .35) calc(var(--v0) + var(--voile-fondu) * .4),
    rgba(0, 0, 0, .5) calc(var(--v0) + var(--voile-fondu) * .5),
    rgba(0, 0, 0, .65) calc(var(--v0) + var(--voile-fondu) * .6),
    rgba(0, 0, 0, .78) calc(var(--v0) + var(--voile-fondu) * .7),
    rgba(0, 0, 0, .9) calc(var(--v0) + var(--voile-fondu) * .8),
    rgba(0, 0, 0, .97) calc(var(--v0) + var(--voile-fondu) * .9),
    #000 calc(var(--v0) + var(--voile-fondu)));
  -webkit-mask-image: var(--voile);
  mask-image: var(--voile);
}

/* ---------- Appel final et pied de page ----------
   Le pied est un panneau, comme les sections claires (choix de Loïs, 23 octobre) ;
   l'appel final ne doit laisser aucune ligne au-dessus de lui.
   L'ombre bleue de l'image était rognée (bas de la section, puis bord du masque sous l'en-tête) :
   elle devient une lueur peinte par la section elle-même, qui s'éteint avant les bords. */
.cta-visual img { box-shadow: none; }
/* Même poids que la règle générale des sections sombres (.panel[data-mode="dark"]:not(.hero):not(.demo)), qui l'emportait */
.panel.cta[data-mode="dark"]:not(.hero):not(.demo)::before {
  inset: 0; height: auto;
  background:
    radial-gradient(32% 42% at 72% 58%, rgba(0, 91, 245, .34), transparent 72%),
    radial-gradient(40% 60% at 85% 10%, rgba(0, 79, 247, .14), transparent 70%),
    radial-gradient(35% 50% at 10% 90%, rgba(0, 79, 247, .08), transparent 70%);
  -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 75%, transparent);
  mask-image: linear-gradient(transparent, #000 15%, #000 75%, transparent);
}
@media (max-width: 900px) {
  .panel.cta[data-mode="dark"]:not(.hero):not(.demo)::before { background: radial-gradient(60% 30% at 50% 70%, rgba(0, 91, 245, .3), transparent 72%); }
}
.site-footer {
  position: relative; isolation: isolate; overflow: clip;
  margin: var(--panel-gap); border-radius: var(--radius-panel);
  border: 1px solid transparent;
  background: var(--card-fill) padding-box, var(--card-edge) border-box;
  box-shadow: var(--card-shadow);
  padding-block: clamp(56px, 6vw, 80px) 36px;
}
.site-footer::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; bottom: 0; left: 0;
  width: min(480px, 60%); height: 340px; transform: scale(-1, -1);
  background: var(--mosaic-dark) top right / 100% 100% no-repeat; opacity: .55;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 35%), linear-gradient(to left, transparent, #000 30%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to bottom, transparent, #000 35%), linear-gradient(to left, transparent, #000 30%);
}
.footer-bottom { padding-top: 24px; border-top: 1px solid var(--line); }

/* ---------- Appel final : accès contact sous les boutons ---------- */

/* ---------- Barre de navigation : tient dans l'écran à toutes les largeurs ----------
   Relecture du 23 octobre : entre 920 et 1 320 px, le menu et « Réserver un appel » débordaient.
   Logo, texte, marges et écarts se resserrent avec la largeur (1 440 px : tailles d'origine) ;
   « Estimer votre projet » s'efface sous 1 240 px (il reste dans le pied et dans le menu mobile). */
@media (min-width: 901px) {
  .topbar { gap: clamp(10px, 2.5vw - 8px, 28px); }
  .brand-logo { width: clamp(84px, 6vw + 29px, 115px); }
  .appbar-main { flex: none; }
  .topnav > a, .topnav-trigger {
    padding: 0 clamp(7px, 1vw - 2.4px, 12px); gap: clamp(5px, .55vw, 8px);
    font-size: clamp(13px, .55vw + 7.6px, 15.52px); white-space: nowrap;
  }
  .appbar-actions .btn {
    padding-inline: clamp(12px, 1.2vw + .7px, 18px); gap: clamp(6px, .55vw, 8px);
    font-size: clamp(13px, .55vw + 7.6px, 15.52px); white-space: nowrap;
  }
}
@media (min-width: 901px) and (max-width: 1240px) {
  .appbar-actions .btn--bar { display: none; }
}

/* Masque sous l'en-tête : un mask-image découpe tout ce qui dépasse du bloc masqué (ombres, lueurs).
   Les blocs concernés gagnent une marge intérieure basse, rendue par une marge négative :
   la mise en page ne bouge pas, et les ombres ont la place de s'éteindre. */
.container.voile-zone { padding-bottom: 80px; margin-bottom: -80px; }

/* Lueurs des sections sombres : fondu en douceur vers les bords.
   Un fondu linéaire s'arrête net, et l'œil voit une ligne à l'endroit où il s'arrête (bandes de Mach).
   Ce fondu accélère puis ralentit, sans cassure de pente. */
:root {
  --fondu-bords: linear-gradient(transparent 0%, rgba(0, 0, 0, .04) 4%, rgba(0, 0, 0, .16) 8%, rgba(0, 0, 0, .38) 12%, rgba(0, 0, 0, .64) 16%, rgba(0, 0, 0, .86) 20%, #000 25%,
    #000 55%, rgba(0, 0, 0, .86) 62%, rgba(0, 0, 0, .64) 69%, rgba(0, 0, 0, .38) 76%, rgba(0, 0, 0, .16) 84%, rgba(0, 0, 0, .04) 92%, transparent 100%);
}
.panel[data-mode="dark"]:not(.hero):not(.demo)::before { -webkit-mask-image: var(--fondu-bords); mask-image: var(--fondu-bords); }
.panel.cta[data-mode="dark"]:not(.hero):not(.demo)::before {
  background:
    radial-gradient(30% 34% at 72% 48%, rgba(0, 91, 245, .32), transparent 72%),
    radial-gradient(40% 50% at 85% 10%, rgba(0, 79, 247, .14), transparent 70%);
  -webkit-mask-image: var(--fondu-bords); mask-image: var(--fondu-bords);
}
@media (max-width: 900px) {
  .panel.cta[data-mode="dark"]:not(.hero):not(.demo)::before { background: radial-gradient(60% 26% at 50% 66%, rgba(0, 91, 245, .28), transparent 72%); }
}

/* Sections sombres : le fond est celui de la page, peint d'un seul tenant.
   Une section qui peignait son propre fond (#050416, la même couleur) pouvait être rendue sur un calque à part,
   et certains écrans affichent ce calque un rien plus clair : une ligne apparaissait à son bord
   (mesuré sur la capture de Loïs : 9, 8, 22 au-dessus, 6, 5, 22 en dessous). Seules les lueurs restent dans la section. */
.panel[data-mode="dark"]:not(.demo) { background: transparent; }

/* =====================================================================
   v15 : démonstration sur écran étroit (retour de Loïs du 26 octobre),
   prix des formules sur téléphone (point 48)
   ===================================================================== */

/* ---------- Un seul titre par chapitre : le nom du besoin, en gros, au-dessus de l'écran de démo ----------
   Correction de Loïs du 27 octobre : ni numéro, ni surtitre, ni accroche. Ordre : titre, animation, puis la carte de l'étape
   (mention « exemples » retirée le 27 octobre, décision de Loïs). Le h2 reste dans son article (plan du document,
   aria-labelledby) mais ne s'affiche plus : la copie visible est en en-tête de l'écran (js/experience.js). */
.demo .chapter-head .title {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.stage-head {
  display: flex; flex: none; justify-content: center; width: 100%; text-align: center;
  transition: opacity .3s ease, transform .35s var(--ease);
}
.stage-head.is-out { opacity: 0; transform: translateY(-6px); }
/* Comme le titre du héros : même famille, même graisse, même interlettrage, un mot en dégradé (.accent) ; un cran plus petit */
.stage-head { padding: 6px 0 14px; }
.stage-head .title { font-size: clamp(2.5rem, 1rem + 3vw, 3.4rem); line-height: 1.04; }
@media (min-width: 901px) {
  /* Le cadre de gauche ne garde que les étapes ; son en-tête vide conserve le fondu du haut */
  .demo .chapter-head { padding: 24px 30px 0; }
  /* Fondu plus long : une étape qui remonte s'efface avant le bord du cadre, sans paraître coupée ;
     la première étape commence sous la fin du fondu (24 + 52 < 24 + 60) */
  .demo .chapter-head::after { height: 52px; }
  .chapter-scroll { padding-top: 60px; }
}
@media (max-width: 900px) {
  .demo-stage { padding-top: 72px; }
  .stage-head { padding: 4px 0 8px; }
  .stage-head .title { font-size: clamp(1.7rem, 1.05rem + 2.8vw, 2.8rem); }

  /* ---------- Texte de l'étape : plus grand, plus aéré, titre plus franc ---------- */
  .stage-caption { gap: 12px; padding: 22px 22px 24px; border-radius: 24px; }
  .stage-caption::before { content: ""; flex: none; width: 32px; height: 3px; border-radius: 3px; background: var(--accent-grad); }
  .demo[data-mode="light"] .stage-caption::before { background: linear-gradient(100deg, #005bf5, #3d7bff); }
  .stage-caption .subtitle { font-size: 1.55rem; font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; }
  .stage-caption p { font-size: 1rem; line-height: 1.6; }
  .stage-caption .step-points { gap: 6px; margin-top: 2px; }
  /* Dernière étape d'un chapitre : le lien vers les solutions remplace le récapitulatif */
  .stage-caption:has(.step-links) .step-points { display: none; }
  /* Chaque nouvelle étape entre en douceur, ligne après ligne */
  .stage-caption > * { animation: cap-in .5s var(--ease) both; }
  .stage-caption > :nth-child(2) { animation-delay: .05s; }
  .stage-caption > :nth-child(3) { animation-delay: .1s; }
  .stage-caption > :nth-child(n+4) { animation-delay: .15s; }
  @keyframes cap-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 560px) {
  /* L'écran laisse au texte la place dont il a besoin ; il grandit sur les téléphones hauts */
  .device { --dev-h: clamp(240px, 100svh - 540px, 360px); }
  .stage-caption .step-points li { gap: 6px; padding: 5px 10px 5px 7px; font-size: .74rem; }
  .stage-caption .step-points li::before { width: 14px; height: 14px; }
  .stage-caption { gap: 10px; padding: 18px 18px 20px; }
  .stage-caption .subtitle { font-size: 1.35rem; }
  .stage-caption p { font-size: .95rem; line-height: 1.55; }
}
/* Démos sans commandes (Interne, Accompagnement) : pas de rangée vide sous l'écran */
@media (max-width: 900px) {
  .demo:is([data-scene="ops"], [data-scene="audit"]) .stage-controls { display: none; }
}
/* Téléphones peu hauts (375 × 667) : tout doit tenir dans l'écran, l'écran de démo compris */
@media (max-width: 560px) and (max-height: 780px) {
  .device { --dev-h: clamp(170px, 100svh - 446px, 300px); }
  .stage-caption .step-points, .ctrl > .ctrl-invite { display: none; }
  .demo-stage { padding-top: 70px; padding-bottom: 8px; }
  .stage-inner { gap: 8px; }
  .stage-head { padding: 2px 0 6px; }
  .stage-caption { gap: 8px; padding: 16px 16px 18px; border-radius: 20px; }
  .stage-caption .subtitle { font-size: 1.25rem; }
  .stage-caption p { font-size: .92rem; line-height: 1.5; }
  .stage-caption .step-links { margin-top: 0; gap: 0 16px; }
  .stage-caption .step-links .price { font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-caption > * { animation: none; }
  .stage-head { transition-duration: .01s; }
}

/* ---------- Prix des formules visible sur téléphone, sous la description (point 48) ---------- */
@media (max-width: 560px) {
  .need-row { grid-template-areas: "num title arrow" "num desc arrow" "num price arrow"; }
  .need-price { display: block; justify-self: start; margin-top: 2px; font-size: .86rem; }
  .need-price:empty { display: none; }
  .need-row:hover .need-price, .need-row:focus-visible .need-price { transform: translateX(16px); }
}

/* =====================================================================
   v16 : retours mobiles de Loïs du 27 octobre
   (masque sous l'en-tête plus doux : voir .is-voile plus haut)
   ===================================================================== */

/* ---------- Barre de navigation : changement de mode instantané (js : setTopbarMode) ---------- */
.topbar.is-switching, .topbar.is-switching *, .topbar.is-switching *::before, .topbar.is-switching *::after { transition: none !important; }

/* ---------- Démonstration : indicateur de progression, en bas de la zone fixe ---------- */
.demo-progress {
  --dot-off: color-mix(in srgb, var(--fg) 24%, transparent);
  --dot-on: var(--blue-bright);
  position: absolute; z-index: 2; left: 50%; bottom: clamp(16px, 3.2vh, 30px); transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--gutter)), 460px); height: 14px; pointer-events: none;
}
.demo[data-mode="light"] .demo-progress { --dot-on: var(--blue); }
/* Grand écran : la zone fixe garde la place de l'indicateur sous les commandes */
@media (min-width: 901px) {
  .demo-stage { padding-top: calc(var(--nav-bottom, 72px) + 16px); padding-bottom: 56px; }
  .demo-progress { bottom: clamp(18px, 3vh, 28px); }
  .demo .device { --dev-h: min(58vh, 100vh - 320px, 520px); }
}
.demo-progress-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--dot-off); overflow: hidden; }
.demo-progress-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--dot-on); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.demo-progress-dot {
  position: absolute; top: 50%; left: calc(var(--x) * 100%); width: 6px; height: 6px; border-radius: 50%;
  transform: translate(-50%, -50%); background: var(--dot-off);
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s var(--ease);
}
.demo-progress-dot.is-chapter { width: 12px; height: 12px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--dot-off); }
.demo-progress-dot.is-done { background: var(--dot-on); }
.demo-progress-dot.is-chapter.is-done { background: var(--dot-on); box-shadow: inset 0 0 0 2px var(--dot-on); }
.demo-progress-dot.is-current { box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot-on) 22%, transparent); }
.demo-progress-dot.is-chapter.is-current { box-shadow: inset 0 0 0 2px var(--dot-on), 0 0 0 4px color-mix(in srgb, var(--dot-on) 22%, transparent); }
@media (prefers-reduced-motion: reduce) { .demo-progress-dot { transition: none; } }

/* ---------- Démonstration sur écran étroit : titre décollé de la barre, contenu réparti jusqu'à l'indicateur ----------
   L'écran de démo garde sa hauteur sur téléphone (en dessous, l'accroche du site d'exemple est coupée) :
   la place du titre et de l'indicateur vient des marges internes, resserrées. */
@media (max-width: 900px) {
  .demo-stage { padding-top: calc(var(--nav-bottom, 66px) + 16px); padding-bottom: 34px; }
  .demo-progress { bottom: 14px; }
  .stage-inner { gap: 8px; }
  .stage-head { padding: 0 0 6px; }
  .stage-caption { margin-top: 0; }
  .device { transition: width .8s var(--ease), height .6s var(--ease), border-radius .8s ease; }
  /* Interne et Accompagnement n'ont pas de commandes sous l'écran : l'écran reprend une partie de leur place */
  .demo:is([data-scene="ops"], [data-scene="audit"]) .device { height: calc(var(--dev-h) + 28px); }
}
@media (min-width: 561px) and (max-width: 900px) {
  .device { --dev-h: min(max(44svh, 100svh - 490px), 560px); }
}
@media (max-width: 560px) and (max-height: 780px) {
  .demo-stage { padding-top: calc(var(--nav-bottom, 66px) + 14px); padding-bottom: 32px; }
  .demo-progress { bottom: 12px; }
  .stage-head { padding: 0 0 4px; }
  .device { --dev-h: clamp(170px, 100svh - 452px, 300px); }
}

/* ---------- Sections sur écran étroit : marge du haut nettement réduite ---------- */
@media (max-width: 900px) {
  .panel:not(.hero):not(.page-hero):not(.demo) { padding-top: clamp(44px, 4vw + 30px, 64px); }
}