/* ==========================================================================
   AdinavProtection — Design system  "Le dossier élégant"
   A beautifully typeset case file: warm paper, editorial serif, navy ink,
   the logo's cyan used like a stamp. Dark panels (console, figures) are
   framed exhibits. Single stylesheet for the entire site.
   ========================================================================== */

/* Self-hosted variable fonts (D1) — zero third-party requests */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Navy = ink. Sampled from the stacked logo background. */
  --ink:      #0C1836;
  --ink-2:    #101F44;
  --ink-3:    #152852;
  /* Warm paper surfaces */
  --bg:       #F8F5EE;
  --bg-2:     #F1ECE1;
  --paper:    #FFFEFA;
  /* Text on paper */
  --text:     #3B455F;
  --text-2:   #46516C;
  --muted:    #5F6981;
  --muted-2:  #8E96A8;
  /* Text on navy panels */
  --on-ink:   #F2F6FB;
  --on-ink-2: #B9C4D8;
  /* Brand cyan (logo) + accessible action blue */
  --cyan:     #1FB8E9;
  --cyan-2:   #5AD9F8;
  --accent:   #0B7BB5;
  --grad:     linear-gradient(120deg, #5AD9F8 0%, #159EE0 100%);
  --glow:     rgba(31,184,233,0.35);
  --glow-soft:rgba(31,184,233,0.10);
  /* Status */
  --amber:    #9A6A0B;
  --alert:    #BE4038;
  --ok:       #177A4C;
  --ok-bright:#5FD59E;
  --amber-bright:#F0BE62;
  --alert-bright:#F58F87;
  /* Hairlines & shadows */
  --line:     #E3DCCC;
  --line-2:   #EDE7DA;
  --line-strong:#CFC5AE;
  --line-ink: rgba(242,246,251,0.12);
  --shadow-sm:0 1px 2px rgba(43,38,24,0.05), 0 8px 24px rgba(43,38,24,0.06);
  --shadow-md:0 2px 4px rgba(43,38,24,0.06), 0 16px 40px rgba(43,38,24,0.10);
  --shadow-lg:0 24px 70px rgba(20,24,40,0.18);
  --shadow-card:0 1px 2px rgba(43,38,24,0.04), 0 10px 24px rgba(43,38,24,0.07), 0 34px 68px -26px rgba(12,24,54,0.18);
  --shadow-card-hover:0 2px 4px rgba(43,38,24,0.05), 0 18px 40px rgba(43,38,24,0.10), 0 48px 90px -30px rgba(12,24,54,0.26);

  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;

  --container: 1240px;
  --ease: cubic-bezier(0.22,0.61,0.36,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); background-color: var(--bg); color: var(--text);
  /* Blueprint tooth: faint dot grid, drifting imperceptibly across the paper */
  background-image: radial-gradient(rgba(12,24,54,0.06) 1px, transparent 1.5px);
  background-size: 26px 26px;
  animation: gridDrift 120s linear infinite;
  line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@keyframes gridDrift { to { background-position: 260px 156px; } }
/* Two slow washes of light crossing the paper — visible, never loud */
.shell::before, .shell::after { content: ""; position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(60px); }
.shell::before { width: 56vw; height: 56vw; left: -14vw; top: -12vw;
  background: radial-gradient(closest-side, rgba(31,184,233,0.13), transparent 72%);
  animation: washA 30s ease-in-out infinite alternate; }
.shell::after { width: 48vw; height: 48vw; right: -12vw; bottom: -14vw;
  background: radial-gradient(closest-side, rgba(21,68,158,0.10), transparent 72%);
  animation: washB 36s ease-in-out infinite alternate; }
@keyframes washA { to { transform: translate(46vw, 34vh) scale(1.25); } }
@keyframes washB { to { transform: translate(-40vw, -30vh) scale(1.2); } }
.shell > * { position: relative; z-index: 1; }

/* Le périmètre gardé : une sentinelle lumineuse fait le tour de la page, sans fin */
@property --sentry-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.sentry { position: fixed; inset: 7px; z-index: 998; pointer-events: none; border-radius: 16px; padding: 3px;
  background:
    conic-gradient(from var(--sentry-angle) at 50% 50%, transparent 0deg, transparent 275deg, rgba(14,59,140,0.35) 295deg, rgba(11,123,181,0.75) 320deg, rgba(31,184,233,0.95) 342deg, #5AD9F8 353deg, #EAFBFF 358deg, transparent 360deg),
    linear-gradient(rgba(12,24,54,0.15), rgba(12,24,54,0.15));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
  filter: drop-shadow(0 0 10px rgba(21,158,224,0.8)) drop-shadow(0 0 26px rgba(31,184,233,0.35));
  animation: sentryRound 9s linear infinite; }
@keyframes sentryRound { to { --sentry-angle: 360deg; } }
@media (max-width: 700px) { .sentry { inset: 3px; border-radius: 10px; padding: 2px; } }
img, svg, canvas { display: block; max-width: 100%; }
::selection { background: var(--cyan); color: var(--ink); }
/* Paper grain */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ---------- Typography ---------- */
h1,h2,h3 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 600; line-height: 1.06; letter-spacing: -0.015em; color: var(--ink); }
h1 { font-size: clamp(2.5rem, 6.6vw, 5.2rem); font-weight: 560; line-height: 1.02; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 580; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: -0.005em; }
p { color: var(--text); }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--accent); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--ink); }

.mono { font-family: var(--font-mono); }
.dim { color: var(--muted-2); }
/* Eyebrows styled as file stamps */
.eyebrow { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); border: 1px solid rgba(11,123,181,0.45); border-radius: 3px; padding: .38em .85em .32em; }

.arrow { display: inline-flex; align-items: center; gap: .5em; }
.arrow::after { content: "→"; font-family: var(--font-mono); transition: transform .25s var(--ease); }
.arrow:hover::after { transform: translateX(5px); }

