/* Concept : un dossier de preuves. Grille stricte sur papier millimétré sombre,
   fiches marquées TLP, provenance de chaque chiffre en monospace, barre de
   caviardage comme seul geste fort. */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2-variations"); font-weight: 200 800; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2-variations"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, 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"; src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2-variations"); font-weight: 100 800; font-display: swap; unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: oklch(15.5% 0.02 255);
  --bg-2: oklch(18.5% 0.022 255);
  --surface: oklch(21% 0.024 255);
  --surface-2: oklch(25% 0.026 255);
  --line: oklch(33% 0.024 255);
  --grid: oklch(21% 0.022 255);
  --fg: oklch(95% 0.008 245);
  --fg-2: oklch(83% 0.014 245);
  --muted: oklch(68% 0.02 248);
  --accent: oklch(85% 0.12 205);
  --accent-2: oklch(72% 0.13 215);
  --on-accent: oklch(18% 0.04 230);
  --ok: oklch(81% 0.16 152);
  --warn: oklch(84% 0.14 82);
  --crit: oklch(70% 0.18 27);
  --redact: oklch(7% 0.01 255);
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --step--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
  --step-3: clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4: clamp(2.6rem, 1.8rem + 4vw, 5.2rem);
  --radius: 10px;
  --maxw: 74rem;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: oklch(98.4% 0.004 250); --bg-2: oklch(96% 0.007 250); --surface: oklch(100% 0 0); --surface-2: oklch(95.5% 0.008 250);
    --line: oklch(86% 0.012 250); --grid: oklch(94.5% 0.008 250); --fg: oklch(20% 0.025 255); --fg-2: oklch(32% 0.022 255);
    --muted: oklch(46% 0.022 255); --accent: oklch(47% 0.12 228); --accent-2: oklch(40% 0.11 232); --on-accent: oklch(98% 0.01 220);
    --ok: oklch(49% 0.14 152); --warn: oklch(53% 0.13 70); --crit: oklch(51% 0.19 27); --redact: oklch(17% 0.02 255);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: oklch(98.4% 0.004 250); --bg-2: oklch(96% 0.007 250); --surface: oklch(100% 0 0); --surface-2: oklch(95.5% 0.008 250);
  --line: oklch(86% 0.012 250); --grid: oklch(94.5% 0.008 250); --fg: oklch(20% 0.025 255); --fg-2: oklch(32% 0.022 255);
  --muted: oklch(46% 0.022 255); --accent: oklch(47% 0.12 228); --accent-2: oklch(40% 0.11 232); --on-accent: oklch(98% 0.01 220);
  --ok: oklch(49% 0.14 152); --warn: oklch(53% 0.13 70); --crit: oklch(51% 0.19 27); --redact: oklch(17% 0.02 255);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: oklch(15.5% 0.02 255); --bg-2: oklch(18.5% 0.022 255); --surface: oklch(21% 0.024 255); --surface-2: oklch(25% 0.026 255);
  --line: oklch(33% 0.024 255); --grid: oklch(21% 0.022 255); --fg: oklch(95% 0.008 245); --fg-2: oklch(83% 0.014 245);
  --muted: oklch(68% 0.02 248); --accent: oklch(85% 0.12 205); --accent-2: oklch(72% 0.13 215); --on-accent: oklch(18% 0.04 230);
  --ok: oklch(81% 0.16 152); --warn: oklch(84% 0.14 82); --crit: oklch(70% 0.18 27); --redact: oklch(7% 0.01 255);
  color-scheme: dark;
}

@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background-color: var(--bg); color: var(--fg);
  font: 400 var(--step-0)/1.6 var(--font-body);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
  text-rendering: optimizeLegibility;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; margin: 0; font-weight: 700; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }
