/* ============================================================
   Neo-code — feuille unique
   Design system v1 (septembre 2026) : toile presque noire à sous-ton
   vert, typographie blanche en graisse unique, filets d'un pixel,
   un seul vert vibrant réservé aux micro-surfaces.
   Aucune requête tierce.
   ============================================================ */

/* ---------- Polices auto-hébergées ---------- */
@font-face{
  font-family:'Schibsted Grotesk';
  src:url('/assets/fonts/schibsted-grotesk-latin-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Roboto Mono';
  src:url('/assets/fonts/roboto-mono-latin-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- Tokens ---------- */
:root{
  /* toile */
  --ink:#222f30;          /* encre abyssale — canvas principal */
  --ink-deep:#1a2425;     /* variante creusée */
  --void:#000000;         /* vide — pied de page uniquement */
  /* surfaces claires */
  --paper:#ffffff;
  --sheet:#f7f7f5;        /* blanc d'os — fond des sections claires */
  --cloth:#e7e8e1;        /* tissu */
  /* texte */
  --bone:#ffffff;         /* texte principal sur sombre */
  --muted:#c9cbbe;        /* lichen — texte secondaire */
  --graphite:#4d5757;     /* filets sur sombre */
  /* accent, rationné */
  --signal:#2fe36a;       /* signal vert — micro-surfaces seulement */
  --lime:#cef79e;         /* lime douce — surlignage, secondaire */
  /* filets */
  --hair:var(--graphite);
  --hair-light:#c9cbbe;
  /* mesures */
  --maxw:1200px;
  --gut:40px;
  --r-btn:8px;
  --r-nav:12px;
  --r-card:20px;
  --r-block:40px;
  --read:65ch;
  --font-sans:'Schibsted Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --font-mono:'Roboto Mono',ui-monospace,SFMono-Regular,monospace;
  color-scheme:dark;
}
@media(max-width:700px){:root{--gut:24px}}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:not(.lenis){scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:18px;
  line-height:1.3;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-weight:400}
::selection{background:var(--signal);color:var(--ink)}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:2px}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- Utilitaires ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
section{padding:100px 0}
main > section{background:var(--ink)}
@media(max-width:700px){section{padding:72px 0}}

.mono{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Tag à point — le motif de titraille du design system */
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;text-transform:uppercase;color:var(--muted)}
.tag .dot{width:6px;height:6px;border-radius:9999px;background:var(--signal);flex:none}

/* Ancien motif de titraille, conservé pour les pages intérieures :
   même vocabulaire visuel que .tag, prolongé d'un filet. */
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:44px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--muted)}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--hair)}
.eyebrow .dot{width:6px;height:6px;background:var(--signal);border-radius:9999px;flex:none}

/* Pastille de compteur de section */
.pill{
  display:inline-block;align-self:start;
  border:1px solid var(--hair);border-radius:9999px;
  padding:6px 14px;font-family:var(--font-mono);font-size:13px;
  letter-spacing:-.02em;color:var(--muted);
}

/* En-tête de section */
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:60px}
.sec-head .lead{margin-top:4px}

/* Boutons — toujours sur la surface opposée */
.btn,.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;
  text-transform:uppercase;text-decoration:none;border-radius:var(--r-btn);
  padding:12px 18px;transition:background-color .25s,color .25s,border-color .25s;
}
.btn{background:var(--paper);color:var(--ink);border:1px solid var(--paper)}
.btn:hover,.btn:focus-visible{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--bone);border:1px solid var(--hair)}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--signal);color:var(--signal)}
.btn-arrow{
  width:40px;height:40px;flex:none;border-radius:var(--r-btn);
  background:var(--signal);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;text-decoration:none;transition:background-color .25s,transform .25s;
}
.btn-arrow:hover,.btn-arrow:focus-visible{background:var(--paper);transform:translateY(-2px)}

/* Cartes */
.card{
  border:1px solid var(--hair);border-radius:var(--r-card);
  padding:40px;display:flex;flex-direction:column;gap:16px;
  background:transparent;transition:border-color .3s;
  position:relative;overflow:hidden;isolation:isolate;
}
.card:hover{border-color:var(--signal)}
.card .idx{font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;color:var(--muted)}
.proof .idx{color:var(--signal)}
.card h3{font-size:24px;line-height:1.2;letter-spacing:-.006em}
.card p{font-size:16px;color:var(--muted)}
@media(max-width:700px){.card{padding:28px}}

/* Calque de survol directionnel */
.card .hoverfill{
  position:absolute;inset:0;z-index:-1;background:var(--ink-deep);
  transform:translateY(100%);transition:transform .45s cubic-bezier(.22,.75,.25,1);
  pointer-events:none;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--paper);color:var(--ink);padding:12px 18px;
  border:1px solid var(--signal);
  font-family:var(--font-mono);font-size:13px;text-decoration:none;
  border-radius:var(--r-btn);
}
.skip:focus{left:12px;top:12px}