/* Utilities — swept from inline styles; strict CSP forbids style="" */
.mt-xs { margin-top: .8rem; }
.mt-sm { margin-top: 1.1rem; }
.mt-md { margin-top: 1.2rem; }
.mt-xl { margin-top: 3rem; }
.mt-sec { margin-top: clamp(32px, 5vw, 56px); }
.mt-sec-lg { margin-top: clamp(40px, 6vw, 72px); }
.mb-md { margin-bottom: 1.4rem; }
.maxw-prose { max-width: 760px; }
.bg-ink2 { background: var(--bg-2); }
.fs-xs { font-size: .8rem; }
.hint { font-family: var(--font-mono); font-size: .78rem; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }
.shell main { flex: 1; position: relative; }
/* Drafting rails: two hairlines bounding the page */
.shell main::before, .shell main::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; z-index: 3; pointer-events: none; background: rgba(12,24,54,0.07); }
.shell main::before { left: max(10px, calc(50% - (var(--container) / 2) - 14px)); }
.shell main::after { right: max(10px, calc(50% - (var(--container) / 2) - 14px)); }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 2px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(22px, 4.5vw, 64px); }
.section { padding: clamp(76px, 11vw, 150px) 0; position: relative; border-top: 1px solid var(--line); }
.hero + .section, .stats + .section { border-top: 0; }
/* Crosshair marks where section rules meet the drafting rails */
.section::before, .section::after { content: "+"; position: absolute; top: -0.72em; font-family: var(--font-mono); font-size: .9rem; line-height: 1; color: var(--line-strong); z-index: 4; pointer-events: none; }
.section::before { left: max(10px, calc(50% - (var(--container) / 2) - 14px)); transform: translateX(-46%); }
.section::after { right: max(10px, calc(50% - (var(--container) / 2) - 14px)); transform: translateX(46%); }
.section--tight { padding: clamp(56px, 8vw, 104px) 0; }
.section__index { position: absolute; top: clamp(26px,4.5vw,60px); right: clamp(10px,4vw,60px); font-family: var(--font-display); font-weight: 800; font-size: clamp(6rem, 17vw, 16rem); line-height: .8; color: var(--ink); opacity: .04; pointer-events: none; user-select: none; letter-spacing: -.05em; z-index: 0; }
.section > .container { position: relative; z-index: 1; }

