/* =====================================================================
   madWEB — Système visuel « Le point. »
   ---------------------------------------------------------------------
   Concept : le point final du logo (madweb. / mw.) devient le geste
   récurrent du site : fin de titre, bouton, curseur de progression,
   soleil de l'illustration, puis « horizon » qui s'étend jusqu'au contact.
   Ciel = lumière et espace : blanc → blanc bleuté → bleu ciel.
   Typo : Bricolage Grotesque (titres) + Instrument Sans (texte), OFL.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    /* Couleurs */
    --white: #ffffff;
    --mist: #f3f9fd;          /* blanc bleuté */
    --sky-50: #e6f4fb;
    --sky-100: #cfeaf6;
    --sky: #87ceeb;           /* bleu ciel : surfaces, points, décor */
    --sky-400: #5fb7de;       /* décor uniquement (jamais du texte) */
    --blue: #176b9b;          /* actions : 5,8:1 sur blanc */
    --azure: #1c7fe0;         /* bleu vif de l'accueil (titres, coches) : 4,2:1 sur blanc, grand texte */
    --cobalt: #0a5aa6;        /* « business. » et réseau : 3,5:1 sur le ciel (grand texte), 6,6:1 sur blanc */
    --blue-700: #0f5580;
    --ink: #142d40;           /* encre : 14:1 sur blanc, 8:1 sur ciel */
    --ink-2: #3a5468;         /* texte courant secondaire : 7,9:1 */
    --line: #d7e7f1;
    --line-strong: #b5d3e4;
    --night: #060d1a;         /* bleu nuit de la parenthèse aux trois bulles */

    /* Typographie */
    --font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
    --font-text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;


    --fs-h2: clamp(2.3rem, 1.3rem + 3.9vw, 4.75rem);
    --fs-h3: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem);
    --fs-lead: clamp(1.08rem, 1rem + 0.35vw, 1.3rem);
    --fs-body: 1.0625rem;
    --fs-small: 0.9375rem;
    --fs-xs: 0.8125rem;

    /* Espacements & gabarits */
    --wrap: 1320px;
    --gutter: max(clamp(20px, 4.2vw, 56px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));   /* encoche en paysage */
    --section: clamp(96px, 12vw, 184px);
    --r-sm: 12px;
    --r-md: 20px;
    --r-lg: 32px;
    --r-pill: 999px;

    /* Ombres : bleutées, jamais grises */
    --shadow-1: 0 1px 2px rgba(20, 45, 64, .06), 0 6px 18px -8px rgba(23, 107, 155, .18);
    --shadow-2: 0 2px 6px rgba(20, 45, 64, .05), 0 30px 60px -24px rgba(23, 107, 155, .32);

    /* Mouvement */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-io: cubic-bezier(.65, 0, .35, 1);
    --t-fast: .22s;
    --t-mid: .5s;
    --t-slow: .9s;

    --nav-h: 76px;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--nav-h) + 24px);
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
body {
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
::selection { background: var(--sky); color: var(--ink); }

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
    border-radius: 6px;
}

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}
.skip-link {
    position: fixed;
    top: 12px; left: 12px;
    z-index: 100;
    padding: 12px 18px;
    background: var(--ink);
    color: var(--white);
    border-radius: var(--r-pill);
    font-weight: 600;
    transform: translateY(-160%);
    transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus { transform: none; }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ---------- 3. Typographie ---------- */
.display, .display-2, .display-3, h1, h2, h3 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    color: var(--ink);
    text-wrap: balance;
}
.display-2 {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.035em;
}
.display-3 {
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.03em;
}
.accent { color: var(--blue); }
/* Le point : signature de chaque grand titre */
.dot {
    color: var(--sky);
    display: inline-block;
}
.accent .dot, .dot--blue { color: var(--sky-400); }

.lead {
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 38em;
    text-wrap: pretty;
}
p { text-wrap: pretty; }

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-text);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 22px;
}
.kicker::before {
    content: '';
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--sky);
    box-shadow: 0 0 0 4px var(--sky-50);
    flex-shrink: 0;
}

/* Soulignement dessiné (liens texte) */
.link {
    font-weight: 600;
    color: var(--blue);
    background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat;
    transition: background-size var(--t-mid) var(--ease-out), color var(--t-fast);
    padding-bottom: 1px;
}
.link:hover { background-size: 0 1.5px; background-position: 100% 100%; }

/* ---------- 4. Boutons ---------- */
/* Au survol, le point grossit jusqu'à remplir le bouton. */
.btn {
    --btn-bg: var(--blue);
    --btn-fg: var(--white);
    --btn-fill: var(--ink);
    --btn-fg-hover: var(--white);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 14px 18px 14px 26px;
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.005em;
    white-space: nowrap;
    border: 1.5px solid transparent;
    transition: color var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out), transform var(--t-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
}
.btn::before {                       /* le point qui s'étend */
    content: '';
    position: absolute;
    z-index: -1;
    right: 22px; top: 50%;
    width: 10px; height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--btn-fill);
    transform: scale(0);
    transition: transform .6s var(--ease-out);
}
.btn__arrow {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--sky);
    color: var(--ink);
    flex-shrink: 0;
    transition: transform var(--t-mid) var(--ease-out), background var(--t-mid);
}
.btn__arrow svg { width: 14px; height: 14px; }
.btn:active { transform: scale(.98); }

@media (hover: hover) {
    .btn:hover { color: var(--btn-fg-hover); }
    .btn:hover::before { transform: scale(60); }
    .btn:hover .btn__arrow { transform: translateX(3px); }
}
.btn:focus-visible { outline-offset: 4px; border-radius: var(--r-pill); }

.btn--primary { }
.btn--ink { --btn-bg: var(--ink); --btn-fill: var(--blue); }
.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-fill: var(--sky-50);
    --btn-fg-hover: var(--ink);
    border-color: var(--line-strong);
    padding-inline: 24px;
}
.btn--ghost .btn__arrow { background: var(--sky-50); }
.btn--lg { min-height: 60px; font-size: 1.0625rem; padding-left: 30px; }
.btn--sm { min-height: 44px; padding: 10px 12px 10px 20px; font-size: .9375rem; gap: 10px; }
.btn--sm .btn__arrow { width: 24px; height: 24px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .7; cursor: progress; }

/* ---------- 5. Marque ---------- */
.brand {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.55rem;
    letter-spacing: -.05em;
    line-height: 1;
    color: var(--ink);
}
.brand__web { color: var(--blue); }
.brand__dot { color: var(--sky); margin-left: .02em; }

/* ---------- 6. Navigation flottante ---------- */
.site-nav {
    position: fixed;
    inset: calc(14px + env(safe-area-inset-top, 0px)) 0 auto;
    z-index: 60;
    padding-inline: var(--gutter);
    pointer-events: none;
}
.site-nav__pill {
    pointer-events: auto;
    max-width: 1180px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 62px;
    padding: 8px 8px 8px 24px;
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    border: 1px solid rgba(181, 211, 228, .6);
    border-radius: var(--r-pill);
    box-shadow: 0 10px 40px -18px rgba(23, 107, 155, .35);
    transition: box-shadow var(--t-mid) var(--ease-out), background var(--t-mid);
}
.site-nav.is-scrolled .site-nav__pill {
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 14px 44px -16px rgba(23, 107, 155, .45);
}
.site-nav__links {
    display: flex;
    gap: 2px;
    margin-left: auto;
}
.site-nav__links a {
    position: relative;
    padding: 10px 16px;
    border-radius: var(--r-pill);
    font-size: .9688rem;
    font-weight: 500;
    color: var(--ink-2);
    transition: color var(--t-fast), background var(--t-fast);
}
.site-nav__links a::after {         /* point d'état actif */
    content: '';
    position: absolute;
    left: 50%; bottom: 3px;
    width: 5px; height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: var(--blue);
    transform: scale(0);
    transition: transform var(--t-mid) var(--ease-out);
}
.site-nav__links a:hover { color: var(--ink); background: var(--mist); }
.site-nav__links a.is-active { color: var(--ink); }
.site-nav__links a.is-active::after { transform: scale(1); }
.site-nav__cta { margin-left: 8px; }

.site-nav__toggle {
    display: none;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    min-height: 46px;
    padding: 0 18px;
    border-radius: var(--r-pill);
    background: var(--ink);
    color: var(--white);
    font-weight: 600;
    font-size: .9375rem;
}
.toggle-icon {
    position: relative;
    width: 16px; height: 10px;
}
.toggle-icon::before, .toggle-icon::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--t-mid) var(--ease-out);
}
.toggle-icon::before { top: 0; }
.toggle-icon::after { bottom: 0; right: 5px; }
.site-nav__toggle[aria-expanded="true"] .toggle-icon::before { transform: translateY(4px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .toggle-icon::after { transform: translateY(-4px) rotate(-45deg); right: 0; }

/* Menu mobile : panneau ciel plein écran */
.menu {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: flex;
    flex-direction: column;
    padding: calc(var(--nav-h) + 40px) var(--gutter) max(32px, env(safe-area-inset-bottom));
    background:
        radial-gradient(120% 60% at 100% 0%, var(--sky) 0%, transparent 60%),
        linear-gradient(180deg, var(--sky-100), var(--mist));
    clip-path: circle(0 at calc(100% - 60px) 44px);
    visibility: hidden;
    transition: clip-path .7s var(--ease-io), visibility 0s linear .7s;
    overflow-y: auto;
}
.menu.is-open {
    clip-path: circle(150% at calc(100% - 60px) 44px);
    visibility: visible;
    transition: clip-path .7s var(--ease-io), visibility 0s;
}
.menu__links { display: flex; flex-direction: column; gap: 4px; }
.menu__links a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 8px 0;
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 11vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s var(--ease-out), transform .6s var(--ease-out);
}
.menu__links a span {
    font-family: var(--font-text);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--blue);
}
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(1) { transition-delay: .18s; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: .23s; }
.menu.is-open .menu__links a:nth-child(3) { transition-delay: .28s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: .33s; }
.menu__foot {
    margin-top: auto;
    padding-top: 36px;
    display: grid;
    gap: 18px;
}
.menu__contact { display: grid; gap: 4px; font-weight: 600; }
.menu__contact a { display: flex; align-items: center; min-height: 44px; font-size: 1.0625rem; }

