/* Oskale V8 · une maquette d'ingénieur en plein jour.
   Papier chaud, volumes blancs au trait fin, une seule couleur vive : le cobalt (objet actif, jamais décoratif).
   Trois blocs nuit, sans aucun vert : majuscules condensées, dégradé « lumière froide » (--ice), les 5 projets au scroll.
   Un seul fichier. Les variables sont en tête ; three.js les lit (hero3d.js, chain3d.js, chai.js). */

:root{
  /* papier */
  --paper:#f5f4f0;--paper-2:#eeece6;--mist:#e9edf2;--card:#fff;
  --ink:#10141e;--ink-2:#5a6272;--mute:#8f95a1;--line:#dedad1;
  --acc:#2f5bff;--acc-soft:#e8edff;--signal:#f0a03c;
  /* volumes iso et 3D */
  --ft:#fbfaf7;--fl:#e6e3dc;--fr:#d3cfc6;--edge:#2b303b;--shadow:rgba(16,20,30,.085);
  --pt:#f2f0eb;--pl:#dfdbd2;--pr:#cdc8bd;
  /* nuit */
  --night:#10141e;--night-2:#171c29;--nline:#2a3142;--ntext:#eef1f6;--nmute:#a6afbe;--stroke:#c9d4f5;
  --ice:linear-gradient(100deg,#eef2ff,#b9c8ff 45%,#7d97ff);
  /* âges des fûts : la couleur porte une donnée */
  --age0:#e8edff;--age1:#c3d0ff;--age2:#93a9ff;--age3:#5f7df5;--age4:#3450d6;--age5:#1a2f8f;
  /* typo */
  --sans:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',ui-serif,Georgia,serif;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* mouvement */
  --e:cubic-bezier(.2,.8,.2,1);
  --nav:64px;--dock:0px;--gut:16px;--max:1400px;
}
@media (max-width:959px),(pointer:coarse){:root{--dock:calc(64px + env(safe-area-inset-bottom))}}
@media (min-width:960px){:root{--gut:40px}}
@media (min-width:1600px){:root{--max:min(88vw,1560px)}}

/* ---------- polices ---------- */
@font-face{font-family:'Instrument Sans';font-weight:400;font-display:swap;src:url(assets/fonts/instrument-sans-0.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:500;font-display:swap;src:url(assets/fonts/instrument-sans-1.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:600;font-display:swap;src:url(assets/fonts/instrument-sans-2.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans';font-weight:700;font-display:swap;src:url(assets/fonts/instrument-sans-3.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-italic-400-latin.woff2) format('woff2');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:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-italic-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-normal-400-latin.woff2) format('woff2');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:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/instrument-serif-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(assets/fonts/barlow-condensed-0.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(assets/fonts/barlow-condensed-1.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400 500;font-display:swap;src:url(assets/fonts/jetbrains-mono-normal-400-latin.woff2) format('woff2');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:'JetBrains Mono';font-weight:400 500;font-display:swap;src:url(assets/fonts/jetbrains-mono-normal-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation;overflow-x:clip;overscroll-behavior-x:none;scroll-padding-top:var(--nav)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip;padding-top:var(--nav)}
::selection{background:var(--acc-soft);color:var(--ink)}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
abbr[title]{text-decoration:none}
:focus{outline:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.night :focus-visible{outline-color:#b9c8ff}
.wrap{max-width:calc(var(--max) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px}
.skip:focus{top:12px}
.num{font-family:var(--cond);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- typo ---------- */
.kick{margin:0 0 20px;font:500 11.5px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.night .kick{color:var(--nmute)}
.ln{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block}
.h1,.h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:.95;color:var(--ink);text-wrap:balance}
.h2{font-size:clamp(46px,5.6vw,96px)}
.h2-s{font-size:clamp(42px,4.4vw,76px)}
.h2 .dim,.h1 .dim{color:var(--ink-2)}
.h1 em,.h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--acc)}
.hn{font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:-.003em;line-height:.9;color:var(--ntext);font-size:clamp(44px,6vw,104px)}
.hn-m{font-size:clamp(40px,4.6vw,80px)}
.hn-xl{font-size:clamp(48px,8.2vw,148px)}
.ice,.ice-t{background:var(--ice);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px 64px;flex-wrap:wrap;margin-bottom:44px}
.sec-p{max-width:46ch;font-size:18px;line-height:1.55;color:var(--ink-2)}
.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--ink);border-bottom:1px solid currentColor;line-height:1.2;padding-top:12px;transition:color .2s}
.text-link:hover{color:var(--acc)}
.text-link span{transition:transform .25s var(--e)}
.text-link:hover span{transform:translate(2px,-2px)}
.fig{font:500 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.fig b{font-weight:500;color:var(--acc)}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;font:600 16px/1 var(--sans);letter-spacing:-.005em;border-radius:2px;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s}
.btn span{transition:transform .25s var(--e)}
.btn:hover span{transform:translate(2px,-2px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#252b3a}
.btn-line{border:1px solid var(--ink);color:var(--ink)}
.btn-line:hover{border-color:var(--acc);color:var(--acc)}
.btn-sm{min-height:44px;padding:0 16px;font-size:14.5px}
.btn-white{background:var(--ntext);color:var(--night)}
.btn-white:hover{background:#fff}

/* ---------- 5.1 navigation ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;height:var(--nav);background:var(--paper);border-bottom:1px solid var(--line);transition:background-color .2s,border-color .2s}
.nav-in{height:100%;max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:32px}
.nav-logo{position:relative;display:block;width:96px;height:44px;flex:none}
.nav-logo img{position:absolute;inset:3.5px 0 auto;width:100%;height:37px;transition:opacity .2s}
.nav-logo .l-light{opacity:0}
.nav-links{display:flex;gap:28px;margin-left:24px;font-size:15px;font-weight:500}
.nav-links a{padding:11px 0;color:var(--ink);transition:color .2s}
.nav-links a:hover{color:var(--acc)}
.nav-act{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:15px;font-weight:500}
.nav-tel{font-weight:600;font-variant-numeric:tabular-nums}
.nav-tel:hover,.nav-msg:hover{color:var(--acc)}
.nav-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--acc);transform:scaleX(var(--prog,0));transform-origin:left;pointer-events:none}
.nav[data-tone="night"]{background:var(--night);border-color:var(--nline);color:var(--ntext)}
.nav[data-tone="night"] .l-dark{opacity:0}
.nav[data-tone="night"] .l-light{opacity:1}
.nav[data-tone="night"] .nav-links a,.nav[data-tone="night"] .nav-act{color:var(--ntext)}
.nav[data-tone="night"] .nav-links a:hover,.nav[data-tone="night"] .nav-tel:hover,.nav[data-tone="night"] .nav-msg:hover{color:#b9c8ff}
.nav[data-tone="night"] .btn-ink{background:var(--ntext);color:var(--night)}
.nav[data-tone="night"] .nav-bar{background:var(--ice)}
.nav[data-tone="night"] .burger span{background:var(--ntext)}
.burger{display:none;position:relative;width:44px;height:44px;margin-left:auto;margin-right:-10px}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);transition:transform .3s var(--e)}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu{position:fixed;inset:var(--nav) 0 0;z-index:59;background:var(--paper);padding:28px var(--gut) calc(var(--dock) + 24px);display:flex;flex-direction:column;overflow:auto}
.menu>a{font:600 32px/1.1 var(--sans);letter-spacing:-.03em;padding:14px 0;border-bottom:1px solid var(--line)}
.menu>a:last-of-type{color:var(--acc)}
.menu-foot{margin-top:auto;padding-top:28px;font:500 13px var(--mono);color:var(--ink-2)}
.menu-foot a{display:inline-block;padding:12px 0}
@media (max-width:1180px){.nav-links{gap:20px;margin-left:8px}.nav-act{gap:16px}.nav-msg{display:none}}
@media (max-width:959px){
  .nav-links,.nav-act{display:none}
  .burger{display:block}
}

/* barre d'actions (téléphone, tablette, tactile) */
.dock{position:fixed;inset:auto 0 0;z-index:58;display:none;grid-template-columns:1fr 1fr 1.5fr;gap:8px;padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}
.dock a{display:flex;align-items:center;justify-content:center;min-height:48px;font:600 15px var(--sans);border:1px solid var(--ink);border-radius:2px}
.dock .dock-main{background:var(--ink);color:#fff}
.dock{transition:background-color .2s,border-color .2s}
.dock[data-tone=night]{background:var(--night);border-color:var(--nline)}
.dock[data-tone=night] a{color:var(--ntext);border-color:var(--nline)}
.dock[data-tone=night] .dock-main{background:#fff;color:var(--night);border-color:#fff}
@media (max-width:959px),(pointer:coarse){.dock{display:grid}}

/* ---------- apparitions ---------- */
.anim [data-r]{opacity:0;transform:translateY(16px)}
.anim [data-r].in{opacity:1;transform:none;transition:opacity 420ms var(--e) calc(var(--i,0) * 60ms),transform 420ms var(--e) calc(var(--i,0) * 60ms)}
.anim .ln>span{transform:translateY(106%)}
.anim .ln.in>span{transform:none;transition:transform 520ms var(--e) calc(var(--i,0) * 70ms)}
.anim .hero [data-h]{opacity:0;transform:translateY(16px)}
.anim .hero .ln[data-h]{opacity:1;transform:none}
.anim.ready .hero [data-h]{opacity:1;transform:none;transition:opacity 520ms var(--e) calc(var(--h) * 70ms),transform 520ms var(--e) calc(var(--h) * 70ms)}
.anim.ready .hero .ln>span{transform:none;transition:transform 560ms var(--e) calc(var(--h) * 80ms)}

/* ---------- 5.2 héros ---------- */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);min-height:calc(100svh - var(--nav));max-height:1000px;border-bottom:1px solid var(--line)}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:40px 40px 40px max(var(--gut),calc((100vw - var(--max)) / 2))}
.hero-kick{margin-bottom:26px}
.hero-kick .nw{white-space:nowrap}
.k-short{display:none}
.h1{font-size:clamp(56px,6.2vw,112px)}
/* 13/10 : le mot le plus long du rotateur (« jumeau 3D. ») doit tenir dans la colonne : la taille suit aussi la largeur de la colonne. */
@media (min-width:960px){.hero-copy{container-type:inline-size}.hero .h1{font-size:min(clamp(56px,6.2vw,112px),15.4cqi)}}
.h1 .ln>span{white-space:nowrap}
.h1 .rot{display:inline-block;transition:opacity .28s var(--e),transform .36s var(--e);will-change:transform}
.h1 .rot.out{opacity:0;transform:translateY(-.22em)}
.h1 .rot.pre{opacity:0;transform:translateY(.22em);transition:none}
.rotator{margin-top:22px;min-height:2.7em;max-width:24em;font:500 22px/1.35 var(--sans);letter-spacing:-.015em;color:var(--ink-2)}
.rotator span{display:inline-block;transition:opacity .28s var(--e),transform .36s var(--e)}
.rotator span.out{opacity:0;transform:translateY(-8px)}
.h1 .h1-2{font-size:.8em}
.rotator .rot-w{display:block;margin-bottom:6px;font:500 13px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.rotator span.pre{opacity:0;transform:translateY(8px);transition:none}
.hero-skills{display:none}
.lead{margin-top:10px;max-width:44ch;font-size:17px;line-height:1.55;color:var(--ink-2)}
.lead strong{color:var(--ink);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero-call{display:none}
.reassure{margin-top:16px;font:400 11.5px/1.5 var(--mono);letter-spacing:.04em;color:var(--ink-2)}
.figures{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;align-items:end;gap:16px;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);max-width:600px}
.figures div{display:flex;flex-direction:column;gap:8px}
.figures dd{font-size:44px;line-height:.9;color:var(--ink);white-space:nowrap}
.figures dd small{margin-left:3px;font:500 13px var(--sans);color:var(--ink-2);letter-spacing:0}
.figures dt{font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.hero-stage{position:relative;margin:0;overflow:hidden;min-height:540px;touch-action:pan-y}
.hero-stage canvas{position:absolute;inset:0;display:block}
.hero-stage>.iso{position:absolute;inset:6% 4% 8%;width:92%;height:86%}
.hero-stage .fig{position:absolute;left:24px;bottom:20px;z-index:3}
.h3d-tags{position:absolute;inset:0;pointer-events:none;z-index:2}
.h3d-tag{position:absolute;left:0;top:0;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;will-change:transform;color:var(--ink-2)}
.h3d-tag.hot{background:var(--ink);color:#fff;padding:5px 8px;transition:opacity .3s}
.h3d-tag.card{display:grid;gap:3px;padding:9px 12px 10px;background:var(--card);border:1px solid var(--line);color:var(--ink-2);letter-spacing:.08em;transition:opacity .3s}
.h3d-tag.card b{font:600 18px/1.1 var(--sans);letter-spacing:-.015em;text-transform:none;color:var(--ink)}

@media (min-width:960px) and (max-width:1380px){
  .hero-copy{padding-right:32px}
  .hero-cta .btn{padding:0 18px}
  .hero-cta{gap:8px}
}
@media (min-width:960px) and (max-height:820px){
  .hero-kick{margin-bottom:18px}
  .h1{font-size:clamp(50px,5.4vw,84px)}
  .hero .h1{font-size:min(clamp(50px,5.4vw,84px),15.4cqi)}
  .rotator{margin-top:14px;font-size:19px}
  .lead{margin-top:6px;font-size:16px}
  .hero-cta{margin-top:20px}
  .btn{min-height:48px}
  .figures{margin-top:22px;padding-top:14px}
  .figures dd{font-size:36px}
}
@media (max-width:959px){
  .hero{display:flex;flex-direction:column;min-height:0;max-height:none;padding:14px var(--gut) 40px}
  .hero-copy{display:contents}
  .hero-copy>*{order:20}
  .hero-kick{order:1;margin-bottom:14px;font-size:11px;letter-spacing:.06em}
  .k-long{display:none}.k-short{display:inline}
  .h1{order:2;font-size:clamp(42px,12.6vw,62px)}
  .rotator{order:4;margin-top:12px;font-size:clamp(17px,4.7vw,21px);min-height:2.7em}
  .hero-skills{order:5;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font:500 13px/1.3 var(--mono);letter-spacing:0;color:var(--ink)}
  .hero-skills li{display:flex;gap:8px}
  .hero-skills li::before{content:"";flex:none;width:8px;height:1px;margin-top:.62em;background:var(--ink-2)}
  .hero-cta{order:6;margin-top:16px}
  .hero-cta .btn{width:100%}
  .hero-cta .btn-line{display:none}
  .hero-call{order:6;display:block;text-align:center;margin-top:2px}
  .hero-call a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font:500 15px var(--sans);color:var(--ink);border-bottom:1px solid var(--line)}
  /* 13/10 : ~28 px gagnés au-dessus de la maquette : sur un iPhone 13 elle tient au-dessus de la barre du bas (dock) */
  /* 14/10 : la 3D du héros tourne aussi sur téléphone → scène haute ; le repli dessiné (.is-svg) garde 120 px */
  .hero-stage{order:3;margin:10px calc(var(--gut) * -1) 0;min-height:0;height:min(58vw,300px);padding:0}
  .hero-stage .h3d-tag.up,.hero-stage .h3d-tag.card{display:none}
  .hero-stage.is-svg{order:7;margin-top:6px;height:120px;padding:0 var(--gut);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .hero-stage>.iso{position:static;display:block;width:100%;height:118px;margin:0 auto}
  .hero-stage .fig{display:none}
  .lead{order:8;margin-top:24px;font-size:16.5px}
  .reassure{order:9;margin-top:12px;font-size:12px}
  .figures{order:10;grid-template-columns:1fr 1fr;gap:20px 16px;margin-top:24px;max-width:none}
  .figures dd{font-size:40px}
}

/* ---------- blocs nuit ---------- */
/* Profondeur sans lueur : une grille iso filaire (--nline à ~30 %) en fond, en parallaxe lente sur ordinateur. */
.night{background:var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='36.95'%3E%3Cpath d='M0 0L64 36.95M0 36.95L64 0' stroke='%231e2433' stroke-width='1' fill='none'/%3E%3C/svg%3E") 50% calc(var(--py,0) * 1px)/64px 36.95px;color:var(--ntext)}
.n-p{max-width:52ch;margin-top:26px;font-size:18px;line-height:1.6;color:var(--nmute)}
.n-list{margin-top:24px;border-top:1px solid var(--nline);max-width:520px}
.n-list li{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--nline);font-size:16px;color:var(--ntext)}
.n-list li::before{content:"";flex:none;width:12px;height:1px;margin-top:.8em;background:#b9c8ff}

/* ---------- 5.3 mur des 17 ---------- */
.wall{padding:72px 0 64px;border-bottom:1px solid var(--nline);overflow:hidden;background:var(--night)}
.wall-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:36px}
.wall-t{font:600 clamp(24px,2.4vw,34px)/1.1 var(--sans);letter-spacing:-.025em}
.wall-n{font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--nmute)}
.wall-n b{font-size:40px;margin-right:6px;color:var(--ntext);vertical-align:-6px}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);touch-action:pan-y}
.marquee+.marquee{margin-top:30px}
.mq-track{display:flex;width:max-content;will-change:transform}
.anim .mq-track{animation:mq var(--dur,40s) linear infinite}
.anim .mq-rev .mq-track{animation-direction:reverse}
@keyframes mq{to{transform:translate3d(var(--shift,-50%),0,0)}}
.lg{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:0 44px 0 0;margin-right:44px;border-right:1px solid var(--nline);min-width:128px}
.lg-im{display:flex;align-items:center;height:48px}
.lg-im img{height:calc(var(--h,1) * 40px);width:auto;max-width:180px;object-fit:contain;filter:grayscale(.6) brightness(1.15);opacity:.95}
.lg-im img.f-inv{filter:invert(1) grayscale(1) brightness(1.1)}
.lg-im img.f-mono{filter:brightness(0) invert(1);opacity:.88}
.lg-im img.f-scr{mix-blend-mode:screen;filter:grayscale(.6) brightness(1.1)}
.lg-im .cut{display:block;overflow:hidden;height:40px}
.lg-im .cut img{max-width:none;height:40px;margin-left:calc(var(--cut) * -40px)}
.lg-wm{font:600 22px/1 var(--sans);letter-spacing:-.03em;color:var(--ntext);opacity:.9}
.lg-tx{display:grid;gap:3px;white-space:nowrap}
.lg-tx b{font:500 14px/1.2 var(--sans);letter-spacing:-.005em;color:var(--ntext)}
.lg-tx span{font:400 11px/1.3 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--nmute)}
@media (max-width:959px){
  .wall{padding:56px 0 52px}
  .wall-head{margin-bottom:26px}
  .lg{padding-right:28px;margin-right:28px;gap:10px}
  .lg-im{height:42px}
  .lg-im img{height:calc(var(--h,1) * 34px);max-width:140px}
  .lg-im .cut{height:34px}.lg-im .cut img{height:34px;margin-left:calc(var(--cut) * -34px)}
  .lg-wm{font-size:18px}
  .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent)}
  .marquee+.marquee{margin-top:22px}
}
@media (prefers-reduced-motion:reduce){.mq-track{flex-wrap:wrap;width:auto;row-gap:24px;padding:0 var(--gut)}.mq-track [aria-hidden]{display:none}}

/* ---------- 5.4 douleurs ---------- */
.pain{position:relative;border-bottom:1px solid var(--nline)}
.pain-stage{padding:88px 0}
.pain-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 64px;align-items:center}
.pain-in .kick{grid-column:1/-1;margin:0}
.pain .hn{font-size:clamp(44px,4.8vw,84px)}
.pain-list{position:relative;border-top:1px solid var(--nline);--p:0}
/* rail de progression à gauche de la liste */
.pain-list::before{content:"";position:absolute;left:-22px;top:0;width:2px;height:100%;background:var(--ice);transform:scaleY(var(--p));transform-origin:top;opacity:.85}
.pain-list li{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:18px 0;border-bottom:1px solid var(--nline);--s:0;--o:0;
  opacity:calc(.22 + var(--s) * .78);transform:translateY(calc((1 - var(--s)) * 18px))}
/* le trait cobalt qui traverse la ligne quand « Après » arrive */
.pain-list li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ice);transform:scaleX(var(--o));transform-origin:left}
.pb{font-size:18px;line-height:1.45;color:var(--ntext);transform:translateX(calc((1 - var(--s)) * -14px))}
.st{color:color-mix(in srgb,var(--ntext) calc(100% - var(--o) * 38%),var(--nmute))}
/* « Avant » / « Après » */
.pk{display:block;margin-bottom:5px;font:500 10.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--nmute)}
.pa .pk{color:var(--ice)}
.pa{position:relative;padding-left:20px;font-size:18px;font-weight:600;line-height:1.45;color:var(--ntext);opacity:var(--o);clip-path:inset(0 calc((1 - var(--o)) * 100%) 0 0);transform:translateX(calc((1 - var(--o)) * 22px))}
.pa::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:2px;background:var(--ice);transform:scaleY(var(--o));transform-origin:top}
.pain-count{grid-column:2;margin-top:14px;font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--nmute)}
.pain-count b{display:inline-block;min-width:1.2ch;font:600 30px/1 var(--mono);color:var(--ice);vertical-align:-6px;margin-right:4px}
.pin .pain{height:calc(100svh + min(80svh,720px))}
.pin .pain-stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding:calc(var(--nav) + 24px) 0 32px}
.pin .pain-stage>.wrap{width:100%}
@media (max-width:959px){
  .pain-stage{padding:56px 0 48px}
  .pain-in{grid-template-columns:1fr;gap:20px}
  .pain .hn{font-size:clamp(38px,10.4vw,56px)}
  .pain-list{margin-top:16px;margin-left:14px}
  .pain-list::before{left:-14px}
  .pain-list li{grid-template-columns:1fr;gap:10px;padding:15px 0}
  .pb,.pa{font-size:16px}
  .pain-count{grid-column:1;margin-top:6px}
}
@media (min-width:720px) and (max-width:959px){
  .pain-list li{grid-template-columns:1fr 1fr;gap:24px}
}
@media (prefers-reduced-motion:reduce){.pain-list li{--s:1;--o:1}.pain-list{--p:1}}
html:not(.anim) .pain-list{--p:1}
html:not(.anim) .pain-list li{--s:1;--o:1}

