/* MC Live Tech · feuille de styles du site
   Charte « Constellation » : Nuit #06120E, Brume #E7EFE9, Lichen #ADC3B7, Ardoise #3D5248, Signal #E2622F (le point live).
   Sommaire : polices · jetons · base · typographie · boutons · en-tête · hero · sections · expertises · démos ·
   réalisations · storyboard · méthode · formations · FAQ · formulaire · pages intérieures · pied de page · mouvement · responsive */

/* ================= Polices (hébergées sur le site, licence SIL OFL) ================= */
@font-face{font-family:"Unbounded";src:url(../fonts/unbounded-300-700-latin.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-300-600-latin.woff2) format("woff2");font-weight:300 600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/ibm-plex-mono-500-latin.woff2) format("woff2");font-weight:500;font-display:swap}
/* polices de repli ajustées pour limiter le décalage de mise en page pendant le chargement */
@font-face{font-family:"Unbounded repli";src:local("Arial");size-adjust:122%;ascent-override:80%;descent-override:20%}
@font-face{font-family:"Plex repli";src:local("Arial");size-adjust:101%;ascent-override:101%;descent-override:27%}

/* ================= Jetons ================= */
:root{
  --nuit:#06120e; --nuit-2:#0b1f18; --nuit-3:#12291f; --filet:#1d3a2f;
  --brume:#e7efe9; --brume-2:#f3f7f4; --lichen:#adc3b7; --ardoise:#3d5248;
  --signal:#e2622f; --signal-fonce:#a63f17; --signal-doux:rgba(226,98,47,.16);
  --f-display:"Unbounded","Unbounded repli","Arial Black",Arial,sans-serif;
  --f-body:"IBM Plex Sans","Plex repli","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(1rem,4vw - .25rem,3rem);
  --max:84rem;
  --col-gap:clamp(1rem,2.4vw,2.5rem);
  --sec-y:clamp(4.5rem,2.5rem + 7vw,9.5rem);
  --sheet:clamp(1.5rem,.75rem + 2.5vw,3rem);
  --hdr-h:5rem;
  --r-s:.5rem; --r-m:1rem; --r-l:1.5rem;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-micro:200ms; --t-sec:650ms;
  color-scheme:dark;
}
.theme-nuit,.theme-foret{
  --bg:var(--nuit); --fg:var(--brume); --fg-2:var(--lichen); --line:var(--filet); --line-2:#2a4a3d;
  --surface:var(--nuit-2); --surface-2:var(--nuit-3); --accent-t:var(--signal); --focus:var(--signal); --err:#ff9e7d;
  --logo-line:var(--lichen); --logo-node:var(--brume); --logo-text:var(--brume);
  background:var(--bg); color:var(--fg);
}
.theme-foret{--bg:var(--nuit-2); --surface:var(--nuit-3); --surface-2:#173327; --line:#22443a}
.theme-brume{
  --bg:var(--brume); --fg:var(--nuit); --fg-2:var(--ardoise); --line:rgba(6,18,14,.14); --line-2:rgba(6,18,14,.24);
  --surface:var(--brume-2); --surface-2:#d9e4dd; --accent-t:var(--signal-fonce); --focus:var(--signal-fonce); --err:#b3261e;
  --logo-line:var(--ardoise); --logo-node:var(--nuit); --logo-text:var(--nuit);
  background:var(--bg); color:var(--fg); color-scheme:light;
}

/* ================= Base ================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 1rem);background:var(--nuit)}
body{margin:0;font:400 1.0625rem/1.6 var(--f-body);background:var(--nuit);color:var(--brume);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul[class],ol[class],nav ul,.chips,.ftr__cols ul{list-style:none;padding:0}
main{display:block;outline:none}
[hidden]{display:none!important}
html.menu-open{overflow:hidden}
::selection{background:var(--signal);color:var(--nuit)}
:focus-visible{outline:2px solid var(--focus,var(--signal));outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-4rem;z-index:100;padding:.75rem 1.1rem;background:var(--signal);color:var(--nuit);font-weight:500;border-radius:var(--r-s);text-decoration:none;transition:top var(--t-micro) var(--ease-out)}
.skip:focus{top:1rem}
.wrap{width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto}
.mono{font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}

/* ================= Typographie ================= */
.h2,.h3,.h4,.phero__t,.hero__t{font-family:var(--f-display);text-wrap:balance}
.h2{font-size:clamp(1.85rem,1rem + 3vw,4rem);font-weight:500;line-height:1.08;letter-spacing:-.03em}
.h3{font-size:clamp(1.2rem,1rem + .7vw,1.6rem);font-weight:500;line-height:1.2;letter-spacing:-.015em}
.h4{font-size:1.0625rem;font-weight:500;line-height:1.3;letter-spacing:-.005em}
.h2 em,.phero__t em,.h3 em,.pre__t em{font-style:normal;font-weight:300;color:var(--fg-2)}
.lead{font-size:clamp(1.0625rem,1rem + .4vw,1.3rem);line-height:1.55;color:var(--fg-2);max-width:38em}
.kicker{display:flex;align-items:center;gap:.6em;font-family:var(--f-mono);font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);margin-bottom:1.5rem}
.kicker__n{color:var(--accent-t);font-weight:500}
.kicker__sep{color:var(--accent-t)}
.prose{max-width:40em}
.prose p+p,.prose p+.btn,.prose p+ul,.prose ul+p{margin-top:1.1em}
.prose .btn{margin-top:2rem}
.link{display:inline-flex;align-items:center;gap:.5em;min-height:2.75rem;font-weight:500;text-decoration:none;color:var(--fg);background:linear-gradient(currentColor,currentColor) 0 calc(50% + .75em)/0 1px no-repeat;transition:background-size var(--t-micro) var(--ease-out)}
.link .ico{width:1.1em;height:1.1em;color:var(--accent-t);transition:transform var(--t-micro) var(--ease-out)}
.link:hover{background-size:100% 1px}
.link:hover .ico{transform:translateX(4px)}
.note{display:flex;gap:.75rem;align-items:flex-start;font-size:.9375rem;color:var(--fg-2);max-width:44em}
.note .ico{flex:none;width:1.25rem;height:1.25rem;color:var(--accent-t);margin-top:.15rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{padding:.4rem .8rem;border:1px solid var(--line-2);border-radius:99px;font-size:.875rem;line-height:1.3}
.ticks{display:grid;gap:.7rem}
.ticks li{position:relative;padding-left:1.6rem}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;border-radius:50%;background:var(--accent-t);box-shadow:0 0 0 4px var(--signal-doux)}
.live-dot{display:inline-block;flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--signal);box-shadow:0 0 0 0 rgba(226,98,47,.55);animation:live 2.4s var(--ease-out) infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(226,98,47,.55)}70%,100%{box-shadow:0 0 0 .6rem rgba(226,98,47,0)}}

/* ================= Boutons ================= */
.btn{--h:3.25rem;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.75rem;min-height:var(--h);padding:0 .5rem 0 1.4rem;border-radius:99px;border:1px solid transparent;font-weight:500;font-size:1rem;line-height:1.2;text-decoration:none;white-space:nowrap;transition:background-color var(--t-micro) var(--ease-out),color .35s var(--ease-out),border-color var(--t-micro) var(--ease-out),transform var(--t-micro) var(--ease-out),translate .45s var(--ease-out)}
.btn::before{content:"";position:absolute;z-index:-1;left:var(--bx,50%);top:var(--by,50%);width:0;aspect-ratio:1;border-radius:50%;translate:-50% -50%;background:var(--sweep,var(--brume));transition:width .6s var(--ease-out)}
.btn__ico{translate:0 0;transition:background-color var(--t-micro) var(--ease-out),translate .45s var(--ease-out)}
.roll{display:inline-grid;overflow:hidden;vertical-align:top;padding:.1em 0;margin:-.1em 0}
.roll>span{grid-area:1/1;transition:transform .5s var(--ease-out)}
.roll>span+span{transform:translateY(115%)}
@media (hover:hover){
  .btn:hover::before{width:260%}
  a:hover>.roll>span:first-child,.btn:hover .roll>span:first-child{transform:translateY(-115%)}
  a:hover>.roll>span+span,.btn:hover .roll>span+span{transform:none}
}
.btn__ico{display:grid;place-items:center;width:calc(var(--h) - .75rem);height:calc(var(--h) - .75rem);border-radius:50%;overflow:hidden;transition:background-color var(--t-micro) var(--ease-out)}
.btn__ico .ico{width:1.15rem;height:1.15rem;transition:transform 250ms var(--ease-out)}
.btn:hover .btn__ico .ico{transform:translateX(3px)}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--signal);color:var(--nuit)}
.btn--primary .btn__ico{background:var(--nuit);color:var(--signal)}
.btn--primary{--sweep:var(--brume)}
.btn--ghost{border-color:var(--line-2);color:var(--fg)}
.btn--ghost .btn__ico{background:var(--surface-2,rgba(255,255,255,.06));color:var(--fg)}
.btn--ghost{--sweep:var(--fg)}
@media (hover:hover){
  .btn--ghost:hover{border-color:var(--fg);color:var(--bg)}
  .btn--ghost:hover .btn__ico{background:var(--signal);color:var(--nuit)}
}
.btn--sm{--h:2.75rem;font-size:.9375rem;padding-left:1.15rem}
.btn--block{width:100%;justify-content:space-between}
.btn--down:hover .btn__ico .ico{transform:translateY(3px)}
.link-btn{background:none;border:0;padding:.25rem 0;color:var(--fg);font-weight:500;text-decoration:underline;text-underline-offset:.25em;min-height:2.75rem}
.ico{width:1.25rem;height:1.25rem}

