/* Weborizon — système visuel : papier, encre, bleu électrique. */
@font-face { font-family: Manrope; src: url("assets/manrope-variable.woff2") format("woff2"); font-style: normal; font-weight: 200 800; font-display: swap; }
@font-face { font-family: Chillax; src: url("assets/chillax-variable.woff2") format("woff2"); font-style: normal; font-weight: 200 700; font-display: swap; }
:root {
  --paper: #f6f7f9; --white: #fff; --ink: #0b1220; --ink-2: #1c2433; --muted: #566273; --soft: #64707f;
  --line: #e2e6eb; --line-strong: #cfd6de; --surface-soft: #eef1f5; --surface-outline: #dde3ea; --surface-contact: #eef1f5;
  --blue: #0d1dff; --blue-dark: #0714c7; --blue-soft: #eef0ff; --blue-glow: #0d1dff26;
  --brand-gray: #91a3ae; --brand-gray-light: #e0e0e0; --dark: #0b1220;
  --radius: 20px; --radius-sm: 12px;
  --shadow-sm: 0 1px 2px #0b12200a, 0 2px 8px #0b12200a;
  --shadow: 0 1px 2px #0b12200d, 0 12px 32px -8px #0b12201f;
  --shadow-lg: 0 2px 4px #0b12200d, 0 30px 60px -20px #0b122033;
  --container: 1240px; --section-space: 128px;
  --font-display: Chillax, Manrope, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.7 Manrope, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -.04em; text-wrap: balance; }
