/* Métia Conseil — feuille de style */
/* Métia Conseil — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #f5f2eb;
  --surface-raised: #fbf9f4;
  --surface-sunken: #ece7dc;
  --surface-deep: #11201c;
  --line: #ddd6c8;
  --line-strong: #7c8781;
  --ink: #11201c;
  --ink-muted: #56615b;
  --on-deep: #eeeae1;
  --on-deep-muted: #a9b3ad;
  --braise: #b34016;
  --braise-soft: #fae6da;
  --on-braise: #ffffff;
  --braise-on-deep: #f07a45;
  --sauge: #2f6b57;
  --sauge-soft: #dce8e1;
  --focus-ring: var(--braise);
  --link: var(--braise);
  --shadow-float: 0 1px 2px rgba(17,32,28,0.06), 0 16px 40px -16px rgba(17,32,28,0.22);
}
[data-theme="dark"] {
  --surface: #0e1a17;
  --surface-raised: #15241f;
  --surface-sunken: #0a1411;
  --surface-deep: #0a1411;
  --line: #2a3a34;
  --line-strong: #5d6b65;
  --ink: #eeeae1;
  --ink-muted: #a9b3ad;
  --on-deep: #eeeae1;
  --on-deep-muted: #a9b3ad;
  --braise: #f07a45;
  --braise-soft: #3a1e12;
  --on-braise: #11201c;
  --braise-on-deep: #f07a45;
  --sauge: #7fc2a8;
  --sauge-soft: #16302a;
  --focus-ring: var(--braise);
  --link: var(--braise);
  --shadow-float: 0 1px 2px rgba(0,0,0,0.4), 0 16px 40px -16px rgba(0,0,0,0.6);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
.display-xl { font-family: var(--font-display); font-size: 88px; line-height: 0.95; font-weight: 400; letter-spacing: -0.02em; }
.display-l { font-family: var(--font-display); font-size: 56px; line-height: 1.02; font-weight: 400; letter-spacing: -0.015em; }
.display-m { font-family: var(--font-display); font-size: 36px; line-height: 1.1; font-weight: 400; letter-spacing: -0.01em; }
.title { font-family: var(--font-sans); font-size: 20px; line-height: 1.35; font-weight: 700; }
.body-l { font-family: var(--font-sans); font-size: 19px; line-height: 1.6; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; font-weight: 500; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.12em; }
.data { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; }

/* Métia Conseil — composants (HTML simple, préfixe mt-) */
body { margin: 0; font-family: var(--font-sans); background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.mt-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-6); }
.mt-btn { display: inline-flex; align-items: center; gap: var(--space-2); font: 700 15px/1 var(--font-sans); height: 48px; padding: 0 var(--space-6); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; justify-content: center; transition: transform .15s ease, background-color .15s ease; }
.mt-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mt-btn--primary { background: var(--braise); color: var(--on-braise); }
.mt-btn--primary:hover { transform: translateY(-1px); }
.mt-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.mt-btn--secondary:hover { background: var(--surface-raised); }
.mt-btn--on-deep { background: var(--on-deep); color: var(--surface-deep); }
.mt-btn svg { width: 18px; height: 18px; }
.mt-eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/16px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.mt-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--braise); }
.mt-deep { background: var(--surface-deep); color: var(--on-deep); }
.mt-deep .mt-eyebrow { color: var(--on-deep-muted); }
.mt-deep .mt-eyebrow::before { background: var(--braise-on-deep); }
.mt-offer { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); }
.mt-offer--featured { border-color: var(--ink); box-shadow: var(--shadow-float); }
.mt-offer__badge { position: absolute; top: -12px; left: var(--space-8); font: 500 11px/24px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 0 10px; border-radius: var(--radius-pill); background: var(--braise); color: var(--on-braise); }
.mt-offer__name { font: 700 20px/1.35 var(--font-sans); margin: 0; }
.mt-offer__price { font: 400 36px/1.1 var(--font-display); margin: 0; }
.mt-offer__price small { font: 500 14px/1.5 var(--font-sans); color: var(--ink-muted); }
.mt-offer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); font: 400 15px/1.5 var(--font-sans); }
.mt-offer__list li { display: flex; gap: var(--space-2); }
.mt-offer__list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--sauge); }