/* ---------- 7. Révélations au scroll ---------- */
/* Sans JS (ou si le JS échoue), tout reste visible. */
.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
    transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Titres : lignes révélées par masque */
.mask-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.mask-line > span { display: inline-block; }
.js [data-split] .mask-line > span {
    transform: translate3d(0, 105%, 0);
    transition: transform 1.05s var(--ease-out);
    transition-delay: calc(var(--d, 0s) + var(--i, 0) * 90ms);
}
.js [data-split].is-in .mask-line > span { transform: none; }

/* ---------- 8. Accueil : « Développez votre business. » au centre du réseau de services ---------- */
.stage { position: relative; }
.stage__pin { position: relative; }

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;                                  /* non défilable, même par le focus */
    min-height: 100vh;
    min-height: 100svh;
    background: linear-gradient(180deg, #4d9dd3 0%, #6cb4e1 26%, #8fcbee 52%, #bfe3f5 78%, #eaf6fc 100%);
}
/* ciel : trois couches de nuages derrière le réseau, dérive très lente */
.hero__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; overflow: clip; }
.hero__layer { position: absolute; left: -6%; width: 112%; top: -5%; height: 110%; }
.hero__layer picture, .hero__layer img { display: block; width: 100%; height: 100%; }
.hero__layer img { object-fit: cover; animation: sky-drift 130s var(--ease-io) infinite alternate; }
.hero__layer--far img { animation-duration: 170s; }
.hero__layer--mid img { animation-delay: -45s; }
.hero__layer--near { top: auto; bottom: -4%; }
.hero__layer--near img { object-position: 50% 100%; animation-duration: 95s; animation-direction: alternate-reverse; }
.hero.is-offscreen .hero__layer img { animation-play-state: paused; }
@keyframes sky-drift {
    from { transform: translate3d(-1.6%, 0, 0); }
    to   { transform: translate3d(1.6%, 0, 0); }
}
.hero__veil {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(46% 34% at 50% 44%, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .3) 20%, rgba(255, 255, 255, 0) 42%);
}
/* voile blanc bleuté : le ciel s'éclaircit au début de la séquence (opacité pilotée par le script) */
.hero__wash { position: absolute; inset: 0; background: var(--mist); opacity: 0; }

/* Réseau : par défaut (sans JS, téléphone, tablette) = réseau compact au-dessus du titre ;
   sur grand écran le script ajoute .net--spread et répartit les services autour du titre. */