code, kbd, .mono { font-family: var(--font-mono); font-size: 0.88em; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 40; background: var(--accent); color: var(--on-accent); padding: .6rem 1rem; border-radius: 6px; font-weight: 600; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 0.75rem); }
.muted { color: var(--muted); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.band { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.band-alt { background: color-mix(in oklch, var(--bg-2) 92%, transparent); border-block: 1px solid var(--line); }
.two-col { display: grid; gap: clamp(1.5rem, 4vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.two-col > * { min-width: 0; display: grid; gap: 1rem; align-content: start; }
.eyebrow { font: 600 var(--step--1)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.lead { font-size: var(--step-1); color: var(--fg-2); max-width: 62ch; line-height: 1.5; }
.body-text { color: var(--fg-2); max-width: 65ch; }
.display { font-size: var(--step-4); font-weight: 760; letter-spacing: -0.035em; line-height: 1.02; font-variation-settings: "opsz" 96; }
.display-sm { font-size: var(--step-3); font-weight: 720; letter-spacing: -0.03em; }
.sec-head { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.sec-head > :is(.eyebrow) { flex-basis: 100%; }
.sec-head h1, .sec-head h2 { flex: 1 1 28rem; max-width: 26ch; }
.more { font: 600 var(--step--1)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.more::after { content: " →"; }

/* barre du haut */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in oklch, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--line); view-transition-name: topbar; }
.topbar-in { display: flex; align-items: center; gap: 1rem; min-height: 3.75rem; }
.brand { display: flex; align-items: center; gap: .65rem; color: var(--fg); text-decoration: none; margin-right: auto; }
.mono-mark { display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 8px; background: var(--fg); color: var(--bg); font: 800 0.95rem/1 var(--font-display); letter-spacing: -0.04em; position: relative; overflow: hidden; }
.mono-mark span { color: var(--accent-2); }
.brand-txt { display: grid; font: 700 1rem/1.05 var(--font-display); }
.brand-txt small { font: 500 0.7rem/1.2 var(--font-mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.topbar nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.topbar nav a { display: block; padding: .45rem .7rem; border-radius: 6px; color: var(--fg-2); text-decoration: none; font-weight: 550; }
.topbar nav a:hover { background: var(--surface); color: var(--fg); }
.topbar nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px var(--accent); border-radius: 6px 6px 0 0; }
.tools { display: flex; gap: .4rem; }
.tool { display: inline-flex; align-items: center; gap: .5rem; height: 2.3rem; padding: 0 .7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); font: 500 .85rem var(--font-body); cursor: pointer; }
.tool:hover { color: var(--fg); border-color: var(--muted); }
.tool svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.tool kbd { font-size: .72rem; padding: .1rem .35rem; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }
.theme-btn { width: 2.3rem; justify-content: center; padding: 0; }
.theme-btn svg { width: 1.05rem; fill: currentColor; stroke: none; }
@media (max-width: 54rem) { .topbar nav { order: 3; flex-basis: 100%; overflow-x: auto; } .topbar-in { flex-wrap: wrap; padding-block: .4rem; } .palette-btn span { display: none; } }
@media (max-width: 30rem) { .brand-txt small { display: none; } .tool svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.tool kbd { display: none; } }

/* boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: 0 1.15rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 600 .95rem var(--font-body); text-decoration: none; cursor: pointer; transition: transform .15s, border-color .15s, background-color .15s; }
.btn:hover { border-color: var(--muted); text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-ghost { background: transparent; }
.cta { display: flex; flex-wrap: wrap; gap: .6rem; }

/* héros */
.hero { padding-block: clamp(2.5rem, 1.5rem + 5vw, 6.5rem) clamp(2.5rem, 2rem + 3vw, 5rem); }
.hero-in { display: grid; gap: clamp(2rem, 4vw, 4rem); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 62rem) { .hero-in { grid-template-columns: minmax(0, 1fr); } }
.hero-text { display: grid; gap: 1.4rem; min-width: 0; }
.avail { display: flex; align-items: center; gap: .6rem; font: 500 var(--step--1) var(--font-mono); color: var(--muted); }
.pulse { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in oklch, var(--ok) 60%, transparent); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 .55rem transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* caviardage : le mot est visible au repos, la barre se retire au chargement */
.redact { position: relative; display: inline-block; white-space: nowrap; color: var(--accent); }
.redact::after { content: ""; position: absolute; inset: 0.08em -0.06em 0.02em; background: var(--redact); border-radius: 3px; transform-origin: right; transform: scaleX(0); animation: unredact 1.1s cubic-bezier(.7,0,.2,1) .35s backwards; }
@keyframes unredact { from { transform: scaleX(1); } }

/* terminal */
.term { margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in oklch, var(--redact) 88%, var(--surface)); color: oklch(92% 0.01 245); box-shadow: 0 30px 80px -40px oklch(0% 0 0 / .7); overflow: hidden; font: 400 0.84rem/1.55 var(--font-mono); }
.term-bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; border-bottom: 1px solid oklch(30% 0.02 255); }
.term-bar i { width: .62rem; height: .62rem; border-radius: 50%; background: oklch(40% 0.02 255); }
.term-bar span { margin-left: .6rem; color: oklch(66% 0.02 248); font-size: .76rem; }
.term-body { padding: 1rem 1.1rem .4rem; max-height: 26rem; overflow-y: auto; scrollbar-width: thin; }
.term .ps { color: oklch(85% 0.12 205); margin-right: .5ch; }
.term .cmd { color: oklch(96% 0.01 245); margin-bottom: .5rem; }
.checks { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .28rem; }
.chk { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; column-gap: .75rem; align-items: baseline; }
.chk .st { font-weight: 700; color: oklch(81% 0.16 152); }
.chk-na .st { color: oklch(84% 0.14 82); }
.chk .lb { color: oklch(88% 0.012 245); overflow-wrap: anywhere; }
.chk .vl { color: oklch(96% 0.01 245); font-weight: 600; text-align: right; }
.chk .sr { grid-column: 2 / -1; color: oklch(60% 0.02 248); font-size: .74rem; margin-top: -.15rem; }
.sum { color: oklch(66% 0.02 248); border-top: 1px dashed oklch(30% 0.02 255); padding-top: .5rem; margin-bottom: .6rem; }
.out { white-space: pre-wrap; color: oklch(86% 0.012 245); margin-bottom: .6rem; overflow-wrap: anywhere; }
.out a { color: oklch(85% 0.12 205); }
.out .err { color: oklch(70% 0.18 27); }
.term-in { display: flex; align-items: center; gap: .5ch; padding: .55rem 1.1rem .8rem; border-top: 1px solid oklch(30% 0.02 255); }
.term-in input { flex: 1; min-width: 0; background: transparent; border: 0; color: oklch(96% 0.01 245); font: inherit; caret-color: oklch(85% 0.12 205); outline: none; }
.term-in input::placeholder { color: oklch(52% 0.02 248); }
.term-in:focus-within { box-shadow: inset 0 2px 0 oklch(85% 0.12 205); }

/* repères chiffrés */
.figures-band { padding-block: 0 clamp(2rem, 4vw, 3rem); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .75rem; }
.fig-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; display: grid; gap: .2rem; align-content: start; }
.fig-tile strong { font: 760 var(--step-2)/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fig-tile span { color: var(--fg-2); font-size: .95rem; }
.fig-tile small { font: 500 .72rem var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* cartes de projet */
.tlp { display: inline-block; font: 700 .68rem/1 var(--font-mono); letter-spacing: .08em; padding: .3rem .45rem; border-radius: 4px; background: var(--fg); color: var(--bg); }
.tlp-line .tlp { margin-right: .5rem; }
.bento, .grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.bento { grid-auto-flow: dense; }
.bento .card-big { grid-column: span 2; }
@media (max-width: 42rem) { .bento .card-big { grid-column: auto; } }
.card { container-type: inline-size; min-width: 0; }
.card-link { display: grid; gap: .8rem; height: 100%; align-content: start; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--fg); text-decoration: none; transition: border-color .2s, transform .2s, box-shadow .2s; }
.card-link:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 18px 40px -28px color-mix(in oklch, var(--accent) 60%, transparent); text-decoration: none; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.period { font: 500 .78rem var(--font-mono); color: var(--muted); }
.card-title { font-size: var(--step-1); }
.card-big .card-title { font-size: var(--step-2); }
.card-pitch { color: var(--fg-2); font-size: .95rem; }
.card-proof { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; padding-top: .8rem; border-top: 1px dashed var(--line); }
.card-proof strong { font: 760 var(--step-1)/1 var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.card-proof span { color: var(--fg-2); font-size: .88rem; }
.card-cadre { font: 500 .74rem/1.4 var(--font-mono); color: var(--muted); }
@container (min-width: 34rem) { .card-big .card-proof strong { font-size: var(--step-3); } }

.vid-badge { margin-right: auto; margin-left: .5rem; font: 700 .66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; padding: .3rem .45rem; border-radius: 4px; border: 1px solid var(--accent); color: var(--accent); }
.videos { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.video-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--fg); text-decoration: none; }
.video-card:hover { border-color: var(--accent); text-decoration: none; }
.video-card span:last-child { display: grid; gap: .15rem; }
.video-card small { font: 500 .74rem var(--font-mono); color: var(--muted); }
.play { flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent); position: relative; }
.play::after { content: ""; position: absolute; left: 1.2rem; top: .95rem; border-style: solid; border-width: .55rem 0 .55rem .9rem; border-color: transparent transparent transparent var(--on-accent); }

/* compétences */
.skills-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.skill-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: grid; gap: .6rem; align-content: start; }
.skill-row h3 { font-size: 1.05rem; display: flex; justify-content: space-between; gap: 1rem; }
.skill-row .count { font: 600 .78rem var(--font-mono); color: var(--accent); }
.skill-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.skill-row a { display: inline-block; font-size: .82rem; padding: .25rem .55rem; border: 1px solid var(--line); border-radius: 999px; color: var(--fg-2); text-decoration: none; }
.skill-row a:hover { border-color: var(--accent); color: var(--fg); }

/* parcours */
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--line); display: grid; gap: 1.3rem; }
.timeline li { position: relative; display: grid; gap: .15rem; }
.timeline li::before { content: ""; position: absolute; left: calc(-1.4rem - 7px); top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }
.when { font: 600 .78rem var(--font-mono); color: var(--accent); letter-spacing: .04em; }
.timeline span:last-child { color: var(--fg-2); font-size: .95rem; }

