/* Hallmark · shape: Narrative Workflow · genre: modern-minimal · theme: Vantage (deal 2/3, seed conseil-croissance-par-pour-587c·b1c7cbd6·2026-11-07·r0) · job: book · draw: 87b707
 * hero: Poster · nav: floating pill, wordmark, one centred link and the action · footer: one line, wordmark, links, legal · imagery: none, a point-cloud terrain in the hero · signature: a scanned terrain of points that rises with each pass of the sweep · vantage: terrain/steel
 * axes: dark/grotesk-sans/chromatic-lime · posture: restrained · contrast: pass · fold: pass · copy: verbatim · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S3 R5 V4 · weakest: S, a consultancy without cases yet; the services carry concrete systems by name instead of claims, and the owner chose every line */
/* Hallmark · swap: job hire to book, the one action is booking a call; services pinned beside a cloud that changes shape per panel; the method is four cards on one line */
/* Hallmark · waive 2b · a three-stop sweep in ink and the lime accent over a few chosen words · the owner asked for a light passing over the words that carry each promise */
/* Hallmark · waive 38iii · the word croissance turns lime only as the hero scrolls away · the owner asked for the word to drift down in lime and fade before the services */
/* Hallmark · dismissed 18 · the owner asked to remove the hero pause button; the cloud stops off screen and under reduced motion */
/* Hallmark · waive 59 · the small gaps are full-bleed background canvases, the hero relief and the booking plane, touching the next band · both are backgrounds; the content of every section keeps 120px or more */
/* Hallmark · dismissed theme do-not on lines · the owner asked for a network feel in the booking background; links appear only between lit neighbours near the cursor */
/* Hallmark · answered F19 · Geologica carries 200 to 400 for headings and text, DM Sans 600 is reserved to the nav link, the buttons and the footer links, chosen by the owner */
/* Hallmark · answered F15 · the services pair a pinned cloud with panels at 96px, the step cards sit 32px apart, the list columns 24px, each gap belongs to a different kind of row */
/* Hallmark · dismissed 25 · reserved for display statements, none remain on this page */
@import url("./tokens.css");
@import url("./base.css");

:root { --font-ui: "DM Sans", ui-sans-serif, system-ui, sans-serif; --nav-h: 72px; --tick-color: var(--color-rule-2); }

h1, h2, h3 { font-variation-settings: "SHRP" 100; }
body { font-weight: 300; font-variation-settings: "SHRP" 0; }
.lead { color: var(--color-ink-2); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-ui); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-hi); transform: translateY(-1px); }
/* Un reflet passe régulièrement sur les boutons pleins, comme sur les mots clés. */
.btn:not(.btn--line) { position: relative; overflow: hidden; isolation: isolate; }
.btn:not(.btn--line)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--color-accent-hi) 60%, var(--color-ink)) 50%, transparent 70%); transform: translateX(-120%); animation: btn-sheen 4s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes btn-sheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
.btn:active { transform: translateY(1px); }
.nav .btn::after, .hero .btn::after { display: none; }
.nav .btn:hover, .hero .btn:hover { transform: none; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"], .btn--line { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); }
.btn--line:hover { background: var(--color-paper-3); }
.btn--sm { min-height: 44px; padding: 0 var(--space-lg); font-size: var(--text-sm); }

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

.ticks { position: relative; }
.ticks::before { content: ""; position: absolute; inset: 0; pointer-events: none; border: var(--rule-hair) solid var(--tick-color); -webkit-mask: conic-gradient(at var(--tick) var(--tick), transparent 75%, var(--color-ink) 0) 0 0 / calc(100% - var(--tick)) calc(100% - var(--tick)); mask: conic-gradient(at var(--tick) var(--tick), transparent 75%, var(--color-ink) 0) 0 0 / calc(100% - var(--tick)) calc(100% - var(--tick)); }

/* ---------- nav: floating pill ---------- */
.nav { position: fixed; top: var(--space-md); left: 0; right: 0; z-index: var(--z-sticky-nav); display: flex; justify-content: center; padding-inline: var(--space-md); pointer-events: none; }
.nav__pill { pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-xl); width: min(100%, 44rem); min-height: var(--nav-h); padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg); border-radius: var(--radius-pill); background: var(--color-paper-2); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); }
.nav__pill .btn { justify-self: end; }
.wordmark { justify-self: start; font: 400 var(--text-xl)/1 var(--font-display); font-variation-settings: "SHRP" 100; letter-spacing: -0.04em; color: var(--color-ink); text-decoration: none; }
.fly-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 350; pointer-events: none; }
.logo-ball { display: inline-block; width: 13px; height: 13px; margin-left: var(--space-3xs); vertical-align: -1px; opacity: 0; transition: opacity 300ms var(--ease-out); }
.nav.has-dot .fly-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 350; pointer-events: none; }
.logo-ball { opacity: 1; }
.wordmark:focus-visible, .nav__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 2px; }
/* « Services » à égale distance du logo et du bouton. */
.nav__link { justify-self: center; font-family: var(--font-ui); font-size: var(--text-md); font-weight: 600; color: var(--color-ink-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.nav__link:hover { color: var(--color-ink); }
.nav__link:active { color: var(--color-muted); }

/* ---------- hero: Poster ---------- */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; }
.hero__cloud { position: fixed; inset: 0; margin: 0; z-index: 0; pointer-events: none; }
main > section:not(.hero), .footer { position: relative; z-index: 1; }
.hero__cloud::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--k, 0)); background: linear-gradient(90deg, color-mix(in oklab, var(--color-paper) 92%, transparent) 0%, color-mix(in oklab, var(--color-paper) 60%, transparent) 32%, transparent 60%), linear-gradient(0deg, var(--color-paper) 0%, transparent 25%), linear-gradient(180deg, var(--color-paper) 0%, transparent 18%); }
.cloud { display: block; width: 100%; height: 100%; }
.hero__inner { position: relative; z-index: 2; padding-top: calc(var(--nav-h) + var(--space-3xl)); padding-bottom: var(--space-3xl); }
.hero__text { display: grid; justify-items: start; gap: var(--space-lg); max-width: 44rem; }
.hero h1 { font-size: clamp(3rem, 6vw, 6rem); line-height: 1; max-width: 13ch; }
.hero .lead { max-width: 46ch; }
.hero .btn { margin-top: var(--space-xs); }