/* ---------- Header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 140; background: rgba(248,245,238,0.88); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 4px 24px rgba(43,38,24,0.06); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 78px; gap: 1rem; }

.brand { display: inline-flex; align-items: center; gap: .65rem; }
.brand__logo { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 6px rgba(31,184,233,0.35)); }
.wordmark { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; letter-spacing: -.03em; color: var(--ink); white-space: nowrap; }
.wordmark span { color: var(--cyan); }

.nav { display: flex; align-items: center; gap: clamp(8px,1.6vw,22px); }
.nav__link { font-size: .92rem; font-weight: 500; color: var(--text); position: relative; padding: .35rem .15rem; background: none; border: 0; font-family: var(--font-body); cursor: pointer; }
.nav__link:hover, .nav__link.is-active { color: var(--ink); }
.nav__link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; border-radius: 2px; background: var(--grad); transition: right .3s var(--ease); }
.nav__link:hover::after, .nav__link.is-active::after { right: 0; }

/* Dropdown groups */
.nav__group { position: relative; }
.nav__group > .nav__link .caret { font-size: .62em; opacity: .55; margin-left: .35em; display: inline-block; transition: transform .25s var(--ease); }
.nav__drop { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 6px); min-width: 250px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-md); padding: .55rem; opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s .22s; z-index: 150; }
.nav__group:hover > .nav__drop, .nav__group:focus-within > .nav__drop { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav__group:hover > .nav__link .caret, .nav__group:focus-within > .nav__link .caret { transform: rotate(180deg); }
.nav__drop a { display: block; padding: .6rem .8rem; border-radius: 8px; font-size: .9rem; font-weight: 500; color: var(--text); }
.nav__drop a:hover { background: var(--bg-2); color: var(--ink); }
.nav__drop a small { display: block; font-weight: 400; font-size: .76rem; color: var(--muted-2); margin-top: .1rem; }

.btn--nav { padding: .55rem 1.2rem; font-size: .87rem; box-shadow: 3px 3px 0 rgba(31,184,233,0.85); }
.btn--nav:hover { box-shadow: 4px 4px 0 rgba(31,184,233,0.85); }

.lang { font-family: var(--font-mono); font-size: .7rem; border: 1px solid var(--line); border-radius: 100px; padding: 3px; display: inline-flex; background: var(--paper); }
.lang__opt { display: inline-flex; align-items: center; gap: .45em; padding: 3px 10px; border-radius: 100px; color: var(--muted); }
.lang__opt img { width: 20px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(12,24,54,0.15); }
.lang__opt.on { background: var(--ink); color: #fff; }
a.lang__opt:hover { color: var(--ink); }
.nav-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--ink); border-radius: 11px; background: var(--ink); flex-direction: column; gap: 5px; align-items: center; justify-content: center; cursor: pointer; box-shadow: 3px 3px 0 rgba(31,184,233,0.85); z-index: 160; }
.nav-toggle span { width: 19px; height: 2px; border-radius: 2px; background: #fff; transition: .3s var(--ease); }
.nav-toggle:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(31,184,233,0.55); }
/* croix quand le menu est ouvert */
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero : plaque navy sur papier, carte d'exposition ---------- */
.hero { position: relative; padding: 118px 0 74px; }
.hero__plaque { animation: plaqueIn 1s var(--ease-out) both; position: relative; overflow: hidden; background:
    radial-gradient(120% 90% at 78% 0%, #16295C 0%, var(--ink-2) 42%, var(--ink) 100%);
  border-radius: 20px; box-shadow: var(--shadow-lg); outline: 1px solid rgba(242,246,251,0.16); outline-offset: -12px;
  padding: clamp(44px,6vw,96px) clamp(28px,5vw,88px); min-height: min(74svh, 760px); display: flex; align-items: center; }
.hero__map { position: absolute; top: 50%; right: -4%; transform: translateY(-50%); width: min(56%, 620px); height: auto; z-index: 0; pointer-events: none; }
.map__rings circle { fill: none; stroke: rgba(242,246,251,0.07); stroke-width: 1; stroke-dasharray: 3 5; }

/* Radar sweep — rotates from the hub, endlessly watching */
.map__sweep { transform-box: view-box; transform-origin: 470px 180px; animation: sweep 9s linear infinite; }
.map__sweep polygon { fill: rgba(90,217,248,0.05); }
.map__sweep line { stroke: rgba(90,217,248,0.34); stroke-width: 1; }
@keyframes sweep { to { transform: rotate(360deg); } }

/* Edges draw themselves in three waves */
.map__edges path { stroke: rgba(90,217,248,0.18); stroke-width: 1; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; animation: edgeDraw 1.1s var(--ease-out) forwards; }
.map__edges .w1 { animation-delay: .5s; }
.map__edges .w2 { animation-delay: 1.3s; }
.map__edges .w3 { animation-delay: 2.1s; }
@keyframes edgeDraw { to { stroke-dashoffset: 0; } }

/* Nodes appear as the scan reaches them */
.map__nodes circle { fill: rgba(185,205,235,0.4); opacity: 0; animation: nodeIn .5s ease forwards; }
.map__nodes .w1 { animation-delay: .9s; }
.map__nodes .w2 { animation-delay: 1.7s; }
.map__nodes .w3 { animation-delay: 2.5s; }
@keyframes nodeIn { to { opacity: 1; } }

/* Hot nodes: flagged red on detection, then held under watch (cyan) */
.map__hot .hot { fill: var(--cyan); opacity: 0; animation: hotFlag 6s var(--ease) forwards; }
.map__hot .hot.h2 { animation-delay: .9s; }
.map__hot .hot.h3 { animation-delay: 1.8s; }
@keyframes hotFlag {
  0% { opacity: 0; fill: #F58F87; }
  8% { opacity: 1; fill: #F58F87; }
  20% { fill: #F58F87; }
  45% { fill: var(--amber-bright); }
  70%, 100% { opacity: 1; fill: var(--cyan); }
}
.map__hot .pulse { fill: none; stroke: var(--cyan); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: mapPulse 3.6s var(--ease-out) 3s infinite; }
.map__hot .pulse.p2 { animation-delay: 4.2s; }
.map__hot .pulse.p3 { animation-delay: 5.4s; }
@keyframes mapPulse { 0% { transform: scale(0.4); opacity: .8; } 70% { transform: scale(4); opacity: 0; } 100% { opacity: 0; } }

/* Findings labels: leader line + mono caption, typed onto the map */
.map__lbl line { stroke: rgba(242,246,251,0.3); stroke-width: 1; }
.map__lbl text { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; fill: #BFE9F7; }
.map__lbl { opacity: 0; animation: nodeIn .7s ease forwards; }
.map__lbl.lb1 { animation-delay: 3.4s; }
.map__lbl.lb2 { animation-delay: 3.9s; }
.map__lbl.lb3 { animation-delay: 4.4s; }
.map__lbl.lb2 text { fill: var(--amber-bright); }
.map__lbl.lb3 text { fill: var(--alert-bright); }
@keyframes plaqueIn { from { opacity: 0; transform: translateY(16px) scale(.988); } }
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: 62ch; }
/* Machine-readable zone — the dossier's passport strip */
.mrz { position: absolute; left: clamp(28px,5vw,88px); right: clamp(28px,5vw,88px); bottom: 16px; z-index: 1;
  border-top: 1px dashed rgba(242,246,251,0.16); padding-top: 9px;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .32em; white-space: nowrap; overflow: hidden;
  color: rgba(185,196,216,0.4); user-select: none; pointer-events: none; }
.hero__hud { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; color: var(--on-ink-2); text-transform: uppercase; margin-bottom: 1.5rem; display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.hero__hud .live { color: var(--ok-bright); display: inline-flex; align-items: center; gap: 7px; }
.hero__hud .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok-bright); box-shadow: 0 0 0 3px rgba(95,213,158,.16); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.hero__pill { display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-2); border: 1px solid rgba(90,217,248,0.35); border-radius: 100px; padding: .45em 1em .4em; margin-bottom: 1.6rem; transition: border-color .25s var(--ease), color .25s var(--ease); }
.hero__pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); }
.hero__pill:hover { border-color: var(--cyan); color: #fff; }
.hero h1 { max-width: 17ch; color: #F5F2EA; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; will-change: transform; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 .accent { color: var(--cyan-2); font-style: italic; font-weight: 520; }
.hero__sub { margin-top: 1.9rem; max-width: 46ch; font-size: clamp(1.05rem,1.5vw,1.26rem); line-height: 1.6; color: var(--on-ink-2); }
.hero__sub strong { color: #fff; font-weight: 600; }
.hero__cta { margin-top: 2.4rem; display: flex; gap: 1.1rem; flex-wrap: wrap; }
.hero .btn { background: #fff; border-color: #fff; color: var(--ink); box-shadow: 4px 4px 0 rgba(31,184,233,0.9); }
.hero .btn:hover { background: var(--cyan-2); border-color: var(--cyan-2); color: var(--ink); box-shadow: 6px 6px 0 rgba(31,184,233,0.5); }
.hero .btn--ghost { background: transparent; border-color: rgba(242,246,251,0.4); color: #F5F2EA; box-shadow: 4px 4px 0 rgba(242,246,251,0.12); }
.hero .btn--ghost:hover { border-color: #fff; color: #fff; box-shadow: 6px 6px 0 rgba(242,246,251,0.12); }
/* ---------- Icônes de trait (sprite en base.njk) — puces duotone ---------- */
.sprite { display: none; }
.ic { box-sizing: content-box; width: 30px; height: 30px; padding: 11px; color: var(--ink); flex: none;
  background: linear-gradient(145deg, rgba(90,217,248,0.20), rgba(21,158,224,0.08) 60%, rgba(255,255,255,0.6));
  border: 1px solid rgba(31,184,233,0.4); border-radius: 14px;
  box-shadow: 3px 3px 0 rgba(31,184,233,0.22), inset 0 1px 0 rgba(255,255,255,0.7);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.audience .ic, .svc-card .ic { margin-bottom: 1.1rem; }
.audience:hover .ic, .domain:hover .ic, .commitment:hover .ic, .svc-card:hover .ic, .step:hover .ic, .panel:hover .ic, .svc:hover .ic { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(31,184,233,0.3), inset 0 1px 0 rgba(255,255,255,0.7); }
.ic--row { width: 26px; height: 26px; padding: 9px; margin-bottom: .8rem; display: block; border-radius: 12px; }
.ic--corner { position: absolute; top: clamp(20px,2.2vw,30px); right: clamp(20px,2.2vw,30px); width: 24px; height: 24px; padding: 8px; border-radius: 11px; }
.commitment { position: relative; }

/* ---------- Bandeau capacités : cyber + IA lisibles en 5 s ---------- */
.caps { padding: 1.3rem 0 1.5rem; }
.caps__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .8rem 1.5rem; font-family: var(--font-mono); font-size: .67rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.caps__row i { width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); flex: none; }

/* ---------- Venn (intro) : l'intersection rare des trois domaines ---------- */
.venn { width: min(400px, 92%); margin-top: 2.4rem; overflow: visible; }
.venn__c circle { fill: rgba(31,184,233,0.05); stroke: var(--accent); stroke-width: 1.1; stroke-dasharray: 4 6; opacity: .85;
  transform-box: fill-box; transform-origin: center; transform: scale(0); animation: pop .7s var(--ease-out) forwards; }
.venn__c.c2 circle { animation-delay: .18s; }
.venn__c.c3 circle { animation-delay: .36s; }
.venn__c text { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; fill: var(--muted); opacity: 0; animation: figfade .6s ease .8s forwards; }
.venn__halo { fill: none; stroke: var(--cyan); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: mapPulse 3.2s var(--ease-out) 1.6s infinite; }
.venn__core { fill: url(#venncore); stroke: #fff; stroke-width: 1.4;
  transform-box: fill-box; transform-origin: center; transform: scale(0); animation: pop .6s var(--ease-out) .9s forwards;
  filter: drop-shadow(0 4px 10px rgba(31,184,233,0.45)); }
.venn__check { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; animation: figfade .4s ease 1.25s forwards; }
.venn__lbl line { stroke: var(--line-strong); stroke-width: 1; }
.venn__lbl text { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; fill: var(--accent); }
.venn__lbl { opacity: 0; animation: figfade .6s ease 1.5s forwards; }
/* jouer les animations seulement quand le venn entre à l'écran */
.venn :where(.venn__c circle, .venn__c text, .venn__halo, .venn__core, .venn__check, .venn__lbl) { animation-play-state: paused; }
.venn.is-in :where(.venn__c circle, .venn__c text, .venn__halo, .venn__core, .venn__check, .venn__lbl) { animation-play-state: running; }

/* ---------- Stat band : chiffres réels ---------- */
.stats { position: relative; padding: clamp(40px,5vw,64px) 0; }
.stats::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 12px); opacity: .6; }
.stats__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,40px); }
.stat { position: relative; padding-left: clamp(16px,1.6vw,24px); border-left: 1px solid var(--line-strong); }
.stat__n { display: block; font-family: var(--font-display); font-optical-sizing: auto; font-weight: 500; font-size: clamp(2.6rem,4.6vw,4.2rem); line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.stat__n::after { content: ""; display: block; width: 2.2em; height: 2px; background: var(--grad); margin-top: .18em; border-radius: 2px; }
.stat__l { display: block; margin-top: .7rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .05em; line-height: 1.6; color: var(--muted); text-transform: uppercase; max-width: 30ch; }
@media (max-width: 820px) { .stats__grid { grid-template-columns: 1fr; gap: 1.6rem; } }

/* ---------- Buttons (paper-cut) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: .6em; font-family: var(--font-body); font-size: .94rem; font-weight: 600; padding: .85rem 1.55rem; border-radius: 8px; border: 1px solid var(--ink); background: var(--ink); color: #fff; will-change: transform; transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); box-shadow: 4px 4px 0 rgba(31,184,233,0.85); }
.btn:hover { background: var(--ink-3); border-color: var(--ink-3); color: #fff; transform: translate(-1px,-1px); box-shadow: 6px 6px 0 rgba(31,184,233,0.85); }
.btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--ink); box-shadow: 4px 4px 0 rgba(12,24,54,0.15); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--ink); transform: translate(-1px,-1px); box-shadow: 6px 6px 0 rgba(12,24,54,0.15); }
.btn .a { font-family: var(--font-mono); }

/* ---------- Heads / split ---------- */
.head { max-width: 760px; margin-bottom: clamp(44px,5.5vw,76px); }
.head .eyebrow { margin-bottom: 1.4rem; }
.head .lead { margin-top: 1.4rem; font-size: clamp(1.06rem,1.45vw,1.28rem); line-height: 1.6; color: var(--muted); }
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(34px,6vw,96px); align-items: center; }
.intro-lead { font-size: clamp(1.5rem,3vw,2.35rem); line-height: 1.24; letter-spacing: -.02em; color: var(--ink); font-family: var(--font-display); font-weight: 600; }
.intro-lead .accent { color: var(--accent); }
.intro-body { font-size: 1.05rem; line-height: 1.75; color: var(--text-2); }
.intro-body p + p { margin-top: 1.2rem; }

/* ---------- Console (dark exhibit) ---------- */
.console { position: relative; background: linear-gradient(160deg, var(--ink-2), var(--ink)); border: 1px solid var(--ink-3); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-lg); transition: box-shadow .4s var(--ease); }
.console:hover { box-shadow: var(--shadow-lg), 0 0 44px rgba(31,184,233,0.14); }
/* Rubber stamp on the exhibit */
.stamp { position: absolute; top: 50px; right: 18px; z-index: 2; transform: rotate(6deg);
  font-family: var(--font-mono); font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(90,217,248,0.8); border: 1.5px solid rgba(90,217,248,0.55); border-radius: 6px; padding: .55em .85em .5em;
  box-shadow: inset 0 0 0 2.5px rgba(16,31,68,0.9), inset 0 0 0 3.5px rgba(90,217,248,0.3);
  pointer-events: none; user-select: none; }
.console__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-ink); background: rgba(255,255,255,0.03); }
.console__bar i { width: 11px; height: 11px; border-radius: 50%; background: #27355C; }
.console__bar i:nth-child(1){ background:#33436E; }
.console__title { margin-left: 10px; font-family: var(--font-mono); font-size: .72rem; color: var(--on-ink-2); letter-spacing: .04em; }
.console__body { padding: 20px 20px 24px; font-family: var(--font-mono); font-size: .82rem; line-height: 1.85; color: var(--on-ink); }
.console__body .ln { display: block; white-space: pre-wrap; opacity: 0; }
.console.is-run .ln { animation: lnIn .25s var(--ease) forwards; }
@keyframes lnIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.console .pr { color: var(--cyan); }
.console .ok { color: var(--ok-bright); }
.console .warn { color: var(--amber-bright); }
.console .crit { color: var(--alert-bright); }
.console .dim { color: var(--on-ink-2); }
.console__cursor { display: inline-block; width: 8px; height: 1.05em; background: var(--cyan); vertical-align: -2px; animation: caret 1s steps(2) infinite; }
@keyframes caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- Domains ---------- */
.domains { border-top: 1px solid var(--line); }
.domain { position: relative; display: grid; grid-template-columns: 5rem 1fr auto; gap: clamp(18px,3vw,52px); align-items: center; padding: clamp(26px,3.2vw,44px) clamp(8px,2vw,28px); border-bottom: 1px solid var(--line); transition: background .4s var(--ease), padding-left .4s var(--ease); border-radius: 2px; }
.domain::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: var(--grad); transform: scaleY(0); transform-origin: bottom; transition: transform .4s var(--ease); }
.domain:hover { background: var(--paper); padding-left: clamp(20px,3vw,46px); }
.domain:hover::before { transform: scaleY(1); transform-origin: top; }
.domain__num { font-family: var(--font-mono); font-size: 1rem; color: var(--muted-2); transition: color .3s var(--ease); }
.domain:hover .domain__num { color: var(--accent); }
.domain__body { max-width: 62ch; }
.domain__body h3 { margin-bottom: .55rem; }
.domain__body h3 .tag { font-family: var(--font-mono); font-size: .6rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--cyan); border-radius: 100px; padding: 3px 9px; vertical-align: middle; margin-left: .7rem; }
.domain__body p { font-size: .99rem; line-height: 1.6; color: var(--muted); }
.domain__go { font-family: var(--font-mono); font-size: 1.4rem; color: var(--muted-2); opacity: 0; transform: translateX(-8px); transition: all .35s var(--ease); }
.domain:hover .domain__go { opacity: 1; transform: none; color: var(--accent); }

/* ---------- Cases + redaction ---------- */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,1.6vw,22px); }
.case { position: relative; background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%); border: 1px solid var(--line); border-radius: 16px; padding: clamp(24px,2.4vw,34px); display: flex; flex-direction: column; gap: 1rem; overflow: hidden; box-shadow: var(--shadow-card); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.case::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); opacity: .5; transition: opacity .4s var(--ease); pointer-events: none; }
.case:hover { transform: translateY(-5px); border-color: rgba(31,184,233,0.45); box-shadow: var(--shadow-card-hover); }
.case:hover::after { opacity: 1; }
/* Ghost watermark — what a real case file carries */
.case::before { content: "CONFIDENTIEL"; position: absolute; top: 54%; left: 50%; transform: translate(-50%,-50%) rotate(-21deg);
  font-family: var(--font-mono); font-size: 2rem; font-weight: 700; letter-spacing: .28em; white-space: nowrap;
  color: rgba(12,24,54,0.045); pointer-events: none; user-select: none; }