/* principes et règles */
.principles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); counter-reset: pr; }
.principles article { padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; gap: .6rem; align-content: start; }
.principles p { color: var(--fg-2); }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.rules li { padding: 1rem 1.1rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; color: var(--fg-2); }
.rules strong { color: var(--fg); }
.pm { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pm li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: 1.1rem 1.3rem; background: var(--surface); color: var(--fg-2); }
@media (max-width: 36rem) { .pm li { grid-template-columns: minmax(0, 1fr); gap: .3rem; } }

/* contact */
.contact { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: center; }
.contact > div { display: grid; gap: 1rem; min-width: 0; }
.contact-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.contact-card p { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.mail .mono { font-size: 1rem; user-select: all; overflow-wrap: anywhere; }

/* page projets */
.filters { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: 1rem; }
.chip { min-height: 2.25rem; padding: 0 .85rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); font: 550 .85rem var(--font-body); cursor: pointer; }
.chip:hover { color: var(--fg); border-color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.search { flex: 1 1 16rem; min-height: 2.4rem; padding: 0 .9rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 400 .95rem var(--font-body); }
.result-count { font: 500 .8rem var(--font-mono); color: var(--muted); margin-bottom: 1rem; }
.card[hidden] { display: none; }

/* fiche projet */
.page-project .band { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem); }
.project::before { content: ""; position: fixed; inset: 0 auto auto 0; height: 3px; width: 100%; z-index: 25; background: var(--accent); transform-origin: left; transform: scaleX(0); animation: progress linear both; animation-timeline: scroll(root); }
@keyframes progress { to { transform: scaleX(1); } }
.crumbs { font: 500 .8rem var(--font-mono); color: var(--muted); margin-bottom: 1.5rem; }
.p-head { display: grid; gap: 1.1rem; margin-bottom: 2rem; }
.p-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .6rem; margin: .5rem 0 0; }
.p-meta div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: .9rem 1rem; display: grid; gap: .2rem; }
.p-meta dt { font: 600 .72rem var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.p-meta dd { margin: 0; color: var(--fg-2); font-size: .95rem; }
.h-sec { font-size: var(--step-1); margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; }
.h-sec::before { content: ""; width: 1.4rem; height: .55rem; background: var(--redact); border: 1px solid var(--line); border-radius: 2px; }
.proofs { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.proofs li { padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; gap: .35rem; align-content: start; }
.proofs strong { font: 760 var(--step-2)/1.05 var(--font-display); letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.proofs span { color: var(--fg-2); }
.proofs small { font: 500 .72rem/1.4 var(--font-mono); color: var(--muted); }
.p-body { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); margin-bottom: 2.5rem; }
.p-body > * { min-width: 0; }
.did, .limits ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .65rem; color: var(--fg-2); }
.did li::marker { color: var(--accent); }
.limits { padding: 1.3rem 1.4rem; border: 1px dashed color-mix(in oklch, var(--warn) 55%, var(--line)); border-radius: var(--radius); background: color-mix(in oklch, var(--warn) 6%, var(--surface)); align-self: start; }
.limits li::marker { color: var(--warn); }
.figs { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }
.fig { margin: 0; display: grid; gap: .6rem; }
.fig img { display: block; width: 100%; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); }
.fig figcaption { font-size: .88rem; color: var(--muted); }
.svg-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: .8rem; }
.svg-wrap svg { display: block; min-width: 38rem; width: 100%; }
.p-foot { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin-bottom: 2.5rem; }
.stack { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.stack li { font: 500 .78rem var(--font-mono); padding: .3rem .55rem; border-radius: 5px; background: var(--surface-2); color: var(--fg-2); }
.stack-skill li { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.docs { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; }
.pn { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.pn a { display: grid; gap: .2rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--fg); font-weight: 600; }
.pn a:hover { border-color: var(--accent); }
.pn a[rel="next"] { text-align: right; }
.pn small { font: 500 .72rem var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

/* schémas YASSA (classes du dossier d'origine) */
.svg-body { font-family: var(--font-body); } .svg-mono { font-family: var(--font-mono); }
.site-frame { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 4 4; }
.site-label { fill: var(--muted); font-weight: 600; } .site-note { fill: var(--muted); }
.zone-hit rect { stroke: var(--line); stroke-width: 1; cursor: pointer; transition: stroke .15s; }
.zone-hit:hover rect, .zone-hit:focus rect, .zone-hit.sel rect { stroke: var(--accent); stroke-width: 2.5; }
.zone-hit:focus { outline: none; }
.k-nul rect { fill: color-mix(in oklch, var(--surface-2) 80%, var(--bg)); }
.k-faible rect { fill: color-mix(in oklch, var(--ok) 18%, var(--surface)); }
.k-moyen rect { fill: color-mix(in oklch, var(--warn) 18%, var(--surface)); }
.k-eleve rect { fill: color-mix(in oklch, var(--warn) 34%, var(--surface)); }
.k-tres rect { fill: color-mix(in oklch, var(--crit) 30%, var(--surface)); }
.k-cartes rect { fill: color-mix(in oklch, var(--crit) 48%, var(--surface)); }
.zt, .zn, .svg-ink { fill: var(--fg); } .svg-ink2 { fill: var(--fg-2); } .svg-muted { fill: var(--muted); }
.svg-line, .svg-arrow { stroke: var(--muted); fill: none; stroke-width: 1.4; }
.node rect, rect.node { fill: var(--surface-2); stroke: var(--line); }
.fw rect, rect.fw, .gate rect, rect.gate { fill: color-mix(in oklch, var(--accent) 22%, var(--surface)); stroke: var(--accent); }
.hl rect, rect.hl { stroke: var(--accent); stroke-width: 2; }
.fig-svg svg marker path { fill: var(--muted); }
.zone-info { font: 500 .85rem var(--font-mono); color: var(--fg-2); padding: .7rem .9rem; border-radius: 8px; background: var(--surface-2); }

/* démonstrations */
.demo-sec { margin-bottom: 2.5rem; }
.demo { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: clamp(1rem, 2.5vw, 1.6rem); display: grid; gap: 1.2rem; }
.demo-bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.demo-note { font: 500 .78rem/1.5 var(--font-mono); color: var(--muted); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: transparent; color: var(--fg-2); padding: .5rem .9rem; font: 600 .85rem var(--font-body); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.gauges { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.gauge { display: grid; justify-items: center; gap: .5rem; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
@property --g { syntax: "<number>"; inherits: true; initial-value: 0; }
.dial { --g: 0; width: 9rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; transition: --g 1.4s cubic-bezier(.3,.7,.2,1); background: radial-gradient(closest-side, var(--bg-2) 76%, transparent 77%), conic-gradient(var(--dial-c, var(--crit)) calc(var(--g) * 1%), var(--surface-2) 0); }
.dial b { font: 760 2.2rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.dial small { display: block; text-align: center; font: 500 .7rem var(--font-mono); color: var(--muted); }
.gauge h3 { font-size: .95rem; text-align: center; }
.vulns { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.vulns li { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem .75rem; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); font-size: .9rem; }
.vulns code { color: var(--muted); }
.state { font: 700 .72rem var(--font-mono); padding: .15rem .45rem; border-radius: 4px; white-space: nowrap; }
.state-bad { background: color-mix(in oklch, var(--crit) 12%, transparent); color: color-mix(in oklch, var(--crit) 70%, var(--fg)); }
.state-good { background: color-mix(in oklch, var(--ok) 12%, transparent); color: color-mix(in oklch, var(--ok) 70%, var(--fg)); }
.state-lim { background: color-mix(in oklch, var(--warn) 12%, transparent); color: color-mix(in oklch, var(--warn) 70%, var(--fg)); }
.ctl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ctl-list li { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .6rem .8rem; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); font-size: .9rem; }
.ctl-list span:nth-child(2) { color: var(--fg-2); }
@media (max-width: 40rem) { .ctl-list li { grid-template-columns: minmax(0, 1fr) auto; } .ctl-list span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }
.score-line { font: 700 var(--step-1) var(--font-display); }
.matrix { width: 100%; border-collapse: collapse; font-size: .9rem; }
.matrix-wrap { overflow-x: auto; }
.matrix th, .matrix td { border: 1px solid var(--line); padding: .7rem .8rem; text-align: left; vertical-align: top; }
.matrix th { font: 600 .78rem var(--font-mono); color: var(--muted); background: var(--bg-2); }
.matrix td small { display: block; color: var(--muted); font: 500 .72rem var(--font-mono); margin-top: .2rem; }
.cell-pending { color: var(--muted); }
.panes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.pane { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); padding: 1rem; display: grid; gap: .6rem; align-content: start; min-width: 0; }
.pane h3 { font-size: .95rem; }
.pane .big { font: 760 var(--step-3)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.logbox { height: 9.5rem; overflow: auto; font: 400 .74rem/1.5 var(--font-mono); color: var(--fg-2); background: var(--redact); border-radius: 6px; padding: .5rem .6rem; color: oklch(80% 0.012 245); }
.logbox p { white-space: nowrap; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.flow li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .7rem; padding: .7rem .8rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); opacity: .35; transition: opacity .3s, border-color .3s; }
.flow li.on { opacity: 1; border-color: var(--accent); }
.flow li.end-ban { border-color: var(--warn); } .flow li.end-iso { border-color: var(--crit); }
.flow b { font: 700 .8rem var(--font-mono); color: var(--accent); }
.fieldrow { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; }
.fieldrow select { min-height: 2.4rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg); padding: 0 .7rem; font: 500 .9rem var(--font-body); }
.check { display: inline-flex; gap: .5rem; align-items: center; font-size: .92rem; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; counter-reset: st; }
.steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .7rem; padding: .6rem .8rem; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); font-size: .88rem; opacity: .3; transition: opacity .25s; }
.steps li.on { opacity: 1; }
.steps li::before { counter-increment: st; content: counter(st, decimal-leading-zero); font: 700 .78rem var(--font-mono); color: var(--accent); padding-top: .1rem; }
.steps code { color: var(--accent); }
.steps em { color: var(--muted); font-style: normal; font-family: var(--font-mono); font-size: .78rem; }
.finding { padding: 1rem; border-radius: 10px; border: 1px solid var(--crit); background: color-mix(in oklch, var(--crit) 10%, var(--surface)); display: grid; gap: .3rem; }
.ks { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.tunnel { display: flex; align-items: center; gap: .8rem; font: 600 .95rem var(--font-body); }
.tunnel i { width: 2.6rem; height: 1.4rem; border-radius: 999px; background: var(--ok); position: relative; transition: background .2s; }
.tunnel i::after { content: ""; position: absolute; top: .15rem; left: 1.35rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--bg); transition: left .2s; }
.tunnel[aria-pressed="false"] i { background: var(--crit); } .tunnel[aria-pressed="false"] i::after { left: .15rem; }

/* page « Ce site » */
.live { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin-top: 2rem; }
.panel { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 1.2rem; display: grid; gap: .8rem; align-content: start; min-width: 0; }
.panel h2 { font-size: var(--step-1); }
.live-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font: 400 .82rem/1.45 var(--font-mono); }
.live-list li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .5rem; overflow-wrap: anywhere; }
.live-list li::before { content: "·"; color: var(--muted); }
.live-list li.yes::before { content: "✓"; color: var(--ok); font-weight: 700; }
.live-list li.no::before { content: "✗"; color: var(--crit); font-weight: 700; }
.live-list li.info::before { content: "i"; color: var(--accent); font-weight: 700; }
.hard { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.hard article { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1.2rem; display: grid; gap: .6rem; align-content: start; min-width: 0; }
.hard p { color: var(--fg-2); font-size: .95rem; }
.hard code { display: block; font-size: .72rem; color: var(--muted); overflow-wrap: anywhere; padding: .5rem .6rem; background: var(--bg-2); border-radius: 6px; }
.nf { display: grid; gap: 1.2rem; justify-items: start; }

/* CV */
.cv { display: grid; gap: 2.2rem; max-width: 60rem; }
.cv-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; align-items: end; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.cv-head > div:not(.cv-actions) { display: grid; gap: .6rem; }
.cv-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.cv-sec { display: grid; gap: 1rem; }
.cv-sec h2 { font-size: var(--step-1); text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-mono); color: var(--accent); }
.job { display: grid; gap: .55rem; padding-bottom: 1.2rem; border-bottom: 1px dashed var(--line); }
.job:last-child { border-bottom: 0; }
.job header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; align-items: baseline; }
.job h3 { font-size: var(--step-1); }
.org { color: var(--fg-2); font-weight: 500; }
.job-ctx { color: var(--muted); font-size: .95rem; }
.job ul, .cv-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; color: var(--fg-2); }
.job li strong, .cv-list strong { color: var(--fg); }
.skill-dl { margin: 0; display: grid; gap: .7rem; }
.skill-dl div { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 40rem) { .skill-dl div { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }
.skill-dl dt { font-weight: 650; }
.skill-dl dd { margin: 0; color: var(--fg-2); }

/* pied de page, recherche, toast */
.footer { border-top: 1px solid var(--line); padding-block: 2.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px)); background: var(--bg-2); color: var(--muted); font-size: .9rem; }
.footer-in { display: grid; gap: .8rem; }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.palette { width: min(40rem, calc(100vw - 2rem)); max-height: min(34rem, 80vh); padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--fg); box-shadow: 0 40px 120px -40px oklch(0% 0 0 / .8); margin-top: 12vh; }
.palette::backdrop { background: oklch(10% 0.02 255 / .55); backdrop-filter: blur(3px); }
.palette[open] { animation: pop .18s ease-out; }
@starting-style { .palette[open] { opacity: 0; transform: translateY(-8px) scale(.98); } }
.palette { transition: opacity .18s, transform .18s, overlay .18s allow-discrete, display .18s allow-discrete; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }
.palette-form { display: grid; }
.palette input { border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--fg); font: 500 1.05rem var(--font-body); padding: 1rem 1.2rem; outline: none; }
.palette-list { list-style: none; margin: 0; padding: .4rem; overflow-y: auto; max-height: 24rem; }
.palette-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; border-radius: 8px; cursor: pointer; }
.palette-list li[aria-selected="true"] { background: var(--surface-2); box-shadow: inset 3px 0 var(--accent); }
.palette-list small { font: 500 .72rem var(--font-mono); color: var(--muted); text-transform: uppercase; }
.toast { position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 50; background: var(--fg); color: var(--bg); padding: .7rem 1.1rem; border-radius: 8px; font-weight: 600; box-shadow: 0 20px 40px -20px oklch(0% 0 0 / .6); }