/* ---------- services: the cloud stays, the domains scroll past ---------- */
/* Ordinateur : Être vu suit directement le haut de page (environ un écran) ; le téléphone garde sa longue descente. */
.services { padding-block: 0 var(--section-gap-s); }
.services__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: start; }
.services__visual { position: sticky; top: calc(var(--nav-h) + var(--space-2xl)); margin: 0; width: 100%; aspect-ratio: 1 / 1; max-height: calc(100dvh - var(--nav-h) - var(--space-2xl) * 2); max-width: calc(100dvh - var(--nav-h) - var(--space-2xl) * 2); justify-self: center; }
.morph { display: block; width: 100%; height: 100%; }
.panels { display: grid; }
.panel { min-height: 80dvh; display: grid; align-content: center; gap: var(--space-lg); padding-block: var(--space-2xl); }
.panel h3 { max-width: 10ch; font-size: clamp(2.75rem, 5vw, 5rem); font-weight: 200; line-height: 0.98; letter-spacing: -0.04em; color: var(--color-muted); transition: color var(--dur-long) var(--ease-out); }
.panel.is-active h3, html:not(.js) .panel h3 { color: var(--color-ink); }
.panel__line { max-width: 22ch; font-size: clamp(1.5rem, 2.2vw, 2.25rem); font-weight: 200; line-height: 1.25; letter-spacing: -0.02em; color: var(--color-ink-2); }

