/* Maillon Froid: the web kit ("Site Web - Éléments", Claude Design), as tokens and components.
   Archivo for text and headings, JetBrains Mono for data and labels. Square corners throughout. */

@font-face { font-family: 'Archivo'; font-weight: 400 800; font-stretch: 100%; font-display: swap;
  src: url('/fonts/archivo-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: 'Archivo'; font-weight: 400 800; font-stretch: 100%; font-display: swap;
  src: url('/fonts/archivo-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-weight: 400 500; 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-weight: 400 500; 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 {
  --nuit: #0b2233;      /* background, text */
  --glace: #9fd4f2;     /* accent, call to action */
  --givre: #eaf4fa;     /* text on nuit */
  --signal: #2a7fb8;    /* links, data */
  --ardoise: #5a7082;   /* secondary */
  --neige: #f4f8fb;     /* light background */
  --brume: #dfe5ea;     /* page background, hairlines */
  --encre: #3a4d5c;     /* body text on white */
  --nuit-ligne: #1d3a4e;
  --nuit-texte: #bcd3e0;
  --nuit-label: #6f93aa;
  --ok: #2e9e6e; --ok-bg: #e2f3ec; --ok-fg: #1d6b4a;
  --watch: #e0a13a; --watch-bg: #fbf0dc; --watch-fg: #8a5a10;
  --break: #d24a3c; --break-bg: #fbe4e1; --break-fg: #9a2b20;
  --sans: 'Archivo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--brume); color: var(--nuit); font: 400 17px/1.6 var(--sans); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--signal); text-decoration: none; }
a:hover { color: var(--nuit); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.dark :focus-visible { outline-color: var(--glace); }
h1, h2, h3, p { margin: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--glace); color: var(--nuit); padding: 12px 18px; font-weight: 700; z-index: 10; }
.skip:focus { left: 16px; top: 16px; }

/* Labels and data: JetBrains Mono, tracked out. */
.label { font: 500 13px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ardoise); }
.dark .label { color: var(--nuit-label); }
.data { font: 500 14px/1.4 var(--mono); letter-spacing: .12em; color: var(--signal); }

/* Headings */
.h1 { font-weight: 800; font-size: clamp(44px, 7vw, 84px); line-height: .92; letter-spacing: -.03em; text-wrap: balance; }
.h2 { font-weight: 800; font-size: clamp(32px, 4.4vw, 52px); line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.h3 { font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; }
.lead { font-size: 19px; line-height: 1.55; max-width: 540px; text-wrap: pretty; }
.dark .lead { color: var(--nuit-texte); }

/* Buttons: square, bold, an arrow for the primary action. */
.btn { display: inline-flex; cursor: pointer; gap: 12px; align-items: center; font: 700 16px/1.2 var(--sans); padding: 16px 26px; border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s; }
.btn-glace { background: var(--glace); color: var(--nuit); }
.btn-glace:hover { background: var(--givre); color: var(--nuit); }
.btn-ghost-dark { border-color: var(--glace); color: var(--givre); padding: 16px 24px; background: transparent; }
.btn-ghost-dark:hover { background: var(--glace); color: var(--nuit); }
.btn-nuit { background: var(--nuit); color: var(--givre); }
.btn-nuit:hover { background: var(--signal); color: #fff; }
.btn-ghost { border-color: var(--nuit); color: var(--nuit); padding: 16px 24px; background: transparent; }
.btn-ghost:hover { background: var(--nuit); color: var(--givre); }
.link-mono { font: 500 13px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--signal); border-bottom: 1px solid currentColor; padding-bottom: 3px; align-self: flex-start; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Logo: two interlocked links of a chain. */
.logo { display: inline-flex; align-items: center; gap: 14px; color: var(--givre); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.logo:hover { color: var(--givre); }
.logo svg { width: 74px; height: 26px; flex: none; }

/* Dark bands */
.dark { background: var(--nuit); color: var(--givre); }
.dark a:not(.btn):not(.logo) { color: var(--glace); }
.dark a:not(.btn):not(.logo):hover { color: var(--givre); }

/* Header */
.site-header { border-bottom: 1px solid var(--nuit-ligne); }
.site-header .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 22px; }
.nav { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; font-weight: 500; font-size: 15px; }
.nav a:not(.btn) { color: var(--givre) !important; }
.nav a:not(.btn):hover { color: var(--glace) !important; }
.nav .btn { padding: 10px 18px; font-size: 15px; }
@media (max-width: 720px) { .nav .hide-sm { display: none; } }

/* Language toggle: FR · EN, the current one filled. */
.lang { display: inline-flex; border: 1px solid var(--nuit-ligne); font: 500 13px/1 var(--mono); letter-spacing: .1em; }
.lang a { padding: 8px 10px; color: var(--nuit-label) !important; }
.lang a:hover { color: var(--givre) !important; }
.lang a[aria-current] { background: var(--nuit-ligne); color: var(--givre) !important; }

/* Hero */
.hero .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 48px; padding-top: clamp(48px, 8vw, 88px); padding-bottom: clamp(48px, 7vw, 72px); }
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.chart { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 200px; border-bottom: 1px solid #3d5a6e; }
.bars span { flex: 1; background: var(--glace); }
.bars span.now { background: var(--givre); }
.chart-axis { display: flex; justify-content: space-between; gap: 8px; font: 400 13px/1.4 var(--mono); letter-spacing: .08em; color: var(--nuit-label); }
.chart-axis span { white-space: nowrap; }
.chart-axis .delta { color: var(--glace); }

/* Sections */
section.band { padding: clamp(56px, 8vw, 96px) 0; }
.section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; max-width: 760px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* Ruler separator */
.ruler { display: flex; justify-content: space-between; align-items: flex-end; height: 14px; }
.ruler i { width: 1px; height: 5px; background: #9bb3c4; }
.ruler i:nth-child(5n+1) { height: 9px; }
.ruler i:nth-child(10n+1) { height: 14px; }

/* Cards */
.card { background: #fff; padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.card p { color: var(--encre); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.card-service { border-top: 6px solid var(--glace); transition: border-color .15s; }
.card-service:hover { border-top-color: var(--signal); }
.card-service .num { font: 500 13px/1 var(--mono); letter-spacing: .14em; color: var(--signal); }
.card-dark { background: var(--nuit); color: var(--givre); justify-content: space-between; }
.card-dark p { color: var(--nuit-texte); }

/* Steps: the chain from probe to report */
.steps { counter-reset: step; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); border-top: 1px solid var(--brume); }
.step { padding: 28px 24px 8px 0; display: flex; flex-direction: column; gap: 10px; }
.step .data { color: var(--signal); }
.step h3 { font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.step p { color: var(--encre); font-size: 16px; line-height: 1.55; }

/* Data elements */
.range { display: flex; gap: 18px; align-items: stretch; }
.range .scale { width: 10px; background: linear-gradient(#f0b35a, var(--glace) 45%, var(--signal)); flex: none; }
.range ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; font: 500 15px/1.3 var(--mono); }
.range .muted { color: var(--ardoise); }
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag { display: inline-flex; gap: 8px; align-items: center; font: 500 13px/1 var(--mono); letter-spacing: .08em; padding: 8px 12px; }
.tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tag-ok { background: var(--ok-bg); color: var(--ok-fg); } .tag-ok::before { background: var(--ok); }
.tag-watch { background: var(--watch-bg); color: var(--watch-fg); } .tag-watch::before { background: var(--watch); }
.tag-break { background: var(--break-bg); color: var(--break-fg); } .tag-break::before { background: var(--break); }
.figure { font-weight: 800; font-size: clamp(52px, 6vw, 64px); letter-spacing: -.03em; line-height: 1; }
.figure small { font-size: 28px; color: var(--glace); }

/* Equipment list */
.equip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1px; background: var(--brume); }
.equip li { flex: 1 1 200px; background: #fff; padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 18px; }
.equip li span { font: 500 13px/1.4 var(--mono); letter-spacing: .08em; color: var(--ardoise); font-weight: 500; }

/* Trial band */
.trial .wrap { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: center; }
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font: 500 15px/1.4 var(--mono); letter-spacing: .04em; }
.checks li::before { content: '→ '; color: var(--signal); }

/* Footer */
.site-footer { border-top: 1px solid var(--nuit-ligne); }
.site-footer .wrap { padding-top: clamp(48px, 7vw, 72px); padding-bottom: 32px; display: flex; flex-direction: column; gap: 40px; }
.contact { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.contact-list { display: grid; grid-template-columns: 110px minmax(0, 1fr); row-gap: 14px; column-gap: 12px; margin: 0; font: 400 17px/1.4 var(--mono); align-items: baseline; }
.contact-list dt { font-size: 12px; letter-spacing: .14em; color: var(--nuit-label); }
.contact-list dd { margin: 0; overflow-wrap: anywhere; }
.legal { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; border-top: 1px solid var(--nuit-ligne); padding-top: 22px; font: 400 13px/1.4 var(--mono); letter-spacing: .08em; color: var(--nuit-label); }
.legal a { color: var(--nuit-label) !important; }
.legal a:hover { color: var(--givre) !important; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  .card { padding: 24px; }
  .chart-axis { font-size: 11px; letter-spacing: .02em; }
  .contact-list { grid-template-columns: 1fr; row-gap: 4px; }
  .contact-list dd { margin-bottom: 12px; }
}

/* Contact details, masked until a visitor asks: the real values come from the Worker (src/index.ts). */
.contact-side { display: flex; flex-direction: column; gap: 24px; }
.reveal-form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.reveal-note { font: 400 12px/1.4 var(--mono); letter-spacing: .08em; color: var(--nuit-label); }
.card .reveal-form .btn { padding: 12px 20px; font-size: 15px; }
/* Trap for form-filling robots: out of sight and out of the tab order, but still in the form. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Hero chart, live (public/chart.js): bars breathe and follow the cursor; a loop tells an alarm's story, from
   the red bar to the alert, the answers and the return to normal. Without the script the chart stays static. */
.bars { position: relative; }
.bars span { transition: height .7s cubic-bezier(.3, .7, .3, 1), background-color .8s ease; }
.bars span.alarm { background: var(--break); }
.bars span.hot { background: var(--givre); }
.bars .tip { position: absolute; bottom: calc(100% + 8px); flex: none; width: auto; height: auto; background: var(--givre); color: var(--nuit);
  font: 500 12px/1 var(--mono); letter-spacing: .06em; padding: 6px 8px; white-space: nowrap; pointer-events: none;
  transform: translateX(-50%); opacity: 0; transition: opacity .15s; }
.bars .tip.on { opacity: 1; }
.chart-axis .delta { transition: color .6s; }
.chart-axis .delta.alarm { color: #f08a7e; }
.story { display: none; }
.chart.is-live .story { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 150px; }
.msg { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 0; padding: 9px 12px; max-width: 100%;
  font-size: 15px; line-height: 1.35; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s, border-color .6s, background-color .6s; }
.msg.on { opacity: 1; transform: none; }
.msg-label { font: 500 11px/1.3 var(--mono); letter-spacing: .12em; }
.msg-alert { align-self: flex-start; background: rgba(210, 74, 60, .16); border-left: 3px solid var(--break); color: var(--givre); }
.msg-alert .msg-label { color: #f08a7e; }
.msg-alert.resolved { background: rgba(46, 158, 110, .16); border-left-color: var(--ok); }
.msg-alert.resolved .msg-label { color: #7fd1ad; }
.msg-reply { align-self: flex-end; background: var(--givre); color: var(--nuit); }
.msg-reply .msg-label { color: var(--ardoise); }
@media (max-width: 480px) { .chart.is-live .story { min-height: 170px; } .msg { font-size: 14px; } }