body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-sans)}
a{color:var(--link)}a:hover{color:var(--ink)}
*{box-sizing:border-box}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links a{color:var(--ink);text-decoration:none;font-weight:500;font-size:15px}
.nav-links a:hover{color:var(--braise)}
.h-display{font-family:var(--font-display);font-weight:400;letter-spacing:-0.02em;margin:0}
.h-display em{font-style:italic;color:var(--braise)}
.mt-deep .h-display em{color:var(--braise-on-deep)}
.flow{stroke-dasharray:4 8;animation:flow 2.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-48}}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(240,122,69,.45)}50%{box-shadow:0 0 0 14px rgba(240,122,69,0)}}
@media (prefers-reduced-motion: reduce){.flow,.pulse{animation:none}}
.chip{position:absolute;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:999px;background:rgba(238,234,225,.07);border:1px solid rgba(238,234,225,.16);color:var(--on-deep);font:500 13px/1 var(--font-sans);white-space:nowrap;transform:translateY(-50%)}
.chip i{width:7px;height:7px;border-radius:50%;background:#7fc2a8;flex:none}
.show-sm{display:none}
.hero-bg{position:relative;overflow:hidden}
.hero-bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(17,32,28,.13) 1px,transparent 1.4px);background-size:24px 24px;-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.6) 55%,transparent 100%);pointer-events:none}
.hero-bg>.wrap{position:relative}
.tool{font:500 15px/1 var(--font-mono);color:var(--ink-muted);white-space:nowrap}
.step-dot{position:absolute;top:-7px;left:0;width:13px;height:13px;border-radius:50%;background:var(--surface-sunken);border:2px solid var(--braise)}
.mock-btn{font:700 13px/1 var(--font-sans);height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer}
.mock-btn--go{background:var(--braise);border-color:var(--braise);color:var(--on-braise)}
.quiz-opt{display:flex;align-items:center;gap:14px;text-align:left;min-height:64px;padding:14px 18px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:500 16px/1.35 var(--font-sans);cursor:pointer;transition:border-color .15s ease,background-color .15s ease,transform .15s ease}
.quiz-opt:hover{border-color:var(--ink);transform:translateY(-1px)}
.quiz-opt[aria-pressed="true"]{border-color:var(--braise);background:var(--braise-soft)}
.quiz-opt:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.quiz-key{flex:none;width:28px;height:28px;border-radius:8px;border:1px solid var(--line-strong);display:grid;place-items:center;font:500 12px/1 var(--font-mono);color:var(--ink-muted)}
.card-hover{transition:transform .2s ease,border-color .2s ease}
.card-hover:hover{transform:translateY(-3px);border-color:var(--ink)}
details{border-top:1px solid var(--line)}
details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 0;font:700 18px/1.4 var(--font-sans)}
details summary::-webkit-details-marker{display:none}
details summary span.plus{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;font:400 20px/1 var(--font-sans);transition:transform .2s ease}
details[open] summary span.plus{transform:rotate(45deg)}
details p{margin:0 0 24px;max-width:760px;color:var(--ink-muted);font-size:16px;line-height:1.65}
input[type=range]{width:100%;accent-color:var(--braise);height:32px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font:500 14px/1.4 var(--font-sans);color:var(--on-deep)}
.field input,.field select,.field textarea{font:400 16px/1.4 var(--font-sans);padding:14px 16px;border-radius:12px;border:1px solid rgba(238,234,225,.28);background:rgba(238,234,225,.06);color:var(--on-deep);width:100%}
.field select option{color:#11201c}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--braise-on-deep);outline-offset:2px}
.mt-btn:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (max-width: 900px){
.nav-links{display:none}
.hero-title{font-size:56px !important}
.sec-title{font-size:40px !important}
.chip{font-size:11px;padding:0 10px;height:30px;gap:6px}
.chip i{width:6px;height:6px}
.hide-sm{display:none !important}
.show-sm{display:inline !important}
.hero-panel{aspect-ratio:560 / 640 !important}
.nav-cta{padding:0 14px !important}
.sec{padding-top:64px !important;padding-bottom:64px !important}
#test .wrap>div:first-child{position:static !important}
.q-pad{padding:24px 20px !important}
.q-ring{width:76px !important;height:76px !important}
.q-ring .h-display{font-size:28px !important}
.q-prof{font-size:17px !important}
.q-title{font-size:27px !important}
}

/* ---------- site ---------- */
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
img,svg{max-width:100%}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:8px}
.skip:focus{left:16px}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer}
.nav-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
#mobile-menu{border-top:1px solid var(--line);background:var(--surface)}
#mobile-menu a{display:block;padding:16px 24px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500}
/* */
.show-sm-flex{display:none}
.nav-links a[aria-current="page"]{color:var(--braise)}
.will-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.will-reveal.is-in{opacity:1;transform:none}
[hidden]{display:none !important}
.field input,.field select,.field textarea{color-scheme:dark}
.legal h2{font-family:var(--font-display);font-weight:400;font-size:32px;line-height:1.15;margin:48px 0 12px}
.legal p,.legal li{font-size:16px;line-height:1.7;color:var(--ink-muted)}
@media (max-width: 900px){
.nav-toggle{display:inline-flex}
.show-sm-flex{display:inline-flex !important}
.header-cta{display:none !important}
}
@media (min-width: 901px){#mobile-menu{display:none !important}}

/* ---------- mobile ---------- */
.m-bar{display:none}
.swipe-hint{display:none}
.rail-dots{display:none}
@media (max-width: 900px){
.wrap{padding:0 20px}
.sec{padding-top:56px !important;padding-bottom:56px !important}
.hero-title{font-size:48px !important;line-height:1 !important}
.sec-title{font-size:36px !important;line-height:1.06 !important}
.rail{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:12px !important;margin:0 -20px !important;padding:16px 20px 6px !important;scroll-padding-left:20px;border-top:0 !important}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex:0 0 84%;max-width:360px;scroll-snap-align:start;min-width:0}
.rail>article.mt-offer{flex-basis:86%}
ol.rail>li{padding:24px !important;border:1px solid var(--line) !important;border-radius:20px;background:var(--surface-raised)}
.rail .step-dot{display:none}
.rail .card-hover:hover{transform:none}
.rail-dots{display:flex;justify-content:center;align-items:center;gap:0;margin-top:-40px;flex:0 0 100%;width:100%}
.rail-dots button{min-width:24px;height:32px;padding:0 3px;border:0;background:none;display:grid;place-items:center;cursor:pointer}
.rail-dots button::before{content:"";display:block;width:8px;height:8px;border-radius:999px;background:var(--line-strong);opacity:.5;transition:width .25s ease,opacity .25s ease,background-color .25s ease}
.rail-dots button[aria-current="true"]::before{width:22px;opacity:1;background:var(--braise)}
.mt-deep .rail-dots button[aria-current="true"]::before{background:var(--braise-on-deep)}
.rail-dots button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px;border-radius:8px}
.swipe-hint{display:block;margin:0 0 -8px;font:500 12px/16px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-deep-muted)}
.table-scroll th[scope="row"]{position:sticky;left:0;z-index:1;background:var(--surface-deep);min-width:150px}
.table-scroll table{min-width:680px !important}
.m-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:30;display:flex;gap:8px;padding:8px;border-radius:18px;background:rgba(245,242,235,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:var(--shadow-float);transform:translateY(140%);transition:transform .3s ease}
.m-bar.is-on{transform:none}
.m-bar .mt-btn{flex:1 1 0;height:48px;padding:0 12px;font-size:14px;justify-content:center}
.m-bar .mt-btn--secondary{flex:0 0 auto}
body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
footer{margin-bottom:-84px;padding-bottom:84px}
#contact form,#contact [role="status"]{padding:24px 20px !important}
.q-pad{padding:24px 20px !important}
details summary{font-size:16px;padding:20px 0}
.mt-offer{padding:24px}
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce){.m-bar{transition:none}}