/* ---------- 5.5 les 5 projets ---------- */
.cases{padding-top:88px}
.cases-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 64px;align-items:end;margin-bottom:0}
.cases-head .kick{grid-column:1/-1;margin:0}
.cases-sub{max-width:42ch;font-size:18px;line-height:1.55;color:var(--nmute)}
.head-in .cases{padding-top:0}
.head-in .cases-head{display:block;padding:0;margin:0 0 30px;max-width:none}
.head-in .cases-head .kick{margin-bottom:14px}
.head-in .cases-head .hn{font-size:clamp(40px,3.5vw,62px)}
.head-in .cases-head .cases-sub{margin-top:12px;font-size:16px}
.head-in .cases-head+.c-kick{padding-top:22px;border-top:1px solid var(--nline)}
.story{position:relative;--step:55svh}
.story-stage{position:relative}
.track{display:flex;flex-direction:column}
.case{position:relative}
.case-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;align-items:center;max-width:min(88vw,var(--max));margin:0 auto;padding:64px 0}
.cc{grid-column:1/span 5;min-width:0}
.cs{grid-column:6/span 7;min-width:0;margin:0;display:flex;justify-content:center}
.cs svg{width:100%;height:auto;max-height:62svh;overflow:visible}
.c-kick{display:flex;align-items:baseline;gap:14px;font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--nmute)}
.c-kick b{font:600 15px var(--cond);letter-spacing:.08em;color:var(--ntext)}
.c-kick small{font-size:inherit;color:var(--nmute)}
.c-name{margin-top:16px;font:700 clamp(46px,5vw,86px)/.9 var(--cond);text-transform:uppercase;letter-spacing:-.005em;color:var(--ntext);text-wrap:balance}
.c-line{margin-top:20px;max-width:38ch;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:var(--ntext)}
.c-facts{margin-top:22px;border-top:1px solid var(--nline);max-width:520px}
.c-facts li{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--nline);font-size:16px;line-height:1.45;color:var(--nmute)}
.c-facts li::before{content:"";flex:none;width:12px;height:1px;margin-top:.75em;background:#b9c8ff}
.c-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-top:18px}
.c-logo{height:34px;width:auto;max-width:120px;object-fit:contain;filter:brightness(0) invert(1);opacity:.8}
.c-status{display:inline-flex;align-items:center;gap:8px;font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--nmute)}
.c-status::before{content:"";width:14px;height:1px;background:var(--nmute)}
.c-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;font-size:16px;color:var(--ntext);border-bottom:1px solid transparent;transition:border-color .2s}
.c-link:hover{border-color:#b9c8ff}
.rail{display:none}
.cases-end{display:flex;justify-content:center;padding:8px var(--gut) 72px}
.more-link{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-weight:600;color:var(--ntext);border-bottom:1px solid var(--nline);transition:border-color .2s}
.more-link:hover{border-color:#b9c8ff}

/* scènes : tout est piloté par --p (0 → 1) */
.cs{--p:1}
.js .cs{--p:0}
.cs [style*="--a"]{--t:clamp(0,calc((var(--p) - var(--a)) / (var(--b) - var(--a))),1)}
.cs svg *{vector-effect:non-scaling-stroke}
.cs .gh{fill:none;stroke:rgba(201,212,245,.18);stroke-width:1;opacity:min(1,calc(var(--p) * 8))}
.cs .gh2{fill:none;stroke:rgba(201,212,245,.34);stroke-width:1.1;opacity:min(1,calc(var(--p) * 8))}
.cs .dash{stroke-dasharray:2 6}
.cs .slab{stroke:rgba(201,212,245,.1)}
.cs .ink,.cs .ice{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.cs .ink{stroke:var(--stroke)}
.cs .ice{stroke:url(#v8-ice);stroke-width:2}
.cs .w2{stroke-width:2.4}
.cs .d{stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--t));opacity:min(1,calc(var(--t) * 30))}
.cs .f{opacity:var(--t)}
.cs .fs{fill:#c9d4f5;fill-opacity:.08;stroke:none}
.cs .fa{fill:#b9c8ff;fill-opacity:.28;stroke:none}
.cs .solid{fill-opacity:.9}
.cs .area{fill:url(#v8-area);stroke:none}
.cs .hatch{fill:url(#v8-hatch);stroke:none}
.cs .hatchb{fill:url(#v8-hatchb);stroke:none}
.cs .fut{stroke:none}
.cs .fut.t1{fill:#eef2ff;fill-opacity:.22}.cs .fut.t2{fill:#b9c8ff;fill-opacity:.3}.cs .fut.t3{fill:#7d97ff;fill-opacity:.42}.cs .fut.t4{fill:#5f7df5;fill-opacity:.55}
.cs .w{transform-box:fill-box;transform-origin:left center;transform:scaleX(var(--t));opacity:min(1,calc(var(--t) * 20))}
.cs .s{transform-box:fill-box;transform-origin:center;transform:scale(calc(.4 + var(--t) * .6));opacity:var(--t)}
.cs .b{transform-box:fill-box;transform-origin:center;transform:scaleY(max(.08,var(--t)));opacity:var(--t)}
.cs .dr{opacity:var(--t);transform:translateY(calc((1 - var(--t)) * -22px))}
.cs .sc{transform:translateY(calc(var(--t) * 340px));opacity:min(1,calc(var(--t) * 8),calc((1 - var(--t)) * 8))}
.cs .scanl{fill:#b9c8ff}
.cs .mv{transform:translate(calc(var(--t) * var(--dx)),calc(var(--t) * var(--dy)));opacity:min(1,calc(var(--t) * 8),calc((1 - var(--t)) * 5))}
.cs .live{fill:var(--signal)}
.cs .card{fill:var(--night-2);stroke:rgba(201,212,245,.26)}
.cs .bg{fill:var(--night)}
.cs .pin{fill:#7d97ff}
.cs .stamp rect{fill:none;stroke:url(#v8-ice);stroke-width:2}
.cs .stamp text{font:600 17px var(--mono);letter-spacing:.14em;text-anchor:middle;fill:#b9c8ff}
.cs .tx{font:500 13px var(--mono);letter-spacing:.1em;fill:var(--nmute)}
.cs .tx.mute{fill:#8a93a6}
.cs .tx.mid{text-anchor:middle}
.cs .tx.sm{font-size:11.5px;letter-spacing:.06em}
.cs .tx.vert{transform-box:fill-box;transform-origin:center;transform:rotate(90deg)}
.cs .big{font:700 132px/1 var(--cond);fill:url(#v8-ice-big);font-variant-numeric:tabular-nums}

/* mode horizontal (piloté par le scroll vertical) : ordinateur et téléphone */
.hz .story{height:calc(100svh + 4 * var(--step))}
.hz .story-stage{position:sticky;top:0;height:100svh;overflow:hidden;touch-action:pan-y}
.hz .track{flex-direction:row;width:calc(var(--n) * 100%);height:100%;will-change:transform}
.hz .case{flex:none;width:calc(100% / var(--n));height:100%;display:flex;align-items:center}
.hz .case .cc{opacity:var(--to,1);transform:translate3d(var(--dx,0),0,0)}
.hz .case .cs{opacity:var(--so,1)}
.hz .case-in{width:100%;padding:calc(var(--nav) + 28px) 0 96px}
.hz .rail{position:absolute;left:0;right:0;bottom:18px;z-index:3;display:flex;gap:24px;max-width:min(88vw,var(--max));margin:0 auto}
.rail li{flex:1;min-width:0}
.rail a{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 10px;min-height:44px;padding-block:8px;color:#8a93a6;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;transition:color .3s}
.rail a:hover,.rail a.on{color:var(--ntext)}
.rail b{font:600 14px var(--cond);letter-spacing:.08em}
.rail span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail i{grid-column:1/-1;position:relative;display:block;height:1px;background:var(--nline);overflow:hidden}
.rail s{position:absolute;inset:0;background:var(--ice);transform:scaleX(var(--r,0));transform-origin:left}
.anim.hz .case .cc>*{transform:translateY(14px);transition:transform .3s var(--e)}
.anim.hz .case.on .cc>*{transform:none;transition:transform 520ms var(--e) calc(var(--j) * 60ms + 40ms)}
.anim .case .c-name>span{display:block;transform:translateY(0)}
@media (min-width:960px){.hz .story{height:calc(100svh + 4 * min(55svh,520px))}}
@media (max-height:820px) and (min-width:960px){
  .c-name{font-size:clamp(44px,4.4vw,70px)}
  .c-line{margin-top:14px;font-size:17px}
  .c-facts{margin-top:16px}.c-facts li{padding:8px 0}
  .head-in .cases-head{margin-bottom:18px}.head-in .cases-head .hn{font-size:clamp(36px,3vw,50px)}
  .head-in .case:first-child .c-facts li:nth-child(3){display:none}
}
@media (min-width:1600px){.cs svg{max-height:calc(100svh - 220px)}}
@media (max-width:959px){
  .cases{padding-top:56px}
  .cases-head{grid-template-columns:1fr;gap:14px;margin-bottom:4px}
  .cases-sub{font-size:16px}
  .case-in{grid-template-columns:1fr;max-width:none;padding:40px var(--gut);gap:12px}
  .cc,.cs{grid-column:1}
  .cs{order:-1}
  .cs svg{max-height:26svh;width:auto;max-width:100%}
  .cs .tx{font-size:16px;letter-spacing:.05em}.cs .tx.sm{font-size:13.5px;letter-spacing:.02em}
  .cs .stamp text{font-size:18px}
  .c-kick{gap:10px;font-size:11px}
  .c-name{margin-top:8px;font-size:clamp(30px,8.4vw,40px)}
  .c-line{margin-top:8px;font-size:16px;line-height:1.45}
  .c-facts{margin-top:10px}
  .c-facts li{padding:6px 0;font-size:16px;line-height:1.38}
  .c-foot{margin-top:6px;gap:0 16px}
  .c-logo{height:26px}
  .hz .story{--step:60svh}
  .hz .story-stage{height:calc(100svh - var(--dock))}
  .hz .case-in{padding:calc(var(--nav) + 52px) var(--gut) 8px;align-content:start}
  .hz .case{align-items:flex-start}
  .hz .rail{top:calc(var(--nav) + 4px);bottom:auto;gap:8px;max-width:none;padding:0 var(--gut)}
  .hz .rail a{grid-template-columns:auto;min-height:44px;padding-block:8px}
  .hz .rail span{display:none}
  .cases-end{padding:0 var(--gut) 36px}
}
@media (max-width:959px) and (max-height:800px){.c-facts li:nth-child(3){display:none}.cs svg{max-height:24svh}}

/* ---------- 5.6 les 17 projets ---------- */
.list{padding:80px 0 72px}
.filters{display:flex;flex-wrap:wrap;gap:4px 26px}
.filters button{min-height:44px;font:500 15px var(--sans);color:var(--ink-2);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.filters button span{font:500 12px var(--mono);margin-left:4px;color:var(--ink-2)}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{color:var(--ink);border-color:var(--acc)}
.plist{display:grid;grid-template-columns:1fr 1fr;column-gap:56px}
@media (min-width:1200px){.plist{grid-template-columns:repeat(3,1fr);column-gap:44px}.pl:nth-last-child(-n+3){border-bottom:1px solid var(--line)}}
.pl{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:2px 14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line)}
.pl:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
.pl>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-width:0}
.pl-line,.pl-tags{grid-column:2/-1}
.pl-go{grid-column:3;grid-row:1}
.pl::before{content:"";position:absolute;left:-16px;top:16px;bottom:16px;width:2px;background:var(--acc);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--e)}
.pl:hover::before{transform:none}
.pl-n{font:500 12px var(--mono);color:var(--ink-2)}
.pl-name{font:600 19px/1.25 var(--sans);letter-spacing:-.02em}
.pl-sec{display:block;font:400 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.pl-line{margin-top:4px;font-size:16px;line-height:1.45;color:var(--ink-2)}
.pl-tags{font:400 12px/1.5 var(--mono);color:var(--ink-2)}
.pl-go{justify-self:end;font-weight:600;font-size:14.5px;white-space:nowrap}
.pl-go a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--ink);transition:color .2s}
.pl-go a:hover{color:var(--acc)}
.pl-go .told{color:var(--ink-2)}
.plist-more{display:flex;align-items:center;gap:8px;margin:24px auto 0;min-height:48px;font-weight:600;border-bottom:1px solid var(--ink)}
@media (max-width:959px){
  .list{padding:60px 0 48px}
  .sec-head{margin-bottom:24px}
  .filters{gap:0 18px}
  .plist{grid-template-columns:1fr}
  .pl{grid-template-columns:30px 1fr auto;gap:2px 8px;padding:14px 0}
  .pl:nth-last-child(-n+2){border-bottom:0}
  .plist .pl:last-child,.plist.short .pl:nth-child(4){border-bottom:1px solid var(--line)}
  .pl::before{left:-12px}
  .pl>div{grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
  .pl-name{font-size:18px}
  .pl-line{grid-column:2/-1;font-size:16px}
  .pl-tags{display:none}
  .pl-go{grid-column:3;grid-row:1;justify-self:end;font-size:14px}
  .plist.short .pl.extra{display:none}
}
@media (min-width:720px) and (max-width:959px){
  .plist{grid-template-columns:1fr 1fr;column-gap:32px}
  .plist.short .pl.extra{display:grid}.plist.short .pl.extra2{display:none}
  .plist.short .pl:nth-child(4){border-bottom:0}.plist.short .pl:nth-child(5),.plist.short .pl:nth-child(6){border-bottom:1px solid var(--line)}
}

/* ---------- 5.7 jumeau numérique ---------- */
.twin{padding:88px 0 64px;background:linear-gradient(180deg,var(--mist),var(--paper))}
.twin-head{margin-bottom:32px}
.tabs{display:flex;flex-wrap:wrap;gap:0 30px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.tabs button{min-height:48px;margin-bottom:-1px;font:600 17px var(--sans);letter-spacing:-.01em;color:var(--ink-2);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.tabs button span{font-weight:400;color:var(--ink-2)}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--acc)}
.twin-panel{position:relative;height:clamp(480px,64svh,640px);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.twin-panel oskale-chai,.twin-panel oskale-ferme{display:block;height:100%}
.twin-panel.is-video{height:auto!important;aspect-ratio:4/5;max-width:560px;margin-inline:auto;background:var(--paper)}
.twin-vid{display:block;width:100%;height:100%;object-fit:cover}
.twin-frame{display:block;width:100%;height:100%;border:0;background:var(--paper)}
.has-video .tw-guide,.has-video .twin-legend,.twin-panel.is-video .tw-hint{display:none!important}
.twin-duo{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1120px;margin-inline:auto}
.twin-duo .twin-panel{height:auto!important;aspect-ratio:4/5;max-width:none;margin:0}
.twin-cap{margin-top:12px;font:500 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.twin-cap span{color:var(--ink-2)}
.twin-3d{position:absolute;right:10px;top:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;background:var(--ink);color:#fff;font:500 12.5px/1 var(--sans)}
oskale-chai:focus{outline:none}
oskale-chai:focus-visible,oskale-ferme:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
.twin-static{display:flex;flex-direction:column;justify-content:center;height:100%;padding:20px var(--gut)}
.twin-static .iso{width:100%;max-height:52svh;margin:0 auto}
.twin-static p{margin-top:12px;text-align:center;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.twin-legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:16px;font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.tl-k{color:var(--ink)}
.twin-legend .sw{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.twin-legend .sw i{flex:none;width:14px;height:10px;border:1px solid rgba(43,48,59,.18)}
.ferme-img{width:100%;height:auto;max-height:58svh;object-fit:contain}
.tl-live{display:inline-flex;align-items:center;gap:8px}
.tl-live i{width:7px;height:7px;border-radius:50%;background:var(--signal)}
.anim .tl-live i{animation:pulse 1.6s var(--e) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(240,160,60,.5)}100%{box-shadow:0 0 0 8px rgba(240,160,60,0)}}
.tl-note{margin-left:auto;color:var(--ink-2)}
@media (max-width:959px){
  .twin{padding:60px 0 44px}
  .twin-head{margin-bottom:20px}
  .twin-panel{height:min(118vw,500px)} /* 14/10 : chai et ferme en 3D sur téléphone */
  .twin-panel:has(.twin-static){height:auto}
  .twin-static{padding:12px var(--gut) 10px}
  .twin-static .iso{max-height:34svh}
  .tabs button{font-size:16px}
  .tabs button span{display:none}
  .twin-legend{gap:8px 14px;font-size:11.5px}
  .twin-legend .tl-k{flex-basis:100%}
  .tl-note{margin-left:0}
  /* 19/10 · onglets en commutateur pleine largeur ; la 3D et ses écrans guidés forment un seul cadre ; plus de légende dessous */
  .tabs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:12px;padding:3px;border:1px solid var(--line);border-radius:999px}
  .tabs button{min-height:42px;margin:0;border:0;border-radius:999px}
  .tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
  .twin-panel:has(oskale-chai),.twin-panel:has(oskale-ferme){height:min(104vw,430px);border-radius:3px 3px 0 0}
  html:has(.tw-guide) .twin-legend{display:none}
}
.tw-guide{display:none}
@media (max-width:959px){
  .tw-guide{display:block;border:1px solid var(--line);border-top:0;border-radius:0 0 3px 3px;background:var(--paper-2)}
  .tw-guide[hidden]{display:none}
  .tg-row{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px;scrollbar-width:none;overscroll-behavior-x:contain}
  .tg-row::-webkit-scrollbar{display:none}
  .tg-c{flex:none;width:min(66vw,250px);display:flex;flex-direction:column;gap:4px;padding:11px 12px 12px;text-align:left;scroll-snap-align:start;border:1px solid var(--line);border-radius:3px;background:var(--paper);transition:border-color .2s}
  .tg-c.on{border-color:var(--acc)}
  .tg-k{font:500 10px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
  .tg-c.on .tg-k{color:var(--acc)}
  .tg-c b{font:600 16px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
  .tg-p{font-size:13.5px;line-height:1.4;color:var(--ink-2)}
  .tg-sw{display:flex;gap:3px;margin-top:8px}
  .tg-sw i{flex:1;height:8px;border:1px solid rgba(43,48,59,.15)}
  .tg-go{background:var(--ink);border-color:var(--ink)}
  .tg-go b{color:var(--paper)}
  .tg-go .tg-k,.tg-go .tg-p{color:color-mix(in srgb,var(--paper) 70%,transparent)}
}

/* ---------- 5.8 la chaîne ---------- */
.chain{border-top:1px solid var(--line)}
.chain-stage{padding:96px 0 72px}
.chain-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 56px;align-items:center}
.chain .h2{max-width:13ch}
.chain-copy .sec-p{margin-top:16px;font-size:17px}
.steps{margin-top:22px;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:4px 14px;padding:11px 0;border-bottom:1px solid var(--line);transition:opacity .35s var(--e)}
.st-n{font:500 12px/1.9 var(--mono);color:var(--ink-2);transition:color .3s}
.st-ic{display:none}
.steps b{font:600 18px/1.3 var(--sans);letter-spacing:-.015em}
.steps p{margin-top:2px;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.steps li.on .st-n{color:var(--acc)}
.chain-scene{position:relative;height:min(72svh,680px);margin:0}
.chain-scene canvas{position:absolute;inset:0}
.chain-scene .fig{position:absolute;left:0;bottom:0}
.chain-scene .stations{display:grid;grid-template-columns:1fr 1fr;gap:24px;height:100%;align-content:center}
.chain-scene .stations .iso{max-height:180px;margin:auto}
.pin .chain-story{height:calc(100svh + min(24svh,220px))}
.pin .chain-stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding:calc(var(--nav) + 12px) 0 20px}
.pin .chain-stage>.wrap{width:100%}
.pin .steps li{opacity:.42}
.pin .steps li.on,.pin .steps li.past{opacity:1}
/* « Là où un jumeau change tout » : fondu dans la chaîne, sur une ligne */
.uses{margin-top:18px}
.uses .kick{margin:0 0 6px}
/* 13/10 : 8 secteurs en deux colonnes (plus de liste en ligne à points, illisible au-delà de 4) */
.uses ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 20px;font:600 14.5px/1.45 var(--sans);letter-spacing:-.01em}
.uses li{display:flex;gap:8px;min-width:0}
.uses li::before{content:"";flex:none;width:8px;height:1px;margin-top:.72em;background:var(--ink-2)}
.uses li span{display:none}
.uses .text-link{margin-top:2px;min-height:44px;padding-top:10px;font-size:16px}
@media (min-width:960px) and (max-height:860px){.chain-copy .sec-p{display:none}.steps{margin-top:16px}.steps p{font-size:15px}}
/* 13/10 : 8 secteurs au lieu de 4 → écrans bas : étapes et secteurs resserrés pour que la colonne tienne dans l'écran épinglé */
@media (min-width:960px) and (max-height:940px){.steps li{padding:8px 0}.steps p{line-height:1.38}.uses{margin-top:12px}.uses ul{gap:0 18px;font-size:14px;line-height:1.4}.uses .text-link{min-height:36px;padding-top:6px}}
@media (min-width:960px) and (max-height:780px){.chain-copy .h2-s{font-size:clamp(36px,3.4vw,52px)}.steps p{font-size:14px}.steps li{padding:6px 0}}
/* 19/10 · téléphone : la chaîne en frise verticale (voir « 19/10 (2) » en fin de fichier), sans la liste des secteurs */
@media (max-width:959px){
  .chain-stage{padding:48px 0 40px}
  .chain-in{grid-template-columns:1fr}
  .chain-scene{display:none}
  .chain-copy .sec-p{margin-top:12px;font-size:16px}
  .uses{margin-top:8px}
  .uses .kick,.uses ul{display:none}
}

/* ---------- dessins isométriques (papier) ---------- */
.iso{overflow:visible}
.iso polygon,.iso path,.iso polyline,.iso ellipse{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.iso .k-s .ft{fill:var(--ft)}.iso .k-s .fl{fill:var(--fl)}.iso .k-s .fr{fill:var(--fr)}
.iso .k-s polygon,.iso .k-p polygon{stroke:var(--edge);stroke-width:.9;transition:stroke .4s var(--e),fill .4s var(--e)}
.iso .k-p .ft{fill:var(--pt)}.iso .k-p .fl{fill:var(--pl)}.iso .k-p .fr{fill:var(--pr)}
.iso .k-g polygon{fill:rgba(255,255,255,.2);stroke:var(--edge);stroke-width:.8}
.iso .k-g .ft{fill:rgba(255,255,255,.08)}
.iso .hid{fill:none;stroke:var(--edge);stroke-width:.6;stroke-dasharray:2 3;opacity:.5}
.iso .gf{fill:rgba(255,255,255,.22);stroke:var(--edge);stroke-width:.8}
.iso .gl{fill:none;stroke:var(--edge);stroke-width:.8}
.iso .wl{fill:none;stroke:var(--edge);stroke-width:.8;stroke-dasharray:3 3;opacity:.7}
.iso .sh{fill:var(--shadow)}
.iso .dl{fill:none;stroke:var(--acc);stroke-width:1;stroke-dasharray:4 4;opacity:.55}
.iso .fd,.iso .live{fill:var(--signal)}
.iso .gr{fill:none;stroke:var(--edge);stroke-width:.7;opacity:.45}
.iso .tape{fill:none;stroke:#b9ae97;stroke-width:2.2}
.iso .ant{fill:none;stroke:var(--edge);stroke-width:1}
.iso .led{fill:var(--edge);opacity:.35}
.iso .scr{fill:#1b2130;stroke:var(--edge);stroke-width:.6}
.iso .chart{fill:none;stroke:#c9d4f5;stroke-width:1.5}
.iso .bar{fill:#5a6272}
.iso .mk path{fill:var(--ink)}
.iso .ring{fill:none;stroke:var(--edge);stroke-width:.8;opacity:0}
.anim .iso .ring{transform-box:fill-box;transform-origin:center;animation:ring 2.8s ease-out infinite}
.anim .iso .ring.r2{animation-delay:1.4s}
@keyframes ring{from{transform:scale(.6);opacity:.7}to{transform:scale(2.4);opacity:0}}
.iso .lb{font:500 8.5px var(--mono);letter-spacing:.08em;fill:var(--ink-2);text-transform:uppercase}
.iso .over .lb,.iso .over .tg{paint-order:stroke;stroke:var(--paper);stroke-width:3.5px;stroke-linejoin:round}
.iso .tg{font:500 9px var(--mono);letter-spacing:.08em;fill:var(--ink-2);text-anchor:middle}
.iso .mod{transition:transform .55s var(--e)}
.iso .mod.on{transform:translateY(-10px)}
.iso .mod.on .k-s polygon,.iso .mod.on .k-p polygon{stroke:var(--acc)}
.iso .mod.on .core .ft,.iso .mod.on .k-s.core .ft{fill:var(--acc-soft)}
/* V8.1 · fûts : la couleur porte l'âge, six classes identiques à la 3D (chai.js, AGES) et à la légende */
.iso .fut.a0{--c0:#f1e2bd;--c1:#e3d1a6;--c2:#d3c094}.iso .fut.a1{--c0:#e6c886;--c1:#d6b674;--c2:#c4a463}
.iso .fut.a2{--c0:#d7aa5c;--c1:#c59849;--c2:#b2873c}.iso .fut.a3{--c0:#c08940;--c1:#ac7833;--c2:#986a2b}
.iso .fut.a4{--c0:#a06c32;--c1:#8d5e2a;--c2:#7b5124}.iso .fut.a5{--c0:#7c5228;--c1:#6b4622;--c2:#5c3c1d}
.iso .fut .ft{fill:var(--c0)}.iso .fut .fl{fill:var(--c1)}.iso .fut .fr{fill:var(--c2)}
.iso .cuve .ft{fill:#f4f5f6}

/* ---------- 5.9 expertises ---------- */
.exp{padding:88px 0 0;border-top:1px solid var(--line)}
.exp .h2{max-width:22ch}
.exp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.xp{display:flex;flex-direction:column;gap:12px;padding:22px 26px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.xp-iso{height:92px;display:flex;align-items:center;justify-content:center}
.xp-iso .iso{max-height:100%;width:auto;max-width:100%}
.xp-n{font:500 12px var(--mono);color:var(--ink-2);transition:color .3s}
.xp h3{margin-top:8px;font:600 21px/1.2 var(--sans);letter-spacing:-.02em}
.xp p{margin-top:6px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.xp ul{margin-top:14px;display:grid;gap:6px}
.xp li{display:flex;gap:10px;font-size:15px;line-height:1.4;color:var(--ink)}
.xp li::before{content:"";flex:none;width:10px;height:1px;margin-top:.72em;background:var(--ink-2)}
.xp .mod{transition:transform .45s var(--e)}
.xp:hover .mod,.xp.on .mod{transform:translateY(-6px)}
.xp:hover .k-s polygon,.xp:hover .k-p polygon,.xp.on .k-s polygon,.xp.on .k-p polygon{stroke:var(--acc)}
.xp:hover .xp-n{color:var(--acc)}
@media (max-width:1100px) and (min-width:960px){.exp-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.exp-grid .xp-cta{grid-column:span 2}}
@media (max-width:959px){
  .exp{padding:60px 0 0}
  .exp-grid{grid-template-columns:1fr;border-left:0;border-top:1px solid var(--line)}
  /* une ligne compacte : dessin 64 px | titre + phrase ; les puces sur une ligne mono pleine largeur */
  .xp{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-areas:"d t" "d p" "u u";gap:0 14px;padding:16px 0;border-right:0}
  .xp-iso{grid-area:d;height:64px;width:64px;align-items:flex-start}
  .xp-tx{display:contents}
  .xp-n{display:none}
  .xp h3{grid-area:t;margin:0;font-size:18px;align-self:end}
  .xp p{grid-area:p;margin:2px 0 0;font-size:16px;line-height:1.42}
  .xp ul{grid-area:u;display:block;margin-top:8px;font:400 13px/1.55 var(--mono);color:var(--ink-2)}
  .xp li{display:inline;font:inherit;color:inherit}
  .xp li::before{display:none}
  .xp li:not(:last-child)::after{content:" · "}
  .xp .text-link{grid-area:u;justify-self:start;margin-top:4px}
}

@media (min-width:720px) and (max-width:959px){
  .exp-grid{grid-template-columns:1fr 1fr;column-gap:32px}
}

/* ---------- 5.10 l'ingénieur augmenté ---------- */
.tools{padding:64px 0 88px}
.tools-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;align-items:center}
.tools .sec-p{margin-top:20px}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tool-grid li{display:grid;gap:4px;padding:24px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tool-grid b{font:600 24px/1.1 var(--sans);letter-spacing:-.025em}
.tool-grid span{font:400 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
/* « L'ingénieur augmenté » est fondu dans le bloc Hermès : une ligne d'outils sous la liste */
.tools{display:none}
.h-tools{display:block;max-width:56ch;margin-top:22px;font-size:16px;line-height:1.6;color:var(--nmute)}
.h-tools .kick{display:block;margin-bottom:6px}
.h-tools b{font-weight:600;color:var(--ntext)}

/* ---------- 5.11 manifeste, Hermès, méthode ---------- */
.manifest{padding:96px 0 0}
.hn-xl{font-size:clamp(48px,7.4vw,132px)}
.manifest-p{max-width:52ch;margin-top:24px;font-size:clamp(18px,1.5vw,22px);line-height:1.55;color:var(--nmute)}
.hermes{padding:72px 0;border-bottom:1px solid var(--nline)}
.hermes-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 72px;align-items:center}
.thread{display:grid;gap:12px;font:400 14px/1.55 var(--mono);color:var(--ntext)}
.msg{max-width:86%;padding:14px 16px;border:1px solid var(--nline);background:var(--night-2);border-radius:3px}
.msg-out{justify-self:end;border-left:2px solid #b9c8ff}
.who{display:block;margin-bottom:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--nmute)}
.msg-state{justify-self:end;display:flex;align-items:center;gap:8px;font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--nmute)}
.msg-state i{width:7px;height:7px;border-radius:50%;background:var(--signal)}
.anim .msg-state i{animation:pulse 1.6s var(--e) infinite}
.method{padding:72px 0 88px}
.method-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 72px;align-items:center}
.m-steps{margin:26px 0 30px;border-top:1px solid var(--nline)}
.m-steps li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--nline);transition:opacity .35s}
.m-steps .num{font-size:34px;line-height:.9;color:var(--nmute);transition:color .3s}
.m-steps li.on .num{color:var(--ntext)}
.m-steps h3{font:600 19px/1.3 var(--sans);letter-spacing:-.015em}
.m-steps p{margin-top:4px;font-size:16px;line-height:1.55;color:var(--nmute)}
/* plaques iso : trait plein, la plaque franchie se pose (24 px) et s'allume en --ice */
.method-iso .iso{width:100%;max-height:440px}
.method-iso .wl{stroke:var(--nline);opacity:1}
.method-iso .k-n polygon{fill:var(--night);stroke:var(--stroke);stroke-width:1.5;opacity:.55;transition:stroke .4s,opacity .4s}
.method-iso .k-n .ft{fill:var(--night)}
.method-iso .tg{fill:var(--nmute);text-anchor:start;font-size:10.5px}
.method-iso .over .tg{stroke:none}
.method-iso .plate{transition:transform .7s var(--e),opacity .5s var(--e)}
.anim .method-iso .plate{transform:translateY(-24px);opacity:.4}
.method-iso .plate.on{transform:none;opacity:1}
.method-iso .plate.on polygon{stroke:url(#v8-ice-big);opacity:1}
.method-iso .plate.on .ft{fill:var(--night-2)}
.method-iso .plate.on .tg{fill:var(--ntext)}
@media (max-width:959px){
  .manifest{padding:60px 0 0}
  .manifest-p{margin-top:18px}
  .hermes{padding:48px 0}
  .method{padding:48px 0 56px}
  .thread{font-size:15px}
  .msg{max-width:100%;padding:12px 14px}
  .msg-1,.msg-3,.hermes .n-list{display:none}
  .hermes-in,.method-in{grid-template-columns:1fr;gap:28px}
  .method-iso{display:none}
  .m-steps{margin:22px 0 26px}
  .m-steps li{grid-template-columns:40px 1fr;gap:12px;padding:14px 0}
  .m-steps .num{font-size:28px}
  .m-steps h3{font-size:18px}
}

/* ---------- 5.12 tarifs (V8.4 : 7 offres en 4 + 3, accompagnement en rangée dédiée, aides) ---------- */
.prices{padding:96px 0 88px}
.price-grid,.care-grid{display:grid;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.price-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
.price-grid>.price{grid-column:span 4}
.price-grid>.price:nth-child(-n+4){grid-column:span 3}
.price-grid.is-8>.price{grid-column:span 3}
.care-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.price{position:relative;display:flex;flex-direction:column;min-width:0;padding:28px 24px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.price.is-main{background:var(--acc-soft)}
.price.is-main::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--acc)}
.p-tag{position:absolute;top:-1px;right:-1px;margin:0;padding:6px 10px 5px;background:var(--acc);color:#fff;font:500 10.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.price h3,.price h4{margin:0;font:600 19px/1.25 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.amt{margin-top:18px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 3px;font:700 46px/1 var(--cond);color:var(--ink);white-space:nowrap}
.amt small{width:100%;font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.amt abbr{font:600 15px var(--sans);color:var(--ink-2);text-decoration:none}
.amt small.per{width:auto;margin-left:6px;font:500 15px var(--sans);letter-spacing:0;text-transform:none}
.amt.amt-r{font-size:38px}
.amt-plus{margin-top:8px;font-size:14.5px;line-height:1.35;color:var(--ink-2)}
.amt-plus b{font-weight:600;color:var(--ink)}
.p-ex{margin-top:16px;font-size:15.5px;line-height:1.4;color:var(--ink);text-wrap:pretty}
.price ul{margin:16px 0 18px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:7px}
.price.is-main ul{border-color:#cbd5ff}
.price li{display:flex;gap:10px;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.price li::before{content:"";flex:none;width:10px;height:1px;margin-top:.72em;background:var(--ink-2)}
.p-aid{margin:0 0 14px;padding-left:10px;border-left:2px solid var(--ink);font-size:13.5px;font-weight:500;line-height:1.4;color:var(--ink)}
.p-time{margin-top:auto;display:flex;gap:10px;align-items:baseline;font:500 12.5px/1.3 var(--mono);color:var(--ink)}
.p-time span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.care{margin-top:56px}
.care-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:20px}
.care-head h3{margin:0;font:400 clamp(28px,3vw,36px)/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.care-head p{margin:0;font-size:16px;color:var(--ink-2)}
.care-grid .price{padding-bottom:22px}
.care-grid .price ul{margin-bottom:0}
.price-foot{margin-top:40px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px 56px;align-items:start}
.price-sure{display:grid;gap:12px;padding-top:4px}
.price-sure li{display:flex;gap:12px;font-size:16px;line-height:1.45;color:var(--ink)}
.price-sure li::before{content:"";flex:none;width:14px;height:1px;margin-top:.75em;background:var(--ink)}
.price-sure li:last-child{color:var(--ink-2)}
.aids{padding:24px 24px 20px;border:1px solid var(--line);background:var(--paper-2)}
.aids h3{margin:0;font:600 19px/1.25 var(--sans);letter-spacing:-.015em}
.aids-sub{margin-top:6px;font-size:14.5px;color:var(--ink-2)}
.aids ul{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.aids li{display:flex;flex-direction:column;gap:3px;padding-top:12px;border-top:1px solid var(--line)}
.aids li b{font-size:15px;font-weight:600;line-height:1.3}
.aids li span{font-size:14px;line-height:1.4;color:var(--ink-2)}
.aids-note{margin-top:16px;font:400 12px/1.5 var(--mono);color:var(--ink-2)}
.price-cta{margin-top:36px}
@media (max-width:1180px) and (min-width:960px){
  .price{padding:24px 18px 20px}
  .amt{font-size:40px}
}
@media (max-width:959px){
  .prices{padding:60px 0 52px}
  .price-grid{grid-template-columns:1fr 1fr}
  .price-grid>.price,.price-grid>.price:nth-child(-n+4),.price-grid.is-8>.price{grid-column:auto}
  .price-foot{grid-template-columns:1fr}
}
@media (max-width:719px){
  .price-grid,.care-grid{grid-template-columns:1fr}
  /* une colonne compacte : nom à gauche, prix à droite, puis exemple, puces sur une ligne, délai */
  .price{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0 12px;padding:16px 14px 14px}
  .price>*:not(h3):not(h4):not(.amt){grid-column:1/-1}
  .p-tag{position:static;justify-self:start;margin:0 0 10px}
  .price h3,.price h4{font-size:17px;align-self:end;padding-bottom:3px}
  .amt{margin:0;font-size:32px;justify-content:flex-end;text-align:right}
  .amt small{font-size:10.5px;text-align:right}
  .amt small.per{width:100%;order:-1;margin:0;font:500 10.5px var(--mono);letter-spacing:.06em;text-transform:uppercase}
  .amt-plus{margin-top:4px;text-align:right;font-size:13.5px}
  .p-ex{margin-top:10px;font-size:15px}
  .price ul{display:block;margin:6px 0 10px;padding-top:0;border-top:0;font:400 12.5px/1.6 var(--mono);color:var(--ink-2)}
  .price li{display:inline;font:inherit}
  .price li::before{display:none}
  .price li:not(:last-child)::after{content:" · "}
  .p-aid{margin-bottom:10px;font-size:13px}
  .care{margin-top:40px}
  .care-head h3{font-size:28px}
  .care-head p{font-size:15px}
  .price-foot{margin-top:28px}
  .price-sure li{font-size:15px}
  .aids{padding:18px 16px 16px}
  .aids ul{grid-template-columns:1fr;gap:10px}
  .price-cta .btn{width:100%}
}
@media (max-width:959px){.h2-s{font-size:clamp(36px,10vw,48px)}.rdv .n-list{display:none}}

/* ---------- 5.12 bis (V8.5) : bloc tarifs court de l'accueil, le détail vit sur tarifs.html ---------- */
.prices-s .sec-head{margin-bottom:36px}
.pr-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.pr-row>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:14px;min-width:0;padding:28px 24px 26px;border-left:1px solid var(--line)}
.pr-row>div:first-child{padding-left:0;border-left:0}
.pr-row dd{margin:0;font-size:clamp(52px,5vw,80px);line-height:.9;color:var(--ink);white-space:nowrap}
.pr-row dd small{margin-left:5px;font:500 15px var(--sans);letter-spacing:0;color:var(--ink-2)}
.pr-row dd abbr{text-decoration:none}
.pr-row dt{font:400 11.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.pr-sure{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:20px;font-size:15.5px;line-height:1.4;color:var(--ink)}
.pr-sure span:not(:last-child)::after{content:"·";margin:0 12px;color:var(--ink-2)}
.pr-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
@media (max-width:959px){
  .prices-s .sec-head{margin-bottom:24px}
  .pr-row{grid-template-columns:1fr 1fr}
  .pr-row>div{padding:18px 0 16px 16px;gap:10px}
  .pr-row>div:nth-child(odd){padding-left:0;border-left:0}
  .pr-row>div:nth-child(n+3){border-top:1px solid var(--line)}
  .pr-row dd{font-size:clamp(36px,10.6vw,56px)}
  .pr-row dd small{margin-left:3px;font-size:13px}
  .pr-row dt{font-size:10.5px;letter-spacing:.04em}
  .pr-sure{display:block;margin-top:16px;font-size:14px;color:var(--ink-2)}
  .pr-sure span{display:inline}
  .pr-sure span:not(:last-child)::after{margin:0 7px}
  .pr-act{margin-top:20px}
}
@media (max-width:719px){
  .prices-s .sec-p{font-size:16px}
  .pr-act .btn{width:100%}
}

/* ---------- tarifs.html (V8.5) : offres allégées, ce qui fait varier le prix ---------- */
.tf{padding:48px 0 88px}
.tf .p-ex{margin-bottom:18px}
.p-var{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:14px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.p-var span{display:block;margin-bottom:5px;font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.price.is-main .p-var{border-color:#cbd5ff}
.tf .p-aid{margin-top:-4px}
.tf-note{margin-top:16px;font:400 12.5px/1.5 var(--mono);color:var(--ink-2)}
.care-head h2{margin:0;font:400 clamp(28px,3vw,36px)/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.aids h2{margin:0;font:600 19px/1.25 var(--sans);letter-spacing:-.015em}
.tf-sure{display:flex;flex-direction:column;gap:8px;margin:0;font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.tf-sure span{display:flex;align-items:center;gap:10px}
.tf-sure span::before{content:"";flex:none;width:14px;height:1px;background:var(--acc)}
.tf-faq{border-top:1px solid var(--line)}
.nav-tel,.nav-msg{padding:11px 0}
.pr-sure span{white-space:nowrap}
@media (max-width:959px){
  .tf{padding:28px 0 56px}
  .tf-sure{order:9;font-size:11px}
}
@media (max-width:719px){
  .tf .p-ex{margin-bottom:10px}
  .p-var{margin-top:0;padding-top:10px;font-size:13.5px}
  .tf .p-aid{margin-top:0}
  .care-head h2{font-size:28px}
}


/* ---------- 5.13 fondateur ---------- */
.founder{padding:88px 0;border-top:1px solid var(--line)}
.founder-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px 80px;align-items:center}
.f-photo{padding:10px;border:1px solid var(--line)}
.f-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.f-photo figcaption{margin-top:10px;font:400 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.f-copy .h2{margin-bottom:26px}
.f-copy>p{max-width:58ch;margin-top:14px;font-size:17.5px;line-height:1.6;color:var(--ink-2)}
.f-end{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.sign{font:400 40px/1 var(--serif);font-style:italic;color:var(--ink);margin-right:8px}
.social{display:flex;gap:6px 20px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-weight:600;font-size:15px;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
.social a:hover{color:var(--acc);border-color:currentColor}
.f-end .text-link{padding-top:0;margin-left:auto}
/* 19/10 · le fondateur monte juste après le héros : en bref (4 repères), puis le texte */
.f-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.f-tags li{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--ink);background:var(--paper)}
.f-tags li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
@media (max-width:959px){
  .founder{padding:52px 0 48px}
  .founder-in{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);gap:0 16px;align-items:center}
  .f-copy{display:contents}
  .f-copy>*{grid-column:1/-1;order:4}
  .f-copy .kick{order:1}
  .f-copy .h2{order:2;margin-bottom:18px}
  .f-photo{order:3;grid-column:1;margin:0;padding:5px}
  .founder .f-photo figcaption{display:none}
  .f-tags{order:3;grid-column:2;flex-direction:column;align-items:flex-start;gap:7px;margin:0}
  .f-tags li{padding:7px 10px;font-size:11px;letter-spacing:.02em}
  .f-copy>p{font-size:16px;margin-top:12px}
  .f-copy>p:first-of-type{margin-top:22px}
  .f-end{order:5;margin-top:20px}
  .f-end .text-link{margin-left:0}
}
@media (min-width:720px) and (max-width:959px){
  .founder-in{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:0 36px}
  .f-tags{flex-direction:row}
}

/* ---------- 5.14 FAQ ---------- */
.faq{padding:88px 0;background:var(--paper-2)}
.faq-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;align-items:start}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:60px;padding:12px 0;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa h3{font:600 19px/1.35 var(--sans);letter-spacing:-.015em}
.plus{position:relative;flex:none;width:16px;height:16px;transition:transform .35s var(--e)}
.plus::before,.plus::after{content:"";position:absolute;left:0;right:0;top:7.25px;height:1.5px;background:var(--ink)}
.plus::after{transform:rotate(90deg)}
.qa details[open] .plus{transform:rotate(45deg)}
.qa summary:hover h3{color:var(--acc)}
.qa details p{max-width:60ch;padding:0 40px 22px 0;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
@media (max-width:959px){
  .faq{padding:64px 0}
  .faq-in{grid-template-columns:1fr;gap:28px}
  .qa h3{font-size:17px}
  .qa details p{padding-right:0}
}

/* ---------- 5.15 rendez-vous ---------- */
.rdv{padding:96px 0 88px;border-bottom:1px solid var(--nline)}
.rdv-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 64px;align-items:start}
.person{display:flex;align-items:center;gap:14px;margin-top:30px}
.person img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.person b{display:block;font-weight:600}
.person span{font-size:15px;color:var(--nmute)}
.person a{display:inline-flex;align-items:center;min-height:44px;color:var(--ntext);border-bottom:1px solid var(--nline)}
.person a:hover{border-color:#b9c8ff}
.cal{border:1px solid var(--nline);border-radius:3px;background:var(--night);overflow:hidden}
.cal-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 0 0 18px;border-bottom:1px solid var(--nline);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--nmute)}
.cal-bar a{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 18px;color:var(--ntext)}
.cal-bar a:hover{color:#b9c8ff}
.cal-frame{position:relative;height:660px}
.cal-inline{position:absolute;inset:0;overflow:auto;opacity:0;transition:opacity .5s}
.cal-inline iframe{width:100%!important;border:0}
.cal-frame.ok .cal-inline{opacity:1}
.cal-wait{position:absolute;inset:0;display:grid;place-items:center;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--nmute)}
@media (max-width:959px){
  .rdv{padding:60px 0 52px}
  .rdv .n-list{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .rdv .n-list li{font-size:16px;padding:9px 0}
  .person{margin-top:18px}
  .rdv-in{grid-template-columns:1fr;gap:32px}
  .rdv-in .cal{margin:0 calc(var(--gut) * -1);border-left:0;border-right:0;border-radius:0}
  .cal-frame{height:640px}
}

/* ---------- 5.16 pied de page ---------- */
.foot{padding:64px 0 calc(24px + var(--dock));overflow:hidden}
.foot-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 26px;font-weight:500}
.foot-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--ntext)}
.foot-nav a:hover{color:#b9c8ff}
.giant{width:min(92vw,1240px);margin:40px auto 0}
.giant img{width:100%;height:auto}
.anim .giant img{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--e)}
.anim .giant.in img{clip-path:inset(0)}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 28px;margin-top:32px;padding-top:20px;border-top:1px solid var(--nline);font-size:14px;color:var(--nmute)}
.foot-tm{font-size:12.5px;opacity:.85}
.foot .social a{color:var(--ntext)}
.foot .social a:hover{color:#b9c8ff}
.link{min-height:44px;color:var(--nmute);border-bottom:1px solid var(--nline)}
.link:hover{color:var(--ntext)}
@media (max-width:959px){.foot{padding-top:52px}.foot-top{gap:16px}.giant{margin-top:28px}.foot-bottom{margin-top:24px;font-size:16px}}

/* ---------- mentions légales ---------- */
.legal{width:min(100% - 32px,720px);max-height:calc(100svh - 48px);padding:32px 32px 28px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink);box-shadow:0 10px 30px rgba(16,20,30,.07)}
.legal::backdrop{background:rgba(16,20,30,.55)}
.legal h2{font:600 28px/1.1 var(--sans);letter-spacing:-.025em;margin-bottom:12px}
.legal h3{margin-top:20px;font:600 15px var(--sans)}
.legal p{margin-top:4px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.legal a{color:var(--ink);border-bottom:1px solid var(--line)}
.legal-page .legal-w{max-width:760px;padding-top:24px;padding-bottom:80px}.legal-page h2{margin-top:28px;font:600 18px var(--sans)}.legal-page p{margin-top:6px;font-size:16px;line-height:1.6;color:var(--ink-2)}.legal-page a{color:var(--ink);border-bottom:1px solid var(--line)}
.legal .x{position:absolute;top:10px;right:10px;width:44px;height:44px;font-size:26px;line-height:1}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ===================== V8.1 ===================== */

/* icônes d'outils (simple-icons) : un masque, la couleur du texte. Encre sur papier, blanc sur nuit. Jamais de fond coloré. */
.ti{display:inline-block;flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ti.ti-none{background:none;-webkit-mask:none;mask:none} /* outil sans icône simple-icons (LoRaWAN) : nom seul, alignement gardé */

/* « Construit avec » : une rangée sobre sous le héros */
.stack{border-bottom:1px solid var(--line)}
.stack-in{display:flex;align-items:center;gap:20px 40px;padding-block:22px}
.stack-k{flex:none;margin:0;color:var(--ink-2)}
.stack-list{flex:1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 16px}
.stack-list li{display:inline-flex;align-items:center;gap:8px;font:500 11.5px/1 var(--mono);letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.stack-list .ti{width:17px;height:17px}
@media (max-width:1380px){.stack-in{flex-direction:column;align-items:flex-start;gap:14px}.stack-list{justify-content:flex-start;width:100%;gap:14px 28px}}
@media (max-width:959px){
  .stack-in{gap:14px;padding-block:20px 22px}
  .stack-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
  .stack-list li{font-size:12px;letter-spacing:0;min-width:0;white-space:normal;line-height:1.2}
}
@media (min-width:720px) and (max-width:959px){.stack-list{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* expertises : les outils en petit, sous la carte */
.xp .xp-tools{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:auto;padding-top:16px;font:400 11px/1.3 var(--mono);letter-spacing:.04em;color:var(--ink-2)}
.xp-tools span{display:inline-flex;align-items:center;gap:6px}
.xp-tools .ti{width:13px;height:13px;color:var(--ink)}
@media (min-width:960px){.xp-tx{display:flex;flex-direction:column;flex:1}}
@media (max-width:959px){.xp{grid-template-areas:"d t" "d p" "u u" "w w"}.xp .xp-tools{grid-area:w;padding-top:8px;margin-top:0}}

/* Hermès : ses outils, en blanc sur nuit */
.h-tools{max-width:none}
.h-tools .kick{margin-bottom:12px}
.h-list{display:flex;flex-wrap:wrap;gap:12px 26px}
.h-list li{display:inline-flex;align-items:center;gap:9px;font:500 12.5px/1 var(--mono);letter-spacing:.04em;color:var(--ntext)}
.h-list .ti{width:17px;height:17px}
@media (max-width:959px){.h-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}}

/* 5.6 bloc court « Tous les projets » */
.allp{padding:80px 0 76px}
.allp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 64px;flex-wrap:wrap;margin-bottom:34px}
.allp-names{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.allp-names li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.allp-names a{display:grid;gap:4px;align-content:start;min-height:44px;height:100%;padding:18px 20px 20px;transition:background-color .2s}
@media (hover:hover){.allp-names a:hover{background:var(--card)}}
.allp-names b{font:600 20px/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink);transition:color .2s}
@media (hover:hover){.allp-names a:hover b{color:var(--acc)}}
.allp-names span{font:400 11px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.allp-cta{display:flex;justify-content:flex-start;margin-top:28px}
@media (max-width:959px){
  .allp{padding:56px 0 52px}
  .allp-head{margin-bottom:22px}
  .allp-names{grid-template-columns:1fr 1fr}
  .allp-names a{padding:14px 12px 15px}
  .allp-names b{font-size:17px}
  .allp-cta .btn{width:100%}
}
@media (min-width:720px) and (max-width:959px){.allp-names{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ===================== projets.html ===================== */
.ph{padding:72px 0 48px;border-bottom:1px solid var(--line)}
.ph-kick a{display:inline-flex;align-items:center;min-height:44px;margin:-14px 0;border-bottom:1px solid var(--line);transition:color .2s}
.ph-kick a:hover{color:var(--acc)}
.ph-kick span{margin:0 6px}
.ph-h1{font-size:clamp(56px,7.4vw,128px)}
.ph-row{display:flex;justify-content:space-between;align-items:flex-end;gap:28px 64px;flex-wrap:wrap;margin-top:28px}
.ph-lead{margin:0;max-width:46ch;font-size:18px}
.ph-fig{margin:0;max-width:none;flex:0 1 560px;border-top:0;padding-top:0}
.anim .ph [data-h]{opacity:0;transform:translateY(16px)}
.anim .ph .ln[data-h]{opacity:1;transform:none}
.anim.ready .ph [data-h]{opacity:1;transform:none;transition:opacity 520ms var(--e) calc(var(--h) * 70ms),transform 520ms var(--e) calc(var(--h) * 70ms)}
.anim .ph .ln>span{transform:translateY(106%)}
.anim.ready .ph .ln>span{transform:none;transition:transform 560ms var(--e) 80ms}
.pj{padding:36px 0 96px}
.pj-bar{position:sticky;top:var(--nav);z-index:5;display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;margin-bottom:24px;padding:6px 0;background:var(--paper);border-bottom:1px solid var(--line)}
.pj-bar .filters button{margin-bottom:-7px}
.pj-count{font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.pj-count b{font-weight:500;color:var(--ink)}
.pj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.pc{position:relative;display:flex;flex-direction:column;padding:22px 24px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--nav) + 80px);transition:background-color .2s}
.pc::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--e)}
.pc:hover::before,.pc.hl::before{transform:none}
.pc.hl{background:var(--acc-soft)}
.pc-top{display:flex;align-items:baseline;gap:14px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.pc-n{color:var(--ink)}
.pc-st{margin-left:auto;display:inline-flex;align-items:center;gap:7px;text-align:right}
.pc-st::before{content:"";flex:none;width:12px;height:1px;background:currentColor}
.pc-prod{color:var(--ink)}
.pc-name{margin-top:18px;font:600 26px/1.12 var(--sans);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.pc-sec{margin-top:6px;font:400 11px/1.45 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.pc-line{margin-top:14px;font-size:16.5px;line-height:1.5;color:var(--ink-2)}
.pc-tags{margin-top:14px;font:400 12px/1.5 var(--mono);color:var(--ink-2)}
.pc-go{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:auto;padding-top:12px}
.pc-go a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;font-size:15px;color:var(--ink);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.pc-go a:hover{color:var(--acc);border-color:currentColor}
.pc-go .told{color:var(--ink-2)}
.pj-cta{padding:88px 0 80px;border-bottom:1px solid var(--nline)}
.pj-cta-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:32px 72px;align-items:end}
.pj-cta .n-p{margin-top:0}
.pj-cta sup{font-size:.45em;vertical-align:.9em}
.pj-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.btn-nline{border:1px solid var(--nline);color:var(--ntext)}
.btn-nline:hover{border-color:#b9c8ff}
@media (max-width:1100px) and (min-width:960px){.pj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:959px){
  .ph{padding:36px 0 32px}
  .ph-h1{font-size:clamp(46px,13vw,66px)}
  .ph-row{margin-top:18px;gap:24px}
  .ph-lead{font-size:16.5px}
  .ph-fig{flex-basis:100%;grid-template-columns:repeat(4,auto);gap:12px}
  .ph-fig dd{font-size:34px}
  .ph-fig dt{font-size:10px;letter-spacing:.03em}
  .pj{padding:12px 0 56px}
  .pj-bar{position:static;margin:0 0 18px;padding:4px 0 6px}
  .pj-bar .filters{gap:0 18px}
  .pj-count{display:none}
  .pj-grid{grid-template-columns:1fr;border-left:0}
  .pc{padding:18px 0 14px;border-right:0}
  .pc::before{left:0;right:0}
  .pc.hl{background:var(--acc-soft);margin:0 calc(var(--gut) * -1);padding-inline:var(--gut)}
  .pc-name{margin-top:12px;font-size:22px}
  .pc-line{margin-top:10px;font-size:16px}
  .pc-tags{margin-top:8px}
  .pj-cta{padding:56px 0 52px}
  .pj-cta-in{grid-template-columns:1fr;gap:20px}
  .pj-btns .btn{width:100%}
}
@media (min-width:720px) and (max-width:959px){.pj-grid{grid-template-columns:1fr 1fr;border-left:1px solid var(--line)}.pc{padding:20px 20px 16px;border-right:1px solid var(--line)}}
@media (max-width:400px){.ph-fig{grid-template-columns:1fr 1fr;row-gap:18px}}
.bl{font-weight:inherit}

/* ===================== V8.2 → V8.3 ===================== */
/* Héros : la 3D reprend toute sa place. La stack tient en une ligne discrète sous le paragraphe. */
.powered{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font:500 13px/1 var(--sans);letter-spacing:-.005em;color:var(--ink-2)}
.pw-k{font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.pw-i{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.powered .ti{width:18px;height:18px;color:var(--ink-2)}
@media (min-width:1600px){.powered{font-size:14px}.powered .ti{width:20px;height:20px}}
@media (min-width:960px) and (max-height:820px){.powered{margin-top:12px}}
@media (max-width:959px){
  .powered{order:8;gap:8px 14px;margin-top:14px;font-size:12.5px}
  .pw-k{flex-basis:100%;font-size:10.5px}
  .powered .ti{width:16px;height:16px}
}

/* « Construit avec » : une sélection aérée en gris doux, le détail complet replié */
.stack-in{display:block;padding-block:60px 56px}
.stack-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26em);align-items:end;gap:10px 48px;margin-bottom:38px}
.stack-k{grid-column:1/-1;margin:0 0 4px}
.stack-t{max-width:20em;font:400 clamp(30px,2.8vw,46px)/1.05 var(--serif);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.stack-t em{font-style:italic;color:var(--acc)}
.stack-r{margin:0;font:400 16px/1.5 var(--sans);color:var(--ink-2)}
.sk-sel{display:flex;flex-wrap:wrap;justify-content:space-between;gap:22px 28px;padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sk-sel li{display:inline-flex;align-items:center;gap:9px;font:500 14px/1 var(--sans);letter-spacing:-.005em;color:var(--ink-2);white-space:nowrap;transition:color .25s var(--e)}
.sk-sel .ti{width:20px;height:20px}
.sk-sel li:hover{color:var(--ink)}
.sk-more{margin-top:6px}
.sk-more>summary{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:4px 0;list-style:none;cursor:pointer;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);transition:color .2s}
.sk-more>summary::-webkit-details-marker{display:none}
.sk-more>summary:hover,.sk-more[open]>summary{color:var(--ink)}
.sk-more>summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.sk-sum{border-bottom:1px solid var(--line);padding-bottom:3px}
.sk-n{color:var(--ink-2);letter-spacing:.04em}
.sk-ch{width:7px;height:7px;margin-top:-4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--e)}
.sk-more[open] .sk-ch{margin-top:3px;transform:rotate(-135deg)}
.sk-more .sk{margin-top:14px}
.sk{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,12fr) minmax(0,10fr);border-top:1px solid var(--ink)}
.sk-g{padding:18px 26px 4px}
.sk-g:first-child{padding-left:0}
.sk-g:last-child{padding-right:0}
.sk-g+.sk-g{border-left:1px solid var(--line)}
.sk-gh{display:flex;align-items:baseline;gap:10px;margin:0 0 16px;font:500 11.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sk-gh span{color:var(--ink-2)}
.sk-gh b{margin-left:auto;font-weight:500;color:var(--ink-2)}
.sk-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.sk-g:nth-child(2) .sk-l{grid-template-columns:repeat(3,minmax(0,1fr))}
/* 13/10 : 4e groupe « Capteurs & domotique » sur toute la largeur, sous les trois autres */
.sk-g:nth-child(4){grid-column:1/-1;padding:18px 0 4px;border-left:0;border-top:1px solid var(--line)}
.sk-g:nth-child(4) .sk-l{grid-template-columns:repeat(4,minmax(0,1fr))}
.sk-l li{display:flex;align-items:center;gap:11px;min-width:0;padding:11px 0;border-bottom:1px solid var(--line);font:500 14.5px/1.2 var(--sans);letter-spacing:-.005em;color:var(--ink)}
.sk-l li span{min-width:0}
.sk-l .ti{width:20px;height:20px}
.sk-l small{display:block;margin-top:3px;font:400 10px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:1180px) and (min-width:960px){.sk-g:nth-child(2) .sk-l{grid-template-columns:repeat(2,minmax(0,1fr))}.sk-sel{justify-content:flex-start;gap:22px 34px}}
@media (max-width:959px){
  .stack-in{padding-block:30px 22px}
  .stack-head{grid-template-columns:1fr;gap:8px;margin-bottom:16px}
  .stack-k{margin:0}
  .stack-t{font-size:clamp(22px,6vw,27px)}
  .stack-r{display:none}
  .sk-sel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px;padding:14px 0}
  .sk-sel li{min-width:0;gap:6px;font-size:11px;white-space:normal;line-height:1.15}
  .sk-sel .ti{width:14px;height:14px}
  .sk{grid-template-columns:1fr}
  .sk-g,.sk-g:first-child,.sk-g:last-child{padding:16px 0 6px}
  .sk-g+.sk-g{border-left:0;border-top:1px solid var(--ink)}
  .sk-l,.sk-g:nth-child(2) .sk-l,.sk-g:nth-child(4) .sk-l{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
  .sk-g:nth-child(4){border-top:1px solid var(--ink)}
  .sk-l li{font-size:14px;gap:10px;padding:8px 0}
  .sk-l .ti{width:18px;height:18px}
}
@media (min-width:720px) and (max-width:959px){.sk-sel{grid-template-columns:repeat(4,minmax(0,1fr))}.sk-l,.sk-g:nth-child(2) .sk-l,.sk-g:nth-child(4) .sk-l{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.sk-sel li,.sk-ch{transition:none}}

/* Hermès (nuit) : une seule ligne légère, en gris clair sur nuit */
.h-tools .kick{margin-bottom:12px}
.hk-l{display:flex;flex-wrap:wrap;gap:12px 20px}
.hk-l li{display:inline-flex;align-items:center;gap:8px;font:500 12.5px/1.2 var(--mono);letter-spacing:.03em;color:var(--nmute)}
.hk-l small{font-size:inherit;opacity:.75}
.hk-l .ti{width:16px;height:16px}
@media (max-width:959px){.hk-l{gap:10px 18px}.hk-l li{font-size:12px;letter-spacing:0}}

/* projets.html : la même sélection, discrète */
.ph-stack{display:flex;align-items:center;gap:12px 28px;flex-wrap:wrap;margin-top:32px;padding-top:18px;border-top:1px solid var(--line)}
.ph-stack .kick{margin:0}
.ph-stack ul{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.ph-stack li{display:inline-flex;align-items:center;gap:7px;font:500 11.5px/1 var(--mono);letter-spacing:.03em;color:var(--ink-2)}
.ph-stack .ti{width:15px;height:15px}
@media (max-width:959px){.ph-stack{margin-top:24px;gap:12px}.ph-stack ul{gap:10px 16px}}

/* V8.3 · légende du portrait : nom, puis la formation en texte seul */
.f-photo figcaption{display:grid;gap:5px}
.f-photo .fc-n{color:var(--ink)}
.f-photo .fc-d{text-transform:none;letter-spacing:.02em;color:var(--ink-2)}

/* ===================== V8.6 · zone « Hauts-de-France & Île-de-France » ===================== */
/* Le surtitre du héros est plus long qu'avec « Picardie » : sur téléphone, on retire l'interlettrage pour tenir sur une ligne à 390 px. */
@media (max-width:959px){.hero-kick{letter-spacing:0}}

/* ===================== V8.6 · pages locales (/zones/…) ===================== */
/* Même grammaire que l'accueil : papier, filets fins, Instrument Serif avec un mot en italique cobalt, mono en surtitres. */
.z-fil ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 2px}
.z-fil li{display:inline-flex;align-items:center}
.z-fil li[aria-current]{color:var(--ink)}
.z-h1{font-size:clamp(46px,5.6vw,96px);max-width:16ch}
.z-ph .ph-lead{max-width:52ch}
.z-sec{padding:88px 0;border-top:1px solid var(--line)}
.z-2col{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px 72px;align-items:center}
.z-2col-t{align-items:start}
.z-h2{font-size:clamp(40px,4.4vw,72px);margin-bottom:26px}
.z-h3{margin:0 0 18px;font:600 24px/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.z-h4{margin:0 0 6px;font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.z-p{max-width:62ch;margin-top:16px;font-size:17px;line-height:1.62;color:var(--ink-2);text-wrap:pretty}
.z-formule{color:var(--ink);font-weight:500;padding-left:14px;border-left:2px solid var(--acc)}
.z-lead2{margin:0 0 30px}
.z-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.z-tags li{padding:7px 11px;border:1px solid var(--line);border-radius:2px;background:var(--card);font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.z-src{margin-top:14px;max-width:80ch;font:400 12px/1.55 var(--mono);color:var(--ink-2)}

/* carte de situation */
.z-map{margin:0}
.z-map svg{width:100%;height:auto;background:var(--paper-2);border:1px solid var(--line);border-radius:3px}
.z-map figcaption{margin-top:10px;font:400 11.5px/1.5 var(--mono);color:var(--ink-2)}
.z-side{fill:var(--pr)}
.z-top{fill:var(--pt);stroke:var(--edge);stroke-opacity:.35;stroke-linejoin:round}
.z-top.on{fill:var(--ft);stroke-opacity:.8}
.z-dlab text{font-family:var(--mono);fill:var(--mute)}
.z-route{stroke:var(--acc);fill:none;stroke-linecap:round}
.z-base rect{fill:var(--ink)}
.z-cible circle{fill:var(--acc)}
.z-cible .z-halo{fill:var(--acc);fill-opacity:.14}
.z-ctx{fill:var(--ink)}
.z-pt{fill:var(--card);stroke:var(--ink);stroke-width:.9px;vector-effect:non-scaling-stroke}
.z-l{font-family:var(--sans);font-weight:600;fill:var(--ink);paint-order:stroke;stroke:var(--paper-2);stroke-linejoin:round}
.z-l-point{font-weight:500;fill:var(--ink-2)}
.z-l2{font-family:var(--mono);font-weight:400;fill:var(--ink-2)}
.z-l-cible .z-l2{fill:var(--acc)}
.z-ech path{fill:none;stroke:var(--ink-2)}
.z-ech text{font-family:var(--mono);fill:var(--ink-2)}

/* trois besoins */
.z-bes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.z-bes li{display:flex;flex-direction:column;padding:26px 28px 24px;border-left:1px solid var(--line)}
.z-bes li:first-child{padding-left:0;border-left:0}
.z-bes-n{font:500 11.5px var(--mono);letter-spacing:.1em;color:var(--acc)}
.z-bes h3{margin-top:14px;font:600 21px/1.25 var(--sans);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.z-bes-p{margin:12px 0 20px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.z-bes-o{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.z-bes-o span{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.z-bes-o b{font-weight:600;font-size:15px;color:var(--ink);text-align:right}

/* offres */
.z-off{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.z-off li{padding:24px 24px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card)}
.z-off h3{font:600 19px/1.25 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.z-off-p{margin-top:10px;font:700 24px/1.15 var(--cond);color:var(--ink)}
.z-off-ex{margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.z-off-more{margin-top:16px}
.z-off-more a,.z-card-go,.z-ref a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.z-off-more a:hover,.z-ref a:hover{color:var(--acc);border-color:currentColor}

/* tableau (Paris, toutes les villes) */
.z-table{width:100%;max-width:900px;border-collapse:collapse;border-top:1px solid var(--ink);font-size:16px}
.z-table th,.z-table td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:400;vertical-align:baseline}
.z-table thead th{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.z-table tbody th{font-weight:600;color:var(--ink)}
.z-table td{color:var(--ink-2)}
.z-table .is-osk th,.z-table .is-osk td{color:var(--ink);background:var(--acc-soft)}
.z-table .is-osk th{padding-left:12px}
.z-table a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;border-bottom:1px solid var(--line)}
.z-table a:hover{color:var(--acc)}

/* méthode et repères */
.z-steps{display:grid;gap:10px;margin-top:22px}
.z-steps li{display:flex;gap:12px;font-size:16px;color:var(--ink)}
.z-steps li::before{content:"";flex:none;width:14px;height:1px;margin-top:.75em;background:var(--acc)}
.z-acteurs{border-top:1px solid var(--line)}
.z-acteurs li{padding:11px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink)}

/* cartes (villes, zones, départements) */
.z-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.z-cards-1{grid-template-columns:repeat(2,minmax(0,1fr))}
.z-cards li{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.z-cards a{position:relative;display:flex;flex-direction:column;height:100%;padding:22px 22px 14px;transition:background-color .2s}
.z-cards a::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--e)}
.z-cards a:hover::before{transform:none}
.z-cards a:hover h3{color:var(--acc)}
.z-card-k{font:500 10.5px/1.45 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.z-cards h3{margin-top:10px;font:400 34px/1 var(--serif);letter-spacing:-.02em;color:var(--ink);transition:color .2s}
.z-cards p:not(.z-card-k){margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.z-card-go{margin-top:auto;padding-top:10px;align-self:flex-start;font-size:14.5px;border-bottom:0}
.z-card-go i{font-style:normal;color:var(--acc)}

/* sections ville dans une page de zone */
.z-city{scroll-margin-top:var(--nav)}
.z-city-h{font-size:clamp(52px,5.2vw,88px);margin-bottom:6px}
.z-mini{border-top:1px solid var(--ink)}
.z-mini li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.z-mini span{font-size:16px;line-height:1.4;color:var(--ink)}
.z-mini b{flex:none;max-width:45%;font-weight:500;font-size:13.5px;text-align:right;color:var(--ink-2)}
.z-qa{margin-top:22px}
.z-qa h3{font-size:17px}
.z-ref{margin-top:16px;font-size:14.5px;color:var(--ink-2)}
.z-ref a{font-weight:500}
.z-jump{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;border-top:1px solid var(--ink)}
.z-jump a{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:52px;border-bottom:1px solid var(--line);transition:color .2s}
.z-jump a:hover{color:var(--acc)}
.z-jump b{font-weight:600}
.z-jump span{font:400 12px var(--mono);color:var(--ink-2)}
.z-pj{margin-top:4px}

/* maillage : villes voisines */
.z-near{padding:56px 0 80px;border-top:1px solid var(--line)}
.z-near ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:1px solid var(--ink)}
.z-near a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;min-height:72px;padding:14px 18px 14px 0;border-bottom:1px solid var(--line);transition:color .2s}
.z-near b{font-weight:600;font-size:17px}
.z-near span{grid-row:2;font:400 11.5px/1.4 var(--mono);color:var(--ink-2)}
.z-near i{grid-row:1/span 2;grid-column:2;font-style:normal;color:var(--acc);transition:transform .25s var(--e)}
.z-near a:hover{color:var(--acc)}
.z-near a:hover i{transform:translateX(3px)}

/* pied de page : ligne « Zones d'intervention » (toutes les pages) */
.foot-zones{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin-top:28px;padding-top:12px;border-top:1px solid var(--nline);font-size:14px}
.foot-zk{margin-right:6px;font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--nmute)}
.foot-zones a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--nmute);transition:color .2s}
.foot-zones a:hover,.foot-zones .foot-zall{color:var(--ntext)}
.foot-zones .foot-zall:hover{color:#b9c8ff}

@media (max-width:1100px) and (min-width:960px){.z-bes{grid-template-columns:1fr}.z-bes li{padding:22px 0;border-left:0;border-top:1px solid var(--line)}.z-bes li:first-child{border-top:0}}
@media (max-width:959px){
  .z-h1{font-size:clamp(38px,10.4vw,56px)}
  .z-sec{padding:52px 0}
  .z-2col{grid-template-columns:1fr;gap:32px}
  .z-h2{font-size:clamp(34px,9.6vw,46px);margin-bottom:18px}
  .z-p{font-size:16.5px}
  .z-bes{grid-template-columns:1fr}
  .z-bes li,.z-bes li:first-child{padding:20px 0;border-left:0;border-top:1px solid var(--line)}
  .z-bes li:first-child{border-top:0}
  .z-bes h3{font-size:19px}
  .z-off{grid-template-columns:1fr 1fr}
  .z-off li{padding:18px 14px}
  .z-off-p{font-size:21px}
  .z-cards-1{grid-template-columns:1fr}
  .z-cards h3{font-size:30px}
  .z-jump{grid-template-columns:1fr}
  .z-near{padding:40px 0 56px}
  .z-near ul{grid-template-columns:1fr}
  .z-mini b{max-width:50%}
  .z-table{font-size:15px}
  .foot-zones{gap:0 14px;font-size:15px}
  .foot-zk{flex-basis:100%;margin:6px 0 0}
}
@media (max-width:560px){.z-off{grid-template-columns:1fr}.z-hide-s{display:none}.z-mini li{flex-direction:column;gap:4px}.z-mini b{max-width:none;text-align:left}}
.z-h1 .ln>span{white-space:normal}
@media (min-width:960px){.z-zones .z-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lk{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}

/* ===================== 19/10 · alternance des fonds, indice « touchez » sur la 3D ===================== */
.founder{background:var(--paper-2)}
.f-tags li{background:var(--paper)}
.chain{background:var(--paper-2)}
.n-solo .manifest{padding:96px 0}
@media (max-width:959px){.n-solo .manifest{padding:64px 0}}
.tw-hint{position:absolute;z-index:5;left:12px;top:12px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 11.5px/1.2 var(--mono);letter-spacing:.03em;pointer-events:none;transition:opacity .4s var(--e)}
.tw-hint i{width:7px;height:7px;border-radius:50%;background:var(--signal)}
.anim .tw-hint i{animation:pulse 1.6s var(--e) infinite}
.tw-hint.off{opacity:0}

/* ===================== 19/10 · téléphone : moins d'écrans, autant d'informations ===================== */
/* 23/10 · la bulle « à qui on a affaire » aussi sur ordinateur, juste avant les boutons */
.hero-me{display:flex;align-items:center;gap:12px;width:fit-content;max-width:100%;margin-top:26px;padding:8px 16px 8px 8px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:inherit;text-decoration:none;transition:border-color .2s}
.hero-me:hover{border-color:var(--acc)}
.hero-me img{flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.hero-me span{display:grid;gap:3px;min-width:0}
.hero-me b{font:600 15px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.hero-me small{font:400 11.5px/1.3 var(--mono);letter-spacing:.02em;color:var(--ink-2)}
.hero-me i{margin-left:14px;font-style:normal;color:var(--acc)}
@media (min-width:960px){.hero-me + .hero-cta{margin-top:18px}}
@media (max-width:959px){
  /* portrait rond dans le premier écran, juste avant le bouton */
  .hero-me{order:6;display:flex;align-items:center;gap:12px;margin-top:14px;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
  .hero-me img{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 22%}
  .hero-me span{display:grid;gap:2px;min-width:0}
  .hero-me b{font:600 15px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
  .hero-me small{font:400 11.5px/1.3 var(--mono);letter-spacing:.02em;color:var(--ink-2)}
  .hero-me i{margin-left:auto;font-style:normal;color:var(--acc)}
  .hero-cta{margin-top:10px}

  /* les 5 projets : cartes à faire glisser */
  .sw .cases{padding-top:48px}
  .sw .story-stage{display:flex;flex-direction:column}
  .sw .rail{display:flex;order:-1;gap:8px;margin:14px 0 4px;padding:0 var(--gut)}
  .sw .rail a{grid-template-columns:auto;min-height:40px;padding-block:6px}
  .sw .rail span{display:none}
  .sw .track{flex-direction:row;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:6px var(--gut) 14px;scroll-padding-inline:var(--gut)}
  .sw .track::-webkit-scrollbar{display:none}
  .sw .case{flex:none;width:86%;scroll-snap-align:start;border:1px solid var(--nline);border-radius:3px;background:rgba(255,255,255,.025)}
  .sw .case-in{padding:14px 16px 10px;gap:10px}
  .sw .cs svg{max-height:21svh}
  .sw .c-name{font-size:clamp(26px,7.4vw,34px)}
  .sw .c-line{font-size:15px}
  .sw .c-facts li{padding:5px 0;font-size:14.5px}

  /* fondateur : signature manuscrite retirée sur téléphone */
  .f-end .sign{display:none}
}

/* 19/10 (2) · téléphone : expertises animées au défilement, chaîne en frise verticale qui se remplit */
@media (max-width:959px){
  .anim .xp{--t:0}
  .xp{position:relative;opacity:calc(.12 + var(--t,1) * .88);transform:translateY(calc((1 - var(--t,1)) * 30px))}
  .xp::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--acc);transform:scaleX(var(--t,1));transform-origin:left}
  .xp-iso{transform:scale(calc(.55 + var(--t,1) * .45));transform-origin:left top}
  .xp h3,.xp p{transform:translateX(calc((1 - var(--t,1)) * 18px))}
  .xp ul{opacity:var(--t,1)}

  .steps{position:relative;display:block;margin-top:22px;border:0;--f:0}
  .steps::before,.steps::after{content:"";position:absolute;left:27px;top:28px;bottom:28px;width:2px;background:var(--line)}
  .steps::after{background:var(--acc);transform:scaleY(var(--f));transform-origin:top}
  .steps li{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-areas:"i n" "i t";align-items:center;gap:0 16px;padding:10px 0;border:0;border-radius:0;background:none;opacity:.38;transition:opacity .4s var(--e)}
  .steps li.lit{opacity:1}
  .st-n{grid-area:n;align-self:end;font-size:11px;line-height:1.4}
  .steps li>div:last-child{grid-area:t;align-self:start}
  .st-ic{grid-area:i;position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;margin:0;border:1px solid var(--line);border-radius:50%;background:var(--paper);transition:border-color .4s var(--e),transform .4s var(--e)}
  .steps li.lit .st-ic{border-color:var(--acc);transform:scale(1.06)}
  .steps li.lit .st-n{color:var(--acc)}
  .steps .st-ic .iso{width:34px;height:34px}
  .steps b{font-size:17px}
  .steps p{margin-top:1px;font-size:14.5px;line-height:1.4}
}
@media (max-width:959px) and (prefers-reduced-motion:reduce){.xp{--t:1}.steps{--f:1}.steps li{opacity:1}}

/* 19/10 (3) · corrections de la revue visuelle */
@media (min-width:960px){
  /* « Des heures perdues » : le surtitre colle au titre, la liste occupe la colonne de droite */
  .pain-in{align-items:start}
  .pain-in .kick{grid-column:1;grid-row:1;align-self:end}
  .pain-in .hn{grid-column:1;grid-row:2;align-self:start;margin-top:14px}
  .pain-list{grid-column:2;grid-row:1/3;align-self:center}
  .pain-count{grid-column:2;grid-row:3}
}
.reassure{text-wrap:balance}
.social a{justify-content:flex-start;min-width:0;padding-inline:2px}
@media (max-width:959px){
  .sw .track{align-items:flex-start}
  .sw .c-logo{height:34px;opacity:.95}
  .f-tags li{white-space:nowrap;font-size:10.5px;letter-spacing:0}
  .f-tags{align-self:center}
  .method .btn,.method-cta .btn{width:100%;justify-content:center}
  .exp .xp-iso,.xp-iso{overflow:hidden}
}

/* 28/10 · « Vous êtes sur » au-dessus du bandeau d'accueil des sous-pages */
.here{background:var(--acc);color:#fff}
.here-in{display:flex;align-items:center;justify-content:center;gap:28px;min-height:44px;padding:8px var(--gut);text-align:center}
.here-t{margin:0;font-size:15px;line-height:1.35;min-width:0}
.here-t b{font-weight:600}
.here-k{font:500 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin-right:8px}
.here-links{display:flex;gap:22px;margin:0}
.here-links a{color:#fff;text-decoration:none;font:500 11.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;opacity:.85}
.here-links a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.here + .hero{min-height:calc(100svh - var(--nav) - 44px)}
#page{scroll-margin-top:var(--nav)}
@media (max-width:959px){
  .here-in{flex-direction:column;gap:6px;padding:12px var(--gut) 10px}
  .here-k{display:block;margin:0 0 4px}
  .here-t{font-size:16px;text-wrap:balance}
  .here-links{justify-content:center;gap:28px}
}
/* lien « Voir tout Oskale » sous les boutons du bandeau */
.hero-home{display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:10px 16px 10px 18px;border:1px solid var(--acc);border-radius:999px;color:var(--acc);text-decoration:none;align-self:flex-start;max-width:100%}
.hero-home span{font-weight:600;font-size:15px}
.hero-home small{font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.hero-home i{font-style:normal;transition:transform .2s}
.hero-home:hover{background:var(--acc-soft)}
.hero-home:hover i{transform:translateX(3px)}
@media (max-width:959px){.hero-home{order:9;align-self:center;margin:16px 0 0}.hero-home small{display:none}}

/* 30/10 : pied de page, « Mentions légales » centré verticalement comme les autres éléments */
.foot-bottom .link{display:inline-flex;align-items:center;border-bottom:0;text-decoration:underline;text-decoration-color:var(--nline);text-underline-offset:5px}
.foot-bottom .link:hover{text-decoration-color:currentColor}