/* ---------- Nav ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  transition:background-color .3s,border-color .3s,padding .3s;
  border-bottom:1px solid transparent;
}
.has-scrolled .site-header{
  background:color-mix(in srgb,var(--ink) 86%,transparent);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--hair);
}
@supports not (backdrop-filter:blur(8px)){.has-scrolled .site-header{background:var(--ink)}}
.nav{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  height:72px;display:flex;align-items:center;justify-content:space-between;
  transition:height .3s;
}
.has-scrolled .nav{height:60px}
.brand{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:14px;letter-spacing:-.008em;
  text-transform:uppercase;text-decoration:none;color:var(--bone);
}
.brand .mark{
  width:19px;height:19px;flex:none;
  background-color:var(--signal);
  -webkit-mask:url(/assets/logo.svg) center/contain no-repeat;
          mask:url(/assets/logo.svg) center/contain no-repeat;
  animation:souffle 7s ease-in-out infinite;
}
@keyframes souffle{0%,100%{opacity:1}50%{opacity:.62}}
.burger{
  width:44px;height:44px;border:1px solid var(--hair);border-radius:var(--r-nav);
  background:none;cursor:pointer;display:grid;place-items:center;
  transition:border-color .25s;text-decoration:none;
}
.burger:hover,.burger:focus-visible{border-color:var(--signal)}
.burger span{display:block;width:18px;height:1.5px;background:var(--bone);margin:2.5px 0;transition:transform .3s,opacity .3s}
.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------- Menu plein écran ---------- */
.menu{
  position:fixed;inset:0;z-index:40;background:var(--ink-deep);
  display:flex;align-items:center;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;
}
.menu-open .menu,.menu:target{opacity:1;visibility:visible}
.menu ol{list-style:none;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);width:100%}
.menu a{
  display:flex;align-items:baseline;gap:20px;
  font-size:clamp(28px,5.4vw,58px);letter-spacing:-.012em;line-height:1.2;
  text-decoration:none;padding:12px 0;border-bottom:1px solid var(--hair);
  color:var(--bone);transition:color .25s,padding-left .25s;
}
.menu a:hover,.menu a:focus-visible{color:var(--bone);padding-left:12px}
.menu a:hover .mono,.menu a:focus-visible .mono{color:var(--signal)}
body[data-nav="accueil"] .menu a[href="/"],
body[data-nav="prestations"] .menu a[href="/prestations/"],
body[data-nav="a-propos"] .menu a[href="/a-propos/"],
body[data-nav="realisations"] .menu a[href="/realisations/"],
body[data-nav="contact"] .menu a[href="/contact/"]{color:var(--bone)}
body[data-nav="accueil"] .menu a[href="/"] .mono,
body[data-nav="prestations"] .menu a[href="/prestations/"] .mono,
body[data-nav="a-propos"] .menu a[href="/a-propos/"] .mono,
body[data-nav="realisations"] .menu a[href="/realisations/"] .mono,
body[data-nav="contact"] .menu a[href="/contact/"] .mono{color:var(--signal)}
.menu a .mono{flex:none}
.menu-close{
  position:absolute;top:16px;right:var(--gut);
  font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  border:1px solid var(--hair);border-radius:var(--r-nav);padding:12px 14px;
}
.menu-close:hover,.menu-close:focus-visible{color:var(--signal);border-color:var(--signal)}
.js .menu-close{display:none}

/* ---------- Échelle typographique ---------- */
h1{
  font-size:clamp(40px,7.4vw,111px);
  letter-spacing:-.02em;line-height:1;
  text-wrap:balance;max-width:15ch;
}
h1 .accent{color:var(--muted)}
h2{
  font-size:clamp(30px,4.6vw,58px);
  letter-spacing:-.012em;line-height:1.1;
  text-wrap:balance;max-width:22ch;
}
h3{letter-spacing:-.006em}
.lead{max-width:34ch;color:var(--muted);font-size:22px;line-height:1.3;letter-spacing:-.006em}
.lead strong{color:var(--bone);font-weight:400}
p{line-height:1.3}

/* ============================================================
   Couche d'animation — l'état par défaut est l'état final.
   Si le JavaScript ne tourne pas, la page est complète.
   ============================================================ */

/* Titre du hero : découpe en lignes masquées (créée par le JS) */
h1 .quiet{color:var(--muted)}
.rv-lines .ln{display:block;overflow:hidden}
.rv-lines .ln>i{display:block;font-style:normal}
.rv-lines.armed .ln>i{
  transform:translateY(110%);
  transition:transform .8s cubic-bezier(.22,.75,.25,1);
  transition-delay:calc(var(--i)*50ms + var(--d,0ms));
}
.rv-lines.armed.in .ln>i{transform:translateY(0)}

/* Apparition générique des blocs — armée par le JS, jamais par le CSS seul */
.io.armed{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.22,.75,.25,1),transform .8s cubic-bezier(.22,.75,.25,1)}
.io.armed.in-view{opacity:1;transform:none}

/* Caractères du défileur épinglé */
.ch{transition:opacity .12s linear}

/* Rideau mot à mot : les calques sont créés par le JS, jamais par le CSS */
.rv .w{display:inline-block;position:relative;overflow:hidden}
.rv-cover{
  position:absolute;inset:0;background-color:currentColor;
  transform-origin:bottom;transform:scaleY(1);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i)*90ms);
  pointer-events:none;z-index:1;
}
.rv.in .rv-cover{transform:scaleY(0)}