html[lang="en"] .case::before { content: "CONFIDENTIAL"; }
.case__label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.case h3 { font-size: 1.14rem; }
.case p { font-size: .93rem; line-height: 1.6; color: var(--muted); }
.case__meta { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line-2); font-family: var(--font-mono); font-size: .7rem; color: var(--muted-2); }
.redact { background: var(--ink); color: var(--ink); border-radius: 3px; padding: 0 .25em; transition: background .3s var(--ease), color .3s var(--ease); }
.case:hover .redact { background: var(--bg-2); color: var(--text); }
.note { margin-top: 1.6rem; font-size: .85rem; color: var(--muted-2); }

/* ---------- Featured ---------- */
.featured { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px,6vw,80px); align-items: center; }
.featured__meta { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--muted-2); margin-bottom: 1.2rem; display: flex; gap: 1.4rem; flex-wrap: wrap; text-transform: uppercase; }
.featured h3 { font-size: clamp(1.6rem,2.8vw,2.4rem); line-height: 1.08; margin-bottom: 1.3rem; }
.featured p { font-size: 1.03rem; line-height: 1.65; margin-bottom: 1.8rem; color: var(--muted); }

/* ---------- Commitments ---------- */
.commitments { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(16px,1.6vw,22px); }
.commitment { background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%); border: 1px solid var(--line); border-radius: 16px; padding: clamp(24px,2.6vw,36px); box-shadow: var(--shadow-card); overflow: hidden; transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease); }
.commitment::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); opacity: .5; transition: opacity .4s var(--ease); pointer-events: none; }
.commitment:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); border-color: rgba(31,184,233,0.45); }
.commitment:hover::after { opacity: 1; }
.commitment__num { font-family: var(--font-mono); font-size: .76rem; color: var(--accent); }
.commitment h3 { font-size: 1.14rem; margin: .8rem 0 .5rem; }
.commitment p { font-size: .94rem; line-height: 1.6; color: var(--muted); }