/* ---------- the shine: one light that passes over the words that matter ---------- */
.shine { color: var(--color-ink); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .js .shine { display: inline-block; transform-origin: 50% 80%; background: linear-gradient(100deg, var(--color-ink) 34%, color-mix(in oklab, var(--color-accent) 55%, var(--color-ink)) 50%, var(--color-ink) 66%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
  .js .shine.is-shining { animation: shine 4s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
}
@keyframes shine { 0% { background-position: 100% 0; transform: none; } 35% { transform: translateY(-0.03em) scale(1.035); } 70%, 100% { background-position: 0% 0; transform: none; } }
.grow-word { display: inline-block; color: color-mix(in oklab, var(--color-ink), var(--color-accent) calc(var(--g, 0) * 100%)); opacity: var(--go, 1); transform: translate(calc(var(--gx, 0) * 1px), calc(var(--gy, 0) * 1px)) scale(var(--gs, 1)); transform-origin: 50% 50%; position: relative; z-index: 3; }
.hero-fade { opacity: var(--hf, 1); }
.grow-fixed { position: fixed; left: 0; top: 0; display: none; color: color-mix(in oklab, var(--color-ink), var(--color-accent) calc(var(--g, 0) * 100%)); pointer-events: none; z-index: 3; }
.grow-fixed.is-on { display: block; }
.hero .btn.hero-fade { visibility: var(--hv, visible); }

/* ---------- method: four cards on one line ---------- */
.method { padding-block: var(--section-gap-s) 0; }
.mpin { position: relative; height: calc(100dvh + 210dvh); }
.mpin__sticky { position: sticky; top: 0; height: 100dvh; display: grid; align-content: center; padding-top: var(--nav-h); }
html:not(.js) .mpin { height: auto; }
html:not(.js) .mpin__sticky { position: static; height: auto; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); list-style: none; margin: 0; padding: 0; counter-reset: card; }
.journey-wrap { position: relative; margin-top: var(--space-2xl); }
.journey { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 13rem; pointer-events: none; z-index: 2; }
.card { counter-increment: card; position: relative; display: flex; flex-direction: column; gap: var(--space-md); min-height: 26rem; padding: 13rem var(--space-xl) var(--space-xl); border-radius: 14px; background: var(--color-paper-2); color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); overflow: hidden; }
.card { transition: box-shadow var(--dur-long) var(--ease-out); }
.card.is-active { box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule-2); }
.card h3 { font-size: var(--text-title); font-weight: 400; line-height: 1.15; color: var(--color-ink-2); transition: color var(--dur-long) var(--ease-out); }
.card.is-active h3, html:not(.js) .card h3 { color: var(--color-ink); }
.card p { color: var(--color-ink-2); }
.card .card__note { margin-top: auto; font-family: var(--font-ui); font-weight: 600; font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--color-muted); }

/* ---------- tasks: columns of what the systems handle, moved by the scroll ---------- */
.tasks__pin { position: relative; height: 260vh; }
.tasks__wall { position: sticky; top: var(--rule-hair); height: 100vh; overflow: hidden; }
.tasks__cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-md); max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.tasks__col { overflow: hidden; }
.tasks__track { display: grid; gap: var(--space-md); }
.tasks__tile { display: flex; align-items: center; gap: var(--space-xs); min-height: 72px; padding: var(--space-sm) var(--space-lg); border-radius: 12px; background: var(--color-paper-2); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); color: var(--color-ink-2); line-height: 1.25; }
.tasks__tile::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--color-muted); }
.tasks__tile.is-hot { color: var(--color-ink); }
.tasks__tile.is-hot::before { background: var(--color-accent); }
.tasks__wall::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 52% 56% at 50% 50%, var(--color-paper) 0%, var(--color-paper) 38%, color-mix(in oklab, var(--color-paper) 80%, transparent) 62%, transparent 100%), linear-gradient(var(--color-paper), transparent 16%, transparent 84%, var(--color-paper)); }
.tasks__center { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: var(--space-lg); text-align: center; padding-inline: var(--gutter); }
.tasks__center h2 { max-width: 16ch; }
.tasks__center p { color: var(--color-ink-2); }
html:not(.js) .tasks__pin { height: auto; }
html:not(.js) .tasks__wall { position: relative; height: 80vh; }

/* ---------- booking ---------- */
.book__bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.book__grid { position: relative; z-index: 1; }
.book { overflow: clip; padding-block: var(--section-gap) var(--section-gap-l); }
.book__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.book__head { position: sticky; top: calc(var(--nav-h) + var(--space-2xl)); }
.book__sub { margin-top: var(--space-md); font-size: var(--text-lg); color: var(--color-ink-2); }
.cal { min-height: 560px; display: grid; padding: var(--space-xl); background: var(--color-paper-2); border-radius: var(--radius-card); }
.cal__fallback { align-self: center; justify-self: center; display: grid; justify-items: center; gap: var(--space-lg); text-align: center; }
.cal__title { font-size: var(--text-title); font-weight: 300; color: var(--color-ink-2); }
.cal.is-live { padding: 0; }
.cal.is-live .cal__fallback { display: none; }