/* Soulignement lime */
.u{
  background-image:linear-gradient(var(--signal),var(--signal));
  background-repeat:no-repeat;background-position:0 96%;
  background-size:100% 2px;
}
.js .u{background-size:0% 2px;transition:background-size 1s cubic-bezier(.6,0,.2,1) .15s}
.js .in-view .u,.js .u.in{background-size:100% 2px}

/* ---------- Accueil : hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:160px 0 80px;overflow:hidden}
.hero-frame{
  position:absolute;inset:0;overflow:hidden;border-radius:0;
  pointer-events:none;background:var(--ink);
}
#bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero .tag{margin-bottom:40px}
.hero-foot{margin-top:80px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.hero-foot p{max-width:44ch;color:var(--muted);font-size:22px;letter-spacing:-.006em}
.hero-cta{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.scroll-cue{display:flex;align-items:center;gap:10px}
.scroll-cue svg{animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ---------- L'héritage ---------- */
.legacy{border-top:1px solid var(--hair)}
.legacy p{font-size:clamp(24px,3.4vw,42px);letter-spacing:-.015em;line-height:1.2;max-width:24ch;text-wrap:balance}
.legacy p strong{font-weight:400}
.legacy .after{margin-top:32px;font-size:18px;color:var(--muted);max-width:52ch}

/* ---------- Les trois temps : le défileur épinglé ---------- */
.temps{border-top:1px solid var(--hair)}
.temps .wrap{position:relative}
.temps h2{margin-bottom:16px}
.scroller{margin-top:60px}
.scroller-head{display:flex;align-items:center;gap:20px;margin-bottom:40px}
.scroller-count{font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;color:var(--muted);flex:none}
.scroller-count .now{color:var(--signal)}
.progress{flex:1;height:1px;background:var(--hair);position:relative;overflow:hidden}
.progress-bar{position:absolute;inset:0;background:var(--signal);transform:scaleX(0);transform-origin:left}
.no-js .progress-bar,.is-static .progress-bar{transform:scaleX(1)}

.temps-list{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.temps-list{grid-template-columns:1fr}}
.temp{min-height:280px}
.temp .idx{display:flex;justify-content:space-between;align-items:center;gap:20px}
.temp h3{font-size:24px;line-height:1.2;color:var(--bone)}
.temp h3 small{display:block;font-family:var(--font-mono);font-size:13px;color:var(--muted);letter-spacing:-.02em;text-transform:uppercase;margin-top:8px}
.temp p{font-size:16px;color:var(--muted)}
.temp svg{width:56px;height:38px;stroke:var(--bone);stroke-width:1.4;fill:none;opacity:.9}
.temp svg .lm{stroke:var(--bone);opacity:.55}
.temp svg .fdot{fill:var(--signal);stroke:none}

/* Le cadre du défileur : il ne bouge pas, le contenu le traverse.
   Repris de dottxt.ai. Réalisé en `position:sticky` — pas en épinglage
   JavaScript : c'est le mécanisme des deux références, ça ne crée aucune
   cale dans le document, et ça ne peut donc pas désynchroniser la limite
   de défilement du scroll lissé. */
.scroller-frame{display:contents}
.scroller-head{display:flex;align-items:center;gap:20px;margin-bottom:40px}
.scroller-count .of{color:var(--muted)}

@media(min-width:1025px){
  .js .scroller.is-pinned{position:relative;height:280svh}
  .js .scroller.is-pinned .scroller-frame{
    display:flex;flex-direction:column;gap:0;
    position:sticky;top:calc((100svh - 68svh)/2);
    height:68svh;min-height:440px;padding:36px 48px 44px;
    border:1px solid var(--hair);border-radius:var(--r-card);
    background:var(--ink);
  }
  .js .scroller.is-pinned .scroller-head{margin-bottom:32px}
  .js .scroller.is-pinned .temps-list{display:block;position:relative;flex:1;min-height:0}
  .js .scroller.is-pinned .temp{
    position:absolute;inset:0;
    display:grid;
    grid-template-columns:minmax(200px,280px) 1fr;
    grid-template-rows:auto 1fr;
    column-gap:60px;row-gap:24px;
    align-content:start;border:0;padding:0;background:transparent;
  }
  /* Le placement doit être explicite : sans ça le paragraphe retombe sous
     l'étiquette, dans la colonne de gauche, et déborde du cadre. */
  .js .scroller.is-pinned .temp .idx{grid-column:1;grid-row:1/3;overflow:visible}
  .js .scroller.is-pinned .temp .idx .mono{flex:none;white-space:nowrap}
  .js .scroller.is-pinned .temp h3{grid-column:2;grid-row:1}
  .js .scroller.is-pinned .temp p{grid-column:2;grid-row:2;align-self:start}
  .js .scroller.is-pinned .temp:hover{border-color:transparent}
  .js .scroller.is-pinned .temp .idx{flex-direction:column;align-items:flex-start;gap:24px}
  .js .scroller.is-pinned .temp h3{font-size:clamp(34px,4.2vw,54px);letter-spacing:-.012em;line-height:1.1}
  .js .scroller.is-pinned .temp h3 small{font-size:13px;margin-top:14px}
  .js .scroller.is-pinned .temp p{font-size:clamp(24px,2vw,27px);color:var(--bone);max-width:32ch;line-height:1.32;letter-spacing:-.006em}
  .js .scroller.is-pinned .temp svg{width:64px;height:44px}
}