/* ---------- CTA (navy panel) ---------- */
.cta { text-align: center; }
.cta__inner { position: relative; z-index: 1; max-width: none; margin: 0 auto; background: linear-gradient(155deg, var(--ink-2) 0%, var(--ink) 70%); border-radius: 18px; padding: clamp(56px,8vw,104px) clamp(24px,5vw,72px); box-shadow: var(--shadow-lg); overflow: hidden; outline: 1px solid rgba(242,246,251,0.16); outline-offset: -12px; }
.cta__inner::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 60% at 50% 0%, rgba(31,184,233,0.16), transparent 65%), repeating-radial-gradient(circle at 50% 130%, rgba(242,246,251,0.035) 0 1px, transparent 1px 80px); }
.cta h2 { margin: 0 auto; color: #fff; max-width: 24ch; position: relative; }
.cta__contact { margin-top: 2.2rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; position: relative; }
.cta__mail { font-family: var(--font-mono); font-size: 1rem; color: var(--cyan-2); }
.cta__mail:hover { color: #fff; }
.cta__sub { font-family: var(--font-mono); font-size: .78rem; color: var(--on-ink-2); letter-spacing: .04em; }
.cta .btn { margin-top: 1.9rem; background: #fff; border-color: #fff; color: var(--ink); box-shadow: 4px 4px 0 rgba(31,184,233,0.9); position: relative; }
.cta .btn:hover { background: var(--cyan-2); border-color: var(--cyan-2); color: var(--ink); box-shadow: 6px 6px 0 rgba(31,184,233,0.55); }

/* ==========================================================================
   Inner-page components
   ========================================================================== */
/* Slim navy plaque — chaque page intérieure ouvre son chapitre du dossier,
   en écho direct à la plaque du hero d'accueil (mêmes matériaux, format réduit) */
.page-hero { padding: clamp(96px,11vw,136px) 0 clamp(24px,3.5vw,44px); position: relative; }
.page-hero__plaque { animation: plaqueIn .9s var(--ease-out) both; position: relative; overflow: hidden;
  background: radial-gradient(120% 100% at 80% 0%, #16295C 0%, var(--ink-2) 42%, var(--ink) 100%);
  border-radius: 20px; box-shadow: var(--shadow-lg); outline: 1px solid rgba(242,246,251,0.16); outline-offset: -12px;
  padding: clamp(38px,5vw,68px) clamp(28px,5vw,88px) clamp(58px,6.5vw,88px); }
.page-hero__plaque .eyebrow { color: var(--cyan-2); border-color: rgba(90,217,248,0.42); }
.page-hero h1 { font-size: clamp(2.1rem,4.8vw,3.8rem); max-width: 22ch; margin-top: 1.3rem; }
.page-hero__plaque h1 { color: #F5F2EA; }
.page-hero__plaque h1 .accent { color: var(--cyan-2); font-style: italic; font-weight: 520; }
.page-hero .lead { margin-top: 1.5rem; max-width: 62ch; font-size: clamp(1.06rem,1.5vw,1.3rem); line-height: 1.6; color: var(--muted); }
.page-hero .lead strong { color: var(--ink); }
.page-hero__plaque .lead { color: var(--on-ink-2); }
.page-hero__plaque .lead strong { color: #fff; }
.page-hero__plaque .featured__meta { color: var(--on-ink-2); margin-bottom: 1.2rem; }
.page-hero__plaque .featured__meta span:not(:last-child)::after { color: rgba(185,196,216,0.5); }
.page-hero__plaque .dim { color: var(--on-ink-2); }
/* boutons clairs sur la plaque navy (comme le hero d'accueil) */
.page-hero__plaque .btn { background: #fff; border-color: #fff; color: var(--ink); box-shadow: 4px 4px 0 rgba(31,184,233,0.9); }
.page-hero__plaque .btn:hover { background: var(--cyan-2); border-color: var(--cyan-2); color: var(--ink); box-shadow: 6px 6px 0 rgba(31,184,233,0.5); }
.page-hero__plaque .btn--ghost { background: transparent; border-color: rgba(242,246,251,0.4); color: #F5F2EA; box-shadow: 4px 4px 0 rgba(242,246,251,0.12); }
.page-hero__plaque .btn--ghost:hover { border-color: #fff; color: #fff; box-shadow: 6px 6px 0 rgba(242,246,251,0.12); }
@media (max-width: 700px) { .page-hero__plaque { border-radius: 14px; outline-offset: -8px; padding-bottom: 52px; } }

.prose { max-width: 760px; }
.prose > * + * { margin-top: 1.2rem; }
.prose h2 { font-size: clamp(1.45rem,2.5vw,2rem); margin-top: 2.8rem; }
.prose h3 { margin-top: 2rem; }
.prose p { font-size: 1.04rem; line-height: 1.75; color: var(--text-2); }
.prose p.muted { color: var(--muted); }
.prose p.lead { font-size: clamp(1.12rem,1.55vw,1.3rem); color: var(--ink); line-height: 1.55; }
.prose strong { color: var(--ink); }
.prose em { color: var(--ink); font-style: italic; }
.prose ul, .prose ol { list-style: none; }
.prose li { position: relative; padding-left: 1.7rem; margin-top: .65rem; color: var(--text-2); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .68em; width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; }
.prose ol { counter-reset: li; }
.prose ol li::before { counter-increment: li; content: counter(li,decimal-leading-zero); position: absolute; left: 0; top: .05em; font-family: var(--font-mono); font-size: .8rem; color: var(--accent); }
.prose blockquote { border-left: 3px solid var(--cyan); padding-left: 1.5rem; margin: 2.2rem 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem,2.3vw,1.6rem); line-height: 1.32; color: var(--ink); letter-spacing: -.015em; }

.callout { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 12px; padding: clamp(20px,2.4vw,30px); margin: 2.2rem 0; box-shadow: var(--shadow-sm); }
.callout .eyebrow { margin-bottom: .7rem; }
.callout p { color: var(--text-2); font-size: .97rem; line-height: 1.65; }

/* Fiches de service — chaque prestation est une pièce du dossier, à part entière */
.svc { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(18px,3vw,38px); align-items: start; background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%); border: 1px solid var(--line); border-radius: 16px; padding: clamp(22px,2.6vw,32px); margin-bottom: clamp(14px,1.6vw,20px); box-shadow: var(--shadow-card); overflow: hidden; transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease); }
.svc::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); opacity: .5; transition: opacity .4s var(--ease); }
.svc:last-of-type { margin-bottom: 0; }
.svc:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); border-color: rgba(31,184,233,0.45); }
.svc:hover::before { opacity: 1; }
.svc__mark { position: relative; display: block; }
.svc__num { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; font-family: var(--font-mono); font-size: .62rem; font-weight: 700; color: #fff; background: var(--ink); border-radius: 100px; box-shadow: 0 0 0 3px var(--paper); }
.svc__body { max-width: 64ch; }
.svc__body h3 { margin-bottom: .6rem; }
.svc__body h3 .tag { font-family: var(--font-mono); font-size: .6rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--cyan); border-radius: 100px; padding: 3px 9px; vertical-align: middle; margin-left: .6rem; }
.svc__body p { font-size: 1.01rem; line-height: 1.65; color: var(--text-2); }
.svc__list { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .55rem; }
.svc__list span { font-family: var(--font-mono); font-size: .71rem; letter-spacing: .04em; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 100px; padding: 4px 11px; }

.steps { counter-reset: step; border-top: 1px solid var(--line); }
.step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(16px,3vw,38px); align-items: start; padding: clamp(22px,2.6vw,32px) clamp(8px,2vw,22px); border-bottom: 1px solid var(--line); border-radius: 2px; transition: background .4s var(--ease), padding-left .4s var(--ease); }
.step::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: var(--grad); transform: scaleY(0); transform-origin: bottom; transition: transform .4s var(--ease); }
.step:hover { background: var(--paper); padding-left: clamp(14px,2.6vw,28px); }
.step:hover::before { transform: scaleY(1); transform-origin: top; }
.step__mark { position: relative; display: block; }
.step__num { counter-increment: step; position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 5px; font-family: var(--font-mono); font-size: .62rem; font-weight: 700; color: #fff; background: var(--ink); border-radius: 100px; box-shadow: 0 0 0 3px var(--bg-2); transition: box-shadow .4s var(--ease); }
.step__num::before { content: counter(step, decimal-leading-zero); }
.step:hover .step__num { box-shadow: 0 0 0 3px var(--paper); }
.step__body { padding-top: .3rem; }
.step__body h4 { font-family: var(--font-display); font-weight: 700; font-size: 1.14rem; color: var(--ink); margin-bottom: .4rem; letter-spacing: -.01em; }
.step__body p { font-size: .99rem; line-height: 1.65; color: var(--text-2); }

.facts { border-top: 1px solid var(--line); max-width: 760px; }
.fact { display: grid; grid-template-columns: 14rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.fact dt { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fact dd { color: var(--ink); font-size: 1rem; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px,6vw,88px); align-items: start; }
.urgent { background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--alert); border-radius: 12px; padding: clamp(22px,2.6vw,32px); margin-bottom: 2rem; box-shadow: var(--shadow-sm); }
.urgent h3 { font-size: 1.18rem; margin-bottom: .6rem; }
.urgent p { color: var(--text-2); font-size: .95rem; line-height: 1.65; }
.urgent a { font-family: var(--font-mono); }
.channel { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.channel:first-of-type { border-top: 1px solid var(--line); }
.channel dt { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.channel dd, .channel dd a { color: var(--ink); font-size: 1rem; }

.form-row { margin-bottom: 1.3rem; }
.form-row label { display: block; font-size: .86rem; font-weight: 600; color: var(--ink); margin-bottom: .45rem; }
.form-row label .req { color: var(--accent); }
.form-row label .opt { color: var(--muted); font-weight: 400; }
.form-row input, .form-row textarea { width: 100%; font-family: var(--font-body); font-size: .98rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: .85rem 1rem; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); box-shadow: 0 1px 2px rgba(12,24,54,0.04); }
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--muted-2); }
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--glow-soft); }
.form-row textarea { min-height: 150px; resize: vertical; }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .86rem; color: var(--muted); font-weight: 400; }
.consent input { width: auto; margin-top: .25rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: 1rem; font-size: .82rem; color: var(--muted-2); }
.form-status { margin-top: 1rem; font-size: .9rem; display: none; }
.form-status.is-error { display: block; color: var(--alert); }
.form-status.is-ok { display: block; color: var(--ok); }