/* entrées au défilement : visibles au repos, animées seulement si le navigateur sait faire */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card, .skill-row, .principles article, .proofs li, .hard article, .panel { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes rise { from { translate: 0 1.4rem; scale: .985; } }
  }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}

/* menu : en ligne sur grand écran, menu déroulant (Popover API) sur téléphone */
.menu-btn { display: none; }
.menu-btn svg { stroke-width: 2; }
@media (min-width: 54.01rem) {
  #site-nav { display: block; position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; }
}
@media (max-width: 54rem) {
  .topbar-in { flex-wrap: nowrap; padding-block: 0; }
  .menu-btn { display: inline-flex; }
  #site-nav { position: fixed; inset: calc(env(safe-area-inset-top, 0px) + 3.9rem) max(16px, env(safe-area-inset-right, 0px)) auto auto; margin: 0; padding: .5rem; min-width: 13rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--fg); box-shadow: 0 30px 60px -30px oklch(0% 0 0 / .6); }
  #site-nav ul { flex-direction: column; }
  #site-nav a { padding: .7rem .8rem; }
  .palette-btn span, .palette-btn kbd { display: none; }
}

/* accueil : en bref, résultats, cartes secondaires */
.brief { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: clamp(1.1rem, 2.5vw, 1.6rem); display: grid; gap: .9rem; min-width: 0; box-shadow: 0 30px 80px -50px oklch(0% 0 0 / .6); }
.brief-title { font: 600 var(--step--1)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.brief dl { margin: 0; display: grid; gap: .1rem; }
.brief dl div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .8rem; padding: .6rem 0; border-top: 1px dashed var(--line); }
.brief dl div:first-child { border-top: 0; }
.brief dt { font: 600 .74rem/1.5 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.brief dd { margin: 0; color: var(--fg); font-size: .97rem; }
@media (max-width: 30rem) { .brief dl div { grid-template-columns: minmax(0, 1fr); gap: .1rem; } }
.sec-note { flex-basis: 100%; color: var(--muted); font-size: .95rem; }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.results a { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) auto; grid-template-areas: "st lb vl" "st sr sr"; column-gap: 1rem; align-items: baseline; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--fg); text-decoration: none; }
.results a:hover { border-color: var(--accent); text-decoration: none; }
.results .st { grid-area: st; font: 700 .7rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; padding: .25rem .45rem; border-radius: 4px; justify-self: start; }
.results .st-ok { background: color-mix(in oklch, var(--ok) 12%, transparent); color: color-mix(in oklch, var(--ok) 70%, var(--fg)); }
.results .st-na { background: color-mix(in oklch, var(--warn) 12%, transparent); color: color-mix(in oklch, var(--warn) 70%, var(--fg)); }
.results .lb { grid-area: lb; font-weight: 600; }
.results .vl { grid-area: vl; font: 700 1.05rem var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; text-align: right; }
.results .sr { grid-area: sr; font: 500 .76rem var(--font-mono); color: var(--muted); }
@media (max-width: 34rem) { .results a { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "st vl" "lb lb" "sr sr"; row-gap: .3rem; } }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.card-small .card-title { font-size: 1.05rem; }
.card-small .card-pitch { font-size: .9rem; }
.btn-sm { min-height: 2.2rem; padding: 0 .8rem; font-size: .85rem; }
.others { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.others summary { cursor: pointer; font: 650 1.05rem var(--font-display); margin-bottom: 1rem; }
.meta-ai { border-color: color-mix(in oklch, var(--accent) 45%, var(--line)) !important; }
.meta-ai dt { color: var(--accent) !important; }
.cv-contact { font: 500 .88rem var(--font-mono); color: var(--fg-2); }
.cv-contact a { white-space: nowrap; }

@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] { --bg: #fff; --bg-2: #fff; --surface: #fff; --surface-2: #f3f4f6; --fg: #111; --fg-2: #222; --muted: #555; --line: #ccc; --accent: #0b5d7a; --ok: #1b6b3a; --warn: #8a5a00; color-scheme: light; }
  @page { size: A4; margin: 12mm 13mm; }
  body { background: #fff; background-image: none; font-size: 9.6pt; line-height: 1.38; }
  .topbar, .footer, .cv-actions, .no-print, .skip, .palette, .toast, .menu-btn, #site-nav { display: none !important; }
  .band { padding-block: 0; }
  .cv { gap: .7rem; max-width: none; }
  .cv-head { padding-bottom: .5rem; }
  .cv-head .eyebrow { display: none; }
  .display-sm { font-size: 20pt; }
  .lead { font-size: 11pt; }
  .cv-sec { gap: .35rem; }
  .cv-sec h2 { font-size: 10pt; break-after: avoid; }
  .cv-sec { break-inside: avoid-page; }
  .job { gap: .25rem; padding-bottom: .4rem; break-inside: avoid; }
  .job h3 { font-size: 10.5pt; }
  .job ul, .cv-list { gap: .15rem; }
  .skill-dl { gap: .2rem; }
  .skill-dl div { grid-template-columns: 11rem minmax(0, 1fr); gap: .5rem; }
  a { color: inherit; text-decoration: none; }
}
/* @vt-generated */
.vt-yassa-bank{view-transition-name:p-yassa-bank}
.vt-iam-luxenet-group{view-transition-name:p-iam-luxenet-group}
.vt-foret-active-directory{view-transition-name:p-foret-active-directory}
.vt-soc-ambassade{view-transition-name:p-soc-ambassade}
.vt-durcissement-cis-windows-server{view-transition-name:p-durcissement-cis-windows-server}
.vt-poste-admin-modele-tiers{view-transition-name:p-poste-admin-modele-tiers}
.vt-labs-owasp-a01-a09{view-transition-name:p-labs-owasp-a01-a09}
.vt-pssi-datasecure{view-transition-name:p-pssi-datasecure}
.vt-bbhunter{view-transition-name:p-bbhunter}
.vt-pentest-autonome-agents{view-transition-name:p-pentest-autonome-agents}
.vt-test-intrusion-boite-noire{view-transition-name:p-test-intrusion-boite-noire}
.vt-methode-bug-bounty{view-transition-name:p-methode-bug-bounty}
.vt-cyber-range{view-transition-name:p-cyber-range}
.vt-cyberjobs{view-transition-name:p-cyberjobs}
.vt-workhoraire{view-transition-name:p-workhoraire}
.vt-investigation-numerique{view-transition-name:p-investigation-numerique}
.vt-gouvernance-it-infogerance{view-transition-name:p-gouvernance-it-infogerance}
.vt-durcissement-linux{view-transition-name:p-durcissement-linux}
.vt-plateforme-kvm{view-transition-name:p-plateforme-kvm}
.vt-vaultis{view-transition-name:p-vaultis}
.vt-poste-offensif-kill-switch{view-transition-name:p-poste-offensif-kill-switch}
.vt-forgekit{view-transition-name:p-forgekit}
.vt-processus-bpmn{view-transition-name:p-processus-bpmn}
.vt-studio-video-automatise{view-transition-name:p-studio-video-automatise}
.vt-reseau-packet-tracer{view-transition-name:p-reseau-packet-tracer}
.vt-tradebot{view-transition-name:p-tradebot}