@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/jetbrains-mono.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/manrope.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/manrope.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/manrope.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/manrope.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic.woff2) format("woff2")}

/* Anthracite d'un seul tenant, angles droits. Titres très serrés en Manrope, étiquettes en mono.
   Blocs « papier » blancs pour ce qui se lit ou se manipule, nuage de pixels animé dans le hero. */
:root{
  --bg:#2B2A2F;        /* anthracite chaud */
  --bg-2:#242328;      /* bandes alternées */
  --bg-3:#1C1B20;      /* console, champs */
  --line:#45434C;
  --paper:#F3F1EC;     /* blocs blancs */
  --ink:#151418;
  --ink-2:#5E5B66;
  --fg:#ECEAE6;
  --muted:#A6A2AD;
  --coral:#FF7A5C;
  --violet:#7B5CFF;
  --f-display:"Manrope","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.55 var(--f-display);-webkit-font-smoothing:antialiased}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--f-display);text-wrap:balance}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
.mono{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.06em}
.label{display:inline-block;font:500 .78rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:var(--bg-3);color:var(--fg);padding:6px 8px}
.label.c{background:var(--coral);color:var(--ink)}
.coral{color:var(--coral)}
.px{display:inline-block;width:14px;height:14px;flex:none}
.btn{display:inline-flex;align-items:center;gap:16px;font:600 .82rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:20px 24px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s}
.btn.coral{background:var(--coral);color:var(--ink)}
.btn.coral:hover{transform:translateY(-2px);background:#FF8E74}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--fg)}
.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* Navigation : barre papier + bloc noir */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:40;background:var(--bg)}
.navwrap{position:sticky;top:env(safe-area-inset-top, 0px);z-index:30;padding-block:18px}
nav.top{display:flex;align-items:stretch;background:var(--paper);color:var(--ink);box-shadow:0 18px 40px -24px rgba(0,0,0,.6)}
.logo{display:flex;align-items:center;padding:0 26px;font:600 .95rem/1 var(--f-mono);letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.logo span{color:var(--coral)}
.links{flex:1;display:flex;justify-content:center;gap:40px;font:500 .85rem/1 var(--f-mono);letter-spacing:.06em}
.links a{display:flex;align-items:center;text-decoration:none;padding:24px 0;position:relative}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.links a:hover::after{transform:scaleX(1)}
.navcta{display:flex;align-items:center;gap:28px;background:var(--ink);color:var(--paper);padding:0 26px;font:600 .82rem/1 var(--f-mono);letter-spacing:.08em;text-decoration:none;white-space:nowrap;min-height:64px}
.navcta:hover .px{transform:rotate(90deg)}
.navcta .px{transition:transform .3s}
@media (max-width:900px){.links{display:none}.logo{flex:1}}
@media (max-width:420px){.logo{padding:0 14px;font-size:.82rem}.navcta{padding:0 14px;gap:12px}.navcta .long{display:none}}

/* Hero */
.hero{position:relative;overflow:hidden}
#pixels{position:absolute;left:0;top:0;width:62%;height:100%;pointer-events:none}
@media (max-width:760px){#pixels{width:100%;opacity:.32}}
.hero .wrap{position:relative;padding-block:clamp(56px,10vw,120px) 96px}
.hero h1{font-weight:600;font-size:clamp(2.7rem,7.6vw,6.6rem);line-height:.98;letter-spacing:-.055em}
.hero h1 .l2{display:block;padding-left:clamp(0px,16vw,21rem)}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin-top:52px;align-items:start}
@media (max-width:860px){.hero-row{grid-template-columns:minmax(0,1fr);gap:36px}}
.hero-left{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.hero-right{display:flex;flex-direction:column;gap:30px;align-items:flex-start}
.hero-right p{font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.45;color:var(--fg);max-width:34ch;letter-spacing:-.01em}

/* Pile de cartes qui défilent */
.stack{position:relative;width:min(100%,520px);height:132px;perspective:900px}
.card{position:absolute;inset:0 0 auto;height:112px;background:var(--paper);color:var(--ink);display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center;padding:0 34px;font:500 clamp(.85rem,1.5vw,1rem)/1.45 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;transform-origin:50% 100%;transition:transform .8s cubic-bezier(.65,0,.25,1),opacity .8s cubic-bezier(.65,0,.25,1);box-shadow:0 2px 0 #D9D5CE,0 26px 40px -26px rgba(0,0,0,.7)}
.card b{font-weight:500;color:var(--ink-2)}
.card[data-pos="0"]{transform:translateY(0) rotateX(0);opacity:1;z-index:3}
.card[data-pos="1"]{transform:translateY(12px) scale(.96);opacity:.75;z-index:2}
.card[data-pos="2"]{transform:translateY(22px) scale(.92);opacity:.4;z-index:1}
.card[data-pos="out"]{transform:translateY(-36px) rotateX(-70deg);opacity:0;z-index:4}

/* Bandes */
section.band{padding-block:clamp(80px,10vw,128px)}
section.alt{background:var(--bg-2)}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 48px;align-items:end;margin-bottom:56px}
@media (max-width:860px){.head{grid-template-columns:minmax(0,1fr)}}
.head .k{grid-column:1/-1}
h2{font-weight:600;font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1;letter-spacing:-.05em}
.head p{color:var(--muted);font-size:1.08rem;max-width:46ch}

/* Workflow vivant */
.wf-shell{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line)}
.wf-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:14px 18px;border-bottom:1px solid var(--line);font:500 .74rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wf-bar .live{display:inline-flex;align-items:center;gap:8px;color:var(--fg)}
.wf-bar .live::before{content:"";width:7px;height:7px;background:var(--coral);animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.wf-stage{position:relative;padding:clamp(26px,4vw,52px);background-image:radial-gradient(rgba(236,234,230,.07) 1px,transparent 1px);background-size:22px 22px}
.wf-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,.9fr);gap:48px;align-items:center}
.wf-out{display:flex;flex-direction:column;gap:18px}
@media (max-width:980px){.wf-grid{grid-template-columns:minmax(0,1fr);gap:34px;max-width:440px;margin:0 auto}.wf-out{flex-direction:row;gap:10px}.wf-out .wn{flex:1;padding:12px}}
#wfSvg{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}
.wire{fill:none;stroke:var(--line);stroke-width:1.5}
.flow{fill:none;stroke:url(#gFlow);stroke-width:2.5;stroke-linecap:square}
.pk{fill:var(--coral)}
.wn{position:relative;background:var(--paper);color:var(--ink);padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;min-width:0;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s;box-shadow:0 2px 0 #D9D5CE}
.wn.on{transform:translateY(-4px);box-shadow:0 0 0 2px var(--coral),0 22px 40px -18px rgba(255,122,92,.55)}
.wn-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wn-ic{font:600 .68rem/1 var(--f-mono);letter-spacing:.04em;background:var(--ink);color:var(--paper);padding:5px 6px}
.wn.on .wn-ic{background:var(--coral);color:var(--ink)}
.wn-st{font:500 .62rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.wn.on .wn-st{color:var(--coral)}
.wn.done .wn-st{color:#2F8F5B}
.wn-t{font:600 1.02rem/1.2 var(--f-display);letter-spacing:-.02em}
.wn-d{font:400 .78rem/1.35 var(--f-mono);color:var(--ink-2);min-height:2.7em}
.wn-bar{height:3px;background:#E2DED6;overflow:hidden}
.wn-bar i{display:block;height:100%;width:0;background:var(--coral)}
.wn .val{align-self:flex-start;font:600 .66rem/1 var(--f-mono);letter-spacing:.08em;background:var(--ink);color:var(--paper);padding:7px 9px;transition:background .3s,color .3s}
.wn .val.ok{background:#2F8F5B;color:#fff}
.wf-out .wn-d{min-height:0}
.wf-foot{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);border-top:1px solid var(--line)}
@media (max-width:860px){.wf-foot{grid-template-columns:minmax(0,1fr)}}
.log{list-style:none;margin:0;padding:16px 18px;height:178px;overflow:hidden;font:400 .76rem/1.75 var(--f-mono);color:var(--muted);display:flex;flex-direction:column;justify-content:flex-end}
.log li{display:grid;grid-template-columns:5.5em 7em minmax(0,1fr);gap:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:in .45s cubic-bezier(.2,.8,.2,1)}
.log li span:last-child{overflow:hidden;text-overflow:ellipsis;color:var(--fg)}
.log li .s{color:var(--coral)}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.meter{padding:18px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:6px;justify-content:center}
@media (max-width:860px){.meter{border-left:0;border-top:1px solid var(--line)}}
.meter .big{font:600 clamp(2.4rem,5vw,3.4rem)/1 var(--f-mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.meter .sub{font:500 .74rem/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Secteurs */
.tabs{display:flex;flex-wrap:wrap;gap:0;margin-bottom:28px;box-shadow:inset 0 0 0 1px var(--line);width:fit-content;max-width:100%}
.tabs button{font:500 .78rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:transparent;border:0;padding:16px 18px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink)}
.tasks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);box-shadow:0 0 0 1px var(--line)}
@media (max-width:900px){.tasks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tasks{grid-template-columns:minmax(0,1fr)}}
.task{background:var(--bg);padding:26px;display:flex;flex-direction:column;gap:12px;min-width:0;transition:background .25s}
.task:hover{background:#323137}
.task .g{font:500 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--coral)}
.task h3{font-weight:600;font-size:1.25rem;letter-spacing:-.03em;line-height:1.2}
.task p{color:var(--muted);font-size:.95rem}
.task .h{margin-top:auto;font:500 .74rem/1 var(--f-mono);color:var(--fg);letter-spacing:.04em}

/* Calculateur */
.calc{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:920px){.calc{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line);padding:28px;display:flex;flex-direction:column;gap:22px;min-width:0}
.field{display:flex;flex-direction:column;gap:10px}
.field > .lab{display:flex;justify-content:space-between;gap:10px;font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field output{color:var(--fg)}
select,input[type=number]{font:500 .95rem var(--f-mono);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:0;padding:12px;width:100%}
input[type=range]{width:100%;accent-color:var(--coral)}
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:20px minmax(0,1fr) 84px;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}
.row:last-child{border-bottom:1px solid var(--line)}
.row input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--coral)}
.row span{font-size:.95rem}
.row input[type=number]{padding:8px;text-align:right}
.result{background:var(--paper);color:var(--ink);padding:30px;display:flex;flex-direction:column;gap:22px;position:sticky;top:calc(env(safe-area-inset-top, 0px) + 112px);min-width:0}
.result .k{font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.result .big{font:600 clamp(3.4rem,8vw,5.4rem)/.9 var(--f-display);letter-spacing:-.06em}
.result .big small{font-size:.38em;letter-spacing:-.02em;color:var(--ink-2)}
table.gain{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.gain th{font:500 .66rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:right;padding:0 0 10px 8px}
table.gain th:first-child,table.gain td:first-child{text-align:left;padding-left:0}
table.gain td{padding:11px 0 11px 8px;border-top:1px solid #DCD8D0;text-align:right;font:500 .9rem var(--f-mono);white-space:nowrap}
table.gain td:first-child{font-family:var(--f-display);font-weight:500;color:var(--ink-2)}
table.gain td.net{color:#C2462A;font-weight:600}
table.gain tr.yr td{font-weight:600;color:var(--ink)}
table.gain tr.yr td.net{color:#C2462A}
.result .note{font-size:.8rem;color:var(--ink-2)}
.result .btn{align-self:stretch;justify-content:space-between}

/* Méthode */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);box-shadow:0 0 0 1px var(--line)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{background:var(--bg-2);padding:28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.step .n{font:500 .8rem/1 var(--f-mono);color:var(--coral);letter-spacing:.06em}
.step h3{font-weight:600;font-size:1.35rem;letter-spacing:-.03em}
.step p{color:var(--muted);font-size:.95rem}
.step .d{margin-top:auto;font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}

/* Données */
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:900px){.packs{grid-template-columns:minmax(0,1fr)}}
.pack{padding:28px;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:16px;min-width:0}
.pack.feat{background:var(--paper);color:var(--ink);box-shadow:none}
.pack h3{font-weight:600;font-size:1.5rem;letter-spacing:-.04em}
.pack dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;font-size:.93rem}
.pack dt{font:500 .7rem/1.9 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pack.feat dt,.pack.feat .who{color:var(--ink-2)}
.pack dd{margin:0}
.pack .who{font-size:.9rem;color:var(--muted);margin-top:auto}
.guar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
@media (max-width:900px){.guar{grid-template-columns:minmax(0,1fr)}}
.guar div{display:flex;flex-direction:column;gap:8px}
.guar h3{font-weight:600;font-size:1.15rem;letter-spacing:-.02em}
.guar p{color:var(--muted);font-size:.95rem}

/* Tarifs */
.price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
@media (max-width:820px){.price{grid-template-columns:minmax(0,1fr)}}
.pcard{padding:32px;display:flex;flex-direction:column;gap:20px;box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.pcard.paper{background:var(--paper);color:var(--ink);box-shadow:none}
.pcard .amt{font:600 clamp(3rem,6vw,4.4rem)/.95 var(--f-display);letter-spacing:-.06em}
.pcard .amt small{display:block;margin-top:10px;font:500 .74rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pcard.paper .amt small{color:var(--ink-2)}
.pcard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pcard li{padding:11px 0;border-top:1px solid var(--line);font-size:.95rem;display:grid;grid-template-columns:14px minmax(0,1fr);gap:12px;align-items:baseline}
.pcard.paper li{border-top-color:#DCD8D0}
.pcard li::before{content:"";width:8px;height:8px;background:var(--coral)}
.extra{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:baseline;color:var(--muted);font-size:.95rem}
.extra b{color:var(--fg);font-weight:600}

/* FAQ */
.faq{border-top:1px solid var(--line);max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:3.2em minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:24px 0;font-weight:600;font-size:1.15rem;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font:500 .74rem/1 var(--f-mono);color:var(--coral)}
.faq summary::after{content:"+";font:400 1.4rem/1 var(--f-mono);color:var(--muted);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px 3.2em;margin-left:12px;color:var(--muted);max-width:66ch}

/* Contact */
.final{background:var(--paper);color:var(--ink)}
.final .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end}
@media (max-width:860px){.final .wrap{grid-template-columns:minmax(0,1fr)}}
.final h2{font-size:clamp(2.4rem,6vw,5rem)}
.final p{color:var(--ink-2);font-size:1.08rem;max-width:42ch;margin-top:20px}
.mailbox{display:flex;flex-direction:column;gap:12px}
.mailbox code{display:block;background:var(--ink);color:var(--paper);font:500 1rem/1.4 var(--f-mono);padding:20px;word-break:break-all;user-select:all}
.mailbox .btn{justify-content:space-between}
#copyMsg{font:500 .78rem/1.4 var(--f-mono);color:#2F8F5B;min-height:1.4em}
footer{background:var(--ink);color:var(--muted);font:500 .74rem/1.6 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:26px}

@media (prefers-reduced-motion:reduce){.card,.wn,.log li{transition:none;animation:none}}

/* Formulaire de contact */
.final .wrap{align-items:start}
.alt-mail{font-size:.95rem!important}.alt-mail a{color:var(--ink);font-weight:600}
.cform{display:flex;flex-direction:column;gap:18px;min-width:0}
.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:600px){.cgrid{grid-template-columns:minmax(0,1fr)}}
.cf{display:flex;flex-direction:column;gap:7px;font:500 .72rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.cf.wide{grid-column:1/-1}
.cf input,.cf select,.cf textarea{font:400 1rem/1.4 var(--f-display);letter-spacing:0;text-transform:none;color:var(--ink);background:#fff;border:1px solid #CFCAC1;border-radius:0;padding:13px 14px;width:100%}
.cf textarea{resize:vertical;min-height:120px}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:2px solid var(--coral-ink);outline-offset:0;border-color:var(--coral-ink)}
.cform .btn{align-self:flex-start}
.cnote{font-size:.85rem!important;margin:0!important}.cnote a{color:var(--ink)}
.hp{position:absolute;left:-9999px}
.cstatus{font:500 .85rem/1.5 var(--f-mono);margin:0!important;min-height:1.5em}
.cstatus.ok{color:#1F7A47}.cstatus.err{color:var(--coral-ink)}
.cform.sent .cgrid,.cform.sent .cnote,.cform.sent .btn{display:none}
.cform.sent .cstatus{font:600 1.25rem/1.4 var(--f-display);color:var(--ink)}
/* Calculateur : ajout de tâches et hypothèses */
.row{grid-template-columns:20px minmax(0,1fr) 84px 30px}
.row .del{border:0;background:none;color:var(--muted);font:400 1.2rem/1 var(--f-mono);cursor:pointer;padding:4px}
.row .del:hover{color:var(--coral)}
.addrow{display:grid;grid-template-columns:minmax(0,1fr) 84px auto;gap:8px}
@media (max-width:480px){.addrow{grid-template-columns:minmax(0,1fr) 84px}.addrow .btn{grid-column:1/-1;justify-content:center}}
.addrow input[type=text]{font:500 .95rem var(--f-display);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:0;padding:12px;width:100%}
.addrow .btn{padding:12px 16px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media (max-width:480px){.two{grid-template-columns:minmax(0,1fr)}}
.two label{display:flex;flex-direction:column;gap:10px}
.hyp{font:400 .82rem/1.5 var(--f-mono);color:var(--muted);margin:0;padding-top:14px;border-top:1px solid var(--line)}
.hyp b{color:var(--fg);font-weight:500}
/* Tarifs : deux montants qui s'additionnent */
.plan{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);align-items:stretch}
@media (max-width:820px){.plan{grid-template-columns:minmax(0,1fr)}}
.plus{display:flex;align-items:center;justify-content:center;font:300 3rem/1 var(--f-display);color:var(--coral)}
@media (max-width:820px){.plus{padding:10px 0}}
.pstep{padding:32px;display:flex;flex-direction:column;gap:18px;box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.pstep.paper{background:var(--paper);color:var(--ink);box-shadow:none}
.pstep .amt{font:600 clamp(3rem,6vw,4.4rem)/.95 var(--f-display);letter-spacing:-.06em}
.pstep .amt small{display:block;margin-top:10px;font:500 .74rem/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pstep.paper .amt small,.pstep.paper p{color:var(--ink-2)}
.pstep p{color:var(--muted);font-size:.98rem}
.pstep ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pstep li{padding:10px 0;border-top:1px solid var(--line);font-size:.95rem;display:grid;grid-template-columns:14px minmax(0,1fr);gap:12px;align-items:baseline}
.pstep.paper li{border-top-color:#DCD8D0}
.pstep li::before{content:"";width:8px;height:8px;background:var(--coral)}
.example{margin-top:24px;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line);padding:26px 28px;display:flex;flex-direction:column;gap:18px}
.exrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
@media (max-width:820px){.exrow{grid-template-columns:minmax(0,1fr)}}
.exrow div{display:flex;flex-direction:column;gap:6px;padding:4px 22px;border-left:1px solid var(--line)}
.exrow div:first-child{border-left:0;padding-left:0}
@media (max-width:820px){.exrow div{border-left:0;padding:12px 0;border-top:1px solid var(--line)}.exrow div:first-child{border-top:0;padding-top:0}}
.exrow b{font:600 1.5rem/1.15 var(--f-display);letter-spacing:-.03em}
.exrow span{color:var(--muted);font-size:.92rem}
:root{--coral-ink:#A93A20}
.logo span,.final h2 .coral{color:var(--coral-ink)}
.fbrand span{color:var(--coral)}
table.gain td.net,table.gain tr.yr td.net{color:var(--coral-ink)}
/* Ajouts du site : pied de page, pages secteur, pages légales */
.mailto{text-decoration:none}
footer{text-transform:none;letter-spacing:0;font-family:var(--f-display);font-size:.92rem}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:32px;padding-block:48px 28px}
@media (max-width:760px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.fgrid nav{display:flex;flex-direction:column;gap:8px}
.fgrid a{text-decoration:none;color:var(--fg)}.fgrid a:hover{color:var(--coral)}
.fgrid p{max-width:44ch}
.fbrand{font:600 .95rem/1 var(--f-mono);letter-spacing:.04em;color:var(--paper);margin-bottom:14px}.fbrand span{color:var(--coral)}
.fh{font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.fbottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-block:20px;border-top:1px solid #2E2D33;font:500 .72rem/1.6 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.hero h1 .kw{display:block;width:fit-content;margin-bottom:28px;font:500 .8rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:var(--bg-3);color:var(--fg);padding:7px 9px}
.hero.sub .wrap{padding-block:clamp(48px,8vw,96px) 72px}
.hero.sub h1{font-size:clamp(2.4rem,6vw,5rem)}
.crumbs{font:500 .72rem/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:26px;display:flex;flex-wrap:wrap;gap:8px}
.crumbs a{text-decoration:none;color:var(--fg)}.crumbs a:hover{color:var(--coral)}
.tabpanel[hidden]{display:none}
.task .more{margin-top:6px;font:500 .74rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--coral);text-decoration:none}
.sectorlink{display:inline-flex;margin-top:24px}
.lyon{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:860px){.lyon{grid-template-columns:minmax(0,1fr)}}
.lyon p{color:var(--muted);max-width:56ch}
.lyon p + p{margin-top:14px}
.towns{display:flex;flex-wrap:wrap;gap:8px}
.towns li{list-style:none;font:500 .74rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;padding:9px 10px;box-shadow:inset 0 0 0 1px var(--line)}
.towns{margin:0;padding:0}
.prose{max-width:72ch;display:flex;flex-direction:column;gap:18px;color:var(--fg)}
.prose h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-top:26px}
.prose h3{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;margin-top:8px}
.prose p,.prose li{color:#CFCCD4}
.prose ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.prose li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:12px;align-items:baseline}
.prose li::before{content:"";width:8px;height:8px;background:var(--coral)}
.prose a{color:var(--coral)}
.ex{background:var(--paper);color:var(--ink);padding:26px;display:flex;flex-direction:column;gap:10px}
.ex .label{align-self:flex-start}
.ex p{color:var(--ink)}
.legal{max-width:76ch;display:flex;flex-direction:column;gap:14px}
.legal h2{font-size:1.5rem;margin-top:20px;letter-spacing:-.03em}
.legal p,.legal li{color:#CFCCD4}
.skip{position:absolute;left:-999px;top:0;z-index:50;background:var(--coral);color:var(--ink);padding:10px 14px;font:600 .85rem var(--f-mono)}.skip:focus{left:16px;top:16px}
/* ===== Habillage clair : gris pierre, blanc, encre, bleu électrique, touche citron ===== */
:root{
  --bg:#F2F2EF;--bg-2:#FFFFFF;--bg-3:#ECECE7;--line:#E3E3DD;--paper:#FFFFFF;
  --ink:#0F0F12;--ink-2:#55555E;--fg:#0F0F12;--muted:#62626B;
  --coral:#2B45F0;--coral-ink:#2B45F0;--blue:#2B45F0;--lime:#D6F54C;--green:#1FA463;
  --f-mono:"Manrope","Helvetica Neue",Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --r:24px;--sh:0 1px 2px rgba(15,15,18,.04),0 18px 40px -26px rgba(15,15,18,.28);
  color-scheme:light;
}
body{background:var(--bg);color:var(--fg)}
body::before{background:var(--bg)}
::selection{background:var(--lime);color:var(--ink)}
.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
h1,h2,h3{font-weight:700}
h2{letter-spacing:-.045em}
.coral{color:var(--blue)}
h1 .coral,h2 .coral,.final h2 .coral{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--blue)}

/* Étiquettes : pastilles */
.label{font:600 .72rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;background:var(--paper);color:var(--ink);padding:9px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.label.c{background:var(--ink);color:#fff;box-shadow:none}
.label .dot,.kw .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:10px;vertical-align:1px;box-shadow:0 0 0 4px rgba(31,164,99,.14)}
.label.k{display:inline-flex;align-items:center;width:fit-content}

/* Boutons : pilules avec rond fléché */
.btn{font:600 .98rem/1 var(--f-mono);letter-spacing:-.005em;text-transform:none;border-radius:999px;padding:8px 8px 8px 24px;gap:18px;min-height:56px}
.btn.coral{background:var(--blue);color:#fff}
.btn.coral:hover{background:#1F37D6;transform:translateY(-2px)}
.btn.ghost{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);padding:8px 24px}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.arr{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;color:var(--blue);flex:none;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.arr svg{width:16px;height:16px}
.btn:hover .arr,.navcta:hover .arr{transform:translateX(3px)}
.btn.ghost .arr{background:var(--ink);color:#fff}

/* Navigation flottante */
.navwrap{padding-block:16px}
nav.top{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);border-radius:999px;box-shadow:inset 0 0 0 1px var(--line),0 14px 34px -22px rgba(15,15,18,.35);padding:7px;align-items:center}
.logo{gap:12px;padding:0 14px 0 2px;font:700 1.08rem/1 var(--f-mono);letter-spacing:-.02em;text-transform:none}
.lbox{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--ink);color:var(--lime);flex:none}
.lbox .ico{width:24px;height:24px}
.links{gap:36px;font:500 .98rem/1 var(--f-mono);letter-spacing:-.005em;text-transform:none;color:var(--ink-2)}
.links a{padding:18px 0}
.links a:hover{color:var(--ink)}
.links a::after{background:var(--blue);bottom:10px;border-radius:2px}
.navcta{background:var(--ink);color:#fff;border-radius:999px;min-height:52px;padding:6px 6px 6px 24px;gap:18px;font:600 .98rem/1 var(--f-mono);letter-spacing:-.005em;text-transform:none}
.navcta .arr{background:var(--lime);color:var(--ink)}
@media (max-width:900px){.logo{flex:1}}
@media (max-width:420px){.logo{font-size:.95rem;padding:0 6px 0 0}.lbox{width:38px;height:38px}.navcta{padding:5px 5px 5px 16px;gap:10px}}

/* Hero */
.hero{overflow:hidden;background:
  radial-gradient(60% 55% at 85% 20%,rgba(43,69,240,.10),transparent 70%),
  radial-gradient(45% 45% at 78% 98%,rgba(214,245,76,.28),transparent 70%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(15,15,18,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,15,18,.035) 1px,transparent 1px);background-size:92px 92px;-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 70%);mask-image:linear-gradient(90deg,transparent 30%,#000 70%)}
.hero .wrap.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;padding-block:clamp(48px,7vw,96px) clamp(64px,8vw,112px)}
@media (max-width:920px){.hero .wrap.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero h1{font-weight:700;font-size:clamp(3rem,7vw,6.4rem);line-height:.98;letter-spacing:-.055em}
.hero h1 .ln{display:block}
.hero h1 em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;color:var(--blue);letter-spacing:-.02em;font-size:1.04em;line-height:1}
.hero h1 .kw{display:inline-flex;align-items:center;width:fit-content;margin-bottom:34px;font:600 .74rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line)}
.hero .lead{margin-top:34px;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.55;color:var(--ink-2);max-width:36ch;letter-spacing:-.01em}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-vis{position:relative;min-height:520px;display:grid;place-items:center}
@media (max-width:920px){.hero-vis{min-height:400px}}
#pixels,.hero-vis #pixels{position:absolute;inset:-6% -10%;width:120%;height:112%;opacity:1}
@media (max-width:760px){.hero-vis #pixels{opacity:.7}}
.hcard{position:relative;z-index:1;width:min(100%,560px);background:rgba(255,255,255,.88);backdrop-filter:blur(6px);border-radius:32px;box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -40px rgba(15,15,18,.35);padding:26px 26px 44px}
.hcard-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:44px}
.chip{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border-radius:999px;padding:11px 18px 11px 14px;font:600 .74rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}
.chip .ico{width:18px;height:18px;color:#8EA0FF}
.dots{display:flex;gap:6px}.dots i{width:7px;height:7px;border-radius:50%;background:#CFCFC9}
.hcard .stack{width:100%;height:150px}
.card{height:118px;background:#fff;color:var(--ink);border-radius:20px;box-shadow:inset 0 0 0 1px var(--line),0 12px 28px -20px rgba(15,15,18,.4);padding:0 28px;font:600 clamp(.95rem,1.5vw,1.12rem)/1.4 var(--f-mono);letter-spacing:-.01em;text-transform:none}
.card b{font:400 1.7rem/1 var(--serif);font-style:italic;color:var(--blue)}

/* Bandes */
section.alt{background:var(--bg-2)}
.head p{color:var(--muted)}

/* Workflow */
.wf-shell{background:var(--paper);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line),var(--sh);overflow:hidden}
.wf-bar{color:var(--muted);font:600 .74rem/1.3 var(--f-mono);border-bottom-color:var(--line)}
.wf-bar .live{color:var(--ink)}
.wf-bar .live::before{background:var(--green);border-radius:50%}
.wf-stage{background-color:#FAFAF8;background-image:radial-gradient(rgba(15,15,18,.09) 1px,transparent 1px)}
.wire{stroke:#D6D6D0}
.pk{fill:var(--blue)}
.wn{background:#fff;color:var(--ink);border-radius:16px;box-shadow:inset 0 0 0 1px var(--line),0 10px 24px -20px rgba(15,15,18,.4)}
.wn.on{box-shadow:0 0 0 2px var(--blue),0 22px 40px -18px rgba(43,69,240,.45)}
.wn-ic{background:var(--ink);color:#fff;border-radius:7px;font:700 .66rem/1 var(--f-mono);letter-spacing:.04em}
.wn.on .wn-ic{background:var(--blue);color:#fff}
.wn-st{font:600 .62rem/1 var(--f-mono)}
.wn.on .wn-st{color:var(--blue)}
.wn.done .wn-st{color:var(--green)}
.wn-d{font:500 .8rem/1.35 var(--f-mono)}
.wn-bar{background:#EDEDE8;border-radius:3px}.wn-bar i{background:var(--blue)}
.wn .val{border-radius:999px;background:var(--ink);color:#fff;font:700 .66rem/1 var(--f-mono)}
.wn .val.ok{background:var(--green)}
.wf-foot{border-top-color:var(--line)}
.log{font:500 .78rem/1.75 var(--f-mono);color:var(--muted)}
.log li span:last-child{color:var(--ink)}
.log li .s{color:var(--blue);font-weight:700}
.meter{border-left-color:var(--line)}
.meter .big{font:700 clamp(2.4rem,5vw,3.4rem)/1 var(--f-mono);font-variant-numeric:tabular-nums}
.meter .sub{font:600 .74rem/1.4 var(--f-mono)}

/* Onglets */
.tabs{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:5px;gap:4px}
.tabs button{font:600 .92rem/1 var(--f-mono);letter-spacing:-.005em;text-transform:none;color:var(--ink-2);border-radius:999px;padding:13px 18px}
.tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
@media (max-width:700px){.tabs{border-radius:22px}}

/* Cartes de tâches */
.tasks{gap:16px;background:none;box-shadow:none}
.task{background:var(--paper);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);padding:28px;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
section.alt .task{background:var(--bg)}
.task:hover{background:var(--paper);transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--line),var(--sh)}
.task .g{font:700 .7rem/1 var(--f-mono);letter-spacing:.07em;color:var(--blue)}
.task h3{font-weight:700}
.task p{color:var(--muted)}
.task .h{font:600 .8rem/1 var(--f-mono);color:var(--ink);text-transform:none;letter-spacing:0}
.secline{margin-top:24px;color:var(--muted)}
.secline a{color:var(--ink);font-weight:600;text-decoration-color:var(--blue);text-underline-offset:3px}

/* Calculateur */
.panel{background:var(--paper);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line)}
section.alt .panel{background:var(--bg)}
.field > .lab{font:700 .72rem/1 var(--f-mono);color:var(--ink-2)}
.field > .lab span{color:var(--muted);font-weight:600}
select,input[type=number],.addrow input[type=text]{font:500 .98rem var(--f-mono);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px}
.ctabs{display:flex;flex-wrap:wrap;gap:6px}
.ctabs button{display:inline-flex;align-items:center;gap:8px;font:600 .86rem/1 var(--f-mono);color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 14px;cursor:pointer}
.ctabs button[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.ctabs .n:not(:empty){display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:.72rem}
.row{border-top-color:var(--line)}.row:last-child{border-bottom-color:var(--line)}
.row input[type=checkbox]{accent-color:var(--blue)}
.row .del:hover{color:var(--blue)}
.hyp{font:500 .85rem/1.55 var(--f-mono);color:var(--muted);border-top-color:var(--line)}
.hyp b{color:var(--ink)}
.result{background:var(--ink);color:#fff;border-radius:var(--r);box-shadow:var(--sh)}
.result .k{font:700 .72rem/1 var(--f-mono);color:#A7A7B0}
.result .big small{color:#A7A7B0}
table.gain th{font:700 .66rem/1.2 var(--f-mono);color:#8D8D96}
table.gain td{font:600 .92rem var(--f-mono);border-top-color:rgba(255,255,255,.12);font-variant-numeric:tabular-nums}
table.gain td:first-child{color:#C9C9D0}
table.gain td.net,table.gain tr.yr td.net{color:var(--lime)}
table.gain tr.yr td{color:#fff}
.result .note{color:#A7A7B0}
.result .btn.coral .arr{background:#fff}

/* Méthode */
.steps{gap:16px;background:none;box-shadow:none}
.step{background:var(--paper);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line)}
section.alt .step{background:var(--bg)}
.step .n{font:400 2rem/1 var(--serif);font-style:italic;color:var(--blue);letter-spacing:0}
.step p{color:var(--muted)}
.step .d{font:700 .72rem/1 var(--f-mono);color:var(--ink);background:var(--bg-3);align-self:flex-start;padding:8px 12px;border-radius:999px}

/* Données */
.pack{background:var(--bg);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line)}
.pack.feat{background:var(--ink);color:#fff;box-shadow:var(--sh)}
.pack.feat .label.c{background:var(--lime);color:var(--ink)}
.pack dt{font:700 .7rem/1.9 var(--f-mono);color:var(--muted)}
.pack.feat dt,.pack.feat .who{color:#A7A7B0}
.pack .who{color:var(--muted)}
.guar p{color:var(--muted)}

/* Tarifs */
.pstep{background:var(--paper);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line)}
.pstep.paper{background:var(--ink);color:#fff;box-shadow:var(--sh)}
.pstep.paper .label.c{background:var(--lime);color:var(--ink)}
.pstep .amt small{font:600 .78rem/1.4 var(--f-mono);letter-spacing:0;text-transform:none;color:var(--muted)}
.pstep.paper .amt small,.pstep.paper p{color:#B5B5BD}
.pstep p{color:var(--muted)}
.pstep li{border-top-color:var(--line)}
.pstep.paper li{border-top-color:rgba(255,255,255,.12)}
.pstep li::before{background:var(--blue);border-radius:50%}
.pstep.paper li::before{background:var(--lime)}
.plus{font:400 3.4rem/1 var(--serif);font-style:italic;color:var(--blue)}
.pend{margin-top:24px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 28px;background:var(--paper);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);padding:22px 22px 22px 28px}
.pend p{color:var(--muted);max-width:60ch}

/* Lyon */
.lyon p{color:var(--muted)}
.towns li{font:600 .8rem/1 var(--f-mono);letter-spacing:0;text-transform:none;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);padding:10px 14px}

/* FAQ */
.faq{border-top-color:var(--line)}
.faq details{border-bottom-color:var(--line)}
.faq summary{font-weight:700}
.faq summary .q{font:400 1.15rem/1 var(--serif);font-style:italic;color:var(--blue)}
.faq summary::after{color:var(--muted);font-family:var(--f-mono)}
.faq details p{color:var(--muted)}

/* Contact */
.final{background:var(--bg)}
.final .wrap{background:var(--paper);border-radius:32px;box-shadow:inset 0 0 0 1px var(--line),var(--sh);padding:clamp(28px,5vw,56px)}
.final p{color:var(--ink-2)}
.alt-mail a{color:var(--blue)}
.cf{font:700 .72rem/1.2 var(--f-mono);color:var(--ink-2)}
.cf input,.cf select,.cf textarea{border:1px solid var(--line);border-radius:14px;background:#FAFAF8}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:2px solid var(--blue);border-color:var(--blue)}
.cnote a{color:var(--ink)}
.cstatus{font:600 .9rem/1.5 var(--f-mono)}
.cstatus.ok{color:var(--green)}.cstatus.err{color:#C0362C}

/* Pied de page */
footer{background:var(--ink);color:#A7A7B0}
.fgrid a{color:#fff}.fgrid a:hover{color:var(--lime)}
.fbrand{display:flex;align-items:center;gap:12px;font:700 1.05rem/1 var(--f-mono);letter-spacing:-.02em;color:#fff}
.fbrand .lbox{background:#1E1E23}
.fh{font:700 .72rem/1 var(--f-mono);color:#7E7E87}
.fbottom{border-top-color:#26262C;font:600 .74rem/1.6 var(--f-mono);letter-spacing:.02em;text-transform:none}

/* Pages secteur et pages légales */
.hero.sub{background:radial-gradient(50% 60% at 90% 30%,rgba(43,69,240,.10),transparent 70%)}
.hero.sub #pixels{position:absolute;left:auto;right:0;top:0;width:44%;height:100%;inset:auto 0 0 auto;opacity:.75}
@media (max-width:760px){.hero.sub #pixels{width:100%;opacity:.25}}
.hero.sub .wrap{position:relative}
.hero.sub h1{font-size:clamp(2.4rem,6vw,5rem)}
.hero.sub h1 .l2{display:block;padding-left:0}
.hero.sub .hero-right p{color:var(--ink-2)}
.crumbs{font:600 .8rem/1.4 var(--f-mono);letter-spacing:0;text-transform:none;color:var(--muted)}
.crumbs a{color:var(--ink)}.crumbs a:hover{color:var(--blue)}
.prose p,.prose li,.legal p,.legal li{color:var(--ink-2)}
.prose li::before{background:var(--blue);border-radius:50%}
.prose a,.legal a{color:var(--blue)}
.ex{background:var(--paper);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);padding:28px}
.ex .label.c{background:var(--lime);color:var(--ink)}
.skip{background:var(--blue);color:#fff;font:600 .9rem var(--f-mono);border-radius:999px}

/* Ajustements */
.logo .lbox,.fbrand .lbox,nav.top .lbox{color:var(--lime)}
.links a{white-space:nowrap}
@media (max-width:1180px){.links{gap:22px;font-size:.92rem}.navcta{padding-left:18px}}
@media (max-width:1020px){.links{display:none}.logo{flex:1}}
.pack .label,.pstep .label,.guar .label,.ex .label{align-self:flex-start;width:fit-content}
@media (max-width:600px){.hero-vis{min-height:340px}.hcard{padding:20px 20px 32px}.hcard-top{margin-bottom:28px}}
.hero.sub h1 .kw{display:flex;margin-bottom:28px}
.hero.sub #pixels{width:32%;height:52%;top:0;right:0;opacity:.55;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent);mask-image:linear-gradient(180deg,#000 45%,transparent)}
@media (max-width:760px){.hero.sub #pixels{width:60%;opacity:.25}}

/* Logo Loop */
.logo{padding:0 18px 0 16px}
.loopmark{display:block;height:30px;width:auto;overflow:visible}
.logo .loopmark{color:var(--ink)}
.fbrand .loopmark{height:34px;color:#fff}
.fbrand a{display:inline-block}
@media (max-width:420px){.loopmark{height:26px}.logo{padding:0 10px}}

/* Workflow en sombre */
section.dark{background:var(--ink);color:#fff}
.dark .head p{color:#A7A7B0}
.dark .label{background:#1B1B20;color:#fff;box-shadow:inset 0 0 0 1px #2C2C33}
.dark h2 .coral{color:#8E9DFF}
.dark .wf-shell{background:#16161A;box-shadow:inset 0 0 0 1px #2A2A31,0 30px 60px -30px rgba(0,0,0,.6)}
.dark .wf-bar{color:#8D8D96;border-bottom-color:#2A2A31}
.dark .wf-bar .live{color:#fff}
.dark .wf-stage{background-color:#121216;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px)}
.dark .wire{stroke:#33333B}
.dark .pk{fill:var(--lime)}
.dark .wn{background:#1D1D22;color:#fff;box-shadow:inset 0 0 0 1px #2C2C33}
.dark .wn.on{box-shadow:0 0 0 2px #5C72FF,0 22px 40px -18px rgba(92,114,255,.55)}
.dark .wn-ic{background:#2E2E36;color:#fff}
.dark .wn.on .wn-ic{background:#5C72FF}
.dark .wn-st{color:#8D8D96}
.dark .wn.on .wn-st{color:#8E9DFF}
.dark .wn.done .wn-st{color:#5BD08F}
.dark .wn-d{color:#A7A7B0}
.dark .wn-bar{background:#2C2C33}.dark .wn-bar i{background:linear-gradient(90deg,#5C72FF,var(--lime))}
.dark .wn .val{background:#fff;color:var(--ink)}
.dark .wn .val.ok{background:var(--green);color:#fff}
.dark .wf-foot{border-top-color:#2A2A31}
.dark .log{color:#8D8D96}
.dark .log li span:last-child{color:#fff}
.dark .log li .s{color:var(--lime)}
.dark .meter{border-left-color:#2A2A31}
.dark .meter .big{color:#fff}
.dark .meter .sub{color:#8D8D96}
@media (max-width:860px){.dark .meter{border-top-color:#2A2A31}}

/* Estimation jointe au formulaire */
.diagbox{background:#F4F5FF;border-radius:16px;box-shadow:inset 0 0 0 1px #DCE0FF;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.diagbox[hidden]{display:none}
.diaghd{display:flex;justify-content:space-between;align-items:center;gap:12px}
.diagbox .label.c{background:var(--blue);color:#fff}
.diagx{border:0;background:none;color:var(--ink-2);font:600 .85rem var(--f-mono);text-decoration:underline;cursor:pointer;padding:4px}
.diagbox pre{margin:0;white-space:pre-wrap;font:500 .82rem/1.55 var(--f-mono);color:var(--ink);max-height:220px;overflow:auto}
.cform.sent .diagbox{display:none}
.loopmark{height:40px}
.fbrand .loopmark{height:46px}
@media (max-width:420px){.loopmark{height:34px}}