/* ---------- Footer (navy) ---------- */
.site-footer { background: linear-gradient(180deg, var(--ink) 0%, #0A1430 100%); padding: clamp(60px,7vw,96px) 0 2.4rem; color: var(--on-ink-2); }
.site-footer a { color: var(--on-ink-2); }
.site-footer a:hover { color: #fff; }
.site-footer .wordmark { color: #fff; }
.site-footer .wordmark span { color: var(--cyan); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(28px,4vw,48px); padding-bottom: 3rem; border-bottom: 1px solid var(--line-ink); }
.footer-brand .wordmark { font-size: 1.25rem; }
.footer-brand p { color: var(--on-ink-2); font-size: .88rem; margin-top: 1rem; max-width: 32ch; }
.footer-brand .fmono { font-family: var(--font-mono); font-size: .72rem; color: rgba(185,196,216,0.65); margin-top: 1.3rem; letter-spacing: .03em; line-height: 1.7; }
.footer-col h4 { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(185,196,216,0.6); font-weight: 500; margin-bottom: 1.1rem; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: .6rem; }
.footer-col a { font-size: .9rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 1.8rem; }
.footer-bottom p, .footer-bottom a { font-family: var(--font-mono); font-size: .72rem; color: rgba(185,196,216,0.6); letter-spacing: .04em; }
.footer-legal { display: flex; gap: 1.4rem; }
.footer-studio a { color: var(--cyan); }
.footer-studio a:hover { color: #fff; }
/* Giant wordmark — the signature at the bottom of the dossier */
.footer-giant { margin-top: clamp(36px,5vw,64px); font-family: var(--font-display); font-optical-sizing: auto; font-weight: 560; font-size: clamp(2.6rem, 9.4vw, 9rem); line-height: .92; letter-spacing: -.02em; text-align: center; white-space: nowrap; color: rgba(242,246,251,0.08); user-select: none; }
.footer-giant span { color: rgba(31,184,233,0.22); font-style: italic; }

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes lineUp { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero h1 .line > span { transform: translateY(110%); animation: lineUp .95s var(--ease-out) forwards; }
.hero h1 .line:nth-child(1) > span { animation-delay: .2s; }
.hero h1 .line:nth-child(2) > span { animation-delay: .32s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .44s; }
.hero .load { opacity: 0; animation: fadeUp .9s var(--ease-out) forwards; }
.hero__hud.load { animation-delay: .08s; }
.hero__sub.load { animation-delay: .66s; }
.hero__cta.load { animation-delay: .8s; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }

/* ---------- Micro-interactions & chrome polish ---------- */
.btn:active, .btn--ghost:active, .btn--nav:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(31,184,233,0.55); transition-duration: .08s; }
html { scrollbar-width: thin; scrollbar-color: var(--muted-2) var(--bg-2); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: var(--muted-2); border-radius: 8px; border: 3px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1060px) {
  .nav { position: fixed; inset: 78px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); padding: .6rem clamp(22px,4.5vw,64px) 1.6rem; transform: translateY(-130%); transition: transform .4s var(--ease); max-height: calc(100svh - 78px); overflow-y: auto; }
  .nav.is-open { transform: none; }
  .nav__link { width: 100%; padding: .9rem 0; font-size: 1.02rem; border-bottom: 1px solid var(--line-2); text-align: left; }
  .nav__link::after { display: none; }
  .nav__group > .nav__link .caret { display: none; }
  .nav__drop { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 .4rem .9rem; background: transparent; }
  .nav__drop a { padding: .55rem 0; border-bottom: 1px solid var(--line-2); border-radius: 0; font-size: .94rem; }
  .nav__drop a small { display: none; }
  .lang { margin-top: 1rem; align-self: flex-start; }
  .btn--nav { margin-top: 1rem; justify-content: center; }
  .nav-toggle { display: flex; }
  .split, .featured, .commitments, .contact-grid { grid-template-columns: 1fr; }
  .featured .console { order: -1; }
  .cases { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .hero { padding-top: 96px; }
  .hero__plaque { min-height: 0; border-radius: 14px; outline-offset: -8px; }
  .hero__map { width: 150%; right: -46%; opacity: .4; }
}
@media (max-width: 600px) {
  .domain { grid-template-columns: 2.6rem 1fr; }
  .domain__go { display: none; }
  .fact { grid-template-columns: 1fr; gap: .2rem; }
  .console__body { font-size: .74rem; }
  .wordmark { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hero h1 .line > span { transform: none; } .hero .load { opacity: 1; }
  .reveal { opacity: 1; transform: none; }
  .console .ln { opacity: 1 !important; }
}

/* ==========================================================================
   Entrées d'accueil · note "spécialité en développement" · diagrammes SVG
   ========================================================================== */

/* ---------- Bande "par où commencer" (accueil, 3 publics) ---------- */
.audiences-band { background: var(--bg-2); border-top: 3px double var(--line-strong); border-bottom: 3px double var(--line-strong); padding: clamp(20px,2.6vw,36px) clamp(22px,4.5vw,64px); }
.audiences { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,1.6vw,22px); max-width: var(--container); margin: 0 auto; }
.audience { display: block; position: relative; background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%); border: 1px solid var(--line); border-radius: 16px; padding: clamp(24px,2.6vw,36px) clamp(20px,2.2vw,32px); box-shadow: var(--shadow-card); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.audience::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); opacity: .5; transition: opacity .4s var(--ease); }
.audience:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); border-color: rgba(31,184,233,0.45); }
.audience:hover::before { opacity: 1; }
.audience__k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.audience h3 { font-size: 1.14rem; margin: .8rem 0 .5rem; }
.audience p { font-size: .91rem; line-height: 1.55; color: var(--muted); }
.audience__go { font-family: var(--font-mono); font-size: .78rem; color: var(--muted-2); margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .5em; transition: color .3s var(--ease); }
.audience:hover .audience__go { color: var(--accent); }
@media (max-width: 820px) { .audiences { grid-template-columns: 1fr; } }

/* ---------- Note "spécialité en développement" ---------- */
.dev-note { display: flex; gap: .9rem; align-items: flex-start; margin: 1.5rem 0 0; padding: .9rem 1.1rem; border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 10px; background: rgba(154,106,11,.05); max-width: 760px; }
.dev-note b { color: var(--amber); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; padding-top: .15em; }
.dev-note p { font-size: .86rem; line-height: 1.6; color: var(--text-2); }
.tag--dev { color: var(--amber) !important; border-color: rgba(154,106,11,.4) !important; }

/* ---------- Figures SVG (diagrammes explicatifs — dark exhibits) ---------- */
.fig { background: linear-gradient(160deg, var(--ink-2), var(--ink)); border: 1px solid var(--ink-3); border-radius: 14px; padding: clamp(20px,3vw,34px); margin: 2.4rem 0; box-shadow: var(--shadow-lg); }
.fig__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.fig__head .eyebrow { margin: 0; color: var(--cyan); }
.fig__head .eyebrow::before { background: var(--grad); }
.fig__id { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; color: var(--on-ink-2); }
.fig h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem,2vw,1.5rem); color: var(--on-ink); margin-bottom: .4rem; letter-spacing: -.02em; }
.fig__cap { color: var(--on-ink-2); font-size: .92rem; max-width: 66ch; margin-bottom: 1.4rem; }
.fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.fig__take { margin-top: 1.4rem; font-size: .92rem; line-height: 1.6; color: var(--on-ink-2); border-top: 1px solid var(--line-ink); padding-top: 1.1rem; }
.fig__take strong { color: var(--on-ink); font-weight: 500; }
.fig__legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.4rem; border-top: 1px solid var(--line-ink); padding-top: 1.2rem; }
.fig__legend b { display: block; font-family: var(--font-mono); font-size: .74rem; margin-bottom: .3rem; color: var(--on-ink); }
.fig__legend p { font-size: .8rem; color: var(--on-ink-2); line-height: 1.5; }
@media (max-width: 560px) { .fig__legend { grid-template-columns: 1fr; } }