/* ---------- Encart « à savoir » (règle anti-tunnel) ---------- */
.issue{
  margin-top:80px;padding:40px;border:1px solid var(--hair);border-radius:var(--r-card);
  display:flex;gap:24px;align-items:baseline;flex-wrap:wrap;
}
.issue p{font-size:clamp(20px,2.6vw,30px);letter-spacing:-.012em;max-width:34ch;text-wrap:balance;line-height:1.2}
.issue .tag{flex:none}

/* ---------- Périmètre négatif ---------- */
.neg{background:var(--ink-deep);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:140px 0}
.fill p{
  font-size:clamp(30px,4.6vw,58px);
  letter-spacing:-.012em;line-height:1.15;
  max-width:22ch;text-wrap:balance;
}
.js .fill .fw{color:rgba(255,255,255,.38);transition:color .3s linear}
.js .fill .fw.on{color:var(--bone)}
.js .fill .je .fw.on{color:var(--lime)}
.fill .je{display:block;margin-top:28px;color:var(--lime)}
.js .fill .je{color:inherit}
.neg .sig{margin-top:40px}

/* ---------- Preuve : trois panneaux pleine largeur ----------
   Repris de la bande de cartes d'integratedbio.com : les blocs se touchent,
   sortent de la colonne, et chacun porte sa propre surface. Pas de filet,
   pas de rayon : c'est le contraste de surface qui délimite. */
.proof-grid{
  width:100%;margin:60px 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
}
@media(max-width:900px){.proof-grid{grid-template-columns:1fr}}

.proof{
  display:flex;flex-direction:column;justify-content:space-between;gap:48px;
  padding:44px 40px 52px;min-height:min(66svh,560px);
}
@media(max-width:900px){.proof{min-height:0;padding:40px 24px 44px;gap:40px}}

.proof-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.proof-mark{width:min(200px,52%);height:auto;flex:none;fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke}
.proof-num{font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;flex:none}
.proof-body h3{font-size:clamp(24px,2.4vw,32px);line-height:1.15;margin-bottom:14px}
.proof-body p{font-size:17px;line-height:1.35;max-width:38ch}

/* Les trois surfaces. Le vert signal n'entre dans aucune : il reste sur les
   micro-surfaces, et c'est la lime — prévue pour l'emphase — qui porte le
   premier panneau. */
.proof--lime{background:var(--lime);color:var(--ink)}
.proof--lime .proof-num{color:var(--graphite)}
.proof--lime .proof-body p{color:var(--graphite)}
.proof--lime .proof-mark{stroke:var(--ink);opacity:.7}
.proof--lime .proof-mark .fdot{fill:var(--ink);stroke:none;opacity:1}

.proof--ink{background:var(--ink-deep);color:var(--bone)}
.proof--ink .proof-num{color:var(--signal)}
.proof--ink .proof-body p{color:var(--muted)}
.proof--ink .proof-mark{stroke:var(--muted)}
.proof--ink .proof-mark .lm{stroke:var(--muted)}
.proof--ink .proof-mark .fdot{fill:var(--signal);stroke:none}

.proof--cloth{background:var(--cloth);color:var(--ink)}
.proof--cloth .proof-num{color:var(--graphite)}
.proof--cloth .proof-body p{color:var(--graphite)}
.proof--cloth .proof-mark{stroke:var(--graphite)}
.proof--cloth .proof-mark .lm{stroke:var(--graphite)}
.proof--cloth .proof-mark .fdot{fill:var(--ink);stroke:none}

.ref-line{margin-top:60px;padding-top:24px;border-top:1px solid var(--hair);display:flex;gap:16px;flex-wrap:wrap;align-items:baseline}
.ref-line p{color:var(--muted);font-size:18px}
.ref-line a{color:var(--bone)}

/* ---------- Territoire — section claire ---------- */
.terr{background:var(--sheet);color:var(--ink);padding:120px 0}
.terr .tag{color:var(--graphite)}
.terr .pill{border-color:var(--hair-light);color:var(--graphite)}
.terr .big{
  font-size:clamp(30px,4.6vw,58px);letter-spacing:-.012em;line-height:1.1;
  max-width:24ch;text-wrap:balance;color:var(--ink);
}
.terr .big em{font-style:normal}
.terr .u{background-image:linear-gradient(var(--lime),var(--lime));background-size:100% .5em;background-position:0 88%}
.js .terr .u{background-size:0% .5em}
.js .terr .in-view .u,.js .terr .u.in{background-size:100% .5em}
.terr .follow{margin-top:32px;max-width:52ch;color:var(--graphite);font-size:18px}

/* ---------- Contact ---------- */
.contact{background:var(--ink);border-top:1px solid var(--hair);padding:120px 0}
.contact h2{font-size:clamp(36px,6.4vw,89px);letter-spacing:-.02em;max-width:16ch;margin-bottom:0}
.contact .row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:60px;
  align-items:end;border-top:1px solid var(--hair);padding-top:40px;margin-top:60px;
}
.contact p.pre{max-width:44ch;color:var(--muted);font-size:22px;letter-spacing:-.006em}
.contact .actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
@media(min-width:900px){.contact .actions{justify-self:end}}
.mail{
  display:inline-block;text-decoration:none;
  font-size:clamp(24px,4.2vw,48px);letter-spacing:-.015em;color:var(--bone);
}
.mail:hover{color:var(--signal)}