.net {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--nav-h) + clamp(18px, 3vh, 32px)) var(--gutter) clamp(36px, 6vh, 72px);
}
.net__wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}
.net__link { --e: 0; }
.net__wire {
    fill: none;
    stroke: var(--ink);
    stroke-opacity: calc(.34 + var(--e) * .5);
    stroke-width: calc(1px + var(--e) * .6px);
    stroke-dasharray: 1;
    animation: wire-in 1.3s var(--ease-out) both;
    animation-delay: calc(.25s + var(--i, 0) * 70ms);
    transition: stroke .3s, stroke-opacity .3s, stroke-width .3s;
}
@keyframes wire-in { from { stroke-dashoffset: 1; } }
.net__flow {                                   /* impulsion qui file vers le titre */
    fill: none;
    stroke: #fff;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: .035 .14;
    opacity: 0;
    transition: opacity .3s;
}
.net__anchor {
    fill: #fff;
    stroke: var(--ink);
    stroke-opacity: .55;
    stroke-width: 1.2;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(calc(1 + var(--e) * .4));
    transition: fill .3s, stroke .3s, transform .35s var(--ease-out);
}
.net__link.is-hot .net__wire { stroke: var(--cobalt); stroke-opacity: 1; stroke-width: 1.6px; }
.net__link.is-hot .net__flow { opacity: .95; animation: wire-flow 1.1s linear infinite; }
.net__link.is-hot .net__anchor { fill: var(--cobalt); stroke: #fff; transform: scale(1.5); }
@keyframes wire-flow { to { stroke-dashoffset: -.175; } }

.net__nodes {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 600px;
    margin-bottom: clamp(26px, 5vh, 44px);
}
.net__node {
    display: block;
    color: var(--ink);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.net__in {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 15px 8px 11px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .8);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 6px 18px -12px rgba(20, 45, 64, .55);
    transition: color .25s, background .25s;
}
.net__dot {
    order: -1;
    width: 8px; height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1.5px var(--ink);
    transition: background .25s, box-shadow .25s;
}
.net__label {
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    animation: node-in .8s var(--ease-out) both;
    animation-delay: calc(.1s + var(--i, 0) * 60ms);
}
@keyframes node-in { from { opacity: 0; translate: 0 8px; } }
.net__node.is-hot .net__label, .net__node:focus-visible .net__label { color: var(--cobalt); }
.net__node.is-hot .net__dot, .net__node:focus-visible .net__dot { background: var(--cobalt); box-shadow: 0 0 0 4px rgba(10, 90, 166, .22); }
.net__node:focus-visible { outline: none; }
.net__node:focus-visible .net__in { outline: 3px solid var(--cobalt); outline-offset: 3px; }
@media (hover: hover) {
    .net__node:hover .net__in { background: #fff; }
}

/* --- disposition « réseau étendu » (grand écran) : positions calculées par le script --- */
.net--spread { padding-top: calc(var(--nav-h) + clamp(92px, 14vh, 150px)); }
.net--spread .net__nodes {
    position: absolute;
    inset: 0;
    max-width: none;
    margin: 0;
    pointer-events: none;
}
.net--spread .net__node {
    position: absolute;
    left: var(--nx, 50%);
    top: var(--ny, 50%);
    padding: 10px;                                  /* zone de survol / de clic confortable */
    pointer-events: auto;
}
.net--spread .net__node[data-node="l"] { transform: translate(-100%, -50%); }
.net--spread .net__node[data-node="r"] { transform: translate(0, -50%); }
.net--spread .net__node[data-node="t"] { transform: translate(-50%, -100%); }
.net--spread .net__in {
    min-height: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    gap: 11px;
    will-change: transform;
}
.net--spread .net__node[data-node="l"] .net__in { transform-origin: 100% 50%; }
.net--spread .net__node[data-node="l"] .net__dot { order: 1; }
.net--spread .net__node[data-node="r"] .net__in { transform-origin: 0 50%; }
.net--spread .net__node[data-node="t"] .net__in { flex-direction: column; gap: 9px; transform-origin: 50% 100%; }
.net--spread .net__node[data-node="t"] .net__dot { order: 1; }
.net--spread .net__label {
    font-size: clamp(.9375rem, .78rem + .3vw, 1.15rem);
    text-shadow: 0 1px 14px rgba(255, 255, 255, .7), 0 0 2px rgba(255, 255, 255, .5);
}
.net--spread .net__node:hover .net__in { background: none; }

/* --- disposition « constellation » (téléphone, tablette) : positions calculées par le script ---
   Le titre au centre ; au-dessus et en dessous, les services à différentes hauteurs, de part et d'autre,
   reliés au titre par des connexions verticales qui ne traversent ni texte ni service. */
.net--orbit .net__nodes { position: absolute; inset: 0; max-width: none; margin: 0; pointer-events: none; }
.net.net--orbit .net__node { position: absolute; left: var(--nx, 0px); top: var(--ny, 0px); pointer-events: auto; }
.net--orbit .net__in {
    max-width: var(--chip-max, 150px);
    min-height: 40px;
    padding: 7px 13px;
    border-radius: 15px;
    justify-content: center;
}
.net--orbit .net__dot { display: none; }
.net__label .nw { white-space: nowrap; }             /* point d'attache dessiné au bord de la pastille */
.net--orbit .net__label { white-space: normal; font-size: .8125rem; line-height: 1.22; text-align: center; text-wrap: balance; }
.net--orbit .net__core { padding-top: var(--orbit-top, 0px); }
.net--orbit .hero__title { margin-bottom: var(--orbit-bottom, 0px); }
.net--orbit { padding-bottom: clamp(22px, 3.5vh, 40px); }
@media (max-width: 640px) {
    .net--orbit .hero__proof { font-size: .8125rem; gap: 2px 12px; }     /* réassurance sur une ligne */
}
.net__port { fill: #fff; stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.2; }
.net:not(.net--orbit) .net__port { display: none; }
.net__link.is-hot .net__port { fill: var(--cobalt); stroke: #fff; }

/* --- cœur : titre, description, boutons --- */
.net__core {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 980px;
}
.hero__title {
    font-size: min(11.2vw, 11.5vh, 6.6rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.045em;
    color: var(--ink);
    margin-bottom: clamp(18px, 3vh, 30px);
    text-wrap: initial;
    text-shadow: 0 2px 36px rgba(255, 255, 255, .25);
}
.net--spread .hero__title { font-size: min(1rem + 5.5vw, 11.5vh, 8rem); }
/* chaque ligne dans son masque : c'est lui qui « coupe » la ligne pendant la transition */
.hero__mask { display: block; overflow: hidden; padding: 0 .08em .12em; margin-bottom: -.12em; }
.hero__line { display: inline-block; }
.hero__line--accent { color: var(--cobalt); }
.hero__lead {
    max-width: 36em;
    margin-bottom: clamp(20px, 3.2vh, 30px);
    font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem);
    line-height: 1.55;
    color: var(--ink);
    text-wrap: balance;
}
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: clamp(16px, 2.6vh, 24px); }
.hero__proof { display: flex; flex-wrap: wrap; justify-content: center; font-size: .9375rem; font-weight: 500; color: var(--ink); }
.hero__proof li + li::before { content: '·'; margin: 0 .65em; color: var(--cobalt); font-weight: 800; }

/* bouton secondaire clair à bordure bleu pâle */
.btn--soft {
    --btn-bg: rgba(255, 255, 255, .92);
    --btn-fg: var(--ink);
    --btn-fill: #e9f3fd;
    --btn-fg-hover: var(--ink);
    border-color: #b8d7f3;
    padding-inline: 30px;
}
.btn--soft::before { right: 50%; margin-right: -5px; }

/* ---------- 8 bis. Trois messages : visibilité → clients → chiffre d'affaires ----------
   Par défaut (sans JS, « réduire les animations ») : les messages se suivent dans la page,
   dans leur état final. En mode « live » (9 bis), ils se succèdent au même endroit. */
.seq {
    position: relative;
    background: linear-gradient(180deg, var(--white), var(--mist) 160px);   /* prolonge le bas blanc du ciel */
    padding-block: clamp(72px, 10vw, 140px);
}
.seq__lines { display: none; }
.seq__beats { display: grid; gap: clamp(72px, 9vw, 128px); }
.beat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: var(--gutter);
}
.beat__title {
    font-size: clamp(2.4rem, 1.2rem + 4.4vw, 5.2rem);
    font-weight: 800;
    line-height: .95;
    letter-spacing: -.045em;
    color: var(--ink);
    margin-bottom: clamp(14px, 2.4vh, 26px);
    text-wrap: initial;
}
/* masque de ligne : coupe en hauteur seulement (les lignes glissent aussi de côté) */
.beat__mask { display: block; overflow: hidden; overflow: visible clip; padding: .04em .08em .12em; margin: -.04em 0 -.12em; }
.beat__line { display: inline-block; }
.beat__line--accent { color: var(--cobalt); }
.beat__text {
    max-width: 34em;
    margin-bottom: clamp(22px, 4vh, 40px);
    font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem);
    line-height: 1.55;
    color: var(--ink-2);
    text-wrap: balance;
}

/* 1. Visibilité : compteur à colonnes de chiffres */
.reach { display: flex; flex-direction: column; align-items: center; }
.reach__num {
    display: flex;
    justify-content: center;
    margin: 4px 0 2px;
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 1.9rem + 3.6vw, 5.6rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    color: var(--cobalt);
    filter: drop-shadow(0 10px 22px rgba(135, 206, 235, .55));
}
.rnum__col { display: inline-block; flex-shrink: 0; width: var(--dw, .6em); height: 1.1em; overflow: hidden; letter-spacing: 0; }
.rnum__col + .rnum__col { margin-left: -.035em; }
.rnum__strip { display: block; }
.rnum__strip > span { display: block; height: 1.1em; text-align: center; }
.rnum__sep { display: inline-block; flex-shrink: 0; width: 0; }

/* 2. Clients : publication → visite du site → demande de contact */
.path { display: flex; align-items: center; justify-content: center; }
.path__step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 18px 9px 9px;
    border-radius: var(--r-pill);
    background: var(--white);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-1);
    text-align: left;
}
.path__icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--sky-50);
    color: var(--cobalt);
}
.path__icon svg { width: 20px; height: 20px; }
.path__txt { display: grid; line-height: 1.25; }
.path__txt strong { font-size: .9688rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.path__txt small { font-size: .8125rem; color: var(--ink-2); white-space: nowrap; }
.path__link {                                    /* liaison fine, comme les liens du réseau */
    position: relative;
    flex-shrink: 0;
    width: clamp(22px, 3.2vw, 52px);
    height: 1.5px;
    background: rgba(10, 90, 166, .6);
}
.path__link::after {
    content: '';
    position: absolute;
    right: -3px; top: 50%;
    width: 7px; height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 1.5px var(--cobalt);
}
.path__step--goal { border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(10, 90, 166, .1), var(--shadow-1); }
.path__check {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 24px; height: 24px;
    margin-left: 2px;
    border-radius: 50%;
    background: var(--cobalt);
    color: var(--white);
}
.path__check svg { width: 13px; height: 13px; }

/* 3. Chiffre d'affaires : carte bleu très pâle, courbe et point qui la suit */
.growth {
    width: min(100%, 34rem);
    padding: 16px 18px 14px;
    border-radius: 22px;
    background: var(--sky-50);
    border: 1px solid var(--line);
    box-shadow: 0 28px 60px -42px rgba(23, 107, 155, .45);
    text-align: left;
}
.growth__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.growth__head p { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.growth__chart { width: 100%; height: auto; overflow: visible; }
.growth__grid { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 6; }
.growth__area { fill: url(#growth-fill); }
.growth__curve { fill: none; stroke: var(--cobalt); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.growth__drop { stroke: var(--cobalt); stroke-opacity: .4; stroke-width: 1.2; stroke-dasharray: 3 4; }
.growth__dot { fill: var(--cobalt); stroke: var(--white); stroke-width: 3; }
.growth__axis { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: .75rem; font-weight: 600; color: var(--ink-2); }
.growth__axis li:last-child, .growth__axis li.is-on { color: var(--cobalt); }

/* ---------- 9. Services : fil venu de la séquence, vitrine des prestations, détail ---------- */
.services { position: relative; z-index: 2; overflow: clip; }      /* clip (et non hidden) : la vitrine peut rester épinglée */
.services__intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
.services__thread {                              /* prolonge le fil de la courbe (même trait) */
    display: block;
    width: 1.5px;
    height: clamp(56px, 10vh, 120px);
    background: rgba(10, 90, 166, .6);
}
.services__thread--down { height: clamp(36px, 6vh, 64px); margin-top: clamp(22px, 3vh, 32px); }
.services__intro .kicker { flex-direction: column; gap: 14px; margin: 0 0 18px; }
.services__intro .kicker::before { background: var(--white); box-shadow: 0 0 0 1.5px var(--cobalt), 0 0 0 6px var(--sky-50); }
.services__line { display: inline-block; }
.services__title .accent { color: var(--cobalt); }             /* même bleu que les messages qui précèdent */

/* --- Vitrine : une composition par prestation (référence : vidéo « 16-9 (1) ») ---
   Grand titre en capitales, massif et serré, illustration détourée qui chevauche le bas du titre,
   courte phrase discrète. Par défaut (sans JS, mouvement réduit) : compositions empilées, chacune
   sur son fond bleu. En mode « live » (JS) : scène épinglée, les compositions défilent
   horizontalement et les lettres se compriment / s'élargissent pendant les passages.
   Police des titres : Roboto Flex (OFL), graisse maximale, traits épaissis (XOPQ / YOPQ),
   contreformes resserrées (XTRA), capitales hautes (YTUC) ; largeur (wdth) pilotée par le script. */
.showcase {
    --slide-fs: clamp(2.6rem, 1rem + 7vw, 7.5rem);
    --art-w: min(80vw, 420px);
    position: relative;
    color: var(--white);
}
.showcase__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(80px, 12vh, 150px) var(--gutter);
    text-align: center;
    background: var(--bg, var(--blue));
}
.slide__title {
    position: relative;
    z-index: 1;
    font-family: 'Roboto Flex', var(--font-display);
    font-size: calc(var(--slide-fs) * var(--fs-k, 1));
    font-weight: 900;
    line-height: .86;
    letter-spacing: -.005em;
    text-transform: uppercase;
    color: var(--white);
    text-wrap: initial;
}
.slide__title, .slide__line, .slide__ch, .slide__o {
    font-variation-settings: 'wght' 1000, 'wdth' var(--w, 108), 'opsz' 144, 'XOPQ' var(--xopq, 135), 'YOPQ' var(--yopq, 110), 'XTRA' var(--xtra, 440), 'GRAD' var(--grad, 50), 'YTUC' 740;
}
/* E, É, È, Ê, Ë et S : avec des traits horizontaux très épais (YOPQ élevé, grade +50), les barres du E
   se touchent presque et les ouvertures du S s'écrasent. Pour ces seules lettres, horizontales un peu
   moins épaisses et grade neutre : contreformes ouvertes, fûts toujours aussi massifs. */
.slide__o, .slide__ch--o { --yopq: var(--yopq-open, 48); --grad: 0; }
.slide__line { display: block; }
.slide__line--acc { margin-top: .18em; }        /* place pour les accents des capitales (É) sans desserrer tout le titre */
.slide__art {                                  /* chevauche légèrement le bas du titre */
    position: relative;
    z-index: 2;
    width: calc(var(--art-w) * var(--art-k, 1));
    margin-top: calc(-.083 * var(--art-w) * var(--art-k, 1) - .12 * var(--slide-fs) * var(--fs-k, 1));
}
.slide__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.slide__text {
    max-width: 31em;
    margin-top: 4px;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
    text-wrap: balance;
}
.showcase__hud { display: none; }

/* ---------- 9 bis. Séquence épinglée (mode « live », activé par le JS) ----------
   L'accueil reste à l'écran pendant --stage-d pixels. Les messages occupent un calque
   de la hauteur de l'écran (--vh-px) posé en bas de l'épingle, et se succèdent tous à la
   même hauteur (--seq-top). Si l'accueil est plus haut que l'écran, il défile d'abord
   entièrement (--pin-top négatif). */
.stage.is-live { height: calc(var(--pin-h) + var(--stage-d)); background: var(--mist); }
.stage.is-live .hero { min-height: var(--vp-l, var(--vh-px, 100vh)); }      /* le ciel couvre toute la scène, barres rétractées comprises */
.stage.is-live .stage__pin {
    position: sticky;
    top: var(--pin-top, 0px);
    height: var(--pin-h);
    overflow: hidden;
    overflow: clip;
}
.stage.is-live .seq {
    position: absolute;
    left: 0; right: 0;
    top: calc(var(--pin-h, 100vh) - var(--vp-l, var(--vh-px, 100vh)));      /* haut de l'écran quand l'accueil est épinglé */
    z-index: 3;
    height: var(--vh-px, 100vh);
    padding: 0;
    background: none;
    pointer-events: none;
}
.stage.is-live .seq__lines {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.stage.is-live .seq__beats {
    display: block;
    position: absolute;
    inset: 0;
    transform-origin: 50% var(--seq-top, 0px);
    transform: scale(var(--seq-fit, 1));
}
.stage.is-live .beat { position: absolute; left: 0; right: 0; top: var(--seq-top, 20vh); }
.stage.is-live .beat__title { font-size: calc(min(11.2vw, 11.5vh, 6.6rem) * var(--beat-k, 1)); }
.stage.is-live .beat__line { white-space: nowrap; }
.stage.is-live .growth__curve { stroke-dasharray: 1; }
.stage.is-live .growth__axis li:not(.is-on) { color: var(--ink-2); }
.seq__thread { stroke: var(--ink); stroke-opacity: .34; stroke-width: 1px; stroke-linecap: round; }
.seq__anchor { fill: var(--white); stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.2; }
.seq__ext {
    fill: none;
    stroke: var(--cobalt);
    stroke-opacity: .6;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}
/* l'accueil n'est plus cliquable (ni animé) dès que la séquence a commencé */
.stage.is-live:not([data-phase="start"]) .net { pointer-events: none; }
.stage.is-live:not([data-phase="start"]) .hero__layer img { animation-play-state: paused; }
@media (min-width: 1100px) {
    .stage.is-live .beat__title { font-size: calc(min(1rem + 5.5vw, 11.5vh, 8rem) * var(--beat-k, 1)); }
}

/* Vitrine épinglée (mode « live ») : la scène reste à l'écran pendant --show-d pixels ;
   le script place chaque composition (translation horizontale) et fait varier le fond. */
.showcase.is-live {
    --slide-fs: min(15vw, 13.5vh, 9.5rem);
    --art-w: min(34vw, 44vh, 460px);
    height: calc(var(--vp-l, var(--vh-px, 100vh)) + var(--show-d, 0px));
}
.showcase.is-live .showcase__pin {
    position: sticky;
    top: 0;
    height: var(--vp-l, var(--vh-px, 100vh));                               /* couvre l'écran, barres du navigateur rétractées ou non */
    overflow: hidden;
    overflow: clip;
    background: var(--show-bg, var(--blue));
}
.showcase.is-live .slide {
    position: absolute;
    inset: 0 0 auto;
    height: var(--vh-px, 100vh);
    padding: calc(var(--nav-h) + 16px) var(--gutter) 76px;
    background: none;
    will-change: transform;
}
.showcase.is-live .slide__line { width: fit-content; margin-inline: auto; white-space: nowrap; }
.showcase.is-live .slide__art { will-change: transform; }
.showcase.is-live .showcase__hud {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(clamp(16px, 3vh, 30px) + env(safe-area-inset-bottom, 0px));
    /* toujours au bas de la zone visible : au-dessus de la barre du navigateur quand elle est déployée */
    bottom: calc(clamp(16px, 3vh, 30px) + env(safe-area-inset-bottom, 0px) + var(--vp-l, 100dvh) - 100dvh);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 16px;
    pointer-events: none;
    font: 700 .75rem/1.35 var(--font-text);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
}
/* Parenthèse épinglée (mode « live ») : la scène se glisse derrière la fin de la Méthode
   (--orbs-overlap), dont le bas devient transparent : son fond passe du blanc bleuté au bleu nuit
   comme un crépuscule, puis revient au blanc bleuté de « Votre projet commence ici. », section qui
   démarre sous la fin de la scène (.horizon.is-joined) pour que son titre apparaisse à sa place ;
   le script place bulles, sphère et lumière. */
.orbs.is-live {
    z-index: 1;
    height: calc(var(--vp-l, var(--vh-px, 100vh)) + var(--orbs-d, 0px));
    margin-top: calc(-1 * var(--orbs-overlap, 0px));
    padding: 0;
    background: none;
    pointer-events: none;
}
.orbs.is-live .orbs__pin {
    position: sticky;
    top: 0;
    height: var(--vp-l, var(--vh-px, 100vh));                               /* couvre l'écran, barres du navigateur rétractées ou non */
    overflow: hidden;
    overflow: clip;
    background: var(--orbs-bg, var(--mist));
}
section.is-dusk, div.is-dusk {                  /* bas de la section précédente en fondu (prime sur son fond) : laisse voir la scène qui s'assombrit */
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, var(--dusk-from, var(--mist)) 0, var(--dusk-from, var(--mist)) calc(100% - 20vh), transparent 100%);
}
section.method.is-dusk {                         /* fin de la Méthode vide : fondu sur tout le dernier écran */
    background: linear-gradient(180deg, var(--dusk-from, var(--mist)) 0, var(--dusk-from, var(--mist)) calc(100% - var(--vp-l, var(--vh-px, 100vh))), transparent 100%);
}
.horizon.is-joined {                             /* démarre sous la fin de la parenthèse (même blanc bleuté) */
    height: calc(var(--vp-l, 100vh) + var(--hz-run) + var(--lead, 0px));
    margin-top: calc(-1 * var(--join, 0px));
}
.orbs.is-live .orbs__space { position: absolute; inset: 0 0 auto; height: var(--vh-px, 100vh); display: block; }
.orbs.is-live .orb {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
    opacity: 0;
    will-change: transform, opacity;
}
.orbs.is-live .orb__ring, .orbs.is-live .orb__text { will-change: transform, opacity; }
.orbs.is-live .orbs__guide {                     /* la petite sphère guide */
    display: block;
    position: absolute;
    left: 50%;
    top: calc(var(--vh-px, 100vh) / 2);
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 32%, #fff 0, #fff8ee 22%, #f5cf9f 52%, #c98a55 78%, rgba(120, 70, 40, .9) 100%);
    box-shadow: 0 0 12px 4px rgba(255, 226, 190, .55), 0 0 44px 14px rgba(255, 200, 150, .18), 0 0 80px 32px rgba(135, 206, 235, .08);
    opacity: 0;
    will-change: transform, opacity;
}
.orbs.is-live .orbs__bloom {                     /* la lumière du dernier anneau qui se diffuse */
    display: block;
    position: absolute;
    left: 50%;
    top: calc(var(--vh-px, 100vh) / 2);
    width: var(--bloom, 200vmax);
    height: var(--bloom, 200vmax);
    margin: calc(var(--bloom, 200vmax) / -2) 0 0 calc(var(--bloom, 200vmax) / -2);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 250, 243, 1) 0, rgba(255, 246, 235, .85) 28%, rgba(243, 249, 253, .45) 55%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    will-change: transform, opacity;
}
.showcase__bar { position: relative; width: clamp(80px, 12vw, 160px); height: 2px; margin-bottom: 6px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.showcase__bar > span { position: absolute; inset: 0; background: var(--white); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- 10. Sections : en-têtes ---------- */
.section { padding-block: var(--section); position: relative; }
.section-head { margin-bottom: clamp(48px, 6vw, 88px); }
.section-head .lead { margin-top: 24px; }
.section-head--split {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 24px clamp(32px, 6vw, 96px);
    align-items: end;
}
.section-head--split .kicker { grid-column: 1 / -1; margin-bottom: -2px; }
.section-head--split .lead { margin-top: 0; }

/* ---------- 12. Services ---------- */
.services { background: var(--mist); padding-block: 0; }      /* la vitrine est la fin de la section */

/* ---------- 13. Concrètement (fond blanc bleuté, engagements en compteurs) ----------
   Encre sur blanc bleuté, accents bleu ciel. En mode « live » (JS) : mots du titre révélés par
   masque, chiffres qui roulent dans des colonnes de largeur fixe, unités et filet ciel qui
   s'installent quand le chiffre se pose, zéro dessiné d'un trait ; le tout suit le défilement. */
.facts {
    position: relative;
    padding-block: clamp(88px, 11vw, 160px) clamp(64px, 11vh, 128px);
    background: var(--mist);
    color: var(--ink);
}
.facts__title {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.035em;
    max-width: 14em;
    margin-bottom: clamp(52px, 6.5vw, 96px);
}
.facts__line { display: block; }
.facts__line--soft { color: var(--cobalt); }
.facts__title .w {                               /* un masque par mot (accents et virgules compris) */
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: .12em .05em .14em 0;
    margin: -.12em -.05em -.14em 0;
}
.facts__title .w > span { display: inline-block; }
.facts__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line-strong);
}
.fact {
    position: relative;
    display: grid;
    align-content: start;
    gap: 16px;
    padding: 32px 28px 0 0;
}
.fact + .fact { padding-left: 28px; border-left: 1px solid var(--line); }
.fact::before {                                  /* filet bleu ciel : se trace quand le chiffre roule */
    content: '';
    position: absolute;
    left: 0; right: 0; top: -2px;
    height: 3px;
    border-radius: 3px;
    background: var(--sky);
    transform-origin: 0 50%;
    transform: scaleX(var(--p, 1));
}
.fact__value {
    display: flex;
    align-items: baseline;
    gap: .1em;
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 2rem + 4.4vw, 6.6rem);
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.05em;
    color: var(--ink);
}
.fact__unit { font-size: .36em; font-weight: 600; letter-spacing: -.01em; color: var(--cobalt); }
.fact__text { max-width: 19em; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }

/* compteurs : une colonne par chiffre, largeur fixe (celle du chiffre final) ; la colonne est un
   peu plus large que sa place (marges négatives) pour ne rogner aucun chiffre pendant le roulement */
.fact__num { display: inline-flex; align-items: baseline; }
.roll__col {
    display: inline-flex;
    height: 1em;
    line-height: 1;
    clip-path: inset(-.04em -.6em -.06em);
}
.roll__strip { display: block; text-align: center; will-change: transform; }
.roll__strip > span { display: block; height: 1em; }
.facts.is-live .fact__zero {                      /* « 0 € » : le zéro se dessine d'un trait */
    display: inline-block;
    -webkit-mask-image: conic-gradient(from 200deg, #000 calc(var(--a, 372deg) - 12deg), transparent var(--a, 372deg));
    mask-image: conic-gradient(from 200deg, #000 calc(var(--a, 372deg) - 12deg), transparent var(--a, 372deg));
}
.facts.is-live .fact__unit { display: inline-block; }
.facts.is-live .fact__value { line-height: 1; }

/* ---------- 14. Méthode : cinq étapes illustrées ----------
   Par défaut (sans JS, mouvement réduit) : les étapes se suivent, illustration à gauche, texte à
   droite, puis la conclusion. En mode « live » (JS) : scène épinglée ; le script place le cadre
   (découpe clip-path), les illustrations, les titres (masques par mot), textes et repères. */
.method { position: relative; background: var(--mist); }
.method__pin { padding: clamp(40px, 6vw, 72px) 0 var(--section); }
.msteps {
    display: grid;
    gap: clamp(56px, 8vw, 112px);
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.mstep {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "visual meta" "visual title" "visual text";
    grid-template-rows: 1fr auto 1fr;
    column-gap: clamp(32px, 6vw, 104px);
}
.mstep__visual {
    grid-area: visual;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-lg);
    background: var(--tint, var(--sky));
    overflow: hidden;
}
.mstep__art { width: 86%; }
.mstep__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.mstep__meta {
    grid-area: meta;
    align-self: end;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.mstep__n {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--cobalt);
}
.mstep__when {
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--white);
    font-size: var(--fs-xs);
    font-weight: 600;
    line-height: 1.4;
    color: var(--blue-700);
}
.mstep__title {
    grid-area: title;
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    margin-bottom: 18px;
}
.mstep__text { grid-area: text; max-width: 32em; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); }
.method__hud { display: none; }

/* flèche « 5 étapes » → étape 01 (tracée par le script) */
.method__arrow {
    display: none;
    position: absolute;
    left: 0; top: 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}
.method.has-arrow .method__arrow { display: block; }
.method__arrow-line, .method__arrow-head {
    fill: none;
    stroke: var(--cobalt);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.method__arrow-start { fill: var(--white); stroke: var(--cobalt); stroke-width: 2; }

/* Mode « live » : la scène reste à l'écran pendant --method-d pixels (fond transparent : la fin
   de la flèche, dessinée derrière, disparaît sous le cadre quand il s'ouvre) */
.method.is-live { height: calc(var(--vp-l, var(--vh-px, 100vh)) + var(--method-d, 0px)); }
.method.is-live .method__pin {
    position: sticky;
    top: 0;
    z-index: 1;
    height: var(--vp-l, var(--vh-px, 100vh));                               /* cadres plein écran : jusqu'en bas, barres rétractées comprises */
    padding: 0;
    overflow: hidden;
    overflow: clip;
}
.method.is-live .msteps { display: block; max-width: none; padding: 0; }
.method.is-live .mstep { display: block; }
.method.is-live .mstep__visual {
    position: absolute;
    inset: 0;
    width: auto;
    margin: 0;
    z-index: 1;
    display: block;
    aspect-ratio: auto;
    border-radius: 0;
    overflow: visible;
    visibility: hidden;
}
.method.is-live .mstep__art {
    position: absolute;
    left: 0; top: 0;
    width: var(--art-base, 960px);
    transform-origin: 0 0;
}
.method.is-live .mstep__meta,
.method.is-live .mstep__title,
.method.is-live .mstep__text { position: absolute; z-index: 5; margin: 0; }
.method.is-live .mstep__meta { left: 0; right: 0; justify-content: center; }
.method.is-live .mstep__title {
    left: var(--gutter);
    right: var(--gutter);
    font-size: min(7.2vw, 9.4vh, 6.4rem);
    font-weight: 800;
    line-height: .96;
    letter-spacing: -.045em;
    text-align: center;
    transform-origin: 50% 0;
}
.method.is-live .mstep__text {
    left: var(--gutter);
    right: var(--gutter);
    max-width: 34em;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
}
.mw {                                            /* un masque par mot (accents et jambages compris) */
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: .16em .04em .18em;
    margin: -.16em -.04em -.18em;
}
.mw > span { display: inline-block; }
.method.is-live .method__hud {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(clamp(14px, 2.6vh, 28px) + env(safe-area-inset-bottom, 0px));
    /* au bas de la zone visible (au-dessus de la barre du navigateur déployée) ; la lecture est calculée pour ce cas */
    bottom: calc(var(--hud-gap, 20px) + var(--vp-l, 100dvh) - 100dvh);
    z-index: 4;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 16px;
    opacity: 0;
    pointer-events: none;
    font: 700 .75rem/1.35 var(--font-text);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.method__count { display: grid; justify-items: center; gap: 7px; }
.method__note { justify-self: end; text-align: right; }
.method__bar { position: relative; width: clamp(80px, 12vw, 160px); height: 2px; background: var(--line-strong); overflow: hidden; }
.method__bar > span { position: absolute; inset: 0; background: var(--cobalt); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* ---------- 15. Parenthèse : trois bulles lumineuses sur fond bleu nuit ----------
   Anneaux : lumière cuivrée en haut à gauche, nacrée en bas à droite, halo doux, centre sombre
   (dégradé conique découpé en anneau par un masque, puis adouci par un flou).
   Par défaut (sans JS, mouvement réduit) : les bulles se suivent sur un fond bleu nuit qui naît du
   blanc bleuté des services et se termine dans le blanc de la section suivante.
   En mode « live » (JS, voir 9 bis) : scène épinglée, caméra qui avance d'une bulle à l'autre. */
.orbs {
    position: relative;
    overflow-x: clip;                                /* halos des bulles : jamais de défilement horizontal */
    padding: 36vh 0 40vh;
    color: var(--white);
    background: linear-gradient(180deg,          /* mêmes étapes bleues que la version animée : jamais de gris */
        var(--mist) 0, #a8cde5 9vh, #264a70 19vh, var(--night) 28vh,
        var(--night) calc(100% - 30vh), #10304e calc(100% - 22vh), #4f8fbd calc(100% - 11vh), var(--sky) 100%);   /* rejoint le bleu ciel de « Votre projet commence ici. » (version simple) */
}
.orbs__space { display: grid; justify-items: center; gap: 14vh; }
.orbs__bloom, .orbs__guide { display: none; }
.orb {
    --d: min(92vw, 620px);
    position: relative;
    display: grid;
    place-items: center;
    width: var(--d);
    height: var(--d);
    perspective: 1000px;
}
.orb__ring { position: absolute; inset: 0; border-radius: 50%; transform-style: preserve-3d; }
.orb__ring > span { position: absolute; }
.orb__ring i {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(247, 226, 198, .6) 0deg, rgba(236, 238, 246, .38) 50deg, rgba(190, 224, 245, .5) 95deg,
        rgba(255, 255, 255, 1) 140deg, rgba(248, 240, 230, .82) 178deg, rgba(214, 186, 160, .36) 218deg,
        rgba(232, 150, 88, 1) 288deg, rgba(243, 192, 137, .92) 322deg, rgba(247, 226, 198, .6) 360deg);
}
.orb__halo { inset: -16%; filter: blur(calc(var(--d) * .055)); opacity: .85; }
.orb__halo i {
    inset: 12.12%;
    -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 91%, #000 97%, transparent 100%);
    mask: radial-gradient(closest-side, transparent 78%, #000 91%, #000 97%, transparent 100%);
}
.orb__glow { inset: 0; filter: blur(calc(var(--d) * .016)); }
.orb__glow i {
    inset: 0;
    -webkit-mask: radial-gradient(closest-side, transparent 86%, #000 95.5%, #000 98.5%, transparent 100%);
    mask: radial-gradient(closest-side, transparent 86%, #000 95.5%, #000 98.5%, transparent 100%);
}
.orb__sheen { inset: 5%; opacity: .32; transform: translateZ(calc(var(--d) * -.06)) rotate(165deg); filter: blur(2px); }
.orb__sheen i {                                  /* reflet intérieur, légèrement en retrait : volume quand l'anneau pivote */
    inset: 0;
    -webkit-mask: radial-gradient(closest-side, transparent 97%, #000 98.6%, transparent 100%);
    mask: radial-gradient(closest-side, transparent 97%, #000 98.6%, transparent 100%);
}
.orb__rim { inset: 0; filter: blur(.6px); }
.orb__rim i {
    inset: 0;
    -webkit-mask: radial-gradient(closest-side, transparent 96.4%, #000 97.7%, #000 98.7%, transparent 99.7%);
    mask: radial-gradient(closest-side, transparent 96.4%, #000 97.7%, #000 98.7%, transparent 99.7%);
}
.orb__text {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.orb__title {
    margin-bottom: .42em;
    font-size: calc(clamp(2rem, 1.1rem + 3.1vw, 4.1rem) * var(--k, 1));
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.035em;
    color: var(--white);
    text-wrap: initial;
}
.orb__title span { display: block; white-space: nowrap; }
.orb__text p {
    max-width: 19em;
    font-size: calc(clamp(1rem, .92rem + .3vw, 1.15rem) * var(--k, 1));
    line-height: 1.52;
    color: rgba(255, 255, 255, .8);
    text-wrap: balance;
}
/* navigation plus opaque au-dessus du bleu nuit */
.site-nav.is-over-dark .site-nav__pill { background: rgba(255, 255, 255, .94); }

/* ---------- 16. FAQ ---------- */
.faq { background: var(--mist); }
.contact + .faq { padding-top: clamp(40px, 5vw, 80px); }      /* juste sous le formulaire, même fond : pas de rupture */
main > .faq:last-child { padding-bottom: calc(var(--section) + clamp(24px, 2.6vw, 36px)); }
.faq__grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(40px, 7vw, 120px);
    align-items: start;
}
.faq__head { position: sticky; top: calc(var(--nav-h) + 48px); }
.faq__head .lead { margin-top: 24px; }
.faq__list { border-top: 1px solid var(--line-strong); }
.qa { border-bottom: 1px solid var(--line-strong); }
.qa summary {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 26px 0;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
    transition: color var(--t-fast);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--blue); }
.qa summary:focus-visible { outline-offset: 6px; }
.qa__icon {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--line-strong);
    transition: background var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}
.qa__icon::before, .qa__icon::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 12px; height: 2px;
    margin: -1px 0 0 -6px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform var(--t-mid) var(--ease-out), background var(--t-fast);
}
.qa__icon::after { transform: rotate(90deg); }
.qa[open] .qa__icon { background: var(--blue); border-color: var(--blue); transform: rotate(180deg); }
.qa[open] .qa__icon::before, .qa[open] .qa__icon::after { background: var(--white); }
.qa[open] .qa__icon::after { transform: rotate(0); }
.qa__body { padding: 0 64px 28px 0; color: var(--ink-2); }
.qa__body p + p { margin-top: 12px; }
.qa[open] .qa__body { animation: qa-in .5s var(--ease-out); }
@keyframes qa-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- 17. Horizon : le point devient le ciel ---------- */
.horizon {
    /* distance de défilement de l'animation (en plus de l'écran épinglé) : ~9 crans de molette,
       ~2,5 balayages au doigt ; bornée en pixels comme les scènes épinglées */
    --hz-run: clamp(860px, 110vh, 1100px);
    position: relative;
    height: calc(var(--vp-l, 100vh) + var(--hz-run));
    background: var(--mist);
}
.horizon__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: var(--vp-l, 100svh);                     /* le ciel couvre tout l'écran, barres rétractées comprises */
    padding-bottom: calc(var(--vp-l, 0px) - var(--vp-s, 0px));   /* titre centré dans la zone toujours visible */
    box-sizing: border-box;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.horizon__disc {
    position: absolute;
    left: 50%; top: 50%;
    width: 170vmax; height: 170vmax;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, var(--sky) 0%, var(--sky) 88%, #9ad6ee 100%);
    transform: translate3d(-50%, -50%, 0) scale(var(--s, .008));
    will-change: transform;
}
.horizon__text {
    position: relative;
    text-align: center;
    padding-inline: var(--gutter);
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 1.2rem + 6vw, 7rem);
    font-weight: 800;
    letter-spacing: -.05em;
    line-height: .92;
    color: var(--ink);
    opacity: var(--o, 1);
    transform: translate3d(0, var(--ty, 0px), 0) scale(var(--ts, 1));
}
.horizon__period {                 /* le point final, dessiné, d'où part le disque */
    display: inline-block;
    width: .19em; height: .19em;
    margin-left: .05em;
    border-radius: 50%;
    background: var(--sky);
}
.horizon__hint {
    position: absolute;
    bottom: 32px; left: 50%;
    transform: translateX(-50%);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-2);
    opacity: calc(1 - var(--p, 0) * 3);
}
/* Sans animation : bandeau simple */
.no-js .horizon, .reduced .horizon { height: auto; background: var(--sky); }
.no-js .horizon__stage, .reduced .horizon__stage { position: static; height: auto; padding: 120px 0 40px; }
.no-js .horizon__disc, .reduced .horizon__disc, .no-js .horizon__hint, .reduced .horizon__hint { display: none; }

/* ---------- 18. Contact ---------- */
.contact {
    background: linear-gradient(180deg, var(--sky) 0%, #a8dcf1 40%, var(--sky-100) 76%, var(--mist) 100%);   /* finit dans le blanc bleuté des questions */
    padding-top: clamp(24px, 4vw, 56px);
}
.contact .kicker::before { background: var(--white); box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); }
.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
.contact__intro > p { font-size: var(--fs-lead); line-height: 1.55; margin-top: 24px; max-width: 30em; }
.contact__lines { margin-top: 40px; display: grid; }
.contact__line {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 16px 0;
    border-top: 1px solid rgba(20, 45, 64, .16);
}
.contact__line:last-child { border-bottom: 1px solid rgba(20, 45, 64, .16); }
.contact__line dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.contact__line dd { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); font-weight: 600; letter-spacing: -.02em; }
.contact__line a {
    background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 2px no-repeat;
    transition: background-size var(--t-mid) var(--ease-out);
}
.contact__line a:hover { background-size: 100% 2px; }

/* Formulaire */
.form-card {
    position: relative;
    padding: clamp(24px, 3.4vw, 48px);
    border-radius: var(--r-lg);
    background: var(--white);
    box-shadow: 0 40px 80px -40px rgba(20, 45, 64, .45);
}
.form-card__title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; margin-bottom: 18px; }
.field label {
    font-size: .9063rem;
    font-weight: 600;
    color: var(--ink);
}
.field .req { color: var(--blue); margin-left: 2px; }
.field .opt { font-weight: 500; color: var(--ink-2); font-size: .8125rem; margin-left: 4px; }
.field input, .field textarea {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1.5px solid var(--line-strong);
    background: var(--mist);
    font-size: 1rem;
    line-height: 1.4;
    color: var(--ink);
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #5a7084; opacity: 1; }
.field input:hover, .field textarea:hover { border-color: var(--sky-400); }
.field input:focus, .field textarea:focus {
    outline: none;
    border-color: var(--blue);
    background: var(--white);
    box-shadow: 0 0 0 4px rgba(135, 206, 235, .45);
}
.field--error input, .field--error textarea { border-color: #b3261e; background: #fff7f6; }
.field-error-msg { font-size: .8438rem; font-weight: 600; color: #b3261e; min-height: 0; }
.field-error-msg:empty { display: none; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-consent { font-size: .8438rem; color: var(--ink-2); line-height: 1.5; margin: 4px 0 20px; }
.form-reassurance { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.form-reassurance li { display: inline-flex; align-items: center; gap: 7px; }
.form-reassurance li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sky-400); }

.form-banner {
    display: none;
    margin-bottom: 20px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff4f2;
    border: 1px solid #f1c4bf;
    color: #8c1d18;
    font-size: .9375rem;
    font-weight: 500;
}
.form-banner.is-visible { display: block; }
.form-banner a { color: #8c1d18; font-weight: 700; text-decoration: underline; }

.btn .spinner {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: var(--white);
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-success { display: none; text-align: center; padding: 40px 8px; }
.form-success.is-visible { display: block; animation: qa-in .6s var(--ease-out); }
.form-success__dot {
    width: 84px; height: 84px;
    margin: 0 auto 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sky);
    color: var(--ink);
}
.form-success__dot svg { width: 36px; height: 36px; }
.form-success h3 { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; margin-bottom: 10px; }
.form-success p { color: var(--ink-2); max-width: 26em; margin-inline: auto; }

/* ---------- 19. Pied de page (composition et interaction inspirées du footer de ohhmydesign.com) ----------
   Bleu nuit, coins supérieurs arrondis (le pied de page chevauche le bas de la section précédente),
   accroche à gauche et colonnes à droite, immense « madweb » posé sur une règle graduée, barre
   d'informations. Fond ponctué : dessiné en CSS (sans JS), puis par un canevas qui éclaire et
   resserre les points autour du pointeur. Les lettres du grand nom sont animées par le script. */
.footer {
    --foot-r: clamp(24px, 2.6vw, 36px);
    --foot-bg: #0c1a2b;                               /* bleu nuit */
    position: relative;
    z-index: 1;
    overflow: hidden;
    overflow: clip;
    margin-top: calc(-1 * var(--foot-r));
    border-radius: var(--foot-r) var(--foot-r) 0 0;
    background: radial-gradient(circle, rgba(207, 234, 246, .09) 0 1.1px, transparent 1.4px) 13px 13px / 26px 26px, var(--foot-bg);
    color: rgba(255, 255, 255, .78);
}
.footer.has-dots { background: var(--foot-bg); }
.footer__dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.footer a { transition: color var(--t-fast); }
.footer :focus-visible { outline-color: var(--sky); }                /* focus clavier visible sur le bleu nuit */
.footer__totop {
    position: absolute;
    top: clamp(14px, 1.8vw, 24px);
    right: clamp(14px, 1.8vw, 24px);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border: 1px solid rgba(207, 234, 246, .3);
    border-radius: 50%;
    color: var(--white);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-mid) var(--ease-out);
}
.footer__totop svg { width: 18px; height: 18px; }
.footer__totop:hover { background: var(--sky); border-color: var(--sky); color: var(--ink); transform: translateY(-3px); }
.footer__main {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px clamp(40px, 7vw, 120px);
    align-items: start;
    padding-top: clamp(80px, 7.5vw, 104px);
}
.footer__eyebrow {
    margin-bottom: 18px;
    font: 700 .75rem/1.4 var(--font-text);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sky);
}
.footer__title {
    max-width: 13em;
    color: var(--white);
    font-size: clamp(2.1rem, 1.1rem + 2.7vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.035em;
}
.footer__title .dot { color: var(--sky); }
.footer__about { max-width: 33em; margin-top: 22px; font-size: var(--fs-body); line-height: 1.6; color: rgba(255, 255, 255, .7); }
.footer__cta { margin-top: 30px; --btn-bg: var(--sky); --btn-fg: var(--ink); --btn-fill: var(--white); --btn-fg-hover: var(--ink); }
.footer__cta .btn__arrow { background: var(--ink); color: var(--sky); }
.footer__nav {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 32px clamp(32px, 4.2vw, 64px);
    padding-top: 2px;
}
.footer__col h3 {
    margin-bottom: 12px;
    font: 700 .6875rem/1.4 var(--font-text);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(207, 234, 246, .5);
}
.footer__col a, .footer__col span { display: inline-block; padding: 6px 0; font-size: .9375rem; font-weight: 500; color: rgba(255, 255, 255, .84); }
.footer__col a:hover { color: var(--sky); }

/* immense « madweb » : taille ajustée à la largeur par le script (--word-fs) ; au-dessus, la place
   nécessaire aux lettres qui se soulèvent (--lift-room), pour ne jamais toucher les colonnes */
.footer__stage {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-top: clamp(4px, 1vw, 16px);
    padding-top: var(--lift-room, clamp(40px, 6vw, 88px));
}
.footer__word {
    display: flex;
    font-family: var(--font-display);
    font-size: var(--word-fs, min(24vw, 44vh));
    font-weight: 800;
    line-height: .8;
    letter-spacing: -.035em;
    margin-bottom: -.058em;                       /* ligne de base posée sur la règle graduée */
    color: var(--white);
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}
.footer__word span { display: block; transform-origin: 50% 72%; }
/* lettres pilotées par le script : aucune transition CSS (même celle, très courte, du mode « réduire les
   animations »), sinon la mesure de la taille du nom lirait une valeur en cours de transition */
.footer__word, .footer__word span { transition: none !important; }
.footer__word .is-web { color: var(--sky); }
.footer__rule {                                   /* règle graduée (même pas que les points du fond) */
    position: relative;
    z-index: 1;
    height: 8px;
    border-top: 1px solid rgba(207, 234, 246, .22);
    background: repeating-linear-gradient(90deg, rgba(207, 234, 246, .24) 0 1px, transparent 1px 26px) 13px 0 / 100% 6px repeat-x;
}
.footer__bar {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px 32px;
    padding-block: 18px 22px;
    font-size: .8125rem;
    color: rgba(207, 234, 246, .62);
}
.footer__copy { display: inline-flex; align-items: center; gap: 10px; }
.footer__copy b { width: 10px; height: 10px; border-radius: 3px; background: var(--sky); flex-shrink: 0; }
.footer__legal { justify-self: end; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footer__legal a { padding-block: 6px; }
.footer__legal a:hover { color: var(--white); }

/* ---------- 20. Pages légales ---------- */
.legal-hero {
    padding: calc(var(--nav-h) + clamp(56px, 8vw, 104px)) 0 clamp(48px, 6vw, 80px);
    background: linear-gradient(180deg, var(--white), var(--mist));
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.legal-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -12vmax; top: -20vmax;
    width: 55vmax; height: 55vmax;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(135, 206, 235, .45), rgba(135, 206, 235, 0));
}
.legal-hero h1 { font-size: clamp(2.8rem, 1.4rem + 5vw, 5.6rem); font-weight: 800; letter-spacing: -.045em; line-height: .95; margin-bottom: 24px; }
.legal-hero__meta { margin-top: 18px; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.legal-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: clamp(32px, 6vw, 96px);
    padding-block: clamp(48px, 7vw, 104px);
    align-items: start;
}
.legal-layout--single { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.toc { position: sticky; top: calc(var(--nav-h) + 40px); }
.toc__title { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.toc ol { display: grid; gap: 2px; border-left: 1.5px solid var(--line); }
.toc a {
    display: block;
    padding: 7px 0 7px 16px;
    margin-left: -1.5px;
    border-left: 1.5px solid transparent;
    font-size: var(--fs-small);
    color: var(--ink-2);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.toc a:hover, .toc a.is-active { color: var(--ink); border-left-color: var(--blue); }
.legal-article { max-width: 46em; }
.legal-section { padding-block: 36px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal-section:first-child { border-top: 0; padding-top: 0; }
.legal-section__n { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; color: var(--blue); margin-bottom: 10px; }
.legal-section h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 18px; }
.legal-section h3 { font-family: var(--font-text); font-size: 1.0625rem; font-weight: 700; margin: 22px 0 10px; }
.legal-section p { color: var(--ink-2); margin-bottom: 14px; }
.legal-section strong { color: var(--ink); font-weight: 600; }
.legal-section a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.legal-section ul { display: grid; gap: 8px; margin: 6px 0 16px; }
.legal-section ul li { position: relative; padding-left: 20px; color: var(--ink-2); }
.legal-section ul li::before { content: ''; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); }
.rights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 18px 0; }
.right-chip { padding: 16px 18px; border-radius: var(--r-sm); background: var(--mist); border: 1px solid var(--line); }
.right-chip__label { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em; margin-bottom: 4px; }
.right-chip__desc { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.45; }
.legal-cta {
    margin-top: 32px;
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--sky), var(--sky-100));
}
.legal-cta h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; margin-bottom: 10px; }
.legal-cta p { margin-bottom: 22px; max-width: 30em; }

/* ---------- 21. Responsive ---------- */
@media (max-width: 1100px) {
    .site-nav__links a { padding-inline: 12px; }
    .footer__main { grid-template-columns: minmax(0, 1fr); }
    .footer__col h3 { font-size: .75rem; }
    .footer__nav { justify-content: start; }
}

@media (max-width: 960px) {
    :root { --nav-h: 68px; }
    .site-nav { inset-block-start: calc(10px + env(safe-area-inset-top, 0px)); }
    .site-nav__pill { min-height: 58px; padding: 6px 6px 6px 20px; }
    .site-nav__links, .site-nav__cta { display: none; }
    .site-nav__toggle { display: inline-flex; }

    .section-head--split { grid-template-columns: 1fr; }
    .faq__grid, .contact__grid { grid-template-columns: 1fr; }
    .faq__head { position: static; }

    .facts__grid { grid-template-columns: 1fr 1fr; }
    .fact:nth-child(3) { padding-left: 0; border-left: 0; }
    .fact:nth-child(n + 3) { margin-top: 32px; border-top: 1px solid var(--line-strong); }

    .mstep { grid-template-columns: minmax(0, 1fr); grid-template-areas: "visual" "meta" "title" "text"; grid-template-rows: auto; }
    .mstep__visual { width: min(100%, 560px); margin-bottom: 28px; }


    .legal-layout { grid-template-columns: 1fr; }
    .toc { position: static; padding: 20px; border-radius: var(--r-md); background: var(--mist); }
}

/* parcours « clients » : vertical quand les trois étapes ne tiennent plus sur une ligne */
@media (max-width: 900px) {
    .path { flex-direction: column; }
    .path__step { width: min(100%, 320px); }
    .path__check { margin-left: auto; }
    .path__link { width: 1.5px; height: 18px; }
    .path__link::after { right: auto; top: auto; left: 50%; bottom: -3px; margin: 0 0 0 -3.5px; }
}

@media (max-width: 640px) {
    :root { --fs-body: 1rem; }
    .btn--lg { min-height: 56px; font-size: 1rem; }
    .hero__actions { width: 100%; max-width: 420px; }
    .hero__actions .btn { width: 100%; justify-content: space-between; }
    .hero__actions .btn--soft { justify-content: center; }
    .hero__proof { font-size: .875rem; gap: 4px 16px; }
    .hero__proof li + li::before { content: none; }
    .net { padding-top: calc(var(--nav-h) + 14px); }
    .net__nodes { gap: 6px 5px; margin-bottom: 26px; }
    .net__in { min-height: 34px; gap: 6px; padding: 5px 11px 5px 9px; }
    .net__dot { width: 7px; height: 7px; }
    .net__label { font-size: .78rem; }
    .hero__lead { font-size: 1rem; margin-bottom: 18px; }
    .hero__actions { gap: 10px; margin-bottom: 14px; }

    .beat__text { font-size: 1.0625rem; }
    /* titres des messages plus grands : seule « chiffre d'affaires. » passe sur deux lignes (même taille pour les trois) */
    .stage.is-live .beat__title { font-size: calc(min(14vw, 7.4vh, 4.4rem) * var(--beat-k, 1)); }
    .stage.is-live .beat__line--accent { white-space: normal; text-wrap: balance; }
    .reach__num { font-size: clamp(3.6rem, 19vw, 5rem); }
    .path__step { width: min(100%, 340px); padding: 9px 16px 9px 9px; gap: 12px; }
    .path__txt strong { font-size: 1rem; }
    .path__txt small { font-size: .8438rem; }
    .path__icon { width: 34px; height: 34px; }
    .path__icon svg { width: 18px; height: 18px; }
    .growth { padding: 13px 14px 12px; border-radius: 18px; }
    .growth__axis { font-size: .75rem; }

    /* petits titres : traits un peu moins épais, contreformes plus ouvertes (lisibilité) */
    .showcase { --xopq: 112; --yopq: 96; --xtra: 468; --grad: 0; --yopq-open: 42; }
    .showcase.is-live { --slide-fs: min(16vw, 11vh); --art-w: min(84vw, 40vh, 360px); }
    .slide__art { margin-top: calc(-.07 * var(--art-w) * var(--art-k, 1)); }      /* chevauchement plus léger : le titre reste entier */
    .showcase.is-live .slide { padding-bottom: 66px; }
    .slide__text { font-size: .9375rem; }
    .showcase.is-live .showcase__hud { font-size: .75rem; }

    .orbs__space { gap: 10vh; }
    .orb__text p { max-width: 16em; }
    .orbs.is-live .orbs__guide { width: 16px; height: 16px; margin: -8px 0 0 -8px; }




    /* engagements empilés sur un rail vertical : le filet ciel suit le rail, la flèche en part */
    .facts__grid { grid-template-columns: 1fr; border-top: 0; }
    .fact, .fact + .fact, .fact:nth-child(n + 3) { margin: 0; padding: 14px 0 26px 22px; border: 0; border-left: 1px solid var(--line-strong); }
    .fact::before { left: -2px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
    .fact__value { font-size: clamp(3rem, 1.6rem + 7vw, 4.2rem); }
    .method.is-live .mstep__title { font-size: min(10.6vw, 6.6vh); }
    .method.is-live .mstep__text { font-size: 1rem; line-height: 1.5; }
    .method__note { display: none; }


    .qa__body { padding-right: 0; }
    .horizon { --hz-run: clamp(760px, 95vh, 900px); }

    .form-row { grid-template-columns: 1fr; gap: 0; }
    .contact__line { grid-template-columns: 1fr; gap: 2px; }

    .footer__nav { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
    .footer__col:last-child { grid-column: 1 / -1; }
    .footer__cta { width: 100%; justify-content: space-between; }
    .footer__bar { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-bottom: 28px; }
    .footer__legal { justify-self: start; }
}

/* ---------- 21 bis. Écrans tactiles ----------
   Cibles d'au moins ~44 px : zone de toucher agrandie par un rembourrage compensé (la mise en page ne
   bouge pas) ; les effets de survol ont un équivalent à l'appui (:active). */
@media (pointer: coarse) {
    .brand { padding-block: 10px; margin-block: -10px; }
    .net:not(.net--spread):not(.net--orbit) .net__node { position: relative; }
    .net:not(.net--spread) .net__node::after { content: ''; position: absolute; inset: -4px -3px; }
    .contact__line a { display: inline-block; padding-block: 10px; margin-block: -10px; }
    .form-consent .link, .faq .link { padding-block: 9px; }
    .footer__col a { padding-block: 10px; }
    .footer__col span { padding-block: 10px; }
    .footer__legal a { padding-block: 12px; }
    .toc a { padding-block: 10px; }
}
@media (hover: none) {
    .net__node:active .net__in { background: #fff; transform: scale(.97); }
    .net__node .net__in { transition: color .25s, background .25s, transform .2s var(--ease-out); }
    .contact__line a:active { background-size: 100% 2px; }
    .qa summary:active { color: var(--blue); }
    .menu__links a:active { color: var(--blue); }
    .footer__col a:active, .footer__legal a:active { color: var(--sky); }
}

/* Téléphone à écran bas (iPhone SE…) : l'accueil tient en entier dans l'écran (pastilles, titre, texte, boutons
   et réassurance), sans réduire les zones de toucher */
@media (max-width: 640px) and (max-height: 760px) {
    .net { padding-top: calc(var(--nav-h) + 8px); padding-bottom: 20px; }
    .net__nodes { gap: 5px 4px; margin-bottom: 16px; }
    .net__in { min-height: 32px; padding: 4px 10px 4px 8px; gap: 5px; }
    .net__label { font-size: .75rem; }
    .hero__title { margin-bottom: 12px; }
    .hero__lead { font-size: .9375rem; line-height: 1.5; margin-bottom: 14px; }
    .hero__actions { gap: 8px; margin-bottom: 10px; }
    .hero__actions .btn--lg { min-height: 50px; }
    .hero__proof { font-size: .8125rem; gap: 2px 12px; }
}

/* Écrans tactiles : effets allégés, même rendu.
   - Anneaux lumineux : une seule couche aplatie par anneau, dessinée une fois (flous compris), que le
     téléphone se contente de déplacer, tourner et agrandir ; le texte est hors de cette couche (net).
   - Navigation : fond presque opaque au lieu du flou d'arrière-plan, recalculé à chaque image sinon. */
@media (pointer: coarse) {
    .orbs.is-live .orb { perspective: none; }
    .orbs.is-live .orb__ring { transform-style: flat; will-change: transform, opacity; }
    .orbs.is-live .orb__text { will-change: auto; }
    .orbs.is-live .orb__sheen { transform: rotate(165deg); }
    .orb__text p { color: rgba(255, 255, 255, .9); }
    .site-nav__pill { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(250, 253, 255, .95); }
}

/* Bulles lumineuses sur écran tactile, mode « images » (.is-bitmap, ajouté par le script) : anneaux, sphère
   guide et lumière finale sont des images dessinées une fois ; seules ces images sont déplacées, tournées,
   agrandies (aucun nouveau dessin pendant le défilement). Le fond passe d'une couleur à l'autre par deux calques. */
.orb__img, .orbs__guide-img, .orbs__bloom-img, .orbs__bg { display: none; }
.orbs.is-bitmap .orbs__pin { background: none; }
.orbs.is-bitmap .orbs__bg { display: block; position: absolute; inset: 0; }
.orbs.is-bitmap .orb__ring { will-change: auto; }
.orbs.is-bitmap .orb__ring > span { display: none; }
.orbs.is-bitmap .orb__img {
    display: block;
    position: absolute;
    left: 50%; top: 50%;
    width: calc(var(--d) * var(--ring-k, 1.33));
    height: calc(var(--d) * var(--ring-k, 1.33));
    max-width: none;
    margin: calc(var(--d) * var(--ring-k, 1.33) / -2) 0 0 calc(var(--d) * var(--ring-k, 1.33) / -2);
    will-change: transform, opacity;
}
.orbs.is-bitmap .orbs__guide { background: none; box-shadow: none; opacity: 1; will-change: auto; }
.orbs.is-bitmap .orbs__guide-img {
    display: block;
    position: absolute;
    left: 50%; top: 50%;
    width: var(--gw, 320px); height: var(--gw, 320px);
    max-width: none;
    margin: calc(var(--gw, 320px) / -2) 0 0 calc(var(--gw, 320px) / -2);
    opacity: 0;
    will-change: transform, opacity;
}
.orbs.is-bitmap .orbs__bloom { background: none; opacity: 1; will-change: auto; }
.orbs.is-bitmap .orbs__bloom-img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; will-change: transform, opacity; }
.orbs.is-live.is-away .orbs__pin { visibility: hidden; }           /* loin de l'écran : couches non dessinées */

/* Téléphone à l'horizontale (écran bas) : la Méthode garde sa lecture entre la navigation et les repères */
@media (max-height: 520px) and (orientation: landscape) {
    .net--spread .net__label { font-size: .8125rem; }            /* accueil : services autour du titre, sur la largeur */
    .method.is-live .mstep__title { font-size: min(4.8vw, 9vh); }
    .method.is-live .mstep__text { max-width: 52em; font-size: .9375rem; line-height: 1.45; }
    .method__note { display: none; }
}

/* ---------- 22. Mouvement réduit : version sobre et complète ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
    .js [data-reveal], .js [data-split] .mask-line > span { opacity: 1; transform: none; }
    /* ciel sans parallaxe ni dérive : scène fixe et complète */
    .hero__layer img, .net__wire, .net__label { animation: none !important; }
}

/* ---------- 23. Impression ---------- */
@media print {
    .site-nav, .menu, .hero__sky, .net__wires, .horizon, .footer__dots, .footer__totop, .footer__stage, .footer__rule, .seq__lines, .services__thread, .showcase__hud, .orbs__guide, .orbs__bloom, .method__arrow, .method__hud { display: none !important; }
    .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}