/* svg label palette (lisible sur le panneau sombre) */
.fig text { font-family: var(--font-mono); }
.fig .t { font-size: 13px; fill: var(--on-ink); }
.fig .t-dim { font-size: 12px; fill: #B9C4D8; letter-spacing: .03em; }
.fig .t-acc { fill: #6FCFF2; } .fig .t-alert { fill: #F58F87; } .fig .t-amber { fill: #F0BE62; } .fig .t-ok { fill: #5FD59E; }
.fig .t-ink { fill: #0C1836; } .fig .t-h { font-family: var(--font-display); font-weight: 700; }
.fig .axis { stroke: #55658C; stroke-width: 1; stroke-dasharray: 4 4; }
.halo { paint-order: stroke; stroke: #0C1836; stroke-width: 3.5px; stroke-linejoin: round; }

/* svg animations (jouées quand .fig devient .is-in via l'observer reveal) */
@keyframes grow { to { transform: scaleX(1); } }
@keyframes growY { to { transform: scaleY(1); } }
@keyframes pop { to { transform: scale(1); } }
@keyframes figfade { to { opacity: 1; } }
@keyframes figpulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.fig .bar { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: grow .85s var(--ease-out) forwards; }
.fig .barY { transform-box: fill-box; transform-origin: top center; transform: scaleY(0); animation: growY .7s var(--ease-out) forwards; }
.fig .pop { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: pop .55s var(--ease-out) forwards; }
.fig .draw { opacity: 0; animation: figfade .7s ease forwards; }
.fig .fade { opacity: 0; animation: figfade .55s ease forwards; }
.fig .pulse { animation: figpulse 2.6s ease-in-out infinite; }
.fig :where(.bar,.barY,.pop,.draw,.fade,.pulse) { animation-play-state: paused; }
.fig.is-in :where(.bar,.barY,.pop,.draw,.fade,.pulse) { animation-play-state: running; }
.fig .d1{animation-delay:.1s} .fig .d2{animation-delay:.25s} .fig .d3{animation-delay:.4s} .fig .d4{animation-delay:.55s}
.fig .d5{animation-delay:.7s} .fig .d6{animation-delay:.85s} .fig .d7{animation-delay:1s} .fig .d8{animation-delay:1.15s}

@media (prefers-reduced-motion: reduce) {
  .fig :where(.bar) { transform: scaleX(1) !important; }
  .fig :where(.barY) { transform: scaleY(1) !important; }
  .fig :where(.pop) { transform: scale(1) !important; }
  .fig :where(.fade,.draw) { opacity: 1 !important; }
}

/* ==========================================================================
   Page Services (vue d'ensemble : cartes de service + do/don't)
   ========================================================================== */
.svc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(16px,1.8vw,22px); }
.svc-card { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%); border: 1px solid var(--line); border-radius: 16px; padding: clamp(24px,2.6vw,34px); box-shadow: var(--shadow-card); overflow: hidden; transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease); }
.svc-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad); opacity: .5; transition: opacity .4s var(--ease); }
.svc-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); border-color: rgba(31,184,233,0.45); }
.svc-card:hover::before { opacity: 1; }
.svc-card__k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.svc-card h3 { font-size: 1.16rem; margin: .7rem 0 .55rem; }
.svc-card h3 .tag--dev { font-family: var(--font-mono); font-size: .58rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; border: 1px solid rgba(154,106,11,.4); border-radius: 100px; padding: 3px 8px; vertical-align: middle; margin-left: .5rem; }
.svc-card > p { font-size: .93rem; line-height: 1.6; color: var(--muted); }
.svc-card__inc { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin: 1.2rem 0 .6rem; }
.svc-card__list { list-style: none; display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.svc-card__list li { position: relative; padding-left: 1.3rem; font-size: .9rem; line-height: 1.45; color: var(--text-2); }
.svc-card__list li::before { content: ""; position: absolute; left: 0; top: .52em; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); }
.svc-card__go { margin-top: auto; font-size: .9rem; color: var(--accent); display: inline-flex; align-items: center; gap: .45em; }
.svc-card__go::after { content: "→"; font-family: var(--font-mono); transition: transform .25s var(--ease); }
.svc-card:hover .svc-card__go::after { transform: translateX(4px); }