/* ---------- Pied de page ---------- */
footer{background:var(--void);padding:60px 0}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;color:var(--muted)}
footer a{color:var(--muted);text-decoration:none;transition:color .25s}
footer a:hover,footer a:focus-visible{color:var(--bone)}


/* ============================================================
   Pages intérieures
   ============================================================ */

/* ---------- Entrée de page ---------- */
.page-hero{padding:170px 0 90px;border-bottom:1px solid var(--hair)}
@media(max-width:700px){.page-hero{padding:130px 0 64px}}
.page-hero h1{font-size:clamp(38px,6vw,80px);max-width:18ch}
.page-hero .lead{margin-top:34px}

/* ---------- Détail d'une prestation (les 4 rubriques imposées) ---------- */
.detail{border-top:1px solid var(--hair);padding-top:44px;margin-top:64px}
.detail:first-of-type{border-top:0;margin-top:0}
.detail-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.detail-head h2{margin-bottom:0;font-size:clamp(28px,4vw,46px)}
.detail-head h2 small{display:block;font-size:15px;color:var(--muted);letter-spacing:0;margin-top:8px}
.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--hair);border:1px solid var(--hair);margin-top:30px}
@media(max-width:760px){.detail-grid{grid-template-columns:1fr}}
.detail-cell{background:var(--ink);padding:28px 26px 32px}
.detail-cell h3{font-size:13px;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.detail-cell p{font-size:16px}
.detail-cell p+p{margin-top:12px}
.detail-cell ul{list-style:none;margin-top:12px}
.detail-cell li{position:relative;padding-left:18px;font-size:16px}
.detail-cell li+li{margin-top:8px}
.detail-cell ul+p,.detail-cell ol+p{margin-top:14px}
.detail-cell li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--signal)}
.price{font-size:20px;letter-spacing:-.015em}
.price .todo{color:var(--muted);font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- Zone déclarée (vocabulaire de métier) ---------- */
.declared{
  margin-top:80px;padding:32px 34px;border:1px solid var(--hair);border-radius:14px;
  background:var(--ink-deep);
}
.declared h2{font-size:clamp(20px,2.4vw,26px);margin-bottom:16px;max-width:40ch}
.declared p{color:var(--muted);max-width:var(--read);font-size:16px}
.declared p+p{margin-top:14px}
.declared strong{color:var(--bone);font-weight:400}

/* ---------- Gabarit « document » ---------- */
.doc{padding:170px 0 40px}
@media(max-width:700px){.doc{padding:130px 0 32px}}
.doc h1{font-size:clamp(34px,5vw,64px);max-width:20ch}
.doc-meta{
  margin-top:36px;padding:20px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  display:flex;gap:12px 40px;flex-wrap:wrap;
}
.doc-meta div{display:flex;flex-direction:column;gap:5px}
.doc-meta dt,.doc-meta .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.doc-meta dd,.doc-meta .v{font-size:15px}
.doc-meta a{color:var(--bone);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:4px}
.doc-meta a:hover{text-decoration-color:var(--signal)}

.doc-body{padding:0 0 120px}
.doc-block{border-top:1px solid var(--hair);padding-top:34px;margin-top:56px}
.doc-block:first-child{border-top:0;margin-top:44px;padding-top:0}
.doc-block h2{font-size:clamp(24px,3.2vw,36px);margin-bottom:20px;max-width:26ch}
.doc-block h3{font-size:19px;margin:28px 0 12px}
.doc-block p,.doc-block li{max-width:var(--read);font-size:17px}
.doc-block p+p{margin-top:16px}
.doc-block ul,.doc-block ol{list-style:none;margin-top:16px}
.doc-block li{position:relative;padding-left:20px}
.doc-block li+li{margin-top:10px}
.doc-block ul li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:1px;background:var(--signal)}
.doc-block ol{counter-reset:d}
.doc-block ol li{counter-increment:d;padding-left:32px}
.doc-block ol li::before{
  content:counter(d,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-family:var(--font-mono);font-size:12px;color:var(--signal);letter-spacing:.06em;
}
.doc-block blockquote{
  border-left:1px solid var(--signal);padding-left:22px;margin:24px 0;
  font-size:clamp(19px,2.2vw,24px);letter-spacing:-.015em;max-width:34ch;text-wrap:balance;
}

.doc-kv{border:1px solid var(--hair);border-radius:12px;margin-top:22px;max-width:var(--read)}
.doc-kv div{display:flex;justify-content:space-between;gap:20px;padding:16px 22px;border-top:1px solid var(--hair);flex-wrap:wrap}
.doc-kv div:first-child{border-top:0}
.doc-kv .k{font-size:15px;color:var(--muted)}
.doc-kv .v{font-size:15px;font-family:var(--font-mono);letter-spacing:.02em}

.doc-sources{border-top:1px solid var(--hair);padding-top:30px;margin-top:70px}
.doc-sources h2{font-size:18px;margin-bottom:16px}
.doc-sources li,.doc-sources p{color:var(--muted);font-size:15px;max-width:var(--read)}

/* ---------- Index des dossiers ---------- */
.index-list{list-style:none;margin-top:20px;border-top:1px solid var(--hair)}
.index-list li{border-bottom:1px solid var(--hair)}
.index-list a{
  display:block;padding:34px 0;text-decoration:none;
  transition:padding-left .25s,color .25s;
}
.index-list a:hover,.index-list a:focus-visible{padding-left:12px;color:var(--signal)}
.index-list h2{font-size:clamp(22px,3vw,32px);margin-bottom:12px;max-width:28ch}
.index-list p{color:var(--muted);max-width:var(--read);font-size:16px}
.index-list .meta{margin-top:14px;display:flex;gap:20px;flex-wrap:wrap}

/* ---------- À propos ---------- */
.convictions{margin-top:20px}
.conviction{border-top:1px solid var(--hair);padding-top:30px;margin-top:44px}
.conviction h2{font-size:clamp(22px,3vw,34px);margin-bottom:16px;max-width:28ch}
.conviction p{max-width:var(--read)}
.conviction p+p{margin-top:14px}
.parcours{list-style:none;margin-top:26px;max-width:var(--read)}
.parcours li{display:flex;gap:24px;padding:18px 0;border-top:1px solid var(--hair);flex-wrap:wrap}
.parcours .when{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;color:var(--muted);flex:0 0 90px}
.parcours .what{flex:1;min-width:220px}
.todo-mark{
  display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);background:var(--signal);
  padding:2px 8px;border-radius:4px;
}