/* ---------- footer: one line ---------- */
.footer { padding-block: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg) var(--space-xl); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.footer__links a { font-family: var(--font-ui); font-weight: 600; font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.footer__links a:hover { color: var(--color-ink); text-decoration: underline; }
.footer__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.footer__legal { margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  /* Téléphone : hauteurs en svh (stables) et non en dvh, qui change quand la barre d’adresse
     apparaît ou disparaît et ferait sauter toute la page. */
  .hero { min-height: 100svh; }
  .hero__cloud::after { background: linear-gradient(0deg, var(--color-paper) 0%, color-mix(in oklab, var(--color-paper) 85%, transparent) 40%, color-mix(in oklab, var(--color-paper) 30%, transparent) 70%, transparent 100%); }
  .services { padding-top: 110svh; }
    .services__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* Mobile : le nuage est le décor plein écran, le texte défile par-dessus, en bas de l'écran. */
  .services__grid { display: block; }
  .services__visual { position: sticky; top: var(--rule-hair); z-index: 0; width: calc(100% + var(--gutter) * 2); max-width: none; height: 100svh; max-height: none; margin-inline: calc(-1 * var(--gutter)); padding-top: calc(var(--nav-h) + var(--space-lg)); aspect-ratio: auto; }
  .services__visual .morph { height: 48%; }
  .services__visual::after { content: ""; position: absolute; inset: auto 0 0 0; height: 52%; background: linear-gradient(to top, var(--color-paper) 0%, var(--color-paper) 72%, transparent 100%); pointer-events: none; }
  .panels { position: relative; z-index: 1; margin-top: -100svh; }
  .panel { min-height: 90svh; align-content: end; padding-block: 0 10svh; }
  .panel > * { max-width: 100%; }
  .panel:first-child { min-height: 100svh; }
  .panel:last-child { margin-bottom: 70svh; }
  /* Mobile : la méthode devient des cartes à balayer à l'horizontale ; la suivante dépasse sur le bord. */
  .mpin { height: auto; }
  .mpin__sticky { position: static; height: auto; padding-top: 0; display: block; }
  .method { padding-bottom: var(--section-gap-s); }
  .journey-wrap { display: block; margin-top: var(--space-xl); }
  .journey { position: relative; top: auto; width: calc(100% + var(--gutter) * 2); height: clamp(120px, calc(100svh - 520px), 30svh); margin: 0 calc(-1 * var(--gutter)) var(--space-lg); }
  .cards { display: flex; gap: var(--space-sm); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .cards::-webkit-scrollbar { display: none; }
  .card { flex: 0 0 84%; min-height: 0; padding-top: var(--space-xl); scroll-snap-align: start; scroll-snap-stop: always; transition: opacity var(--dur-long) var(--ease-out); }
  .js .card:not(.is-active) { opacity: 0.5; }
  /* Les tâches restent à l'écran moins longtemps : elles glissent aussi toutes seules. */
  .tasks__pin { height: 170vh; }
  .book__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .book__head { position: static; }
}
@media (max-width: 40rem) {
  :root { --nav-h: 60px; }
  .nav { top: var(--space-xs); padding-inline: var(--space-xs); }
  /* Le bouton est à égale distance du bord de la bulle en haut, en bas et à droite (8 px). */
  .nav__pill { gap: var(--space-sm); padding: 8px 8px 8px 20px; }
  .nav__pill .btn--sm { min-height: 44px; padding: 0 var(--space-md); }
  .nav .wordmark { font-size: var(--text-lg); }
  .nav__link { display: none; }
  .nav__pill { grid-template-columns: 1fr auto; }
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3.25rem); }
  .hero .lead { font-size: var(--text-md); }
  .panel h3 { font-size: clamp(2.25rem, 10vw, 3rem); }
  .cal { min-height: 360px; padding: var(--space-lg); }
  .journey-wrap { margin-top: var(--space-lg); }
  .card { padding: var(--space-lg); }
  /* Deux colonnes sur téléphone : chaque tâche se lit en entier, sans mot coupé par le bord. */
  .tasks__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tasks__col:nth-child(n+3) { display: none; }
  .tasks__tile { min-width: 0; min-height: 60px; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); -webkit-hyphens: auto; hyphens: auto; }
  .footer__legal { margin-left: 0; }
}

/* Téléphone (steps.js) : le doigt pilote la page, puis elle glisse jusqu'au module ; pas de rebond natif. */
html.steps, html.steps body { overscroll-behavior: none; }

@media (prefers-reduced-motion: reduce) {
  .btn::after { animation: none; display: none; }
  .js .shine, .js .shine.is-shining { animation: none; background: none; color: var(--color-ink); }
  .grow-word { transform: none; opacity: 1; }
  .hero-fade { opacity: 1; }
  .btn:hover, .btn:active { transform: none; }
}