/* Do / Don't — deux fiches du dossier, verdict au fil des marges */
.dodont { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,1.8vw,22px); }
.panel { position: relative; overflow: hidden; background: linear-gradient(180deg, #FFFFFF 0%, var(--paper) 100%); border: 1px solid var(--line); border-radius: 16px; padding: clamp(24px,2.6vw,34px); box-shadow: var(--shadow-card); transition: box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease); }
.panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: .55; transition: opacity .4s var(--ease); }
.panel--ok::before { background: linear-gradient(90deg, var(--ok), var(--ok-bright)); }
.panel--no::before { background: linear-gradient(90deg, var(--alert), var(--alert-bright)); }
.panel:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.panel:hover::before { opacity: 1; }
.panel--ok:hover { border-color: rgba(23,122,76,.4); }
.panel--no:hover { border-color: rgba(190,64,56,.4); }
.panel .ic { margin-bottom: 1rem; }
.panel--ok .ic { color: var(--ok); background: linear-gradient(145deg, rgba(23,122,76,.18), rgba(23,122,76,.06) 60%, rgba(255,255,255,.6)); border-color: rgba(23,122,76,.4); box-shadow: 3px 3px 0 rgba(23,122,76,.2), inset 0 1px 0 rgba(255,255,255,.7); }
.panel--no .ic { color: var(--alert); background: linear-gradient(145deg, rgba(190,64,56,.16), rgba(190,64,56,.05) 60%, rgba(255,255,255,.6)); border-color: rgba(190,64,56,.4); box-shadow: 3px 3px 0 rgba(190,64,56,.2), inset 0 1px 0 rgba(255,255,255,.7); }
.panel--ok:hover .ic { box-shadow: 4px 4px 0 rgba(23,122,76,.3), inset 0 1px 0 rgba(255,255,255,.7); }
.panel--no:hover .ic { box-shadow: 4px 4px 0 rgba(190,64,56,.3), inset 0 1px 0 rgba(255,255,255,.7); }
.panel h3 { font-size: 1.1rem; margin-bottom: 1.1rem; }
.panel--ok h3 { color: var(--ok); }
.panel--no h3 { color: var(--alert); }
.panel ul { list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.panel li { position: relative; padding-left: 1.95rem; font-size: .94rem; line-height: 1.5; color: var(--text-2); min-height: 1.3rem; display: flex; align-items: center; }
.panel li::before { position: absolute; left: 0; top: 0; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border-radius: 50%; font-family: var(--font-mono); font-size: .7rem; }
.panel--ok li::before { content: "✓"; color: var(--ok); background: rgba(23,122,76,.1); }
.panel--no li::before { content: "✕"; color: var(--alert); background: rgba(190,64,56,.1); }
.panel__note { margin-top: 1.2rem; font-size: .85rem; color: var(--muted-2); font-style: italic; }
@media (max-width: 700px) { .dodont { grid-template-columns: 1fr; } }