p { color: var(--muted); }
::selection { background: #dcdfff; color: #0000ad; }
:focus-visible { outline: 3px solid var(--blue-dark); outline-offset: 4px; border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 2px; }
input, select, textarea, [tabindex="-1"], article[id] { scroll-margin-top: 110px; }
.container { width: min(var(--container), calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: fixed; left: 20px; top: -80px; z-index: 1000; padding: 12px 20px; border-radius: 8px; background: var(--blue); color: white; }
.skip-link:focus { top: 12px; }

/* Typographie de section. */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.eyebrow:has(.status-dot)::before, .badge.eyebrow::before { display: none; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: white; box-shadow: var(--shadow-sm); color: var(--ink-2); font-family: Manrope, "Segoe UI", sans-serif; font-size: 13px; font-weight: 650; line-height: 1.4; letter-spacing: 0; text-wrap: initial; }
.section-number { display: none; }
.status-dot { position: relative; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--blue); }
.status-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--blue); opacity: .25; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(1.8); opacity: 0; } }
.muted-heading { color: #77839a; }
.orange-text { color: var(--blue); }
:where(.section) { padding-top: var(--section-space); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 56px; }
.section-heading h2 { margin-top: 18px; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.06; }
.section-heading > p { max-width: 380px; font-size: 17px; }

/* Boutons et liens. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 54px; padding: 14px 26px; border: 1px solid transparent; border-radius: 999px; background: var(--blue); color: white; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 8px 20px -8px var(--blue); transition: background .2s, transform .2s, box-shadow .2s; }
.button:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 12px 26px -10px var(--blue); }
.button > span[aria-hidden] { font-size: 18px; font-weight: 400; line-height: 1; transition: transform .2s; }
.button:hover > span[aria-hidden] { transform: translate(2px, -2px); }
.button-orange, .button-dark { background: var(--blue); color: white; }
.button-small { min-height: 46px; padding: 11px 20px; font-size: 14px; }
.button-ghost, .button-outline { border-color: var(--line-strong); background: white; color: var(--ink); box-shadow: var(--shadow-sm); }
.button-ghost:hover, .button-outline:hover { border-color: var(--ink); background: white; box-shadow: var(--shadow); }
.button-light { background: white; color: var(--ink); box-shadow: none; }
.button-light:hover { background: var(--blue-soft); }
.button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 9px 0; border: 0; background: none; color: var(--blue-dark); font-size: 15px; font-weight: 700; }
.text-link > span { font-size: 18px; font-weight: 400; transition: transform .2s; }
.text-link:hover > span { transform: translate(2px, -2px); }
.text-link:hover { color: var(--blue); }
.inline-link, .prose a, .case-body p a { color: var(--blue-dark); text-decoration: underline; text-decoration-color: #0714c766; text-underline-offset: 4px; }
.inline-link:hover, .prose a:hover { color: var(--blue); text-decoration-color: currentColor; }

/* Apparition au défilement (uniquement si JS actif). */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* En-tête. */
.site-header { position: sticky; top: 0; z-index: 50; background: #f6f7f9d9; backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid transparent; transition: border-color .2s, background .2s; }
.site-header.is-scrolled { border-bottom-color: var(--line); background: #f6f7f9f0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 84px; gap: 28px; }
.brand { display: inline-flex; align-items: center; width: 190px; flex-shrink: 0; line-height: 1; }
.brand > img { width: 100%; height: auto; }
#site-nav { display: flex; align-items: center; gap: 6px; }
.nav-link, .nav-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-size: 15px; font-weight: 600; white-space: nowrap; transition: background .2s, color .2s; }
.nav-link:hover, .nav-trigger:hover, .nav-dropdown:focus-within .nav-trigger { background: #0b12200a; }
.nav-link.is-active, .nav-trigger.is-active { color: var(--blue); }
.nav-trigger > span { font-size: 11px; transition: transform .2s; }
#site-nav > .button { margin-left: 10px; }
.nav-dropdown { position: relative; }
.nav-panel { position: absolute; top: calc(100% + 10px); left: 50%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 540px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .18s, transform .18s, visibility .18s; }
.nav-panel::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.nav-dropdown:hover .nav-panel, .nav-dropdown:focus-within .nav-panel, .nav-dropdown.is-open .nav-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-dropdown:hover .nav-trigger > span, .nav-dropdown.is-open .nav-trigger > span { transform: rotate(180deg); }
.nav-panel a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 12px; transition: background .15s; }
.nav-panel a:hover, .nav-panel a[aria-current] { background: var(--paper); }
.nav-panel strong { color: var(--ink); font-size: 15px; font-weight: 700; }
.nav-panel a[aria-current] strong { color: var(--blue); }
.nav-panel small { color: var(--muted); font-size: 13px; }
.menu-toggle { display: none; width: 46px; height: 46px; flex-shrink: 0; padding: 11px; border: 1px solid var(--line-strong); border-radius: 999px; background: white; }
.menu-toggle span { display: block; width: 22px; height: 2px; margin: 5px auto; border-radius: 2px; background: var(--ink); transition: transform .2s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Fil d’Ariane. */
.breadcrumb { position: absolute; left: 0; right: 0; z-index: 5; padding-top: 26px; font-size: 13px; pointer-events: none; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--soft); pointer-events: auto; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: ""; width: 5px; height: 5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; }
.breadcrumb a { color: var(--muted); transition: color .2s; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb li:first-child a::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 01-1 1h-5v-6H9v6H4a1 1 0 01-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 01-1 1h-5v-6H9v6H4a1 1 0 01-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; }
.breadcrumb [aria-current] { color: var(--ink-2); font-weight: 600; }
/* Sur un hero sombre : couleurs claires et centrage. */
body:has(.work-hero) .breadcrumb ol { justify-content: center; color: #9aa4b4; }
body:has(.work-hero) .breadcrumb a { color: #c4cbd6; }
body:has(.work-hero) .breadcrumb a:hover { color: white; }
body:has(.work-hero) .breadcrumb [aria-current] { color: white; }

/* Accueil : hero. */
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 80% 30%, #0d1dff14, transparent 70%), linear-gradient(#0b12200a 1px, transparent 1px) 0 0 / 100% 64px, linear-gradient(90deg, #0b12200a 1px, transparent 1px) 0 0 / 64px 100%; mask-image: linear-gradient(#000 40%, transparent); -webkit-mask-image: linear-gradient(#000 40%, transparent); }
.hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 40px; min-height: min(760px, calc(100svh - 84px)); padding-block: 56px 72px; }
.hero-title { margin-top: 28px; color: var(--ink); font-family: var(--font-display); font-size: clamp(50px, 5.8vw, 84px); font-weight: 600; line-height: 1; letter-spacing: -.055em; }
.hero-title > span:not(.sw) { color: var(--blue); }
.hero-lead { max-width: 540px; margin-top: 28px; color: var(--muted); font-size: 19px; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero-points { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 32px 0 0; padding: 0; list-style: none; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.hero-points li { display: inline-flex; align-items: center; gap: 8px; }
.hero-points li::before { content: "✓"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 11px; font-weight: 800; }
.hero-visual { position: relative; height: 560px; }
.hero-ribbon { position: absolute; left: 50%; top: 50%; width: 125%; max-width: none; height: auto; transform: translate(-46%, -46%); filter: drop-shadow(0 40px 50px #0d1dff33); animation: float 9s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translate(-46%, -46%); } 50% { transform: translate(-46%, -49%); } }
.float-card { position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid #ffffffb3; border-radius: 16px; background: #ffffffd9; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-lg); animation: float-card 7s ease-in-out infinite; }
.float-card strong { display: block; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.35; }
.float-card small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.float-icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--blue-soft); color: var(--blue); font-size: 18px; font-weight: 700; }
.float-icon-ok { background: #e6f7ee; color: #12804a; }
.float-seo { top: 6%; left: 0; animation-delay: -1s; }
.sparkline { width: 92px; height: 32px; }
.sparkline path { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.float-auto { top: 44%; right: -2%; animation-delay: -3s; }
.float-pim { bottom: 4%; left: 8%; flex-direction: column; align-items: stretch; gap: 8px; width: 250px; animation-delay: -5s; }
.float-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pill-ok { padding: 3px 9px; border-radius: 999px; background: #e6f7ee; color: #12804a; font-size: 11px; font-weight: 700; }
.float-bar { display: block; height: 6px; border-radius: 6px; background: var(--surface-soft); overflow: hidden; }
.float-bar i { display: block; width: 100%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #6d78ff, var(--blue)); }
@keyframes float-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Accueil : confiance. */
.trust { border-block: 1px solid var(--line); background: white; }
.trust-inner { display: flex; align-items: center; gap: 48px; padding-block: 28px; }
.trust-title { flex-shrink: 0; color: var(--soft); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.trust-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 56px; margin: 0; padding: 0; list-style: none; }
.trust-logos li { color: #3a4556; font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -.03em; opacity: .75; }
.trust-logos li:first-child { letter-spacing: .08em; }
.trust-logos .trust-more { font-family: Manrope, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0; opacity: 1; color: var(--soft); }

/* Accueil : prestations en grille. */
.bento { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.bento-card { position: relative; display: flex; flex-direction: column; gap: 12px; grid-column: span 2; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); transition: border-color .25s, box-shadow .25s, transform .25s; }
.bento-wide { grid-column: span 3; }
.bento-card:hover { border-color: #0d1dff55; box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.bento-card h3 { font-size: clamp(24px, 2.2vw, 30px); }
.bento-card p { font-size: 16px; }
.bento-card .card-link { margin-top: auto; }
.bento-visual { position: relative; height: 170px; margin-bottom: 12px; overflow: hidden; border-radius: 14px; background: linear-gradient(135deg, #f2f4ff, #eef1f5); }
.visual-browser .vb-bar { position: absolute; inset: 18px 18px auto; display: flex; gap: 6px; height: 22px; padding: 7px 10px; border-radius: 8px 8px 0 0; background: white; }
.visual-browser .vb-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.visual-browser .vb-hero { position: absolute; left: 18px; right: 18px; top: 40px; height: 64px; background: linear-gradient(110deg, var(--blue) 0 40%, #6d78ff); }
.visual-browser .vb-lines { position: absolute; left: 18px; right: 18px; top: 104px; bottom: 0; padding: 14px; background: white; }
.visual-browser .vb-lines i { display: block; height: 6px; margin-bottom: 8px; border-radius: 6px; background: var(--surface-soft); }
.visual-browser .vb-lines i:nth-child(2) { width: 80%; } .visual-browser .vb-lines i:nth-child(3) { width: 60%; }
.visual-browser .vb-cta { position: absolute; right: 34px; top: 118px; width: 70px; height: 22px; border-radius: 999px; background: var(--ink); }
.visual-app { display: grid; grid-template-columns: 70px 1fr; gap: 10px; padding: 18px; }
.va-side, .va-main { display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 10px; background: white; }
.va-side i { height: 8px; border-radius: 6px; background: var(--surface-soft); } .va-side i:first-child { background: var(--blue); }
.va-main { grid-template-columns: 1fr 1fr; }
.va-main i { height: 42px; border-radius: 8px; background: var(--surface-soft); }
.va-main i:first-child { background: linear-gradient(180deg, #dfe2ff, #f2f4ff); }
.visual-flow { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px; }
.vf-node { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: white; box-shadow: var(--shadow-sm); color: var(--ink-2); font-size: 12px; font-weight: 800; }
.vf-gear { background: var(--blue); color: white; font-size: 22px; animation: spin 8s linear infinite; }
.vf-out { background: #e6f7ee; color: #12804a; font-size: 20px; }
.vf-line { width: 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 10px); }
@keyframes spin { to { transform: rotate(360deg); } }
.visual-serp { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.vs-search { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-radius: 999px; background: white; box-shadow: var(--shadow-sm); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.vs-search i { color: var(--blue); font-style: normal; }
.vs-result { display: grid; gap: 6px; padding: 10px 16px; border-radius: 10px; background: #ffffff99; }
.vs-result b { width: 40%; height: 9px; border-radius: 6px; background: var(--line-strong); font-size: 0; }
.vs-result i { height: 6px; border-radius: 6px; background: var(--surface-soft); }
.vs-first { background: white; box-shadow: var(--shadow-sm); }
.vs-first b { width: auto; height: auto; background: none; color: var(--blue); font-size: 13px; }
.card-tag { color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.card-link { display: inline-flex; align-items: center; gap: 10px; padding-top: 6px; color: var(--ink); font-size: 14px; font-weight: 700; }
.card-link > span { color: var(--blue); transition: transform .2s; }
a:hover .card-link > span { transform: translate(2px, -2px); }

/* Accueil : points forts. */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pillar { padding: 28px; border-top: 2px solid var(--ink); }
.pillar-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); }
.pillar-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pillar h3 { margin-bottom: 10px; font-size: 22px; }
.pillar p { font-size: 15px; }

/* Réalisations (cartes). */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); transition: box-shadow .25s, transform .25s; }
.case-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.case-cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; }
.case-cover > span { position: relative; z-index: 1; color: white; font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -.03em; transition: transform .4s; }
.case-card:hover .case-cover > span { transform: scale(1.04); }
.case-cover::after { content: ""; position: absolute; inset: 0; background: url("assets/brand-ribbon-900.webp") 120% 140% / 85% no-repeat; opacity: .35; mix-blend-mode: screen; transition: transform .6s; }
.case-card:hover .case-cover::after { transform: scale(1.06); }
.cover-pim { background: linear-gradient(135deg, #0b1220, #1c2b6b); }
.cover-seo { background: linear-gradient(135deg, #0d1dff, #5b63ff); }
.cover-sites { background: linear-gradient(135deg, #1c2433, #3a4556); }
.case-card-body { display: grid; gap: 10px; padding: 24px 26px 28px; }
.case-card-body h3 { font-size: 23px; }
.case-card-body p { font-size: 15px; }
.references-section, .related-section { padding-bottom: 0; }

/* Composants repris de la version précédente. */
/* Exemple métier : une illustration explicative, aucun faux contrôle. */
.automation-section { padding-block: var(--section-space); }
.automation-grid { display: grid; grid-template-columns: .95fr 1.15fr; align-items: center; gap: 70px; }
.tonal-panel { padding: 44px; border: 1px solid var(--surface-outline); border-radius: 16px; background: var(--surface-soft); }
.automation-copy h2 { margin: 22px 0 25px; font-size: clamp(36px, 3.3vw, 46px); line-height: 1.17; }
.automation-copy h2 > span:not(.sw) { color: var(--blue); }
.automation-copy > p:not(.eyebrow) { max-width: 470px; font-size: 17px; }
.automation-copy .text-link { margin-top: 22px; color: #0714c7; }
.automation-demo { padding: 27px; border: 1px solid #d7ddec; border-radius: 10px; background: var(--white); }
.automation-demo figcaption { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; border-bottom: 1px solid #d2d9e9; color: #515d76; font-size: 13px; font-weight: 600; }
.automation-demo figcaption > span:last-child { color: var(--blue); font-size: 22px; }
.automation-diagram { display: grid; grid-template-columns: .9fr 42px 1.1fr; align-items: center; gap: 7px; min-height: 267px; }
.source-files { position: relative; height: 210px; }
.file-label { position: absolute; top: 0; left: 12px; color: #56617a; font-size: 13px; }
.file-sheet { position: absolute; width: 105px; height: 142px; padding: 16px; border: 1px solid #bdc7dd; border-radius: 5px; background: white; box-shadow: 0 7px 14px #23335308; }
.file-sheet span { display: block; margin-bottom: 18px; color: #3d4c69; font-size: 13px; font-weight: 750; }
.file-sheet i { display: block; height: 5px; margin-block: 10px; background: #dce2ee; }
.sheet-back { top: 45px; left: 7px; transform: rotate(-9deg); }
.sheet-front { top: 62px; left: 42px; transform: rotate(5deg); }
.sheet-front span { color: var(--blue); }
.processing-arrow { display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--blue); font-size: 32px; }
.processing-arrow i { display: block; width: 22px; height: 2px; background: #acb8f3; }
.report-sheet { min-width: 0; padding: 17px; border: 1px solid #bdc7dd; border-radius: 6px; background: white; box-shadow: 0 10px 20px #23335308; }
.report-heading { display: flex; align-items: center; gap: 8px; color: #273551; font-size: 13px; font-weight: 700; }
.report-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.report-chart { display: flex; align-items: flex-end; gap: 7px; height: 85px; padding: 15px 4px 8px; border-bottom: 1px solid #e1e5ef; }
.report-chart i { flex: 1; height: 40%; border-radius: 2px 2px 0 0; background: #b4bbff; }
.report-chart i:nth-child(2) { height: 60%; }
.report-chart i:nth-child(3) { height: 48%; }
.report-chart i:nth-child(4) { height: 77%; }
.report-chart i:nth-child(5) { height: 65%; }
.report-chart i:nth-child(6) { height: 95%; background: var(--blue); }
.report-lines { margin-block: 13px; }
.report-lines i { display: block; height: 4px; margin-top: 7px; background: #dce2ee; }
.report-lines i:last-child { width: 70%; }
.report-caption { display: block; color: #596780; font-size: 12px; line-height: 1.5; }
.automation-demo-caption { display: flex; gap: 10px; padding-top: 16px; border-top: 1px solid #d2d9e9; color: #515d76; font-size: 13px; line-height: 1.65; }
.automation-demo-caption > span { color: var(--blue); }

/* Produit PIM : son propre écrin, sur le même canvas. */
.pim-shell { padding: 48px; border: 1px solid #2f3952; border-radius: 16px; background: var(--dark); color: white; }
.pim-shell :focus-visible { outline-color: #c8d1ff; }
.pim-shell .pim-window :focus-visible { outline-color: #0714c7; }
.pim-chapter { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 40px; padding-bottom: 23px; border-bottom: 1px solid #46516b; color: #bdc8e2; font-size: 13px; }
.pim-chapter > span:first-child { color: white; text-transform: uppercase; font-weight: 650; letter-spacing: .075em; }
.pim-grid { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 48px; }
.pim-copy .eyebrow { color: var(--brand-gray); }
.pim-copy h2 { margin-block: 22px 26px; color: white; font-size: clamp(36px, 3.2vw, 45px); line-height: 1.18; }
.pim-copy h2 > span:not(.sw) { color: var(--brand-gray); }
.pim-copy > p:not(.eyebrow) { margin-bottom: 23px; color: #e0e0e0; font-size: 16px; line-height: 1.85; }
.pim-copy > p strong { color: #f3f5ff; font-size: 14px; font-weight: 550; }
.pim-copy > .button { margin-top: 9px; background: var(--brand-gray-light); color: var(--ink); }
.pim-copy > .button > span { color: var(--blue); }
.pim-copy > .button:hover { background: white; }
.pim-preview-wrap { min-width: 0; }
.pim-tabs { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 13px; }
.has-pim-tabs .pim-tabs { display: grid; }
.pim-tabs button { min-width: 0; min-height: 48px; padding: 11px 8px; border: 1px solid #677694; border-radius: 5px; background: #222d46; color: #e1e7f6; font-size: 14px; font-weight: 600; line-height: 1.4; }
.pim-tabs button > span, .pim-tabs button > i { display: none; }
.pim-tabs button:hover { background: #34415f; }
.pim-tabs button[aria-selected="true"] { border-color: white; background: white; color: #0000bf; }
.pim-demo-notice { margin-bottom: 13px; color: #e0e0e0; font-size: 12px; }
.pim-window { overflow: hidden; border: 1px solid #c4cde1; border-radius: 9px; background: white; color: var(--ink); box-shadow: 0 20px 60px #03091f35; }
.window-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 65px; padding: 13px 22px; border-bottom: 1px solid #dce2ef; }
.window-brand { display: flex; align-items: center; gap: 8px; color: #25304b; font-size: 15px; font-weight: 750; letter-spacing: -.03em; }
.window-brand strong { margin-left: 3px; color: #566886; font-size: 12px; letter-spacing: .03em; }
.window-wordmark { width: 135px; height: auto; }
.window-logo { display: flex; align-items: center; width: 30px; height: 26px; flex-shrink: 0; }
.window-logo img { width: 100%; height: 100%; object-fit: contain; }
.window-demo-label { color: #566886; font-size: 12px; }
.pim-main { min-width: 0; padding: 26px; }
.pim-main > [role="tabpanel"] { min-height: 480px; outline-offset: 7px; }
html:not(.has-pim-tabs) .pim-main > [role="tabpanel"] + [role="tabpanel"] { margin-top: 28px; padding-top: 28px; border-top: 2px solid #c5cee3; }
.dashboard-heading { margin-bottom: 18px; }
.dashboard-breadcrumb { color: #536786; font-size: 12px; line-height: 1.6; }
.dashboard-heading h3 { margin-top: 8px; font-size: 25px; line-height: 1.3; }
.tiny-orange-dot { color: var(--blue); }
.catalogue-summary { margin-bottom: 17px; color: #536786; font-size: 14px; }
.product-list { margin: 0; padding: 0; list-style: none; }
.product-item { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 13px; padding-block: 18px; border-bottom: 1px solid #dce3f0; }
.product-thumb { width: 46px; height: 46px; overflow: hidden; border: 1px solid #d5ddef; border-radius: 6px; background: #edf0f9; }
.product-thumb img { width: 100%; height: 100%; }
.product-identity { min-width: 0; }
.product-identity strong { display: block; color: #2d3f5d; font-size: 14px; font-weight: 750; line-height: 1.5; }
.product-identity small { display: block; margin-top: 3px; color: #536786; font-size: 12px; line-height: 1.6; }
.product-status { display: inline-block; justify-self: start; padding: 4px 7px; border-radius: 4px; color: #294b76; background: #e7eff9; font-size: 12px; font-weight: 650; line-height: 1.5; }
.status-draft { color: #765111; background: #fff0d6; }
.dashboard-info { margin-top: 19px; color: #536786; font-size: 13px; line-height: 1.7; }
.window-footer { padding: 12px 22px; border-top: 1px solid #dce2ef; background: #f5f7fc; color: #536786; font-size: 12px; }
.enrich-product { display: flex; align-items: center; gap: 17px; margin-bottom: 18px; overflow: hidden; border: 1px solid #dce2ef; border-radius: 7px; background: #f5f7fc; }
.enrich-product > img { width: 108px; height: 125px; flex-shrink: 0; object-fit: contain; }
.enrich-product h4 { margin-block: 9px 5px; font-size: 20px; line-height: 1.3; }
.product-attributes { margin: 0; padding: 0; }
.product-attributes > div { display: grid; grid-template-columns: 100px 1fr; gap: 15px; padding-block: 12px; border-bottom: 1px solid #dce2ef; font-size: 14px; }
.product-attributes dt { color: #536786; }
.product-attributes dd { margin: 0; color: #293c5a; font-weight: 550; }
.color-swatch { display: inline-block; width: 11px; height: 11px; margin-right: 5px; border-radius: 50%; background: var(--blue); }
.distribution-source { display: flex; align-items: center; gap: 14px; padding: 17px; border: 1px solid #d3daee; border-radius: 7px; background: #f1f3fc; }
.distribution-source strong { display: block; color: #304666; font-size: 15px; line-height: 1.5; }
.distribution-source small { display: block; margin-top: 3px; color: #536786; font-size: 12px; }
.distribution-source > span:last-child { margin-left: auto; color: #556ab2; font-size: 23px; }
.distribution-line { width: 1px; height: 19px; margin: auto; background: #c6d2ec; }
.channel-list { display: grid; gap: 9px; }
.channel-list > div { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1px solid #dce2ef; border-radius: 5px; background: #f8f9fd; }
.channel-symbol { color: #5268b2; font-size: 24px; }
.channel-list strong { display: block; color: #304666; font-size: 14px; line-height: 1.5; }
.channel-list small { display: block; margin-top: 3px; color: #536786; font-size: 12px; }
.channel-arrow { margin-left: auto; color: #536786; font-size: 21px; }


.contact-form { min-width: 0; padding: 32px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.form-intro { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.form-intro h3 { font-size: 25px; line-height: 1.3; }
.form-intro p { margin-top: 9px; color: #596985; font-size: 14px; line-height: 1.7; }
.required-note { display: block; margin-top: 12px; color: #53637e; font-size: 12px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { min-width: 0; margin-bottom: 22px; }
.field label { display: block; margin-bottom: 9px; color: #2d3a54; font-size: 14px; font-weight: 650; line-height: 1.5; }
.field label > span:not(.optional) { color: #0714c7; }
.optional { margin-left: 3px; color: #647491; font-size: 12px; font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 13px; border: 1px solid #7f8da5; border-radius: 5px; background: white; color: #253652; font-size: 16px; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #566989; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #0714c7; }
.field input::placeholder, .field textarea::placeholder { color: #64718b; opacity: 1; }
.field select { padding-right: 24px; cursor: pointer; }
.field textarea { min-height: 145px; resize: vertical; }
.form-details { margin: 3px 0 20px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.form-details summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding-block: 14px; list-style: none; color: #2b3d5d; font-size: 14px; font-weight: 650; cursor: pointer; }
.form-details summary::-webkit-details-marker { display: none; }
.form-details summary::after { content: "+"; color: #0714c7; font-size: 25px; font-weight: 400; line-height: 1; }
.form-details[open] summary::after { content: "−"; }
.form-details summary > span { margin-left: auto; color: #53637e; font-size: 12px; font-weight: 500; }
.form-details-body { padding-top: 7px; }
.privacy-note { margin-bottom: 20px; color: #53637e; font-size: 13px; line-height: 1.7; }
.privacy-note a { color: #0714c7; text-decoration: underline; text-underline-offset: 3px; }
.contact-form > .button { width: 100%; justify-content: space-between; }

.field-error { margin-top: 8px; color: #a12431; font-size: 13px; line-height: 1.6; }
.field [aria-invalid="true"] { border: 2px solid #b12b39; }
.form-errors { margin-bottom: 23px; padding: 17px; border: 2px solid #b12b39; border-radius: 5px; background: #fff5f5; color: #8a1b28; font-size: 14px; line-height: 1.7; }
.form-errors p { color: inherit; font-weight: 650; }
.form-errors ul { margin: 9px 0 0; padding-left: 20px; }
.form-errors a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form-errors :focus-visible { outline-color: #8a1b28; }


/* Envoi direct : états visibles et accessibles. */
.form-trap { display: none; }
.contact-form[aria-busy="true"] { cursor: progress; }
.contact-form[aria-busy="true"] input, .contact-form[aria-busy="true"] select, .contact-form[aria-busy="true"] textarea { cursor: progress; background: #f6f8fa; color: var(--muted); }
.form-status { margin: 0 0 20px; padding: 16px; border: 1px solid #b12b39; border-radius: 6px; background: #fff5f5; color: #8a1b28; font-size: 14px; line-height: 1.7; }
.form-status[data-state="pending"], .form-status[data-state="activation"] { border-color: #bdc8d2; background: #eff2f4; color: #34434d; }
.contact-response-wrap { min-width: 0; }
.form-note { margin-top: 15px; color: var(--muted); font-size: 13px; }
.contact-success { padding: 40px 32px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.success-symbol { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 30px; border-radius: 50%; background: #edf0ff; color: var(--blue); font-size: 25px; }
.contact-success h3 { margin-block: 20px; font-size: 32px; line-height: 1.25; }
.contact-success > p:not(.eyebrow) { font-size: 16px; }
.contact-success .text-link { margin-top: 30px; color: var(--blue-dark); }
.thank-you { max-width: 760px; min-height: 65vh; padding-block: 80px; }
.thank-you h1 { margin-block: 24px; font-size: clamp(36px, 5vw, 58px); }
.thank-you > p:not(.eyebrow) { max-width: 600px; margin-bottom: 28px; }
@media (max-width: 600px) {
  .contact-success { padding: 30px 20px; }
  .contact-success h3 { font-size: 28px; }
  .thank-you { padding-block: 45px; }
}


@media (max-width: 1200px) {
  .automation-grid, .pim-grid { gap: 35px; }
  .pim-shell { padding: 35px; }
}
@media (max-width: 1100px) {
  .pim-grid { grid-template-columns: 1fr; gap: 35px; }
  .pim-copy { max-width: 660px; }
  .pim-preview-wrap { width: 100%; max-width: 740px; margin-inline: auto; }
}
@media (max-width: 900px) {
  .automation-grid { grid-template-columns: 1fr; gap: 35px; }
  .automation-copy > p:not(.eyebrow) { max-width: 650px; }
  .automation-demo { max-width: 650px; width: 100%; margin-inline: auto; }
  .source-files { max-width: 180px; margin-left: 25px; }
  .automation-diagram { grid-template-columns: 1fr 50px 1fr; gap: 20px; }
  .contact-form { max-width: 740px; width: 100%; }
}
@media (max-width: 600px) {
  .automation-copy h2 { margin-block: 20px 23px; font-size: 34px; }
  .automation-copy > p:not(.eyebrow) { font-size: 16px; }
  .automation-copy .text-link { gap: 16px; font-size: 14px; }
  .automation-demo { padding: 19px 16px; }
  .automation-demo figcaption { gap: 10px; padding-bottom: 16px; font-size: 12px; }
  .automation-diagram { grid-template-columns: .8fr 25px 1fr; gap: 6px; min-height: 235px; }
  .source-files { height: 190px; margin-left: 0; }
  .file-label { left: 0; font-size: 12px; }
  .file-sheet { width: 74px; height: 115px; padding: 12px; }
  .file-sheet span { margin-bottom: 12px; font-size: 12px; }
  .file-sheet i { height: 4px; margin-block: 8px; }
  .sheet-back { left: 0; top: 40px; }
  .sheet-front { left: 14px; top: 58px; }
  .processing-arrow { font-size: 26px; }
  .report-sheet { padding: 12px; }
  .report-heading { gap: 5px; font-size: 12px; }
  .report-chart { gap: 5px; height: 75px; }
  .report-caption { font-size: 12px; }
  .automation-demo-caption { font-size: 12px; }
  .pim-shell { width: calc(100% - 24px); padding: 27px 16px; border-radius: 12px; }
  .pim-chapter { gap: 15px; margin-bottom: 28px; font-size: 12px; }
  .pim-chapter > span:last-child { max-width: 150px; text-align: right; }
  .pim-copy { padding-inline: 4px; }
  .pim-copy h2 { font-size: 34px; margin-block: 20px 23px; }
  .pim-copy > p:not(.eyebrow) { font-size: 16px; }
  .pim-copy > .button { width: 100%; justify-content: space-between; padding-inline: 17px; font-size: 14px; }
  .pim-grid { gap: 30px; }
  .pim-tabs { gap: 6px; }
  .pim-tabs button { padding-inline: 4px; font-size: 13px; }
  .pim-demo-notice { font-size: 12px; }
  .window-top { padding: 13px 16px; }
  .window-demo-label { display: none; }
  .pim-main { padding: 22px 16px; }
  .pim-main > [role="tabpanel"] { min-height: 530px; }
  .dashboard-heading h3 { font-size: 23px; }
  .product-item { grid-template-columns: 40px 1fr; gap: 7px 11px; padding-block: 15px; }
  .product-thumb { width: 40px; height: 40px; grid-row: span 2; }
  .product-item > .product-status { grid-column: 2; }
  .product-identity strong { font-size: 14px; }
  .enrich-product { gap: 10px; }
  .enrich-product > img { width: 73px; height: 115px; }
  .enrich-product h4 { font-size: 17px; }
  .product-attributes > div { grid-template-columns: 80px 1fr; gap: 10px; font-size: 13px; }
  .distribution-source { gap: 9px; padding: 13px 11px; }
  .distribution-source strong { font-size: 14px; }
  .channel-list > div { gap: 10px; padding: 12px 10px; }
  .channel-list strong { font-size: 14px; }
  .contact-form { padding: 23px 20px; border-radius: 8px; }
  .form-intro h3 { font-size: 23px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-details summary { font-size: 13px; gap: 8px; }
  .form-details summary > span { font-size: 11px; }
  .contact-success { padding: 30px 20px; }
  .contact-success h3 { font-size: 28px; }
  .thank-you { padding-block: 45px; }
}
@media (max-width: 360px) {
  .automation-copy h2 { font-size: 31px; }
  .automation-diagram { grid-template-columns: .75fr 20px 1fr; gap: 3px; }
  .file-sheet { width: 68px; }
  .sheet-front { left: 9px; }
  .report-sheet { padding: 10px; }
  .report-heading { font-size: 11px; gap: 4px; }
  .report-dot { width: 5px; height: 5px; }
  .pim-copy h2 { font-size: 30px; }
  .pim-copy > .button { gap: 12px; padding-inline: 13px; font-size: 13px; }
  .contact-form { padding-inline: 16px; }
}
@media (max-width: 380px) {
  .pim-main > [role="tabpanel"] { min-height: 635px; }
}

/* Ajustements des composants repris (démo automatisation, PIM, formulaire). */
.automation-section { padding-top: var(--section-space); }
.tonal-panel { padding: 56px; border: 1px solid var(--line); border-radius: 28px; background: white; box-shadow: var(--shadow-sm); }
.automation-demo { border-radius: 16px; background: var(--paper); box-shadow: none; }
.pim-section { padding-top: var(--section-space); }
.pim-shell { padding: 56px; border: 0; border-radius: 28px; background: radial-gradient(70% 90% at 100% 0%, #1c2b6b, transparent 60%), var(--dark); box-shadow: var(--shadow-lg); }
.pim-copy > .button { border-radius: 999px; box-shadow: none; }
.pim-window { border-radius: 14px; }

/* Méthode. */
.approach-section { padding-top: var(--section-space); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.process-step { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.process-step::after { content: ""; position: absolute; top: 46px; right: -21px; width: 21px; height: 2px; background: var(--line-strong); }
.process-step:last-child::after { display: none; }
.step-number { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: white; font-size: 14px; font-weight: 700; }
.step-number > span { display: none; }
.process-step h3 { margin-top: 8px; font-size: 24px; }
.process-step p { font-size: 15px; }
.process-deliverable { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line-strong); color: var(--ink-2); font-size: 13px; font-weight: 650; }
/* Variante à deux colonnes quand le titre est à gauche (pages de prestations). */
.approach-section .section-heading { margin-bottom: 48px; }

/* FAQ. */
.faq-section { padding-top: var(--section-space); }
.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.faq-section h2 { margin: 18px 0 20px; font-size: clamp(36px, 4vw, 54px); line-height: 1.06; }
.faq-grid > div > p:not(.eyebrow) { margin-bottom: 14px; font-size: 16px; }
.faq-list { display: grid; gap: 12px; }
.faq-list details { border: 1px solid var(--line); border-radius: 16px; background: white; transition: border-color .2s, box-shadow .2s; }
.faq-list details[open] { border-color: var(--line-strong); box-shadow: var(--shadow); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 16px 22px; list-style: none; cursor: pointer; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.5; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--blue-dark); }
.faq-list summary > span { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--paper); color: var(--blue); font-size: 20px; font-weight: 400; line-height: 1; transition: transform .2s, background .2s; }
.faq-list details[open] summary > span { transform: rotate(45deg); background: var(--blue-soft); }
.faq-list details > p { padding: 0 60px 22px 22px; font-size: 16px; line-height: 1.8; }

/* Contact. */
.contact-section { padding-block: var(--section-space); }
.contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; }
.tonal-panel-contact { border: 0; background: radial-gradient(80% 100% at 0% 100%, #1c2b6b, transparent 60%), var(--dark); box-shadow: var(--shadow-lg); }
.contact-copy .eyebrow { color: #9fa8ff; }
.contact-copy h2 { margin: 20px 0 22px; color: white; font-size: clamp(42px, 4.6vw, 64px); line-height: 1.04; }
.contact-copy h2 > span:not(.sw) { color: #8f98ff; }
.contact-copy > p:not(.eyebrow) { max-width: 430px; color: #c4cbd6; font-size: 17px; }
.contact-email { display: inline-block; margin-top: 28px; padding-block: 6px; border-bottom: 1px solid #ffffff4d; color: white; font-size: 22px; letter-spacing: -.02em; }
.contact-email:hover { border-color: white; }
.contact-copy > .contact-location { margin-top: 14px; color: #9aa4b4; font-size: 13px; }
.contact-form { padding: 34px; border: 0; border-radius: 20px; background: white; }
.form-intro { margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.form-intro .form-title { color: var(--ink); font-family: var(--font-display); font-size: 25px; font-weight: 600; line-height: 1.3; letter-spacing: -.04em; }
.form-intro p { margin-top: 8px; font-size: 14px; }
.field input, .field select, .field textarea { border-color: var(--line-strong); border-radius: 12px; background: var(--paper); transition: border-color .2s, background .2s; }
.field input:focus, .field select:focus, .field textarea:focus { background: white; }
.contact-form > .button { width: 100%; justify-content: space-between; }
.contact-success { border: 0; border-radius: 20px; }
.contact-success .form-success-title { margin-block: 20px; color: var(--ink); font-family: var(--font-display); font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -.04em; }
.dashboard-heading .dashboard-title { margin-top: 8px; color: var(--ink); font-family: var(--font-display); font-size: 25px; font-weight: 600; line-height: 1.3; letter-spacing: -.04em; }
.enrich-product .enrich-title { margin-block: 9px 5px; color: var(--ink); font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.04em; }

/* Pages de prestations. */
.page-hero { position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 80% at 90% 10%, #0d1dff12, transparent 70%), linear-gradient(#0b122009 1px, transparent 1px) 0 0 / 100% 64px, linear-gradient(90deg, #0b122009 1px, transparent 1px) 0 0 / 64px 100%; mask-image: linear-gradient(#000 30%, transparent); -webkit-mask-image: linear-gradient(#000 30%, transparent); }
.page-hero > .container { padding-block: 84px 72px; }
.page-hero .eyebrow { padding: 7px 14px 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: white; box-shadow: var(--shadow-sm); color: var(--ink-2); font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.page-hero-grid { display: grid; grid-template-columns: 1.45fr 1fr; align-items: end; gap: 64px; margin-top: 28px; }
.page-hero h1 { font-size: clamp(42px, 5vw, 72px); line-height: 1.02; letter-spacing: -.05em; }
.page-hero h1 > span:not(.sw) { color: var(--blue); }
.page-hero-intro > p { max-width: 460px; font-size: 18px; line-height: 1.75; }
.page-hero-intro > .button { margin-top: 26px; }
.page-hero-compact > .container { padding-bottom: 40px; }
.page-hero-compact + .contact-section { padding-top: 0; }
.page-hero + .section, .page-hero + .automation-section, .page-hero + .pim-section { padding-top: 24px; }
.service-row { display: grid; grid-template-columns: 56px .9fr 1.2fr; align-items: start; gap: 28px; margin-bottom: 16px; padding: 34px; border: 1px solid var(--line); border-radius: var(--radius); background: white; transition: border-color .25s, box-shadow .25s; }
.service-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.offer-index { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-size: 14px; font-weight: 700; }
.service-title h3 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.12; }
.service-title h3 a:hover { color: var(--blue); }
.service-title > p { margin-top: 10px; color: var(--soft); font-size: 15px; }
.service-content > p { max-width: 600px; font-size: 16px; line-height: 1.8; }
.service-formats { display: block; margin-top: 16px; color: var(--soft); font-size: 13px; font-weight: 600; }
.service-content .text-link { margin-top: 10px; }
.prose-section { padding-top: var(--section-space); }
.prose-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.prose-aside { align-self: start; position: sticky; top: 120px; }
.prose-aside h2 { margin-top: 18px; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; }
.prose { max-width: 700px; }
.prose h3 { margin: 40px 0 12px; font-size: 25px; line-height: 1.25; }
.prose h3:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 17px; line-height: 1.85; }
.prose p + p { margin-top: 16px; }
.prose ul { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.prose li { position: relative; padding-left: 34px; color: var(--muted); }
.prose li::before { content: "✓"; position: absolute; left: 0; top: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 11px; font-weight: 800; }
.prose strong { color: var(--ink); font-weight: 700; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: white; box-shadow: var(--shadow-sm); transition: border-color .25s, box-shadow .25s, transform .25s; }
.card:hover { border-color: #0d1dff55; box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.card h3 { font-size: 22px; line-height: 1.2; }
.card p { font-size: 15px; }
.card .card-link { margin-top: auto; }

/* Réalisations (page). */
.cases-section { padding-block: 24px 0; }
.case { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; margin-bottom: 20px; padding: 44px; border: 1px solid var(--line); border-radius: 24px; background: white; scroll-margin-top: 110px; }
.case-meta h2 { margin-top: 14px; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.1; }
.case-body > p { font-size: 17px; line-height: 1.85; }
.case-facts { margin: 0 0 12px; }
.case-facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.case-facts > div:first-child { padding-top: 0; }
.case-facts dt { color: var(--ink); font-size: 14px; font-weight: 700; }
.case-facts dd { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.case-body .text-link { margin-top: 10px; }
.contact-card { margin-top: 26px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: white; color: var(--ink-2); font-style: normal; line-height: 1.8; }
.contact-card a { color: var(--blue-dark); }
.local-section { padding-bottom: 0; }

/* Pages légales et remerciement. */
.legal-container { width: calc(100% - 48px); max-width: 820px; margin: auto; padding: 76px 0 0; }
.legal-container h1 { margin: 22px 0; font-size: clamp(38px, 5vw, 56px); }
.legal-container h2 { margin: 40px 0 14px; font-size: 26px; }
.legal-container p, .legal-container li { margin: 12px 0; font-size: 16px; line-height: 1.85; }
.legal-container a:not(.brand) { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 4px; }
.thank-you { max-width: 760px; padding-block: 80px 0; }
.thank-you h1 { margin-block: 24px; font-size: clamp(38px, 5vw, 60px); }
.thank-you > p:not(.eyebrow) { max-width: 600px; margin-bottom: 28px; }
.success-symbol { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 26px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 24px; }

/* Pied de page. */
.site-footer { margin-top: var(--section-space); background: var(--dark); color: #c4cbd6; }
.footer-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 72px; border-bottom: 1px solid #ffffff1a; }
.footer-cta-title { color: white; font-family: var(--font-display); font-size: clamp(38px, 5vw, 68px); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.footer-cta-title > span:not(.sw) { color: #8f98ff; }
.footer-columns { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-block: 56px 40px; }
.footer-identity .brand { width: 180px; }
.footer-identity p { max-width: 340px; margin-top: 20px; color: #9aa4b4; font-size: 15px; }
.footer-address { margin-top: 18px; color: #9aa4b4; font-size: 14px; font-style: normal; line-height: 1.8; }
.footer-address a { color: white; }
.footer-col { display: flex; flex-direction: column; gap: 2px; }
.footer-col-title { margin-bottom: 10px; color: white; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.footer-col a { display: inline-flex; align-items: center; min-height: 40px; color: #c4cbd6; font-size: 15px; transition: color .2s; }
.footer-col a:hover { color: white; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; border-top: 1px solid #ffffff1a; color: #8792a3; font-size: 13px; }
.footer-bottom > div { display: flex; gap: 24px; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom a:hover { color: white; }

/* 404 interactive. */
.lost { position: relative; height: calc(100svh - 84px); min-height: 560px; overflow: hidden; background: radial-gradient(60% 70% at 50% 0%, #0d1dff12, transparent 70%); user-select: none; -webkit-user-select: none; }
.lost-copy { position: relative; z-index: 3; max-width: 640px; margin: 0 auto; padding-top: clamp(32px, 7vh, 80px); text-align: center; pointer-events: none; }
.lost-copy h1 { margin: 22px 0 16px; font-size: clamp(38px, 5vw, 64px); line-height: 1.02; }
.lost-copy h1 > span:not(.sw) { color: var(--blue); }
.lost-copy p { font-size: 17px; }
.lost-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; pointer-events: auto; }
.lost-hint { margin-top: 18px; color: var(--soft); font-size: 13px; }
.lost-world { position: absolute; inset: 0; z-index: 2; touch-action: none; cursor: grab; }
.lost-world:active { cursor: grabbing; }
.lost-body { position: absolute; left: 0; top: 0; display: grid; place-items: center; will-change: transform; pointer-events: none; }
.lost-digit { color: var(--ink); font-family: var(--font-display); font-size: var(--size, 220px); font-weight: 600; line-height: 1; letter-spacing: -.06em; }
.lost-digit.is-blue { color: var(--blue); }
.lost-pill { padding: 14px 24px; border-radius: 999px; background: white; box-shadow: var(--shadow); color: var(--ink); font-size: 16px; font-weight: 700; white-space: nowrap; }
.lost-pill.is-dark { background: var(--ink); color: white; }
.lost-pill.is-blue { background: var(--blue); color: white; }
.lost-ball { border-radius: 50%; background: radial-gradient(circle at 30% 30%, #6d78ff, var(--blue) 60%, var(--blue-dark)); box-shadow: inset -6px -8px 16px #0000002e; }
.lost-static { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; pointer-events: auto; }
.lost-static .lost-pill:hover { transform: translateY(-2px); }
.page-404 .site-footer { margin-top: 0; }
.has-physics .lost-static { display: none; }

/* Réduction des animations. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Responsive. */
@media (max-width: 1100px) {
  .container { width: calc(100% - 56px); }
  .menu-toggle { display: block; }
  .header-inner { height: 76px; }
  #site-nav { display: none; position: absolute; left: 16px; right: 16px; top: 72px; flex-direction: column; align-items: stretch; gap: 4px; max-height: calc(100dvh - 92px); overflow-y: auto; padding: 14px; border: 1px solid var(--line); border-radius: 20px; background: white; box-shadow: var(--shadow-lg); }
  #site-nav.is-open { display: flex; }
  html:not(.has-menu) #site-nav { position: static; display: flex; flex-direction: row; flex-wrap: wrap; box-shadow: none; border: 0; background: none; }
  html:not(.has-menu) .header-inner { flex-wrap: wrap; height: auto; padding-block: 14px; }
  .nav-link, .nav-trigger { justify-content: space-between; min-height: 50px; padding: 12px 14px; border-radius: 12px; font-size: 16px; }
  .nav-panel { position: static; display: grid; grid-template-columns: 1fr; width: auto; padding: 0 0 6px 8px; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .nav-panel small { display: none; }
  .nav-panel a { padding: 10px 14px; }
  .nav-panel strong { font-size: 15px; font-weight: 600; }
  .nav-trigger > span { display: none; }
  .nav-trigger { pointer-events: none; color: var(--soft); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; min-height: 36px; }
  #site-nav > .button { margin: 8px 0 0; justify-content: space-between; }
  .hero-grid { grid-template-columns: 1fr; min-height: 0; padding-block: 40px 56px; }
  .hero-visual { height: 460px; max-width: 640px; width: 100%; margin-inline: auto; }
  .bento-card, .bento-wide { grid-column: span 5; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-card, .bento-wide { grid-column: auto; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-step::after { display: none; }
  .page-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .page-hero-intro > p { max-width: 640px; }
  .case-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --section-space: 96px; }
  .section-heading { display: block; margin-bottom: 40px; }
  .section-heading > p, .section-heading > .button { max-width: 600px; margin-top: 22px; }
  .tonal-panel, .pim-shell { padding: 36px; }
  .faq-grid, .contact-grid, .prose-grid, .case { grid-template-columns: 1fr; gap: 32px; }
  .prose-aside { position: static; }
  .service-row { grid-template-columns: 44px 1fr; }
  .service-content { grid-column: 2; }
  .trust-inner { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
  .footer-columns { grid-template-columns: 1fr 1fr; }
  .footer-identity { grid-column: 1 / -1; }
  .case { padding: 32px; }
}
@media (max-width: 640px) {
  :root { --section-space: 72px; }
  body { font-size: 16px; }
  .container { width: calc(100% - 32px); }
  .brand { width: 160px; }
  .hero-title { font-size: clamp(44px, 13vw, 64px); }
  .hero-lead { font-size: 17px; }
  .hero-actions .button { width: 100%; }
  .hero-visual { height: 360px; }
  .float-card { padding: 10px 12px; }
  .float-seo { left: 0; top: 0; }
  .sparkline { display: none; }
  .float-pim { width: 210px; left: 0; }
  .bento, .pillars, .process-grid, .case-grid { grid-template-columns: 1fr; }
  .bento-card { padding: 22px; }
  .pillar { padding: 24px 0 8px; }
  .tonal-panel, .pim-shell { width: calc(100% - 16px); padding: 26px 18px; border-radius: 20px; }
  .service-row { grid-template-columns: 1fr; gap: 14px; padding: 24px; }
  .service-content { grid-column: auto; }
  .faq-list details > p { padding-right: 22px; }
  .case { padding: 24px; }
  .case-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .contact-form { padding: 24px 18px; }
  .footer-columns { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 4px; }
  .trust-logos { gap: 12px 32px; }
  .trust-logos li { font-size: 20px; }
  .lost { min-height: 680px; }
  .lost-world { top: auto; height: 46%; }
  .lost-hint { display: none; }
}

/* Étude de cas. */
.case-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 48px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); }
.case-stats > div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 26px 28px; background: white; }
.case-stats dt { color: var(--muted); font-size: 14px; font-weight: 600; }
.case-stats dd { margin: 0; color: var(--ink); font-family: var(--font-display); font-size: clamp(36px, 4vw, 52px); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.case-stats > div:first-child dd { color: var(--blue); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare-col { padding: 36px; border-radius: var(--radius); }
.compare-before { border: 1px solid var(--line); background: white; }
.compare-after { background: radial-gradient(80% 100% at 100% 0%, #1c2b6b, transparent 60%), var(--dark); color: white; }
.compare-label { display: inline-block; margin-bottom: 18px; padding: 5px 12px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.compare-after .compare-label { background: var(--blue); color: white; }
.compare h3 { margin-bottom: 20px; font-size: 28px; }
.compare-after h3 { color: white; }
.compare ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.compare li { position: relative; padding-left: 32px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.compare li::before { content: "✕"; position: absolute; left: 0; top: 3px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fdecec; color: #b42318; font-size: 10px; font-weight: 800; }
.compare-after li { color: #c4cbd6; }
.compare-after li::before { content: "✓"; background: #ffffff1f; color: #9fa8ff; }
.compare strong { color: var(--ink); }
.compare-after strong { color: white; }
.flow { display: grid; grid-template-columns: 1fr 70px auto 70px 1fr; align-items: center; gap: 0; margin: 0; padding: 48px; border: 1px solid var(--line); border-radius: 28px; background: white; background-image: radial-gradient(#0b12201a 1px, transparent 1px); background-size: 22px 22px; }
.flow-col { display: grid; gap: 12px; }
.flow-title { color: var(--soft); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.flow-node { display: grid; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-sm); }
.flow-node strong { color: var(--ink); font-size: 16px; }
.flow-node small { color: var(--muted); font-size: 13px; }
.flow-arrow { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--blue) 0 8px, transparent 8px 14px); }
.flow-arrow::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left: 9px solid var(--blue); border-right: 0; }
.flow-hub { display: grid; justify-items: center; gap: 8px; padding: 34px 30px; border-radius: 24px; background: var(--dark); box-shadow: 0 20px 50px -12px #0d1dff66; text-align: center; }
.flow-hub img { width: 46px; height: auto; filter: brightness(0) invert(1); }
.flow-hub strong { color: white; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.flow-hub small { color: #9aa4b4; font-size: 13px; }
.flow figcaption { grid-column: 1 / -1; margin-top: 28px; color: var(--soft); font-size: 13px; text-align: center; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.team-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); }
.team-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.team-card h3 { margin-bottom: 8px; font-size: 22px; }
.team-card p { font-size: 15px; }
@media (max-width: 1100px) {
  .case-stats, .team-grid { grid-template-columns: 1fr 1fr; }
  .flow { grid-template-columns: 1fr; gap: 16px; padding: 32px; }
  .flow-arrow { width: 2px; height: 36px; margin-inline: auto; background: repeating-linear-gradient(180deg, var(--blue) 0 8px, transparent 8px 14px); }
  .flow-arrow::after { right: -5px; top: auto; bottom: -2px; border: 6px solid transparent; border-top: 9px solid var(--blue); border-bottom: 0; }
}
@media (max-width: 640px) {
  .compare, .team-grid { grid-template-columns: 1fr; }
  .compare-col { padding: 26px 22px; }
  .case-stats > div { padding: 20px; }
  .flow { padding: 22px; }
}
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--line-strong); }
.timeline li { position: relative; display: grid; gap: 8px; padding-top: 34px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border: 3px solid var(--paper); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px var(--blue); }
.timeline-when { color: var(--blue); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.timeline strong { color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.25; letter-spacing: -.03em; }
.timeline p { font-size: 15px; }
@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; gap: 28px; padding-left: 30px; }
  .timeline::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .timeline li { padding-top: 0; }
  .timeline li::before { left: -30px; top: 2px; }
}

/* Graphique (étude de cas SEO). */
.chart { margin: 0; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.chart-head { display: grid; gap: 4px; margin-bottom: 20px; }
.chart-head strong { color: var(--ink); font-size: 17px; }
.chart-head span { color: var(--muted); font-size: 13px; }
.chart-plot { position: relative; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.c-grid { stroke: #eef1f5; stroke-width: 1; }
.c-ylab { fill: var(--soft); font-size: 12px; text-anchor: end; font-family: Manrope, sans-serif; }
.c-xlab { fill: var(--soft); font-size: 12px; text-anchor: middle; font-family: Manrope, sans-serif; }
.c-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.c-mark { stroke: var(--line-strong); stroke-width: 1; }
.c-note { fill: var(--ink-2); font-size: 13px; font-weight: 700; font-family: Manrope, sans-serif; }
.c-dot { fill: var(--blue); stroke: white; stroke-width: 2; }
.c-val { fill: var(--ink); font-size: 14px; font-weight: 800; font-family: Manrope, sans-serif; }
.c-cross { stroke: var(--ink-2); stroke-width: 1; }
.c-hit { cursor: crosshair; }
.chart-tip { position: absolute; z-index: 2; display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--ink); color: white; font-size: 12px; white-space: nowrap; pointer-events: none; transform: translate(-50%, calc(-100% - 14px)); box-shadow: var(--shadow); }
.chart-tip span { color: #c4cbd6; }
.chart-tip strong { font-size: 15px; }
.chart-table { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.chart-table summary { color: var(--blue-dark); font-size: 14px; font-weight: 700; cursor: pointer; }
.chart-table table { width: 100%; max-width: 420px; margin-top: 12px; border-collapse: collapse; font-size: 14px; }
.chart-table th, .chart-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.chart-table td:last-child, .chart-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.chart-table p { margin-top: 12px; font-size: 13px; }
.chart-note { margin-top: 16px; color: var(--muted); font-size: 14px; }
/* Visuel de projet : navigateur + mobile. */
.showcase { position: relative; margin-top: 48px; padding: 0 0 40px; }
.browser { overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: var(--shadow-lg); }
.browser-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--paper); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.browser-bar span { margin-left: 12px; padding: 4px 14px; border-radius: 999px; background: white; color: var(--muted); font-size: 12px; }
.browser img { width: 100%; height: auto; }
.phone { position: absolute; right: 4%; bottom: 0; width: min(22%, 230px); overflow: hidden; border: 8px solid var(--ink); border-radius: 30px; background: var(--ink); box-shadow: var(--shadow-lg); }
.phone img { width: 100%; height: auto; border-radius: 22px; }
.credits { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 0; }
.credits > div { padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.credits dt { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.credits dd { margin: 6px 0 0; color: var(--ink); font-size: 17px; font-weight: 700; }
.credits dd small { display: block; color: var(--muted); font-size: 13px; font-weight: 500; }
.goal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .goal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .chart { padding: 20px 14px; }
  .c-note { font-size: 18px; }
  .c-ylab, .c-xlab { font-size: 16px; }
  .goal-grid { grid-template-columns: 1fr; }
  .phone { width: 30%; border-width: 5px; border-radius: 18px; }
  .phone img { border-radius: 13px; }
}
.migration-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; padding: 48px; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 24px; background: white; }
.migration-panel h2 { margin-top: 18px; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.1; }
.cover-shot { display: block; background: var(--surface-soft); }
.cover-shot::after { display: none; }
.cover-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s; }
.case-card:hover .cover-shot img { transform: scale(1.03); }
@media (max-width: 900px) { .migration-panel { grid-template-columns: 1fr; gap: 24px; padding: 28px; } }

/* Réalisations : galerie de projets. */
.work-section { padding-top: 24px; }
.work-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.work-filters button { min-height: 42px; padding: 8px 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: white; color: var(--ink-2); font-size: 14px; font-weight: 650; transition: background .2s, color .2s, border-color .2s; }
.work-filters button:hover { border-color: var(--ink); }
.work-filters button.is-active { border-color: var(--ink); background: var(--ink); color: white; }
.work-featured, .work-card, .work-wip { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: var(--shadow-sm); transition: box-shadow .3s, transform .3s, border-color .3s; scroll-margin-top: 110px; }
a.work-featured:hover, a.work-card:hover { border-color: #0d1dff40; box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.work-featured { display: grid; grid-template-columns: 1.35fr 1fr; margin-bottom: 20px; }
.work-featured .work-cover { aspect-ratio: auto; min-height: 420px; }
.work-featured .work-body { justify-content: center; padding: 44px; }
.work-featured h2 { font-size: clamp(28px, 2.8vw, 40px); }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.work-wip { display: grid; grid-template-columns: 1fr 1.35fr; margin-top: 20px; border-style: dashed; }
.work-wip .work-cover { aspect-ratio: auto; min-height: 240px; }
.work-body { display: flex; flex-direction: column; gap: 12px; padding: 28px 30px 32px; }
.work-body h2 { font-size: clamp(23px, 2vw, 28px); line-height: 1.15; }
.work-body p { font-size: 15.5px; line-height: 1.75; }
.work-body .card-link { margin-top: auto; }
.work-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 6px; padding: 0; list-style: none; }
.work-chips li { padding: 4px 11px; border-radius: 999px; background: var(--paper); color: var(--ink-2); font-size: 12.5px; font-weight: 650; }
.work-cover { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; }
.work-cover > img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
a:hover .work-cover > img { transform: scale(1.035); }
.cover-browser { display: block; background: linear-gradient(135deg, #eef0ff, #e9edf3); }
.cover-browser > img { position: absolute; left: 6%; top: 46px; width: 88%; height: calc(100% - 46px); border-radius: 0; box-shadow: var(--shadow-lg); }
.cv-bar { position: absolute; left: 6%; right: 6%; top: 22px; display: flex; gap: 6px; height: 24px; padding: 8px 12px; border-radius: 10px 10px 0 0; background: white; }
.cv-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.cover-dark { background: radial-gradient(70% 90% at 100% 0%, #1c2b6b, transparent 60%), var(--dark); color: white; }
.cover-blue { align-content: center; justify-items: start; padding: 28px 32px; background: linear-gradient(135deg, #0d1dff, #4a54ff); color: white; }
.cover-soft { background: linear-gradient(135deg, #f2f4ff, #eef1f5); }
.cv-caption { position: absolute; left: 24px; bottom: 18px; color: #c4cbd6; font-size: 12.5px; font-weight: 650; }
.cover-blue .cv-caption { position: relative; left: auto; bottom: auto; z-index: 1; margin-top: 8px; color: #dfe2ff; }
.cv-caption-dark { color: var(--muted); }
.cv-big { position: relative; z-index: 1; font-family: var(--font-display); font-size: clamp(56px, 6vw, 84px); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.cv-spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 55%; }
.cv-spark-area { fill: #ffffff26; }
.cv-spark-line { fill: none; stroke: white; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cv-flow { display: flex; align-items: center; gap: 10px; padding: 24px; }
.cv-pill { padding: 7px 12px; border: 1px solid #ffffff2e; border-radius: 999px; background: #ffffff14; color: white; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.cv-line { width: 28px; height: 2px; background: repeating-linear-gradient(90deg, #8f98ff 0 6px, transparent 6px 10px); }
.cv-hub { display: grid; justify-items: center; gap: 6px; padding: 18px 16px; border-radius: 16px; background: var(--blue); box-shadow: 0 14px 30px -8px #0d1dff99; color: white; font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.cv-hub img { width: 30px; height: auto; filter: brightness(0) invert(1); }
.cv-stack { display: grid; gap: 6px; }
.cv-orders { display: flex; align-items: center; gap: 14px; }
.cv-order, .cv-erp { display: grid; gap: 2px; padding: 16px 18px; border-radius: 14px; background: white; box-shadow: var(--shadow); }
.cv-order b { color: var(--ink); font-size: 15px; }
.cv-order small { color: var(--muted); font-size: 12px; }
.cv-erp { background: var(--ink); }
.cv-erp b { color: white; font-size: 15px; }
.cv-erp small { color: #8fe3b4; font-size: 12px; }
.cv-arrow { color: var(--blue); font-size: 26px; font-weight: 700; }
.cv-tiers { display: flex; align-items: flex-end; gap: 14px; height: 62%; }
.cv-tiers span { display: grid; align-items: start; justify-items: center; width: 64px; height: var(--h); padding-top: 10px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, var(--blue), #6d78ff); }
.cv-tiers b { color: white; font-size: 11px; font-weight: 700; }
.cv-sites { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 24px; }
.cv-sites span { display: grid; place-items: center; width: 54px; height: 40px; border: 1px solid #ffffff26; border-radius: 8px; background: #ffffff10; color: #dfe2ff; font-size: 12px; font-weight: 800; letter-spacing: .05em; }
.cv-sites span:nth-child(3n) { border-color: var(--blue); background: var(--blue); color: white; }
.cv-quote { display: flex; align-items: center; gap: 16px; }
.cv-form, .cv-doc { display: grid; gap: 8px; width: 120px; padding: 16px; border-radius: 12px; background: white; box-shadow: var(--shadow); }
.cv-form i, .cv-doc i { height: 8px; border-radius: 6px; background: var(--surface-soft); }
.cv-form i:first-child { background: #dfe2ff; }
.cv-doc b { color: var(--ink); font-size: 14px; }
.cv-spark-ico { color: var(--blue); font-size: 28px; }
.work-section [data-cat].is-hidden { display: none; }
@media (max-width: 1000px) {
  .work-featured, .work-wip { grid-template-columns: 1fr; }
  .work-featured .work-cover, .work-wip .work-cover { min-height: 0; aspect-ratio: 16 / 10; }
  .work-featured .work-body { padding: 28px 30px 32px; }
}
@media (max-width: 760px) {
  .work-grid { grid-template-columns: 1fr; }
  .cv-flow { gap: 6px; padding: 14px; }
  .cv-line { width: 14px; }
  .cv-pill { padding: 5px 9px; font-size: 11px; }
  .cv-sites { grid-template-columns: repeat(4, 1fr); }
  .cv-sites span:nth-child(n+9) { display: none; }
  .cv-orders { gap: 8px; }
  .cv-order, .cv-erp { padding: 12px; }
}
.cover-blue { align-content: start; padding-top: 34px; }
.cover-blue .cv-spark { height: 48%; }

/* Couvertures en pile de captures (Asmodee, LACROIX). */
.cover-stack { display: block; background: linear-gradient(135deg, #eef0ff, #e9edf3); }
.cover-stack-dark { background: radial-gradient(70% 90% at 100% 0%, #1c2b6b, transparent 60%), var(--dark); }
.stack-shot { position: absolute; margin: 0; overflow: hidden; border-radius: 10px; background: white; box-shadow: var(--shadow-lg); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.stack-shot .cv-bar { position: static; height: 20px; padding: 6px 10px; border-radius: 0; }
.stack-shot img { display: block; width: 100%; height: auto; }
.stack-back { left: 6%; top: 8%; width: 72%; opacity: .9; }
.stack-front { right: 6%; bottom: -8%; width: 72%; }
.stack-1 { left: 5%; top: 9%; width: 62%; }
.stack-2 { left: 19%; top: 21%; width: 62%; }
.stack-3 { left: 33%; top: 33%; width: 62%; }
.cover-stack-dark .cv-caption { z-index: 2; padding: 4px 10px; border-radius: 999px; background: #0b1220cc; }
article:hover .stack-front, article:hover .stack-3 { transform: translateY(-6px); }
article:hover .stack-1 { transform: translate(-6px, -4px); }

/* Carte « boutiques d'artistes ». */
.work-featured-reverse { grid-template-columns: 1fr 1.35fr; margin: 20px 0 0; }
.work-featured-reverse .work-cover { order: 2; }
.cover-artists { background: radial-gradient(60% 80% at 20% 20%, #ff3d5a55, transparent 60%), radial-gradient(70% 90% at 100% 100%, #1c2b6b, transparent 60%), var(--dark); }
.cv-artists { display: flex; align-items: center; gap: 12px; padding: 24px; }
.cv-artist-col { display: grid; gap: 10px; }
.cv-artist { padding: 12px 18px; border-radius: 999px; background: white; color: var(--ink); font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -.02em; box-shadow: var(--shadow); }
.cv-artist:last-child { background: #ff3d5a; color: white; }
.cv-shop, .cv-snep { display: grid; gap: 2px; padding: 16px 18px; border-radius: 14px; background: #ffffff14; border: 1px solid #ffffff2e; }
.cv-shop b, .cv-snep b { color: white; font-size: 15px; }
.cv-shop small, .cv-snep small { color: #c4cbd6; font-size: 12px; }
.cv-snep { background: var(--blue); border-color: var(--blue); box-shadow: 0 14px 30px -8px #0d1dff99; }
@media (max-width: 1000px) {
  .work-featured-reverse { grid-template-columns: 1fr; }
  .work-featured-reverse .work-cover { order: 0; }
}
@media (max-width: 760px) {
  .cv-artists { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .cv-artists .cv-line { display: none; }
  .cv-artist { font-size: 15px; padding: 9px 14px; }
}
.cv-snep-badge { position: absolute; right: 9%; bottom: 22px; z-index: 2; display: inline-flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 999px; background: var(--blue); box-shadow: 0 14px 30px -8px #0d1dffaa; color: #dfe2ff; font-size: 14px; }
.cv-snep-badge b { color: white; }

/* Maquette de résultat Google avec aperçu IA (cas SEO Génicado). Texte IA figuré, seuls requête et rang sont réels. */
.cover-serp { display: grid; place-items: center; background: radial-gradient(70% 80% at 0% 0%, #0d1dff22, transparent 60%), linear-gradient(135deg, #eef0ff, #e9edf3); }
.serp { position: relative; display: grid; gap: 12px; width: 84%; padding: 16px; border-radius: 16px; background: white; box-shadow: var(--shadow-lg); font-family: Manrope, Arial, sans-serif; }
.serp-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); }
.serp-g { color: var(--blue); font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.serp-q { flex: 1; color: var(--ink); font-size: 15px; font-weight: 600; }
.serp-icon { color: var(--blue); font-size: 16px; }
.serp-ai { display: grid; gap: 7px; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, #f3f0ff, #eef4ff); }
.serp-ai-title { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; color: var(--ink); font-size: 13px; font-weight: 800; }
.serp-ai-title span { color: #7b5cff; }
.serp-skel { display: block; height: 7px; border-radius: 6px; background: #dfe3f0; }
.serp-short { width: 62%; }
.serp-sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.serp-src { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 5px; border-radius: 999px; background: white; color: var(--ink); font-size: 12px; font-weight: 700; }
.serp-src b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-soft); color: var(--muted); font-size: 10px; }
.serp-src i { display: block; width: 46px; height: 6px; border-radius: 6px; background: #dfe3f0; }
.serp-src.is-hit { background: var(--blue); color: white; box-shadow: 0 8px 18px -6px #0d1dffaa; }
.serp-src.is-hit b { background: white; color: var(--blue); }
.serp-result { display: grid; gap: 6px; padding: 2px 4px; opacity: .7; }
.serp-url { width: 30%; height: 6px; }
.serp-title { width: 70%; height: 9px; background: #c9cff5; }
.serp-badge { position: absolute; right: -14px; bottom: -14px; padding: 9px 14px; border-radius: 12px; background: var(--ink); color: #c4cbd6; font-size: 12.5px; box-shadow: var(--shadow-lg); }
.serp-badge b { color: white; font-size: 15px; }
.serp-lg { width: min(560px, 100%); padding: 22px; }
.serp-lg .serp-q { font-size: 17px; }
/* Liste des requêtes réelles sous la maquette (étude de cas). */
.serp-queries { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.serp-queries li { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.serp-queries b { color: var(--blue); }
.case-visual { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; margin-top: 48px; padding: 44px; border-radius: 28px; background: radial-gradient(70% 80% at 0% 0%, #0d1dff1f, transparent 60%), linear-gradient(135deg, #eef0ff, #e9edf3); }
.case-visual-copy h2, .case-visual-copy h3 { margin: 14px 0 12px; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; }
.case-visual-copy p { font-size: 15.5px; }
.case-visual-note { margin-top: 14px; color: var(--soft); font-size: 12.5px; }
@media (max-width: 900px) { .case-visual { grid-template-columns: 1fr; padding: 26px; } }
@media (max-width: 640px) {
  .serp { width: 92%; padding: 12px; gap: 9px; }
  .serp-badge { right: -6px; bottom: -10px; }
}
.case-cover.cover-serp::after { display: none; }
.case-cover.cover-serp .serp { width: 86%; padding: 12px; gap: 8px; }
.case-cover.cover-serp .serp-badge { right: -8px; bottom: -10px; }
.case-cover.cover-serp .serp-result, .case-cover.cover-serp .serp-badge { display: none; }
.case-cover.cover-serp .serp-q { font-size: 14px; }
.case-cover.cover-serp .serp-sources { flex-wrap: nowrap; }
.case-cover.cover-serp .serp-src i { width: 22px; }

/* Vraie capture de l'aperçu IA (Génicado). */
.ai-card { position: relative; width: 88%; overflow: visible; border-radius: 16px; background: white; box-shadow: var(--shadow-lg); }
.ai-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ai-card-q { flex: 1; color: var(--ink); font-size: 15px; font-weight: 600; }
.ai-card-tag { color: #7b5cff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.ai-card img { display: block; width: 100%; height: auto; border-radius: 0 0 16px 16px; }
.ai-card .serp-badge { right: -12px; bottom: -14px; }
.case-cover.cover-serp .ai-card { width: 92%; }
.case-cover.cover-serp .ai-card-head { padding: 9px 12px; }
.case-cover.cover-serp .ai-card-q { font-size: 13px; }
.case-cover.cover-serp .ai-card-tag { font-size: 10.5px; }
.ai-shot { position: relative; margin: 0; overflow: hidden; border-radius: 18px; background: white; box-shadow: var(--shadow-lg); }
.ai-shot-bar { display: flex; align-items: center; gap: 10px; margin: 14px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); color: var(--ink); font-size: 16px; font-weight: 600; }
.ai-shot-bar span:nth-child(2) { flex: 1; }
.ai-shot-img { position: relative; }
.ai-shot-img img { display: block; width: 100%; height: auto; }
.ai-shot-ring { position: absolute; left: 1.6%; top: 75.6%; width: 43.2%; height: 19.6%; border: 3px solid var(--blue); border-radius: 20px; box-shadow: 0 0 0 6px #0d1dff26; }
.ai-shot-ring b { position: absolute; left: 14px; top: -16px; padding: 4px 10px; border-radius: 999px; background: var(--blue); color: white; font-size: 12px; }
@media (max-width: 640px) {
  .ai-card-tag { display: none; }
}

/* ===== Animations & interactions (actives seulement avec .has-motion) ===== */

/* Transitions fluides entre les pages (navigateurs compatibles). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .28s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in .45s cubic-bezier(.2,.7,.1,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }
.site-header { view-transition-name: site-header; }

/* Barre de progression de lecture. */
.scroll-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 200; height: 3px; background: linear-gradient(90deg, var(--blue), #7b5cff); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Titres révélés mot par mot. */
.has-motion .is-split .sw { display: inline-block; overflow: hidden; padding: .06em .12em .12em; margin: -.06em -.12em -.12em; vertical-align: top; }
.has-motion .is-split .sw-i { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: left bottom; transition: transform .9s cubic-bezier(.2,.7,.1,1) calc(var(--i) * 45ms); }
.has-motion .is-split.is-in .sw-i { transform: none; }

/* Compteurs. */
.has-motion .is-counter { opacity: 0; transition: opacity .3s; }
.has-motion .is-counter.is-counted { opacity: 1; }

/* Halo qui suit la souris sur les cartes. */
.has-spot { background-image: radial-gradient(420px circle at var(--sx, -500px) var(--sy, -500px), #0d1dff14, transparent 45%); }
.compare-before.has-spot, .process-step.has-spot { background-color: white; }

/* Boutons magnétiques. */
.has-motion .button { transition: background .2s, transform .2s, box-shadow .2s, translate .35s cubic-bezier(.2,.7,.1,1); }

/* Hero de l'accueil : fond vivant, parallaxe et profondeur. */
.hero::after { content: ""; position: absolute; z-index: -1; right: -10%; top: -20%; width: 70%; aspect-ratio: 1; background: radial-gradient(closest-side, #0d1dff2e, transparent 70%), radial-gradient(closest-side at 30% 70%, #7b5cff26, transparent 70%); animation: blob 14s ease-in-out infinite alternate; pointer-events: none; }
@keyframes blob { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-6%, 8%) scale(1.08); } 100% { transform: translate(4%, -4%) scale(.96); } }
.hero-visual { transform: translate3d(0, var(--py, 0px), 0); }
.hero-ribbon, .float-card { transition: translate .6s cubic-bezier(.2,.7,.1,1); }
.hero-ribbon { translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -16px); }
.float-seo { translate: calc(var(--mx, 0) * 34px) calc(var(--my, 0) * 26px); }
.float-auto { translate: calc(var(--mx, 0) * 48px) calc(var(--my, 0) * 34px); }
.float-pim { translate: calc(var(--mx, 0) * 26px) calc(var(--my, 0) * 40px); }

/* Bandeau clients défilant. */
.trust-inner { overflow: hidden; }
.marquee { display: flex; gap: 56px; overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { flex-shrink: 0; flex-wrap: nowrap; gap: 56px; min-width: max-content; }
.marquee-track[aria-hidden] { display: none; }
.has-motion .marquee-track[aria-hidden] { display: flex; }
.has-motion .marquee-track { animation: marquee 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% - 56px)); } }

/* Bande de chiffres. */
.stats-band { padding-top: 64px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--line); }
.stat { display: grid; align-content: start; gap: 10px; padding: 30px 28px; background: white; transition: background .25s; }
.stat:hover { background: #fbfbff; }
.stat-num { color: var(--ink); font-family: var(--font-display); font-size: clamp(40px, 4.4vw, 60px); font-weight: 600; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.stat:first-child .stat-num { color: var(--blue); }
.stat-label { color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* Cartes prestations : vraies captures. */
.visual-shots { background: linear-gradient(135deg, #eef0ff, #e3e8f5); }
.visual-shots img { position: absolute; width: 62%; height: auto; border-radius: 10px; box-shadow: var(--shadow-lg); transition: transform .6s cubic-bezier(.2,.7,.1,1); }
.visual-shots .vs-1 { left: 4%; top: 22%; transform: rotate(-6deg); }
.visual-shots .vs-2 { right: 4%; top: 22%; transform: rotate(6deg); }
.visual-shots .vs-3 { left: 19%; top: 12%; z-index: 1; }
.bento-card:hover .vs-1 { transform: rotate(-9deg) translate(-8px, 4px); }
.bento-card:hover .vs-2 { transform: rotate(9deg) translate(8px, 4px); }
.bento-card:hover .vs-3 { transform: translateY(-6px); }
.visual-ai { display: grid; align-content: center; gap: 0; padding: 18px; background: linear-gradient(135deg, #f3f0ff, #eef4ff); }
.visual-ai .vai-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px 12px 0 0; background: white; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 600; }
.visual-ai .vai-head b { color: var(--blue); font-family: var(--font-display); }
.visual-ai .vai-head i { margin-left: auto; color: #7b5cff; font-size: 12px; font-style: normal; font-weight: 800; }
.visual-ai img { width: 100%; height: auto; border-radius: 0 0 12px 12px; box-shadow: var(--shadow); }

/* Méthode : cartes empilées au défilement (grand écran). */
@media (min-width: 1101px) {
  .approach-section > .container { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
  .approach-section .section-heading { display: block; position: sticky; top: 130px; margin: 0; }
  .approach-section .section-heading > p { margin-top: 22px; }
  .approach-section .process-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 40px; }
  .approach-section .process-step { position: sticky; min-height: 230px; padding: 36px; box-shadow: 0 -10px 40px -20px #0b122033, var(--shadow-sm); }
  .approach-section .process-step:nth-child(1) { top: 120px; }
  .approach-section .process-step:nth-child(2) { top: 140px; }
  .approach-section .process-step:nth-child(3) { top: 160px; }
  .approach-section .process-step:nth-child(4) { top: 180px; }
  .approach-section .process-step::after { display: none; }
  .approach-section .process-step h3 { font-size: 30px; }
  .approach-section .step-number { width: 52px; height: 52px; font-size: 16px; background: var(--blue); }
}

/* Page prestation : éventail de captures en tête. */
.page-hero-rich > .container { padding-bottom: 0; }
.hero-shots { position: relative; height: clamp(300px, 36vw, 520px); margin-top: 48px; transform: translate3d(0, var(--py, 0px), 0); }
.shot { position: absolute; left: 50%; bottom: 0; width: min(62%, 760px); margin: 0; overflow: hidden; border-radius: 14px 14px 0 0; background: white; box-shadow: var(--shadow-lg); transition: translate .6s cubic-bezier(.2,.7,.1,1), transform .6s cubic-bezier(.2,.7,.1,1); }
.shot .cv-bar { position: static; height: 26px; padding: 9px 12px; border-radius: 0; }
.shot img { display: block; width: 100%; height: auto; }
.shot-center { z-index: 2; transform: translateX(-50%); translate: calc(var(--mx, 0) * 18px) calc(var(--my, 0) * 10px); }
.shot-left { transform: translateX(-92%) rotate(-5deg) scale(.86); transform-origin: bottom right; translate: calc(var(--mx, 0) * 34px) calc(var(--my, 0) * 18px); }
.shot-right { transform: translateX(-8%) rotate(5deg) scale(.86); transform-origin: bottom left; translate: calc(var(--mx, 0) * 34px) calc(var(--my, 0) * 18px); }
.shot-tag { position: absolute; z-index: 3; padding: 9px 14px; border: 1px solid #ffffffb3; border-radius: 999px; background: #ffffffe6; box-shadow: var(--shadow-lg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; transition: translate .6s cubic-bezier(.2,.7,.1,1); animation: float-card 7s ease-in-out infinite; }
.shot-tag-1 { left: 50%; top: 4%; translate: calc(-50% + var(--mx, 0) * 44px) calc(var(--my, 0) * 30px); }
.shot-tag-2 { left: 4%; top: 30%; translate: calc(var(--mx, 0) * 56px) calc(var(--my, 0) * 36px); animation-delay: -2s; }
.shot-tag-3 { right: 4%; top: 22%; translate: calc(var(--mx, 0) * 56px) calc(var(--my, 0) * 36px); animation-delay: -4s; }
.page-hero-rich + .section { padding-top: var(--section-space); }

@media (max-width: 900px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .shot { width: 78%; }
  .shot-tag { font-size: 11.5px; padding: 7px 11px; }
  .shot-tag-2 { top: 18%; }
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat { padding: 22px; }
  .shot-left, .shot-right { display: none; }
  .shot { width: 92%; }
  .shot-tag-1 { top: 0; }
  .shot-tag-2, .shot-tag-3 { display: none; }
  .hero-shots { height: auto; aspect-ratio: 1.45; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
  .marquee-track[aria-hidden] { display: none !important; }
}

/* ===== Réalisations v3 : hero immersif, vitrine épinglée ===== */
.work-hero { position: relative; overflow: hidden; margin-top: 0; padding: 96px 0 0; background: radial-gradient(60% 70% at 85% 10%, #1c2b6b, transparent 60%), radial-gradient(50% 60% at 0% 100%, #2a1660, transparent 60%), var(--dark); color: white; }
.work-hero-copy { position: relative; z-index: 2; max-width: 980px; text-align: center; }
.work-hero .eyebrow { justify-content: center; color: #9fa8ff; }
.work-hero h1 { margin-top: 20px; color: white; font-size: clamp(46px, 6.4vw, 96px); line-height: 1; letter-spacing: -.055em; }
.work-hero h1 > span:not(.sw) { color: #8f98ff; }
.work-hero-lead { max-width: 640px; margin: 26px auto 0; color: #c4cbd6; font-size: 18px; }
.work-hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; }
.work-hero-meta li { padding: 7px 14px; border: 1px solid #ffffff26; border-radius: 999px; color: #dfe2ff; font-size: 13px; font-weight: 650; }
.wall { position: relative; height: clamp(320px, 38vw, 520px); margin-top: 56px; perspective: 1400px; -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 75%, transparent); }
.wall-inner { display: grid; gap: 20px; transform: translate3d(0, var(--py, 0px), 0) rotateX(24deg) rotateZ(-7deg) scale(1.15); transform-origin: center top; }
.wall-row { display: flex; gap: 20px; width: max-content; }
.wall-row img { width: clamp(260px, 26vw, 400px); height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: 0 30px 60px -20px #000a; }
.has-motion .wall-row { animation: wall 60s linear infinite; }
.has-motion .wall-row-rev { animation-direction: reverse; animation-duration: 70s; }
@keyframes wall { to { transform: translateX(-50%); } }
.work-hero + .showcase-h { margin-top: 0; }

/* Vitrine « À la une » : onglets sur grand écran (classe .is-tabs posée par script.js), projets empilés sinon. */
.showcase-h { position: relative; background: var(--dark); color: white; }
.sh-sticky { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 72px 0; }
.sh-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sh-head .eyebrow { color: #9fa8ff; }
.sh-nav, .sh-tabs { display: none; }
.showcase-h.is-tabs .sh-nav { display: flex; align-items: center; gap: 10px; }
.sh-count { margin-right: 10px; color: #9aa4b4; font-family: var(--font-display); font-size: 22px; letter-spacing: -.02em; }
.sh-count b { color: white; font-size: 34px; font-weight: 600; }
.sh-arrow { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #ffffff26; border-radius: 50%; background: transparent; color: white; font: inherit; font-size: 18px; cursor: pointer; transition: background .25s, border-color .25s, transform .25s; }
.sh-arrow:hover { border-color: #8f98ff; background: #ffffff12; }
.sh-arrow:active { transform: scale(.94); }
.showcase-h.is-tabs .sh-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sh-tab { position: relative; display: grid; align-content: start; gap: 3px; padding: 16px 18px 15px; border: 1px solid #ffffff14; border-radius: 16px; background: #ffffff06; color: #9aa4b4; font: inherit; text-align: left; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.sh-tab::before { content: ""; position: absolute; top: -1px; left: 18px; right: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), #8f98ff); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2,.7,.1,1); }
.sh-tab:hover { border-color: #ffffff2e; color: #dfe2ff; }
.sh-tab[aria-selected="true"] { border-color: #8f98ff59; background: linear-gradient(160deg, #ffffff16, #ffffff08); color: white; }
.sh-tab[aria-selected="true"]::before { transform: scaleX(1); }
.sh-tab:focus-visible, .sh-arrow:focus-visible { outline: 2px solid #8f98ff; outline-offset: 3px; }
.sh-tab-num { color: #8f98ff; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.sh-tab-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.sh-tab-sub { font-size: 13px; }
.sh-track { display: flex; flex-direction: column; gap: 28px; width: min(var(--container), calc(100% - 80px)); margin-inline: auto; }
.sh-panel { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 56px; padding: 44px; border: 1px solid #ffffff1a; border-radius: 30px; background: linear-gradient(160deg, #ffffff10, #ffffff05); color: white; transition: border-color .3s, background .3s; }
/* Tous les projets occupent la même case : la hauteur ne saute pas d'un projet à l'autre. */
.showcase-h.is-tabs .sh-sticky { gap: 20px; }
.showcase-h.is-tabs .sh-track { display: grid; }
@media (min-width: 1001px) { .showcase-h.is-tabs .sh-panel { padding: 34px 44px; } }
.showcase-h.is-tabs .sh-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s, border-color .3s, background .3s; }
.showcase-h.is-tabs .sh-panel.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s, border-color .3s, background .3s; }
.showcase-h.is-tabs .sh-visual { transform: translateX(-28px) scale(.97); transition: transform .9s cubic-bezier(.2,.7,.1,1); }
.showcase-h.is-tabs .sh-panel.is-active .sh-visual { transform: none; }
.showcase-h.is-tabs .sh-text > * { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.1,1); }
.showcase-h.is-tabs .sh-panel.is-active .sh-text > * { opacity: 1; transform: none; }
.showcase-h.is-tabs .sh-panel.is-active .sh-text > :nth-child(2) { transition-delay: .06s; }
.showcase-h.is-tabs .sh-panel.is-active .sh-text > :nth-child(3) { transition-delay: .12s; }
.showcase-h.is-tabs .sh-panel.is-active .sh-text > :nth-child(4) { transition-delay: .18s; }
.showcase-h.is-tabs .sh-panel.is-active .sh-text > :nth-child(5) { transition-delay: .24s; }
.showcase-h.is-tabs .sh-panel.is-active .sh-text > :nth-child(6) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .showcase-h.is-tabs .sh-panel, .showcase-h.is-tabs .sh-visual, .showcase-h.is-tabs .sh-text > * { transition: none !important; transform: none !important; }
}
a.sh-panel:hover { border-color: #8f98ff66; background: linear-gradient(160deg, #ffffff16, #ffffff08); }
.sh-visual { position: relative; display: grid; place-items: center; height: 100%; min-height: 300px; }
.sh-browser { width: 100%; overflow: hidden; border-radius: 14px; background: white; box-shadow: 0 40px 80px -30px #000c; transition: transform .7s cubic-bezier(.2,.7,.1,1); }
.sh-browser .cv-bar { position: static; height: 26px; padding: 9px 12px; border-radius: 0; }
.sh-browser img { display: block; width: 100%; height: auto; }
a.sh-panel:hover .sh-browser { transform: translateY(-6px) rotate(-.6deg); }
.sh-phone { position: absolute; right: -4%; bottom: -6%; width: 26%; overflow: hidden; border: 6px solid #0b1220; border-radius: 24px; box-shadow: 0 30px 60px -20px #000c; }
.sh-phone img { display: block; width: 100%; height: auto; border-radius: 18px; }
.sh-v-flow { border-radius: 20px; background: radial-gradient(60% 80% at 50% 50%, #0d1dff33, transparent 70%); }
.sh-v-flow .cv-flow { gap: 14px; }
.sh-v-flow .cv-pill { font-size: 14px; padding: 9px 14px; }
.sh-v-flow .cv-hub { padding: 26px 22px; font-size: 24px; }
.sh-v-flow .cv-line { width: 40px; }
.sh-ai { position: relative; width: 100%; overflow: hidden; border-radius: 16px; background: white; box-shadow: 0 40px 80px -30px #000c; }
.sh-ai img { display: block; width: 100%; height: auto; }
.sh-ai .ai-shot-bar { color: var(--ink); }
.sh-ai-tag { position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px; background: var(--blue); color: white; font-size: 12px; font-weight: 800; box-shadow: 0 10px 24px -8px #0d1dffcc; }
.sh-text { display: flex; flex-direction: column; gap: 16px; }
.sh-text .card-tag { color: #9fa8ff; }
.sh-text h2 { color: white; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.08; }
.sh-text p { color: #c4cbd6; font-size: 16px; line-height: 1.75; }
.sh-metric { display: grid; gap: 4px; margin-top: 4px; padding-top: 18px; border-top: 1px solid #ffffff1f; }
.sh-metric b { color: white; font-family: var(--font-display); font-size: clamp(34px, 3.4vw, 50px); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.sh-metric span { color: #9aa4b4; font-size: 14px; }
.sh-text .card-link { color: white; }
.sh-text .card-link > span { color: #8f98ff; }
.showcase-h + .work-section { padding-top: var(--section-space); }

/* Bulle de curseur. */
.cursor-bubble { position: fixed; left: 0; top: 0; z-index: 300; display: grid; place-items: center; width: 108px; height: 108px; margin: -54px 0 0 -54px; border-radius: 50%; background: var(--blue); color: white; font-size: 13px; font-weight: 800; text-align: center; line-height: 1.2; padding: 14px; pointer-events: none; opacity: 0; scale: .3; transition: opacity .25s, scale .35s cubic-bezier(.2,.7,.1,1); box-shadow: 0 16px 40px -10px #0d1dffcc; }
.cursor-bubble.is-on { opacity: 1; scale: 1; }
[data-cursor] { cursor: none; }
[data-cursor] a { cursor: pointer; }

@media (max-width: 1000px) {
  .sh-panel { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .sh-visual { min-height: 0; }
  .sh-phone { width: 24%; right: -2%; }
}
@media (max-width: 640px) {
  .work-hero { padding-top: 48px; }
  .work-hero-lead { font-size: 16px; }
  .wall { height: 260px; margin-top: 36px; }
  .sh-track { width: calc(100% - 32px); }
  .sh-panel { padding: 20px; border-radius: 22px; }
  .sh-v-flow .cv-flow { flex-wrap: wrap; justify-content: center; }
  .sh-v-flow .cv-line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-cursor] { cursor: pointer; }
}
@media (max-width: 1100px) {
  .sh-tab { padding: 14px 14px 13px; }
  .sh-tab-name { font-size: 16px; }
  .sh-tab-sub { font-size: 12px; }
}

/* Le hero sombre remonte sous l'en-tête : pas de bande claire au-dessus. */
@media (max-width: 640px) {
  .breadcrumb { padding-top: 18px; font-size: 12px; }
  .page-hero > .container { padding-top: 64px; }
}

/* ===== Scènes en tête des pages de prestations ===== */
.stage { position: relative; height: clamp(320px, 34vw, 470px); margin-top: 48px; border-radius: 28px 28px 0 0; background: radial-gradient(60% 90% at 50% 100%, #0d1dff1f, transparent 70%), linear-gradient(180deg, #ffffff00, #eef0ff); transform: translate3d(0, var(--py, 0px), 0); }
.stage-card { position: absolute; bottom: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 22px 22px 0 0; background: white; box-shadow: var(--shadow-lg); transition: translate .6s cubic-bezier(.2,.7,.1,1); }
.stage-body { position: relative; display: grid; flex: 1; place-items: center; padding: 22px; background: linear-gradient(135deg, #f3f5ff, #eef1f5); }
.stage-label { padding: 14px 18px; border-top: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 700; }
.stage-center { left: 50%; z-index: 2; width: min(44%, 540px); height: 88%; margin-left: max(-22%, -270px); translate: calc(var(--mx, 0) * 16px) calc(var(--my, 0) * 10px); }
.stage-left { left: 2%; width: min(25%, 320px); height: 66%; translate: calc(var(--mx, 0) * 34px) calc(var(--my, 0) * 18px); }
.stage-right { right: 2%; width: min(25%, 320px); height: 66%; translate: calc(var(--mx, 0) * 34px) calc(var(--my, 0) * 18px); }
.stage-card.is-dark .stage-body { background: radial-gradient(70% 90% at 100% 0%, #1c2b6b, transparent 60%), var(--dark); }
.stage-card.is-blue .stage-body { background: linear-gradient(135deg, #0d1dff, #4a54ff); }
.stage .shot-tag-1 { top: 2%; }
.stage .shot-tag-2 { left: 6%; top: 18%; }
.stage .shot-tag-3 { right: 6%; top: 14%; }
.cv-erp.cv-blue { background: var(--blue); }
.cv-erp.cv-blue small { color: #dfe2ff; }
.stage-ai { width: 100%; overflow: hidden; border-radius: 12px; box-shadow: var(--shadow); }
.stage-ai .vai-head { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: white; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 600; }
.stage-ai .vai-head b { color: var(--blue); font-family: var(--font-display); }
.stage-ai .vai-head i { margin-left: auto; color: #7b5cff; font-size: 12px; font-style: normal; font-weight: 800; }
.stage-ai img { display: block; width: 100%; height: auto; }
.cv-tree { display: grid; justify-items: center; gap: 10px; }
.cv-node { padding: 9px 14px; border-radius: 12px; background: white; box-shadow: var(--shadow-sm); color: var(--ink); font-size: 13px; font-weight: 700; }
.cv-node-main { background: var(--ink); color: white; }
.cv-node-alt { border: 1px dashed var(--blue); background: var(--blue-soft); color: var(--blue-dark); }
.cv-tree .cv-node + .cv-node { position: relative; }
.cv-tree .cv-node + .cv-node::before { content: ""; position: absolute; left: 50%; top: -11px; width: 2px; height: 10px; background: var(--line-strong); }
.stage-trend { position: absolute; inset: 0; display: grid; align-content: start; padding: 22px; color: white; }
.stage-trend b { position: relative; z-index: 1; font-family: var(--font-display); font-size: 46px; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.stage-trend small { position: relative; z-index: 1; color: #dfe2ff; font-size: 13px; font-weight: 650; }
.stage-trend .cv-spark { height: 60%; }
.stage-stat { display: grid; justify-items: center; gap: 6px; text-align: center; }
.stage-stat b { color: var(--ink); font-family: var(--font-display); font-size: clamp(34px, 3.4vw, 50px); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.stage-stat small { color: var(--muted); font-size: 14px; font-weight: 650; }
.case-cover.cover-soft { display: grid; place-items: center; padding: 18px; background: linear-gradient(135deg, #f2f4ff, #eef1f5); }
.case-cover.cover-soft::after { display: none; }

/* ===== Études de cas : hero sombre ===== */
.case-hero { color: white; background: radial-gradient(60% 70% at 85% 0%, #1c2b6b, transparent 60%), radial-gradient(50% 60% at 0% 100%, #2a1660, transparent 60%), var(--dark); }
.case-hero::before { background: linear-gradient(#ffffff08 1px, transparent 1px) 0 0 / 100% 64px, linear-gradient(90deg, #ffffff08 1px, transparent 1px) 0 0 / 64px 100%; }
.case-hero > .container { padding-bottom: 80px; }
.case-hero h1 { color: white; }
.case-hero h1 > span:not(.sw) { color: #8f98ff; }
.case-hero .page-hero-intro > p { color: #c4cbd6; }
.case-hero > .container > .eyebrow { border-color: #ffffff26; background: #ffffff10; box-shadow: none; color: #dfe2ff; }
.case-hero .case-stats { border-color: #ffffff1f; background: #ffffff1f; }
.case-hero .case-stats > div { background: #0f1729; }
.case-hero .case-stats dt { color: #9aa4b4; }
.case-hero .case-stats dd { color: white; }
.case-hero .case-stats > div:first-child dd { color: #8f98ff; }
.case-hero .showcase { margin-bottom: -20px; }
.case-hero .case-visual { color: var(--ink); }
body:has(.case-hero) .breadcrumb ol { color: #9aa4b4; }
body:has(.case-hero) .breadcrumb a { color: #c4cbd6; }
body:has(.case-hero) .breadcrumb a:hover { color: white; }
body:has(.case-hero) .breadcrumb [aria-current] { color: white; }

/* Projet suivant. */
.next-project { padding-top: var(--section-space); }
.next-project a { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 32px; padding: 48px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.np-label { grid-column: 1 / -1; color: var(--blue); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.np-title { color: var(--ink); font-family: var(--font-display); font-size: clamp(30px, 4vw, 58px); font-weight: 600; line-height: 1.05; letter-spacing: -.045em; transition: color .3s; }
.np-arrow { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ink); color: white; font-size: 28px; transition: background .3s, transform .4s cubic-bezier(.2,.7,.1,1); }
.next-project a:hover .np-title { color: var(--blue); }
.next-project a:hover .np-arrow { background: var(--blue); transform: translateX(8px); }
.next-project + .contact-section { padding-top: var(--section-space); }

@media (max-width: 900px) {
  .stage { height: 360px; }
  .stage-left, .stage-right { display: none; }
  .stage-center { left: 4%; right: 4%; width: auto; margin-left: 0; }
  .stage .shot-tag-2, .stage .shot-tag-3 { display: none; }
}
@media (max-width: 640px) {
  .stage { height: 300px; margin-top: 32px; }
  .next-project a { grid-template-columns: 1fr; }
  .np-arrow { width: 56px; height: 56px; }
}
.stage-left .stage-body, .stage-right .stage-body { padding: 16px; }
.stage-left .cv-orders, .stage-right .cv-orders { transform: scale(.82); }
.stage-left .cv-quote, .stage-right .cv-tiers { transform: scale(.9); }

/* ===== Logos clients ===== */
.trust-logos { align-items: center; }
.trust-logos img { display: block; width: auto; transition: transform .35s var(--ease, ease); }
.trust-logos li:hover img { transform: scale(1.06); }
.logo-lacroix { height: 26px; }
.logo-genicado { height: 34px; }
.logo-asmodee { height: 36px; }
.logo-parents { height: 15px; }
.logo-lorie { height: 15px; }
.trust-logos .logo-text { color: var(--dark); font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; opacity: 1; }
.trust-dark .trust-logos img { filter: brightness(0) invert(1); opacity: .5; }
.trust-dark .trust-logos .logo-text { color: white; }

/* ===== « Nos autres expertises » : liste à aperçu ===== */
.xlist-section { padding-bottom: 0; }
.xlist-head { display: grid; grid-template-columns: 1.7fr 1fr; align-items: end; gap: 24px 48px; margin-bottom: 40px; }
.xlist-head .eyebrow { grid-column: 1 / -1; }
.xlist-head h2 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1; }
.xlist-head > p:last-child { max-width: 420px; justify-self: end; font-size: 17px; }
.xlist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); counter-reset: xrow; }
.xrow-item { border-bottom: 1px solid var(--line-strong); counter-increment: xrow; }
.xrow { position: relative; display: grid; grid-template-columns: 70px 1.3fr 1fr 56px; align-items: center; gap: 24px; padding: 30px 8px; transition: background .35s, box-shadow .35s; }
.xrow::before { content: counter(xrow, decimal-leading-zero); color: var(--soft); font-size: 14px; font-weight: 700; }
.x-title { color: var(--ink); font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 52px); font-weight: 600; line-height: 1; letter-spacing: -.045em; transition: color .3s, transform .45s cubic-bezier(.2,.7,.1,1); }
.x-desc { color: var(--muted); font-size: 15px; }
.x-arrow { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); font-size: 20px; transition: background .3s, color .3s, border-color .3s, transform .45s cubic-bezier(.2,.7,.1,1); }
.x-thumb { display: none; }
.xrow:hover { background: white; box-shadow: -14px 0 0 white, 14px 0 0 white; }
.xrow:hover .x-title { color: var(--blue); transform: translateX(8px); }
.xrow:hover .x-arrow { border-color: var(--blue); background: var(--blue); color: white; transform: rotate(45deg); }
.x-preview { position: fixed; left: 0; top: 0; z-index: 250; width: 320px; aspect-ratio: 16 / 10; margin: -100px 0 0 40px; overflow: hidden; border-radius: 14px; box-shadow: var(--shadow-lg); pointer-events: none; opacity: 0; scale: .7; transition: opacity .3s, scale .4s cubic-bezier(.2,.7,.1,1); }
.x-preview.is-on { opacity: 1; scale: 1; }
.x-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 900px) {
  .xlist-head { grid-template-columns: 1fr; }
  .xlist-head > p:last-child { justify-self: start; }
  .xrow { grid-template-columns: 40px 1fr 44px; gap: 14px; padding: 22px 4px; }
  .x-desc { display: none; }
  .x-arrow { width: 44px; height: 44px; }
}

/* ===== Études de cas : synthèse + chapitres ===== */
.case-overview { background: var(--dark); }
.case-overview dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; border-top: 1px solid #ffffff1f; }
.case-overview dl > div { padding: 28px 28px 36px 0; }
.case-overview dl > div + div { padding-left: 28px; border-left: 1px solid #ffffff1f; }
.case-overview dt { color: #8f98ff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.case-overview dd { margin: 10px 0 0; color: #dfe2ff; font-size: 15.5px; line-height: 1.6; }
.chapters-wrap { padding-top: var(--section-space); }
.chapters { display: grid; grid-template-columns: 240px 1fr; gap: 72px; align-items: start; }
.chapter-nav { position: sticky; top: 120px; }
.chapter-nav-title { margin-bottom: 14px; color: var(--soft); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.chapter-nav ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.chapter-nav a { display: flex; gap: 12px; margin-left: -2px; padding: 9px 14px; border-left: 2px solid transparent; color: var(--muted); font-size: 14.5px; font-weight: 600; transition: color .2s, border-color .2s; }
.chapter-nav a span { color: var(--soft); font-variant-numeric: tabular-nums; }
.chapter-nav a:hover { color: var(--ink); }
.chapter-nav a.is-active { border-color: var(--blue); color: var(--blue); }
.chapter-nav a.is-active span { color: var(--blue); }
.chapters-body { display: grid; gap: 120px; min-width: 0; }
.chapter { position: relative; scroll-margin-top: 110px; }
.chapter-num { position: absolute; right: 0; top: -36px; color: transparent; font-family: var(--font-display); font-size: clamp(90px, 11vw, 160px); font-weight: 600; line-height: 1; letter-spacing: -.06em; -webkit-text-stroke: 1.5px var(--line-strong); pointer-events: none; z-index: -1; }
.chapter > h2 { max-width: 760px; margin: 16px 0 20px; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.04; }
.chapter-lead { max-width: 760px; margin-bottom: 36px; color: var(--ink-2); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.65; }
.chapter-lead a, .callout a { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 4px; }
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile-grid-2 { grid-template-columns: 1fr 1fr; }
.tile { display: grid; align-content: start; gap: 10px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.tile .team-icon { margin-bottom: 8px; }
.tile h3 { font-size: 21px; line-height: 1.2; }
.tile p { font-size: 15px; }
.tile-num { color: var(--blue); font-family: var(--font-display); font-size: 34px; font-weight: 600; line-height: 1; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo-card { display: grid; align-content: start; gap: 12px; padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.duo-card h3 { font-size: 28px; }
.duo-card p { font-size: 16px; line-height: 1.75; }
.duo-tag { justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.duo-dark { border-color: transparent; background: radial-gradient(70% 90% at 100% 0%, #1c2b6b, transparent 60%), var(--dark); }
.duo-dark h3, .duo-dark strong { color: white; }
.duo-dark p { color: #c4cbd6; }
.duo-dark .duo-tag { background: #ffffff1a; color: #dfe2ff; }
.callout { margin-top: 20px; padding: 22px 26px; border-left: 3px solid var(--blue); border-radius: 0 16px 16px 0; background: var(--blue-soft); color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.callout p { color: var(--ink-2); }
.callout-tools { display: grid; gap: 14px; }
.callout-honest { border-color: var(--soft); background: var(--surface-soft); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.steps li { display: grid; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: white; color: var(--ink); font-size: 16px; font-weight: 650; line-height: 1.45; }
.steps li span { color: var(--blue); font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1; }
.eco { display: grid; place-items: center; min-height: 260px; border-radius: 24px; background: radial-gradient(70% 90% at 100% 0%, #1c2b6b, transparent 60%), var(--dark); }
.eco .cv-flow { transform: scale(1.15); }
.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.person { display: grid; align-content: start; justify-items: start; gap: 4px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.avatar { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 14px; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, var(--blue), #7b5cff); color: white; font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.person:nth-child(2) .avatar { background: linear-gradient(135deg, #0b1220, #3a4556); }
.person:nth-child(3) .avatar { background: linear-gradient(135deg, #7b5cff, #ff3d5a); }
.person:nth-child(4) .avatar { background: linear-gradient(135deg, #0d1dff, #0b1220); }
.person b { color: var(--ink); font-size: 16px; }
.person > span:not(.avatar) { color: var(--muted); font-size: 14px; }
.person em { margin-top: 6px; padding: 3px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); font-size: 12px; font-style: normal; font-weight: 800; }
.bleed { position: relative; margin: 0; padding: 48px 48px 0; overflow: hidden; border-radius: 28px; background: radial-gradient(60% 90% at 50% 100%, #0d1dff40, transparent 70%), var(--dark); }
.bleed-desk { overflow: hidden; border-radius: 14px 14px 0 0; background: white; box-shadow: 0 -20px 60px -20px #000a; }
.bleed-desk .cv-bar { position: static; height: 26px; padding: 9px 12px; border-radius: 0; }
.bleed-desk img { display: block; width: 100%; height: auto; }
.bleed-phone { position: absolute; right: 7%; bottom: -40px; width: 20%; overflow: hidden; border: 7px solid #0b1220; border-radius: 28px; box-shadow: 0 30px 60px -20px #000c; }
.bleed-phone img { display: block; width: 100%; height: auto; border-radius: 21px; }
.link-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.link-card { display: grid; align-content: start; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.link-card h3 { font-size: 21px; }
.link-card p { font-size: 14.5px; line-height: 1.7; }
.link-card p strong { display: none; }
.link-diagram { display: grid; justify-items: start; gap: 0; margin-bottom: 10px; padding: 16px; border-radius: 14px; background: var(--paper); }
.link-diagram span { padding: 7px 11px; border-radius: 10px; background: white; box-shadow: var(--shadow-sm); color: var(--ink); font-size: 12.5px; font-weight: 700; }
.link-diagram span.is-target { background: var(--blue); color: white; }
.link-diagram i { width: 2px; height: 18px; margin-left: 18px; background: repeating-linear-gradient(180deg, var(--blue) 0 4px, transparent 4px 7px); }
.result-band { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 32px; margin-top: 16px; padding: 30px 34px; border-radius: 24px; background: linear-gradient(135deg, var(--blue), #4a54ff); color: white; }
.result-band p { color: #dfe2ff; font-size: 16px; }
.result-band strong { color: white; }
.result-num .stat-num { color: white; font-family: var(--font-display); font-size: clamp(54px, 6vw, 84px); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.checklist li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.checklist li > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #e6f7ee; color: #12804a; }
.checklist svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.checklist strong { color: var(--ink); font-size: 16px; }
.checklist p { margin-top: 4px; font-size: 14.5px; line-height: 1.65; }
.chapter .chart { margin-top: 4px; }
@media (max-width: 1100px) {
  .chapters { grid-template-columns: 1fr; gap: 0; }
  .chapter-nav { display: none; }
  .tile-grid, .steps { grid-template-columns: 1fr 1fr; }
  .case-overview dl { grid-template-columns: 1fr 1fr; }
  .case-overview dl > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) {
  .chapters-body { gap: 80px; }
  .tile-grid, .tile-grid-2, .duo, .steps, .link-cards, .checklist, .case-overview dl { grid-template-columns: 1fr; }
  .case-overview dl > div, .case-overview dl > div + div { padding: 18px 0; border-left: 0; border-bottom: 1px solid #ffffff1f; }
  .duo-card { padding: 24px; }
  .bleed { padding: 24px 20px 0; }
  .result-band { grid-template-columns: 1fr; gap: 12px; }
  .eco .cv-flow { transform: scale(.85); }
}

/* ===== Accueil : « Du temps retrouvé » ===== */
.hero-time { position: relative; overflow: hidden; padding: clamp(40px, 7vh, 88px) 0 clamp(64px, 9vh, 112px); }
/* Fond sobre : un simple dégradé du blanc vers le gris clair du site, sans motif. */
.ht-bg { position: absolute; inset: 0; background: linear-gradient(180deg, #fff 0%, var(--paper) 85%); }
.ht-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 5vw, 80px); }
.hero-time .hero-title { font-size: clamp(52px, 5.4vw, 84px); line-height: .95; letter-spacing: -.06em; }
.hero-time .hero-lead { max-width: 500px; }
.trust-light { border-top: 0; }

.time-week { position: relative; margin: 0; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 26px; background: white; box-shadow: var(--shadow-lg); }
.tw-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 4px 18px; }
.tw-kicker { display: block; color: var(--soft); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tw-state { position: relative; display: grid; margin-top: 2px; color: var(--ink); font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.tw-state > span { grid-area: 1 / 1; transition: opacity .5s, transform .5s; }
.tw-after { color: var(--blue); opacity: 0; transform: translateY(10px); }
.is-after .tw-before { opacity: 0; transform: translateY(-10px); }
.is-after .tw-after { opacity: 1; transform: none; }
.tw-counter { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border-radius: 16px; background: var(--blue-soft); }
.tw-counter > span { display: grid; }
.tw-label { color: var(--blue-dark); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tw-total { color: var(--blue); font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tw-clock { width: 34px; height: 34px; fill: white; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; }
.tw-clock path { transform-origin: 12px 12px; }
.is-sweeping .tw-hand-m { animation: hand-back calc(var(--sweep, 4s) / 3) linear 3; }
.is-sweeping .tw-hand-h { animation: hand-back var(--sweep, 4s) linear; }
@keyframes hand-back { to { transform: rotate(-360deg); } }

.tw-body { display: grid; grid-template-columns: 34px 1fr; gap: 6px; }
.tw-hours { position: relative; color: var(--soft); font-size: 11px; font-weight: 700; }
.tw-hours span { position: absolute; left: 0; top: calc(26px + var(--h) * 88px - 7px); line-height: 14px; }
.tw-hours span:nth-child(1) { --h: 0; } .tw-hours span:nth-child(2) { --h: 1; } .tw-hours span:nth-child(3) { --h: 2; } .tw-hours span:nth-child(4) { --h: 3; } .tw-hours span:nth-child(5) { --h: 4; }
.tw-days { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tw-dayname { display: block; height: 26px; color: var(--muted); font-size: 12px; font-weight: 800; text-align: center; }
.tw-col { display: grid; grid-template-rows: repeat(16, 22px); gap: 0; padding: 0 1px; border-radius: 10px; background: repeating-linear-gradient(var(--line) 0 1px, transparent 1px 88px) 0 0 / 100% 88px, var(--paper); }
.tb { position: relative; display: grid; align-content: start; margin: 2px 0; padding: 6px 7px; overflow: hidden; border-radius: 8px; background: #e7ebf1; color: var(--ink-2); font-size: 11px; font-weight: 700; line-height: 1.25; transition: background .45s, color .45s, box-shadow .45s, transform .45s; }
.tb > span { grid-area: 1 / 1; transition: opacity .35s, transform .45s; }
.tb.is-rep { background: repeating-linear-gradient(-45deg, #fff1e8 0 6px, #ffe4d4 6px 12px); box-shadow: inset 3px 0 #ff6a2b; color: #8a3410; }
.tb-new { display: grid; gap: 2px; opacity: 0; transform: translateY(8px); }
.tb-new b { font-weight: 800; }
.tb-new i { justify-self: start; padding: 1px 6px; border-radius: 999px; background: white; color: var(--blue); font-style: normal; font-size: 10px; font-weight: 800; }
.tb.is-rep.is-done, .time-week:not(.is-live) .tb.is-rep { background: linear-gradient(160deg, #3a46ff, var(--blue)); box-shadow: 0 8px 18px -8px #0d1dff99; color: white; transform: scale(1.02); }
.tb.is-done .tb-old, .time-week:not(.is-live) .tb.is-rep .tb-old { opacity: 0; transform: translateY(-8px); }
.tb.is-done .tb-new, .time-week:not(.is-live) .tb-new { opacity: 1; transform: none; }
.time-week:not(.is-live) .tw-before { opacity: 0; }
.time-week:not(.is-live) .tw-after { opacity: 1; transform: none; }

.tw-sweep { position: absolute; top: 26px; bottom: 0; left: 0; width: 3px; border-radius: 3px; background: var(--blue); box-shadow: 0 0 0 4px #0d1dff22, -40px 0 40px 10px #0d1dff1f; opacity: 0; pointer-events: none; }
.is-sweeping .tw-sweep { animation: sweep var(--sweep, 4s) cubic-bezier(.45, 0, .55, 1) forwards; }
@keyframes sweep { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.tw-toasts { position: absolute; right: -36px; bottom: -22px; display: grid; justify-items: end; gap: 8px; pointer-events: none; }
.tw-toast { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 9px; border: 1px solid var(--line); border-radius: 999px; background: white; box-shadow: var(--shadow-lg); color: var(--ink); font-size: 13px; font-weight: 700; opacity: 0; transform: translateX(16px) scale(.96); transition: opacity .45s, transform .55s cubic-bezier(.2, .9, .3, 1.2); }
.tw-toast i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #17b26a; color: white; font-style: normal; font-size: 12px; }
.tw-toast.is-on { opacity: 1; transform: none; }
.t2 { margin-right: 24px; }

@media (max-width: 1100px) {
  .ht-grid { grid-template-columns: 1fr; }
  .hero-time .hero-title { font-size: clamp(48px, 9vw, 84px); }
  .time-week { max-width: 640px; }
  .tw-toasts { right: 12px; }
}
@media (max-width: 640px) {
  .hero-time .hero-title { font-size: clamp(44px, 13vw, 64px); }
  .hero-time .hero-actions { display: grid; }
  .time-week { padding: 16px 12px 14px; border-radius: 20px; }
  .tw-head { flex-wrap: wrap; padding-bottom: 14px; }
  .tw-state { font-size: 19px; }
  .tw-total { font-size: 24px; }
  .tw-days { grid-template-columns: repeat(3, 1fr); }
  .tw-day:nth-child(n+4) { display: none; }
  .tw-body { grid-template-columns: 28px 1fr; }
  .tw-toasts { right: 8px; bottom: 16px; }
}
.tb.is-short .tb-new b { display: none; }
.tb.is-short .tb-new i { padding: 3px 8px; font-size: 11px; }

/* ===== Accueil : prestations, réalisations, méthode ===== */
.mock-browser { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow-lg); }
.mock-bar { display: flex; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #f8f9fb; }
.mock-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.mock-browser img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.mock-phone { position: absolute; overflow: hidden; width: 22%; border: 4px solid var(--ink); border-radius: 18px; background: white; box-shadow: var(--shadow-lg); }
.mock-phone img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; }

.svc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.svc { position: relative; display: flex; flex-direction: column; grid-column: span 2; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: white; transition: border-color .3s, box-shadow .3s, transform .3s; }
.svc:hover { border-color: #0d1dff40; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.svc-sites { grid-column: span 4; }
.svc-visual { position: relative; height: 230px; overflow: hidden; background: radial-gradient(70% 90% at 80% 0%, #0d1dff14, transparent 70%), var(--paper); }
.svc-body { display: grid; gap: 8px; padding: 24px 28px 28px; }
.svc-num { color: var(--blue); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.svc h3 { font-size: clamp(22px, 2vw, 28px); }
.svc p { font-size: 15.5px; }
.svc-arrow { position: absolute; right: 22px; bottom: 24px; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); transition: background .3s, color .3s, transform .3s; }
.svc:hover .svc-arrow { border-color: var(--blue); background: var(--blue); color: white; transform: rotate(45deg); }
.svc-body { padding-right: 80px; }
.svc-sites .mock-browser { position: absolute; left: 7%; top: 30px; width: 72%; transition: transform .6s; }
.svc-sites .mock-phone { right: 7%; top: 64px; width: 17%; transition: transform .6s; }
.svc-sites:hover .mock-browser { transform: translateY(-6px); }
.svc-sites:hover .mock-phone { transform: translateY(-14px) rotate(-3deg); }
.svc-app .mock-browser { position: absolute; left: 10%; top: 30px; width: 92%; transition: transform .6s; }
.svc-app:hover .mock-browser { transform: translate(-4%, -6px); }

.mock-sheet { position: absolute; left: 12%; top: 26px; display: grid; gap: 7px; width: 62%; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-lg); }
.ms-title { color: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.ms-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 8px; background: var(--paper); font-size: 12px; }
.ms-row b { color: var(--ink-2); font-weight: 700; }
.ms-row i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #17b26a; color: white; font-style: normal; font-size: 9px; }
.ms-channels { position: absolute; right: 8%; top: 46px; display: grid; gap: 10px; }
.ms-channels span { padding: 6px 12px; border-radius: 999px; background: var(--ink); color: white; font-size: 12px; font-weight: 800; box-shadow: var(--shadow); }
.ms-channels span:nth-child(2) { background: var(--blue); transform: translateX(-10px); }
.ms-channels span:nth-child(3) { background: white; color: var(--ink); }
.has-motion .svc-pim .ms-row i { animation: pop-check 4s ease-in-out infinite; animation-delay: calc(var(--d, 0) * .3s); }
.ms-row:nth-child(3) i { --d: 1; } .ms-row:nth-child(4) i { --d: 2; } .ms-row:nth-child(5) i { --d: 3; }
@keyframes pop-check { 0%, 8% { transform: scale(0); } 16%, 100% { transform: scale(1); } }

.mock-flow { position: absolute; inset: 26px 14% auto; display: grid; gap: 14px; }
.mf-step { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow); color: var(--ink-2); font-size: 13px; font-weight: 700; }
.mf-step:not(:last-child)::after { content: ""; position: absolute; left: 24px; top: 100%; width: 2px; height: 14px; background: var(--blue); }
.mf-step i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-style: normal; font-size: 11px; }
.has-motion .svc-auto .mf-step { animation: flow-lit 4.5s ease-in-out infinite; animation-delay: calc(var(--d, 0) * .6s); }
.mf-step:nth-child(2) { --d: 1; } .mf-step:nth-child(3) { --d: 2; }
@keyframes flow-lit { 0%, 100% { border-color: var(--line); } 12%, 30% { border-color: var(--blue); box-shadow: 0 0 0 4px #0d1dff1a, var(--shadow); } }

.mock-ai { position: absolute; left: 12%; right: 12%; top: 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-lg); }
.mock-ai img { width: 100%; height: auto; transition: transform 1.2s; }
.svc-seo:hover .mock-ai img { transform: translateY(-14%); }
.mock-badge { position: absolute; right: 7%; bottom: 18px; padding: 7px 12px; border-radius: 999px; background: var(--blue); box-shadow: var(--shadow-lg); color: white; font-size: 12px; font-weight: 800; transform: rotate(-3deg); }

/* Réalisations */
.feature-case { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 48px; overflow: hidden; padding: 48px 0 48px 48px; border-radius: 28px; background: var(--ink); color: white; transition: transform .4s; }
.feature-case:hover { transform: translateY(-4px); }
.fc-copy { display: grid; justify-items: start; gap: 14px; }
.fc-copy .card-tag { color: #aab2ff; }
.fc-copy h3 { color: white; font-size: clamp(28px, 3vw, 42px); line-height: 1.08; }
.fc-copy p { color: #c4cbd6; }
.fc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; padding: 0; list-style: none; }
.fc-meta li { padding: 6px 12px; border: 1px solid #ffffff26; border-radius: 999px; color: #e2e6ff; font-size: 13px; font-weight: 700; }
.fc-link { display: inline-flex; gap: 8px; padding: 12px 20px; border-radius: 999px; background: var(--blue); font-weight: 700; font-size: 15px; }
.fc-visual { position: relative; padding: 0 0 30px; }
.fc-visual .mock-browser { width: 108%; border-color: #ffffff1a; transform: rotate(-2deg) translateX(4%); transition: transform .6s; }
.fc-visual .mock-phone { left: -4%; bottom: 0; width: 20%; border-color: #ffffff; transition: transform .6s; }
.feature-case:hover .fc-visual .mock-browser { transform: rotate(0) translateX(2%); }
.feature-case:hover .fc-visual .mock-phone { transform: translateY(-10px) rotate(-4deg); }
.case-grid-2 { grid-template-columns: 1fr 1fr; margin-top: 20px; }
.also { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.also-label { margin-right: 6px; color: var(--soft); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.also a { padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink-2); font-size: 14px; font-weight: 700; transition: border-color .25s, color .25s; }
.also a:hover { border-color: var(--blue); color: var(--blue); }

/* Chiffres sur fond sombre */
.stats-ink { padding: 0; }
.stats-ink .stats-grid { border: 0; background: #ffffff1a; background-color: var(--ink); }
.stats-ink .stat { background: var(--ink); }
.stats-ink .stat:hover { background: #131d33; }
.stats-ink .stat-num { color: white; }
.stats-ink .stat:first-child .stat-num { color: #8f98ff; }
.stats-ink .stat-label { color: #9aa4b4; }

/* Méthode en frise */
.method-title { margin: 72px 0 28px; font-size: clamp(24px, 2.4vw, 32px); }
.steps-line { position: relative; }
.steps-line .process-step { border: 0; background: transparent; box-shadow: none; padding: 0 12px 0 0; }
.steps-line .process-step::after { top: 20px; left: 52px; right: 12px; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px); }
.steps-line .step-number { position: relative; z-index: 1; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px var(--blue-soft); }

@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc, .svc-sites { grid-column: span 1; }
  .svc-sites { grid-column: 1 / -1; }
  .feature-case { grid-template-columns: 1fr; padding: 36px 0 0 36px; }
  .fc-copy { padding-right: 36px; }
}
@media (max-width: 720px) {
  .svc-grid, .case-grid-2 { grid-template-columns: 1fr; }
  .svc-visual { height: 200px; }
  .feature-case { padding: 28px 0 0 24px; border-radius: 22px; }
  .fc-copy { padding-right: 24px; }
  .steps-line .process-step::after { display: none; }
}
.work-home { padding-bottom: 72px; }
.why-section .pillars { margin-bottom: 8px; }
.steps-line .process-step.has-spot { background: transparent; }
.steps-line .process-deliverable { border-top: 0; padding-top: 0; color: var(--blue-dark); }

/* ===== L'équipe en brigade de cuisine ===== */
.brigade .person { position: relative; overflow: hidden; gap: 6px; padding: 26px 24px 28px; transition: transform .35s, box-shadow .35s, border-color .35s; }
.brigade .person:hover { border-color: #0d1dff40; box-shadow: var(--shadow-lg); transform: translateY(-4px) rotate(-.6deg); }
.brigade .person:nth-child(even):hover { transform: translateY(-4px) rotate(.6deg); }
.brigade .avatar { width: 84px; height: 84px; margin-bottom: 10px; box-shadow: 0 0 0 4px white, 0 0 0 5px var(--line); }
.brigade .sticker { position: absolute; left: 86px; top: 20px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: white; box-shadow: var(--shadow); font-size: 20px; line-height: 1; transform: rotate(-8deg); transition: transform .4s cubic-bezier(.2, .9, .3, 1.4); }
.brigade .person:hover .sticker { transform: rotate(10deg) scale(1.15); }
.brigade .alias { margin-bottom: 2px; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: white; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.brigade .person b { font-size: 17px; line-height: 1.25; }
.brigade .role { color: var(--blue-dark); font-size: 13px; font-weight: 800; }
.brigade .quip { margin-top: 6px; color: var(--muted); font-size: 13.5px; font-style: italic; line-height: 1.5; }
.brigade .person em { margin-top: 10px; }
.brigade [data-person="bryann-lucas"] .alias { background: linear-gradient(120deg, var(--blue), #7b5cff); }

/* Le tacos du chef : caché dans le coin, il sort au survol. */
.taco { position: absolute; right: -14px; bottom: -16px; font-size: 34px; line-height: 1; opacity: .9; transform: rotate(-25deg) translate(-12px, -10px); transition: transform .5s cubic-bezier(.2, .9, .3, 1.4); cursor: default; user-select: none; }
.person:hover .taco { transform: rotate(-12deg) translate(-22px, -22px); }
.taco:hover { animation: taco-wiggle .5s ease-in-out 2; }
@keyframes taco-wiggle { 0%, 100% { transform: rotate(-12deg) translate(-22px, -22px); } 25% { transform: rotate(-24deg) translate(-22px, -26px) scale(1.15); } 75% { transform: rotate(0deg) translate(-22px, -26px) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .brigade .person, .brigade .sticker, .taco { transition: none; } .taco:hover { animation: none; } }
.brigade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brigade .person > .alias { color: white; font-size: 13px; }
.brigade .person > .role { color: var(--blue-dark); font-size: 13px; }
.brigade .person > .quip { color: var(--muted); font-size: 14px; }
.brigade .sticker, .taco { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
@media (max-width: 900px) { .brigade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .brigade { grid-template-columns: 1fr; } }
.brigade .person > .sticker { font-size: 20px; }
.brigade .person > .taco { font-size: 34px; }

/* ===== Pages de prestations ===== */
.svc-hero { position: relative; overflow: hidden; padding: 96px 0 clamp(72px, 9vw, 120px); }
.svc-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(45% 60% at 80% 30%, #0d1dff1a, transparent 70%), radial-gradient(35% 45% at 5% 95%, #7b5cff14, transparent 70%), linear-gradient(#0b12200a 1px, transparent 1px) 0 0 / 100% 64px, linear-gradient(90deg, #0b12200a 1px, transparent 1px) 0 0 / 64px 100%; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.svc-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 5vw, 80px); }
.svc-hero-copy { display: grid; justify-items: start; gap: 24px; }
.svc-hero .eyebrow { padding: 7px 14px 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: white; box-shadow: var(--shadow-sm); color: var(--ink-2); font-size: 13px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.svc-hero .eyebrow::before { display: none; }
.svc-hero h1 { font-size: clamp(40px, 4.4vw, 66px); line-height: 1.02; letter-spacing: -.05em; }
.svc-hero h1 > span:not(.sw) { color: var(--blue); }
.svc-hero-copy > p:not(.eyebrow) { max-width: 520px; font-size: 18px; line-height: 1.75; }

.hv { position: relative; min-height: 440px; }
.hv-chip { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border: 1px solid var(--line); border-radius: 999px; background: white; box-shadow: var(--shadow-lg); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; animation: float 6s ease-in-out infinite; }
.hv-chip i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #17b26a; color: white; font-style: normal; font-size: 11px; }
.hv-chip.c2 { animation-delay: -2s; } .hv-chip.c3 { animation-delay: -4s; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hv-panel { position: absolute; z-index: 3; display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow-lg); }
.hv-panel > b { color: var(--ink); font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.hv-front { position: relative; z-index: 2; margin: 0; }

/* Sites */
.hv-site .hv-front { width: 86%; margin: 40px 0 0 4%; }
.hv-back { position: absolute; z-index: 1; width: 62%; margin: 0; opacity: .9; }
.hv-back.b1 { right: 0; top: 0; transform: rotate(4deg); }
.hv-back.b2 { right: 6%; bottom: 6px; transform: rotate(-3deg); }
.hv-site .mock-phone { z-index: 3; right: 2%; bottom: 0; width: 22%; }
.hv-site .c1 { left: -10px; top: 14px; } .hv-site .c2 { left: 8%; bottom: 20px; } .hv-site .c3 { right: 18%; top: -6px; }

/* Applications */
.hv-app .hv-front { width: 92%; margin-top: 30px; }
.hv-tiers { right: 0; bottom: 10px; width: 210px; }
.hv-tiers small { margin-top: -4px; color: var(--soft); font-size: 11px; font-weight: 700; }
.hv-progress { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.hv-progress i { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #7b5cff); transform-origin: left; animation: fill 6s ease-in-out infinite; }
@keyframes fill { 0% { transform: scaleX(.08); } 70%, 100% { transform: scaleX(1); } }
.tier { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--paper); color: var(--muted); font-size: 13px; font-weight: 700; animation: tier 6s ease-in-out infinite; }
.tier i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--line); color: white; font-style: normal; font-size: 10px; animation: tier-dot 6s ease-in-out infinite; }
.tier.t2, .tier.t2 i { animation-delay: 1.2s; } .tier.t3, .tier.t3 i { animation-delay: 2.4s; }
@keyframes tier { 0%, 20% { background: var(--paper); color: var(--muted); } 30%, 90% { background: var(--blue-soft); color: var(--blue-dark); } 100% { background: var(--paper); color: var(--muted); } }
@keyframes tier-dot { 0%, 20% { background: var(--line); } 30%, 90% { background: var(--blue); } 100% { background: var(--line); } }
.hv-app .c1 { left: 0; bottom: 30px; } .hv-app .c2 { left: 6%; top: 0; }

/* Automatisation */
.hv-flow { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; padding: 40px 0 50px; }
.hv-col { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: var(--shadow-lg); }
.hv-col.is-dark { border-color: var(--ink); background: var(--ink); }
.hv-col-title { margin-bottom: 4px; color: var(--soft); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hv-row { display: grid; gap: 1px; padding: 9px 11px; border-radius: 10px; background: var(--paper); font-size: 13px; }
.hv-row b { color: var(--ink); font-weight: 700; }
.hv-row small { color: var(--soft); font-size: 11px; }
.is-dark .hv-row { grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; background: #ffffff10; opacity: .25; animation: arrive 6s ease-in-out infinite; }
.is-dark .hv-row b { color: white; } .is-dark .hv-row small { grid-column: 2; color: #9aa4b4; }
.is-dark .hv-row i { grid-row: span 2; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #17b26a; color: white; font-style: normal; font-size: 11px; }
.hv-col:not(.is-dark) .hv-row { animation: leave 6s ease-in-out infinite; }
.hv-row.r2 { animation-delay: 1s !important; } .hv-row.r3 { animation-delay: 2s !important; } .hv-row.r4 { animation-delay: 3s !important; }
@keyframes arrive { 0%, 10% { opacity: .25; transform: translateX(-8px); } 18%, 88% { opacity: 1; transform: none; } 100% { opacity: .25; } }
@keyframes leave { 0%, 6% { box-shadow: inset 3px 0 var(--blue); } 14%, 100% { box-shadow: none; opacity: .8; } }
.hv-pipe { position: relative; height: 2px; margin: 0 6px; background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 12px); }
.hv-pipe i { position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px #0d1dff26; animation: packet 1s linear infinite; }
@keyframes packet { to { left: calc(100% - 12px); } }
.hv-flow .c1 { left: 50%; bottom: 0; transform: translateX(-50%); animation: none; }

/* SEO */
.hv-seo .hv-front { width: 74%; max-height: 420px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: white; box-shadow: var(--shadow-lg); }
.hv-seo .hv-front img { width: 100%; height: auto; }
.hv-seo .mock-badge { z-index: 4; left: 46%; right: auto; bottom: auto; top: 18px; }
.hv-trend { right: 0; bottom: 20px; width: 250px; gap: 2px; }
.hv-trend small { color: var(--soft); font-size: 11px; font-weight: 700; }
.hv-trend b { color: var(--blue); font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1.05; letter-spacing: -.04em; }
.hv-trend > span { color: var(--muted); font-size: 12px; font-weight: 700; }
.hv-trend svg { width: 100%; height: 70px; margin-top: 6px; }
.hv-trend .cv-spark-area { fill: #0d1dff14; }
.hv-trend .cv-spark-line { fill: none; stroke: var(--blue); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2.4s .4s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* PIM */
.hv-pim { display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: 36px; padding: 50px 0; }
.hv-sheet { position: relative; gap: 9px; padding: 20px; }
.hs-head { display: flex; justify-content: space-between; align-items: center; }
.hs-head b { color: var(--ink); font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.hs-head em { color: var(--soft); font-size: 12px; font-style: normal; font-weight: 700; }
.hs-bar { height: 8px; margin-bottom: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); }
.hs-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #17b26a); transform-origin: left; animation: fill 6s ease-in-out infinite; }
.hs-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--paper); font-size: 13px; }
.hs-row b { color: var(--ink-2); font-weight: 700; }
.hs-row i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #17b26a; color: white; font-style: normal; font-size: 10px; transform: scale(0); animation: pop 6s ease-in-out infinite; }
.hs-row.h2 i { animation-delay: .8s; } .hs-row.h3 i { animation-delay: 1.6s; } .hs-row.h4 i { animation-delay: 2.4s; } .hs-row.h5 i { animation-delay: 3.2s; }
@keyframes pop { 0%, 8% { transform: scale(0); } 14%, 92% { transform: scale(1); } 100% { transform: scale(0); } }
.hv-channels { position: relative; display: grid; gap: 12px; }
.hv-channels::before { content: ""; position: absolute; left: -36px; top: 10%; bottom: 10%; width: 2px; background: repeating-linear-gradient(var(--blue) 0 6px, transparent 6px 12px); }
.hv-channels span { position: relative; padding: 10px 16px; border-radius: 999px; background: var(--ink); box-shadow: var(--shadow); color: white; font-size: 13px; font-weight: 800; text-align: center; }
.hv-channels span::before { content: ""; position: absolute; left: -36px; top: 50%; width: 36px; height: 2px; background: var(--blue); }
.hv-channels span:nth-child(2) { background: var(--blue); }
.hv-channels span:nth-child(4) { background: white; color: var(--ink); }
.hv-pim .c1 { left: 0; top: 0; } .hv-pim .c2 { left: 14%; bottom: 0; animation-delay: -3s; }

/* Offres en cartes */
.offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.offer-grid.offers-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offer { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: white; transition: border-color .3s, box-shadow .3s, transform .3s; }
.offer:hover { border-color: #0d1dff40; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.offer-num { color: var(--blue); font-family: var(--font-display); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -.05em; -webkit-text-stroke: 1.5px var(--blue); color: transparent; }
.offer h3 { font-size: 26px; }
.offer-tag { margin-top: -6px; color: var(--blue-dark); font-size: 15px; font-weight: 700; }
.offer p:not(.offer-tag) { font-size: 15.5px; }
.offer-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding: 12px 0 0; list-style: none; }
.offer-chips li { padding: 5px 10px; border-radius: 999px; background: var(--surface-soft); color: var(--ink-2); font-size: 12px; font-weight: 700; }

/* Approche en tuiles */
.prose-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.prose-lead { grid-column: 1 / -1; font-size: 18px; }
.prose-lead p { color: var(--ink-2); font-size: 18px; line-height: 1.75; }
.ptile { display: grid; align-content: start; gap: 10px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.ptile:last-child:nth-child(odd) { grid-column: 1 / -1; }
.prose-lead ~ .ptile:last-child:nth-child(odd) { grid-column: auto; }
.prose-lead ~ .ptile:last-child:nth-child(even) { grid-column: 1 / -1; }
.ptile-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-size: 13px; font-weight: 800; }
.ptile h3 { font-size: 21px; line-height: 1.25; }
.ptile p, .ptile li { font-size: 15px; line-height: 1.7; }
.ptile ul { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.ptile li { position: relative; padding-left: 26px; color: var(--muted); }
.ptile li::before { content: "✓"; position: absolute; left: 0; top: 3px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 10px; font-weight: 800; }
.ptile strong { color: var(--ink); }
.prose-section .prose-grid { grid-template-columns: .7fr 1.3fr; gap: 64px; }

/* Cas SEO à la une */
.fc-facts { display: grid; gap: 14px; margin: 4px 0 8px; }
.fc-facts dt { color: #aab2ff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.fc-facts dd { margin: 4px 0 0; color: #e2e6ff; font-size: 16px; line-height: 1.6; }
.fc-ai { align-self: stretch; min-height: 340px; }
.fc-ai .mock-ai { left: 8%; right: 8%; top: 0; }
.fc-ai .mock-badge { right: 10%; bottom: 40px; }
.steps-section { padding-top: var(--section-space); }

@media (max-width: 1100px) {
  .svc-hero-grid { grid-template-columns: 1fr; }
  .hv { max-width: 640px; }
  .offer-grid, .offer-grid.offers-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose-section .prose-grid { grid-template-columns: 1fr; gap: 32px; }
  .prose-section .prose-aside { position: static; }
}
@media (max-width: 720px) {
  .svc-hero { padding-top: 76px; }
  .hv { min-height: 340px; }
  .hv-chip { font-size: 12px; }
  .hv-flow { grid-template-columns: 1fr 34px 1fr; }
  .hv-row small { display: none; }
  .hv-trend { width: 200px; }
  .hv-pim { grid-template-columns: 1fr; gap: 16px; }
  .hv-channels { grid-template-columns: repeat(2, 1fr); }
  .hv-channels::before, .hv-channels span::before { display: none; }
  .offer-grid, .offer-grid.offers-4, .prose-tiles { grid-template-columns: 1fr; }
  .ptile:last-child:nth-child(odd), .prose-lead ~ .ptile:last-child:nth-child(even) { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .hv *, .hv-chip { animation: none !important; }
  .hs-row i, .hv-trend .cv-spark-line { transform: none; stroke-dashoffset: 0; }
  .is-dark .hv-row { opacity: 1; }
}
.hv-trend svg.cv-spark { position: static; inset: auto; display: block; width: 100%; height: 70px; opacity: 1; }
.logo-santa { height: 30px; }

/* ===== Ligne d'horizon de Nantes (pied de page) ===== */
.skyline { padding: 8px 0 28px; }
.skyline-svg { display: block; width: 100%; height: auto; overflow: visible; }
.skyline-svg .sk { stroke: #ffffff59; stroke-width: 2; transition: stroke .3s; }
.skyline-svg .sk:hover { stroke: white; }
.skyline-svg .sk-fill { fill: var(--dark); }
.skyline-svg .sk-thin { stroke-width: 1.2; opacity: .7; }
.skyline-svg .sk-lu { stroke: #8f98ff; }
.skyline-svg .sk-titan { stroke: #ffd23f; }
.skyline-svg .sk-buren circle:nth-of-type(1) { stroke: #ff6a8a; } .skyline-svg .sk-buren circle:nth-of-type(2) { stroke: #8f98ff; } .skyline-svg .sk-buren circle:nth-of-type(3) { stroke: #3ddc97; }
.skyline-svg .sk-ground { stroke: #ffffff2e; }
.skyline-caption { margin-top: 14px; color: #8792a3; font-size: 13px; text-align: center; }
.skyline-caption .lu { color: #aab2ff; font-weight: 700; }
.skyline-caption .titan { color: #ffd23f; font-weight: 700; }
/* Le dessin se trace quand le pied de page apparaît. */
.has-motion .skyline-svg path, .has-motion .skyline-svg rect, .has-motion .skyline-svg circle, .has-motion .skyline-svg ellipse { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.4, 0, .2, 1); }
.has-motion .skyline.is-drawn .skyline-svg path, .has-motion .skyline.is-drawn .skyline-svg rect, .has-motion .skyline.is-drawn .skyline-svg circle, .has-motion .skyline.is-drawn .skyline-svg ellipse { stroke-dashoffset: 0; }
.has-motion .skyline-svg .sk:nth-of-type(3) * { transition-delay: .15s; } .has-motion .skyline-svg .sk:nth-of-type(4) * { transition-delay: .3s; } .has-motion .skyline-svg .sk:nth-of-type(5) * { transition-delay: .45s; } .has-motion .skyline-svg .sk:nth-of-type(6) * { transition-delay: .6s; } .has-motion .skyline-svg .sk:nth-of-type(7) * { transition-delay: .75s; } .has-motion .skyline-svg .sk:nth-of-type(8) * { transition-delay: .9s; }
@media (max-width: 720px) { .skyline { margin-inline: -12px; } .skyline-caption { font-size: 12px; } }

/* Tampon « Fait à Nantes » sur l'agenda de l'accueil */
.nantes-stamp { position: absolute; z-index: 4; left: -58px; bottom: -54px; width: 132px; height: 132px; filter: drop-shadow(0 12px 24px #0b122033); transform: rotate(-10deg); }
.nantes-stamp .stamp-bg { fill: white; stroke: var(--line); }
.nantes-stamp .stamp-inner { fill: var(--blue-soft); }
.nantes-stamp text { fill: var(--ink); font: 800 10.5px Manrope, sans-serif; letter-spacing: .08em; }
.nantes-stamp .stamp-ring { transform-origin: 60px 60px; animation: spin 24s linear infinite; }
.nantes-stamp .stamp-lu { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nantes-stamp .stamp-lu circle { fill: var(--blue); stroke: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1100px) { .nantes-stamp { left: auto; right: -12px; bottom: auto; top: -48px; width: 96px; height: 96px; } }
@media (prefers-reduced-motion: reduce) { .nantes-stamp .stamp-ring { animation: none; } }
.cursor-bubble { width: 92px; height: 92px; margin: -46px 0 0 -46px; font-size: 12px; }

/* Audit SEO : plan d'action qui se remplit */
.hv-audit { padding: 30px 0 40px; }
.hv-report { position: relative; inset: auto; width: 78%; gap: 8px; padding: 20px; overflow: hidden; }
.hr-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.hr-head b { color: var(--ink); font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.hr-head em { padding: 3px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--soft); font-size: 11px; font-style: normal; font-weight: 800; }
.hr-row { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--paper); font-size: 13px; animation: hr-in 7s ease-in-out infinite; }
.hr-row b { color: var(--ink-2); font-weight: 700; }
.hr-row i { justify-self: start; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; }
.p-high { background: #ffe4d4; color: #b5400e; } .p-mid { background: var(--blue-soft); color: var(--blue-dark); } .p-low { background: #e6f7ef; color: #11804b; }
.hr-row.r2 { animation-delay: .5s; } .hr-row.r3 { animation-delay: 1s; } .hr-row.r4 { animation-delay: 1.5s; } .hr-row.r5 { animation-delay: 2s; }
@keyframes hr-in { 0%, 4% { opacity: 0; transform: translateX(-10px); } 10%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.hr-scan { position: absolute; left: 0; right: 0; top: 0; height: 60px; background: linear-gradient(transparent, #0d1dff14 70%, #0d1dff55); border-bottom: 2px solid var(--blue); pointer-events: none; animation: hr-scan 7s ease-in-out infinite; }
@keyframes hr-scan { 0% { transform: translateY(-60px); opacity: 0; } 5% { opacity: 1; } 40% { transform: translateY(330px); opacity: 1; } 46%, 100% { transform: translateY(330px); opacity: 0; } }
.hv-matrix { right: 0; bottom: 0; width: 190px; gap: 6px; padding: 14px; }
.hv-matrix small { color: var(--soft); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hv-matrix .hm-x { justify-self: end; }
.hm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.hm-grid i { display: grid; place-items: center; min-height: 52px; padding: 6px; border-radius: 8px; background: var(--paper); font-size: 10.5px; font-style: normal; font-weight: 800; line-height: 1.2; text-align: center; }
.hm-grid .q1 { background: var(--blue); color: white; box-shadow: 0 8px 18px -8px #0d1dff99; }
.hv-audit .c1 { left: 30%; bottom: 6px; }
@media (max-width: 720px) { .hv-report { width: 100%; } .hv-matrix { display: none; } .hr-row { grid-template-columns: 1fr; gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .hr-row { opacity: 1; } .hr-scan { display: none; } }
.hv-audit .c1 { left: 6%; }

/* ===== « Pourquoi Weborizon » : cartes illustrées ===== */
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.why-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: white; transition: border-color .3s, box-shadow .3s, transform .3s; }
.why-card:hover { border-color: #0d1dff40; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.why-visual { position: relative; height: 170px; overflow: hidden; background: radial-gradient(70% 90% at 80% 0%, #0d1dff14, transparent 70%), var(--paper); }
.why-body { display: grid; gap: 8px; padding: 22px 24px 26px; }
.why-body h3 { font-size: 21px; line-height: 1.2; }
.why-body p { font-size: 15px; line-height: 1.65; }

/* 1. Un seul interlocuteur */
.why-people .wp-avatar { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px white, 0 0 0 6px var(--line), var(--shadow-lg); }
.why-people::before { content: ""; position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border: 2px dashed #0d1dff40; border-radius: 50%; animation: spin 30s linear infinite; }
.wp-step { position: absolute; z-index: 1; padding: 5px 10px; border-radius: 999px; background: white; box-shadow: var(--shadow); color: var(--ink-2); font-size: 11.5px; font-weight: 800; white-space: nowrap; transition: background .3s, color .3s; }
.wp-step.s1 { left: 8%; top: 20px; } .wp-step.s2 { right: 6%; top: 52px; } .wp-step.s3 { left: 14%; bottom: 18px; }
.why-card:hover .wp-step { background: var(--blue); color: white; }

/* 2. Développeurs & référenceurs */
.why-code code { position: absolute; inset: 22px 16px auto; display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: var(--ink); box-shadow: var(--shadow-lg); color: #c4cbd6; font: 600 10.5px/1.5 ui-monospace, "Cascadia Code", Consolas, monospace; white-space: nowrap; overflow: hidden; }
.why-code .c-del { color: #ff8a8a; background: #ff4d4d1a; border-radius: 4px; text-decoration: line-through; }
.why-code .c-add { color: #3ddc97; background: #3ddc971a; border-radius: 4px; }
.wc-badge { position: absolute; right: 14px; bottom: 14px; padding: 5px 10px; border-radius: 999px; background: var(--blue); box-shadow: var(--shadow); color: white; font-size: 11px; font-weight: 800; transform: rotate(-3deg); }

/* 3. Rapide par conception */
.ws-window { position: absolute; left: 16px; right: 16px; top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: var(--shadow); }
.ws-load { display: block; height: 3px; background: var(--surface-soft); }
.ws-load i { display: block; height: 100%; background: var(--blue); transform-origin: left; animation: ws-load 3.2s ease-out infinite; }
@keyframes ws-load { 0% { transform: scaleX(0); } 25%, 100% { transform: scaleX(1); } }
.ws-lines { display: grid; gap: 6px; padding: 10px 12px 12px; }
.ws-lines i { height: 7px; border-radius: 4px; background: var(--surface-soft); animation: ws-lines 3.2s ease-out infinite; }
.ws-lines i:nth-child(1) { width: 70%; background: #0d1dff2e; } .ws-lines i:nth-child(2) { width: 90%; } .ws-lines i:nth-child(3) { width: 55%; }
@keyframes ws-lines { 0%, 10% { opacity: 0; } 28%, 100% { opacity: 1; } }
.ws-chips { position: absolute; left: 16px; right: 16px; bottom: 30px; display: flex; flex-wrap: wrap; gap: 5px; }
.ws-chips span { padding: 4px 9px; border-radius: 999px; background: white; box-shadow: var(--shadow-sm); color: var(--ink-2); font-size: 11px; font-weight: 800; }
.why-speed small { position: absolute; left: 16px; bottom: 9px; color: var(--soft); font-size: 10.5px; font-weight: 700; }

/* 4. Ancrés à Nantes */
.why-nantes svg { position: absolute; left: 6%; right: 6%; bottom: 10px; width: 88%; height: auto; }
.why-nantes .sk { stroke-width: 2.4; }
.why-nantes .sk-lu { stroke: var(--blue); }
.why-nantes .sk-titan { stroke: #e0a800; }
.why-nantes .sk-thin { stroke-width: 1.4; opacity: .7; }
.why-nantes .wn-ground { stroke: var(--line-strong); stroke-width: 2; }
.wn-pin { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; background: white; box-shadow: var(--shadow); color: var(--ink-2); font-size: 11.5px; font-weight: 800; }
.wn-pin::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff6a2b; box-shadow: 0 0 0 4px #ff6a2b33; }

@media (max-width: 1100px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .why-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .why-people::before, .ws-load i, .ws-lines i { animation: none; } }
.ws-chips { flex-wrap: nowrap; gap: 4px; bottom: 28px; }
.ws-chips span { padding: 4px 8px; font-size: 10.5px; white-space: nowrap; }
.ws-window { top: 16px; }

/* ===== Page contact ===== */
.hv-local { display: grid; place-items: center; min-height: 0; padding: 20px 0 30px; }
.local-card { width: min(100%, 470px); overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: white; box-shadow: var(--shadow-lg); }
.local-map { display: block; width: 100%; height: auto; background: linear-gradient(#0b12200a 1px, transparent 1px) 0 0 / 100% 32px, linear-gradient(90deg, #0b12200a 1px, transparent 1px) 0 0 / 32px 100%, #f3f5ff; }
.lm-loire { fill: none; stroke: #9fb4ff; stroke-width: 14; stroke-linecap: round; }
.lm-erdre { fill: none; stroke: #9fb4ff; stroke-width: 6; stroke-linecap: round; }
.lm-zone { fill: #0d1dff0d; stroke: #0d1dff40; stroke-width: 1.5; stroke-dasharray: 5 6; }
.lm-pin circle { fill: var(--ink); stroke: white; stroke-width: 3; }
.lm-home circle { fill: var(--blue); }
.lm-home .lm-pulse { fill: none; stroke: var(--blue); stroke-width: 2; transform-origin: 212px 48px; animation: lm-pulse 2.4s ease-out infinite; }
@keyframes lm-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(3); opacity: 0; } }
.lm-pin text { fill: var(--ink); font: 800 14px Manrope, sans-serif; }
.lm-pin .lm-sub { fill: var(--muted); font-size: 11px; font-weight: 700; }
.lm-river { fill: #5d74d6; font: italic 700 11px Manrope, sans-serif; }
.local-lines { display: grid; gap: 6px; padding: 20px 22px 22px; font-style: normal; font-size: 14px; }
.local-lines span { color: var(--muted); }
.local-lines b { display: block; color: var(--ink); font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.local-lines a { justify-self: start; color: var(--blue-dark); font-weight: 700; }
.hv-local .nantes-stamp { left: auto; right: -8px; top: -14px; bottom: auto; width: 116px; height: 116px; }
.hv-local .c1 { left: 0; bottom: 6px; animation-delay: -2s; }

.local-zone { padding-top: var(--section-space); }
.zone-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; }
.zone-card { display: grid; align-content: start; gap: 12px; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.zone-card h3 { font-size: 24px; }
.zone-towns { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.zone-towns li { padding: 7px 13px; border-radius: 999px; background: var(--surface-soft); color: var(--ink-2); font-size: 14px; font-weight: 700; }
.zone-towns li:first-child { background: var(--blue); color: white; }
.zone-card-dark { border-color: var(--ink); background: var(--ink); }
.zone-card-dark h3 { color: white; }
.zone-card-dark p { color: #c4cbd6; }
.zone-card-dark address { margin-top: 6px; padding-top: 16px; border-top: 1px solid #ffffff1f; color: #c4cbd6; font-size: 15px; font-style: normal; line-height: 1.8; }
.zone-card-dark a { color: white; font-weight: 700; }
.contact-hero + .contact-section { padding-top: 0; }
@media (max-width: 900px) { .zone-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .hv-local .nantes-stamp { width: 88px; height: 88px; top: -24px; right: -4px; } }
.local-zone + .trust { margin-top: 88px; }
.trust-light + .stats-ink { padding-top: 40px; }
.work-hero .inline-link { color: white; text-decoration-color: #8f98ff; }
.sh-logos { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; }
.sh-logos > span { display: grid; place-items: center; height: 40px; padding: 0 14px; border-radius: 10px; background: white; }
.sh-logos img { height: 14px; width: auto; }
.sh-logos > span:last-child img { height: 26px; }
.showcase-h + .trust { margin-top: 0; }

/* ===== Vos interlocuteurs (mate-) ===== */
.mate-section { padding-top: var(--section-space); }
.mate-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mate-card { display: grid; grid-template-columns: 120px 1fr; align-items: start; gap: 28px; padding: 34px; border: 1px solid var(--line); border-radius: 24px; background: white; transition: border-color .3s, box-shadow .3s, transform .3s; }
.mate-card:hover { border-color: #0d1dff40; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.mate-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px white, 0 0 0 6px var(--line); }
.mate-body { display: grid; gap: 10px; }
.mate-role { color: var(--blue-dark); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mate-body h3 { margin-top: -4px; font-size: 30px; }
.mate-body > p:not(.mate-role) { font-size: 15.5px; }
.mate-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.mate-facts li { padding: 6px 12px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 13px; font-weight: 600; }
.mate-facts b { color: var(--ink); font-weight: 800; }
.mate-and { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: white; font-family: var(--font-display); font-size: 24px; font-weight: 600; box-shadow: 0 0 0 6px var(--paper), var(--shadow); transform: translate(-50%, -50%); }
@media (max-width: 1100px) { .mate-card { grid-template-columns: 1fr; gap: 20px; } .mate-photo { width: 96px; height: 96px; } }
@media (max-width: 760px) {
  .mate-grid { grid-template-columns: 1fr; gap: 34px; }
  .mate-card { padding: 26px; }
  .mate-body h3 { font-size: 26px; }
}

/* ===== Devis ===== */
.quote-section { padding-top: var(--section-space); }
.quote-panel { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 64px; padding: 56px; border-radius: 28px; background: radial-gradient(70% 90% at 100% 0%, #1c2b6b, transparent 60%), var(--ink); color: white; }
.quote-copy { display: grid; gap: 18px; }
.quote-copy .eyebrow { color: #8f98ff; }
.quote-copy h2 { color: white; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; }
.quote-copy .muted-heading { color: #8a94a8; }
.quote-copy p:not(.eyebrow) { color: #b9c1ce; font-size: 16px; }
.quote-doc { display: grid; gap: 18px; padding: 26px; border-radius: 20px; background: white; color: var(--ink); box-shadow: 0 30px 60px -20px #000a; transform: rotate(1.5deg); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.quote-panel:hover .quote-doc { transform: rotate(0); }
.qd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed var(--line-strong); }
.qd-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.qd-sub { color: var(--soft); font-size: 12.5px; font-weight: 700; }
.qd-rows { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.qd-rows li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px; }
.qd-label { color: var(--ink-2); font-size: 14px; font-weight: 700; }
.qd-bar { grid-row: 2; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--blue) var(--w), var(--surface-soft) var(--w)); }
.qd-step { grid-row: 1 / 3; grid-column: 2; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.qd-step.s1 { background: var(--blue-soft); color: var(--blue-dark); }
.qd-step.s2 { background: var(--surface-soft); color: var(--muted); }
.qd-foot { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--line-strong); color: var(--ink-2); font-size: 13.5px; font-weight: 700; }
.qd-dot { width: 10px; height: 10px; border-radius: 50%; background: #1fb26b; box-shadow: 0 0 0 4px #1fb26b26; }
.quote-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
@media (max-width: 1000px) { .quote-panel { grid-template-columns: 1fr; gap: 40px; padding: 40px; } .quote-doc { transform: none; } }
@media (max-width: 640px) { .quote-panel { padding: 28px 22px; border-radius: 22px; } .quote-doc { padding: 20px; } .quote-notes { grid-template-columns: 1fr; } }

/* ===== Après la mise en ligne ===== */
.after-panel { padding: 56px; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(60% 80% at 0% 0%, var(--blue-soft), transparent 70%), white; }
.after-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: 44px; }
.after-head h2 { margin-top: 18px; font-size: clamp(36px, 4.2vw, 58px); line-height: 1.06; }
.after-head > p { max-width: 420px; font-size: 17px; }
.after-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.after-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: white; transition: border-color .3s, box-shadow .3s, transform .3s; }
.after-card:hover { border-color: #0d1dff40; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.after-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--blue-soft); color: var(--blue); }
.after-card h3 { font-size: 20px; line-height: 1.25; }
.after-card p { font-size: 15px; line-height: 1.65; }
.after-reply { border: 0; background: var(--ink); }
.after-reply h3 { color: white; }
.after-reply p { color: #b9c1ce; }
.after-big { color: white !important; font-family: var(--font-display); font-size: 30px !important; font-weight: 600; line-height: 1 !important; letter-spacing: -.04em; }
.after-big span { color: #8f98ff; font-size: 84px; }
.after-reply .after-note { margin-top: auto; padding-top: 14px; border-top: 1px dashed #ffffff2e; color: #9aa4b4; font-size: 13.5px; }
@media (max-width: 1100px) { .after-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .after-head { flex-direction: column; align-items: flex-start; gap: 18px; } }
@media (max-width: 640px) { .after-panel { padding: 28px 18px; border-radius: 22px; } .after-grid { grid-template-columns: 1fr; } .after-big span { font-size: 68px; } }

/* ===== Popularité et liens ===== */
.links-section { padding-top: var(--section-space); }
.links-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; }
.links-copy { display: grid; gap: 18px; }
.links-copy h2 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; }
.links-copy p:not(.eyebrow) { font-size: 16px; }
.levers { display: grid; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 28px; background: var(--surface-soft); }
.levers-title { margin-bottom: 4px; color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.lever { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px; background: white; box-shadow: var(--shadow-sm); }
.lever > div { display: grid; }
.lever b { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.lever > div span { color: var(--soft); font-size: 13.5px; }
.lever-num { color: var(--soft); font-size: 13px; font-weight: 800; }
.lever-ok { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 13px; font-weight: 800; }
.lever-pop { grid-template-columns: auto 1fr; padding: 20px; background: var(--ink); box-shadow: var(--shadow-lg); }
.lever-pop b { color: white; }
.lever-pop .lever-num, .lever-pop > div span { color: #9aa4b4; }
.lever-graph { grid-column: 1 / -1; width: 100%; height: auto; max-height: 150px; }
.lg-link { fill: none; stroke: #8f98ff; stroke-width: 1.6; stroke-dasharray: 4 5; animation: lg-flow 1.6s linear infinite; }
.lg-node { fill: #1c2433; stroke: #8f98ff; stroke-width: 1.6; }
.lg-site { fill: var(--blue); stroke: #ffffff33; stroke-width: 6; }
.lever-graph text { fill: white; font: 700 11px Manrope, sans-serif; }
@keyframes lg-flow { to { stroke-dashoffset: -18; } }
.lever-tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lever-tags li { padding: 5px 11px; border-radius: 999px; background: #ffffff14; color: #d6dbe4; font-size: 12px; font-weight: 700; }
@media (max-width: 1000px) { .links-grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 640px) { .levers { padding: 18px; border-radius: 22px; } .lever { padding: 14px 16px; } }
@media (prefers-reduced-motion: reduce) { .lg-link { animation: none; } }

/* ===== PIM : fonctions mises en œuvre ===== */
.pimfx-section { padding-top: var(--section-space); }
.pimfx { display: grid; gap: 34px; padding: 48px; border-radius: 28px; background: radial-gradient(70% 90% at 100% 0%, #1c2b6b, transparent 60%), var(--ink); }
.pimfx-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.pimfx-kicker { color: white; font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
.pimfx-case { color: #9aa4b4; font-size: 14px; }
.pimfx-case b { color: white; }
.pimfx-flow { display: grid; grid-template-columns: 1fr 80px 1.1fr 80px 1fr; align-items: center; }
.pf-col { display: grid; gap: 10px; }
.pf-label { color: #8f98ff; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pf-node { display: grid; padding: 12px 16px; border: 1px solid #ffffff1f; border-radius: 14px; background: #ffffff0d; }
.pf-node b { color: white; font-size: 15px; }
.pf-node span { color: #9aa4b4; font-size: 12.5px; }
.pf-core { display: grid; justify-items: center; gap: 6px; padding: 26px 20px; border-radius: 20px; background: white; box-shadow: 0 0 0 8px #ffffff14, 0 30px 60px -20px #000a; text-align: center; }
.pf-core img { width: 112px; height: auto; }
.pf-core b { font-family: var(--font-display); font-size: 34px; font-weight: 600; line-height: 1.1; letter-spacing: -.04em; }
.pf-core span { padding: 4px 10px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); font-size: 12px; font-weight: 800; }
.pf-pipe { position: relative; height: 2px; margin: 0 10px; background: linear-gradient(90deg, #ffffff10, #8f98ff, #ffffff10); }
.pf-pipe i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #8f98ff; box-shadow: 0 0 10px #8f98ff; animation: pf-move 2.4s linear infinite; }
.pf-pipe i:nth-child(2) { animation-delay: .8s; }
.pf-pipe i:nth-child(3) { animation-delay: 1.6s; }
@keyframes pf-move { from { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } to { left: calc(100% - 8px); opacity: 0; } }
.pimfx-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 22px 0 0; border-top: 1px solid #ffffff1a; list-style: none; }
.pimfx-list li { display: grid; align-content: start; gap: 8px; padding: 20px; border-radius: 16px; background: #ffffff0a; color: #b9c1ce; font-size: 14.5px; line-height: 1.6; }
.pimfx-list b { color: white; }
.pf-n { color: #8f98ff; font-size: 12px; font-weight: 800; }
.pimfx-foot { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 32px; margin-top: 28px; }
.pimfx-foot p { font-size: 15px; }
@media (max-width: 1100px) { .pimfx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pimfx-foot { grid-template-columns: 1fr 1fr; } .pimfx-foot .button { justify-self: start; } }
@media (max-width: 860px) {
  .pimfx { padding: 32px 22px; }
  .pimfx-flow { grid-template-columns: 1fr; gap: 0; }
  .pf-pipe { justify-self: center; width: 2px; height: 44px; margin: 6px 0; background: linear-gradient(180deg, #ffffff10, #8f98ff, #ffffff10); }
  .pf-pipe i { left: -3px; animation-name: pf-move-y; }
  .pf-col { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .pf-label { grid-column: 1 / -1; }
}
@keyframes pf-move-y { from { top: 0; opacity: 0; } 15%, 85% { opacity: 1; } to { top: calc(100% - 8px); opacity: 0; } }
@media (max-width: 640px) { .pimfx-list, .pimfx-foot { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pf-pipe i { animation: none; opacity: 0; } }

/* ===== Témoignages (bloc prêt, non publié) ===== */
.tm-section { padding-top: var(--section-space); }
.tm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tm-card { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 34px 30px 28px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.tm-card::before { content: "“"; position: absolute; right: 24px; top: 6px; color: var(--blue-soft); font-family: var(--font-display); font-size: 120px; line-height: 1; }
.tm-card blockquote { position: relative; margin: 0; }
.tm-card blockquote p { color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.tm-card figcaption { display: grid; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.tm-card figcaption span { color: var(--soft); font-size: 14px; }
.tm-draft { align-self: start; padding: 4px 10px; border-radius: 999px; background: #fff4d6; color: #7a5200; font-size: 12px; font-weight: 800; }
@media (max-width: 900px) { .tm-grid { grid-template-columns: 1fr; } }
.pimfx-list li p { color: #b9c1ce; font-size: 14.5px; line-height: 1.6; }
.after-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.after-grid > .after-card:nth-child(3) { grid-column: 1 / 3; }
.after-reply { grid-column: 3; grid-row: 1 / 3; }
.after-reply .after-big span { font-size: 112px; }
@media (max-width: 1100px) { .after-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .after-grid > .after-card:nth-child(3), .after-reply { grid-column: auto; grid-row: auto; } }
@media (max-width: 640px) { .after-grid { grid-template-columns: 1fr; } .after-reply .after-big span { font-size: 72px; } }

/* ===== Devis : appel à l'action ===== */
.quote-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 8px; }
.quote-cta > span { max-width: 260px; color: #9aa4b4; font-size: 14px; line-height: 1.5; }

/* ===== Création : vitesse mesurée ===== */
.ptile-speed { grid-column: 1 / -1; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 28px; }
.ptile-speed .ps-copy { display: grid; align-content: start; gap: 10px; }
.ptile-speed ~ .ptile:last-child { grid-column: auto; }
.speed-demo { display: grid; gap: 14px; padding: 18px; border-radius: 16px; background: var(--surface-soft); }
.sd-window { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: white; box-shadow: var(--shadow-sm); }
.sd-window .mock-bar { align-items: center; }
.sd-window .mock-bar b { margin-left: 8px; color: var(--soft); font-size: 11px; font-weight: 700; }
.speed-demo figcaption { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 1100px) { .ptile-speed { grid-template-columns: 1fr; } }

/* Mesures dans la fenêtre animée (accueil et création) */
.ws-vitals { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; }
.ws-vitals span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; background: #e9f8f0; color: #12804a; font-size: 11px; font-weight: 800; white-space: nowrap; animation: ws-vitals 3.2s ease-out infinite; }
.ws-vitals span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1fb26b; }
.ws-vitals b { color: var(--ink); font-weight: 800; }
.ws-vitals span:nth-child(2) { animation-name: ws-vitals-2; }
@keyframes ws-vitals { 0%, 24% { opacity: 0; transform: translateY(4px) scale(.9); } 32%, 100% { opacity: 1; transform: none; } }
@keyframes ws-vitals-2 { 0%, 30% { opacity: 0; transform: translateY(4px) scale(.9); } 38%, 100% { opacity: 1; transform: none; } }
.why-speed .ws-lines { padding-bottom: 8px; }
.why-speed .ws-lines i:nth-child(2) { display: none; }
.why-speed .ws-vitals { padding-bottom: 10px; }
.speed-demo { padding: 22px; }
.speed-demo .ws-lines { gap: 9px; padding: 16px 18px 14px; }
.speed-demo .ws-lines i { height: 9px; }
.speed-demo .ws-vitals { gap: 10px; padding: 0 18px 18px; }
.speed-demo .ws-vitals span { gap: 8px; padding: 7px 14px 7px 11px; font-size: 15px; }
.speed-demo .ws-vitals span::before { width: 9px; height: 9px; }
@media (prefers-reduced-motion: reduce) { .ws-vitals span { animation: none; } }

/* ===== Accueil : hero en trois piliers ===== */
.hero-pillars .hero-title { font-size: clamp(44px, 4.2vw, 62px); line-height: 1.02; }
.hero-pillars .hero-title > .hl { color: var(--ink); transition: color .6s; }
.hero-pillars .hero-title.is-live > .hl { color: #7f8a9b; }
.hero-pillars .hero-title.is-live > .hl.is-on { color: var(--blue); }
.hp-pillars { position: relative; display: grid; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 28px; background: white; box-shadow: var(--shadow-lg); }
.hp-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hp-tab { position: relative; display: grid; align-content: start; gap: 3px; padding: 14px 16px 20px; overflow: hidden; border: 0; border-radius: 18px; background: transparent; text-align: left; transition: background .3s; }
.hp-tab:hover { background: var(--paper); }
.hp-tab.is-active { background: var(--blue-soft); }
.pl-num { color: var(--soft); font-size: 12px; font-weight: 800; transition: color .3s; }
.pl-name { color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.1; letter-spacing: -.035em; transition: color .3s; }
.pl-promise { color: var(--muted); font-size: 13px; font-weight: 600; line-height: 1.4; }
.hp-tab.is-active .pl-num, .hp-tab.is-active .pl-name { color: var(--blue); }
.pl-progress { position: absolute; left: 16px; right: 16px; bottom: 9px; height: 3px; border-radius: 3px; background: #0d1dff1f; opacity: 0; transition: opacity .3s; }
.pl-progress::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.hp-tab.is-active .pl-progress { opacity: 1; }
.hp-pillars.is-running .hp-tab.is-active .pl-progress::after { animation: pl-fill 8s linear both; }
@keyframes pl-fill { to { transform: scaleX(1); } }
.hp-stage { display: grid; }
.hp-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.hp-panel.is-active { opacity: 1; visibility: visible; transition: opacity .45s .08s; }
.pl-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 6px 6px; }
.pl-links a { padding: 7px 13px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); font-size: 13.5px; font-weight: 700; transition: border-color .2s, background .2s, color .2s; }
.pl-links a:hover { border-color: var(--blue); background: var(--blue); color: white; }
.pv { position: relative; height: 236px; margin: 0; overflow: hidden; border-radius: 16px; background: radial-gradient(70% 90% at 80% 0%, #0d1dff14, transparent 70%), var(--paper); }
.pv-chip { position: absolute; right: 16px; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 9px; border-radius: 999px; background: var(--ink); color: white; font-size: 12.5px; font-weight: 800; box-shadow: var(--shadow); }
.pv-chip i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #1fb26b; font-size: 10px; font-style: normal; }
.hp-panel.is-active .pv-chip { animation: pv-pop .5s cubic-bezier(.2, .9, .3, 1.3) 1.6s both; }
@keyframes pv-pop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
/* Développement : une application qui se construit */
@keyframes pvd-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Automatisation : des tâches qui tournent seules */
.pv-auto { display: grid; align-content: center; gap: 8px; padding: 14px 18px; }
.pva-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-radius: 12px; background: white; box-shadow: var(--shadow-sm); }
.pva-row > span { display: grid; }
.pva-row b { color: var(--ink); font-size: 13.5px; }
.pva-row small { color: var(--soft); font-size: 12px; }
.pva-toggle { position: relative; flex: none; width: 34px; height: 20px; border-radius: 99px; background: var(--line-strong); }
.pva-toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #0b122033; }
.hp-panel.is-active .pva-toggle { animation: pva-bg .3s linear both; }
.hp-panel.is-active .pva-toggle::after { animation: pva-knob .35s cubic-bezier(.2, .9, .3, 1.2) both; }
.hp-panel.is-active .pva-row:nth-child(1) .pva-toggle, .hp-panel.is-active .pva-row:nth-child(1) .pva-toggle::after { animation-delay: .5s; }
.hp-panel.is-active .pva-row:nth-child(2) .pva-toggle, .hp-panel.is-active .pva-row:nth-child(2) .pva-toggle::after { animation-delay: .9s; }
.hp-panel.is-active .pva-row:nth-child(3) .pva-toggle, .hp-panel.is-active .pva-row:nth-child(3) .pva-toggle::after { animation-delay: 1.3s; }
@keyframes pva-bg { to { background: #1fb26b; } }
@keyframes pva-knob { to { transform: translateX(14px); } }
.pv-auto .pv-chip { bottom: 12px; }
/* SEO : votre site remonte en tête */
.pv-seo { display: grid; align-content: start; gap: 10px; padding: 16px 18px; }
.pvs-bar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: white; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.pvs-bar svg { fill: none; stroke: var(--soft); stroke-width: 2.4; stroke-linecap: round; }
.pvs-list { position: relative; display: grid; gap: 6px; }
.pvs-res { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: white; color: var(--muted); font-size: 12.5px; box-shadow: var(--shadow-sm); }
.pv-seo .pv-chip { bottom: 12px; }
.hero-pillars .ht-copy { position: relative; }
.hero-pillars .ht-copy .nantes-stamp { left: 430px; right: auto; top: -38px; bottom: auto; width: 100px; height: 100px; }
@media (max-width: 640px) { .hero-pillars .ht-copy .nantes-stamp { left: auto; right: -6px; top: 84px; width: 76px; height: 76px; } }
@media (max-width: 640px) {
  .hp-pillars { padding: 8px; border-radius: 22px; }
  .hp-tabs { grid-template-columns: 1.3fr 1.3fr .7fr; gap: 4px; }
  .hp-tab { padding: 11px 8px 18px; }
  .pl-name { font-size: 14px; letter-spacing: -.02em; }
  .pl-promise { display: none; }
  .pl-progress { left: 8px; right: 8px; }
  .pv { height: 214px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-panel { transition: none; }
  .hp-panel.is-active .pv-chip, .hp-panel.is-active .pvs-res { animation: none; }
  .hp-panel.is-active .pva-toggle { animation: none; background: #1fb26b; }
  .hp-panel.is-active .pva-toggle::after { animation: none; transform: translateX(14px); }
}

/* Accueil : journal d'automatisations */
.mock-log .mf-step::after { display: none; }
.mock-log .mf-step em { min-width: 34px; color: var(--soft); font-size: 12px; font-style: normal; font-weight: 800; }
.mock-log { gap: 10px; }
/* Automatisation : slogan sous le titre */
.svc-tagline span { white-space: nowrap; }
.svc-hero-copy > p.svc-tagline { margin-top: -8px; color: var(--ink); font-family: var(--font-display); font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; }
.svc-tagline span { color: var(--blue); }
.svc-hero .time-week { align-self: center; }

/* ===== Captures réelles du PIM ===== */
.pim-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.pim-shots figure { display: grid; gap: 14px; margin: 0; }
.pim-shots figcaption { color: var(--muted); font-size: 15px; }
.pim-shots figcaption b { color: var(--ink); }
.pim-shots-note { margin-top: 18px; color: var(--soft); font-size: 13px; }
.pimfx-shots { display: grid; grid-template-columns: 1.15fr .85fr; align-items: start; gap: 18px; }
.pimfx-shots .browser { border-color: #ffffff1f; box-shadow: 0 30px 60px -24px #000c; }
.pimfx-shots .browser:last-child { margin-top: 36px; }
@media (max-width: 760px) { .pim-shots, .pimfx-shots { grid-template-columns: 1fr; } .pimfx-shots .browser:last-child { display: none; } }

/* Accueil, piliers : vraies réalisations */
.pl-desc { padding: 14px 6px 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.pl-links { padding-top: 12px; }
.pvs-bar em { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--soft); font-size: 11px; font-style: normal; font-weight: 700; }
.pvs-label { color: var(--soft); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pvs-res > span { display: grid; min-width: 0; }
.pvs-res b { color: var(--ink); font-size: 13px; }
.pvs-res small { overflow: hidden; color: var(--muted); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.pvs-res > i { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-style: normal; font-weight: 800; }
.pvs-res .pvs-g { background: #eceafd; color: #4a3fb5; font-family: Georgia, serif; font-style: italic; }
.pvs-res .pvs-v { background: #e3f3fb; color: #1478b8; }
.pvs-res > em { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--blue); color: white; font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; }
.pvs-res.r-you { box-shadow: 0 0 0 2px var(--blue), var(--shadow); }
.hp-panel.is-active .pvs-res { animation: pvd-in .5s cubic-bezier(.2, .7, .2, 1) both; }
.hp-panel.is-active .pvs-res:nth-child(1) { animation-delay: .3s; }
.hp-panel.is-active .pvs-res:nth-child(2) { animation-delay: .6s; }
@media (max-width: 640px) { .pvd-chip { display: none; } .pl-desc { font-size: 13.5px; } .pvs-bar em { display: none; } }
@media (prefers-reduced-motion: reduce) { .hp-panel.is-active .pvs-res { animation: none; } }
.pv-seo { gap: 8px; }
.pv-seo .pv-chip { position: static; justify-self: start; margin-top: 4px; }
.hp-panel.is-active .pv-seo .pv-chip { animation-delay: 1s; }
@media (max-width: 640px) { .pv { height: 236px; } .pv-seo .pv-chip { font-size: 11.5px; } }
@media (max-width: 640px) { .pvs-label { display: none; } }

/* Accueil : index des prestations */
.svc-index .x-title { display: grid; gap: 8px; }
.svc-index .x-pillar { color: var(--soft); font-family: Manrope, "Segoe UI", sans-serif; font-size: 12px; font-style: normal; font-weight: 800; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.svc-index .xrow:hover .x-pillar { color: var(--blue); }
.svc-index .x-desc { max-width: 380px; }

/* Piliers, Développement : un site qui se construit */
.pvb-code { position: absolute; left: 16px; top: 18px; bottom: 18px; width: 42%; display: grid; align-content: start; gap: 7px; padding: 12px 14px; border-radius: 12px; background: var(--ink); box-shadow: var(--shadow); font: 600 11.5px/1.3 ui-monospace, "Cascadia Code", Consolas, monospace; }
.pvb-file { margin-bottom: 2px; color: #7f8a9b; font-size: 10.5px; }
.pvb-line { color: #9aa4b4; white-space: nowrap; overflow: hidden; }
.pvb-line b { color: #8f98ff; font-weight: 600; }
.pvb-ok { color: #3ddc97; }
.pvb-site { position: absolute; right: 16px; top: 28px; bottom: -10px; width: 56%; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow-lg); }
.pvb-site .mock-bar { align-items: center; }
.pvb-site .mock-bar b { margin-left: 6px; color: var(--soft); font-size: 10.5px; font-weight: 700; }
.pvb-page { display: grid; gap: 8px; padding: 10px 12px; }
.pvb-nav { display: flex; align-items: center; gap: 6px; }
.pvb-nav em { width: 28px; height: 8px; margin-right: auto; border-radius: 4px; background: var(--blue); }
.pvb-nav i { width: 18px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.pvb-hero { display: grid; gap: 5px; padding: 12px; border-radius: 8px; background: linear-gradient(120deg, var(--blue-soft), #f2f4ff); }
.pvb-hero i { height: 7px; border-radius: 4px; background: var(--ink-2); }
.pvb-hero i:first-child { width: 70%; } .pvb-hero i:nth-child(2) { width: 46%; background: #b3bccb; }
.pvb-hero em { width: 44px; height: 10px; margin-top: 3px; border-radius: 99px; background: var(--blue); }
.pvb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pvb-grid i { height: 34px; border-radius: 6px; background: var(--surface-soft); box-shadow: inset 0 -9px 0 white, inset 0 0 0 1px var(--line); }
.pvb-cta { justify-self: start; padding: 4px 9px; border-radius: 99px; background: var(--ink); color: white; font-size: 9.5px; font-weight: 800; }
.pvb-cursor { position: absolute; left: 40%; top: 60%; color: var(--ink); filter: drop-shadow(0 2px 3px #0b122055); }
.pvb-cursor svg { fill: white; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.pvb-tool { position: absolute; left: 41%; bottom: 22px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #ffd23f; box-shadow: var(--shadow); }
.pvb-tool svg { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; }
.pv-dev .pvd-chip { top: auto; bottom: 14px; right: 16px; }
.hp-panel.is-active .pvb-line { animation: pvb-type .5s steps(14) both; }
.hp-panel.is-active .pvb-line:nth-child(2) { animation-delay: .2s; }
.hp-panel.is-active .pvb-line:nth-child(3) { animation-delay: .8s; }
.hp-panel.is-active .pvb-line:nth-child(4) { animation-delay: 1.4s; }
.hp-panel.is-active .pvb-line:nth-child(5) { animation-delay: 2s; }
.hp-panel.is-active .pvb-line:nth-child(6) { animation-delay: 2.7s; }
@keyframes pvb-type { from { max-width: 0; } to { max-width: 100%; } }
.hp-panel.is-active .pvb-nav, .hp-panel.is-active .pvb-hero, .hp-panel.is-active .pvb-grid i, .hp-panel.is-active .pvb-cta { animation: pvb-drop .5s cubic-bezier(.2, .9, .3, 1.25) both; }
.hp-panel.is-active .pvb-nav { animation-delay: .5s; }
.hp-panel.is-active .pvb-hero { animation-delay: 1.1s; }
.hp-panel.is-active .pvb-grid i:nth-child(1) { animation-delay: 1.7s; } .hp-panel.is-active .pvb-grid i:nth-child(2) { animation-delay: 1.85s; } .hp-panel.is-active .pvb-grid i:nth-child(3) { animation-delay: 2s; }
.hp-panel.is-active .pvb-cta { animation-delay: 2.3s; }
@keyframes pvb-drop { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
.hp-panel.is-active .pvb-cursor { animation: pvb-cursor 3s ease-in-out .3s both; }
@keyframes pvb-cursor { 0% { transform: translate(0, 0); } 25% { transform: translate(60px, -90px); } 45% { transform: translate(110px, -50px); } 70% { transform: translate(40px, 0); } 100% { transform: translate(18px, 34px); } }
.hp-panel.is-active .pvb-tool { animation: pvb-tool 1.2s ease-in-out .4s 3 both; }
@keyframes pvb-tool { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-24deg); } 60% { transform: rotate(12deg); } }
.hp-panel.is-active .pv-dev .pv-chip { animation-delay: 3.1s; }
/* Piliers, SEO : la requête se tape */
.pvs-q { display: inline-flex; }
.pvs-q i { font-style: normal; }
.hp-panel.is-active .pvs-q i { animation: pvs-key .01s linear both; animation-delay: calc(.3s + var(--k) * .12s); }
@keyframes pvs-key { from { visibility: hidden; } to { visibility: visible; } }
.pvs-caret { width: 1.5px; height: 15px; margin-left: 1px; background: var(--blue); animation: pvs-blink 1s steps(1) infinite; }
@keyframes pvs-blink { 50% { opacity: 0; } }
.hp-panel.is-active .pvs-bar em, .hp-panel.is-active .pvs-label { animation: pvd-in .4s ease both 1.4s; }
.hp-panel.is-active .pvs-res:nth-child(1) { animation-delay: 1.7s; }
.hp-panel.is-active .pvs-res:nth-child(2) { animation-delay: 2s; }
.hp-panel.is-active .pvs-res > em { animation: pv-pop .45s cubic-bezier(.2, .9, .3, 1.4) 2.5s both; }
.hp-panel.is-active .pv-seo .pv-chip { animation-delay: 3s; }
@media (max-width: 640px) { .pvb-code { width: 46%; font-size: 10.5px; } .pvb-site { width: 52%; } .pvb-tool { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hp-panel.is-active .pvb-line, .hp-panel.is-active .pvb-nav, .hp-panel.is-active .pvb-hero, .hp-panel.is-active .pvb-grid i, .hp-panel.is-active .pvb-cta, .hp-panel.is-active .pvb-cursor, .hp-panel.is-active .pvb-tool, .hp-panel.is-active .pvs-q i, .hp-panel.is-active .pvs-bar em, .hp-panel.is-active .pvs-label, .hp-panel.is-active .pvs-res > em, .pvs-caret { animation: none; }
}
.pv, .hp-pillars .pv { height: 252px; }
.pvb-page { gap: 7px; padding: 9px 12px; }
.pvb-hero { padding: 10px 12px; }
.pvb-grid i { height: 28px; box-shadow: inset 0 -8px 0 white, inset 0 0 0 1px var(--line); }
.pvb-tool { left: calc(44% - 22px); top: 10px; bottom: auto; }
@media (max-width: 640px) { .pv, .hp-pillars .pv { height: 252px; } }
.pv-seo { padding: 12px 16px; gap: 6px; }
.pv-seo .pvs-res { padding: 7px 12px; }
.pvs-caret { margin-left: -7px; }

/* ===== Accueil : vos besoins, nos réalisations ===== */
.needs { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: clamp(28px, 4vw, 56px); }
.needs-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.needs-list .need { border-bottom: 1px solid var(--line-strong); }
.need { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; width: 100%; padding: 22px 16px 22px 8px; border: 0; background: none; text-align: left; transition: background .3s, padding .3s; }
.need::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--blue); transform: scaleY(0); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.need-num { grid-row: span 2; padding-top: 7px; color: var(--soft); font-size: 13px; font-weight: 800; }
.need-q { color: var(--ink); font-family: var(--font-display); font-size: clamp(20px, 1.9vw, 26px); font-weight: 600; line-height: 1.2; letter-spacing: -.03em; transition: color .3s; }
.need-a { color: var(--muted); font-size: 14px; font-weight: 700; }
.need:hover .need-q { color: var(--blue); }
.need.is-active { background: white; }
.need.is-active::before { transform: scaleY(1); }
.need.is-active .need-num, .need.is-active .need-q { color: var(--blue); }
.need.is-active .need-a { color: var(--ink-2); }
.needs-stage { position: sticky; top: 110px; display: grid; }
.need-panel { grid-area: 1 / 1; display: grid; gap: 22px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s, transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s .35s; }
.need-panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .4s .05s, transform .5s cubic-bezier(.2, .7, .2, 1) .05s; }
.need-shot { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper); }
.need-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.need-info { display: grid; justify-items: start; gap: 8px; }
.need-info h3 { font-size: clamp(26px, 2.4vw, 34px); }
.need-info p { font-size: 16px; }
.need-proof { padding: 8px 14px; border-radius: 12px; background: var(--blue-soft); color: var(--ink-2) !important; font-size: 14px !important; }
.need-proof b { color: var(--blue-dark); }
.need-info .text-link { min-height: 0; padding: 4px 0; }
@media (max-width: 900px) {
  .needs { grid-template-columns: 1fr; }
  .needs-stage { position: static; order: -1; }
  .need { padding: 16px 12px 16px 6px; }
}
@media (prefers-reduced-motion: reduce) { .need-panel, .need-panel.is-active { transition: none; transform: none; } }
.pvs-res .pvs-b { background: #fff1e6; color: #c25a12; }
.hp-panel.is-active .pvs-res:nth-child(3) { animation-delay: 2.3s; }
.pv, .hp-pillars .pv { height: 276px; }
@media (max-width: 640px) { .pv, .hp-pillars .pv { height: 276px; } }

/* Piliers, Développement v2 : le site se construit, puis les outils s'y branchent */
.pvs-label { display: none; }
.pvb-code, .pvb-tools { width: 36%; }
.pvb-site { width: 52%; z-index: 2; }
.pvb-grid { gap: 5px; }
.pvb-p { display: grid; justify-items: center; gap: 1px; padding: 6px 4px 5px; border-radius: 7px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.pvb-p svg { width: 20px; height: 20px; margin-bottom: 2px; stroke: none; }
.pvb-p.p1 svg { fill: #3ddc97; } .pvb-p.p2 svg { fill: #ff8a5b; } .pvb-p.p3 svg { fill: var(--blue); }
.pvb-p b { color: var(--ink); font-size: 9.5px; line-height: 1.2; }
.pvb-p small { color: var(--muted); font-size: 8.5px; line-height: 1.2; white-space: nowrap; }
.pvb-tools { position: absolute; left: 16px; top: 18px; bottom: 18px; z-index: 1; display: grid; align-content: center; gap: 10px; }
.pvb-t { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 10px; padding: 10px 12px; border-radius: 12px; background: white; box-shadow: var(--shadow); }
.pvb-t i { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.pvb-t b { color: var(--ink); font-size: 13px; line-height: 1.1; }
.pvb-t small { color: var(--muted); font-size: 11px; line-height: 1.2; }
.pvb-t::after { content: ""; position: absolute; left: 100%; top: 50%; width: 120px; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, var(--blue) 0 5px, transparent 5px 10px); background-size: 20px 2px; opacity: .55; }
.pvb-toast { position: absolute; right: 26px; top: 44px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 8px; border-radius: 10px; background: white; color: var(--ink); font-size: 11.5px; font-weight: 800; box-shadow: var(--shadow-lg); }
.pvb-toast i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #1fb26b; color: white; font-size: 10px; font-style: normal; }
.pv-dev .pv-chip { z-index: 3; }
.pvb-tool { z-index: 3; left: calc(44% - 22px); }
/* Chronologie : code 0-2,6 s, outils 3-4 s, notification 4,4 s, en ligne 4,9 s */
.hp-panel.is-active .pvb-code { animation: pvb-out .45s ease 3s both; }
@keyframes pvb-out { to { opacity: 0; transform: translateX(-12px) scale(.97); visibility: hidden; } }
.pvb-tools .pvb-t { opacity: 0; }
.hp-panel.is-active .pvb-t { animation: pvb-in .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.hp-panel.is-active .pvb-t:nth-child(1) { animation-delay: 3.3s; } .hp-panel.is-active .pvb-t:nth-child(2) { animation-delay: 3.5s; } .hp-panel.is-active .pvb-t:nth-child(3) { animation-delay: 3.7s; }
@keyframes pvb-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.hp-panel.is-active .pvb-t::after { animation: pvb-flow .8s linear 4s infinite; }
@keyframes pvb-flow { to { background-position: 20px 0; } }
.hp-panel.is-active .pvb-grid .pvb-p { animation: pvb-drop .5s cubic-bezier(.2, .9, .3, 1.25) both; }
.hp-panel.is-active .pvb-grid .pvb-p:nth-child(1) { animation-delay: 1.7s; } .hp-panel.is-active .pvb-grid .pvb-p:nth-child(2) { animation-delay: 1.85s; } .hp-panel.is-active .pvb-grid .pvb-p:nth-child(3) { animation-delay: 2s; }
.hp-panel.is-active .pvb-toast { animation: pv-pop .5s cubic-bezier(.2, .9, .3, 1.3) 4.4s both; }
.hp-panel.is-active .pv-dev .pv-chip { animation-delay: 4.9s; }
.hp-panel.is-active .pvb-tool { animation: pvb-tool 1.2s ease-in-out .4s 2 both, pvb-out .4s ease 2.9s forwards; }
@media (max-width: 640px) {
  .pvb-code, .pvb-tools { width: 40%; left: 10px; }
  .pvb-site { width: 54%; right: 10px; }
  .pvb-t { padding: 8px 9px; gap: 0 7px; }
  .pvb-t b { font-size: 12px; } .pvb-t small { font-size: 10px; }
  .pvb-p small { display: none; }
  .pvb-toast { right: 14px; font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-panel.is-active .pvb-code { animation: none; opacity: 0; visibility: hidden; }
  .pvb-tools .pvb-t, .hp-panel.is-active .pvb-t { animation: none; opacity: 1; }
  .hp-panel.is-active .pvb-t::after, .hp-panel.is-active .pvb-grid .pvb-p, .hp-panel.is-active .pvb-toast { animation: none; }
}
.pvb-toast { top: 96px; }
.pv-seo { align-content: start; }
.pv-seo .pvs-res { padding: 6px 12px; }
.pv-seo .pvs-res small { font-size: 11px; line-height: 1.25; }
.pv-seo .pvs-res b { line-height: 1.25; }
.pv-seo .pv-chip { margin-top: 6px; }
.hero-pillars .hero-title { font-size: clamp(40px, 3.9vw, 58px); }
.hero-pillars .hero-title .hl { white-space: nowrap; }
@media (max-width: 640px) { .hero-pillars .hero-title { font-size: clamp(30px, 9.2vw, 44px); } }
@media (max-width: 640px) { .hero-pillars .ht-copy .nantes-stamp { display: none; } }

/* Piliers : rythme accéléré (onglet 6 s, animations ~35 % plus rapides) */
.hp-pillars.is-running .hp-tab.is-active .pl-progress::after { animation-duration: 6s; }
.hp-panel.is-active .pv-chip { animation-delay: 1s; }
/* Développement */
.hp-panel.is-active .pvb-line { animation-duration: .35s; }
.hp-panel.is-active .pvb-line:nth-child(2) { animation-delay: .1s; }
.hp-panel.is-active .pvb-line:nth-child(3) { animation-delay: .45s; }
.hp-panel.is-active .pvb-line:nth-child(4) { animation-delay: .8s; }
.hp-panel.is-active .pvb-line:nth-child(5) { animation-delay: 1.15s; }
.hp-panel.is-active .pvb-line:nth-child(6) { animation-delay: 1.55s; }
.hp-panel.is-active .pvb-nav { animation-delay: .3s; }
.hp-panel.is-active .pvb-hero { animation-delay: .65s; }
.hp-panel.is-active .pvb-grid .pvb-p:nth-child(1) { animation-delay: 1s; } .hp-panel.is-active .pvb-grid .pvb-p:nth-child(2) { animation-delay: 1.1s; } .hp-panel.is-active .pvb-grid .pvb-p:nth-child(3) { animation-delay: 1.2s; }
.hp-panel.is-active .pvb-cta { animation-delay: 1.4s; }
.hp-panel.is-active .pvb-cursor { animation-duration: 2s; animation-delay: .2s; }
@media (prefers-reduced-motion: no-preference) {
  .hp-panel.is-active .pvb-tool { animation: pvb-tool .9s ease-in-out .3s 2 both, pvb-out .3s ease 1.9s forwards; }
  .hp-panel.is-active .pvb-code { animation: pvb-out .35s ease 1.9s both; }
}
.hp-panel.is-active .pvb-t:nth-child(1) { animation-delay: 2.1s; } .hp-panel.is-active .pvb-t:nth-child(2) { animation-delay: 2.25s; } .hp-panel.is-active .pvb-t:nth-child(3) { animation-delay: 2.4s; }
.hp-panel.is-active .pvb-t::after { animation-delay: 2.6s; }
.hp-panel.is-active .pvb-toast { animation-delay: 2.8s; }
.hp-panel.is-active .pv-dev .pv-chip { animation-delay: 3.2s; }
/* Automatisation */
.hp-panel.is-active .pva-row:nth-child(1) .pva-toggle, .hp-panel.is-active .pva-row:nth-child(1) .pva-toggle::after { animation-delay: .3s; }
.hp-panel.is-active .pva-row:nth-child(2) .pva-toggle, .hp-panel.is-active .pva-row:nth-child(2) .pva-toggle::after { animation-delay: .55s; }
.hp-panel.is-active .pva-row:nth-child(3) .pva-toggle, .hp-panel.is-active .pva-row:nth-child(3) .pva-toggle::after { animation-delay: .8s; }
/* SEO */
.hp-panel.is-active .pvs-q i { animation-delay: calc(.2s + var(--k) * .08s); }
.hp-panel.is-active .pvs-bar em { animation-delay: .9s; }
.hp-panel.is-active .pvs-res:nth-child(1) { animation-delay: 1.05s; }
.hp-panel.is-active .pvs-res:nth-child(2) { animation-delay: 1.25s; }
.hp-panel.is-active .pvs-res:nth-child(3) { animation-delay: 1.45s; }
.hp-panel.is-active .pvs-res > em { animation-delay: 1.7s; }
.hp-panel.is-active .pv-seo .pv-chip { animation-delay: 2s; }
.hp-pillars.is-running .hp-tab.is-active .pl-progress::after { animation-duration: var(--ms, 6s); }

/* Bandeau clients : 15 logos, défilement plus long pour garder la même vitesse */
.has-motion .trust .marquee-track { animation-duration: 64s; }
.logo-joliesvilles { height: 20px; }
.logo-sylneo { height: 18px; }
.logo-indigo { height: 34px; }
.logo-chantiers { height: 26px; }
.logo-emilfrey { height: 44px; }
.logo-kersia { height: 32px; }
.logo-illico { height: 40px; }
.logo-wizeo { height: 38px; }
.logo-anouk { height: 28px; }

/* Pourquoi Weborizon : Vincent et Bryann */
.why-duo { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 20px 36px; margin-bottom: 20px; padding: 22px 28px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.wd-faces { display: flex; }
.wd-faces img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px white, 0 0 0 5px var(--line); }
.wd-faces img + img { margin-left: -16px; }
.wd-people { display: grid; gap: 8px; }
.wd-people p { display: grid; line-height: 1.3; }
.wd-people b { color: var(--ink); font-size: 16px; }
.wd-people span { color: var(--blue-dark); font-size: 13px; font-weight: 700; }
.wd-quote { justify-self: end; max-width: 440px; padding-left: 28px; border-left: 2px solid var(--blue-soft); color: var(--ink-2) !important; font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.why-people::before { display: none; }
.wp-flow { position: absolute; inset: 16px 18px; display: grid; align-content: center; gap: 10px; }
.wp-flow::before { content: ""; position: absolute; left: 30px; top: 24px; bottom: 24px; width: 2px; background: repeating-linear-gradient(180deg, #0d1dff40 0 4px, transparent 4px 8px); }
.wp-node { position: relative; display: flex; align-items: center; gap: 10px; }
.wp-node img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px white, var(--shadow-sm); }
.wp-node b { padding: 5px 11px; border-radius: 999px; background: white; box-shadow: var(--shadow-sm); color: var(--ink-2); font-size: 12px; font-weight: 800; transition: background .3s, color .3s; }
.wp-pair { display: flex; }
.wp-pair img + img { margin-left: -10px; }
.wp-node:not(:has(.wp-pair)) { padding-left: 15px; }
.why-card:hover .wp-node b { background: var(--blue); color: white; }
@media (max-width: 900px) { .why-duo { grid-template-columns: auto 1fr; } .wd-quote { grid-column: 1 / -1; justify-self: start; max-width: none; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); font-size: 17px; } }
@media (max-width: 640px) { .why-duo { gap: 14px 18px; padding: 18px; } .wd-faces img { width: 56px; height: 56px; } .wd-faces img + img { margin-left: -12px; } }

/* ===== Création : quelle solution e-commerce ===== */
.platforms-section { padding-top: var(--section-space); }
.platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.platform { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 24px; border: 1px solid var(--line); border-radius: 22px; background: white; transition: border-color .3s, box-shadow .3s, transform .3s; }
.platform:hover { border-color: #0d1dff40; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.platform h3 { font-size: 26px; }
.platform p { font-size: 15px; line-height: 1.65; }
.platform .pf-when { color: var(--blue-dark); font-size: 13.5px; font-weight: 800; }
.pf-flag { position: absolute; top: -12px; left: 22px; padding: 4px 11px; border-radius: 999px; background: var(--blue); color: white; font-size: 11.5px; font-weight: 800; box-shadow: 0 6px 14px -6px var(--blue); }
.platform-main { border-color: #0d1dff55; box-shadow: 0 0 0 1px #0d1dff22, var(--shadow); }
.platform-custom { border: 0; background: radial-gradient(80% 90% at 100% 0%, #1c2b6b, transparent 60%), var(--ink); }
.platform-custom h3 { color: white; }
.platform-custom p { color: #b9c1ce; }
.platform-custom .pf-when { color: #8f98ff; }
.platform-custom .text-link { margin-top: auto; min-height: 0; color: white; }
@media (max-width: 1100px) { .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; } }
@media (max-width: 640px) { .platforms { grid-template-columns: 1fr; } }

/* ===== Audit SEO : de l'audit aux corrections ===== */
.hv-audit { display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px 0; }
.au-card { width: min(100%, 470px); display: grid; gap: 14px; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow-lg); }
.au-head { display: flex; justify-content: space-between; align-items: center; }
.au-head b { color: var(--ink); font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.au-head em { padding: 3px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--soft); font-size: 11px; font-style: normal; font-weight: 800; }
.au-steps { position: relative; display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.au-steps::before { content: ""; position: absolute; left: 17px; top: 22px; bottom: 22px; width: 2px; background: var(--line); }
.au-steps li { position: relative; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px 8px 0; border-radius: 12px; }
.au-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: white; box-shadow: inset 0 0 0 2px var(--line-strong); color: var(--soft); font-size: 13px; font-weight: 800; }
.au-txt { display: grid; }
.au-txt b { color: var(--ink); font-size: 14.5px; }
.au-txt small { color: var(--muted); font-size: 12.5px; }
.au-ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1fb26b; color: white; font-size: 11px; font-style: normal; font-weight: 800; opacity: 0; transform: scale(.4); }
.au-bar { height: 6px; border-radius: 99px; background: var(--surface-soft); overflow: hidden; }
.au-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), #1fb26b); transform-origin: left; transform: scaleX(0); }
.au-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px; border-radius: 999px; background: var(--ink); color: white; font-size: 13px; font-weight: 800; box-shadow: var(--shadow-lg); opacity: 0; }
.au-chip i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1fb26b; font-size: 11px; font-style: normal; }
/* Animation : les étapes se valident une à une, en boucle */
.au-steps li { animation: au-row 9s ease infinite; animation-delay: calc(var(--i) * .7s); }
.au-dot { animation: au-dot 9s ease infinite; animation-delay: calc(var(--i) * .7s); }
.au-ok { animation: au-ok 9s cubic-bezier(.2, .9, .3, 1.4) infinite; animation-delay: calc(var(--i) * .7s + .25s); }
.au-bar i { animation: au-bar 9s cubic-bezier(.3, .7, .3, 1) infinite; }
.au-chip { animation: au-chip 9s ease infinite; }
@keyframes au-row { 0%, 4% { background: transparent; } 8%, 12% { background: var(--blue-soft); } 18%, 100% { background: transparent; } }
@keyframes au-dot { 0%, 5% { background: white; color: var(--soft); box-shadow: inset 0 0 0 2px var(--line-strong); } 9%, 78% { background: var(--blue); color: white; box-shadow: 0 0 0 4px var(--blue-soft); } 86%, 100% { background: white; color: var(--soft); box-shadow: inset 0 0 0 2px var(--line-strong); } }
@keyframes au-ok { 0%, 5% { opacity: 0; transform: scale(.4); } 10%, 78% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes au-bar { 0% { transform: scaleX(0); } 48%, 82% { transform: scaleX(1); } 90%, 100% { transform: scaleX(0); } }
@keyframes au-chip { 0%, 48% { opacity: 0; transform: translateY(8px); } 54%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(8px); } }
@media (max-width: 640px) { .au-card { padding: 18px 16px 14px; } .au-chip { font-size: 12px; text-align: center; } }
@media (prefers-reduced-motion: reduce) {
  .au-steps li, .au-dot, .au-ok, .au-bar i, .au-chip { animation: none; }
  .au-dot { background: var(--blue); color: white; box-shadow: none; }
  .au-ok, .au-chip { opacity: 1; transform: none; }
  .au-bar i { transform: none; }
}

/* ===== Application métier : cas clients avec logos ===== */
.cases-section { padding-top: var(--section-space); }
.client-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.client-case { display: flex; flex-direction: column; gap: 12px; padding: 28px 26px; border: 1px solid var(--line); border-radius: 22px; background: white; transition: border-color .3s, box-shadow .3s, transform .3s; }
.client-case:hover { border-color: #0d1dff40; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.cc-logo { width: auto; height: 30px; margin-bottom: 8px; object-fit: contain; object-position: left; align-self: flex-start; }
.cc-asmodee { height: 36px; } .cc-lorie { height: 17px; margin-top: 10px; margin-bottom: 17px; } .cc-sylneo { height: 20px; margin-top: 6px; margin-bottom: 14px; }
.client-case h3 { font-size: 21px; line-height: 1.25; }
.client-case p { font-size: 15px; line-height: 1.65; }
.client-case .text-link { min-height: 0; margin-top: 4px; padding: 4px 0; }
@media (max-width: 1000px) { .client-cases { grid-template-columns: 1fr; } }

/* ===== Automatisation : automatisation ou application ===== */
.vs-section { padding-top: var(--section-space); }
.vs-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vs-card { display: flex; flex-direction: column; gap: 12px; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: white; }
.vs-card h3 { font-size: 24px; }
.vs-card p { font-size: 15.5px; }
.vs-tag { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); font-size: 12px; font-weight: 800; }
.vs-dark { border: 0; background: radial-gradient(80% 90% at 100% 0%, #1c2b6b, transparent 60%), var(--ink); }
.vs-dark h3 { color: white; }
.vs-dark p { color: #b9c1ce; }
.vs-dark .vs-tag { background: #ffffff1a; color: #c9ceff; }
.vs-dark .inline-link { color: white; }
.vs-dark .offer-chips li { background: #ffffff14; color: #d6dbe4; }
.vs-badge { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: white; color: var(--ink); font-family: var(--font-display); font-size: 18px; font-weight: 600; box-shadow: 0 0 0 6px var(--paper), var(--shadow); transform: translate(-50%, -50%); }
@media (max-width: 800px) { .vs-grid { grid-template-columns: 1fr; gap: 34px; } }

/* ===== Automatisation : cas Anouk & Ninon ===== */
.anouk-section { padding-top: var(--section-space); }
.case-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; padding: 52px; border-radius: 28px; background: radial-gradient(70% 90% at 100% 0%, #1c2b6b, transparent 60%), var(--ink); }
.cp-copy { display: grid; justify-items: start; gap: 16px; }
.cp-logo { width: auto; height: 34px; padding: 10px 14px; box-sizing: content-box; border-radius: 12px; background: white; }
.cp-copy .eyebrow { color: #8f98ff; }
.cp-copy h2 { color: white; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; }
.cp-copy h2 .muted-heading { color: #8a94a8; }
.cp-copy p:not(.eyebrow) { color: #b9c1ce; font-size: 16px; }
.cp-copy .text-link { color: white; }
.cp-flow { position: relative; display: grid; gap: 14px; }
.cp-flow::before { content: ""; position: absolute; left: 33px; top: 30px; bottom: 96px; width: 2px; background: repeating-linear-gradient(180deg, #8f98ff 0 5px, transparent 5px 10px); background-size: 2px 20px; animation: cpf-flow 1s linear infinite; }
@keyframes cpf-flow { to { background-position: 0 20px; } }
.cpf-node { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; align-items: center; padding: 14px 18px 14px 12px; border: 1px solid #ffffff1f; border-radius: 16px; background: #ffffff0d; }
.cpf-node i { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: white; font-size: 14px; font-style: normal; font-weight: 800; box-shadow: 0 0 0 5px #0d1dff33; }
.cpf-node b { color: white; font-size: 15px; }
.cpf-node small { color: #9aa4b4; font-size: 12.5px; }
.cpf-site { background: white; border-color: white; }
.cpf-site b { color: var(--ink); } .cpf-site small { color: var(--muted); }
.cpf-erp i { background: #1fb26b; box-shadow: 0 0 0 5px #1fb26b33; }
.cpf-stat { justify-self: end; display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: 14px; background: #ffffff14; }
.cpf-stat b { color: white; font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
.cpf-stat small { color: #c9ceff; font-size: 13px; font-weight: 700; }
.cp-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
@media (max-width: 1000px) { .case-panel { grid-template-columns: 1fr; gap: 36px; padding: 32px 24px; } .cp-points { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cp-flow::before { animation: none; } }

/* ===== PIM : prix ===== */
.price-section { padding-top: var(--section-space); }
.price-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; padding: 48px; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(60% 80% at 0% 0%, var(--blue-soft), transparent 70%), white; }
.pp-copy { display: grid; align-content: start; gap: 18px; }
.pp-copy h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; }
.pp-zero { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.pp-zero p { display: grid; padding: 16px 22px; border-radius: 18px; background: var(--ink); }
.pp-zero b { color: white; font-family: var(--font-display); font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.pp-zero span { color: #9aa4b4; font-size: 13.5px; font-weight: 700; }
.pp-items { display: grid; gap: 12px; }
.pp-item { display: grid; grid-template-columns: 40px 1fr; gap: 6px 14px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.pp-item > :not(.pp-num) { grid-column: 2; }
.pp-num { grid-row: span 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-size: 13px; font-weight: 800; }
.pp-item h3 { font-size: 19px; line-height: 1.25; }
.pp-item p { font-size: 15px; line-height: 1.65; }
@media (max-width: 1000px) { .price-panel { grid-template-columns: 1fr; padding: 28px 20px; } }
.cp-points .ptile:last-child:nth-child(odd) { grid-column: auto; }
.client-cases { align-items: stretch; }
.client-case .text-link { margin-top: auto; padding-top: 10px; }

/* Connecteur ERP : capture de boutique + flux */
.cover-connect { position: relative; }
.cover-connect .cv-orders { position: absolute; left: 50%; bottom: 46px; z-index: 2; transform: translateX(-50%); }
.cover-connect .cv-caption { z-index: 2; }
.cc-flow { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: white; font-size: 12px; box-shadow: var(--shadow-lg); }
.cc-flow b { font-weight: 800; }
.cc-flow i { color: #8f98ff; font-style: normal; }
.cc-flow { top: auto; bottom: 12px; left: 12px; width: max-content; }
.cover-connect .cv-caption { padding: 5px 12px; border-radius: 999px; background: white; box-shadow: var(--shadow); }
.case-cover.cover-connect .cc-flow { position: absolute; white-space: nowrap; }
.case-cover.cover-connect .cc-flow, .case-cover.cover-connect .cc-flow * { font-family: Manrope, "Segoe UI", sans-serif; font-size: 12px; line-height: 1.3; letter-spacing: 0; }

/* ===== Application métier : Asmodee en vedette ===== */
.asm-case { display: grid; grid-template-columns: 1fr 1.1fr; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 26px; background: white; }
.asm-copy { display: flex; flex-direction: column; gap: 12px; padding: 40px; }
.asm-copy h3 { font-size: 26px; line-height: 1.2; }
.asm-copy p { font-size: 15.5px; line-height: 1.7; }
.asm-copy .text-link { margin-top: 6px; min-height: 0; padding: 4px 0; }
.asm-shots { position: relative; min-height: 360px; overflow: hidden; background: linear-gradient(135deg, #eef0ff, #e9edf3); }
.client-cases.cases-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .asm-case { grid-template-columns: 1fr; } .asm-shots { min-height: 260px; } .asm-copy { padding: 28px 24px; } .client-cases.cases-2 { grid-template-columns: 1fr; } }

/* ===== Nos autres expertises : cartes avec captures ===== */
.more-section { padding-bottom: 0; }
.more-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.more-head h2 { margin-top: 14px; font-size: clamp(32px, 3.4vw, 46px); }
.more-head > p { max-width: 400px; font-size: 16px; }
.more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.more-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: white; transition: border-color .3s, box-shadow .3s, transform .3s; }
.more-card:hover { border-color: #0d1dff40; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.more-shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--surface-soft); }
.more-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.more-card:hover .more-shot img { transform: scale(1.04); }
.more-body { display: grid; gap: 4px; padding: 16px 52px 18px 18px; }
.more-body b { color: var(--ink); font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.more-body small { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.more-arrow { position: absolute; right: 14px; bottom: 16px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); font-size: 14px; transition: background .3s, color .3s, border-color .3s, transform .3s; }
.more-card:hover .more-arrow { border-color: var(--blue); background: var(--blue); color: white; transform: rotate(45deg); }
.more-card:hover .more-body b { color: var(--blue); }
@media (max-width: 900px) { .more-head { flex-direction: column; align-items: flex-start; gap: 12px; } }
@media (max-width: 640px) { .more-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .more-body { padding: 12px 40px 14px 12px; } .more-body b { font-size: 15px; } .more-body small { display: none; } .more-arrow { width: 26px; height: 26px; right: 10px; bottom: 12px; } }

/* ===== Composants de mise en forme des contenus (pages e-commerce, WooCommerce, guide SEO) ===== */

/* Capture + liste numérotée */
.split-section { padding-top: var(--section-space); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 64px; }
.split-rev .split-media { order: 2; }
.split-media { position: relative; display: grid; place-items: center; min-height: 420px; padding: 44px 36px; border-radius: 28px; background: radial-gradient(70% 80% at 100% 0%, #dfe3ff, transparent 70%), linear-gradient(135deg, #eef0ff, #e9edf3); overflow: hidden; }
.split-shot { width: 100%; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-lg); }
.split-shot img { display: block; width: 100%; height: auto; }
.split-stack { min-height: 460px; }
.split-stack .split-shot { position: absolute; width: 74%; }
.split-stack .split-shot:first-child { left: 6%; top: 9%; transform: rotate(-2deg); }
.split-stack .split-shot:nth-child(2) { right: 6%; bottom: 9%; transform: rotate(1.5deg); }
.split-chip { position: absolute; left: 22px; bottom: 22px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 10px; border-radius: 999px; background: var(--ink); color: white; font-size: 13px; font-weight: 800; line-height: 1.2; box-shadow: var(--shadow-lg); }
.split-chip i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #1fb26b; font-size: 11px; font-style: normal; }
.split-copy { display: grid; justify-items: start; gap: 16px; }
.split-copy h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.06; }
.split-copy > p:not(.eyebrow) { font-size: 16.5px; }
.split-list { display: grid; gap: 0; width: 100%; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: sl; }
.split-list li { position: relative; display: grid; gap: 6px; padding: 18px 0 18px 54px; border-top: 1px solid var(--line); counter-increment: sl; }
.split-list li:last-child { border-bottom: 1px solid var(--line); }
.split-list li::before { content: counter(sl, decimal-leading-zero); position: absolute; left: 0; top: 18px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-size: 13px; font-weight: 800; }
.split-list h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.02em; }
.split-list p { font-size: 15px; line-height: 1.65; }
.split-copy .text-link { min-height: 0; padding: 4px 0; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; gap: 36px; } .split-rev .split-media { order: 0; } .split-media { min-height: 0; padding: 28px 20px; } .split-stack { min-height: 340px; } }

/* Cartes avec mini-interface illustrative */
.rules-section { padding-top: var(--section-space); }
.rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rules-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rule { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 26px; border: 1px solid var(--line); border-radius: 22px; background: white; transition: border-color .3s, box-shadow .3s, transform .3s; }
.rule:hover { border-color: #0d1dff40; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.rule > h3, .rule > p { padding-inline: 12px; }
.rule > h3 { margin-top: 8px; font-size: 20px; line-height: 1.25; }
.rule > p { font-size: 15px; line-height: 1.65; }
.rule-ui { display: grid; place-content: center; gap: 8px; height: 156px; padding: 16px; border-radius: 14px; background: var(--surface-soft); font-size: 12.5px; line-height: 1.3; color: var(--ink-2); }
.rule-ui * { font-family: Manrope, "Segoe UI", sans-serif; letter-spacing: 0; }
/* paliers de prix */
.ru-tiers { display: grid; gap: 5px; width: 190px; }
.ru-tiers span { display: flex; justify-content: space-between; padding: 7px 11px; border-radius: 9px; background: white; font-weight: 700; }
.ru-tiers span b { color: var(--ink); }
.ru-tiers .on { background: var(--blue); color: white; box-shadow: 0 6px 16px -6px var(--blue); transform: scale(1.04); }
.ru-tiers .on b { color: white; }
/* minimum de commande */
.ru-qty { display: flex; align-items: center; gap: 8px; }
.ru-qty span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: white; font-weight: 800; }
.ru-qty b { display: grid; place-items: center; width: 56px; height: 34px; border: 2px solid #f0a020; border-radius: 9px; background: white; font-size: 15px; }
.ru-warn { padding: 6px 11px; border-radius: 999px; background: #fff3dc; color: #8a5300; font-weight: 800; text-align: center; }
.ru-btn { padding: 8px 14px; border-radius: 9px; background: var(--line-strong); color: white; font-weight: 800; text-align: center; }
/* connexion unique */
.ru-sso { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: white; font-weight: 800; box-shadow: var(--shadow); }
.ru-sso i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--blue); font-style: normal; font-size: 12px; }
.ru-or { color: var(--soft); font-weight: 700; text-align: center; }
/* comptes */
.ru-toggle { display: flex; padding: 4px; border-radius: 999px; background: white; font-weight: 800; }
.ru-toggle span { padding: 7px 13px; border-radius: 999px; color: var(--soft); }
.ru-toggle .on { background: var(--blue); color: white; }
.ru-lines { display: grid; gap: 5px; justify-items: center; color: var(--soft); font-weight: 700; }
/* courbe de positions */
.ru-chart { width: 200px; height: 90px; }
.ru-chart path { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ru-chart line { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.ru-cap { color: var(--soft); font-weight: 700; text-align: center; }
/* visites et commandes */
.ru-bars { display: flex; align-items: flex-end; justify-content: center; gap: 22px; height: 92px; }
.ru-bars span { display: grid; justify-items: center; gap: 6px; font-weight: 700; color: var(--soft); }
.ru-bars i { display: block; width: 46px; border-radius: 8px 8px 3px 3px; background: var(--blue); }
.ru-bars span:last-child i { background: #f0a020; }
/* objectifs */
.ru-goals { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 220px; }
.ru-goals span { padding: 6px 11px; border-radius: 999px; background: white; font-weight: 800; }
.ru-goals span:first-child { background: #1fb26b; color: white; }
/* fiche produit incomplète */
.ru-sheet { display: grid; grid-template-columns: 58px 1fr; gap: 6px 12px; width: 210px; padding: 12px; border-radius: 12px; background: white; }
.ru-sheet > i { grid-row: span 4; border-radius: 8px; background: linear-gradient(135deg, #dfe3ff, #eef1f5); }
.ru-sheet > b { height: 9px; border-radius: 4px; background: var(--ink-2); width: 80%; }
.ru-sheet > span { height: 7px; border-radius: 4px; background: var(--line-strong); }
.ru-sheet > em { padding: 3px 7px; border: 1.5px dashed #f0a020; border-radius: 6px; color: #8a5300; font-size: 11px; font-style: normal; font-weight: 800; }
/* arborescence */
.ru-tree { display: grid; gap: 6px; font-weight: 800; }
.ru-tree span { justify-self: start; padding: 5px 10px; border-radius: 8px; background: white; }
.ru-tree span:nth-child(2) { margin-left: 18px; }
.ru-tree span:nth-child(n+3) { margin-left: 36px; }
.ru-tree .miss { border: 1.5px dashed #f0a020; background: transparent; color: #8a5300; }
/* étapes du parcours */
.ru-path { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 11.5px; }
.ru-path span { padding: 6px 8px; border-radius: 8px; background: white; }
.ru-path i { width: 10px; height: 2px; background: var(--line-strong); }
.ru-path .warn { background: #fff3dc; color: #8a5300; box-shadow: inset 0 0 0 1.5px #f0a020; }
@media (max-width: 1100px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rules-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rules-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .rules { grid-template-columns: 1fr; } }

/* Bandeau sombre : titre, flux animé, colonnes */
.dband-section { padding-top: var(--section-space); }
.dband { display: grid; gap: 44px; padding: 52px; border-radius: 28px; background: radial-gradient(70% 90% at 100% 0%, #1c2b6b, transparent 60%), var(--ink); }
.dband-head { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
.dband-head .eyebrow { color: #8f98ff; }
.dband-head h2 { margin-top: 16px; color: white; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.06; }
.dband-head h2 .muted-heading { color: #8a94a8; }
.dband-head > div > p:not(.eyebrow) { margin-top: 16px; color: #b9c1ce; font-size: 16px; }
.dband-flow { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; }
.dband-flow > span { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid #ffffff1f; border-radius: 16px; background: #ffffff0d; color: white; font-size: 14.5px; font-weight: 800; line-height: 1.25; text-align: center; }
.dband-flow > span small { color: #9aa4b4; font-size: 12px; font-weight: 700; }
.dband-flow > span.hl { border-color: var(--blue); background: var(--blue); box-shadow: 0 10px 30px -10px var(--blue); }
.dband-flow > span.hl small { color: #d6dbff; }
.dband-flow > span.ok { border-color: #1fb26b66; background: #1fb26b1f; }
.dband-flow > span.ok small { color: #8fe0b6; }
.dband-flow > i { width: 34px; height: 2px; background: repeating-linear-gradient(90deg, #8f98ff 0 5px, transparent 5px 10px); background-size: 20px 2px; animation: dband-flow 1s linear infinite; }
@keyframes dband-flow { to { background-position: 20px 0; } }
.dband-stack { display: grid; gap: 6px; }
.dband-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.dband-cols article { display: grid; align-content: start; gap: 10px; padding: 26px; border: 1px solid #ffffff17; border-radius: 20px; background: #ffffff08; }
.dband-num { color: #8f98ff; font-size: 13px; font-weight: 800; }
.dband-cols h3 { color: white; font-size: 20px; line-height: 1.25; }
.dband-cols p { color: #b9c1ce; font-size: 15px; line-height: 1.65; }
.dband-cols .inline-link { color: white; }
@media (max-width: 1000px) { .dband { padding: 32px 22px; gap: 32px; } .dband-head { grid-template-columns: 1fr; gap: 28px; } .dband-flow { justify-content: flex-start; } }
@media (max-width: 560px) { .dband-flow { flex-direction: column; align-items: stretch; } .dband-flow > i { width: 2px; height: 22px; margin: 0 auto; background: repeating-linear-gradient(180deg, #8f98ff 0 5px, transparent 5px 10px); } }
@media (prefers-reduced-motion: reduce) { .dband-flow > i { animation: none; } }

/* Étapes reliées */
.road-section { padding-top: var(--section-space); }
.road { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.road::before { content: ""; position: absolute; left: 24px; right: 24px; top: 24px; height: 2px; background: linear-gradient(90deg, var(--blue), #1fb26b); opacity: .35; }
.road li { position: relative; display: grid; align-content: start; gap: 12px; }
.road-num { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: white; font-size: 14px; font-weight: 800; box-shadow: 0 0 0 6px var(--paper); }
.road li:last-child .road-num { background: #1fb26b; }
.road-card { display: grid; gap: 10px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.road-card h3 { font-size: 20px; line-height: 1.25; }
.road-card p { font-size: 15px; line-height: 1.65; }
@media (max-width: 900px) { .road { grid-template-columns: 1fr; gap: 16px; } .road::before { left: 23px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; background: linear-gradient(180deg, var(--blue), #1fb26b); } .road li { grid-template-columns: 48px 1fr; gap: 16px; } }

/* Site + concurrents = écarts */
.eqr { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1.1fr; align-items: stretch; }
.eqr-op { display: grid; place-items: center; color: var(--soft); font-family: var(--font-display); font-size: 28px; font-weight: 600; }
.eqr-card { display: grid; align-content: start; gap: 10px; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: white; }
.eqr-card h3 { font-size: 20px; line-height: 1.25; }
.eqr-card p { font-size: 15px; line-height: 1.65; }
.eqr-tag { justify-self: start; padding: 5px 12px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); font-size: 12px; font-weight: 800; }
.eqr-card.eqr-res { border: 0; background: radial-gradient(80% 90% at 100% 0%, #1c2b6b, transparent 60%), var(--ink); }
.eqr-res h3 { color: white; } .eqr-res p { color: #b9c1ce; }
.eqr-res .eqr-tag { background: #1fb26b; color: white; }
@media (max-width: 1000px) { .eqr { grid-template-columns: 1fr; } .eqr-op { height: 40px; } }

/* Note pleine largeur */
.note-strip { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; margin-top: 20px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 22px; background: white; }
.note-strip > i { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--blue-soft); color: var(--blue); font-size: 22px; font-style: normal; }
.note-strip h3 { font-size: 19px; line-height: 1.25; }
.note-strip p { margin-top: 4px; font-size: 15px; line-height: 1.65; }
@media (max-width: 640px) { .note-strip { grid-template-columns: 1fr; } }

/* Diagnostic e-commerce : entonnoir du héros */
.hv-funnel { display: grid; place-content: center; padding: 24px 0; }
.fn-card { display: grid; gap: 10px; width: min(100%, 460px); padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow-lg); }
.fn-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.fn-head b { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.fn-head em { padding: 3px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--soft); font-size: 11px; font-style: normal; font-weight: 800; }
.fn-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; font-size: 13px; font-weight: 800; color: var(--ink-2); }
.fn-row > span:last-child { position: relative; height: 34px; border-radius: 10px; background: var(--surface-soft); overflow: hidden; }
.fn-row > span:last-child i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 10px; background: linear-gradient(90deg, var(--blue), #4d5cff); transform-origin: left; animation: fn-grow 6s cubic-bezier(.3,.7,.3,1) infinite; animation-delay: calc(var(--i) * .25s); }
.fn-row.fn-low > span:last-child i { background: linear-gradient(90deg, #f0a020, #f6c15c); }
.fn-leak { justify-self: end; display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 14px 8px 9px; border-radius: 999px; background: var(--ink); color: white; font-size: 12.5px; font-weight: 800; animation: fn-leak 6s ease infinite; }
.fn-leak i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #f0a020; font-size: 12px; font-style: normal; }
@keyframes fn-grow { 0% { transform: scaleX(0); } 22%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes fn-leak { 0%, 30% { opacity: 0; transform: translateY(6px); } 38%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fn-row > span:last-child i, .fn-leak { animation: none; } }

/* Carte « notre méthode » avec portrait */
.who-section { padding-top: 64px; }
.who-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 32px; padding: 34px 40px; border: 1px solid var(--line); border-radius: 26px; background: radial-gradient(60% 90% at 0% 0%, var(--blue-soft), transparent 70%), white; }
.who-card img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px white, var(--shadow); }
.who-card div { display: grid; gap: 10px; }
.who-card p:not(.eyebrow) { font-size: 16px; }
@media (max-width: 700px) { .who-card { grid-template-columns: 1fr; padding: 26px 22px; } .who-card img { width: 84px; height: 84px; } }

/* Click & collect Santa : téléphone */
.pk-media { min-height: 460px; }
.pk-phone { position: relative; width: 250px; padding: 12px; border-radius: 38px; background: var(--ink); box-shadow: var(--shadow-lg); }
.pk-screen { display: grid; gap: 10px; padding: 18px 14px 16px; border-radius: 28px; background: white; }
.pk-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 800; color: var(--ink); }
.pk-top em { padding: 3px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--soft); font-size: 10.5px; font-style: normal; }
.pk-items { display: grid; gap: 8px; }
.pk-item { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 10px; padding: 6px; border-radius: 12px; background: var(--paper); font-size: 12.5px; font-weight: 800; line-height: 1.3; color: var(--ink-2); }
.pk-item img { width: 50px; height: 50px; border-radius: 9px; background: white; object-fit: cover; }
.pk-item small { display: block; color: var(--soft); font-size: 11px; font-weight: 700; }
.pk-status { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface-soft); font-size: 12.5px; font-weight: 800; color: var(--soft); }
.pk-status i { width: 9px; height: 9px; border-radius: 50%; background: #f0a020; animation: pk-status 5s ease infinite; }
.pk-notif { position: absolute; left: -46px; right: -46px; top: 52px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: #ffffffeb; box-shadow: 0 20px 40px -14px #0b122059; backdrop-filter: blur(8px); font-size: 12.5px; line-height: 1.35; color: var(--ink); animation: pk-notif 5s cubic-bezier(.2,.9,.3,1.2) infinite; }
.pk-notif > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #1fb26b; color: white; font-size: 15px; font-style: normal; font-weight: 800; }
.pk-notif b { display: block; font-size: 13px; }
.pk-notif span { color: var(--soft); font-weight: 600; }
@keyframes pk-notif { 0%, 28% { opacity: 0; transform: translateY(-16px) scale(.96); } 36%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-16px) scale(.96); } }
@keyframes pk-status { 0%, 30% { background: #f0a020; } 36%, 90% { background: #1fb26b; } }
@media (max-width: 560px) { .pk-notif { left: -14px; right: -14px; } }
@media (prefers-reduced-motion: reduce) { .pk-notif, .pk-status i { animation: none; } }
.work-cover .pk-prods { display: flex; gap: 12px; }
.work-cover .pk-prods img { width: 30%; max-width: 130px; aspect-ratio: 1; border-radius: 14px; background: white; object-fit: cover; box-shadow: var(--shadow); }
.work-cover .pk-prods img:nth-child(2) { transform: translateY(-10px); }
.split-bare { min-height: 0; padding: 0; background: none; }
.split-bare img { width: 100%; height: auto; border-radius: 24px; border: 1px solid var(--line); }
.road li { grid-template-rows: auto 1fr; }
.road-card { height: 100%; }
.dband-flow > span.dband-stack { display: grid; gap: 6px; padding: 0; border: 0; background: none; }
.dband-stack > span { display: grid; gap: 2px; padding: 9px 16px; border: 1px solid #ffffff1f; border-radius: 14px; background: #ffffff0d; color: white; font-size: 14px; font-weight: 800; text-align: center; }
.dband-stack > span small { color: #9aa4b4; font-size: 11.5px; font-weight: 700; }
.dband-stack > span.ok { border-color: #1fb26b66; background: #1fb26b1f; }
.dband-stack > span.ok small { color: #8fe0b6; }
.dband .text-link { color: white; }
.ru-sheet { width: 236px; }
.ru-sheet > em { white-space: nowrap; }
.work-cover .pk-prods { align-items: center; justify-content: center; width: 100%; margin-bottom: 22px; }
.work-cover .pk-prods img { flex: none; width: 27%; height: auto; }
.split-long { align-items: start; }
.split-long .split-media { position: sticky; top: 120px; }
@media (max-width: 1000px) { .split-long .split-media { position: relative; top: auto; } }
.ru-or, .ru-lines, .ru-cap, .ru-bars span { color: var(--muted); }
.ru-btn { background: var(--soft); }
.ru-goals span:first-child, .eqr-res .eqr-tag { background: #12804c; }

/* ===== Bandeau d'appel à l'action ===== */
.cta-band-section { padding-top: var(--section-space); }
.cta-band { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 34px 40px; border-radius: 28px; background: radial-gradient(60% 120% at 100% 0%, #3a47ff, transparent 60%), var(--blue); color: white; box-shadow: 0 30px 60px -30px #0d1dff99; }
.cb-faces { display: flex; }
.cb-faces img { width: 64px; height: 64px; border: 3px solid var(--blue); border-radius: 50%; object-fit: cover; }
.cb-faces img + img { margin-left: -16px; }
.cb-copy { display: grid; gap: 6px; }
.cb-title { color: white; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; }
.cb-copy p { color: #dfe2ff; font-size: 16px; line-height: 1.6; }
.cb-actions { display: grid; justify-items: end; gap: 10px; }
.cb-link { color: white; font-size: 14.5px; font-weight: 700; opacity: .9; }
.cb-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .cta-band { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; } .cb-actions { justify-items: start; } }

/* Lien d'appel sur les cartes de solutions */
.platform .text-link { margin-top: auto; min-height: 0; padding: 4px 0; }

/* Flux SNEP : FTP des boutiques → traitement → FTP de la SNEP */
.snep-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 2px; padding: 0; list-style: none; font-size: 12.5px; font-weight: 800; }
.snep-flow span { padding: 6px 11px; border-radius: 999px; background: var(--surface-soft); color: var(--ink-2); }
.snep-flow span.hl { background: var(--blue); color: white; }
.snep-flow i { color: var(--soft); font-style: normal; }
.client-case .snep-flow { font-size: 12.5px; line-height: 1.3; }
.split-copy .button { max-width: 100%; white-space: normal; text-align: left; }

/* Accueil : partenaires des projets d'envergure */
.wd-partners { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.wd-label { color: var(--muted); font-size: 13.5px; font-weight: 700; }
.wd-partners ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wd-partners li { display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; background: var(--surface-soft); }
.wd-partners img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: white; }
.wd-partners li span { display: grid; color: var(--blue-dark); font-size: 12px; font-weight: 700; line-height: 1.25; }
.wd-partners li b { color: var(--ink); font-size: 13.5px; }
.wd-partners .text-link { min-height: 0; margin-left: auto; padding: 4px 0; font-size: 14px; }
@media (max-width: 900px) { .wd-partners .text-link { margin-left: 0; } }

/* Accueil : tagline sur trois lignes, sans toucher le bloc de droite ni déborder sur mobile */
.hero-pillars .hero-title { font-size: clamp(40px, 3.8vw, 56px); }
@media (max-width: 640px) { .hero-pillars .hero-title { font-size: clamp(28px, 8.6vw, 44px); } }
.wd-intro { display: grid; gap: 2px; margin-right: auto; }
.wd-partners .wd-intro .text-link { margin-left: 0; font-size: 13.5px; }
.hero-pillars .hero-title { font-size: clamp(40px, 3.6vw, 54px); }
/* 7,8vw : la ligne la plus longue (« et développer vos ventes. ») tient dans la colonne de texte sur mobile. */
@media (max-width: 640px) { .hero-pillars .hero-title { font-size: clamp(25px, 7.8vw, 44px); } }
.cb-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: #ffffff26; color: white; box-shadow: inset 0 0 0 1px #ffffff33; }

/* ===== Création de site : vitrine animée de quatre sites (16 s, 4 s par site) ===== */
.hv-reel { min-height: 500px; padding: 34px 0 64px; }
.rl-browser { position: relative; z-index: 2; width: 86%; margin-left: 2%; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-lg); }
.rl-bar { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: #f8f9fb; }
.rl-dots { display: flex; gap: 5px; }
.rl-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.rl-url { position: relative; display: flex; align-items: center; gap: 7px; flex: 1; max-width: 300px; height: 26px; padding: 0 12px; border-radius: 8px; background: white; box-shadow: inset 0 0 0 1px var(--line); color: #12804c; font-size: 12px; font-weight: 700; }
.rl-url .rl-t { position: absolute; left: 31px; color: var(--ink-2); }
.rl-screen, .rl-pscreen { position: relative; overflow: hidden; }
.rl-screen { aspect-ratio: 16 / 10; }
.rl-screen img, .rl-pscreen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rl-screen .rl-s, .rl-pscreen .rl-s { position: absolute; inset: 0; }
.rl-phone { position: absolute; z-index: 3; right: 0; bottom: 34px; width: 24%; padding: 5px; border-radius: 22px; background: var(--ink); box-shadow: var(--shadow-lg); }
.rl-pscreen { aspect-ratio: 9 / 16; border-radius: 17px; background: white; }
.rl-tags { position: absolute; z-index: 4; left: 6%; bottom: 8px; height: 40px; width: 62%; }
.rl-tags .rl-t { position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 999px; background: var(--ink); color: #c9ceff; font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow-lg); }
.rl-tags .rl-t b { padding: 3px 10px; border-radius: 999px; background: white; color: var(--ink); font-size: 12.5px; }
.rl-progress { position: absolute; left: 6%; right: 30%; bottom: -14px; display: flex; gap: 6px; }
.rl-progress i { position: relative; flex: 1; height: 4px; overflow: hidden; border-radius: 99px; background: var(--line); }
.rl-progress i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--blue); transform: scaleX(0); transform-origin: left; }
.hv-reel .c1 { left: -14px; top: 4px; } .hv-reel .c2 { left: -22px; top: 44%; } .hv-reel .c3 { right: 4%; top: -4px; }
@media (prefers-reduced-motion: no-preference) {
  .rl-s { opacity: 0; animation: rl-cover 16s ease infinite both; animation-delay: calc(var(--n) * 4s); }
  .rl-t { opacity: 0; animation: rl-text 16s ease infinite both; animation-delay: calc(var(--n) * 4s); }
  .rl-progress i::after { animation: rl-fill 16s linear infinite both; animation-delay: calc(var(--n) * 4s); }
}
@keyframes rl-cover { 0% { opacity: 0; transform: scale(1.04); } 3% { opacity: 1; transform: none; } 25% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes rl-text { 0% { opacity: 0; transform: translateY(6px); } 3%, 24% { opacity: 1; transform: none; } 26%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes rl-fill { 0% { transform: scaleX(0); } 25% { transform: scaleX(1); } 26%, 100% { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .rl-s, .rl-t:not([style*="--n:0"]) { display: none; }
  .rl-progress i:first-child::after { transform: none; }
}
@media (max-width: 640px) {
  .hv-reel { min-height: 0; padding: 18px 0 56px; }
  .rl-browser { width: 92%; margin-left: 0; }
  .rl-phone { width: 28%; bottom: 46px; }
  .rl-tags { left: 0; width: 100%; }
  .rl-tags .rl-t { font-size: 12px; }
  .rl-progress { left: 0; right: 0; bottom: -10px; }
  .hv-reel .hv-chip { display: none; }
}
@media (max-width: 640px) { .hv-reel { padding-bottom: 74px; } .rl-phone { bottom: 64px; } }

/* ===== Variantes : 3 colonnes sombres, 5 étapes, mini-interfaces SEO ===== */
.dband-cols.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .dband-cols.c3 { grid-template-columns: 1fr; } }
.road-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.road-5 .road-card { padding: 22px 20px; }
.road-5 .road-card h3 { font-size: 18px; }
.road-5 .road-card p { font-size: 14.5px; }
@media (max-width: 1100px) { .road-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; } .road-5::before { display: none; } }
@media (max-width: 900px) { .road-5 { grid-template-columns: 1fr; } .road-5::before { display: block; } }
.split-media .speed-demo, .split-media .quote-doc { width: 100%; background: white; box-shadow: var(--shadow-lg); }
.ru-attrs { display: grid; gap: 5px; width: 210px; }
.ru-attrs span { display: flex; justify-content: space-between; gap: 10px; padding: 7px 11px; border-radius: 9px; background: white; color: var(--muted); font-weight: 700; }
.ru-attrs b { color: var(--ink); }
.ru-flow { display: flex; align-items: center; gap: 6px; font-weight: 800; }
.ru-flow span { padding: 7px 11px; border-radius: 9px; background: white; }
.ru-flow span.hl { background: var(--blue); color: white; }
.ru-flow i { color: var(--muted); font-style: normal; }
.ru-redirect { display: grid; justify-items: center; gap: 6px; font-weight: 700; }
.ru-redirect span { padding: 6px 11px; border-radius: 9px; background: white; color: var(--muted); text-decoration: line-through; }
.ru-redirect span.ok { color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1.5px #12804c; }
.ru-redirect b { padding: 2px 9px; border-radius: 999px; background: #12804c; color: white; font-size: 11.5px; }

/* Vitrine animée à trois sites (12 s, 4 s par site) */
.rl-url .rl-t { right: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
  .rl-3 .rl-s { animation-name: rl-cover3; animation-duration: 12s; }
  .rl-3 .rl-t { animation-name: rl-text3; animation-duration: 12s; }
  .rl-3 .rl-progress i::after { animation-name: rl-fill3; animation-duration: 12s; }
}
@keyframes rl-cover3 { 0% { opacity: 0; transform: scale(1.04); } 4% { opacity: 1; transform: none; } 33% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes rl-text3 { 0% { opacity: 0; transform: translateY(6px); } 4%, 32% { opacity: 1; transform: none; } 35%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes rl-fill3 { 0% { transform: scaleX(0); } 33% { transform: scaleX(1); } 34%, 100% { transform: scaleX(0); } }
.rl-3 .rl-progress { right: 40%; }
.road-card { align-content: start; }
.section-heading > div > p:not(.eyebrow) { max-width: 640px; margin-top: 14px; }
@media (min-width: 561px) {
  .dband-flow { flex-wrap: nowrap; }
  .dband-flow > span { padding: 12px 13px; font-size: 13.5px; }
  .dband-flow > span small { font-size: 11.5px; }
  .dband-flow > i { flex: none; width: 22px; }
}
/* Listes à puces à l'intérieur d'un élément numéroté */
.split-list li ul { display: grid; gap: 6px; margin: 4px 0 0; padding-left: 18px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.split-list li li { display: list-item; padding: 0; border: 0; counter-increment: none; }
.split-list li li::before { content: none; }
.split-list li li:last-child { border: 0; }
.split-list li li::marker { color: var(--blue); }
.svc-hero-grid > .hv-reel { align-self: start; margin-top: 24px; }

/* ===== Offre SEO : refonte, cannibalisation, suivi, maillage ===== */

/* Plan de redirections animé (héros SEO de refonte) */
.hv-redirect { display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px 0; }
.rd-card { width: min(100%, 480px); display: grid; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow-lg); }
.rd-head { display: flex; justify-content: space-between; align-items: center; }
.rd-head b { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.rd-head em { padding: 3px 9px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: 11px; font-style: normal; font-weight: 800; }
.rd-rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rd-rows li { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--paper); font-size: 12px; font-weight: 700; }
.rd-old { overflow: hidden; color: var(--muted); text-decoration: line-through; white-space: nowrap; text-overflow: ellipsis; }
.rd-new { overflow: hidden; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.rd-code { padding: 2px 7px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); font-size: 10.5px; font-weight: 800; }
.rd-ok { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #12804c; color: white; font-size: 10px; font-style: normal; }
.rd-phases { display: flex; gap: 6px; }
.rd-phases span { flex: 1; padding: 7px 8px; border-radius: 10px; background: var(--surface-soft); color: var(--muted); font-size: 11.5px; font-weight: 800; text-align: center; }
.rd-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 10px; border-radius: 999px; background: var(--ink); color: white; font-size: 13px; font-weight: 800; box-shadow: var(--shadow-lg); }
.rd-chip i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #12804c; font-size: 11px; font-style: normal; }
@media (prefers-reduced-motion: no-preference) {
  .rd-rows li { animation: rd-row 9s ease infinite both; animation-delay: calc(var(--i) * .6s); }
  .rd-ok { animation: rd-ok 9s cubic-bezier(.2,.9,.3,1.4) infinite both; animation-delay: calc(var(--i) * .6s + .3s); }
  .rd-phases span { animation: rd-phase 9s ease infinite both; animation-delay: calc(var(--p) * 3s); }
}
@keyframes rd-row { 0%, 3% { background: var(--paper); } 6%, 12% { background: var(--blue-soft); } 18%, 100% { background: var(--paper); } }
@keyframes rd-ok { 0%, 4% { opacity: 0; transform: scale(.4); } 8%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes rd-phase { 0% { background: var(--blue); color: white; } 30% { background: var(--blue); color: white; } 33%, 100% { background: var(--surface-soft); color: var(--muted); } }

/* Pages qui se concurrencent (héros cannibalisation) */
.hv-cannib { display: grid; place-content: center; padding: 24px 0; }
.cn-card { width: min(100%, 470px); display: grid; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow-lg); }
.cn-query { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: 14px; font-weight: 700; }
.cn-query svg { color: var(--blue); flex: none; }
.cn-label { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cn-pages { display: grid; gap: 8px; }
.cn-page { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--paper); font-size: 13px; font-weight: 800; color: var(--ink-2); }
.cn-page > span:nth-child(2) { position: relative; height: 10px; border-radius: 99px; background: var(--surface-soft); overflow: hidden; }
.cn-page > span:nth-child(2) i { position: absolute; inset: 0 auto 0 0; width: 60%; border-radius: inherit; background: #f0a020; }
.cn-page em { padding: 3px 9px; border-radius: 999px; background: #fff3dc; color: #8a5300; font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; }
.cn-page.is-main .cn-after { color: #12804c; }
.cn-page em .cn-after { color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .cn-page > span:nth-child(2) i { animation: cn-bar 8s ease infinite; }
  .cn-page.is-main > span:nth-child(2) i { animation-name: cn-main; }
}
@keyframes cn-bar { 0%, 40% { width: 60%; background: #f0a020; } 55%, 92% { width: 28%; background: var(--line-strong); } 100% { width: 60%; background: #f0a020; } }
@keyframes cn-main { 0%, 40% { width: 60%; background: #f0a020; } 55%, 92% { width: 92%; background: var(--blue); } 100% { width: 60%; background: #f0a020; } }
.cn-page em { display: grid; }
.cn-page em > span { grid-area: 1 / 1; }
.cn-page .cn-after { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cn-page .cn-before { animation: cn-out 8s ease infinite; }
  .cn-page .cn-after { animation: cn-in 8s ease infinite; }
}
@keyframes cn-out { 0%, 44% { opacity: 1; } 48%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cn-in { 0%, 44% { opacity: 0; } 48%, 94% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cn-page .cn-before { opacity: 0; } .cn-page .cn-after { opacity: 1; } }

/* Signature d'article */
.byline { display: flex; align-items: center; gap: 12px; margin-top: 4px; color: var(--muted); font-size: 14px; }
.byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px white, 0 0 0 4px var(--line); }
.byline b { display: block; color: var(--ink); font-size: 14.5px; }

/* Texte courant dans les chapitres */
.chapter-text { display: grid; gap: 16px; max-width: 760px; }
.chapter-text p { font-size: 17px; line-height: 1.8; }
.chapter-text a { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 4px; }
.chapter > .chapter-text + * { margin-top: 32px; }

/* Rôles des pages */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 900px; }
.role { display: grid; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.role b { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.role span { justify-self: start; padding: 5px 10px; border-radius: 999px; background: var(--surface-soft); color: var(--ink-2); font-size: 12.5px; font-weight: 700; }
@media (max-width: 760px) { .roles { grid-template-columns: 1fr; } }

/* Cas anonymisé */
.anon-case { display: grid; gap: 14px; max-width: 820px; padding: 32px; border-radius: 24px; background: radial-gradient(70% 90% at 100% 0%, #1c2b6b, transparent 60%), var(--ink); }
.anon-case .vs-tag { background: #ffffff1a; color: #c9ceff; }
.anon-case p { color: #c4cbd6; font-size: 16.5px; line-height: 1.75; }

/* Carte du maillage interne */
.lmap { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 54px 40px; width: 100%; max-width: 460px; padding: 26px; border-radius: 22px; background: white; box-shadow: var(--shadow-lg); }
.lmap-node { position: relative; z-index: 1; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: white; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.lmap-node small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.lmap-node.hl { grid-column: 1 / -1; justify-self: center; border-color: var(--blue); background: var(--blue); color: white; box-shadow: 0 10px 24px -10px var(--blue); }
.lmap-node.hl small { color: #d6dbff; }
.lmap-node.miss { border: 1.5px dashed #f0a020; background: #fffaf0; }
.lmap-node.miss small { color: #8a5300; }
.lmap svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lmap svg path { fill: none; stroke: #8f98ff; stroke-width: 2; stroke-dasharray: 5 5; animation: lmap-flow 1s linear infinite; }
.lmap svg path.miss { stroke: #f0a020; }
@keyframes lmap-flow { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) { .lmap svg path { animation: none; } }

/* Positionnement (page SEO) */
.lead-band-section { padding-top: var(--section-space); }
.lead-band { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; padding: 44px; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(60% 90% at 0% 0%, var(--blue-soft), transparent 70%), white; }
.lead-band h2 { margin-top: 16px; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.06; }
.lead-band-copy { display: grid; gap: 14px; }
.lead-band-copy p { font-size: 16.5px; }
.lead-band .offer-chips { margin-top: 4px; }
@media (max-width: 900px) { .lead-band { grid-template-columns: 1fr; gap: 20px; padding: 28px 22px; } }

/* Mail récapitulatif (suivi SEO) */
.mail-card { width: 100%; max-width: 480px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: var(--shadow-lg); font-size: 13px; }
.mail-head { display: grid; gap: 4px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: #f8f9fb; }
.mail-head span { color: var(--muted); font-size: 12px; font-weight: 700; }
.mail-head b { color: var(--ink); font-size: 15px; }
.mail-body { display: grid; gap: 8px; padding: 18px 20px; margin: 0; list-style: none; }
.mail-body li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-weight: 700; }
.mail-body li i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--blue-soft); color: var(--blue); font-size: 11px; font-style: normal; font-weight: 800; }
.mail-files { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 18px; }
.mail-files span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink-2); font-size: 12px; font-weight: 700; }
.mail-files span i { padding: 2px 5px; border-radius: 5px; background: #d92d20; color: white; font-size: 9.5px; font-style: normal; font-weight: 800; }
.mail-files span:nth-child(2) i { background: #12804c; }

/* Pied de page : quatre colonnes */
.footer-columns { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
@media (max-width: 1000px) { .footer-columns { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-columns { grid-template-columns: 1fr; } }

/* Cartes « Pour aller plus loin » */
.res-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.res-card { display: flex; flex-direction: column; gap: 12px; min-height: 190px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: white; transition: border-color .3s, box-shadow .3s, transform .3s; }
.res-card:hover { border-color: #0d1dff40; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.res-card b { color: var(--ink); font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; }
.res-tag { align-self: flex-start; padding: 4px 11px; border-radius: 999px; background: var(--blue); color: white; font-size: 12px; font-weight: 800; }
.res-tag.res-guide { background: var(--blue-soft); color: var(--blue-dark); }
.res-go { display: inline-flex; gap: 10px; margin-top: auto; color: var(--blue-dark); font-size: 14.5px; font-weight: 700; }
.res-go i { font-style: normal; transition: transform .2s; }
.res-card:hover .res-go i { transform: translate(2px, -2px); }
@media (max-width: 1100px) { .res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .res-grid { grid-template-columns: 1fr; } }

/* Étiquettes des pages concurrentes : fond neutre */
.cn-page em { background: white; box-shadow: inset 0 0 0 1px var(--line); color: #8a5300; }
@keyframes rd-phase { 0% { background: var(--surface-soft); color: var(--muted); } 1%, 31% { background: var(--blue); color: white; } 34%, 100% { background: var(--surface-soft); color: var(--muted); } }
.hv-cannib .cn-card, .hv-redirect .rd-card { width: 470px; max-width: 100%; }
.byline span { color: var(--muted); font-size: 14px; line-height: 1.4; }
.anon-case .vs-tag { justify-self: start; }
.chapter .chapter-text p { color: var(--muted); font-size: 17px; line-height: 1.8; }

/* Haut des pages de prestation : moins de vide avant la première section */
.svc-hero { padding-bottom: clamp(16px, 2.5vw, 32px); }
.svc-hero + section, .svc-hero + .chapters-wrap { padding-top: clamp(72px, 7vw, 104px); }

/* « Pour aller plus loin » : guide mis en avant + cartes */
.res-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; }
.res-feature { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 28px; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(70% 90% at 100% 100%, var(--blue-soft), transparent 70%), white; transition: border-color .3s, box-shadow .3s, transform .3s; }
.res-feature:hover { border-color: #0d1dff40; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.res-feature-copy { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.res-feature h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.12; }
.res-feature p { font-size: 15px; line-height: 1.65; }
.res-feature-media .fn-card { width: 100%; padding: 18px; box-shadow: var(--shadow); }
.res-feature-media .fn-row { grid-template-columns: 78px 1fr; }
.res-stack { display: grid; gap: 16px; }
.res-stack .res-card { min-height: 0; }
.res-stack .res-card b { font-size: 18px; }
@media (max-width: 1100px) { .res-layout { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .res-feature { grid-template-columns: 1fr; padding: 24px; } }
.res-feature-media .fn-head em { display: none; }

/* Études de cas : capture légendée, flux sur fond clair, logos */
.case-shot { max-width: 900px; margin: 32px 0 0; }
.case-shot .browser { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: white; box-shadow: var(--shadow-lg); }
.case-shot .browser img { display: block; width: 100%; height: auto; }
.case-shot figcaption { margin-top: 12px; color: var(--muted); font-size: 14px; }
.chapter .split-media { max-width: 900px; margin-top: 8px; }
.cp-flow-light { max-width: 620px; margin-top: 8px; }
.cp-flow-light::before { bottom: 30px; }
.cp-flow-light .cpf-node { border-color: var(--line); background: white; box-shadow: var(--shadow-sm); }
.cp-flow-light .cpf-node b { color: var(--ink); }
.cp-flow-light .cpf-node small { color: var(--muted); }
.cp-flow-light .cpf-site { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), var(--shadow); }
.case-logos { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.case-logos img { height: 34px; width: auto; padding: 8px 12px; box-sizing: content-box; border: 1px solid var(--line); border-radius: 12px; background: white; }

/* ===== Page L'agence ===== */
.ag-hero { position: relative; min-height: 460px; }
.ag-person { position: absolute; z-index: 2; display: grid; justify-items: center; gap: 12px; margin: 0; }
.ag-person img { width: 190px; height: 190px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 8px white, var(--shadow-lg); }
.ag-person figcaption { display: grid; justify-items: center; padding: 8px 16px; border-radius: 14px; background: white; box-shadow: var(--shadow); color: var(--blue-dark); font-size: 12.5px; font-weight: 700; }
.ag-person figcaption b { color: var(--ink); font-size: 15px; }
.ag-p1 { left: 12%; top: 40px; }
.ag-p2 { right: 12%; top: 120px; }
.ag-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: white; box-shadow: var(--shadow); color: var(--ink-2); font-size: 13px; font-weight: 700; animation: ag-float 6s ease-in-out infinite; }
.ag-chip img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.ag-c1 { left: 0; top: 0; } .ag-c2 { right: 2%; top: 10px; animation-delay: -1.5s; } .ag-c3 { left: 4%; bottom: 40px; animation-delay: -3s; } .ag-c4 { right: 6%; bottom: 10px; animation-delay: -4.5s; }
.ag-pin { position: absolute; z-index: 3; left: 50%; top: 52%; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: white; font-size: 13px; font-weight: 800; transform: translateX(-50%); box-shadow: var(--shadow-lg); }
.ag-pin i { width: 9px; height: 9px; border-radius: 50%; background: #ff6b4a; box-shadow: 0 0 0 4px #ff6b4a40; }
@keyframes ag-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .ag-chip { animation: none; } }
@media (max-width: 640px) { .ag-hero { min-height: 400px; } .ag-person img { width: 130px; height: 130px; } .ag-p1 { left: 2%; } .ag-p2 { right: 2%; top: 150px; } .ag-chip { font-size: 12px; } }
.partner-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.partner { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: white; transition: border-color .3s, box-shadow .3s, transform .3s; }
.partner:hover { border-color: #0d1dff40; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.partner img { width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--paper); }
.partner b { color: var(--ink); font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.partner-role { color: var(--blue-dark); font-size: 13px; font-weight: 700; }
.partner .res-go { margin-top: auto; padding-top: 10px; }
.partner-more { margin-top: 18px; }
.ag-address { color: var(--ink-2) !important; font-weight: 700; }
@media (max-width: 1000px) { .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .partner-grid { grid-template-columns: 1fr; } }
.ag-pin { top: 4px; left: 54%; }
@media (max-width: 640px) { .ag-pin { top: auto; bottom: 0; left: 50%; } }
/* Bandeau logos après une section : même respiration que les autres sections */
.dband-section + .trust, .section + .trust { margin-top: var(--section-space); }
.ag-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
/* L'agence : bandeau « Nous rencontrer » avec photo */
.lead-band.ag-meet { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: stretch; gap: 0; padding: 14px; }
.ag-meet-photo { min-height: 440px; margin: 0; overflow: hidden; border-radius: 20px; }
.ag-meet-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.ag-meet-body { display: grid; align-content: center; gap: 22px; padding: 30px 30px 30px 48px; }
@media (max-width: 900px) {
  .lead-band.ag-meet { grid-template-columns: 1fr; padding: 12px; }
  .ag-meet-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .ag-meet-body { padding: 14px 10px 18px; }
}
.ru-flow { font-size: 11.5px; gap: 4px; } .ru-flow span { padding: 6px 8px; }
/* Pied de page : l'éléphant remue la queue */
.skyline-svg .sk-tail { transform-box: fill-box; transform-origin: 0 0; animation: sk-tail 3.2s ease-in-out infinite; }
@keyframes sk-tail { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(14deg); } 86% { transform: rotate(-6deg); } 92% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .skyline-svg .sk-tail { animation: none; } }
/* … et balance sa trompe */
.skyline-svg .sk-trunk { transform-box: fill-box; transform-origin: 100% 0; animation: sk-trunk 4.6s ease-in-out infinite; }
@keyframes sk-trunk { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 32% { transform: rotate(-4deg); } 44% { transform: rotate(9deg); } 60% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .skyline-svg .sk-trunk { animation: none; } }
.nantes-stamp .stamp-lu path { vector-effect: non-scaling-stroke; stroke-width: 1.7; }
.nantes-stamp .stamp-lu .stamp-thin { stroke-width: 1.1; opacity: .75; }
/* Badge « Fait à Nantes » : l'éléphant */
.nantes-stamp .stamp-eye { stroke-width: 3.4 !important; }
.nantes-stamp .stamp-trunk { transform-box: fill-box; transform-origin: 100% 0; animation: sk-trunk 4.6s ease-in-out infinite; }
.nantes-stamp .stamp-tail { transform-box: fill-box; transform-origin: 0 0; animation: sk-tail 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .nantes-stamp .stamp-trunk, .nantes-stamp .stamp-tail { animation: none; } }
/* L'agence : étiquette de lieu aux couleurs du site, sans masquer les pastilles */
.ag-pin { top: auto; bottom: 0; left: 50%; background: white; color: var(--ink); border: 1px solid var(--line); }
.ag-pin i { background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
@media (max-width: 640px) {
  .ag-hero { min-height: 330px; }
  .ag-person img { width: 112px; height: 112px; box-shadow: 0 0 0 5px white, var(--shadow); }
  .ag-person figcaption { padding: 6px 10px; font-size: 11px; text-align: center; }
  .ag-person figcaption b { font-size: 13.5px; }
  .ag-p1 { left: 2%; top: 56px; } .ag-p2 { right: 2%; left: auto; top: 96px; }
  .ag-c1 { left: 0; top: 0; } .ag-c2 { right: 0; top: 0; }
  .ag-c3, .ag-c4, .ag-pin { display: none; }
}