/* ---------- Contact (page) ---------- */
.contact-page{padding:170px 0 130px}
@media(max-width:700px){.contact-page{padding:130px 0 90px}}

/* ---------- Prose générique ---------- */
.prose{max-width:var(--read)}
.prose p+p{margin-top:16px}
.prose a{color:var(--bone);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:4px}
.prose a:hover{text-decoration-color:var(--signal);color:var(--signal)}

/* ============================================================
   Mouvement réduit — tout se fige, rien ne disparaît
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .u{transition:none;background-size:100% 2px}
  .js .terr .u{background-size:100% .5em}
  .js .fill .fw{transition:none;color:var(--bone)}
  .js .fill .je .fw{color:var(--lime)}
  .rv-cover{display:none}
  .scroll-cue svg{animation:none}
  .menu,.burger span,.index-list a,.card,.btn,.btn-ghost,.btn-arrow{transition:none}
  .scroller.is-pinned{position:static}
}


/* ---------- Marqueurs de points ouverts (PRD §8) ---------- */
.todo{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.doc-kv .v.todo,.price .todo{
  border:1px dashed var(--hair);border-radius:4px;padding:2px 8px;display:inline-block;
}

/* ============================================================
   B. Le rythme — deux sections voisines ne partagent jamais
   le même gabarit : surface, densité, colonne, échelle de titre.
   ============================================================ */

/* 02 · l'héritage — creusée, très aérée, colonne étroite décalée à droite */
.legacy{background:var(--ink-deep);padding:140px 0}
.legacy .wrap{display:grid;grid-template-columns:1fr;justify-items:end}
.legacy .sec-head,.legacy p{max-width:640px;width:100%}
@media(max-width:900px){.legacy .wrap{justify-items:start}}

/* 04 · le périmètre négatif — surface claire, la plus aérée de la page,
   et le seul endroit où la lime sert de bande de surlignage. */
.light{background:var(--sheet);color:var(--ink)}
.light .tag,.light .mono,.light .sig{color:var(--graphite)}
.light .tag .dot{background:var(--signal)}
.light .pill{border-color:var(--hair-light);color:var(--graphite)}
.neg{background:var(--sheet);color:var(--ink);border:0;padding:180px 0}
.neg .fill p{max-width:20ch}
.js .neg .fill .fw{color:rgba(34,47,48,.55);transition:color .3s linear,background-color .3s linear}
.js .neg .fill .fw.on{color:var(--ink)}
.neg .fill .je{color:var(--ink)}
.js .neg .fill .je{color:inherit}
.js .neg .fill .je .fw.on{color:var(--ink);background:var(--lime)}

/* 06 · territoire — l'autre surface claire, mais en tissu, pas en blanc d'os,
   et pleine hauteur : la combinaison ne se répète pas. */
.terr{background:var(--cloth);color:var(--ink);padding:120px 0;
  min-height:92svh;display:flex;align-items:center}
.terr .wrap{width:100%}

/* 07 · contact — retour au sombre creusé, aéré, titre au maximum */
.contact{background:var(--ink-deep)}

/* ============================================================
   C. La vie permanente — des boucles lentes, d'amplitude minuscule.
   Sans elles la page est morte dès les révélations jouées.
   ============================================================ */

/* le point de la marque, toujours à l'écran */

/* les points de section, décalés les uns des autres */
.tag .dot{animation:halo 9s ease-in-out infinite}
.sec-head:nth-of-type(odd) .tag .dot{animation-delay:-3s}
@keyframes halo{0%,100%{opacity:1}50%{opacity:.4}}

/* Les boucles à l'intérieur des SVG ne sont pas composées : le navigateur
   repeint le dessin entier à chaque image. Sur mobile bridé, ces deux-là
   coûtent à elles seules 2 400 ms de fil principal bloqué et font tomber la
   performance de 100 à 71. Elles restent sur grand écran, où le coût est nul. */
@media(min-width:1025px){
  /* le point mobile de la grille des risques : 17 s, la boucle longue */
  .proof-mark .fdot{animation:drift 17s ease-in-out infinite}
  /* le repère du temps 3 : respiration très lente */
  .temp svg .lm{animation:breathe 12s ease-in-out infinite}
}
@keyframes drift{0%,100%{transform:translate(0,0)}33%{transform:translate(6px,-4px)}66%{transform:translate(-4px,3px)}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.5}}