/* ================= Logo ================= */
.logo .lg-lines{fill:none;stroke:var(--logo-line,var(--lichen));stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.logo .lg-dash{stroke:var(--logo-line,var(--lichen));stroke-width:1.5;stroke-dasharray:3 4}
.logo .lg-nodes circle{fill:var(--logo-node,var(--brume))}
.logo .lg-halo{fill:none;stroke:var(--signal);stroke-width:1.5;opacity:.45;transform-box:fill-box;transform-origin:center}
.logo .lg-live{fill:var(--signal)}
.logo .lg-word path{fill:none;stroke:var(--logo-text,var(--brume));stroke-width:8}
.logo .lg-word polygon{fill:var(--logo-text,var(--brume))}
.logo--anim .lg-halo{animation:halo 2.4s ease-out 4}
@keyframes halo{0%{transform:scale(.55);opacity:.8}100%{transform:scale(2.1);opacity:0}}

/* ================= En-tête ================= */
.hdr{position:fixed;inset:0 0 auto;z-index:50;color:var(--brume);--logo-line:var(--lichen);--logo-node:var(--brume);--logo-text:var(--brume);--line-2:#2a4a3d;--fg:var(--brume);--bg:var(--nuit);--surface-2:var(--nuit-3);transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out),backdrop-filter .35s}
.hdr__in{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.5rem);height:var(--hdr-h);width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto;transition:height .35s var(--ease-out)}
.hdr.is-scrolled{--hdr-h:4.25rem;background:rgba(6,18,14,.8);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 var(--filet)}
.hdr__logo{display:block;flex:none;margin-right:auto;padding:.4rem 0;border-radius:6px}
.hdr__logo .logo{height:2.25rem;width:auto;transition:height .35s var(--ease-out)}
.is-scrolled .hdr__logo .logo{height:2rem}
.hdr .logo *{transition:stroke .35s,fill .35s}
.hdr--light.is-scrolled{background:rgba(231,239,233,.84);box-shadow:0 1px 0 rgba(6,18,14,.1);color:var(--nuit);--logo-line:var(--ardoise);--logo-node:var(--nuit);--logo-text:var(--nuit);--fg:var(--nuit);--bg:var(--brume);--line-2:rgba(6,18,14,.24);--surface-2:#d9e4dd;--focus:var(--signal-fonce)}
.hdr--light.is-scrolled .hdr__nav a{color:var(--ardoise)}
.hdr--light.is-scrolled .hdr__nav a:hover,.hdr--light.is-scrolled .hdr__nav a[aria-current]{color:var(--nuit)}
.hdr--light.is-scrolled .hdr__burger{border-color:rgba(6,18,14,.24);background:rgba(231,239,233,.6);color:var(--nuit)}
.hdr__nav ul{display:flex;gap:clamp(1rem,2vw,2rem)}
.hdr__nav a{position:relative;display:block;padding:.6rem 0;font-size:.9375rem;text-decoration:none;color:var(--lichen);transition:color var(--t-micro) var(--ease-out)}
.hdr__nav a::after{content:"";position:absolute;left:50%;bottom:.15rem;width:5px;height:5px;border-radius:50%;background:var(--signal);transform:translateX(-50%) scale(0);transition:transform var(--t-micro) var(--ease-out)}
.hdr__nav a:hover,.hdr__nav a[aria-current]{color:var(--brume)}
.hdr__nav a:hover::after,.hdr__nav a[aria-current]::after{transform:translateX(-50%) scale(1)}
.hdr__burger{display:none;align-items:center;gap:.6rem;min-height:2.75rem;padding:0 1rem;border:1px solid #2a4a3d;border-radius:99px;background:rgba(6,18,14,.4);font-size:.9375rem;font-weight:500;color:var(--brume)}
.hdr__burger-lines{display:grid;gap:5px;width:18px}
.hdr__burger-lines i{display:block;height:1.5px;background:currentColor;border-radius:2px}
.hdr__burger-lines i:last-child{width:12px;justify-self:end}

/* menu mobile (dialog natif : piège du focus, Échap) */
.menu{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:var(--nuit);color:var(--brume);--logo-line:var(--lichen);--logo-node:var(--brume);--logo-text:var(--brume);--line-2:#2a4a3d;--fg:var(--brume);--focus:var(--signal);overscroll-behavior:contain}
.menu::backdrop{background:var(--nuit)}
.menu[open]{display:block;animation:menu-in .35s var(--ease-out)}
.menu.is-closing{animation:menu-out .25s var(--ease-io) forwards}
@keyframes menu-in{from{opacity:0}}
@keyframes menu-out{to{opacity:0}}
.menu__in{display:flex;flex-direction:column;min-height:100%;width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto;padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}
.menu__top{display:flex;align-items:center;justify-content:space-between;height:4.25rem}
.menu__top .logo{height:2rem;width:auto}
.menu__close{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid #2a4a3d;background:none}
.menu__list{margin:2rem 0 auto}
.menu__list li{border-bottom:1px solid var(--filet)}
.menu[open] .menu__list li{animation:menu-item .5s var(--ease-out) both;animation-delay:calc(60ms + var(--i) * 45ms)}
@keyframes menu-item{from{opacity:0;transform:translateY(14px)}}
.menu__list a{display:flex;align-items:baseline;gap:1rem;padding:1rem 0;font-family:var(--f-display);font-size:clamp(1.6rem,6.5vw,2.4rem);font-weight:400;letter-spacing:-.02em;text-decoration:none}
.menu__list a[aria-current]{color:var(--signal)}
.menu__n{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.1em;color:var(--lichen)}
.menu__foot{display:grid;gap:1rem;padding-top:2rem}
.menu__tag{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lichen);text-align:center}

/* bouton de contact flottant (mobile) */
.fab{position:fixed;right:1rem;bottom:max(1rem,env(safe-area-inset-bottom));z-index:40;display:none;align-items:center;gap:.6rem;min-height:3.25rem;padding:0 1.25rem 0 1rem;border-radius:99px;background:var(--signal);color:var(--nuit);font-weight:500;font-size:.9375rem;text-decoration:none;box-shadow:0 10px 30px rgba(6,18,14,.35);transform:translateY(160%);transition:transform .4s var(--ease-out)}
.fab .ico{width:1.1rem;height:1.1rem}
.fab.is-visible{transform:none}

/* ================= Hero ================= */
.hero{position:relative;padding:calc(var(--hdr-h) + clamp(2rem,5vh,4.5rem)) 0 calc(var(--sheet) + clamp(2rem,4vw,3.5rem));overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 55% at 72% 58%,rgba(29,58,47,.55),transparent 70%),radial-gradient(30% 30% at 64% 56%,rgba(226,98,47,.10),transparent 70%)}
.hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
.hero__copy{display:contents}
.hero__k{grid-column:1/-1;display:flex;align-items:center;gap:.75rem;color:var(--lichen);margin-bottom:clamp(1.25rem,2.5vw,2rem)}
.hero__t{grid-column:1/-1;font-size:clamp(2rem,.6rem + 5.6vw,6.25rem);font-weight:500;line-height:1.02;letter-spacing:-.04em;margin-bottom:clamp(1.5rem,2.5vw,2.25rem)}
.hero__t .ln,.hero__t .ln__in{display:block}
.hero__t .ln+.ln .ln__in{color:var(--lichen);font-weight:300}
.hero__t .w{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:top;padding:.12em .02em .16em;margin:-.12em -.02em -.16em}
.hero__t .c{display:inline-block;transform-origin:0 100%}
.dot{color:var(--signal);font-weight:inherit}
.hero__lead{grid-column:1/span 5;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.6;color:var(--lichen);max-width:30em}
.hero__ctas{grid-column:1/span 5;display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem;align-self:start}
.hero__visual{grid-column:6/-1;grid-row:3/span 3;margin-top:-1.5rem}
.hero__list{grid-column:1/span 4;margin-top:clamp(2.5rem,5vh,3.5rem)}
.hero__list ul{border-top:1px solid var(--filet)}
.hero__list a{display:flex;align-items:center;gap:1rem;min-height:2.9rem;padding:.55rem 0;border-bottom:1px solid var(--filet);font-size:.9375rem;text-decoration:none;color:var(--lichen);transition:color var(--t-micro) var(--ease-out),padding var(--t-micro) var(--ease-out)}
.hero__list a .mono{font-size:.6875rem;color:var(--signal);width:1.5rem}
.hero__list a .ico{margin-left:auto;width:1rem;height:1rem;opacity:0;transform:translate(-4px,4px);transition:opacity var(--t-micro),transform var(--t-micro) var(--ease-out)}
.hero__list a:hover{color:var(--brume);padding-left:.35rem}
.hero__list a:hover .ico,.hero__list a:focus-visible .ico{opacity:1;transform:none}

/* scène signature */
.stage{position:relative;margin:0;perspective:1200px}
.stage__frame{transform-style:preserve-3d;transition:transform .6s var(--ease-out)}
.stage__svg{width:100%;height:auto;max-height:min(58vh,540px);overflow:visible;margin-inline:auto}
.stage__stars .tw{fill:var(--lichen);opacity:.35}
.tw1{animation:tw 4.2s ease-in-out infinite}
.tw2{animation:tw 5.6s ease-in-out -2s infinite}
.tw3{animation:tw 3.4s ease-in-out -1s infinite}
@keyframes tw{50%{opacity:.85}}
.stage__glow{transition:opacity .8s}
.stage[data-state]:not([data-state="mc"]) .stage__glow{opacity:.45}
.stage__edges line{stroke:var(--lichen);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.stage__edges line.is-dash{stroke-dasharray:5 7;stroke-width:2}
.st-node{fill:var(--brume)}
.st-live{fill:var(--signal);stroke:var(--nuit);stroke-width:3}
.st-halo{fill:none;stroke:var(--signal);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;animation:st-halo 2.8s ease-out infinite}
.st-halo--2{animation-delay:-1.4s}
@keyframes st-halo{0%{transform:scale(.45);opacity:.75}100%{transform:scale(1.6);opacity:0}}
.stage.is-paused .tw,.stage.is-paused .st-halo{animation-play-state:paused}
.skin{opacity:0;transform-box:view-box;transform-origin:300px 240px;transform:scale(.97);transition:opacity .45s var(--ease-out),transform .8s var(--ease-out)}
.skin.is-on{opacity:1;transform:none;transition-delay:.35s}
.k-fill{fill:rgba(231,239,233,.035);stroke:rgba(173,195,183,.14)}
.k-dot{fill:rgba(173,195,183,.5)}
.k-soft{fill:rgba(231,239,233,.07)}
.k-url,.k-time,.k-tag{font-family:var(--f-mono);font-size:9px;fill:var(--lichen);letter-spacing:.06em}
.k-url{text-anchor:middle}
.k-tag{font-size:10px;letter-spacing:.14em}
.k-strong{fill:rgba(231,239,233,.82)}
.k-mid{fill:rgba(173,195,183,.36)}
.k-line{fill:none;stroke:rgba(173,195,183,.55)}
.k-cta{fill:rgba(226,98,47,.14);stroke:rgba(226,98,47,.75)}
.k-img{fill:url(#st-img)}
.k-sun{fill:rgba(226,98,47,.85)}
.k-hill{fill:rgba(173,195,183,.2)}
.k-card{fill:rgba(231,239,233,.04);stroke:rgba(173,195,183,.18)}
.k-notch{fill:var(--nuit)}
.k-btn{fill:var(--signal)}
.k-ink{fill:var(--nuit)}
.k-sep{stroke:rgba(173,195,183,.2)}
.k-story{fill:rgba(18,41,31,.9);stroke:rgba(173,195,183,.16)}
.k-glow{fill:url(#st-glow)}
.k-can{fill:rgba(231,239,233,.92)}
.k-band{fill:var(--signal)}
.stage__ui{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;margin-top:.75rem}
.stage__cap{font-size:.6875rem;color:var(--lichen)}
.stage__ctrl{display:flex;align-items:center;gap:.5rem}
.stage__states{display:flex;padding:.25rem;border:1px solid var(--filet);border-radius:99px;background:rgba(11,31,24,.6)}
.stage__states button{min-height:2.5rem;padding:0 .85rem;border:0;border-radius:99px;background:none;font-size:.8125rem;color:var(--lichen);transition:background-color var(--t-micro),color var(--t-micro)}
.stage__states button:hover{color:var(--brume)}
.stage__states button[aria-pressed="true"]{background:var(--brume);color:var(--nuit)}
.stage__toggle{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--filet);background:rgba(11,31,24,.6);color:var(--brume);transition:border-color var(--t-micro)}
.stage__toggle:hover{border-color:var(--lichen)}
.stage__toggle .ico{width:1rem;height:1rem}
.stage__toggle .i-play,.stage__toggle[aria-pressed="true"] .i-pause{display:none}
.stage__toggle[aria-pressed="true"] .i-play{display:block}
html:not(.js) .stage__ctrl{display:none}

/* ================= Sections ================= */
.sec{position:relative;padding:calc(var(--sec-y) + .25rem) 0 calc(var(--sec-y) + var(--sheet))}
.sheet{position:relative;border-radius:var(--sheet) var(--sheet) 0 0;margin-top:calc(-1 * var(--sheet))}
.sec__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end;margin-bottom:clamp(2.5rem,5vw,5rem)}
.sec__head .kicker{grid-column:1/-1}
.sec__head .h2{grid-column:1/span 8}
.sec__intro{grid-column:9/-1;color:var(--fg-2);padding-bottom:.4rem}
.sec__intro p+p{margin-top:.8em}
.sec__more{margin-top:clamp(2.5rem,5vw,4rem);display:flex;justify-content:center}

/* ================= Expertises : sélecteur ================= */
.xp{border-top:1px solid var(--line)}
.xp__h{border-bottom:1px solid var(--line)}
.xp__btn{display:flex;align-items:center;gap:1rem;width:100%;min-height:4.5rem;padding:1.1rem 0;border:0;background:none;text-align:left;color:var(--fg-2);transition:color var(--t-micro) var(--ease-out)}
.xp__n{color:var(--accent-t);font-size:.75rem;width:2rem;flex:none}
.xp__name{flex:1;font-family:var(--f-display);font-size:clamp(1.1rem,.9rem + .65vw,1.6rem);font-weight:400;letter-spacing:-.02em;line-height:1.2;transition:transform 300ms var(--ease-out)}
.xp__ico{position:relative;flex:none;width:2.25rem;height:2.25rem;border:1px solid var(--line-2);border-radius:50%;transition:background-color var(--t-micro),border-color var(--t-micro),transform 300ms var(--ease-out)}
.xp__ico::before,.xp__ico::after{content:"";position:absolute;left:50%;top:50%;width:.8rem;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.xp__ico::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform 300ms var(--ease-out)}
.xp__btn:hover{color:var(--fg)}
.xp__btn[aria-expanded="true"]{color:var(--fg)}
.xp__btn[aria-expanded="true"] .xp__ico{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.xp__btn[aria-expanded="true"] .xp__ico::after{transform:translate(-50%,-50%) rotate(0)}
.xp__panel{display:grid;gap:2rem;padding:.5rem 0 2.5rem}
.xp__title{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);margin-bottom:1.25rem}
.xp__dl{display:grid;gap:1.25rem;margin-bottom:1.5rem}
.xp__dl dt{font-family:var(--f-display);font-size:.875rem;font-weight:500;margin-bottom:.35rem}
.xp__dl dd{color:var(--fg-2)}
.xp__dl div:first-child dd{font-size:1.125rem;color:var(--fg);line-height:1.5}
.xp .chips{margin-bottom:1.75rem}
.js .xp__panel:not(.is-open){display:none}
.js .xp__panel.is-open{animation:panel-in .5s var(--ease-out)}
@keyframes panel-in{from{opacity:0;transform:translateY(12px)}}

/* ================= Aperçus interactifs ================= */
.demo{display:grid;gap:1rem;justify-items:center}
.demo__stage{position:relative;display:grid;align-content:center;width:100%;min-height:clamp(18rem,30vw,27rem);container-type:inline-size;border-radius:var(--r-l);background:var(--nuit-2);border:1px solid var(--filet);padding:7% 6%;overflow:hidden;color:var(--nuit)}
.demo__stage::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(173,195,183,.16) 1px,transparent 1.2px) 0 0/22px 22px;mask-image:radial-gradient(80% 70% at 50% 50%,#000,transparent)}
.seg{display:inline-flex;flex-wrap:wrap;justify-content:center;padding:.25rem;border:1px solid var(--line-2);border-radius:99px;gap:.15rem}
.seg button{min-height:2.5rem;padding:0 1rem;border:0;border-radius:99px;background:none;font-size:.875rem;color:var(--fg-2);transition:background-color var(--t-micro),color var(--t-micro)}
.seg button:hover{color:var(--fg)}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.demo__note{font-size:.875rem;color:var(--fg-2);text-align:center;min-height:2.6em}
.demo__link{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;font-weight:500;font-size:.9375rem;text-decoration:none;color:var(--fg)}
.demo__link .ico{width:1.1rem;height:1.1rem;color:var(--accent-t);transition:transform var(--t-micro) var(--ease-out)}
.demo__link:hover .ico{transform:translateX(4px)}

/* site web : maquette ↔ rendu */
.vw{position:relative;border-radius:2cqi;overflow:hidden;background:#fbf8f1;box-shadow:0 3cqi 8cqi rgba(0,0,0,.35)}
.vw__bar{display:flex;align-items:center;gap:1cqi;height:5.5cqi;padding:0 2.2cqi;background:#16302a}
.vw__bar i{width:1.4cqi;height:1.4cqi;border-radius:50%;background:#3b5a4f}
.vw__url{margin:0 auto;padding:.6cqi 3cqi;border-radius:2cqi;background:#0f241e;font:2cqi var(--f-mono);color:var(--lichen)}
.vw__page{position:relative;padding:3.5cqi 4.5cqi 4.5cqi;color:#16201c}
.vw__grid{position:absolute;inset:0 4.5cqi;display:grid;grid-template-columns:repeat(6,1fr);gap:2cqi;opacity:0;transition:opacity .4s}
.vw__grid i{background:rgba(226,98,47,.07);border-inline:1px dashed rgba(226,98,47,.35)}
.vw__nav{position:relative;display:flex;align-items:center;gap:3cqi;font-size:2.1cqi}
.vw__brand{margin-right:auto;font-family:var(--f-display);font-size:2.3cqi;font-weight:600;letter-spacing:-.02em}
.vw__navcta{padding:.8cqi 2cqi;border-radius:3cqi;background:#16201c;color:#fbf8f1}
.vw__hero{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4cqi;align-items:center;margin-top:5cqi}
.vw__h{font-family:var(--f-display);font-size:4.4cqi;font-weight:500;line-height:1.08;letter-spacing:-.03em;color:#16201c;transition:color .4s}
.vw__lead{margin-top:1.8cqi;font-size:1.8cqi;line-height:1.45;color:#5b6b63}
.vw__cta{display:inline-block;margin-top:3cqi;padding:1.6cqi 3cqi;border-radius:4cqi;background:var(--signal);color:var(--nuit);font-size:2.1cqi;font-weight:500;transition:all .4s}
.vw__img{position:relative;aspect-ratio:4/3.4;border-radius:2cqi;overflow:hidden;background:linear-gradient(170deg,#2b5446,#0f2a22);transition:all .4s}
.vw__sun{position:absolute;right:16%;top:18%;width:22%;aspect-ratio:1;border-radius:50%;background:var(--signal);transition:opacity .4s}
.vw__hill{position:absolute;inset:auto -10% -30% -10%;height:70%;border-radius:50% 50% 0 0;background:#adc3b7;opacity:.5;transition:opacity .4s}
.vw__x{position:absolute;inset:0;opacity:0;background:linear-gradient(to top right,transparent calc(50% - .5px),#9aa8a1 50%,transparent calc(50% + .5px)),linear-gradient(to bottom right,transparent calc(50% - .5px),#9aa8a1 50%,transparent calc(50% + .5px));transition:opacity .4s}
.vw__cards{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqi;margin-top:5cqi}
.vw__cards div{padding:2.4cqi;border-radius:1.6cqi;background:#efe9dc;font-size:2cqi;transition:all .4s}
.vw__cards b{font-weight:600}
.vw__cards p{margin-top:1cqi;font-size:1.65cqi;line-height:1.4;color:#5b6b63}
.vw[data-mode="wire"]{background:#fff}
.vw[data-mode="wire"] .vw__grid{opacity:1}
.vw[data-mode="wire"] .vw__h,.vw[data-mode="wire"] .vw__brand,.vw[data-mode="wire"] .vw__cards b,.vw[data-mode="wire"] .vw__nav span{color:#9aa8a1}
.vw[data-mode="wire"] .vw__lead,.vw[data-mode="wire"] .vw__cards p{color:#9aa8a1}
.vw[data-mode="wire"] .vw__navcta{background:none;border:1px dashed #9aa8a1}
.vw[data-mode="wire"] .vw__cta{background:none;color:#9aa8a1;outline:1px dashed #9aa8a1}
.vw[data-mode="wire"] .vw__img{background:#f1f3f2;outline:1px dashed #9aa8a1}
.vw[data-mode="wire"] .vw__sun,.vw[data-mode="wire"] .vw__hill{opacity:0}
.vw[data-mode="wire"] .vw__x{opacity:1}
.vw[data-mode="wire"] .vw__cards div{background:none;outline:1px dashed #9aa8a1;color:#9aa8a1}

/* application : trois écrans */
.va{display:flex;justify-content:center}
.va__phone{position:relative;width:46cqi;aspect-ratio:9/18.5;padding:1.4cqi;border-radius:7cqi;background:#16302a;box-shadow:0 4cqi 10cqi rgba(0,0,0,.4),inset 0 0 0 .4cqi #2a4a3d;container-type:inline-size;display:flex;flex-direction:column;overflow:hidden}
.va__status{display:flex;justify-content:space-between;align-items:center;padding:4cqi 7cqi 2cqi;font:600 5cqi var(--f-body);color:var(--brume);background:#fbf8f1;border-radius:13cqi 13cqi 0 0;color:#16201c}
.va__status i{width:9cqi;height:4cqi;border-radius:1.2cqi;border:.6cqi solid #16201c}
.va__screens{position:relative;flex:1;background:#fbf8f1;overflow:hidden}
.va__screen{position:absolute;inset:0;padding:3cqi 7cqi;display:flex;flex-direction:column;gap:4cqi;font-size:5cqi;color:#16201c;opacity:0;transform:translateX(8%);transition:opacity .4s var(--ease-out),transform .5s var(--ease-out);pointer-events:none}
.va__screens[data-screen="0"] .va__screen:nth-child(1),.va__screens[data-screen="1"] .va__screen:nth-child(2),.va__screens[data-screen="2"] .va__screen:nth-child(3){opacity:1;transform:none}
.va__hi{font-family:var(--f-display);font-size:8cqi;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.va__sub{margin-top:-3cqi;color:#5b6b63;font-size:4.6cqi}
.va__next{display:grid;gap:1cqi;padding:5cqi;border-radius:5cqi;background:#16201c;color:#fbf8f1}
.va__next b{font-family:var(--f-display);font-size:7cqi;font-weight:500}
.va__k{font:4cqi var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--signal)}
.va__tiles{display:grid;grid-template-columns:1fr 1fr;gap:3cqi}
.va__tiles div{display:grid;padding:4cqi;border-radius:4cqi;background:#efe9dc}
.va__tiles span,.va__slot span{color:#5b6b63;font-size:4.4cqi}
.va__days{display:flex;justify-content:space-between}
.va__days span{display:grid;justify-items:center;gap:1cqi;width:14cqi;padding:2.5cqi 0;border-radius:4cqi;font-size:4cqi;color:#5b6b63}
.va__days i{font-style:normal;font-weight:600;font-size:5.4cqi;color:#16201c}
.va__days .on{background:#16201c;color:#adc3b7}
.va__days .on i{color:#fbf8f1}
.va__slot{display:flex;justify-content:space-between;padding:4cqi;border-radius:4cqi;background:#efe9dc}
.va__slot--full{opacity:.45}
.va__slot--on{background:var(--signal-doux);box-shadow:inset 0 0 0 .5cqi var(--signal)}
.va__btn{margin-top:auto;margin-bottom:3cqi;padding:4cqi;border-radius:8cqi;background:var(--signal);text-align:center;font-weight:600}
.va__ring{position:relative;width:46cqi;margin:2cqi auto 0}
.va__ring svg{width:100%;transform:rotate(-90deg)}
.va__ring circle{fill:none;stroke:#e3ddd0;stroke-width:3.5}
.va__ring circle.on{stroke:var(--signal);stroke-dasharray:100.5;stroke-dashoffset:40;stroke-linecap:round}
.va__ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-size:13cqi;font-weight:500}
.va__center{text-align:center;color:#5b6b63;margin-top:-2cqi}
.va__row{display:flex;justify-content:space-between;padding:3.5cqi 0;border-bottom:1px solid #e3ddd0}
.va__tabs{display:flex;justify-content:space-around;padding:4cqi 6cqi 6cqi;background:#fbf8f1;border-top:1px solid #e3ddd0;border-radius:0 0 13cqi 13cqi}
.va__tabs span{width:6cqi;height:6cqi;border-radius:2cqi;background:#cfd6d2;transition:background-color .3s}
.va__tabs span.on{background:var(--signal);border-radius:50%}

/* marketing : composition de campagne */
.vm{position:relative;height:60cqi}
.vm>div{position:absolute;border-radius:2.5cqi;background:#fbf8f1;color:#16201c;box-shadow:0 2.5cqi 7cqi rgba(0,0,0,.3);transition:opacity .45s var(--ease-out),transform .55s var(--ease-out),box-shadow .45s;font-size:2.4cqi}
.vm__post{left:2%;top:3%;width:35%;padding:2.5cqi}
.vm__who{display:flex;align-items:center;gap:1.5cqi;margin-bottom:2cqi}
.vm__who i{width:4.5cqi;height:4.5cqi;border-radius:50%;background:linear-gradient(135deg,var(--signal),#f2b8a0)}
.vm__pic{position:relative;aspect-ratio:1;border-radius:1.6cqi;background:linear-gradient(160deg,#16302a,#2b5446);overflow:hidden;display:grid;place-items:end start;padding:2.5cqi}
.vm__shape{position:absolute;right:-12%;top:-12%;width:70%;aspect-ratio:1;border-radius:50%;background:var(--signal)}
.vm__pic p{position:relative;font-family:var(--f-display);font-size:4.2cqi;font-weight:500;color:#fbf8f1}
.vm__acts{display:flex;gap:1.5cqi;margin-top:2cqi}
.vm__acts i{width:3.2cqi;height:3.2cqi;border-radius:50%;border:.45cqi solid #16201c}
.vm__caption{margin-top:1.4cqi;font-size:2.2cqi;line-height:1.35}
.vm__search{left:41%;top:3%;width:57%;padding:3cqi}
.vm__q{display:flex;align-items:center;gap:2cqi;padding:1.6cqi 2.4cqi;border-radius:4cqi;border:1px solid #d7d0c2;margin-bottom:3cqi;font-size:2.4cqi}
.vm__q i{width:2.4cqi;height:2.4cqi;border-radius:50%;border:.45cqi solid #5b6b63}
.vm__res{display:grid;gap:.4cqi;margin-bottom:2cqi}
.vm__res:last-child{margin-bottom:0}
.vm__res b{font-size:2.9cqi;color:#1d4a3b}
.vm__res p{font-size:2cqi;line-height:1.4;color:#5b6b63}
.vm__url{font:2cqi var(--f-mono);color:#5b6b63}
.vm__res--dim{opacity:.6}
.vm__ad{left:41%;top:64%;width:57%;padding:2.6cqi 3cqi;outline:1px solid #2a4a3d;display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5cqi 3cqi;background:#16201c!important;color:#fbf8f1!important}
.vm__tag{grid-column:1/-1;font:1.8cqi var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.vm__ad b{font-family:var(--f-display);font-weight:500;font-size:2.8cqi}
.vm__btn{padding:1.3cqi 2.4cqi;border-radius:3cqi;background:var(--signal);color:var(--nuit);font-size:2.2cqi;font-weight:600}
.vm[data-channel] [data-ch]{opacity:.38;transform:scale(.96)}
.vm[data-channel="social"] [data-ch="social"],.vm[data-channel="search"] [data-ch="search"],.vm[data-channel="ads"] [data-ch="ads"]{opacity:1;transform:none;z-index:2;box-shadow:0 0 0 .5cqi var(--signal),0 4cqi 10cqi rgba(0,0,0,.45)}

/* vidéo : pellicule */
.vv{position:relative;padding:2cqi 0}
.vv__strip{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4cqi}
.vv__f{display:grid;gap:1.6cqi;color:var(--brume);font-size:2.4cqi}
.vv__n{font:1.8cqi var(--f-mono);color:var(--signal)}
.vv__art{aspect-ratio:9/12;border-radius:1.8cqi;border:1px solid #2a4a3d;background:#12291f;position:relative;overflow:hidden}
.vv__art::before,.vv__art::after{content:"";position:absolute}
.vv__f--0 .vv__art::before{inset:22% 18%;border-radius:1cqi;background:#fbf8f1;opacity:.9}
.vv__f--0 .vv__art::after{left:30%;right:30%;top:36%;height:.8cqi;background:#adc3b7;box-shadow:0 2.4cqi 0 #adc3b7,0 4.8cqi 0 var(--signal)}
.vv__f--1 .vv__art::before{left:16%;right:16%;top:18%;height:1cqi;background:#adc3b7;opacity:.6;box-shadow:0 3cqi 0 #adc3b7,0 6cqi 0 #adc3b7,0 9cqi 0 #adc3b7,0 12cqi 0 #adc3b7}
.vv__f--2 .vv__art{background:linear-gradient(180deg,#f2c14e,#e2622f 60%,#7a2e16)}
.vv__f--2 .vv__art::before{left:-10%;right:-10%;bottom:0;height:42%;background:#12291f;clip-path:polygon(0 40%,12% 40%,12% 10%,26% 10%,26% 50%,40% 50%,40% 0,55% 0,55% 35%,70% 35%,70% 15%,85% 15%,85% 45%,100% 45%,100% 100%,0 100%)}
.vv__f--3 .vv__art{background:linear-gradient(160deg,#8ed9c6,#2f7d78)}
.vv__f--3 .vv__art::before{left:36%;right:36%;top:22%;bottom:22%;border-radius:2cqi;background:#fbf8f1}
.vv__f--3 .vv__art::after{left:36%;right:36%;top:44%;height:14%;background:var(--signal)}
.vv__track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:2.4cqi;margin-top:3cqi;height:3cqi}
.vv__track span{border-radius:1cqi;background:#2a4a3d}
.vv__head{position:absolute;top:-2cqi;bottom:-2cqi;left:0;width:.5cqi;background:var(--signal);border-radius:1cqi;box-shadow:0 0 2cqi var(--signal)}
.vv__formats{display:flex;justify-content:center;gap:2cqi;margin-top:4cqi}
.vv__formats span{padding:1cqi 2.4cqi;border-radius:3cqi;border:1px solid #2a4a3d;font:2cqi var(--f-mono);color:var(--lichen)}
.is-open .demo--vid .vv__head,.xd .demo--vid.is-in .vv__head{animation:playhead 5s var(--ease-io) .4s both}
@keyframes playhead{from{left:0}to{left:calc(100% - .5cqi)}}

/* formation : aperçu pédagogique */
.demo--form .demo__stage{padding:5%}
.vf{position:relative;display:grid;gap:3.4cqi;padding:5cqi;border-radius:2.6cqi;background:#fbf8f1;color:#16201c;box-shadow:0 3cqi 8cqi rgba(0,0,0,.35);--focus:var(--signal-fonce)}
.vf__k{font-size:max(.6875rem,2.2cqi);color:var(--signal-fonce);letter-spacing:.1em}
.vf__t{font-family:var(--f-display);font-size:max(1rem,4.6cqi);font-weight:500;line-height:1.15;letter-spacing:-.03em;margin-top:-1.5cqi}
.vf__steps{display:grid;gap:1.6cqi;margin:0;padding:0;border:0;min-width:0}
.vf__step{position:relative;display:flex;align-items:center;gap:2.6cqi;min-height:2.75rem;padding:1.6cqi 2.4cqi;border-radius:1.8cqi;background:#efe9dc;font-size:max(.875rem,2.7cqi);cursor:pointer;transition:background-color var(--t-micro)}
.vf__step:hover{background:#e6dfcf}
.vf__step input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}
.vf__box{display:grid;place-items:center;flex:none;width:1.4rem;height:1.4rem;border-radius:.4rem;border:1.5px solid #5b6b63;background:#fff;transition:background-color var(--t-micro),border-color var(--t-micro)}
.vf__box .ico{width:.95rem;height:.95rem;color:#fff;opacity:0;transform:scale(.6);transition:opacity var(--t-micro),transform var(--t-micro) var(--ease-out)}
.vf__step input:checked+.vf__box{background:var(--signal-fonce);border-color:var(--signal-fonce)}
.vf__step input:checked+.vf__box .ico{opacity:1;transform:none}
.vf__step input:checked~span:last-child{color:#5b6b63}
.vf__step input:focus-visible+.vf__box{outline:2px solid var(--signal-fonce);outline-offset:3px}
.vf__chips{display:flex;flex-wrap:wrap;gap:1.4cqi}
.vf__chips span{padding:.8cqi 2cqi;border-radius:3cqi;border:1px solid #d7d0c2;font:max(.6875rem,2cqi) var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#3d5248}
.vf__prog{display:flex;align-items:center;gap:2.4cqi;font-size:max(.8125rem,2.4cqi);color:#3d5248}
.vf__bar{flex:1;height:.6rem;border-radius:1rem;background:#e3ddd0;overflow:hidden}
.vf__bar i{display:block;height:100%;width:var(--p,25%);background:var(--signal);border-radius:inherit;transition:width .5s var(--ease-out)}

/* ================= Réalisations ================= */
.works{display:grid;gap:clamp(4.5rem,9vw,9rem)}
.work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:2rem;align-items:center}
.work__media{grid-column:1/span 8}
.work__body{grid-column:9/-1}
.work--rev .work__media{grid-column:5/-1;grid-row:1}
.work--rev .work__body{grid-column:1/span 4;grid-row:1}
.work__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-bottom:1.25rem}
.work__meta .mono{font-size:.6875rem;color:var(--fg-2)}
.work__t{font-family:var(--f-display);font-size:clamp(1.6rem,1rem + 2vw,2.6rem);font-weight:500;letter-spacing:-.03em;line-height:1.1}
.work__sub{margin-top:.5rem;color:var(--fg-2);font-size:1.0625rem}
.work__dl{display:grid;gap:1.25rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.work__dl dt{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-t);margin-bottom:.35rem}
.work__dl dd{font-size:.9375rem;line-height:1.55;color:var(--fg)}
.work__dl ul{display:grid;gap:.2rem;padding:0;list-style:none}
.work__dl li::before{content:"· ";color:var(--fg-2)}
.work__cols{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}

.pv{position:relative;aspect-ratio:16/10.5;border-radius:var(--r-l);overflow:hidden;container-type:inline-size;isolation:isolate;transform:translateZ(0)}
.pv__in{position:absolute;inset:0}
.pv__layer,.pv__float{position:absolute;translate:0 calc(var(--py,0) * var(--k,0) * 1px);will-change:translate}
.work__media .pv{transition:transform .7s var(--ease-out),clip-path 1.5s var(--ease-out)}
.m-browser{border-radius:1.2cqi;overflow:hidden;background:#fbf8f2;box-shadow:0 2cqi 6cqi rgba(0,0,0,.22)}
.m-browser__bar{display:flex;align-items:center;gap:.7cqi;height:3.2cqi;padding:0 1.6cqi;background:#ece5d8}
.m-browser__bar i{width:.9cqi;height:.9cqi;border-radius:50%;background:#cbbfa9}
.m-browser__bar span{margin:0 auto;font:1.15cqi var(--f-mono);color:#7d7465;padding:.3cqi 2cqi;border-radius:2cqi;background:#f7f2e9}
.m-phone{aspect-ratio:9/19;padding:.7cqi;border-radius:3.4cqi;background:#1b1a17;box-shadow:0 2.5cqi 6cqi rgba(0,0,0,.35),inset 0 0 0 .25cqi #3a3832}
.m-phone__in{height:100%;border-radius:2.8cqi;overflow:hidden;display:flex;flex-direction:column;gap:1.3cqi;padding:3.6cqi 1.8cqi 1.8cqi;font-size:1.15cqi}

/* Atelier Sillage */
.pv--sillage{background:radial-gradient(70% 90% at 80% 20%,#f2eadc,#e2d6c1)}
.pv-s__web{left:5%;top:9%;width:65%}
.pv-s__page{padding:2.2cqi 2.6cqi 2.6cqi;color:#2b2a24;font-size:1.1cqi}
.pv-s__nav{display:flex;align-items:center;gap:2.2cqi}
.pv-s__nav b{margin-right:auto;font-family:var(--f-display);font-size:1.15cqi;font-weight:500;letter-spacing:.24em}
.pv-s__bag{padding:.4cqi 1.2cqi;border-radius:2cqi;background:#3e5b3f;color:#f6efe2}
.pv-s__hero{display:grid;grid-template-columns:1.05fr 1fr;gap:2.6cqi;margin-top:2.4cqi;align-items:center}
.pv-s__shot{position:relative;aspect-ratio:1/1.02;border-radius:1cqi;background:radial-gradient(60% 60% at 50% 60%,#efe3cc,#d6c3a1);display:grid;place-items:center;overflow:hidden}
.pv-s__tin{position:relative;z-index:1;width:42%;aspect-ratio:1/1.45;border-radius:1.6cqi 1.6cqi 1cqi 1cqi;background:linear-gradient(90deg,#2f4a30,#4c6e4c 45%,#2f4a30);box-shadow:0 2cqi 3cqi rgba(43,42,36,.3);display:grid;place-items:center}
.pv-s__tin i{width:84%;padding:1cqi .6cqi;background:#f3e9d8;font:italic 500 .95cqi/1.2 var(--f-body);text-align:center;color:#2b2a24}
.pv-s__leaf{position:absolute;width:30%;aspect-ratio:1/.5;border-radius:100% 0;background:#6e8a52;opacity:.85}
.pv-s__leaf.l1{left:6%;bottom:10%;transform:rotate(-20deg)}
.pv-s__leaf.l2{right:4%;top:12%;transform:rotate(150deg);background:#9cb07a}
.pv-s__k{font:1cqi var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#8c6a2c}
.pv-s__name{display:block;margin-top:.8cqi;font-family:var(--f-display);font-size:2.3cqi;font-weight:500;line-height:1.1;letter-spacing:-.03em}
.pv-s__info p{margin-top:1cqi;color:#5f584b;line-height:1.4}
.pv-s__opts{display:flex;gap:.8cqi;margin-top:1.6cqi}
.pv-s__opts span{padding:.5cqi 1.4cqi;border-radius:2cqi;border:1px solid #cbbfa9}
.pv-s__opts .on{background:#2b2a24;color:#f6efe2;border-color:#2b2a24}
.pv-s__add{display:inline-block;margin-top:1.8cqi;padding:1cqi 2.4cqi;border-radius:2cqi;background:#d99a3d;color:#2b2a24;font-weight:600}
.pv-s__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqi;margin-top:2.4cqi}
.pv-s__thumbs div{display:flex;align-items:center;gap:1cqi;padding:1cqi;border-radius:.8cqi;background:#f1e9da}
.pv-s__thumbs span{width:3cqi;height:3cqi;border-radius:50%;background:#6e8a52}
.pv-s__thumbs div:nth-child(2) span{background:#b5623b}
.pv-s__thumbs div:nth-child(3) span{background:#d9b43d}
.pv-s__phone{left:72%;top:13%;width:21.5%}
.pv-s__phone .m-phone__in{background:#fbf8f2;color:#2b2a24}
.pv-s__steps{display:flex;justify-content:space-between;font-size:.95cqi;color:#8d8475;padding-bottom:1cqi;border-bottom:1px solid #e9e1d2}
.pv-s__steps .on{color:#2b2a24;font-weight:600}
.pv-s__line{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1cqi;padding:1cqi;border-radius:1cqi;background:#f1e9da}
.pv-s__mini{width:3.2cqi;height:3.8cqi;border-radius:.6cqi;background:#3e5b3f}
.pv-s__mini.m1{background:#9cb07a}
.pv-s__line b{font-weight:600;line-height:1.2}
.pv-s__line i{font-style:normal;color:#8d8475}
.pv-s__total{display:flex;justify-content:space-between;margin-top:auto;padding-top:1cqi;border-top:1px solid #e9e1d2}
.pv-s__pay{padding:1.3cqi;border-radius:2cqi;background:#2b2a24;color:#f6efe2;text-align:center;font-weight:600}
.pv-s__f1{left:62%;top:74%;width:9cqi;aspect-ratio:1/.5;border-radius:100% 0;background:#6e8a52;rotate:-30deg;opacity:.9}

/* Studio Mouvement */
.pv--mouvement{background:radial-gradient(50% 60% at 50% 45%,#3a2f57,#1d1829 75%)}
.pv-m__p{width:21cqi;top:9%}
.pv-m__p0{left:14%;top:15%;rotate:-7deg}
.pv-m__p1{left:39.5%;z-index:2}
.pv-m__p2{left:65%;top:15%;rotate:7deg}
.pv--mouvement .m-phone{background:#0f0c16;box-shadow:0 3cqi 7cqi rgba(0,0,0,.5),inset 0 0 0 .25cqi #3d3552}
.pv--mouvement .m-phone__in{background:#f5f0e8;color:#1b1726;gap:1.4cqi}
.pv-m__hi{font-family:var(--f-display);font-size:2cqi;font-weight:500;letter-spacing:-.03em}
.pv-m__card{display:grid;gap:.4cqi;padding:1.8cqi;border-radius:1.6cqi;background:#2c2341;color:#f5f0e8}
.pv-m__card span{font:.9cqi var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:#c6b6ff}
.pv-m__card b{font-family:var(--f-display);font-size:1.9cqi;font-weight:500}
.pv-m__card i{font-style:normal;opacity:.75}
.pv-m__lbl{font:.95cqi var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:#7a7191;margin-top:.6cqi}
.pv-m__row{display:flex;justify-content:space-between;padding:1.1cqi 0;border-bottom:1px solid #e3dccf}
.pv-m__row span{color:#7a7191}
.pv-m__days{display:flex;justify-content:space-between;gap:.4cqi}
.pv-m__days span{display:grid;justify-items:center;gap:.3cqi;flex:1;padding:.9cqi 0;border-radius:1.2cqi;font-size:.95cqi;color:#7a7191}
.pv-m__days i{font-style:normal;font-weight:600;font-size:1.3cqi;color:#1b1726}
.pv-m__days .on{background:#2c2341;color:#c6b6ff}
.pv-m__days .on i{color:#f5f0e8}
.pv-m__slot{display:grid;gap:.2cqi;padding:1.3cqi 1.5cqi;border-radius:1.3cqi;background:#ebe4d8}
.pv-m__slot span{color:#7a7191;font-size:1.05cqi}
.pv-m__slot.full{opacity:.55}
.pv-m__slot.on{background:#e6defd;box-shadow:inset 0 0 0 .25cqi #6b55c9}
.pv-m__btn{margin-top:auto;padding:1.4cqi;border-radius:2cqi;background:#6b55c9;color:#fff;text-align:center;font-weight:600}
.pv-m__btn--ghost{margin-top:1cqi;background:none;color:#2c2341;box-shadow:inset 0 0 0 .25cqi #2c2341}
.pv-m__ok{display:grid;place-items:center;width:7cqi;height:7cqi;margin:4cqi auto 0;border-radius:50%;background:#6b55c9;color:#fff}
.pv-m__ok .ico{width:3.6cqi;height:3.6cqi;stroke-width:2.5}
.pv-m__done{font-family:var(--f-display);font-size:1.9cqi;font-weight:500;text-align:center;letter-spacing:-.02em;margin-top:1cqi}
.pv-m__meta{text-align:center;color:#7a7191;line-height:1.5}
.pv-m__note{text-align:center;font-size:1cqi;color:#7a7191}

/* Brise */
.pv--brise{background:radial-gradient(70% 80% at 30% 30%,#e3f6ef,#bfe3d6)}
.pv-b__wide{left:5%;top:10%;width:58%;aspect-ratio:16/9;border-radius:1.4cqi;overflow:hidden;background:#0e3b3d;box-shadow:0 2.5cqi 6cqi rgba(14,59,61,.35)}
.pv-b__scene{position:absolute;inset:0;background:linear-gradient(180deg,#f7d27a 0%,#f2a65a 55%,#e07a4a 100%)}
.pv-b__sun{position:absolute;left:62%;top:14%;width:13cqi;aspect-ratio:1;border-radius:50%;background:#fff3c9;box-shadow:0 0 6cqi #ffe39a}
.pv-b__city{position:absolute;left:0;right:0;bottom:0;height:46%;background:#0e3b3d;clip-path:polygon(0 45%,8% 45%,8% 20%,16% 20%,16% 52%,24% 52%,24% 8%,33% 8%,33% 40%,42% 40%,42% 25%,50% 25%,50% 55%,60% 55%,60% 12%,68% 12%,68% 38%,78% 38%,78% 22%,88% 22%,88% 48%,100% 48%,100% 100%,0 100%)}
.pv-b__can{position:absolute;display:grid;place-items:center;border-radius:1.2cqi;background:linear-gradient(90deg,#5fb8a6,#a7e8d8 40%,#5fb8a6);box-shadow:inset 0 1.2cqi 0 #d9f5ee,inset 0 -1.2cqi 0 #3d9584}
.pv-b__can i{font:italic 600 1.5cqi var(--f-display);color:#0e3b3d;letter-spacing:-.02em}
.pv-b__wide .pv-b__can{left:22%;bottom:12%;width:7cqi;height:13cqi}
.pv-b__wind{position:absolute;height:.5cqi;border-radius:1cqi;background:rgba(255,255,255,.75)}
.pv-b__wind.w1{left:34%;top:56%;width:22%}
.pv-b__wind.w2{left:40%;top:64%;width:30%;opacity:.6}
.pv-b__play{position:absolute;left:50%;top:44%;display:grid;place-items:center;width:6.5cqi;height:6.5cqi;margin:-3.25cqi 0 0 -3.25cqi;border-radius:50%;background:rgba(14,59,61,.65);color:#fff;backdrop-filter:blur(4px)}
.pv-b__play .ico{width:2.8cqi;height:2.8cqi}
.pv-b__sub{position:absolute;left:0;right:0;bottom:12%;text-align:center}
.pv-b__sub{font:500 1.6cqi var(--f-body);color:#fff;text-shadow:0 .2cqi .6cqi rgba(0,0,0,.5)}
.pv-b__time{position:absolute;left:3%;right:3%;bottom:5%;height:.5cqi;border-radius:1cqi;background:rgba(255,255,255,.35)}
.pv-b__time i{display:block;width:38%;height:100%;border-radius:inherit;background:#fff}
.pv-b__fmt{position:absolute;right:2.2cqi;top:2cqi;padding:.3cqi 1cqi;border-radius:2cqi;background:rgba(14,59,61,.75);font:1cqi var(--f-mono);color:#e3f6ef}
.pv-b__story{left:68%;top:7%;width:19cqi;aspect-ratio:9/16;border-radius:1.8cqi;overflow:hidden;background:linear-gradient(180deg,#0e3b3d,#1d6a64);box-shadow:0 2.5cqi 6cqi rgba(14,59,61,.4);padding:1.6cqi;display:flex;flex-direction:column;align-items:center}
.pv-b__bars{display:flex;gap:.5cqi;width:100%}
.pv-b__bars i{flex:1;height:.35cqi;border-radius:1cqi;background:rgba(255,255,255,.35)}
.pv-b__bars i.on{background:#fff}
.pv-b__can--lg{position:relative;width:7.5cqi;height:14cqi;margin-top:4.5cqi}
.pv-b__h{margin-top:auto;font:500 1.9cqi/1.15 var(--f-display);letter-spacing:-.03em;color:#fff;text-align:center}
.pv-b__cta{margin:1.6cqi 0 .8cqi;padding:.9cqi 2.2cqi;border-radius:2cqi;background:#f2c14e;color:#0e3b3d;font-size:1.1cqi;font-weight:600}
.pv-b__story .pv-b__fmt{top:auto;bottom:auto;right:1.2cqi;top:2.6cqi}
.pv-b__post{left:42%;top:57%;width:20cqi;border-radius:1.4cqi;background:#fff;padding:1cqi;box-shadow:0 2.5cqi 6cqi rgba(14,59,61,.3)}
.pv-b__pic{position:relative;aspect-ratio:1;border-radius:1cqi;background:linear-gradient(160deg,#f7d27a,#e07a4a)}
.pv-b__can--sm{left:40%;top:22%;width:4.5cqi;height:8.6cqi}
.pv-b__post p{margin-top:1cqi;font-size:1.1cqi;color:#0e3b3d;font-weight:500}
.pv-b__post .pv-b__fmt{top:2cqi;right:2cqi}
.pv-b__bubble{border-radius:50%;border:.35cqi solid rgba(14,59,61,.25)}
.pv-b__bubble.b1{left:88%;top:68%;width:5cqi;aspect-ratio:1}
.pv-b__bubble.b2{left:30%;top:80%;width:3cqi;aspect-ratio:1}

/* Cabinet Horizon */
.pv--horizon{background:radial-gradient(70% 80% at 70% 30%,#f6f3ec,#e4ddcf)}
.pv-h__slide{left:6%;top:9%;width:58%;aspect-ratio:16/9;padding:3.6cqi 4cqi;border-radius:1.4cqi;background:#1f2b45;color:#f3efe6;box-shadow:0 2.5cqi 6cqi rgba(31,43,69,.3);display:flex;flex-direction:column}
.pv-h__k{font:1.1cqi var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#7cc4bd}
.pv-h__t{margin-top:1.4cqi;font:500 3.3cqi/1.08 var(--f-display);letter-spacing:-.035em}
.pv-h__slide ul{display:grid;gap:1cqi;margin-top:auto;padding:0;list-style:none;font-size:1.45cqi}
.pv-h__slide li{display:flex;align-items:center;gap:1.2cqi}
.pv-h__slide li::before{content:"";width:1cqi;height:1cqi;border-radius:50%;background:#7cc4bd}
.pv-h__pg{position:absolute;right:3cqi;bottom:3cqi;font:1cqi var(--f-mono);color:#8e98ad}
.pv-h__card{left:52%;top:43%;width:29cqi;padding:2.2cqi;border-radius:1.4cqi;background:#fff;color:#1f2b45;box-shadow:0 2.5cqi 6cqi rgba(31,43,69,.22);font-size:1.3cqi}
.pv-h__card .pv-h__k{color:#2f7d78}
.pv-h__card b{display:block;margin-top:.6cqi;font:500 2cqi var(--f-display);letter-spacing:-.02em}
.pv-h__chips{display:flex;flex-wrap:wrap;gap:.7cqi;margin:1.4cqi 0 .4cqi}
.pv-h__chips span{padding:.4cqi 1.2cqi;border-radius:2cqi;background:#e5f2f0;color:#1f5f5b;font-size:1.05cqi;font-weight:500}
.pv-h__example{margin-top:1.2cqi;font-size:1.2cqi;line-height:1.45}
.pv-h__doc{left:69%;top:8%;width:24cqi;padding:2.2cqi;border-radius:.8cqi;background:#fff;color:#1f2b45;box-shadow:0 2cqi 5cqi rgba(31,43,69,.18);font-size:1.25cqi;rotate:3deg}
.pv-h__doc b{display:block;padding-bottom:1.2cqi;margin-bottom:1.2cqi;border-bottom:1px solid #e4ddcf;font:500 1.55cqi var(--f-display)}
.pv-h__doc p{display:flex;align-items:center;gap:1cqi;margin-top:.9cqi}
.pv-h__doc .ico{width:1.8cqi;height:1.8cqi;color:#2f7d78;stroke-width:2.5}
.pv-h__note{left:9%;top:75%;padding:1.6cqi 2.2cqi;background:#f4d36b;color:#3b3220;font:italic 500 1.4cqi var(--f-body);rotate:-3deg;box-shadow:0 1.5cqi 3cqi rgba(31,43,69,.15)}

/* ================= Storyboard vidéo IA ================= */
.sec--video{background:radial-gradient(60% 50% at 30% 35%,rgba(226,98,47,.08),transparent 70%),var(--nuit)}
.sb{display:grid;grid-template-columns:minmax(0,7.6fr) minmax(0,4.4fr);gap:1.5rem var(--col-gap);align-items:end}
.sb__screen{grid-column:1;grid-row:1;position:relative;aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;background:#0d2b2a;border:1px solid var(--filet);container-type:inline-size;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.sb__badge{position:absolute;left:2.4cqi;top:2.4cqi;z-index:3;padding:.6cqi 1.6cqi;border-radius:3cqi;background:rgba(6,18,14,.7);font-size:max(.625rem,1.25cqi);color:var(--brume);letter-spacing:.1em;backdrop-filter:blur(6px)}
.sb__count{position:absolute;right:2.4cqi;top:2.4cqi;z-index:3;font-size:max(.625rem,1.25cqi);color:var(--lichen)}
.sb__count b{color:var(--brume);font-weight:500}
.sb__scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ease-out),visibility 0s .5s}
.sb__scene.is-on{opacity:1;visibility:visible;transition:opacity .5s var(--ease-out)}
.sb__ui{grid-column:1/-1;grid-row:2;display:flex;align-items:stretch;gap:1rem}
.sb__ctrls{display:flex;gap:.4rem;align-items:center}
.sb__btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line-2);background:none;color:var(--fg);transition:border-color var(--t-micro),background-color var(--t-micro)}
.sb__btn:hover{border-color:var(--fg)}
.sb__btn--play{width:3.25rem;height:3.25rem;background:var(--signal);border-color:var(--signal);color:var(--nuit)}
.sb__btn--play:hover{background:#ef7445}
.sb__btn .ico{width:1.1rem;height:1.1rem}
.sb__btn--play .i-pause,.sb__btn--play[aria-pressed="true"] .i-play{display:none}
.sb__btn--play[aria-pressed="true"] .i-pause{display:block}
.sb__tabs{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem}
.sb__tabs [role="tab"]{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.15rem .6rem;min-height:3.25rem;padding:.55rem .75rem .7rem;border:1px solid var(--line);border-radius:var(--r-s);background:none;text-align:left;color:var(--fg-2);transition:border-color var(--t-micro),color var(--t-micro),background-color var(--t-micro)}
.sb__tabs [role="tab"]:hover{color:var(--fg);border-color:var(--line-2)}
.sb__tabs [aria-selected="true"]{color:var(--fg);border-color:var(--line-2);background:var(--surface)}
.sb__n{font-size:.6875rem;color:var(--accent-t)}
.sb__t{font-size:.875rem;font-weight:500;line-height:1.2}
.sb__p{grid-column:1/-1;height:2px;margin-top:.35rem;border-radius:2px;background:var(--line);overflow:hidden}
.sb__p i{display:block;height:100%;width:100%;background:var(--signal);transform-origin:left;transform:scaleX(0)}
.sb__tabs [aria-selected="true"] .sb__p i{transform:scaleX(1)}
.sb.is-playing .sb__tabs [aria-selected="true"] .sb__p i{animation:sb-progress var(--sb-dur,5.5s) linear both}
.sb.is-held .sb__tabs [aria-selected="true"] .sb__p i{animation-play-state:paused}
@keyframes sb-progress{from{transform:scaleX(0)}}
.sb__panel{grid-column:2;grid-row:1;padding-bottom:.25rem;outline:none}
.sb__panel:focus-visible{outline:2px solid var(--focus);outline-offset:8px}
.sb__ph{font-family:var(--f-display);font-size:clamp(1.5rem,1rem + 1.6vw,2.4rem);font-weight:500;letter-spacing:-.03em;line-height:1.1;margin-bottom:1rem}
.sb__panel p{color:var(--fg-2)}
.sb__out{display:flex;flex-direction:column;gap:.3rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--fg)!important;font-weight:500}
.sb__out .mono{font-size:.6875rem;color:var(--accent-t);font-weight:400}
.video__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2rem;margin-top:clamp(2.5rem,4vw,3.5rem)}

/* scènes (unités relatives à l'écran) */
.sc{position:absolute;inset:0;padding:8cqi 6cqi 5cqi;color:#e6f6f1;font-size:1.9cqi}
.sc-k{display:block;font:1.3cqi var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#8ed9c6;margin-bottom:1cqi}
.sc--idee{background:radial-gradient(60% 70% at 70% 40%,#16504c,#0d2b2a)}
.sc-brief{position:absolute;left:6cqi;top:12cqi;width:38cqi;padding:3cqi;border-radius:1.6cqi;background:#f6f3ec;color:#0e3b3d;box-shadow:0 2cqi 5cqi rgba(0,0,0,.3)}
.sc-brief .sc-k{color:#2f7d78}
.sc-brief p{margin-top:1.2cqi;font-size:1.75cqi}
.sc-brief b{display:inline-block;width:10cqi;font-weight:600}
.sc-notes span{position:absolute;padding:2cqi 2.4cqi;font:500 1.8cqi var(--f-body);color:#0e3b3d;box-shadow:0 1.5cqi 3cqi rgba(0,0,0,.25)}
.sc-notes span:nth-child(1){left:52cqi;top:12cqi;background:#f4d36b;rotate:-4deg}
.sc-notes span:nth-child(2){left:70cqi;top:16cqi;background:#8ed9c6;rotate:5deg}
.sc-notes span:nth-child(3){left:84cqi;top:11cqi;background:#f2a68a;rotate:-2deg}
.sc-concept{position:absolute;left:50cqi;right:6cqi;bottom:9cqi;padding:3cqi;border-radius:1.6cqi;border:1px solid rgba(142,217,198,.4);background:rgba(14,59,61,.6);font:500 3.4cqi/1.15 var(--f-display);letter-spacing:-.03em;color:#fff}
.sc--script{background:#0d2b2a}
.sc-row{display:grid;grid-template-columns:9cqi 1fr 1fr;gap:3cqi;align-items:baseline;padding:3.2cqi 0;font-size:2.15cqi;border-bottom:1px solid rgba(142,217,198,.18)}
.sc-tc{font:1.6cqi var(--f-mono);color:#f4d36b}
.sc-row i{color:#8ed9c6}
.sc--gen{background:#0b2423;display:flex;flex-direction:column;gap:2.4cqi}
.sc-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:2cqi}
.sc-shot{position:relative;border-radius:1.2cqi;overflow:hidden;background:#123b39}
.sc-art{position:absolute;inset:0}
.sc-shot--city .sc-art,.sc-art--city{background:linear-gradient(180deg,#f7d27a,#f2a65a 55%,#e07a4a)}
.sc-shot--city .sc-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:#0e3b3d;clip-path:polygon(0 40%,15% 40%,15% 10%,30% 10%,30% 45%,45% 45%,45% 0,62% 0,62% 30%,78% 30%,78% 15%,100% 15%,100% 100%,0 100%)}
.sc-shot--can .sc-art{background:radial-gradient(circle at 30% 30%,#c8f1e6,#5fb8a6)}
.sc-shot--can .sc-art::after,.sc-shot--pack .sc-art::after,.sc-art--pack::after{content:"brise";position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1/1.8;translate:-50% -50%;display:grid;place-items:center;border-radius:1cqi;background:linear-gradient(90deg,#5fb8a6,#a7e8d8 40%,#5fb8a6);box-shadow:inset 0 .8cqi 0 #d9f5ee,inset 0 -.8cqi 0 #3d9584;font:italic 600 1.3cqi var(--f-display);color:#0e3b3d}
.sc-shot--wind .sc-art{background:linear-gradient(180deg,#f9e0a6,#f2b277)}
.sc-shot--wind .sc-art::before,.sc-shot--wind .sc-art::after{content:"";position:absolute;left:15%;right:20%;top:42%;height:.5cqi;border-radius:1cqi;background:#fff;box-shadow:2cqi 2.4cqi 0 rgba(255,255,255,.7),-1cqi 4.8cqi 0 rgba(255,255,255,.5)}
.sc-shot--pack .sc-art,.sc-art--pack{background:linear-gradient(160deg,#c8f1e6,#3d9584)}
.sc-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(142,217,198,.55) 48%,rgba(255,255,255,.9) 50%,transparent 52%) 0 -100%/100% 200% no-repeat}
.sc-ok{position:absolute;right:1cqi;top:1cqi;display:grid;place-items:center;width:3cqi;height:3cqi;border-radius:50%;background:#f4d36b;color:#0e3b3d}
.sc-ok .ico{width:1.8cqi;height:1.8cqi;stroke-width:3}
.sc-prompt{padding:2cqi 2.4cqi;border-radius:1.2cqi;background:rgba(142,217,198,.08);border:1px solid rgba(142,217,198,.25);font:1.6cqi var(--f-mono);color:#cfeee6}
.sc-prompt .sc-k{display:inline;margin-right:1.4cqi}
.sc-caret{display:inline-block;width:.8cqi;height:2cqi;margin-left:.4cqi;vertical-align:middle;background:#8ed9c6;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.sc--edit{background:#0b2423;display:flex;flex-direction:column;gap:2.4cqi}
.sc-preview{position:relative;flex:1;border-radius:1.2cqi;overflow:hidden}
.sc-preview p{position:absolute;left:0;right:0;bottom:2.4cqi;text-align:center;font:500 2.2cqi var(--f-body);color:#fff;text-shadow:0 .2cqi .8cqi rgba(0,0,0,.6)}
.sc-tl{position:relative;display:grid;gap:1cqi}
.sc-track{display:grid;grid-template-columns:12cqi 1fr;align-items:center;gap:2cqi}
.sc-tn{font:1.2cqi var(--f-mono);color:#8ed9c6;letter-spacing:.06em;text-transform:uppercase}
.sc-segs{display:flex;gap:.5cqi;height:2.6cqi}
.sc-segs i{flex:var(--w) 0 0;border-radius:.5cqi;background:#2f7d78}
.sc-segs i.gap{background:transparent}
.sc-track:nth-child(2) .sc-segs i{background:#f4d36b}
.sc-track:nth-child(3) .sc-segs i{background:repeating-linear-gradient(90deg,#8ed9c6 0 .3cqi,transparent .3cqi .8cqi);opacity:.7}
.sc-track:nth-child(4) .sc-segs i{background:#e6f6f1;opacity:.7}
.sc-head{position:absolute;top:-1cqi;bottom:-1cqi;left:14cqi;width:.35cqi;background:#f2622f;box-shadow:0 0 1.5cqi #f2622f}
.sc--fmt{background:radial-gradient(60% 70% at 50% 40%,#16504c,#0d2b2a);display:flex;align-items:flex-end;justify-content:center;gap:4cqi;padding-bottom:7cqi}
.sc-f{display:grid;justify-items:center;gap:.6cqi;font-size:1.5cqi;color:#cfeee6}
.sc-f b{font:500 1.8cqi var(--f-mono);color:#fff;margin-top:1cqi}
.sc-fr{position:relative;border-radius:1cqi;overflow:hidden;box-shadow:0 2cqi 4cqi rgba(0,0,0,.35)}
.sc-f--0 .sc-fr{width:38cqi;aspect-ratio:16/9}
.sc-f--1 .sc-fr{width:22cqi;aspect-ratio:1}
.sc-f--2 .sc-fr{width:17cqi;aspect-ratio:9/16}
.sc-preview .sc-art--pack::after,.sc-f .sc-art--pack::after{width:auto;height:66%}

/* animations des scènes, uniquement sur la scène active */
.sb__scene.is-on .sc-brief{animation:pop-l .7s var(--ease-out) both}
.sb__scene.is-on .sc-notes span{animation:pop .5s var(--ease-out) both}
.sb__scene.is-on .sc-notes span:nth-child(1){animation-delay:.5s}
.sb__scene.is-on .sc-notes span:nth-child(2){animation-delay:.7s}
.sb__scene.is-on .sc-notes span:nth-child(3){animation-delay:.9s}
.sb__scene.is-on .sc-concept{animation:pop .7s var(--ease-out) 1.6s both}
.sb__scene.is-on .sc-row{animation:row-in .6s var(--ease-out) both;animation-delay:calc(.3s + var(--i) * .75s)}
.sb__scene.is-on .sc-scan{animation:scan 1.3s var(--ease-io) both;animation-delay:calc(.2s + var(--i) * .55s)}
.sb__scene.is-on .sc-art{animation:gen 1.3s var(--ease-out) both;animation-delay:calc(.2s + var(--i) * .55s)}
.sb__scene.is-on .sc-ok{animation:pop .4s var(--ease-out) both;animation-delay:calc(1.4s + var(--i) * .55s)}
.sb__scene.is-on .sc-head{animation:edit-head 5s linear .2s both}
.sb__scene.is-on .sc-f{animation:pop .6s var(--ease-out) both;animation-delay:calc(.3s + var(--i) * .45s)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.94)}}
@keyframes pop-l{from{opacity:0;transform:translateX(-24px)}}
@keyframes row-in{from{opacity:0;transform:translateY(8px)}}
@keyframes scan{from{background-position:0 -100%}to{background-position:0 200%}}
@keyframes gen{from{filter:blur(12px) saturate(.2);opacity:.35}}
@keyframes edit-head{from{left:14cqi}to{left:calc(100% - .4cqi)}}

/* ================= Méthode ================= */
.steps{position:relative;display:grid;gap:clamp(2.5rem,5vw,4.5rem);--rail-x:clamp(1.4rem,3vw,2.6rem)}
.steps__rail{position:absolute;left:var(--rail-x);top:1.6rem;bottom:1.6rem;width:2px;background:var(--line);translate:-1px 0}
.steps__rail i{position:absolute;inset:0;background:var(--accent-t);transform-origin:top;transform:scaleY(var(--prog,0))}
.step{position:relative;display:grid;grid-template-columns:calc(var(--rail-x) * 2) minmax(0,1fr);column-gap:clamp(1rem,3vw,3rem)}
.step__n{position:relative;z-index:1;display:grid;place-items:center;width:calc(var(--rail-x) * 2);height:calc(var(--rail-x) * 2);border-radius:50%;background:var(--bg);border:1.5px solid var(--line-2);font-family:var(--f-display);font-size:clamp(.95rem,.8rem + .8vw,1.5rem);font-weight:500;color:var(--fg-2);transition:background-color .5s var(--ease-out),color .5s,border-color .5s}
.step.is-on .step__n{background:var(--accent-t);border-color:var(--accent-t);color:var(--brume)}
.step__body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:.75rem clamp(1.5rem,4vw,4rem);padding-top:clamp(.4rem,1.2vw,1.2rem)}
.step__body .h3{font-size:clamp(1.3rem,1rem + 1.1vw,2.1rem)}
.step__body p{color:var(--fg-2)}
.step__out{position:relative;grid-column:2;display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.25rem;border-radius:var(--r-m);background:var(--surface);color:var(--fg)!important;font-weight:500}
.step__out .mono{font-size:.6875rem;color:var(--accent-t);font-weight:400}

/* ================= Formations ================= */
.fcards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--col-gap)}
.fcard{position:relative;grid-column:span 2;display:flex;flex-direction:column;gap:1rem;padding:clamp(1.5rem,2.5vw,2.25rem);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);transition:border-color var(--t-micro),transform .4s var(--ease-out)}
.fcard:nth-child(n+4){grid-column:span 3}
.fcard:hover{border-color:var(--line-2);transform:translateY(-3px)}
.fcard__n{font-size:.75rem;color:var(--accent-t)}
.fcard__t{font-family:var(--f-display);font-size:clamp(1.15rem,1rem + .5vw,1.45rem);font-weight:500;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.fcard dl{display:grid;gap:1rem;margin-top:.5rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.fcard dt{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);margin-bottom:.3rem}
.fcard dd{font-size:.9375rem;line-height:1.55}
.fcard dd ul{display:grid;gap:.3rem;padding-left:1.1rem}
.fcard dd li::marker{color:var(--accent-t)}
.formations__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:clamp(2.5rem,4vw,3.5rem);padding-top:2rem;border-top:1px solid var(--line)}
.formations__foot p{color:var(--fg-2);max-width:32em}

/* ================= FAQ ================= */
.faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:2.5rem}
.faq__aside{grid-column:1/span 4;align-self:start;position:sticky;top:calc(var(--hdr-h) + 2rem)}
.faq__aside .h2{margin-bottom:1.5rem;font-size:clamp(1.85rem,1rem + 2.2vw,3.1rem)}
.faq__aside p{color:var(--fg-2)}
.faq__list{grid-column:6/-1;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line);interpolate-size:allow-keywords}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4rem;padding:1.25rem 0;cursor:pointer;list-style:none;font-family:var(--f-display);font-size:clamp(1rem,.95rem + .35vw,1.25rem);font-weight:500;letter-spacing:-.01em;line-height:1.3}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover .qa__ico{border-color:var(--fg)}
.qa__ico{position:relative;flex:none;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--line-2);transition:background-color var(--t-micro),border-color var(--t-micro)}
.qa__ico::before,.qa__ico::after{content:"";position:absolute;left:50%;top:50%;width:.7rem;height:1.5px;background:currentColor;translate:-50% -50%}
.qa__ico::after{rotate:90deg;transition:rotate .3s var(--ease-out)}
.qa[open] .qa__ico{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.qa[open] .qa__ico::after{rotate:0deg}
.qa__a{padding:0 3.5rem 1.6rem 0;color:var(--fg-2)}
.qa::details-content{block-size:0;overflow:hidden;transition:block-size .35s var(--ease-out),content-visibility .35s allow-discrete}
.qa[open]::details-content{block-size:auto}

/* ================= Contact & formulaire ================= */
.contact{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:3rem}
.contact__aside{grid-column:1/span 5}
.contact__t{margin-bottom:1.5rem}
.contact__aside>.h3{margin-bottom:1.5rem}
.contact__form{grid-column:7/-1}
.sec--contact .contact__aside .lead{margin-bottom:2.5rem}
.next{display:grid;gap:1.25rem;counter-reset:n}
.next li{display:grid;grid-template-columns:2.5rem 1fr;gap:.25rem 1rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.next .mono{color:var(--accent-t);font-size:.75rem;padding-top:.2rem}
.next b{font-weight:500}
.next p{font-size:.9375rem;color:var(--fg-2);margin-top:.15rem}
.coords{display:grid;gap:.5rem;margin-top:2rem}
.coords a{text-underline-offset:.2em}
.contact__faq{margin-top:2rem;color:var(--fg-2);font-size:.9375rem}
.contact__faq a{color:var(--fg)}

.form{position:relative;padding:clamp(1.5rem,3vw,2.75rem);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.form__fields{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 1rem}
.form__intro,.form__errors,.form__foot,.form__status,.field--full{grid-column:1/-1}
.form__intro{font-size:.875rem;color:var(--fg-2)}
.req{color:var(--accent-t)}
.opt{margin-left:.35rem;font-weight:400;font-size:.8125rem;color:var(--fg-2)}
.field{display:grid;gap:.45rem;align-content:start}
.field label{font-size:.9375rem;font-weight:500}
.field input,.field select,.field textarea{width:100%;min-height:3.25rem;padding:.8rem 1rem;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--bg);color:var(--fg);font-size:1rem;line-height:1.4;transition:border-color var(--t-micro),box-shadow var(--t-micro)}
.field textarea{resize:vertical;min-height:9rem}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--fg-2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 30%,transparent)}
.field [aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.select{position:relative}
.select select{appearance:none;-webkit-appearance:none;padding-right:2.75rem;cursor:pointer}
.select::after{content:"";position:absolute;right:1.1rem;top:50%;width:.55rem;height:.55rem;border-right:1.5px solid var(--fg-2);border-bottom:1.5px solid var(--fg-2);translate:0 -70%;rotate:45deg;pointer-events:none}
.field__hint{font-size:.8125rem;color:var(--fg-2)}
.field__err{display:flex;gap:.4rem;align-items:center;font-size:.875rem;font-weight:500;color:var(--err)}
.field__err::before{content:"";flex:none;width:.4rem;height:.4rem;border-radius:50%;background:currentColor}
.field--trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__errors{padding:1rem 1.25rem;border-radius:var(--r-s);border:1px solid var(--err);color:var(--fg);font-size:.9375rem;outline:none}
.form__errors b{display:block;color:var(--err);margin-bottom:.35rem}
.form__errors ul{margin:0;padding-left:1.1rem}
.form__errors a{color:var(--fg)}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;margin-top:.5rem}
.form__legal{font-size:.8125rem;color:var(--fg-2);max-width:26em}
.form__legal a{color:var(--fg)}
.btn--submit{border:0}
.btn--submit:disabled{cursor:progress;opacity:.85}
.btn__spin{display:none;position:absolute;right:.375rem;width:calc(var(--h) - .75rem);height:calc(var(--h) - .75rem);border-radius:50%;background:var(--nuit)}
.btn__spin::after{content:"";position:absolute;inset:30%;border-radius:50%;border:2px solid var(--signal);border-right-color:transparent;animation:spin .8s linear infinite}
.is-sending .btn__spin{display:block}
@keyframes spin{to{rotate:360deg}}
.form__status{font-size:.9375rem;min-height:0}
.form__status:empty{display:none}
.form__status.is-error{display:flex;gap:.6rem;padding:1rem 1.25rem;border-radius:var(--r-s);background:color-mix(in srgb,var(--err) 12%,transparent);border:1px solid var(--err)}
.form__status.is-error::before{content:"!";flex:none;display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--err);color:var(--bg);font-weight:600;font-size:.8125rem}
.form__done{display:grid;justify-items:start;gap:1rem;padding:1rem 0;outline:none;animation:pop .6s var(--ease-out)}
.form__done-ico{display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--signal);color:var(--nuit)}
.form__done-ico .ico{width:1.6rem;height:1.6rem;stroke-width:2.25}
.form__done p{color:var(--fg-2)}
.form.is-done .form__fields{display:none}

/* ================= Pages intérieures ================= */
.phero{position:relative;padding:calc(var(--hdr-h) + clamp(3rem,8vw,7rem)) 0 calc(var(--sheet) + clamp(3.5rem,7vw,6rem));overflow:hidden;isolation:isolate}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 85% 30%,rgba(29,58,47,.6),transparent 70%)}
.phero__mark{position:absolute;right:calc(var(--gutter) * -1.5);bottom:calc(var(--sheet) + 1rem);width:min(42vw,600px);opacity:.1;z-index:-1;pointer-events:none}
.phero__mark .logo{width:100%;height:auto}
.phero__k{margin-bottom:1.75rem}
.phero__k .live-dot{margin-right:.25rem}
.phero__t{font-size:clamp(2.1rem,1rem + 4.2vw,5rem);font-weight:500;line-height:1.04;letter-spacing:-.04em;max-width:16ch}
.phero__lead{margin-top:clamp(1.5rem,3vw,2.25rem)}
.phero__ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.note--hero{margin-top:2rem;padding:1rem 1.25rem;border:1px solid var(--filet);border-radius:var(--r-m);background:rgba(11,31,24,.6)}
.anchors{margin-top:clamp(2.5rem,5vw,4rem)}
.anchors ul{display:flex;flex-wrap:wrap;gap:.5rem}
.anchors a{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;padding:0 1.1rem;border:1px solid var(--line-2);border-radius:99px;font-size:.9375rem;text-decoration:none;transition:border-color var(--t-micro),background-color var(--t-micro),color var(--t-micro)}
.anchors a .mono{font-size:.6875rem;color:var(--signal)}
.anchors a:hover{border-color:var(--brume);background:var(--brume);color:var(--nuit)}
.anchors a:hover .mono{color:var(--signal-fonce)}

.xd{padding:var(--sec-y) 0 calc(var(--sec-y) + var(--sheet))}
.xd__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:clamp(2.5rem,5vw,4rem);align-items:start}
.xd__head{grid-column:1/span 5;align-self:center}
.xd__head .h2{margin-bottom:1.25rem}
.xd__head .lead{color:var(--fg)}
.xd__head>p:not(.lead):not(.kicker){margin-top:1rem;color:var(--fg-2)}
.xd__head .btn{margin-top:2rem}
.xd__visual{grid-column:7/-1}
.xd__cols{grid-column:1/span 5;display:grid;gap:2.5rem}
.xd__cols .h4,.xd__presta .h4{margin-bottom:1.25rem}
.xd__presta{grid-column:7/-1}
.presta{display:grid;border-top:1px solid var(--line)}
.presta div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:.4rem 1.5rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.presta dt{font-weight:500}
.presta dd{color:var(--fg-2);font-size:.9375rem}
.xd__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.xd__deliv{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:baseline;color:var(--fg-2)}
.xd__deliv .mono{font-size:.6875rem;color:var(--accent-t)}
#formation .xd__visual{align-self:center}

.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:2.5rem;align-items:start}
.split>:first-child{grid-column:1/span 5}
.split>:last-child{grid-column:7/-1}
.split--visual{align-items:center}
.split .h2{margin-bottom:1.5rem}
.split__cap{color:var(--fg-2);font-size:.6875rem;margin-bottom:1rem}
.who{display:grid;border-top:1px solid var(--line)}
.who li{display:grid;gap:.3rem;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.who b{font-family:var(--f-display);font-weight:500;font-size:1.2rem;letter-spacing:-.02em}
.who span{color:var(--fg-2)}
.mini-steps{display:grid;gap:1.25rem;margin-top:2.5rem}
.mini-steps li{display:grid;grid-template-columns:2.5rem 1fr;gap:1rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.mini-steps .mono{color:var(--accent-t);font-size:.75rem;padding-top:.2rem}
.mini-steps b{font-weight:500}
.mini-steps p{color:var(--fg-2);font-size:.9375rem;margin-top:.15rem}

.manifesto .kicker{margin-bottom:2rem}
.manifesto__big{font-family:var(--f-display);font-size:clamp(1.5rem,1rem + 2.4vw,3.2rem);font-weight:400;line-height:1.18;letter-spacing:-.03em;max-width:24ch;text-wrap:balance}
.manifesto__cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap);margin-top:clamp(2.5rem,5vw,4rem);margin-left:auto;max-width:52rem;color:var(--fg-2)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap)}
.grid4 li{display:grid;align-content:start;gap:.85rem;padding-top:1.5rem;border-top:1px solid var(--line-2)}
.grid4 .mono{color:var(--accent-t);font-size:.75rem}
.grid4 .h4{font-family:var(--f-display);font-size:1.2rem;letter-spacing:-.02em}
.grid4 p{color:var(--fg-2);font-size:.9375rem}
.sign{position:relative;display:grid;place-items:center;padding:clamp(1.5rem,4vw,3rem);border-radius:var(--r-l);border:1px solid var(--line);background:radial-gradient(60% 60% at 58% 52%,rgba(226,98,47,.12),transparent 70%),var(--surface)}
.sign .logo{width:min(100%,460px);height:auto;overflow:visible}
.logo--sign .lg-halo{animation:halo 2.8s ease-out infinite}
.principes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap)}
.principes div{position:relative;padding:1.75rem;border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.principes dt{font-family:var(--f-display);font-size:1.35rem;font-weight:500;letter-spacing:-.02em;margin-bottom:.75rem}
.principes dt::before{content:"";display:block;width:.6rem;height:.6rem;border-radius:50%;background:var(--accent-t);margin-bottom:1.25rem}
.principes dd{color:var(--fg-2);font-size:.9375rem}

.legal{max-width:46rem}
.legal h2{font-family:var(--f-display);font-size:1.3rem;font-weight:500;letter-spacing:-.02em;margin:2.75rem 0 1rem}
.legal h2:first-child{margin-top:0}
.legal ul{padding-left:1.2rem;display:grid;gap:.4rem}
.legal a{color:var(--fg);text-underline-offset:.2em}
.legal p{color:var(--fg-2)}
.legal li{color:var(--fg-2)}

.nf{min-height:100svh;display:grid;align-items:center;padding:calc(var(--hdr-h) + 3rem) 0 4rem;position:relative;overflow:hidden}
.nf__mark{position:absolute;right:-6%;top:50%;width:min(60vw,720px);translate:0 -50%;opacity:.14}
.nf__mark .logo{width:100%;height:auto}
.logo--lost .lg-lines polyline:last-child{opacity:.25}
.nf .lead{margin-top:1.5rem}

/* ================= Appel final et pied de page ================= */
.pre{position:relative;padding:var(--sec-y) 0 calc(var(--sec-y) * .9);text-align:center;border-radius:var(--sheet) var(--sheet) 0 0;margin-top:calc(-1 * var(--sheet));background:radial-gradient(50% 70% at 50% 100%,rgba(226,98,47,.12),transparent 70%),var(--nuit)}
.pre__in{display:grid;justify-items:center;gap:1.5rem}
.pre__k{color:var(--lichen)}
.pre__t{font-family:var(--f-display);font-size:clamp(2rem,1rem + 4vw,4.6rem);font-weight:500;letter-spacing:-.04em;line-height:1.05;text-wrap:balance;margin-bottom:1rem}
.ftr{padding:clamp(3.5rem,6vw,5.5rem) 0 2rem;border-top:1px solid var(--filet)}
.ftr__top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--filet)}
.ftr__logo{display:block;width:min(100%,30rem)}
.ftr__logo .logo{width:100%;height:auto}
.ftr__tag{color:var(--lichen);font-size:.9375rem;text-align:right}
.ftr__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem var(--col-gap);padding:clamp(2.5rem,5vw,3.5rem) 0}
.ftr__h{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);margin-bottom:1rem}
.ftr__cols ul{display:grid;gap:.15rem}
.ftr__cols a{display:inline-block;padding:.35rem 0;color:var(--lichen);text-decoration:none;font-size:.9375rem;transition:color var(--t-micro)}
.ftr__cols a:hover{color:var(--brume)}
.ftr__bot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--filet);font-size:.8125rem;color:var(--lichen)}
.ftr__up{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;color:var(--lichen);text-decoration:none}
.ftr__up:hover{color:var(--brume)}
.ico--up{rotate:-90deg;width:1rem;height:1rem}

/* ================= Mouvement : entrées et apparitions ================= */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity var(--t-sec) var(--ease-out),transform var(--t-sec) var(--ease-out);transition-delay:calc(var(--d,0) * 90ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js .hero__t .c{animation:char-in 1.05s var(--ease-out) both;animation-delay:calc(.05s + var(--i) * 22ms)}
.js .hero__t .c.dot{animation:dot-in .9s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(.3s + var(--i) * 22ms);transform-origin:50% 80%}
@keyframes char-in{from{transform:translateY(108%) rotate(9deg);opacity:0}}
@keyframes dot-in{from{transform:scale(0)}}
.js .hero__k,.js .hero__lead,.js .hero__ctas,.js .hero__visual,.js .hero__list{animation:fade-up .9s var(--ease-out) both}
.js .hero__k{animation-delay:0s}
.js .hero__lead{animation-delay:.15s}
.js .hero__ctas{animation-delay:.22s}
.js .hero__visual{animation-name:fade-in;animation-delay:.1s}
.js .hero__list{animation-delay:.32s}
.js .phero__in>*{animation:fade-up .8s var(--ease-out) both}
.js .phero__in>:nth-child(2){animation-delay:.08s}
.js .phero__in>:nth-child(3){animation-delay:.16s}
.js .phero__in>:nth-child(n+4){animation-delay:.24s}
@keyframes line-up{from{transform:translateY(105%)}}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}}
@keyframes fade-in{from{opacity:0}}
@keyframes wipe-in{from{clip-path:inset(0 0 0 100% round var(--r-l))}to{clip-path:inset(0 round var(--r-l))}}

@view-transition{navigation:auto}
.hdr{view-transition-name:hdr}
::view-transition-old(root){animation:vt-out .55s cubic-bezier(.76,0,.24,1) both}
::view-transition-new(root){animation:vt-in .75s cubic-bezier(.76,0,.24,1) both}
::view-transition-group(hdr){animation-duration:.35s}
@keyframes vt-out{to{opacity:.35;transform:translateY(-4%) scale(.96)}}
@keyframes vt-in{from{clip-path:inset(100% 0 0 0 round 2rem 2rem 0 0)}to{clip-path:inset(0 0 0 0 round 0)}}

/* ================= Motion design : couche d'effets (désactivée par .rm, allégée sur mobile) ================= */
/* intro de première visite : le monogramme se dessine, puis le rideau se lève */
.intro{display:none}
.is-intro .intro,.intro.is-on{position:fixed;inset:0;z-index:400;display:grid;place-items:center;background:var(--nuit);color:var(--brume);--logo-line:var(--lichen);--logo-node:var(--brume);--logo-text:var(--brume)}
.intro.is-out{transform:translateY(-100%);border-radius:0 0 50% 50% / 0 0 14vh 14vh;transition:transform 1s cubic-bezier(.76,0,.24,1),border-radius 1s cubic-bezier(.76,0,.24,1)}
.intro__in{display:grid;justify-items:center;gap:1.75rem;width:min(320px,72vw)}
.intro .logo{width:min(230px,52vw);height:auto;overflow:visible}
.intro__meta{display:flex;justify-content:space-between;width:100%;font:500 .75rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lichen)}
.intro__meta [data-intro-count]{color:var(--brume);font-variant-numeric:tabular-nums}
.intro__bar{width:100%;height:1px;background:var(--filet);overflow:hidden}
.intro__bar i{display:block;height:100%;background:var(--signal);transform-origin:0 50%;transform:scaleX(var(--ip,0))}
.is-intro .hero *,.is-intro .phero *{animation-play-state:paused!important}

/* barre de progression de lecture */
.progress{position:fixed;inset:0 0 auto;height:2px;z-index:70;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--signal),#f3a17c);transform-origin:0 50%;transform:scaleX(0)}

/* curseur personnalisé (pointeur précis uniquement) */
.cursor{display:none}
.has-cursor .cursor{display:contents}
.has-cursor:not(.rm),.has-cursor:not(.rm) *{cursor:none!important}
.has-cursor:not(.rm) :is(input:not([type=checkbox]),textarea){cursor:text!important}
.has-cursor:not(.rm) select{cursor:default!important}
.rm .cursor{display:none!important}
.cursor__dot,.cursor__ring{position:fixed;left:0;top:0;z-index:300;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.is-on .cursor__dot,.cursor.is-on .cursor__ring{opacity:1}
.cursor__dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--signal)}
.cursor__ring{width:0;height:0;mix-blend-mode:difference}
.cursor__ring::before{content:"";position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(231,239,233,.85);transition:scale .45s var(--ease-out),background-color .35s,border-color .35s}
.cursor__label{position:absolute;left:0;top:0;translate:-50% -50%;font:500 .6875rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--nuit);white-space:nowrap;opacity:0;scale:.6;transition:opacity .3s,scale .45s var(--ease-out)}
.cursor.is-link .cursor__ring::before{scale:1.55;background:rgba(231,239,233,.12)}
.cursor.is-link .cursor__dot{scale:0}
.cursor.is-view .cursor__ring{mix-blend-mode:normal}
.cursor.is-view .cursor__ring::before{scale:2.3;background:var(--signal);border-color:var(--signal)}
.cursor.is-view .cursor__label{opacity:1;scale:1}
.cursor.is-view .cursor__dot{scale:0}
.cursor.is-text .cursor__ring,.cursor.is-text .cursor__dot{opacity:0}
.cursor.is-down .cursor__ring::before{scale:.8}
.cursor__dot{transition:opacity .3s,scale .3s}

/* lumière qui suit la souris dans les sections sombres */
.spot{isolation:isolate}
.spot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(640px circle at var(--mx,50%) var(--my,50%),rgba(173,195,183,.085),rgba(226,98,47,.035) 35%,transparent 62%);opacity:0;transition:opacity .7s}
.spot.is-lit::after{opacity:1}

/* hero : réseau vivant, puces flottantes, impulsions, bandeau */
.hero__net{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.js .hero__net{opacity:0;transition:opacity 1.6s var(--ease-out)}
.js .hero__net.is-on{opacity:1}
.stage__chip{position:absolute;left:var(--x);top:var(--y);display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .8rem;border:1px solid #23463a;border-radius:99px;background:rgba(11,31,24,.75);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 .6875rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--brume);white-space:nowrap;transform:translateZ(var(--z));box-shadow:0 10px 30px rgba(0,0,0,.25);animation:chip-in .9s var(--ease-out) both,chip-float 6.5s ease-in-out infinite;animation-delay:calc(1.1s + var(--f) * .14s),calc(var(--f) * -1.6s)}
.stage__chip i{width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal)}
@keyframes chip-in{from{opacity:0;scale:.7}}
@keyframes chip-float{50%{translate:0 -9px}}
.stage.is-paused .stage__chip{animation-play-state:paused}
.st-pulse{fill:#ffe1d3;opacity:0;filter:drop-shadow(0 0 5px rgba(226,98,47,.95))}
.marquee{position:relative;display:grid;gap:.15rem;margin-top:clamp(3rem,7vw,6rem);overflow:hidden;pointer-events:none;user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__row{white-space:nowrap}
.marquee__track{display:inline-flex;align-items:center;gap:clamp(1.25rem,3vw,2.75rem);padding-right:clamp(1.25rem,3vw,2.75rem);will-change:transform}
.marquee__item{font-family:var(--f-display);font-size:clamp(2.4rem,.8rem + 6.2vw,6.8rem);font-weight:500;letter-spacing:-.045em;line-height:1.08;color:var(--brume)}
.marquee__item.is-outline{color:transparent;-webkit-text-stroke:1px rgba(173,195,183,.6)}
.marquee__row+.marquee__row .marquee__item{font-size:clamp(1.6rem,.6rem + 3.6vw,3.9rem);font-weight:300;color:rgba(173,195,183,.5)}
.marquee__row+.marquee__row .marquee__item.is-outline{color:transparent;-webkit-text-stroke:1px rgba(173,195,183,.35)}
.marquee__sep{flex:none;width:.8rem;height:.8rem;border-radius:50%;background:var(--signal);box-shadow:0 0 0 6px rgba(226,98,47,.14),0 0 22px rgba(226,98,47,.55)}
.marquee__row+.marquee__row .marquee__sep{width:.45rem;height:.45rem;background:var(--lichen);box-shadow:none}

/* titres : les mots montent depuis leur ligne */
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .02em .16em;margin:-.12em -.02em -.16em}
.swi{display:inline-block;transform:translateY(110%);transition:transform 1.05s var(--ease-out);transition-delay:calc(var(--wi) * 42ms)}
.is-split.is-in .swi{transform:none}
/* repères en police mono : décodage façon terminal */
.scr{font-variant-ligatures:none}

/* cartes : halo lumineux qui suit la souris sur la bordure */
.glow::after{content:"";position:absolute;inset:-1px;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;background:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),rgba(226,98,47,.95),rgba(226,98,47,.25) 40%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .4s}
.glow.is-glow::after{opacity:1}
.glow.is-glow{background-image:radial-gradient(460px circle at var(--gx,50%) var(--gy,50%),rgba(231,239,233,.055),transparent 60%)}
.theme-brume .glow.is-glow{background-image:radial-gradient(460px circle at var(--gx,50%) var(--gy,50%),rgba(226,98,47,.07),transparent 60%)}

/* projets : révélation, inclinaison 3D, reflet, profondeur à la souris */
.work{position:relative}
.work__media,.work__body{position:relative;z-index:1}
.work__media{perspective:1400px}
.work__num{position:absolute;z-index:0;top:-.42em;left:-.05em;font-family:var(--f-display);font-size:clamp(7rem,3rem + 13vw,15rem);font-weight:600;line-height:1;letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1px rgba(173,195,183,.2);pointer-events:none;user-select:none}
.work--rev .work__num{left:auto;right:-.05em}
.js .work__media .pv{clip-path:inset(9% 7% round var(--pv-r,var(--r-l)))}
.js .work__media .pv__in{scale:1.14;transition:scale 1.9s var(--ease-out)}
.js .work__media.is-in .pv{clip-path:inset(0 round var(--pv-r,var(--r-l)))}
.js .work__media.is-in .pv__in{scale:1}
.pv__layer,.pv__float{transform:translate3d(calc(var(--tx,0) * var(--k,0) * 26px),calc(var(--ty,0) * var(--k,0) * 18px),0);transition:transform .7s var(--ease-out)}
.pv__glare,.sb__screen::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 55%);mix-blend-mode:soft-light;opacity:0;transition:opacity .5s}
.is-tilting .pv__glare,.sb__screen.is-tilting::after{opacity:1}
[data-tilt-card]{transition:transform .7s var(--ease-out)}
.sb{perspective:1600px}

/* expertises : repère actif glissant, rideau sur le visuel */
.xp{position:relative}
.xp__bar{display:none}

/* méthode : le point live descend le rail */
.steps__live{position:absolute;z-index:3;left:50%;top:calc(var(--prog,0) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 6px rgba(226,98,47,.16),0 0 26px rgba(226,98,47,.75)}

/* logos qui se dessinent (pied de page, en-têtes de page, intro) */
.js .logo--draw .lg-lines polyline,.js .logo--draw .lg-word path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--ease-io)}
.js .logo--draw .lg-word path{transition-duration:2.4s;transition-delay:.35s}
.js .logo--draw .lg-nodes circle,.js .logo--draw .lg-live{transform-box:fill-box;transform-origin:center;scale:0;transition:scale .65s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.25s + var(--n,0) * 85ms)}
.js .logo--draw .lg-live{transition-delay:1.1s}
.js .logo--draw .lg-dash,.js .logo--draw .lg-word polygon,.js .logo--draw .lg-halo{opacity:0;transition:opacity .8s 1.2s}
.js .logo--draw.is-drawn .lg-lines polyline,.js .logo--draw.is-drawn .lg-word path{stroke-dashoffset:0}
.js .logo--draw.is-drawn .lg-nodes circle,.js .logo--draw.is-drawn .lg-live{scale:1}
.js .logo--draw.is-drawn .lg-dash,.js .logo--draw.is-drawn .lg-word polygon{opacity:1}
.js .logo--draw.is-drawn .lg-halo{opacity:.45}

/* profondeur entre les feuilles empilées */
.sheet.theme-nuit,.sheet.theme-foret{box-shadow:0 -24px 60px -34px rgba(6,18,14,.55)}
[data-mouse]{transition:transform 1.2s var(--ease-out)}

/* réglage des animations dans le pied de page */
.motion-toggle{display:inline-flex;align-items:center;gap:.65rem;min-height:2.75rem;padding:0;border:0;background:none;color:var(--lichen);font-size:.8125rem}
.motion-toggle:hover{color:var(--brume)}
.motion-toggle__sw{position:relative;flex:none;width:2.1rem;height:1.2rem;border-radius:1rem;border:1px solid #2a4a3d;background:var(--nuit-2);transition:background-color .25s,border-color .25s}
.motion-toggle__sw i{position:absolute;left:2px;top:50%;width:.8rem;height:.8rem;border-radius:50%;background:var(--lichen);translate:0 -50%;transition:left .25s var(--ease-out),background-color .25s}
.motion-toggle[aria-pressed="true"] .motion-toggle__sw{background:var(--signal);border-color:var(--signal)}
.motion-toggle[aria-pressed="true"] .motion-toggle__sw i{left:calc(100% - .8rem - 2px);background:var(--nuit)}

/* ================= Widgets : configurateur, diagnostic, test formation, atelier IA, comparateur, recherche FAQ ================= */
/* choix en pastilles (boutons radio et cases natives, stylées) */
.opts{display:flex;flex-wrap:wrap;gap:.5rem}
.pick{position:relative;display:inline-flex}
.pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pick span{display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;padding:.55rem 1.05rem;border:1px solid var(--line-2);border-radius:99px;font-size:.9375rem;line-height:1.25;color:var(--fg);transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease-out)}
.pick input[type=checkbox]+span::before{content:"";flex:none;width:.55rem;height:.55rem;border-radius:50%;border:1.5px solid currentColor;transition:background-color .2s,border-color .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.pick:hover span{border-color:var(--fg-2)}
.pick input:checked+span{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.pick input[type=checkbox]:checked+span::before{background:var(--signal);border-color:var(--signal);transform:scale(1.25)}
.pick input:focus-visible+span{outline:2px solid var(--focus);outline-offset:3px}
.pick input:active+span{transform:scale(.97)}

/* configurateur */
.cfg{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,4.5rem);align-items:start}
.cfg__q{display:grid;gap:1.75rem}
.cfg__f{min-width:0;margin:0;padding:0 0 1.75rem;border:0;border-bottom:1px solid var(--line)}
.cfg__f:last-child{border-bottom:0;padding-bottom:0}
.cfg__f legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .75rem;margin-bottom:1rem;padding:0;font-family:var(--f-display);font-size:clamp(1.05rem,1rem + .3vw,1.25rem);font-weight:500;letter-spacing:-.015em}
.cfg__f legend .mono{font-size:.6875rem;font-family:var(--f-mono);font-weight:500;color:var(--accent-t)}
.cfg__f legend .opt{font-family:var(--f-body);font-size:.8125rem;font-weight:400;letter-spacing:0;color:var(--fg-2)}
.cfg__hint{font-size:.9375rem;color:var(--fg-2)}
.cfg__sum,.diag__res{position:sticky;top:calc(var(--hdr-h) + 1.5rem);padding:clamp(1.5rem,2.5vw,2.25rem);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.cfg__k{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;font-size:.6875rem;color:var(--fg-2)}
.cfg__title{margin-bottom:1.5rem;font-family:var(--f-display);font-size:clamp(1.3rem,1rem + 1vw,1.75rem);font-weight:500;line-height:1.15;letter-spacing:-.03em;text-wrap:balance}
.gauge{margin-bottom:1.25rem;padding:1rem 0 1.15rem;border-block:1px solid var(--line)}
.gauge__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.75rem;font-size:.875rem;color:var(--fg-2)}
.gauge__top b{font-family:var(--f-display);font-size:1rem;font-weight:500;color:var(--fg)}
.gauge__bar{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.gauge__bar i{position:relative;height:6px;border-radius:3px;background:var(--line-2);overflow:hidden}
.gauge__bar i::after{content:"";position:absolute;inset:0;background:var(--signal);transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease-out)}
.gauge__bar i:nth-child(2)::after{transition-delay:.08s}
.gauge__bar i:nth-child(3)::after{transition-delay:.16s}
.gauge[data-level="1"] i:nth-child(1)::after,.gauge[data-level="2"] i:nth-child(-n+2)::after,.gauge[data-level="3"] i::after{transform:none}
.gauge__scale{display:flex;justify-content:space-between;margin-top:.5rem;font:.625rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.cfg__lbl,.diag__lbl{margin-bottom:.75rem;font-size:.6875rem;color:var(--accent-t)}
.cfg__list{display:grid;gap:.6rem;margin-bottom:1.25rem}
.cfg__list li{position:relative;padding-left:1.5rem;font-size:.9375rem;line-height:1.45}
.cfg__list li:not(.is-kept){animation:fade-up .45s var(--ease-out) both}
.cfg__list li::before{content:"";position:absolute;left:0;top:.5em;width:.45rem;height:.45rem;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px var(--signal-doux)}
.cfg__list li.is-meta{color:var(--fg-2)}
.cfg__list li.is-meta::before{background:none;border:1.5px solid var(--fg-2);box-shadow:none}
.cfg__list li.is-empty{padding-left:0;color:var(--fg-2)}
.cfg__list li.is-empty::before{display:none}
.cfg__note,.diag__note{margin-bottom:1.25rem;font-size:.8125rem;color:var(--fg-2)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled::before{display:none}
.sec--cfg{background:radial-gradient(50% 60% at 85% 30%,rgba(226,98,47,.07),transparent 70%),var(--bg)}

/* diagnostic */
.diag{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,4.5rem);align-items:start}
.diag__q{min-width:0;margin:0;padding:0;border:0}
.diag__q ul{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.check{position:relative;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:1rem;min-height:3.5rem;padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);cursor:pointer;transition:border-color .2s,background-color .2s,transform .3s var(--ease-out)}
.check:hover{border-color:var(--line-2);transform:translateX(4px)}
.check input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.check__box{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:.45rem;border:1.5px solid var(--fg-2);transition:background-color .2s,border-color .2s}
.check__box .ico{width:1rem;height:1rem;stroke-width:2.5;opacity:0;transform:scale(.4);transition:opacity .2s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.check input:checked~.check__box{background:var(--signal);border-color:var(--signal);color:var(--nuit)}
.check input:checked~.check__box .ico{opacity:1;transform:none}
.check:has(input:checked){border-color:rgba(226,98,47,.55)}
.check input:focus-visible~.check__box{outline:2px solid var(--focus);outline-offset:3px}
.check__n{font-size:.6875rem;color:var(--fg-2)}
.check__t{font-size:.9375rem;line-height:1.4}
.diag__res{display:grid;gap:.9rem}
.ring{position:relative;width:9.5rem;aspect-ratio:1;margin:0 auto .25rem}
.ring svg{width:100%;height:100%;rotate:-90deg;overflow:visible}
.ring circle{fill:none;stroke-width:8}
.ring__bg{stroke:var(--line-2)}
.ring__fg{stroke:var(--signal);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .9s var(--ease-out);filter:drop-shadow(0 0 6px rgba(226,98,47,.55))}
.ring__v{position:absolute;inset:0;display:grid;place-content:center;justify-items:center}
.ring__v b{font-family:var(--f-display);font-size:2.75rem;font-weight:500;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ring__v small{font:.75rem var(--f-mono);color:var(--fg-2)}
.diag__verdict{min-height:2.6em;font-family:var(--f-display);font-size:1.1rem;font-weight:500;line-height:1.3;letter-spacing:-.015em;text-align:center;text-wrap:balance}
.diag__recos{display:grid;gap:.5rem;margin:0 0 .5rem;padding:0;list-style:none}
.diag__recos a{display:flex;align-items:center;gap:.75rem;min-height:2.75rem;padding:.65rem .9rem;border-radius:var(--r-s);background:var(--surface-2);font-size:.9375rem;text-decoration:none;color:var(--fg);transition:transform .3s var(--ease-out),background-color .2s;animation:fade-up .4s var(--ease-out) both}
.diag__recos a:hover{transform:translateX(4px)}
.diag__recos .mono{font-size:.6875rem;color:var(--accent-t)}
.diag__recos .ico{flex:none;width:1rem;height:1rem;margin-left:auto;color:var(--accent-t)}
.diag__recos .is-empty{color:var(--fg-2);font-size:.9375rem}
.diag__note{margin:0;text-align:center}

/* test « quelle formation » */
.split--quiz{align-items:start}
.quiz__intro{max-width:30em;margin-top:1.25rem;color:var(--fg-2)}
.quiz{position:relative;min-height:27rem;padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.quiz__head{display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem}
.quiz__head .mono{font-size:.6875rem;color:var(--fg-2);white-space:nowrap}
.quiz__bar{flex:1;height:3px;border-radius:3px;background:var(--line-2);overflow:hidden}
.quiz__bar i{display:block;width:var(--qp,33.4%);height:100%;background:var(--signal);transition:width .55s var(--ease-out)}
.quiz__qt{margin-bottom:1.25rem;font-family:var(--f-display);font-size:clamp(1.3rem,1rem + 1.1vw,1.85rem);font-weight:500;line-height:1.15;letter-spacing:-.03em;outline:none}
.quiz__a{display:grid;gap:.5rem}
.quiz__opt{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:3.25rem;padding:.8rem 1.1rem;border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--bg);font-size:1rem;text-align:left;color:var(--fg);transition:border-color .2s,background-color .2s,color .2s,transform .3s var(--ease-out)}
.quiz__opt .ico{flex:none;width:1.1rem;height:1.1rem;color:var(--accent-t);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .3s var(--ease-out)}
.quiz__opt:hover{border-color:var(--fg);transform:translateX(4px)}
.quiz__opt:hover .ico,.quiz__opt:focus-visible .ico{opacity:1;transform:none}
.quiz__opt[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.quiz__q:not([hidden]),.quiz__res:not([hidden]){animation:fade-up .5s var(--ease-out)}
.quiz__k{font-size:.6875rem;color:var(--accent-t);outline:none}
.quiz__t{margin:.5rem 0 1rem;font-family:var(--f-display);font-size:clamp(1.4rem,1rem + 1.4vw,2.1rem);font-weight:500;line-height:1.1;letter-spacing:-.03em;text-wrap:balance}
.quiz__why{margin-bottom:1.25rem;color:var(--fg-2)}
.quiz__res .ticks{margin-bottom:1.25rem}
.quiz__alt{margin-bottom:1.5rem;font-size:.9375rem;color:var(--fg-2)}
.quiz__alt b{color:var(--fg);font-weight:500}
.quiz__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.quiz__back{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.25rem;font-size:.875rem;text-decoration:none}
.quiz__back .ico{width:1rem;height:1rem}
.formations__ctas{display:flex;flex-wrap:wrap;gap:.75rem}

/* atelier express : demande à une IA */
.pb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4vw,4.5rem);align-items:start}
.pb__form{display:grid;gap:1.5rem}
.pb__form .cfg__f{padding:0;border:0}
.pb__form label .mono,.pb__form legend .mono{display:inline-block;padding:.15rem .5rem;border-radius:.35rem;background:rgba(231,239,233,.06);font-size:.625rem;letter-spacing:.1em}
.pb .field label{display:flex;align-items:baseline;gap:.75rem}
.p-role{color:#f3a17c!important}.p-ctx{color:#8ed9c6!important}.p-task{color:#f4d36b!important}.p-fmt{color:#c6b6ff!important}
.pb__out{position:sticky;top:calc(var(--hdr-h) + 1.5rem);display:grid;gap:1.25rem}
.pb__term{position:relative;overflow:hidden;border-radius:var(--r-l);border:1px solid var(--line-2);background:#040e0a;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.pb__bar{display:flex;align-items:center;gap:.4rem;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.pb__bar i{width:.6rem;height:.6rem;border-radius:50%;background:#24433a}
.pb__bar .mono{margin-left:auto;font-size:.625rem;color:var(--lichen)}
.pb__text{min-height:13rem;padding:1.5rem 1.5rem 1.75rem;font:400 .9375rem/1.8 var(--f-mono);color:var(--brume);overflow-wrap:anywhere}
.pb__text span{border-bottom:1px dashed;transition:color .3s,opacity .3s}
.pb__text .s-role{color:#f3a17c}.pb__text .s-ctx{color:#8ed9c6}.pb__text .s-task{color:#f4d36b}.pb__text .s-fmt{color:#c6b6ff}.pb__text .s-ton{color:#adc3b7}
.pb__text .is-ph{opacity:.55;border-bottom-style:dotted}
.pb__text::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:.2em;vertical-align:-.18em;background:var(--signal);animation:caret 1s steps(1) infinite}
.pb__term.is-upd .pb__text{animation:pb-flash .5s var(--ease-out)}
@keyframes pb-flash{from{background:rgba(226,98,47,.06)}}
.pb__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.pb__copied{font-size:.875rem;color:var(--accent-t)}

/* comparateur avant / après */
.xd__extra{grid-column:1/-1}
.cmp{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);grid-template-areas:"head stage" "cap stage";column-gap:var(--col-gap);align-items:center}
.cmp__head{grid-area:head;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;margin-bottom:1rem}
.cmp__head .h4{font-family:var(--f-display);font-size:clamp(1.2rem,1rem + .8vw,1.6rem);letter-spacing:-.02em}
.cmp__stage{grid-area:stage}
.cmp__cap{grid-area:cap;align-self:start}
.cmp__stage{position:relative;overflow:hidden;border-radius:var(--r-l);border:1px solid var(--filet);background:radial-gradient(60% 70% at 70% 40%,#16302a,var(--nuit-2));container-type:inline-size;touch-action:pan-y;user-select:none;cursor:ew-resize}
.cmp__layer{padding:4.5cqi 7cqi}
.cmp__after{position:relative}
.cmp__before{position:absolute;inset:0;display:grid;background:#c9ccd1;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp__handle{position:absolute;z-index:3;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--brume);box-shadow:0 0 18px rgba(0,0,0,.45);pointer-events:none}
.cmp__handle span{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;border-radius:50%;background:var(--signal);color:var(--nuit);box-shadow:0 0 0 6px rgba(226,98,47,.2),0 10px 30px rgba(0,0,0,.35);transition:scale .3s var(--ease-out)}
.cmp__handle .ico{width:1rem;height:1rem;margin:0 -.2rem;stroke-width:2.25}
.cmp__stage.is-drag .cmp__handle span{scale:1.12}
.cmp__stage:has(.cmp__range:focus-visible) .cmp__handle span{outline:2px solid var(--brume);outline-offset:4px}
.cmp__range{position:absolute;inset:auto 0 0;z-index:4;width:100%;height:2px;margin:0;opacity:0;pointer-events:none}
.cmp__tag{position:absolute;top:1rem;z-index:2;padding:.3rem .75rem;border-radius:99px;background:rgba(6,18,14,.78);font:.6875rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brume);pointer-events:none}
.cmp__tag--b{left:1rem}
.cmp__tag--a{right:1rem}
.cmp__cap{font-size:.9375rem;color:var(--fg-2);max-width:30em}
.old{display:flex;flex-direction:column;height:100%;overflow:hidden;border:1px solid #8c8c8c;background:#ededed;color:#222;font:1.6cqi/1.3 "Times New Roman",Times,serif;box-shadow:0 2cqi 5cqi rgba(0,0,0,.3)}
.old__bar{padding:.7cqi 1.4cqi;border-bottom:1px solid #999;background:linear-gradient(#ececec,#c8c8c8);font:1.25cqi Arial,sans-serif;color:#555;white-space:nowrap;overflow:hidden}
.old__head{display:flex;align-items:baseline;gap:2cqi;padding:2cqi;background:linear-gradient(#3b6db7,#1c3e79);color:#fff}
.old__head b{font:bold 3.3cqi "Comic Sans MS","Chalkboard SE",cursive;color:#ffde59;text-shadow:.25cqi .25cqi 0 #000}
.old__head span{font-size:1.6cqi;font-style:italic}
.old__menu{display:flex;flex-wrap:wrap;border-block:1px solid #89a0c3;background:#cfd8e7}
.old__menu span{padding:.8cqi 1.3cqi;border-right:1px solid #89a0c3;font:1.25cqi Verdana,sans-serif;color:#0000ee;text-decoration:underline}
.old__body{flex:1;display:grid;grid-template-columns:24% 1fr;gap:1.5cqi;padding:1.5cqi;min-height:0}
.old__side,.old__main{border:1px solid #b8b8b8;background:#fff}
.old__side{padding:1.2cqi;font-size:1.3cqi}
.old__side b{display:block;margin:0 0 .8cqi;padding:.3cqi .6cqi;background:#1c3e79;color:#fff;font:bold 1.25cqi Arial,sans-serif}
.old__side p{margin-bottom:.8cqi}
.old__link{color:#0000ee;text-decoration:underline}
.old__main{padding:1.4cqi;font-size:1.35cqi}
.old__h{margin-bottom:.8cqi;font:bold 2.2cqi "Times New Roman",serif;color:#a00000;text-decoration:underline}
.old__img{height:11cqi;margin:1cqi 0;overflow:hidden;border:1px solid #999;background:#cfcfcf}
.old__img .photo{filter:grayscale(1)}
.old__btn{display:inline-block;padding:.6cqi 1.2cqi;border:2px outset #aaa;background:linear-gradient(#fdfdfd,#c9c9c9);font:bold 1.2cqi Arial,sans-serif}
.old__foot{padding:.8cqi;background:#d9d9d9;font:1.1cqi Arial,sans-serif;text-align:center;color:#6b6b6b}

/* recherche dans la FAQ */
.faq__list{border-top:0}
.qa:first-of-type{border-top:1px solid var(--line)}
.faq__search{position:relative;margin-bottom:1.25rem}
.faq__search .ico{position:absolute;left:1.05rem;top:1.625rem;translate:0 -50%;color:var(--fg-2);pointer-events:none}
.faq__search input{width:100%;min-height:3.25rem;padding:.8rem 1.25rem .8rem 3rem;border:1px solid var(--line-2);border-radius:99px;background:var(--surface);font-size:1rem;color:var(--fg);transition:border-color .2s,box-shadow .2s}
.faq__search input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 25%,transparent)}
.faq__count{min-height:1.3em;margin-top:.5rem;padding-left:1.25rem;font-size:.8125rem;color:var(--fg-2)}
.faq__empty{padding:1.25rem 0;color:var(--fg-2)}
.faq__empty a{color:var(--fg)}

/* message de préremplissage dans le formulaire */
.form__prefill{grid-column:1/-1;display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border:1px solid rgba(226,98,47,.45);border-radius:var(--r-s);background:var(--signal-doux);font-size:.9375rem}
.form__prefill::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--signal)}
.phero__skip{color:var(--brume)}

@media (max-width:959px){
  .cmp{grid-template-columns:1fr;grid-template-areas:"head" "stage" "cap";row-gap:1rem}
  .cfg,.diag,.pb{grid-template-columns:1fr}
  .cfg__sum,.diag__res,.pb__out{position:relative;top:auto}
}
@media (max-width:759px){
  .check{grid-template-columns:auto 1fr;gap:.85rem}
  .check__n{display:none}
  .quiz{min-height:0}
  .cmp__stage{margin-inline:calc(var(--gutter) * -1);border-radius:0;border-inline:0}
  .cmp__tag{top:.6rem}
  .cmp__tag--b{left:.6rem}.cmp__tag--a{right:.6rem}
}

/* ================= WhatsApp : bouton flottant, bouton, carte de contact ================= */
:root{--wa:#25d366;--wa-fonce:#128c4a}
.ico--wa{flex:none}
.btn--wa{--sweep:var(--brume);background:var(--wa);color:var(--nuit)}
.btn--wa .btn__ico{background:var(--nuit);color:var(--wa)}
.btn--wa .ico--wa{width:1.15rem;height:1.15rem}
.wa-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem 1.1rem;margin-top:2rem;padding:1.25rem 1.35rem;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.wa-card__ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--wa);color:#fff;box-shadow:0 0 0 6px rgba(37,211,102,.14)}
.wa-card__ico .ico{width:1.5rem;height:1.5rem}
.wa-card__t{font-family:var(--f-display);font-size:1.05rem;font-weight:500;letter-spacing:-.015em}
.wa-card__d{margin-top:.2rem;font-size:.9375rem;color:var(--fg-2)}
.wa-card__d a{color:var(--fg);font-weight:500;white-space:nowrap;text-underline-offset:.2em}
.wa-card .btn{grid-column:1/-1;justify-self:start}
.coords a{display:inline-flex;align-items:center;gap:.5rem}
.coords .ico--wa{width:1rem;height:1rem;color:var(--wa)}
.phero__ctas .phero__skip{align-self:center;margin-left:.5rem}
.wa-float{position:fixed;right:max(1.5rem,env(safe-area-inset-right));bottom:max(1.5rem,env(safe-area-inset-bottom));z-index:41;display:inline-flex;align-items:center;height:3.5rem;padding:0 1.05rem;border-radius:99px;background:var(--wa);color:#fff;text-decoration:none;font-weight:500;font-size:.9375rem;box-shadow:0 12px 30px rgba(6,18,14,.35),0 0 0 1px rgba(6,18,14,.15);transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s,background-color .2s,translate .45s var(--ease-out)}
.wa-float .ico--wa{width:1.45rem;height:1.45rem}
.wa-float__label{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;color:var(--nuit);transition:max-width .45s var(--ease-out),opacity .3s,margin .45s var(--ease-out)}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(37,211,102,.55);pointer-events:none}
.wa-float.is-visible::before{animation:wa-ping 2.2s ease-out .4s 3}
@keyframes wa-ping{70%,100%{box-shadow:0 0 0 14px rgba(37,211,102,0)}}
@media (hover:hover){.wa-float:hover .wa-float__label{max-width:14rem;opacity:1;margin-left:.6rem}.wa-float:hover{background:#2fe072}}
.wa-float:focus-visible .wa-float__label{max-width:14rem;opacity:1;margin-left:.6rem}
.wa-float:focus-visible{outline:2px solid var(--brume);outline-offset:3px}
.wa-float:hover .ico--wa,.wa-float:focus-visible .ico--wa{color:var(--nuit)}
.js .wa-float:not(.is-visible){transform:scale(.5);opacity:0;pointer-events:none}
.menu .btn--wa{justify-content:space-between}
@media (max-width:759px){
  .wa-float{right:1rem;bottom:max(1rem,env(safe-area-inset-bottom));height:3.25rem;padding:0 .9rem}
  .has-wa .fab{right:calc(1rem + 3.25rem + .6rem)}
  .wa-card{grid-template-columns:1fr}
  .wa-card__ico{display:none}
}

/* ================= Sélecteur de langue FR / EN ================= */
.lang-sw{display:inline-flex;align-items:center;gap:.1rem;padding:.2rem;border:1px solid var(--line-2,#2a4a3d);border-radius:99px;flex:none}
.lang-sw a{display:grid;place-items:center;min-width:2.4rem;min-height:2.25rem;padding:0 .55rem;border-radius:99px;font:500 .75rem var(--f-mono);letter-spacing:.08em;text-decoration:none;color:var(--fg-2,var(--lichen));transition:background-color var(--t-micro),color var(--t-micro)}
.lang-sw a:hover{color:var(--fg,var(--brume))}
.lang-sw a[aria-current]{background:var(--fg,var(--brume));color:var(--bg,var(--nuit))}
.hdr .lang-sw a{color:var(--lichen)}
.hdr .lang-sw a[aria-current]{background:var(--brume);color:var(--nuit)}
.hdr--light.is-scrolled .lang-sw a{color:var(--ardoise)}
.hdr--light.is-scrolled .lang-sw a[aria-current]{background:var(--nuit);color:var(--brume)}
.menu__top{gap:1rem}
.menu__top .hdr__logo{margin-right:auto}
.menu .lang-sw a{min-height:2.75rem}
.ftr .lang-sw{--fg:var(--brume);--bg:var(--nuit);--fg-2:var(--lichen)}
@media (max-width:759px){.hdr__lang{display:none}}

/* ================= Responsive ================= */
/* ================= Direction photographique · matières, gestes et projets ================= */
.photo{display:block;width:100%;height:100%}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.editorial{min-width:0}
.editorial__frame{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r-l);background:var(--nuit-2);isolation:isolate}
.editorial__frame::after{content:"";position:absolute;inset:0;border:1px solid rgba(173,195,183,.16);border-radius:inherit;pointer-events:none}
.editorial__caption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.5rem;margin-top:1rem;font-size:.875rem;color:var(--fg-2,var(--lichen));line-height:1.5}
.editorial__caption>span:first-child{color:var(--fg,var(--brume))}
.editorial--hero .editorial__frame{aspect-ratio:4/3;max-height:34rem;border-radius:var(--r-l) var(--r-l) 4rem var(--r-l);box-shadow:0 2rem 6rem rgba(0,0,0,.22)}
.editorial--hero .photo img{object-position:58% 50%}
.editorial--hero .editorial__caption{padding-inline:.25rem}
.editorial--hero .editorial__caption>span:first-child::before{content:"";display:inline-block;width:.4rem;height:.4rem;margin-right:.65rem;border-radius:50%;vertical-align:middle;background:var(--signal)}
.hero__visual:has(.editorial--hero){margin-top:-.5rem}
.phero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.phero--editorial .phero__t{font-size:clamp(2.1rem,1rem + 3vw,4rem);max-width:19ch}
.phero--editorial .phero__lead{font-size:clamp(1.0625rem,1rem + .25vw,1.2rem)}
.phero--editorial .phero__mark{opacity:.04}
.editorial--page .editorial__frame{aspect-ratio:5/4;border-radius:var(--r-l) var(--r-l) 3rem var(--r-l)}
.editorial--page .photo img{object-position:50% 45%}
/* pages intérieures : scène 3D autour du visuel (constellation, impulsions, puces flottantes, reflet qui suit la souris) */
.phero__media{position:relative;min-width:0;perspective:1400px}
.phero__3d{position:relative;transform-style:preserve-3d;transition:transform .6s var(--ease-out)}
.phero__links{position:absolute;left:-3.5rem;top:-3.5rem;width:calc(100% + 7rem);height:calc(100% + 7rem);z-index:2;pointer-events:none;transform:translateZ(40px)}
.js .phero__links{opacity:0;transition:opacity 1.4s var(--ease-out)}
.js .phero__links.is-on{opacity:1}
.phero__chip{z-index:3}
.phero__3d .editorial__frame::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(40% 45% at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 70%);opacity:0;transition:opacity .4s}
.phero__3d.is-tilting .editorial__frame::before{opacity:1}
.rm .phero__3d{transform:none!important}
.rm .phero__3d .editorial__frame::before{display:none}
@media (max-width:959px){.phero__chip{left:clamp(.5rem,var(--x),calc(100% - 12rem))}}
.editorial--constellation .photo img{object-position:100% 50%}
.editorial--banner{margin-bottom:clamp(2.5rem,5vw,4rem)}
.editorial--banner .editorial__frame{aspect-ratio:21/9;max-height:31rem}
.editorial--banner .photo img{object-position:50% 44%}
.sign--stage{padding:clamp(1rem,2vw,2rem);overflow:hidden}
.sign--stage .stage{width:100%;min-width:0}
.sign--stage .stage__chip{display:none}
.sign--stage .stage__ui{justify-content:center}
.sign--stage .stage__cap{width:100%;text-align:center}
.sign--stage .stage__states button{padding-inline:.6rem;font-size:.75rem}
.sign--stage .stage__svg{max-height:24rem}
.vw__img--photo .photo{position:absolute;inset:0;transition:opacity .4s}
.vw[data-mode="wire"] .vw__img--photo .photo{visibility:hidden}
.vm__pic--photo>.photo{position:absolute;inset:0}
.vm__pic--photo p{z-index:1;padding:.5cqi 1.5cqi;border-radius:1cqi;background:rgba(6,18,14,.82);font-size:3cqi}
.pv__backdrop{position:absolute;inset:0;z-index:0}
.pv__shade{position:absolute;inset:0;background:linear-gradient(90deg,transparent 22%,rgba(6,18,14,.2) 55%,rgba(6,18,14,.5));pointer-events:none}
.pv--sillage .pv__backdrop{left:-32%;width:148%}
.pv--sillage .pv__shade{background:linear-gradient(90deg,rgba(43,42,36,.02) 30%,rgba(43,42,36,.16))}
.pv--sillage .pv-s__web{left:43%;top:11%;width:53%;rotate:-2deg;container-type:inline-size}
.pv--sillage .pv-s__phone{left:74%;top:43%;width:15.5%;rotate:4deg}
.pv--sillage .pv-s__f1{display:none}
.pv--sillage .pv-s__shot .photo{position:absolute;inset:0}
.pv--mouvement .pv__backdrop img{object-position:40% 48%}
.pv--mouvement .pv-m__p{width:18cqi;top:25%}
.pv--mouvement .pv-m__p0{left:38%;rotate:-7deg}
.pv--mouvement .pv-m__p1{left:58%;top:16%;width:19cqi;rotate:0deg}
.pv--mouvement .pv-m__p2{left:78%;rotate:7deg}
.pv-b__scene>.photo{position:absolute;inset:0}
.pv-b__scene::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(6,18,14,.55))}
.pv-b__story-photo{position:absolute;inset:0;z-index:0}
.pv-b__story::after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(transparent,rgba(6,18,14,.85));pointer-events:none}
.pv-b__story>:not(.photo){position:relative;z-index:1}
.pv-b__story .pv-b__fmt{position:absolute;z-index:2}
.pv-b__pic>.photo{position:absolute;inset:0}
.pv--brise{background:radial-gradient(70% 80% at 30% 30%,#ede2cb,#c8cdb3)}
.sc-art--photo{overflow:hidden}
.sc-art--photo::before,.sc-art--photo::after{content:none!important}
.sc-shot--can .sc-art--photo .photo img{object-position:50% 56%;transform:scale(1.35)}
.sc-preview .sc-art--photo::after{content:""!important;position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(6,18,14,.65))}
.sc-preview p{z-index:1}
.js .phero__copy>*{animation:fade-up .8s var(--ease-out) both}
.js .phero__copy>:nth-child(2){animation-delay:.08s}
.js .phero__copy>:nth-child(3){animation-delay:.16s}
.js .phero__copy>:nth-child(n+4){animation-delay:.24s}
@media (max-width:959px){
  .phero__grid{grid-template-columns:1fr;gap:2.5rem}
  .phero--editorial .phero__t{max-width:22ch}
  .phero--editorial .phero__lead{max-width:42em}
  .editorial--page{max-width:46rem;width:100%}
  .editorial--page .editorial__frame{aspect-ratio:3/2}
  .editorial--hero .editorial__frame{max-height:none;aspect-ratio:3/2}
  .editorial--banner .editorial__frame{aspect-ratio:16/9}
}
@media (max-width:759px){
  .editorial__caption{gap:.4rem 1rem;font-size:.8125rem;margin-top:.8rem}
  .editorial--hero .editorial__frame,.editorial--page .editorial__frame{aspect-ratio:4/3;border-bottom-right-radius:2.5rem}
  .editorial--banner .editorial__frame{aspect-ratio:4/3}
  .phero__grid{gap:2rem}
  .phero--editorial .phero__t{font-size:clamp(2rem,1rem + 4.2vw,3.5rem)}
}
@media (prefers-reduced-motion:reduce){.js .phero__copy>*{animation:none}}
.rm .phero__copy>*{animation:none!important}

/* ================= Série photographique 02 · usages et gestes de métier ================= */
.service-showcase{min-width:0}
.editorial--service .editorial__frame{aspect-ratio:3/2}
.editorial--service .editorial__caption{gap:.4rem 1rem;font-size:.8125rem}
.editorial--mobilelife .photo img{object-position:54% 48%}
.service-preview{margin-top:1.1rem;border-top:1px solid var(--line)}
.service-preview>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3rem;padding:.6rem .1rem;cursor:pointer;list-style:none;font-size:.875rem;color:var(--fg)}
.service-preview>summary::-webkit-details-marker{display:none}
.service-preview>summary .ico{flex:none;width:1rem;height:1rem;color:var(--accent-t);transition:rotate .25s var(--ease-out)}
.service-preview[open]>summary .ico{rotate:45deg}
.service-preview__body{padding-top:.75rem}
.editorial--film-banner{position:relative;margin-bottom:clamp(2.5rem,5vw,4rem)}
.editorial--film-banner .editorial__frame{aspect-ratio:21/9;border-radius:var(--r-l) var(--r-l) 3.5rem var(--r-l)}
.editorial--film-banner .photo img{object-position:50% 10%}
.editorial--film-banner .editorial__frame::after{background:linear-gradient(transparent 40%,rgba(6,18,14,.8));border-color:rgba(173,195,183,.2)}
.editorial--film-banner .editorial__caption{position:absolute;left:clamp(1.25rem,3vw,3rem);right:clamp(1.25rem,3vw,3rem);bottom:clamp(1.25rem,3vw,2.5rem);z-index:1;margin:0;align-items:end;color:var(--lichen)}
.editorial--film-banner .editorial__caption>span:first-child{max-width:19ch;font-family:var(--f-display);font-size:clamp(1.3rem,1rem + 1.3vw,2.2rem);font-weight:400;line-height:1.2;letter-spacing:-.025em;color:var(--brume);text-wrap:balance}
.process-gallery{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--col-gap);align-items:end;margin-bottom:clamp(3rem,5vw,5rem)}
.process-gallery .editorial__frame{aspect-ratio:16/10;max-height:24rem}
.process-gallery .editorial:last-child .editorial__frame{aspect-ratio:16/11}
.process-gallery .editorial__caption{display:grid;gap:.3rem}
.process-gallery .editorial:first-child .photo img{object-position:55% 56%}
.fcard{--card-pad:clamp(1.5rem,2.5vw,2.25rem);padding:var(--card-pad)}
.fcard__media{position:relative;flex:none;height:clamp(11rem,18vw,14rem);width:calc(100% + 2 * var(--card-pad));margin:calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) .25rem;overflow:hidden;border-radius:var(--r-l) var(--r-l) 0 0;background:var(--nuit)}
.fcard__media .photo img{object-position:50% 43%}
.fcard:nth-child(4) .fcard__media .photo img{object-position:50% 58%}
.fcard:nth-child(5) .fcard__media .photo img{object-position:60% 33%}
.manifesto__statement{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,5vw,5rem)}
.editorial--manifesto .editorial__frame{aspect-ratio:5/4;border-bottom-right-radius:3.5rem}
.editorial--manifesto .photo img{object-position:62% 45%}
.editorial--manifesto .editorial__caption{display:grid;gap:.3rem}
@media (max-width:959px){
  .xp__panel .xp__visual{order:-1}
  .manifesto__statement{grid-template-columns:1fr;gap:2.5rem}
  .editorial--manifesto{max-width:46rem}
  .editorial--manifesto .editorial__frame{aspect-ratio:3/2}
  .editorial--film-banner .editorial__frame{aspect-ratio:16/9}
}
@media (max-width:759px){
  .process-gallery{grid-template-columns:1fr;gap:1.75rem}
  .process-gallery .editorial__frame,.process-gallery .editorial:last-child .editorial__frame{aspect-ratio:16/10;max-height:none}
  .editorial--film-banner .editorial__frame{aspect-ratio:4/3;border-bottom-right-radius:2.5rem}
  .editorial--film-banner .photo img{object-position:58% 44%}
  .editorial--film-banner .editorial__caption{display:grid;gap:.6rem}
  .editorial--film-banner .editorial__caption>span:first-child{font-size:1.25rem;max-width:20ch}
  .fcard__media{height:12.5rem}
  .editorial--manifesto .editorial__frame{aspect-ratio:4/3;border-bottom-right-radius:2.5rem}
}

@media (min-width:960px){
  .js .xp__bar{display:block;position:absolute;left:0;top:0;z-index:1;width:2px;height:var(--bh,0);translate:0 var(--bt,0);background:var(--accent-t);transition:translate .6s var(--ease-out),height .6s var(--ease-out)}
  .js .xp__panel.is-open .xp__visual{animation:wipe-in 1s var(--ease-out) both}
  .js .xp__panel.is-open .xp__text>*{animation:fade-up .7s var(--ease-out) both}
  .js .xp__panel.is-open .xp__text>:nth-child(2){animation-delay:.06s}
  .js .xp__panel.is-open .xp__text>:nth-child(3){animation-delay:.12s}
  .js .xp__panel.is-open .xp__text>:nth-child(4){animation-delay:.18s}
  .js .xp{display:grid;grid-template-columns:minmax(0,3.6fr) minmax(0,8.4fr);grid-template-rows:repeat(5,auto) 1fr;column-gap:clamp(2rem,4vw,4.5rem);border-top:0}
  .js .xp__h{grid-column:1;grid-row:var(--r);border-bottom:1px solid var(--line)}
  .js .xp__h:first-of-type{border-top:1px solid var(--line)}
  .js .xp__btn[aria-expanded="true"] .xp__name{transform:translateX(.35rem)}
  .js .xp__panel{grid-column:2;grid-row:1/span 6;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(1.5rem,3vw,3rem);padding:0}
  .js .xp__panel:not(.is-open){display:grid;visibility:hidden;opacity:0;pointer-events:none}
  .js .xp__panel.is-open{animation:none;visibility:visible;opacity:1;transition:opacity .45s var(--ease-out)}
  .js .xp__panel .xp__visual{transition:transform .6s var(--ease-out)}
  .js .xp__panel:not(.is-open) .xp__visual{transform:translateY(16px) scale(.98)}
}
@media (min-width:1100px){
  .hdr__nav{display:block}
}
@media (max-width:1099px){
  .hdr__nav{display:none}
  .hdr__burger{display:inline-flex}
  .grid4,.principes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:959px){
  .hero__lead,.hero__ctas{grid-column:1/-1}
  .hero__visual{grid-column:1/-1;grid-row:auto;margin-top:clamp(2rem,6vw,3rem)}
  .hero__list{grid-column:1/-1;order:5}
  .sec__head .h2,.sec__intro{grid-column:1/-1}
  .sec__intro{margin-top:1.25rem;max-width:36em}
  .work .work__media,.work .work__body,.work--rev .work__media,.work--rev .work__body{grid-column:1/-1;grid-row:auto}
  .sb{grid-template-columns:1fr}
  .sb__screen,.sb__ui,.sb__panel{grid-column:1;grid-row:auto}
  .sb__ui{flex-direction:column}
  .sb__ctrls{justify-content:center}
  .step__body{grid-template-columns:1fr}
  .step__out{grid-column:1}
  .fcard,.fcard:nth-child(n+4){grid-column:span 3}
  .fcard:last-child{grid-column:1/-1}
  .faq__aside,.faq__list{grid-column:1/-1;position:static}
  .contact__aside,.contact__form{grid-column:1/-1}
  .xd__head,.xd__visual,.xd__cols,.xd__presta{grid-column:1/-1}
  .xd__cols{grid-template-columns:1fr 1fr}
  .split>:first-child,.split>:last-child{grid-column:1/-1}
  .manifesto__cols{grid-template-columns:1fr}
  .ftr__tag{text-align:left}
}
@media (max-width:759px){
  :root{--hdr-h:4.25rem}
  .hdr.is-scrolled{--hdr-h:3.75rem}
  .hdr__cta{display:none}
  .hdr__logo .logo{height:1.9rem}
  .is-scrolled .hdr__logo .logo{height:1.75rem}
  .fab{display:inline-flex}
  .hero__ctas .btn{flex:1 1 100%;justify-content:space-between}
  .stage__ui{justify-content:center}
  .stage__cap{display:none}
  .stage__states button{min-height:2.75rem;padding:0 .65rem;font-size:.75rem}
  .work__cols{grid-template-columns:1fr}
  .work__media{margin-inline:calc(var(--gutter) * -1)}
  .work__media .pv{border-radius:0;--pv-r:0px}
  .stage__chip{display:none}
  .work__num{top:-.5em;font-size:7rem}
  .sb__screen{margin-inline:calc(var(--gutter) * -1);border-radius:0;border-inline:0}
  .sb__tabs{grid-template-columns:repeat(5,minmax(0,1fr));gap:.3rem}
  .sb__tabs [role="tab"]{grid-template-columns:1fr;justify-items:center;padding:.5rem .25rem .6rem;text-align:center}
  .sb__t{font-size:.6875rem;hyphens:auto;overflow-wrap:anywhere}
  .fcard,.fcard:nth-child(n+4){grid-column:1/-1}
  .fcards{grid-template-columns:1fr}
  .xd__cols{grid-template-columns:1fr}
  .presta div{grid-template-columns:1fr}
  .form__fields{grid-template-columns:1fr}
  .form__foot .btn{width:100%;justify-content:space-between}
  .demo__stage{padding:7% 5%;min-height:0}
  .grid4,.principes{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:1fr 1fr}
  .ftr__bot{flex-direction:column-reverse;align-items:flex-start}
  .qa__a{padding-right:0}
}
@media (hover:none){
  .fcard:hover{transform:none}
}

/* ================= Préférences : animations réduites ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
  .pv__layer,.pv__float{translate:none}
  .st-halo{display:none}
  .live-dot{box-shadow:0 0 0 3px rgba(226,98,47,.3)}
  .sc-caret{opacity:1}
  .sb.is-playing .sb__tabs [aria-selected="true"] .sb__p i{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
/* appareils modestes : effets allégés (classe posée par site.js) */
.lite .pv__layer,.lite .pv__float{translate:none}
.lite .hdr.is-scrolled{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(6,18,14,.96)}
.lite .hdr--light.is-scrolled{background:rgba(231,239,233,.97)}
.lite .tw{animation:none}

/* ================= Animations réduites : préférence système ou choix du visiteur (classe .rm) ================= */
html.rm *,html.rm *::before,html.rm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
.rm [data-reveal],.rm .js [data-reveal]{opacity:1;transform:none}
.rm .pv__layer,.rm .pv__float{translate:none;transform:none}
.rm .st-halo,.rm .hero__net,.rm .st-pulse{display:none}
.rm .live-dot{box-shadow:0 0 0 3px rgba(226,98,47,.3)}
.rm .swi{transform:none}
.rm .work__media .pv{clip-path:none;transform:none}
.rm .work__media .pv__in{scale:1}
.rm .stage__chip{animation:none}
.rm .logo--draw .lg-lines polyline,.rm .logo--draw .lg-word path{stroke-dashoffset:0}
.rm .logo--draw .lg-nodes circle,.rm .logo--draw .lg-live{scale:1}
.rm .logo--draw .lg-dash,.rm .logo--draw .lg-word polygon{opacity:1}
.rm .marquee__track{transform:none!important}
.rm .sb.is-playing .sb__tabs [aria-selected="true"] .sb__p i{animation:none}
html.rm::view-transition-old(root),html.rm::view-transition-new(root),html.rm::view-transition-group(hdr){animation:none}