/* micro-interactions : jamais au-delà de 250 ms (mécanisme n° 5) */
.card,.btn,.btn-ghost,.btn-arrow,.menu a,.index-list a,.burger,footer a{transition-duration:.22s}
.card .hoverfill{transition:transform .24s cubic-bezier(.22,.75,.25,1)}

@media(prefers-reduced-motion:reduce){
  .brand .mark,.tag .dot,.proof-mark .fdot,.temp svg .lm{animation:none}
  .js .neg .fill .fw{color:var(--ink)}
  .js .neg .fill .je .fw{background:var(--lime)}
}


/* L'en-tête fixé passe sur des surfaces claires : il s'inverse. */
.over-light .brand{color:var(--ink)}
.over-light .burger{border-color:var(--hair-light)}
.over-light .burger span{background:var(--ink)}
.over-light .burger:hover,.over-light .burger:focus-visible{border-color:var(--signal)}
.has-scrolled.over-light .site-header{
  background:color-mix(in srgb,var(--sheet) 86%,transparent);
  border-bottom-color:var(--hair-light);
}
@supports not (backdrop-filter:blur(8px)){.has-scrolled.over-light .site-header{background:var(--sheet)}}


/* ============================================================
   La structure de levo-studio.com : chaque partie occupe l'écran.

   L'empilement en `position:sticky` a été retiré. Un élément collant le
   reste tant que son bloc conteneur défile — ici `<main>`, c'est-à-dire
   toute la page. Six sections se retrouvaient collées à `top:0` en même
   temps, invisibles seulement parce que les suivantes les recouvraient ;
   et la section des trois temps, laissée statique pour porter son propre
   cadre, se peignait SOUS elles. D'où le fond du hero réapparaissant au
   milieu de la page. Mesuré, pas supposé.
   ============================================================ */
@media(min-width:1025px){
  /* Colonne, pas ligne : la section « preuve » a trois enfants directs — la
     bande de panneaux sort de la colonne de lecture — et en `flex-direction`
     par défaut ils se seraient partagé la largeur. */
  .js main > section{
    min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  }
  .js main > section > .wrap{width:100%}
  .js main > section.temps{min-height:0;display:block}
  .js .hero{justify-content:flex-end}
}


/* ============================================================
   Figures — deux dessins au trait, générés puis teintés à la
   couleur du design system dans le fichier lui-même : pas de
   masque CSS, pas de filtre, pas de JavaScript. Purement
   décoratives, donc retirées de l'arbre d'accessibilité.
   ============================================================ */
.fig{display:block;height:auto;max-width:100%;pointer-events:none}

/* 00 · hero — une salle de serveurs en coupe axonométrique. Posée dans
   .hero-frame, donc sous le texte (z-index 1) et au-dessus du fond animé
   (canvas, z-index de base). */
.fig-datacenter{display:none}
@media(min-width:1025px){
  .fig-datacenter{
    display:block;position:absolute;right:-3%;bottom:4%;
    width:58%;max-width:920px;opacity:.18;
  }
}

/* 01 · direction — le schéma de réseau hiérarchique : ce que « structurer »
   veut dire, dessiné. Le texte de cette section est calé à droite, la
   figure occupe la colonne laissée vide à gauche. */
/* Grand écran seulement, comme les deux autres figures : sur mobile
   cette requête entrait en concurrence avec la police pendant la
   fenêtre de rendu du titre et poussait le LCP à 2,0 s, soit
   exactement le plafond du PRD. Mesuré, pas supposé. */
.fig-reseau{display:none}
@media(min-width:1025px){
  .legacy .wrap{
    display:grid;grid-template-columns:1fr minmax(0,600px);
    column-gap:80px;align-items:center;justify-items:stretch;
  }
  .legacy .fig-reseau{display:block;grid-column:1;grid-row:1/span 3;margin:0;justify-self:start;width:100%;opacity:.22}
  .legacy .sec-head{grid-column:2;margin-bottom:32px}
  .legacy p{grid-column:2}
  .legacy .after{margin-top:28px}
}

/* 05 · territoire — le plan cadastral : « je viens voir » */
.fig-territoire{width:100%;opacity:.5;margin-top:48px}
@media(min-width:1025px){
  .terr .wrap{position:relative}
  .fig-territoire{
    position:absolute;right:-2%;bottom:-6%;
    width:52%;max-width:760px;margin:0;opacity:.4;
  }
  /* Le texte passe devant le dessin, jamais l'inverse. */
  .terr .sec-head,.terr .big,.terr .follow{position:relative;z-index:1}
  .terr .follow{max-width:46ch}
}
@media(max-width:1024px){
  .fig-territoire{opacity:.42}
}

/* La dérive du fond de repli est portée par le compositeur, pas par une
   boucle de dessin : le canvas est peint une fois puis simplement déplacé. */
#bg.is-drawn{animation:derive 34s ease-in-out infinite alternate}
@keyframes derive{
  from{transform:translate3d(0,0,0) scale(1.06)}
  to{transform:translate3d(-2.5%,1.5%,0) scale(1.12)}
}
@media(prefers-reduced-motion:reduce){#bg.is-drawn{animation:none}}

/* Le symbole dans le pied de page, au même vert que dans l'en-tête. */
.foot-brand{display:inline-flex;align-items:center;gap:8px;color:var(--bone)}
.foot-brand .mark{
  width:15px;height:15px;flex:none;background-color:var(--signal);
  -webkit-mask:url(/assets/logo.svg) center/contain no-repeat;
          mask:url(/assets/logo.svg) center/contain no-repeat;
}

/* Contact : l'appel et le message au même niveau, sur l'accueil comme sur
   la page dédiée. */
.mail-list{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.mail-list .mail{font-size:clamp(22px,3.4vw,40px)}
@media(min-width:900px){.contact .mail-list{align-items:flex-end}}

/* À propos — une étude de proportions à la manière de Vinci, mais c'est un
   châssis qui est inscrit dans le cercle et le carré, pas un homme : le §3.3
   du PRD interdit l'humain d'illustration sur cette page précisément.
   Décorative, posée derrière l'en-tête, grand écran seulement. */
.fig-codex{display:none}
@media(min-width:1025px){
  .page-hero{position:relative;overflow:hidden}
  .page-hero .wrap{position:relative;z-index:1}
  .fig-codex{
    display:block;position:absolute;right:-2%;top:50%;
    transform:translateY(-46%);
    width:38%;max-width:480px;opacity:.24;z-index:0;
  }
}

/* Les trois temps — une figure par temps, dans le même langage que les
   grandes : le plan du terrain pour « voir », le fil à plomb pour
   « remettre d'aplomb », l'échappement pour « avancer ». Grand écran
   seulement ; sous 1025 px les pictogrammes en SVG font le travail, sans
   aucune requête réseau. */
.fig-temp{display:none}
@media(min-width:1025px){
  /* Hauteur fixe et `contain` : les trois dessins n'ont pas le même format,
     et sans ça les cartes ne s'alignent plus entre elles. */
  .fig-temp{display:block;height:132px;width:auto;max-width:100%;object-fit:contain;object-position:center;opacity:.55}
  .temp .idx svg{display:none}
  .js .scroller.is-pinned .temp .idx .fig-temp{height:168px}
}

/* Prestations — l'assemblage éclaté d'une installation, derrière l'en-tête. */
.fig-systeme{display:none}
@media(min-width:1025px){
  .fig-systeme{
    display:block;position:absolute;right:-4%;top:50%;
    transform:translateY(-42%);
    width:52%;max-width:660px;opacity:.17;z-index:0;
  }
}

/* ============================================================
   Bouton en deux pièces, repris d'integratedbio.com : une pastille
   de texte et un bloc d'icône, joints par une encoche courbe qui
   s'inverse au survol.

   Leur version morphe les tracés avec le plugin MorphSVG de GSAP.
   Inutile ici : leurs deux tracés sont des miroirs verticaux l'un de
   l'autre, un fondu croisé de 220 ms donne le même effet, sans
   dépendance, et il marche aussi sur mobile où aucune bibliothèque
   n'est chargée.
   ============================================================ */
.btn-duo{
  display:inline-flex;align-items:stretch;height:40px;
  text-decoration:none;color:var(--ink);
  font-family:var(--font-mono);font-size:13px;letter-spacing:-.02em;
  text-transform:uppercase;
}
.btn-duo-label{
  position:relative;display:flex;align-items:center;
  background:var(--paper);color:var(--ink);
  border-radius:var(--r-nav) 0 0 var(--r-nav);
  padding:0 6px 0 18px;white-space:nowrap;
}
/* la queue déborde à droite et vient s'emboîter dans l'icône */
.btn-duo-corner{position:absolute;right:-14px;top:0;width:15px;height:40px;display:block}
.btn-duo-corner svg,.btn-duo-blob{display:block}
.btn-duo-corner path{fill:var(--paper)}

.btn-duo-icon{position:relative;display:flex;align-items:center;justify-content:center;width:43px;height:40px}
.btn-duo-blob{position:absolute;inset:0}
.btn-duo-blob path{fill:var(--signal)}
.btn-duo-arrow{position:relative;z-index:1;color:var(--ink)}

/* le fondu : l'état de survol est superposé, à opacité nulle */
.btn-duo .p-on{opacity:0}
.btn-duo .p-off,.btn-duo .p-on{transition:opacity .22s ease}
.btn-duo:hover .p-off,.btn-duo:focus-visible .p-off{opacity:0}
.btn-duo:hover .p-on,.btn-duo:focus-visible .p-on{opacity:1}
.btn-duo:focus-visible{outline:2px solid var(--signal);outline-offset:4px;border-radius:var(--r-nav)}

@media(prefers-reduced-motion:reduce){
  .btn-duo .p-off,.btn-duo .p-on{transition:none}
}

/* Un dossier mis de côté : présent dans la liste, mais pas encore ouvert. */
.index-list li.a-venir > div{display:block;padding:34px 0;color:inherit}
.index-list li.a-venir h2,.index-list li.a-venir p{opacity:.55}